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

MOBILE-4458 design: Remove some legacy rgba function usage

main
Pau Ferrer Ocaña 2024-03-05 10:16:29 +01:00
parent 9660be8228
commit c7d6fff02f
11 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/core/components/message/message.scss
View File

@ -34,8 +34,8 @@
overflow: visible;
&:hover {
-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
-webkit-filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
}
&[tappable]:active {

2
src/core/features/block/components/side-blocks-button/side-blocks-button.scss
View File

@ -12,7 +12,7 @@
--padding-end: 0;
--border-radius: 2em 0 0 2em;
height: 56px;
--box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
--box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
&::part(native) {
@include core-transition(padding, 200ms);

4
src/core/features/courses/components/course-list-item/course-list-item.scss
View File

@ -20,7 +20,7 @@
--button-size: 44px;
--button-padding: 10px;
--button-radius: 50%;
--button-background: rgba(255,255,255,0.5);
--button-background: rgb(255 255 255 / 50%);
@include media-breakpoint-down(md) {
--avatar-size: 48px;
@ -30,7 +30,7 @@
:host-context(html.dark) {
--button-background: rgba(0, 0, 0, 0.3);
--button-background: rgb(0 0 0 / 30%);
}
// Common styles.

2
src/core/features/login/pages/site/site.scss
View File

@ -84,7 +84,7 @@
display: flex;
align-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
background-color: rgb(255 255 255 / 50%);
z-index: 1;
ion-spinner {
margin: 0 auto;

2
src/core/features/question/question.scss
View File

@ -25,7 +25,7 @@
font-weight: bold;
line-height: 14px;
color: var(--white);
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
background-color: var(--gray-500);
-webkit-border-radius: 3px;
border-radius: 3px;

4
src/core/features/usertours/components/user-tour/user-tour.scss
View File

@ -9,7 +9,7 @@
.user-tour-focus {
position: absolute;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
box-shadow: 0 0 0 9999px rgb(0 0 0 / 75%);
}
.user-tour-overlay {
@ -18,7 +18,7 @@
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
background: rgb(0 0 0 / 75%);
}
.user-tour-wrapper {

8
src/theme/components/format-text.scss
View File

@ -5,11 +5,11 @@
core-format-text {
--core-format-text-background: var(--background, var(--ion-item-background));
--core-format-text-viewer-icon-background: rgba(255, 255, 255, .5);
--core-format-text-viewer-icon-background: rgb(255 255 255 / 50%);
}
html.dark core-format-text {
--core-format-text-viewer-icon-background: rgba(0, 0, 0, .5);
--core-format-text-viewer-icon-background: rgb(0 0 0 / 50%);
}
core-format-text {
@ -646,8 +646,8 @@ core-rich-text-editor .core-rte-editor {
.text-body { color: var(--ion-text-color) !important; }
.text-muted { color: var(--subdued-text-color) !important; }
.text-black-50 { color: rgba(0, 0, 0, .5) !important; }
.text-white-50 { color: rgba(255, 255, 255, .5) !important; }
.text-black-50 { color: rgb(0 0 0 / 50%) !important; }
.text-white-50 { color: rgb(255 255 255 / 50%) !important; }
.text-decoration-none { text-decoration: none !important; }
.text-break {
word-break: break-word !important; // Deprecated, but avoids issues with flex containers

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

@ -270,7 +270,7 @@ button,
}
ion-fab-button {
--box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
--box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
}
ion-button {
@ -671,7 +671,7 @@ body.core-iframe-fullscreen ion-router-outlet {
&::part(content) {
backdrop-filter: blur(12px);
--background: rgba(10, 10, 10, 0.2);
--background: rgb(10 10 10 / 20%);
ion-content {
--background: transparent !important;
@ -701,7 +701,7 @@ body.core-iframe-fullscreen ion-router-outlet {
height: 100% !important;
width: calc(100% - var(--modal-lateral-margin));
max-width: calc(var(--modal-lateral-max-width));
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
box-shadow: 0 28px 48px rgb(0 0 0 / 40%);
}
&::part(backdrop) {
@ -1219,7 +1219,7 @@ ion-chip {
&.fab-chip {
padding: 8px 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
box-shadow: 0 2px 4px rgb(0 0 0 / 40%);
}
&.ion-color {
@ -1928,7 +1928,7 @@ swiper-container {
left: -45%;
height: 100%;
width: 45%;
background-image: linear-gradient(to left, rgba(var(--loader-shine), .05), rgba(var(--loader-shine), .3), rgba(var(--loader-shine), .6), rgba(var(--loader-shine), .3), rgba(var(--loader-shine), .05));
background-image: linear-gradient(to left, rgb(var(--loader-shine) / 5%), rgb(var(--loader-shine) / 30%), rgb(var(--loader-shine) / 60%), rgb(var(--loader-shine) / 30%), rgb(var(--loader-shine) / 5%));
animation: loading 1s infinite;
display: block;
top: 0;

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

@ -45,7 +45,7 @@ html.dark {
--contrast-background: var(--gray-900);
--loader-shine: 90, 90, 90;
--loader-shine: 90 90 90;
--drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 1);
--drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 1);

22
src/theme/theme.design-system.scss
View File

@ -80,17 +80,17 @@ html {
// Shadows / Elevation
--drop-shadow-color: 40 40 40; //#282828;
--drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 0.20);
--drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 0.15), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.02);
--drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 0.20),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 0.12),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 0.20),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 0.12),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 20%);
--drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 15%), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 2%);
--drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 20%), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 12%), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 12%), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 12%), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 12%), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 20%), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 12%), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 14%);
// A11y
--a11y-min-target-size: 44px;

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

@ -78,15 +78,15 @@ html {
--contrast-background: white;
--loader-background-color: rgba(0, 0, 0, .1);
--loader-shine: 251, 251, 251;
--loader-background-color: rgb(0 0 0 / 10%);
--loader-shine: 251 251 251;
--loader-radius: var(--radius-xs);
--loader-display: block;
--drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 0.5);
--drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 0.5);
--drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 0.5);
--drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 0.5);
--drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 50%);
--drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 50%);
--drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 50%);
--drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 50%);
--ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-rgb};