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

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

@ -11,21 +11,21 @@
// -------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------
@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);
@ -34,9 +34,9 @@
} }
@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);
@ -64,10 +64,9 @@
--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);