MOBILE-3814 styles: Improve side modal widths
parent
d973bd3028
commit
a91b19aedb
|
@ -79,8 +79,6 @@ $screen-breakpoints: (
|
||||||
xl: 1200px
|
xl: 1200px
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
$modal-lateral-width: 360px;
|
|
||||||
|
|
||||||
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
|
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
|
||||||
$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
|
$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
|
||||||
$core-text-hightlight-background-color: lighten($blue, 40%) !default;
|
$core-text-hightlight-background-color: lighten($blue, 40%) !default;
|
||||||
|
|
|
@ -628,55 +628,31 @@ body.core-iframe-fullscreen ion-router-outlet {
|
||||||
z-index: 100000 !important;
|
z-index: 100000 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-modal-lateral .modal-wrapper {
|
.core-modal-lateral {
|
||||||
@include margin-horizontal(16px, null);
|
--ion-safe-area-left: 0px;
|
||||||
}
|
--ion-safe-area-right: 0px;
|
||||||
|
|
||||||
@media only screen and (min-height: 400px) and (min-width: #{$modal-lateral-width}) {
|
.modal-wrapper {
|
||||||
.core-modal-lateral {
|
@include margin-horizontal(var(--modal-lateral-margin), null);
|
||||||
--ion-safe-area-left: 0px;
|
|
||||||
--ion-safe-area-right: 0px;
|
|
||||||
|
|
||||||
.modal-wrapper {
|
position: absolute;
|
||||||
position: absolute;
|
@include position(0 !important, 0 !important, 0 !important, unset !important);
|
||||||
@include position(0 !important, 0 !important, 0 !important, unset !important);
|
display: block;
|
||||||
display: block;
|
height: 100% !important;
|
||||||
height: 100% !important;
|
width: calc(100% - var(--modal-lateral-margin));
|
||||||
width: auto;
|
max-width: calc(var(--modal-lateral-max-width));
|
||||||
min-width: calc(#{$modal-lateral-width} - 16px);
|
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
|
||||||
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
|
}
|
||||||
}
|
|
||||||
ion-backdrop {
|
ion-backdrop {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $breakpoint, $width in $screen-breakpoints {
|
@each $breakpoint, $width in $screen-breakpoints {
|
||||||
.core-modal-lateral-#{$breakpoint} .modal-wrapper {
|
.core-modal-lateral-#{$breakpoint} {
|
||||||
@include margin-horizontal(16px, null);
|
--modal-lateral-max-width: #{$width};
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-height: 400px) and (min-width: #{$width}) {
|
|
||||||
.core-modal-lateral-#{$breakpoint} {
|
|
||||||
--ion-safe-area-left: 0px;
|
|
||||||
--ion-safe-area-right: 0px;
|
|
||||||
|
|
||||||
.modal-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
@include position(0 !important, 0 !important, 0 !important, unset !important);
|
|
||||||
display: block;
|
|
||||||
height: 100% !important;
|
|
||||||
width: auto;
|
|
||||||
min-width: #{$width};
|
|
||||||
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
ion-backdrop {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hidden submit button.
|
// Hidden submit button.
|
||||||
|
|
|
@ -81,6 +81,9 @@
|
||||||
|
|
||||||
--list-item-max-width: 768px;
|
--list-item-max-width: 768px;
|
||||||
|
|
||||||
|
--modal-lateral-max-width: 320px;
|
||||||
|
--modal-lateral-margin: 56px;
|
||||||
|
|
||||||
--contrast-background: white;
|
--contrast-background: white;
|
||||||
|
|
||||||
--ion-text-color: var(--text-color);
|
--ion-text-color: var(--text-color);
|
||||||
|
|
Loading…
Reference in New Issue