fix(common): removing unnecessary borders and fixing popover's backgr…

…ound (#UIM-396) (#449)
positive-js · Apr 16, 2020 · 91edafd · 91edafd
1 parent 5c66fb3
commit 91edafd
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 23 deletions.
diff --git a/packages/mosaic/core/theming/_components-theming.scss b/packages/mosaic/core/theming/_components-theming.scss
@@ -11,9 +11,10 @@
     $popup-common: (
         shadow: 0 3px 3px 0 mc-color($second, A200),
         border-color: mc-color($second),
-        background: white,
+        divider-color: mc-color($second, 200),
 
-        footer_background-color: map-get($second, 60)
+        background: map-get($background, background-popup),
+        footer_background-color: map-get($background, background-popup-footer)
     );
 
     $button: (
@@ -77,10 +78,7 @@
     );
 
     $popover: (
-        background-color: map-get($background, background),
-        border-color: map-get($foreground, text-disabled),
-
-        footer_background-color: map-get($background, background-disabled),
+        border-color: map-get($foreground, border),
     );
 
     $progress-bar: (
@@ -198,9 +196,10 @@
     $popup-common: (
         shadow: 0 3px 3px 0 mc-color($second, A200),
         border-color: mc-color($second),
-        background: map-get($mc-grey, 700),
+        divider-color: mc-color($foreground, divider),
 
-        footer_background-color: transparent,
+        background: map-get($background, background-popup),
+        footer_background-color: map-get($background, background-popup-footer)
     );
 
     $button: (
@@ -266,10 +265,7 @@
     );
 
     $popover: (
-        background-color: map-get($background, background),
-        border-color: map-get($background, background),
-
-        footer_background-color: map-get($background, background-disabled),
+        border-color: mc-color($second, 700),
     );
 
     $progress-bar: (

diff --git a/packages/mosaic/modal/_modal-theme.scss b/packages/mosaic/modal/_modal-theme.scss
@@ -9,17 +9,18 @@
 
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
+    $is-dark: map-get($theme, is-dark);
 
     $popup-common: map-get(map-get($theme, components), popup-common);
     $footer_background-color: map-get($popup-common, footer_background-color);
 
     $modal: map-get(map-get($theme, components), modal);
 
-    $divider-color: mc-color($foreground, divider);
+    $divider-color: mc-color($popup-common, divider-color);
 
     .mc-modal {
         .mc-modal-content {
-            // почему у модалки такой бэкграунд ?
+            // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
             background-color: map-get($background, background);
 
             box-shadow: map-get($modal, shadow);
@@ -34,7 +35,7 @@
         }
 
         .mc-modal-footer {
-            border-top: 1px solid $divider-color;
+            border-top: 1px solid if($is-dark, $divider-color, transparent);
             background-color: $footer_background-color;
         }
 
@@ -55,7 +56,7 @@
 
     .mc-confirm {
         .mc-confirm-btns {
-            border-top: 1px solid $divider-color;
+            border-top: 1px solid if($is-dark, $divider-color, transparent);
             background-color: $footer_background-color;
         }
     }

diff --git a/packages/mosaic/popover/_popover-theme.scss b/packages/mosaic/popover/_popover-theme.scss
@@ -6,12 +6,15 @@
 
 @mixin mc-popover-theme($theme) {
     $foreground: map-get($theme, foreground);
+    $is-dark: map-get($theme, is-dark);
 
+    $popup-common: map-get(map-get($theme, components), popup-common);
     $popover: map-get(map-get($theme, components), popover);
 
-    $background-color: map-get($popover, background-color);
-    $footer_background-color: map-get($popover, footer_background-color);
+    $background-color: map-get($popup-common, background);
+    $footer_background-color: if($is-dark, $background-color, map-get($popup-common, footer_background-color));
     $border-color: map-get($popover, border-color);
+    $divider-color: map-get($popup-common, divider-color);
 
     .mc-popover {
         border-color: $border-color;
@@ -24,7 +27,7 @@
     }
 
     .mc-popover__header {
-        border-bottom-color: map-get($foreground, divider);
+        border-bottom-color: $divider-color;
     }
 
     .mc-popover__header,
@@ -34,7 +37,7 @@
 
     .mc-popover__footer {
         background-color: $footer_background-color;
-        border-top-color: map-get($foreground, divider);
+        border-top-color: if($is-dark, $divider-color, transparent);
     }
 
     .mc-popover .mc-popover__arrow {

diff --git a/packages/mosaic/sidepanel/_sidepanel-theme.scss b/packages/mosaic/sidepanel/_sidepanel-theme.scss
@@ -5,13 +5,14 @@
 @mixin mc-sidepanel-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
-
-    $divider-color: mc-color($foreground, divider);
+    $is-dark: map-get($theme, is-dark);
 
     $popup-common: map-get(map-get($theme, components), popup-common);
 
     $sidepanel: map-get(map-get($theme, components), sidepanel);
 
+    $divider-color: mc-color($popup-common, divider-color);
+
     .mc-sidepanel-content {
         background-color: map-get($background, background);
     }
@@ -55,7 +56,7 @@
     }
 
     .mc-sidepanel-footer {
-        border-top: 1px solid $divider-color;
+        border-top: 1px solid  if($is-dark, $divider-color, transparent);
         background-color: map-get($popup-common, footer_background-color);
     }
 }