diff options
| author | Sam Potts <sam@potts.es> | 2020-04-23 22:07:32 +1000 |
|---|---|---|
| committer | Sam Potts <sam@potts.es> | 2020-04-23 22:07:32 +1000 |
| commit | a9b24f5e1f8f24dbc81420d5ee480915c13df34a (patch) | |
| tree | ee79dc6073c3e1031ea9acd986a972a2f77f1096 /demo | |
| parent | a9c4e77d1bcf1dedce9a3030017ddef2d3a924c8 (diff) | |
| download | plyr-a9b24f5e1f8f24dbc81420d5ee480915c13df34a.tar.lz plyr-a9b24f5e1f8f24dbc81420d5ee480915c13df34a.tar.xz plyr-a9b24f5e1f8f24dbc81420d5ee480915c13df34a.zip | |
Use custom properties in demo
Diffstat (limited to 'demo')
| -rw-r--r-- | demo/src/sass/bundles/demo.scss | 3 | ||||
| -rw-r--r-- | demo/src/sass/settings/plyr.scss | 36 |
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 + ) +); |