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; overflow: visible;
&:hover { &:hover {
-webkit-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 rgba(0,0,0,.3)); filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
} }
&[tappable]:active { &[tappable]:active {

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

@ -12,7 +12,7 @@
--padding-end: 0; --padding-end: 0;
--border-radius: 2em 0 0 2em; --border-radius: 2em 0 0 2em;
height: 56px; 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) { &::part(native) {
@include core-transition(padding, 200ms); @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-size: 44px;
--button-padding: 10px; --button-padding: 10px;
--button-radius: 50%; --button-radius: 50%;
--button-background: rgba(255,255,255,0.5); --button-background: rgb(255 255 255 / 50%);
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
--avatar-size: 48px; --avatar-size: 48px;
@ -30,7 +30,7 @@
:host-context(html.dark) { :host-context(html.dark) {
--button-background: rgba(0, 0, 0, 0.3); --button-background: rgb(0 0 0 / 30%);
} }
// Common styles. // Common styles.

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

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

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

@ -25,7 +25,7 @@
font-weight: bold; font-weight: bold;
line-height: 14px; line-height: 14px;
color: var(--white); 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); background-color: var(--gray-500);
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
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 { .user-tour-focus {
position: absolute; 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 { .user-tour-overlay {
@ -18,7 +18,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.75); background: rgb(0 0 0 / 75%);
} }
.user-tour-wrapper { .user-tour-wrapper {

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

@ -5,11 +5,11 @@
core-format-text { core-format-text {
--core-format-text-background: var(--background, var(--ion-item-background)); --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 { 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 { core-format-text {
@ -646,8 +646,8 @@ core-rich-text-editor .core-rte-editor {
.text-body { color: var(--ion-text-color) !important; } .text-body { color: var(--ion-text-color) !important; }
.text-muted { color: var(--subdued-text-color) !important; } .text-muted { color: var(--subdued-text-color) !important; }
.text-black-50 { color: rgba(0, 0, 0, .5) !important; } .text-black-50 { color: rgb(0 0 0 / 50%) !important; }
.text-white-50 { color: rgba(255, 255, 255, .5) !important; } .text-white-50 { color: rgb(255 255 255 / 50%) !important; }
.text-decoration-none { text-decoration: none !important; } .text-decoration-none { text-decoration: none !important; }
.text-break { .text-break {
word-break: break-word !important; // Deprecated, but avoids issues with flex containers 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 { 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 { ion-button {
@ -671,7 +671,7 @@ body.core-iframe-fullscreen ion-router-outlet {
&::part(content) { &::part(content) {
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
--background: rgba(10, 10, 10, 0.2); --background: rgb(10 10 10 / 20%);
ion-content { ion-content {
--background: transparent !important; --background: transparent !important;
@ -701,7 +701,7 @@ body.core-iframe-fullscreen ion-router-outlet {
height: 100% !important; height: 100% !important;
width: calc(100% - var(--modal-lateral-margin)); width: calc(100% - var(--modal-lateral-margin));
max-width: calc(var(--modal-lateral-max-width)); 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) { &::part(backdrop) {
@ -1219,7 +1219,7 @@ ion-chip {
&.fab-chip { &.fab-chip {
padding: 8px 12px; 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 { &.ion-color {
@ -1928,7 +1928,7 @@ swiper-container {
left: -45%; left: -45%;
height: 100%; height: 100%;
width: 45%; 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; animation: loading 1s infinite;
display: block; display: block;
top: 0; top: 0;

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

@ -45,7 +45,7 @@ html.dark {
--contrast-background: var(--gray-900); --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-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 1);
--drop-shadow-bottom: 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 // Shadows / Elevation
--drop-shadow-color: 40 40 40; //#282828; --drop-shadow-color: 40 40 40; //#282828;
--drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 0.20); --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) / 0.15), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.02); --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) / 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-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) / 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-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) / 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-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) / 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-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) / 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-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) / 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-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) / 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-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) / 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) / 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) / 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-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
--a11y-min-target-size: 44px; --a11y-min-target-size: 44px;

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

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