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/settings/controls.scss | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) (limited to 'src/sass/settings/controls.scss') diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index 64f05cec..77387567 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -11,9 +11,27 @@ $plyr-control-radius: 3px !default; $plyr-video-controls-bg: #000 !default; $plyr-video-control-color: #fff !default; $plyr-video-control-color-hover: #fff !default; -$plyr-video-control-bg-hover: $plyr-color-main !default; +$plyr-video-control-bg-hover: var(--plyr-color-main) !default; $plyr-audio-controls-bg: #fff !default; -$plyr-audio-control-color: $plyr-color-fiord !default; +$plyr-audio-control-color: var(--plyr-color-fiord) !default; $plyr-audio-control-color-hover: #fff !default; -$plyr-audio-control-bg-hover: $plyr-color-main !default; +$plyr-audio-control-bg-hover: var(--plyr-color-main) !default; + +@include css-vars( + ( + --plyr-control-icon-size: $plyr-control-icon-size, + --plyr-control-icon-size-large: $plyr-control-icon-size-large, + --plyr-control-spacing: $plyr-control-spacing, + --plyr-control-padding: $plyr-control-padding, + --plyr-control-radius: $plyr-control-radius, + --plyr-video-controls-bg: $plyr-video-controls-bg, + --plyr-video-control-color: $plyr-video-control-color, + --plyr-video-control-color-hover: $plyr-video-control-color-hover, + --plyr-video-control-bg-hover: $plyr-video-control-bg-hover, + --plyr-audio-controls-bg: $plyr-audio-controls-bg, + --plyr-audio-control-color: $plyr-audio-control-color, + --plyr-audio-control-color-hover: $plyr-audio-control-color-hover, + --plyr-audio-control-bg-hover: $plyr-audio-control-bg-hover + ) +); -- 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/settings/controls.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'src/sass/settings/controls.scss') diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index ee88434a..906744b2 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -20,7 +20,6 @@ $plyr-audio-control-bg-hover: var(--plyr-color-main) !default; @include css-vars( ( --plyr-control-icon-size: $plyr-control-icon-size, - --plyr-control-icon-size-large: $plyr-control-icon-size-large, --plyr-control-spacing: $plyr-control-spacing, --plyr-control-padding: $plyr-control-padding, --plyr-control-radius: $plyr-control-radius, -- 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/settings/controls.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/sass/settings/controls.scss') diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index 906744b2..0c88163d 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -9,7 +9,7 @@ $plyr-control-radius: 3px !default; $plyr-video-controls-bg: #000 !default; $plyr-video-control-color: #fff !default; -$plyr-video-control-color-hover: #fff !default; +$plyr-video-control-color-hover: #000 !default; $plyr-video-control-bg-hover: var(--plyr-color-main) !default; $plyr-audio-controls-bg: #fff !default; -- 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/settings/controls.scss | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) (limited to 'src/sass/settings/controls.scss') diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index a4009758..64882f4e 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -2,17 +2,31 @@ // Controls // ========================================================================== -$plyr-control-icon-size: 18px !default; -$plyr-control-spacing: 10px !default; -$plyr-control-padding: ($plyr-control-spacing * 0.7) !default; -$plyr-control-radius: 3px !default; +$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default; +$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default; +$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default; +$plyr-control-radius: var(--plyr-control-radius, 3px) !default; -$plyr-video-controls-background: linear-gradient(rgba(#000, 0), rgba(#000, 0.75)) !default; -$plyr-video-control-color: #fff !default; -$plyr-video-control-color-hover: #fff !default; -$plyr-video-control-background-hover: $plyr-color-main !default; +$plyr-control-toggle-checked-background: var( + --plyr-control-toggle-checked-background, + var(--plyr-color-main, $plyr-color-main) +) !default; -$plyr-audio-controls-background: #fff !default; -$plyr-audio-control-color: $plyr-color-gray-700 !default; -$plyr-audio-control-color-hover: #fff !default; -$plyr-audio-control-background-hover: $plyr-color-main !default; +$plyr-video-controls-background: var( + --plyr-video-controls-background, + linear-gradient(rgba(#000, 0), rgba(#000, 0.75)) +) !default; +$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default; +$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default; +$plyr-video-control-background-hover: var( + --plyr-video-control-background-hover, + var(--plyr-color-main, $plyr-color-main) +) !default; + +$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default; +$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default; +$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default; +$plyr-audio-control-background-hover: var( + --plyr-audio-control-background-hover, + var(--plyr-color-main, $plyr-color-main) +) !default; -- cgit v1.2.3