diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/sass/components/captions.scss | 4 | ||||
| -rw-r--r-- | src/sass/components/control.scss | 20 | ||||
| -rw-r--r-- | src/sass/lib/css-vars.scss | 131 | ||||
| -rw-r--r-- | src/sass/lib/mixins.scss | 10 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 3 | ||||
| -rw-r--r-- | src/sass/settings/captions.scss | 12 | ||||
| -rw-r--r-- | src/sass/settings/colors.scss | 10 | ||||
| -rw-r--r-- | src/sass/settings/controls.scss | 23 | ||||
| -rw-r--r-- | src/sass/settings/cosmetics.scss | 2 | ||||
| -rw-r--r-- | src/sass/settings/sliders.scss | 2 |
10 files changed, 196 insertions, 21 deletions
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss index 1cfca92e..b8e2d771 100644 --- a/src/sass/components/captions.scss +++ b/src/sass/components/captions.scss @@ -10,7 +10,7 @@ .plyr__captions { animation: plyr-fade-in 0.3s ease; bottom: 0; - color: $plyr-captions-color; + color: var(--plyr-captions-text-color); display: none; font-size: $plyr-font-size-captions-small; left: 0; @@ -21,7 +21,7 @@ width: 100%; .plyr__caption { - background: $plyr-captions-bg; + background: var(--plyr-captions-background); border-radius: 2px; box-decoration-break: clone; line-height: 185%; diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index 1c9aab2b..eedcab13 100644 --- a/src/sass/components/control.scss +++ b/src/sass/components/control.scss @@ -5,21 +5,21 @@ .plyr__control { background: transparent; border: 0; - border-radius: $plyr-control-radius; + border-radius: var(--plyr-control-radius); color: inherit; cursor: pointer; flex-shrink: 0; overflow: visible; // IE11 - padding: $plyr-control-padding; + padding: var(--plyr-control-padding); position: relative; transition: all 0.3s ease; svg { display: block; fill: currentColor; - height: $plyr-control-icon-size; + height: var(--plyr-control-icon-size); pointer-events: none; - width: $plyr-control-icon-size; + width: var(--plyr-control-icon-size); } // Default focus @@ -71,18 +71,18 @@ a.plyr__control { &.plyr__tab-focus, &:hover, &[aria-expanded='true'] { - background: $plyr-video-control-bg-hover; - color: $plyr-video-control-color-hover; + background: var(--plyr-video-control-bg-hover); + color: var(--plyr-video-control-color-hover); } } // Large play button (video only) .plyr__control--overlaid { - background: rgba($plyr-video-control-bg-hover, 0.8); + background: var(--plyr-video-control-bg-hover); border: 0; border-radius: 100%; box-shadow: 0 1px 1px rgba(#000, 0.15); - color: $plyr-video-control-color; + color: var(--plyr-video-control-color); display: none; left: 50%; padding: ceil($plyr-control-spacing * 1.5); @@ -93,13 +93,13 @@ a.plyr__control { // Offset icon to make the play button look right svg { - left: 2px; + left: 2px; // Offset to make the play button look right position: relative; } &:hover, &:focus { - background: $plyr-video-control-bg-hover; + background: var(--plyr-video-control-bg-hover); } } diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss new file mode 100644 index 00000000..cb251831 --- /dev/null +++ b/src/sass/lib/css-vars.scss @@ -0,0 +1,131 @@ +// Downloaded from https://github.com/malyw/css-vars + +//// VARIABLES //// + +// 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; + +// enables the output of debug messages +$css-vars-debug-log: false !default; + +//// FUNCTIONS //// + +/// +// Assigns a variable to the global map +/// +@function _cssVarAssign($varName: null, $varValue: null) { + // CHECK PARAMS + @if ($varName==null) { + @error 'Variable name is expected, instead got: null'; + } + @if ($varValue==null) { + @error 'Variable value is expected, instead got: null'; + } + + // assign to the global map + @if ($css-vars-debug-log and map-get($css-vars, $varName)) { + @debug "'#{$varName}' variable is reassigned"; + } + + @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-bg, 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 + $varName: nth($args, 1); + $varValue: map-get($css-vars, $varName); + + @if ($css-vars-debug-log or not $css-vars-use-native) { + // Sass or debug + @if ($varValue==null) { + // variable is not provided so far + @if (length($args) ==2) { + // the default value is passed + @if ($css-vars-debug-log) { + @debug "Provided default value is used for the variable: '#{$varName}'"; + } + $varValue: nth($args, 2); + } @else if ($css-vars-debug-log) { + @debug "Variable '#{$varName}' is not assigned"; + @if (not $css-vars-use-native) { + @debug "The 'var(#{$varName}...)' usage will be skipped in the output CSS"; + } + } + } + } + + @if ($css-vars-use-native) { + // CSS variables + // Native CSS: don't process function in case of native + @return unquote('var(' + $args + ')'); + } @else { + // Sass: return value from the map + @return $varValue; + } +} + +//// MIXIN //// + +/// +// CSS mixin to provide variables +// E.G.: +// @include css-vars(( +// --color: rebeccapurple, +// --height: 68px, +// --margin-top: calc(2vh + 20px) +// )); +/// +@mixin css-vars($varMap: null) { + // CHECK PARAMS + @if ($varMap==null) { + @error 'Map of variables is expected, instead got: null'; + } + @if (type_of($varMap) !=map) { + @error 'Map of variables is expected, instead got another type passed: #{type_of($varMap)}'; + } + + // PROCESS + @if ($css-vars-debug-log or not $css-vars-use-native) { + // Sass or debug + // merge variables and values to the global map (provides no output) + @each $varName, $varValue in $varMap { + $css-vars: _cssVarAssign($varName, $varValue) !global; // store in global variable + } + } + + @if ($css-vars-use-native) { + // CSS variables + // Native CSS: assign CSS custom properties to the global scope + @at-root :root { + @each $varName, $varValue in $varMap { + @if (type_of($varValue) ==string) { + #{$varName}: $varValue; // to prevent quotes interpolation + } @else { + #{$varName}: #{$varValue}; + } + } + } + } +} diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index 554c66a5..acd8af1e 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 diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 468c534c..7d69871c 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -5,6 +5,9 @@ // ========================================================================== @charset 'UTF-8'; +@import 'lib/css-vars'; +$css-vars-use-native: true; + @import 'settings/breakpoints'; @import 'settings/colors'; @import 'settings/cosmetics'; diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss index 0c259046..46c9cfc8 100644 --- a/src/sass/settings/captions.scss +++ b/src/sass/settings/captions.scss @@ -2,9 +2,17 @@ // Captions // ========================================================================== -$plyr-captions-bg: rgba(#000, 0.8) !default; -$plyr-captions-color: #fff !default; +$plyr-captions-background: rgba(#000, 0.8) !default; +$plyr-captions-text-color: #fff !default; + $plyr-font-size-captions-base: $plyr-font-size-base !default; $plyr-font-size-captions-small: $plyr-font-size-small !default; $plyr-font-size-captions-medium: $plyr-font-size-large !default; $plyr-font-size-captions-large: $plyr-font-size-xlarge !default; + +@include css-vars( + ( + --plyr-captions-background: $plyr-captions-background, + --plyr-captions-text-color: $plyr-captions-text-color + ) +); diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss index c9ea580c..5a2f4e82 100644 --- a/src/sass/settings/colors.scss +++ b/src/sass/settings/colors.scss @@ -7,3 +7,13 @@ $plyr-color-gunmetal: #2f343d !default; $plyr-color-fiord: #4f5b5f !default; $plyr-color-lynch: #6b7d85 !default; $plyr-color-heather: #b7c5cd !default; + +@include css-vars( + ( + --plyr-color-main: $plyr-color-main, + --plyr-color-gunmetal: $plyr-color-gunmetal, + --plyr-color-fiord: $plyr-color-fiord, + --plyr-color-lynch: $plyr-color-lynch, + --plyr-color-heather: $plyr-color-heather + ) +); diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index d6d2c153..906744b2 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -10,9 +10,26 @@ $plyr-control-radius: 3px !default; $plyr-video-controls-bg: #000 !default; $plyr-video-control-color: #fff !default; $plyr-video-control-color-hover: #fff !default; -$plyr-video-control-bg-hover: $plyr-color-main !default; +$plyr-video-control-bg-hover: var(--plyr-color-main) !default; $plyr-audio-controls-bg: #fff !default; -$plyr-audio-control-color: $plyr-color-fiord !default; +$plyr-audio-control-color: var(--plyr-color-fiord) !default; $plyr-audio-control-color-hover: #fff !default; -$plyr-audio-control-bg-hover: $plyr-color-main !default; +$plyr-audio-control-bg-hover: var(--plyr-color-main) !default; + +@include css-vars( + ( + --plyr-control-icon-size: $plyr-control-icon-size, + --plyr-control-spacing: $plyr-control-spacing, + --plyr-control-padding: $plyr-control-padding, + --plyr-control-radius: $plyr-control-radius, + --plyr-video-controls-bg: $plyr-video-controls-bg, + --plyr-video-control-color: $plyr-video-control-color, + --plyr-video-control-color-hover: $plyr-video-control-color-hover, + --plyr-video-control-bg-hover: $plyr-video-control-bg-hover, + --plyr-audio-controls-bg: $plyr-audio-controls-bg, + --plyr-audio-control-color: $plyr-audio-control-color, + --plyr-audio-control-color-hover: $plyr-audio-control-color-hover, + --plyr-audio-control-bg-hover: $plyr-audio-control-bg-hover + ) +); diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss index d6e4b86d..80063850 100644 --- a/src/sass/settings/cosmetics.scss +++ b/src/sass/settings/cosmetics.scss @@ -3,3 +3,5 @@ // ========================================================================== $plyr-tab-focus-default-color: $plyr-color-main !default; + +@include css-vars((--plyr-tab-focus-default-color: $plyr-tab-focus-default-color)); diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss index 6ac053b0..3d77f485 100644 --- a/src/sass/settings/sliders.scss +++ b/src/sass/settings/sliders.scss @@ -16,7 +16,7 @@ $plyr-range-track-height: 5px !default; $plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default; // Fill -$plyr-range-fill-bg: $plyr-color-main !default; +$plyr-range-fill-bg: var(--plyr-color-main); // Type specific $plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default; |