Skip to content

fix(common): removing unnecessary borders and fixing popover's background (#UIM-396) #449

Merged
merged 6 commits into from
Apr 16, 2020
Merged

fix(common): removing unnecessary borders and fixing popover's background (#UIM-396) #449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2457bbe
fix(common): removing unnecessary borders
Apr 6, 2020
4965625
fix(common): making footer borders transparent in light theme
Apr 8, 2020
c71b41e
fix(popover): popover background is fixed
Apr 9, 2020
d8ec330
fix(common): fixing common popup divider color
Apr 15, 2020
05ebb9c
fix(common): fixing popover component theming
Apr 15, 2020
f274b7f
Merge branch 'master' into bugfix/UIM-396-removing_unnecessary_borders
Apr 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 8 additions & 12 deletions packages/mosaic/core/theming/_components-theming.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
Expand Down Expand Up @@ -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: (
Expand Down Expand Up @@ -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: (
Expand Down Expand Up @@ -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: (
Expand Down
9 changes: 5 additions & 4 deletions packages/mosaic/modal/_modal-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
}

Expand All @@ -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;
}
}
Expand Down
11 changes: 7 additions & 4 deletions packages/mosaic/popover/_popover-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -24,7 +27,7 @@
}

.mc-popover__header {
border-bottom-color: map-get($foreground, divider);
border-bottom-color: $divider-color;
}

.mc-popover__header,
Expand All @@ -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 {
Expand Down
7 changes: 4 additions & 3 deletions packages/mosaic/sidepanel/_sidepanel-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
}
Expand Down