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

MOBILE-3814 style: Use box-shadow instead of filters

main
Pau Ferrer Ocaña 2022-03-09 17:56:19 +01:00
parent 74670a2702
commit c626c38acd
5 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/components/collapsible-header.scss
View File

@ -38,7 +38,7 @@
} }
&.is-active.is-collapsed.is-within-content ion-header.core-header-shadow { &.is-active.is-collapsed.is-within-content ion-header.core-header-shadow {
--core-header-shadow: var(--scroll-shadow-bottom, none); --core-header-shadow: var(--drop-shadow-bottom, none);
} }
&.is-active { &.is-active {

1
src/theme/components/discussion.scss
View File

@ -57,6 +57,7 @@ ion-item.addon-message {
} }
&:hover { &:hover {
-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3)); filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
} }

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

@ -510,7 +510,6 @@ ion-toast {
// Ionic list. // Ionic list.
ion-list { ion-list {
padding: 0 !important; padding: 0 !important;
--ion-item-background: transparent;
} }
// Safe areas // Safe areas
@ -740,7 +739,7 @@ body.core-iframe-fullscreen ion-router-outlet {
ion-label { ion-label {
white-space: normal !important; white-space: normal !important;
} }
ion-item > ion-icon { ion-item > ion-icon[slot] {
color: var(--color-shade); color: var(--color-shade);
@include margin-horizontal(null, 16px); @include margin-horizontal(null, 16px);
} }
@ -753,7 +752,7 @@ body.core-iframe-fullscreen ion-router-outlet {
--border-width: 0 0 3px 0; --border-width: 0 0 3px 0;
--border-color: var(--color-base); --border-color: var(--color-base);
--inner-border-width: 0px; --inner-border-width: 0px;
ion-icon { > ion-icon[slot] {
color: var(--color-base); color: var(--color-base);
} }
} }
@ -836,8 +835,7 @@ ion-toolbar h1 .core-bar-button-image img {
// Action sheet. // Action sheet.
.md ion-action-sheet { .md ion-action-sheet {
.action-sheet-group-cancel { .action-sheet-group-cancel {
-webkit-filter: drop-shadow(0px 3px 6px rgba(var(--drop-shadow))); box-shadow: var(--drop-shadow-top, none);
filter: drop-shadow(0px 3px 6px rgba(var(--drop-shadow)));
} }
.action-sheet-title { .action-sheet-title {
@ -1348,7 +1346,10 @@ ion-item.item.divider {
ion-label h2.big { ion-label h2.big {
font-size: var(--item-divider-font-size-big); font-size: var(--item-divider-font-size-big);
} }
}
ion-item-divider.item,
ion-item.item {
.expandable-status-icon { .expandable-status-icon {
font-size: 18px; font-size: 18px;
@include core-transition(transform, 200ms); @include core-transition(transform, 200ms);
@ -1444,8 +1445,7 @@ ion-grid.core-no-grid > ion-row {
margin-bottom: 8px; margin-bottom: 8px;
} }
filter: var(--scroll-shadow-top, none); box-shadow: var(--drop-shadow-top, none);
-webkit-filter: var(--scroll-shadow-top, none);
width: 100%; width: 100%;
bottom: 0; bottom: 0;
z-index: 3; z-index: 3;
@ -1473,6 +1473,7 @@ ion-grid.core-no-grid > ion-row {
ion-header.no-title { ion-header.no-title {
--core-header-toolbar-border-width: 0; --core-header-toolbar-border-width: 0;
--core-header-toolbar-background: transparent; --core-header-toolbar-background: transparent;
--core-header-shadow: none !important;
ion-toolbar .button.button-clear, ion-toolbar .button.button-clear,
ion-toolbar .button.button-solid { ion-toolbar .button.button-solid {

6
src/theme/theme.dark.scss
View File

@ -41,9 +41,9 @@
--contrast-background: var(--gray-900); --contrast-background: var(--gray-900);
--drop-shadow: 0, 0, 0, 1; --drop-shadow-color: 0, 0, 0, 1;
--scroll-shadow-bottom: drop-shadow(0px -3px 3px rgba(var(--drop-shadow))); --drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color));
--scroll-shadow-top: drop-shadow(0px 3px 3px rgba(var(--drop-shadow))); --drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color));
--ion-card-color: var(--text-color); --ion-card-color: var(--text-color);
--ion-card-background: var(--ion-item-background); --ion-card-background: var(--ion-item-background);

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

@ -85,9 +85,9 @@
--contrast-background: white; --contrast-background: white;
--drop-shadow: 0, 0, 0, 0.5; --drop-shadow-color: 0, 0, 0, 0.5;
--scroll-shadow-bottom: drop-shadow(0px -3px 3px rgba(var(--drop-shadow))); --drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color));
--scroll-shadow-top: drop-shadow(0px 3px 3px rgba(var(--drop-shadow))); --drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color));
--ion-text-color: var(--text-color); --ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-rgb}; --ion-text-color-rgb: #{$text-color-rgb};
@ -143,13 +143,10 @@
--core-header-toolbar-color: var(--text-color); --core-header-toolbar-color: var(--text-color);
--core-header-toolbar-height: 48px; --core-header-toolbar-height: 48px;
--core-header-shadow: none; --core-header-shadow: none;
html.ios {
--core-header-toolbar-height: 48px;
}
ion-header { ion-header {
filter: var(--core-header-shadow, none); box-shadow: var(--core-header-shadow, none);
-webkit-filter: var(--core-header-shadow, none); transition: box-shadow 0.5s;
ion-toolbar { ion-toolbar {
--color: var(--core-header-toolbar-color); --color: var(--core-header-toolbar-color);
@ -171,7 +168,7 @@
ion-header.core-header-shadow { ion-header.core-header-shadow {
--core-header-shadow: var(--scroll-shadow-bottom, none); --core-header-shadow: var(--drop-shadow-bottom, none);
} }
ion-header::after { ion-header::after {