aboutsummaryrefslogtreecommitdiffstats
path: root/demo
diff options
context:
space:
mode:
Diffstat (limited to 'demo')
-rw-r--r--demo/src/sass/bundles/demo.scss3
-rw-r--r--demo/src/sass/settings/plyr.scss36
2 files changed, 17 insertions, 22 deletions
diff --git a/demo/src/sass/bundles/demo.scss b/demo/src/sass/bundles/demo.scss
index 2f89b858..6592013c 100644
--- a/demo/src/sass/bundles/demo.scss
+++ b/demo/src/sass/bundles/demo.scss
@@ -3,6 +3,9 @@
// ==========================================================================
@charset 'UTF-8';
+@import '../../../../src/sass/lib/css-vars';
+$css-vars-use-native: true;
+
// Settings
@import '../settings/breakpoints';
@import '../settings/colors';
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
index 575c4a6c..67bde8d3 100644
--- a/demo/src/sass/settings/plyr.scss
+++ b/demo/src/sass/settings/plyr.scss
@@ -2,25 +2,17 @@
// Plyr Settings
// ==========================================================================
-// Font sizes
-$plyr-font-size-base: 13px;
-$plyr-font-size-small: 12px;
-$plyr-font-size-time: 11px;
-$plyr-font-size-badges: 9px;
-
-// Font weight
-$plyr-font-weight-regular: 500;
-$plyr-font-weight-bold: 600;
-
-// Font smoothing
-$plyr-font-smoothing: true;
-
-// Colors
-$plyr-color-main: $color-brand-primary;
-
-// Captions
-$plyr-font-size-captions-base: $plyr-font-size-base;
-$plyr-font-size-captions-small: $plyr-font-size-small;
-$plyr-font-size-captions-medium: 18px;
-$plyr-font-size-captions-large: 21px;
-$plyr-font-size-menu: $plyr-font-size-base;
+@include css-vars(
+ (
+ --plyr-color-main: $color-brand-primary,
+ --plyr-font-size-base: 13px,
+ --plyr-font-size-small: 12px,
+ --plyr-font-size-time: 11px,
+ --plyr-font-size-badges: 9px,
+ --plyr-font-size-menu: var(--plyr-font-size-base),
+ --plyr-font-weight-regular: 500,
+ --plyr-font-weight-bold: 600,
+ --plyr-font-size-captions-medium: 18px,
+ --plyr-font-size-captions-large: 21px
+ )
+);