MOBILE-3268 styles: Add darkmode to modals

main
Pau Ferrer Ocaña 2020-01-15 15:57:25 +01:00
parent dbac7520ed
commit 97e43767b3
4 changed files with 120 additions and 92 deletions

View File

@ -68,6 +68,9 @@ ion-app.app-root.md {
.action-sheet-title,
.action-sheet-container > .action-sheet-group:first-child {
box-shadow: 0 3px 5px $gray;
@include darkmode() {
box-shadow: 0 3px 5px $black;
}
}
.action-sheet-title {

View File

@ -668,6 +668,9 @@ ion-app.app-root {
.action-sheet-wrapper {
.action-sheet-button.action-sheet-cancel {
color: $core-action-sheet-cancel-color;
@include darkmode() {
color: $core-dark-action-sheet-cancel-color;
}
}
.action-sheet-selected {
color: $core-color;

View File

@ -16,8 +16,24 @@ $core-dark-login-item-background-color: $core-dark-login-box-background-color !d
$core-dark-login-button-outline: $core-login-button-outline !default;
$core-dark-login-loading-color: $core-dark-text-color !default;
ion-app.app-root .ion-page {
ion-app.app-root {
@include darkmode() {
ion-action-sheet .action-sheet-container .action-sheet-group .action-sheet-button {
color: $core-dark-text-color;
&.action-sheet-selected {
color: $core-color;
}
&.activated {
background-color: $black;
}
}
.ion-page,
ion-popover .popover-content,
ion-alert .alert-wrapper,
ion-action-sheet .action-sheet-container .action-sheet-group,
ion-loading .loading-wrapper {
color: $core-dark-text-color;
background-color: $core-dark-item-bg-color;
@ -25,6 +41,10 @@ ion-app.app-root .ion-page {
color: $core-dark-link-color;
}
.alert-message {
color: $core-dark-text-color;
}
.core-tabs-bar,
.core-tabs-bar *,
.core-tabs-bar .tab-slide,
@ -122,4 +142,5 @@ ion-app.app-root .ion-page {
}
}
}
}
}

View File

@ -202,6 +202,7 @@ $core-login-item-background-color: $white !default;
$core-action-sheet-color: $core-color !default;
$core-action-sheet-cancel-color: $danger !default;
$core-dark-action-sheet-cancel-color: $danger-dark !default;
// App iOS Variables
// --------------------------------------------------