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

MOBILE-3833 theme: Improve bootstrap alert colors

main
Pau Ferrer Ocaña 2021-09-21 15:42:12 +02:00
parent 137587d50f
commit 12148dbf7d
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -548,7 +548,7 @@ core-rich-text-editor .core-rte-editor {
--color-base: var(--ion-color-#{$color-name}); --color-base: var(--ion-color-#{$color-name});
color: var(--color-base); color: var(--color-base);
border-color: var(--color-base); border-color: var(--color-base);
background-color: var(--ion-color-#{$color-name}-tint); background-color: var(--ion-color-#{$color-name}-lighter);
.alert-link { .alert-link {
color: var(--ion-color-#{$color-name}-shade); color: var(--ion-color-#{$color-name}-shade);

9
src/theme/globals.mixins.ionic.scss
View File

@ -54,8 +54,8 @@
// Mixes a color with white to create its tint. // Mixes a color with white to create its tint.
// -------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------
@function get-color-tint($color) { @function get-color-tint($color, $percent: 10%) {
@return mix(#fff, $color, 10%); @return mix(#fff, $color, $percent);
} }
// Converts a color to a comma separated rgb. // Converts a color to a comma separated rgb.
@ -65,7 +65,7 @@
} }
// Ionic Colors // Ionic Colors
// -------------------------------------------------- // --------------------------------------------------
// Generates the color classes and variables based on the // Generates the color classes and variables based on the
// colors map // colors map
@ -76,6 +76,7 @@
$contrast: get_contrast_color($base); $contrast: get_contrast_color($base);
$shade: get-color-shade($base); $shade: get-color-shade($base);
$tint: get-color-tint($base); $tint: get-color-tint($base);
$lighter: get-color-tint($base, 90%);
--ion-color-#{$color-name}: var(--#{$color-name}, #{$base}); --ion-color-#{$color-name}: var(--#{$color-name}, #{$base});
--ion-color-#{$color-name}-base: var(--ion-color-#{$color-name}); --ion-color-#{$color-name}-base: var(--ion-color-#{$color-name});
@ -84,6 +85,7 @@
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)}; --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
--ion-color-#{$color-name}-shade: #{$shade}; --ion-color-#{$color-name}-shade: #{$shade};
--ion-color-#{$color-name}-tint: #{$tint}; --ion-color-#{$color-name}-tint: #{$tint};
--ion-color-#{$color-name}-lighter: #{$lighter};
.ion-color-#{$color-name} { .ion-color-#{$color-name} {
--ion-color: var(--ion-color-#{$color-name}); --ion-color: var(--ion-color-#{$color-name});
@ -93,6 +95,7 @@
--ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb); --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb);
--ion-color-shade: var(--ion-color-#{$color-name}-shade); --ion-color-shade: var(--ion-color-#{$color-name}-shade);
--ion-color-tint: var(--ion-color-#{$color-name}-tint); --ion-color-tint: var(--ion-color-#{$color-name}-tint);
--ion-color-lighter: var(--ion-color-#{$color-name}-lighter);
} }
} }