EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3814 styles: Improve side modal widths

main
Pau Ferrer Ocaña 2022-03-01 15:38:39 +01:00
parent d973bd3028
commit a91b19aedb
3 changed files with 21 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/globals.variables.scss
View File

@ -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;

36
src/theme/theme.base.scss
View File

@ -628,55 +628,31 @@ body.core-iframe-fullscreen ion-router-outlet {
z-index: 100000 !important; z-index: 100000 !important;
} }
.core-modal-lateral .modal-wrapper {
@include margin-horizontal(16px, null);
}
@media only screen and (min-height: 400px) and (min-width: #{$modal-lateral-width}) {
.core-modal-lateral { .core-modal-lateral {
--ion-safe-area-left: 0px; --ion-safe-area-left: 0px;
--ion-safe-area-right: 0px; --ion-safe-area-right: 0px;
.modal-wrapper { .modal-wrapper {
@include margin-horizontal(var(--modal-lateral-margin), null);
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: auto; width: calc(100% - var(--modal-lateral-margin));
min-width: calc(#{$modal-lateral-width} - 16px); max-width: calc(var(--modal-lateral-max-width));
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 {
@include margin-horizontal(16px, null);
}
@media only screen and (min-height: 400px) and (min-width: #{$width}) {
.core-modal-lateral-#{$breakpoint} { .core-modal-lateral-#{$breakpoint} {
--ion-safe-area-left: 0px; --modal-lateral-max-width: #{$width};
--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.

3
src/theme/theme.light.scss
View File

@ -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);