Split up settings file

13 files changed, 131 insertions, 103 deletions

diff --git a/src/sass/bundle.scss b/src/sass/bundle.scss
index 2ee66ebc..5eb233ec 100644
--- a/src/sass/bundle.scss
+++ b/src/sass/bundle.scss
@@ -5,7 +5,17 @@
 // ==========================================================================
 @charset 'UTF-8';
 
-@import 'settings';
+@import 'settings/breakpoints';
+@import 'settings/captions';
+@import 'settings/colors';
+@import 'settings/controls';
+@import 'settings/cosmetics';
+@import 'settings/helpers';
+@import 'settings/menus';
+@import 'settings/progress';
+@import 'settings/sliders';
+@import 'settings/tooltips';
+@import 'settings/type';
 
 @import 'lib/animation';
 @import 'lib/mixins';
diff --git a/src/sass/settings.scss b/src/sass/settings.scss
deleted file mode 100644
index a01308f9..00000000
--- a/src/sass/settings.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-// ==========================================================================
-// Plyr variables
-// https://github.com/sampotts/plyr
-// ==========================================================================
-
-// Settings
-$plyr-border-box: true !default;
-$plyr-touch-action: true !default;
-$plyr-sr-only-important: true !default;
-
-// Colors
-$plyr-color-main: #1aafff !default;
-$plyr-color-gunmetal: #2f343d !default;
-$plyr-color-fiord: #4f5b5f !default;
-$plyr-color-lynch: #6b7d85 !default;
-$plyr-color-heather: #b7c5cd !default;
-
-// Type
-$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
-$plyr-font-size-base: 16px !default;
-$plyr-font-size-small: 14px !default;
-$plyr-font-size-time: 14px !default;
-$plyr-font-size-badge: 10px !default;
-$plyr-font-weight-regular: 500 !default;
-$plyr-font-weight-bold: 600 !default;
-$plyr-line-height: 1.7 !default;
-$plyr-font-smoothing: true !default;
-
-// Focus
-$plyr-tab-focus-default-color: $plyr-color-main !default;
-
-// Captions
-$plyr-captions-bg: rgba(#000, 0.8) !default;
-$plyr-captions-color: #fff !default;
-$plyr-font-size-captions-base: $plyr-font-size-base !default;
-$plyr-font-size-captions-small: $plyr-font-size-small !default;
-$plyr-font-size-captions-medium: 18px !default;
-$plyr-font-size-captions-large: 21px !default;
-
-// Controls
-$plyr-control-icon-size: 18px !default;
-$plyr-control-icon-size-large: 20px !default;
-$plyr-control-spacing: 10px !default;
-$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
-$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-audio-controls-bg: #fff !default;
-$plyr-audio-control-color: $plyr-color-fiord !default;
-$plyr-audio-control-color-hover: #fff !default;
-$plyr-audio-control-bg-hover: $plyr-color-main !default;
-
-// Tooltips
-$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
-$plyr-tooltip-color: $plyr-color-fiord !default;
-$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
-$plyr-tooltip-arrow-size: 4px !default;
-$plyr-tooltip-radius: 3px !default;
-$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
-
-// Menus
-$plyr-menu-bg: $plyr-tooltip-bg !default;
-$plyr-menu-color: $plyr-tooltip-color !default;
-$plyr-menu-arrow-size: 6px !default;
-$plyr-menu-border-color: $plyr-color-heather !default;
-$plyr-menu-border-shadow-color: #fff !default;
-$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
-
-// Progress
-$plyr-progress-loading-size: 25px !default;
-$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.2) !default;
-$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
-$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;
-
-// Range sliders
-$plyr-range-track-height: 6px !default;
-$plyr-range-thumb-height: 14px !default;
-$plyr-range-thumb-bg: #fff !default;
-$plyr-range-thumb-border: 2px solid transparent !default;
-$plyr-range-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
-$plyr-range-fill-bg: $plyr-color-main !default;
-
-$plyr-range-thumb-active-border-color: #fff !default;
-$plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default;
-$plyr-range-thumb-active-height: 20px !default;
-
-$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
-$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
-
-// Breakpoints
-$plyr-bp-sm: 480px !default;
-$plyr-bp-md: 768px !default;
-$plyr-bp-lg: 1024px !default;
-
-// Max-width media queries
-$plyr-bp-xs-max: ($plyr-bp-sm - 1) !default;
-$plyr-bp-sm-max: ($plyr-bp-md - 1) !default;
-$plyr-bp-md-max: ($plyr-bp-lg - 1) !default;
diff --git a/src/sass/settings/breakpoints.scss b/src/sass/settings/breakpoints.scss
new file mode 100644
index 00000000..77a5b93a
--- /dev/null
+++ b/src/sass/settings/breakpoints.scss
@@ -0,0 +1,12 @@
+// ==========================================================================
+// Breakpoints
+// ==========================================================================
+
+$plyr-bp-sm: 480px !default;
+$plyr-bp-md: 768px !default;
+$plyr-bp-lg: 1024px !default;
+
+// Max-width media queries
+$plyr-bp-xs-max: ($plyr-bp-sm - 1);
+$plyr-bp-sm-max: ($plyr-bp-md - 1);
+$plyr-bp-md-max: ($plyr-bp-lg - 1);
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
new file mode 100644
index 00000000..c87693d0
--- /dev/null
+++ b/src/sass/settings/captions.scss
@@ -0,0 +1,10 @@
+// ==========================================================================
+// Captions
+// ==========================================================================
+
+$plyr-captions-bg: rgba(#000, 0.8) !default;
+$plyr-captions-color: #fff !default;
+$plyr-font-size-captions-base: $plyr-font-size-base !default;
+$plyr-font-size-captions-small: $plyr-font-size-small !default;
+$plyr-font-size-captions-medium: 18px !default;
+$plyr-font-size-captions-large: 21px !default;
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
new file mode 100644
index 00000000..c9ea580c
--- /dev/null
+++ b/src/sass/settings/colors.scss
@@ -0,0 +1,9 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+$plyr-color-main: #1aafff !default;
+$plyr-color-gunmetal: #2f343d !default;
+$plyr-color-fiord: #4f5b5f !default;
+$plyr-color-lynch: #6b7d85 !default;
+$plyr-color-heather: #b7c5cd !default;
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
new file mode 100644
index 00000000..64f05cec
--- /dev/null
+++ b/src/sass/settings/controls.scss
@@ -0,0 +1,19 @@
+// ==========================================================================
+// Controls
+// ==========================================================================
+
+$plyr-control-icon-size: 18px !default;
+$plyr-control-icon-size-large: 20px !default;
+$plyr-control-spacing: 10px !default;
+$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
+$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-audio-controls-bg: #fff !default;
+$plyr-audio-control-color: $plyr-color-fiord !default;
+$plyr-audio-control-color-hover: #fff !default;
+$plyr-audio-control-bg-hover: $plyr-color-main !default;
diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss
new file mode 100644
index 00000000..d6e4b86d
--- /dev/null
+++ b/src/sass/settings/cosmetics.scss
@@ -0,0 +1,5 @@
+// ==========================================================================
+// Cosmetic
+// ==========================================================================
+
+$plyr-tab-focus-default-color: $plyr-color-main !default;
diff --git a/src/sass/settings/helpers.scss b/src/sass/settings/helpers.scss
new file mode 100644
index 00000000..fd70f523
--- /dev/null
+++ b/src/sass/settings/helpers.scss
@@ -0,0 +1,7 @@
+// ==========================================================================
+// Enable helpers
+// ==========================================================================
+
+$plyr-border-box: true !default;
+$plyr-touch-action: true !default;
+$plyr-sr-only-important: true !default;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
new file mode 100644
index 00000000..64df9863
--- /dev/null
+++ b/src/sass/settings/menus.scss
@@ -0,0 +1,10 @@
+// ==========================================================================
+// Menus
+// ==========================================================================
+
+$plyr-menu-bg: rgba(#fff, 0.9) !default;
+$plyr-menu-color: $plyr-color-fiord !default;
+$plyr-menu-arrow-size: 6px !default;
+$plyr-menu-border-color: $plyr-color-heather !default;
+$plyr-menu-border-shadow-color: #fff !default;
+$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
new file mode 100644
index 00000000..2995f23a
--- /dev/null
+++ b/src/sass/settings/progress.scss
@@ -0,0 +1,8 @@
+// ==========================================================================
+// Progress
+// ==========================================================================
+
+$plyr-progress-loading-size: 25px !default;
+$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.2) !default;
+$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
+$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
new file mode 100644
index 00000000..ddff0a81
--- /dev/null
+++ b/src/sass/settings/sliders.scss
@@ -0,0 +1,17 @@
+// ==========================================================================
+// Sliders
+// ==========================================================================
+
+$plyr-range-track-height: 6px !default;
+$plyr-range-thumb-height: 14px !default;
+$plyr-range-thumb-bg: #fff !default;
+$plyr-range-thumb-border: 2px solid transparent !default;
+$plyr-range-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
+$plyr-range-fill-bg: $plyr-color-main !default;
+
+$plyr-range-thumb-active-border-color: #fff !default;
+$plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default;
+$plyr-range-thumb-active-height: 20px !default;
+
+$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
+$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss
new file mode 100644
index 00000000..fd304d60
--- /dev/null
+++ b/src/sass/settings/tooltips.scss
@@ -0,0 +1,10 @@
+// ==========================================================================
+// Tooltips
+// ==========================================================================
+
+$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
+$plyr-tooltip-color: $plyr-color-fiord !default;
+$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
+$plyr-tooltip-arrow-size: 4px !default;
+$plyr-tooltip-radius: 3px !default;
+$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
new file mode 100644
index 00000000..46b004d5
--- /dev/null
+++ b/src/sass/settings/type.scss
@@ -0,0 +1,13 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
+$plyr-font-size-base: 16px !default;
+$plyr-font-size-small: 14px !default;
+$plyr-font-size-time: 14px !default;
+$plyr-font-size-badge: 10px !default;
+$plyr-font-weight-regular: 500 !default;
+$plyr-font-weight-bold: 600 !default;
+$plyr-line-height: 1.7 !default;
+$plyr-font-smoothing: true !default;