Skip to content

Commit

Permalink
work for #7116 Semi-transparency drop-down menu issue.
Browse files Browse the repository at this point in the history
  • Loading branch information
OlgaLarina committed Oct 24, 2023
1 parent 5c5a26f commit 76452fa
Showing 1 changed file with 61 additions and 84 deletions.
145 changes: 61 additions & 84 deletions src/common-styles/sv-popup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,23 +57,16 @@ sv-popup {

padding: calcSize(11) calcSize(15);
box-sizing: border-box;

.sv-popup__body-content {
padding: calcSize(4);
height: auto;
}
}

.sv-popup--confirm-delete {
.sv-popup--confirm-delete > .sv-popup__container {
border-radius: calcSize(1);

.sv-popup__shadow {
height: initial;
}

.sv-popup__container {
border-radius: calcSize(1);
}

.sv-popup__body-content {
& > .sv-popup__shadow > .sv-popup__body-content {
border-radius: calcSize(1);
}

Expand Down Expand Up @@ -103,33 +96,34 @@ sv-popup {
}
}

.sv-popup--modal>.sv-popup__container {
.sv-popup--modal > .sv-popup__container {
position: static;
}

.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
padding: calcSize(4);
height: auto;
box-shadow: $shadow-large;
background-color: $background-dim-light;

.sv-popup__body-footer {
padding-bottom: 2px;
}
}

.sv-popup--overlay {
width: 100%;
height: $popup-overlay-height;
}

.sv-popup__container {
background: $background-semitransparent;
max-width: 100vw;
max-height: calc(#{$popup-overlay-height} - 1 * #{$base-unit});
height: calc(#{$popup-overlay-height} - 1 * #{$base-unit});
width: 100%;
padding-top: calcSize(2);
border: unset;
}

.sv-popup__body-content {
max-height: $popup-overlay-height;
max-width: 100vw;
border-radius: calcCornerRadius(4) calcCornerRadius(4) 0px 0px;
background: $background;
box-shadow: $shadow-large;
padding: calcSize(3) calcSize(2) calcSize(2);
height: calc(100% - calc(1 * #{$base-unit}));
}
.sv-popup--overlay > .sv-popup__container {
background: $background-semitransparent;
max-width: 100vw;
max-height: calc(#{$popup-overlay-height} - 1 * #{$base-unit});
height: calc(#{$popup-overlay-height} - 1 * #{$base-unit});
width: 100%;
padding-top: calcSize(2);
border: unset;

.sv-popup__scrolling-content {
height: calc(100% - (10 * var(--base-unit, 8px)));
Expand All @@ -143,6 +137,10 @@ sv-popup {
width: 100%;
}

.sv-popup__body-footer .sv-action {
flex: 1 0 0;
}

.sv-popup__body-footer-item {
width: 100%;
}
Expand All @@ -154,10 +152,15 @@ sv-popup {
}
}

.sv-popup--overlay {
.sv-popup__body-footer .sv-action {
flex: 1 0 0;
}
.sv-popup--overlay > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
background-color: $background-dim;
max-height: $popup-overlay-height;
max-width: 100vw;
border-radius: calcCornerRadius(4) calcCornerRadius(4) 0px 0px;
background: $background;
box-shadow: $shadow-large;
padding: calcSize(3) calcSize(2) calcSize(2);
height: calc(100% - calc(1 * #{$base-unit}));
}

.sv-popup--modal .sv-popup__scrolling-content {
Expand Down Expand Up @@ -205,15 +208,15 @@ sv-popup {
}
}

.sv-popup--show-pointer.sv-popup--right .sv-popup__container {
.sv-popup--show-pointer.sv-popup--right > .sv-popup__container {
transform: translate(calcSize(1));

.sv-popup__pointer {
transform: translate(-12px, -4px) rotate(-90deg);
}
}

.sv-popup--show-pointer.sv-popup--left .sv-popup__container {
.sv-popup--show-pointer.sv-popup--left > .sv-popup__container {
transform: translate(calcSize(-1));

.sv-popup__pointer {
Expand Down Expand Up @@ -271,61 +274,46 @@ sv-popup {
}
}

.sv-popup--dropdown {
.sv-list__filter {
margin-bottom: calcSize(1);
}

.sv-popup__shadow {
box-shadow: $shadow-medium;
}

.sv-popup__body-content {
background-color: $background;
padding: calcSize(1) 0;
height: 100%;
}
}

.sv-popup.sv-popup--dropdown .sv-popup__body-content .sv-list {
background-color: transparent;
.sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow {
box-shadow: $shadow-medium;
}
.sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
background-color: $background;
padding: calcSize(1) 0;
height: 100%;

.sv-dropdown-popup {
.sv-popup__body-content {
padding: calcSize(0.5) 0;
.sv-list {
background-color: transparent;
}

.sv-list__filter {
margin-bottom: 0;
margin-bottom: calcSize(1);
}
}

.sv-popup--modal {
.sv-popup__body-content {
box-shadow: $shadow-large;
background-color: $background-dim-light;
}

.sv-popup__body-footer {
padding-bottom: 2px;
}
}
.sv-dropdown-popup > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
padding: calcSize(0.5) 0;

.sv-popup--overlay {
.sv-popup__body-content {
background-color: $background-dim;
.sv-list__filter {
margin-bottom: 0;
}
}

//styles for dropdown overlay
.sv-popup--dropdown-overlay {
z-index: 2001;
padding: 0;
}

.sv-popup--dropdown-overlay > .sv-popup__container {
max-height: calc(var(--sv-popup-overlay-height, 100vh));
height: calc(var(--sv-popup-overlay-height, 100vh));
padding-top: 0;

.sv-popup__body-content {
padding: 0;
border-radius: 0;
height: calc(var(--sv-popup-overlay-height, 100vh));
}

.sv-popup__body-footer .sv-action-bar {
Expand All @@ -344,16 +332,6 @@ sv-popup {
margin: 0;
}

.sv-popup__container {
max-height: calc(var(--sv-popup-overlay-height, 100vh));
height: calc(var(--sv-popup-overlay-height, 100vh));
padding-top: 0;
}

.sv-popup__body-content {
height: calc(var(--sv-popup-overlay-height, 100vh));
}

.sv-popup__body-footer {
background-color: $background-dim;
margin-top: 0;
Expand Down Expand Up @@ -503,8 +481,7 @@ sv-popup {
}
}


.sv-popup--dropdown-overlay.sv-popup--tablet {
.sv-popup--dropdown-overlay.sv-popup--tablet > .sv-popup__container {
.sv-popup__body-content {
--sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - #{$base-unit} * 8);
--sv-popup-overlay-max-width: calc(100% - #{$base-unit} * 8);
Expand Down

0 comments on commit 76452fa

Please sign in to comment.