From 720cddff21b6980c34943c1ad839fe8310b50939 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 29 Sep 2021 21:42:41 +1000 Subject: [PATCH] fix: add SASS div method fallback --- demo/src/sass/components/icons.scss | 2 +- demo/src/sass/components/players.scss | 2 +- demo/src/sass/layout/core.scss | 2 +- demo/src/sass/lib/mixins.scss | 2 +- src/sass/lib/functions.scss | 28 ++++++++++++++++++++++++--- src/sass/types/video.scss | 5 ++--- 6 files changed, 31 insertions(+), 10 deletions(-) diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss index 32e5f685..4df10e4f 100644 --- a/demo/src/sass/components/icons.scss +++ b/demo/src/sass/components/icons.scss @@ -19,5 +19,5 @@ label svg { a .icon, .btn .icon { - margin-right: ($spacing-base / 2); + margin-right: div($spacing-base, 2); } diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss index 20422237..dcbf0c18 100644 --- a/demo/src/sass/components/players.scss +++ b/demo/src/sass/components/players.scss @@ -31,6 +31,6 @@ color: $color-gray-500; .icon { - margin-right: ceil($spacing-base / 6); + margin-right: div($spacing-base, 6); } } diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss index 3687b7d2..79fd5d85 100644 --- a/demo/src/sass/layout/core.scss +++ b/demo/src/sass/layout/core.scss @@ -46,7 +46,7 @@ aside { .icon { fill: $color-twitter; - margin-right: ($spacing-base / 2); + margin-right: div($spacing-base, 2); } p { diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss index 2744bfb5..75aa797c 100644 --- a/demo/src/sass/lib/mixins.scss +++ b/demo/src/sass/lib/mixins.scss @@ -32,7 +32,7 @@ // Leave at 100%/16px // --------------------------------------- @function calculate-rem($size) { - $rem: $size / 16; + $rem: div($size, 16); @return #{$rem}rem; } diff --git a/src/sass/lib/functions.scss b/src/sass/lib/functions.scss index e991e2d8..6b13a02a 100644 --- a/src/sass/lib/functions.scss +++ b/src/sass/lib/functions.scss @@ -1,7 +1,29 @@ -// ========================================================================== -// Useful functions -// ========================================================================== +@use 'sass:math'; +@use 'sass:meta'; +@use 'sass:list'; @function to-percentage($input) { @return $input * 1%; } + +// Private polyfill for the `math.div` function from Sass to be used until we can update the +// minimum required Sass version to 1.34.0 or above. +// TODO: replace with `math.div` eventually. +@function div($a, $b) { + @if (meta.function-exists('div', 'math')) { + @return math.div($a, $b); + } @else { + @return $a / $b; + } +} + +// Private polyfill for the `list.slash` function from Sass to be used until we can update the +// minimum required Sass version to 1.34.0 or above. +// TODO: replace with `list.slash` eventually. +@function slash($a, $b) { + @if (meta.function-exists('slash', 'list')) { + @return list.slash($a, $b); + } @else { + @return #{$a}#{' / '}#{$b}; + } +} diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss index 28b907b1..be26a236 100644 --- a/src/sass/types/video.scss +++ b/src/sass/types/video.scss @@ -21,11 +21,10 @@ overflow: hidden; position: relative; width: 100%; - height: 100%; } // Default to 16:9 ratio but this is set by JavaScript based on config -$embed-padding: (math.div(100, 16) * 9); +$embed-padding: (div(100, 16) * 9); .plyr__video-embed, .plyr__video-wrapper--fixed-ratio { @@ -51,7 +50,7 @@ $embed-padding: (math.div(100, 16) * 9); // For Vimeo, if the full custom UI is supported .plyr--full-ui .plyr__video-embed > .plyr__video-embed__container { $height: 240; - $offset: to-percentage(math.div($height - $embed-padding, math.div($height, 50))); + $offset: to-percentage(div($height - $embed-padding, div($height, 50))); padding-bottom: to-percentage($height); position: relative; transform: translateY(-$offset);