ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: revert math.div SASS fallback

Browse Source
This commit is contained in:
Sam Potts 2021-09-29 22:07:42 +10:00
parent 5d1d247491
commit cf8e9341f2
6 changed files with 14 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/src/sass/components/icons.scss
View File

@ -2,6 +2,8 @@
// Icons // Icons
// ========================================================================== // ==========================================================================
@use 'sass:math';
// Base size icon styles // Base size icon styles
.icon { .icon {
fill: currentColor; fill: currentColor;
@ -19,5 +21,5 @@ label svg {
a .icon, a .icon,
.btn .icon { .btn .icon {
margin-right: div($spacing-base, 2); margin-right: math.div($spacing-base, 4);
} }

4
demo/src/sass/components/players.scss
View File

@ -2,6 +2,8 @@
// Examples // Examples
// ========================================================================== // ==========================================================================
@use 'sass:math';
// Example players // Example players
.plyr { .plyr {
border-radius: $border-radius-large; border-radius: $border-radius-large;
@ -31,6 +33,6 @@
color: $color-gray-500; color: $color-gray-500;
.icon { .icon {
margin-right: div($spacing-base, 6); margin-right: math.div($spacing-base, 6);
} }
} }

4
demo/src/sass/layout/core.scss
View File

@ -2,6 +2,8 @@
// Core // Core
// ========================================================================== // ==========================================================================
@use 'sass:math';
html, html,
body { body {
display: flex; display: flex;
@ -46,7 +48,7 @@ aside {
.icon { .icon {
fill: $color-twitter; fill: $color-twitter;
margin-right: div($spacing-base, 2); margin-right: math.div($spacing-base, 2);
} }
p { p {

4
demo/src/sass/lib/mixins.scss
View File

@ -2,6 +2,8 @@
// Mixins // Mixins
// ========================================================================== // ==========================================================================
@use 'sass:math';
// Convert a <button> into an <a> // Convert a <button> into an <a>
// --------------------------------------- // ---------------------------------------
@mixin cancel-button-styles() { @mixin cancel-button-styles() {
@ -32,7 +34,7 @@
// Leave <body> at 100%/16px // Leave <body> at 100%/16px
// --------------------------------------- // ---------------------------------------
@function calculate-rem($size) { @function calculate-rem($size) {
$rem: div($size, 16); $rem: math.div($size, 16);
@return #{$rem}rem; @return #{$rem}rem;
} }

26
src/sass/lib/functions.scss
View File

@ -1,29 +1,3 @@
@use 'sass:math';
@use 'sass:meta';
@use 'sass:list';
@function to-percentage($input) { @function to-percentage($input) {
@return $input * 1%; @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};
}
}

4
src/sass/types/video.scss
View File

@ -24,7 +24,7 @@
} }
// Default to 16:9 ratio but this is set by JavaScript based on config // Default to 16:9 ratio but this is set by JavaScript based on config
$embed-padding: (div(100, 16) * 9); $embed-padding: (math.div(100, 16) * 9);
.plyr__video-embed, .plyr__video-embed,
.plyr__video-wrapper--fixed-ratio { .plyr__video-wrapper--fixed-ratio {
@ -50,7 +50,7 @@ $embed-padding: (div(100, 16) * 9);
// For Vimeo, if the full custom UI is supported // For Vimeo, if the full custom UI is supported
.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container { .plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
$height: 240; $height: 240;
$offset: to-percentage(div($height - $embed-padding, div($height, 50))); $offset: to-percentage(math.div($height - $embed-padding, math.div($height, 50)));
padding-bottom: to-percentage($height); padding-bottom: to-percentage($height);
position: relative; position: relative;
transform: translateY(-$offset); transform: translateY(-$offset);