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

MOBILE-4059 theme: Fix spacing

main
Noel De Martin 2022-11-14 11:02:09 +01:00
parent a1dc1ec631
commit a9da1961d9
1 changed files with 48 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/theme/helpers/custom.mixins.scss
View File

@ -11,63 +11,62 @@
// -------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------
@function get-color-shade-percent($color, $percent: 48%) { @function get-color-shade-percent($color, $percent: 48%) {
@return mix(#000, $color, $percent); @return mix(#000, $color, $percent);
} }
// Mixes a color with white to create its tint. // Mixes a color with white to create its tint.
// Default to bootstrap level -10. // Default to bootstrap level -10.
// -------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------
@function get-color-tint-percent($color, $percent: 80%) { @function get-color-tint-percent($color, $percent: 80%) {
@return mix(#fff, $color, $percent); @return mix(#fff, $color, $percent);
} }
// 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
@mixin generate-color($color-name, $colors, $theme) { @mixin generate-color($color-name, $colors, $theme) {
$color-themes: map-get($colors, $color-name); $color-themes: map-get($colors, $color-name);
$base: map-get($color-themes, $theme); $base: map-get($color-themes, $theme);
@if $theme == 'dark' { @if $theme == 'dark' {
$base: mix(map-get($color-themes, 'light'), white, 80%) !default; $base: mix(map-get($color-themes, 'light'), white, 80%) !default;
} }
@include generate-color-variants($color-name, $base); @include generate-color-variants($color-name, $base);
} }
@mixin generate-color-variants($color-name, $base) { @mixin generate-color-variants($color-name, $base) {
$contrast: get_contrast_color($base); $contrast: get_contrast_color($base);
$shade: get-color-shade-percent($base); $shade: get-color-shade-percent($base);
$tint: get-color-tint-percent($base); $tint: get-color-tint-percent($base);
--#{$color-name}: #{$base}; --#{$color-name}: #{$base};
--#{$color-name}-shade: #{$shade}; --#{$color-name}-shade: #{$shade};
--#{$color-name}-tint: #{$tint}; --#{$color-name}-tint: #{$tint};
--#{$color-name}-contrast: #{$contrast}; --#{$color-name}-contrast: #{$contrast};
// Internal ionic use only. // Internal ionic use only.
--ion-color-#{$color-name}: var(--#{$color-name}); --ion-color-#{$color-name}: var(--#{$color-name});
--ion-color-#{$color-name}-base: var(--ion-color-#{$color-name}); --ion-color-#{$color-name}-base: var(--ion-color-#{$color-name});
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)}; --ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
--ion-color-#{$color-name}-contrast: #{$contrast}; --ion-color-#{$color-name}-contrast: #{$contrast};
--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} { .ion-color-#{$color-name} {
--ion-color: var(--ion-color-#{$color-name}); --ion-color: var(--ion-color-#{$color-name});
--ion-color-base: var(--ion-color-#{$color-name}-base); --ion-color-base: var(--ion-color-#{$color-name}-base);
--ion-color-rgb: var(--ion-color-#{$color-name}-rgb); --ion-color-rgb: var(--ion-color-#{$color-name}-rgb);
--ion-color-contrast: var(--ion-color-#{$color-name}-contrast); --ion-color-contrast: var(--ion-color-#{$color-name}-contrast);
--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);
} }
} }
@mixin core-focus() {
@mixin core-focus() {
outline: none; outline: none;
position: relative; position: relative;
&::after { &::after {
@ -78,9 +77,9 @@
z-index: 1; z-index: 1;
@include core-focus-style(); @include core-focus-style();
} }
} }
@mixin core-focus-style() { @mixin core-focus-style() {
box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color); box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
// Thicker option: // Thicker option:
// border: var(--a11y-focus-width) solid var(--a11y-focus-color); // border: var(--a11y-focus-width) solid var(--a11y-focus-color);
@ -262,7 +261,7 @@
@return if($yiq >= 128, $dark, $light); @return if($yiq >= 128, $dark, $light);
} }
// WCAG contrast algorythm // WCAG contrast algorithm
@function check-contrast($foreground, $background) { @function check-contrast($foreground, $background) {
$foregroundLumiance: luminance($foreground); $foregroundLumiance: luminance($foreground);
$backgroundLuminance: luminance($background); $backgroundLuminance: luminance($background);