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 {
--core-header-shadow: var(--scroll-shadow-bottom, none);
--core-header-shadow: var(--drop-shadow-bottom, none);
}
&.is-active {

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

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

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

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

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

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