diff options
Diffstat (limited to 'src/sass/lib')
| -rw-r--r-- | src/sass/lib/css-vars.scss | 100 | ||||
| -rw-r--r-- | src/sass/lib/mixins.scss | 14 |
2 files changed, 109 insertions, 5 deletions
diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss new file mode 100644 index 00000000..493df3a8 --- /dev/null +++ b/src/sass/lib/css-vars.scss @@ -0,0 +1,100 @@ +// Downloaded from https://github.com/malyw/css-vars (and modified) + +// global map to be filled via variables +$css-vars: (); + +// the variable may be set to "true" anywhere in the code, +// so native CSS custom properties will be used instead of the Sass global map +$css-vars-use-native: false !default; + +/// +// Assigns a variable to the global map +/// +@function css-var-assign($varName: null, $varValue: null) { + @return map-merge( + $css-vars, + ( + $varName: $varValue, + ) + ); +} + +/// +// Emulates var() CSS native function behavior +// +// $args[0] {String} "--" + variable name +// [$args[1]] Optional default value if variable is not assigned yet +// +// E.G.: +// color: var(--main-color); +// background: var(--main-background, green); +/// +@function var($args...) { + // CHECK PARAMS + @if (length($args) ==0) { + @error 'Variable name is expected to be passed to the var() function'; + } + @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') { + @error "Variable name is expected to start from '--'"; + } + + // PROCESS + $var-name: nth($args, 1); + $var-value: map-get($css-vars, $var-name); + + @if ($css-vars-use-native) { + // CSS variables + // Native CSS: don't process function in case of native + @return unquote('var(' + $args + ')'); + } @else { + @if ($var-value == null) { + // variable is not provided so far + @if (length($args) == 2) { + $var-value: nth($args, 2); + } + } + + // Sass: return value from the map + @return $var-value; + } +} + +/// +// SASS mixin to provide variables +// E.G.: +// @include css-vars(( +// --color: rebeccapurple, +// --height: 68px, +// --margin-top: calc(2vh + 20px) +// )); +/// +@mixin css-vars($var-map: null) { + // CHECK PARAMS + @if ($var-map == null) { + @error 'Map of variables is expected, instead got: null'; + } + @if (type_of($var-map) != map) { + @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}'; + } + + // PROCESS + @if ($css-vars-use-native) { + // CSS variables + // Native CSS: assign CSS custom properties to the global scope + @at-root :root { + @each $var-name, $var-value in $var-map { + @if (type_of($var-value) == string) { + #{$var-name}: $var-value; // to prevent quotes interpolation + } @else { + #{$var-name}: #{$var-value}; + } + } + } + } @else { + // Sass or debug + // merge variables and values to the global map (provides no output) + @each $var-name, $var-value in $var-map { + $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable + } + } +} diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index 5a1ca753..2426ef68 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -4,9 +4,13 @@ // Nicer focus styles // --------------------------------------- -@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) { - box-shadow: 0 0 0 5px rgba($color, 0.5); - outline: 0; +@mixin plyr-tab-focus() { + // box-shadow: 0 0 0 5px rgba($color, 0.5); + // outline: 0; + outline-color: var(--plyr-color-main); + outline-offset: 2px; + outline-style: dotted; + outline-width: 3px; } // Font smoothing @@ -33,7 +37,7 @@ } @mixin plyr-range-thumb() { - background: $plyr-range-thumb-bg; + background: $plyr-range-thumb-background; border: 0; border-radius: 100%; box-shadow: $plyr-range-thumb-shadow; @@ -43,7 +47,7 @@ width: $plyr-range-thumb-height; } -@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) { +@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-background, 0.5)) { box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color; } |