From 3e0a91141822758094b2cbd5f0ecdd8ce4142b5f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 26 May 2018 13:37:10 +1000 Subject: WIP --- src/sass/lib/css-vars.scss | 131 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 src/sass/lib/css-vars.scss (limited to 'src/sass/lib') 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}; + } + } + } + } +} -- cgit v1.2.3 From bdd513635fffa33f66735c80209e6ae77e0426b4 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 8 Dec 2018 17:06:20 +1100 Subject: Work on outline/focus styles --- src/sass/lib/mixins.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'src/sass/lib') diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index e015ffee..0a0f7dcb 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 -- cgit v1.2.3 From 996075decc6e8c0f0c5059dccea21b16020eb78b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 11 Apr 2019 20:50:20 +1000 Subject: More work on variable usage --- src/sass/lib/css-vars.scss | 97 ++++++++++++++++------------------------------ 1 file changed, 33 insertions(+), 64 deletions(-) (limited to 'src/sass/lib') diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss index cb251831..074c27c1 100644 --- a/src/sass/lib/css-vars.scss +++ b/src/sass/lib/css-vars.scss @@ -1,6 +1,4 @@ -// Downloaded from https://github.com/malyw/css-vars - -//// VARIABLES //// +// Downloaded from https://github.com/malyw/css-vars (and modified) // global map to be filled via variables $css-vars: (); @@ -9,29 +7,16 @@ $css-vars: (); // 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)); +@function css-var-assign($varName: null, $varValue: null) { + @return map-merge( + $css-vars, + ( + $varName: $varValue, + ) + ); } /// @@ -54,42 +39,28 @@ $css-vars-debug-log: false !default; } // 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"; - } - } - } - } + $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 $varValue; + @return $var-value; } } -//// MIXIN //// - /// -// CSS mixin to provide variables +// SASS mixin to provide variables // E.G.: // @include css-vars(( // --color: rebeccapurple, @@ -97,35 +68,33 @@ $css-vars-debug-log: false !default; // --margin-top: calc(2vh + 20px) // )); /// -@mixin css-vars($varMap: null) { +@mixin css-vars($var-map: null) { // CHECK PARAMS - @if ($varMap==null) { + @if ($var-map == 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)}'; + @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-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 + @each $var-name, $var-value in $var-map { + @if (type_of($var-value) == string) { + #{$var-name}: $var-value; // to prevent quotes interpolation } @else { - #{$varName}: #{$varValue}; + #{$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 + } } } -- cgit v1.2.3 From 502d5977d79148957828cbf313b7ef4c9f31973f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 11 Apr 2020 16:23:14 +1000 Subject: Converted to 2 space indentation --- src/sass/lib/animation.scss | 34 ++++++------ src/sass/lib/css-vars.scss | 110 +++++++++++++++++++------------------- src/sass/lib/functions.scss | 2 +- src/sass/lib/mixins.scss | 126 ++++++++++++++++++++++---------------------- 4 files changed, 135 insertions(+), 137 deletions(-) (limited to 'src/sass/lib') diff --git a/src/sass/lib/animation.scss b/src/sass/lib/animation.scss index b6c22d42..b0443798 100644 --- a/src/sass/lib/animation.scss +++ b/src/sass/lib/animation.scss @@ -3,29 +3,29 @@ // -------------------------------------------------------------- @keyframes plyr-progress { - to { - background-position: $plyr-progress-loading-size 0; - } + to { + background-position: $plyr-progress-loading-size 0; + } } @keyframes plyr-popup { - 0% { - opacity: 0.5; - transform: translateY(10px); - } + 0% { + opacity: 0.5; + transform: translateY(10px); + } - to { - opacity: 1; - transform: translateY(0); - } + to { + opacity: 1; + transform: translateY(0); + } } @keyframes plyr-fade-in { - from { - opacity: 0; - } + from { + opacity: 0; + } - to { - opacity: 1; - } + to { + opacity: 1; + } } diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss index 493df3a8..fb30f3a7 100644 --- a/src/sass/lib/css-vars.scss +++ b/src/sass/lib/css-vars.scss @@ -11,12 +11,12 @@ $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, - ) - ); + @return map-merge( + $css-vars, + ( + $varName: $varValue, + ) + ); } /// @@ -30,33 +30,33 @@ $css-vars-use-native: false !default; // 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 '--'"; - } + // 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); + // 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; + @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; + } } /// @@ -69,32 +69,32 @@ $css-vars-use-native: false !default; // )); /// @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)}'; - } + // 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 + // 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/functions.scss b/src/sass/lib/functions.scss index a99a1b80..e991e2d8 100644 --- a/src/sass/lib/functions.scss +++ b/src/sass/lib/functions.scss @@ -3,5 +3,5 @@ // ========================================================================== @function to-percentage($input) { - @return $input * 1%; + @return $input * 1%; } diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index 2426ef68..1eaa1a6c 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -4,97 +4,95 @@ // Nicer focus styles // --------------------------------------- -@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; +@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) { + outline-color: $color; + outline-offset: 2px; + outline-style: dotted; + outline-width: 3px; } // Font smoothing // --------------------------------------- @mixin plyr-font-smoothing($mode: true) { - @if $mode { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - } @else { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; - } + @if $mode { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + } @else { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; + } } // styling // --------------------------------------- @mixin plyr-range-track() { - background: transparent; - border: 0; - border-radius: ($plyr-range-track-height / 2); - height: $plyr-range-track-height; - transition: box-shadow 0.3s ease; - user-select: none; + background: transparent; + border: 0; + border-radius: calc(#{$plyr-range-track-height} / 2); + height: $plyr-range-track-height; + transition: box-shadow 0.3s ease; + user-select: none; } @mixin plyr-range-thumb() { - background: $plyr-range-thumb-background; - border: 0; - border-radius: 100%; - box-shadow: $plyr-range-thumb-shadow; - height: $plyr-range-thumb-height; - position: relative; - transition: all 0.2s ease; - width: $plyr-range-thumb-height; + background: $plyr-range-thumb-background; + border: 0; + border-radius: 100%; + box-shadow: $plyr-range-thumb-shadow; + height: $plyr-range-thumb-height; + position: relative; + transition: all 0.2s ease; + width: $plyr-range-thumb-height; } -@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; +@mixin plyr-range-thumb-active($color: $plyr-range-thumb-active-shadow-color) { + box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color; } // Fullscreen styles // --------------------------------------- @mixin plyr-fullscreen-active() { - background: #000; - border-radius: 0 !important; - height: 100%; - margin: 0; - width: 100%; + background: #000; + border-radius: 0 !important; + height: 100%; + margin: 0; + width: 100%; - video { - height: 100%; - } + video { + height: 100%; + } - .plyr__video-wrapper { - height: 100%; - position: static; - } + .plyr__video-wrapper { + height: 100%; + position: static; + } - // Vimeo requires some different styling - &.plyr--vimeo .plyr__video-wrapper { - height: 0; - position: relative; - top: 50%; - transform: translateY(-50%); - } + // Vimeo requires some different styling + &.plyr--vimeo .plyr__video-wrapper { + height: 0; + position: relative; + top: 50%; + transform: translateY(-50%); + } - // Display correct icon - .plyr__control .icon--exit-fullscreen { - display: block; + // Display correct icon + .plyr__control .icon--exit-fullscreen { + display: block; - + svg { - display: none; - } + + svg { + display: none; } + } - // Hide cursor in fullscreen when controls hidden - &.plyr--hide-controls { - cursor: none; - } + // Hide cursor in fullscreen when controls hidden + &.plyr--hide-controls { + cursor: none; + } - // Large captions in full screen on larger screens - @media (min-width: $plyr-bp-lg) { - .plyr__captions { - font-size: $plyr-font-size-captions-large; - } + // Large captions in full screen on larger screens + @media (min-width: $plyr-bp-lg) { + .plyr__captions { + font-size: $plyr-font-size-captions-large; } + } } -- cgit v1.2.3 From 9c7e429b48320f6b021baa2ed23e35a6bd9ceae5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 19 Apr 2020 19:51:06 +1000 Subject: Vimeo ratio fixes --- src/sass/lib/mixins.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/sass/lib') diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index 1eaa1a6c..9186fec6 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -71,8 +71,6 @@ &.plyr--vimeo .plyr__video-wrapper { height: 0; position: relative; - top: 50%; - transform: translateY(-50%); } // Display correct icon -- cgit v1.2.3 From a97008aeebb19678e5183e7c934e60729857e11b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 24 Apr 2020 00:14:50 +1000 Subject: More work on custom properties and documentation --- src/sass/lib/mixins.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) (limited to 'src/sass/lib') diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index 9186fec6..cbb8cc78 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -4,7 +4,7 @@ // Nicer focus styles // --------------------------------------- -@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) { +@mixin plyr-tab-focus($color: $plyr-tab-focus-color) { outline-color: $color; outline-offset: 2px; outline-style: dotted; @@ -17,9 +17,6 @@ @if $mode { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - } @else { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; } } @@ -45,7 +42,7 @@ width: $plyr-range-thumb-height; } -@mixin plyr-range-thumb-active($color: $plyr-range-thumb-active-shadow-color) { +@mixin plyr-range-thumb-active($color) { box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color; } -- cgit v1.2.3