diff --git a/packages/mosaic/core/theming/_components-theming.scss b/packages/mosaic/core/theming/_components-theming.scss index 6c0377c19..c90df581e 100644 --- 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 index 9d0be48c9..84b3d72e9 100644 --- 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 index 81bc7f6c0..5687d77d0 100644 --- 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 index 298a82c41..9e2a1f59a 100644 --- 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); } }