SASS orginasation clean up and flex-direction added

src/sass/base.scss

@@ -8,6 +8,7 @@
     align-items: center;
     direction: ltr;
     display: flex;
+    flex-direction: column;
     font-family: $plyr-font-family;
     font-variant-numeric: tabular-nums; // Force monosace-esque number widths
     font-weight: $plyr-font-weight-regular;

src/sass/components/audio.scss

@@ -1,7 +0,0 @@
-// --------------------------------------------------------------
-// Audio styles
-// --------------------------------------------------------------
-
-.plyr--audio {
-    display: block;
-}

src/sass/components/control.scss

@@ -50,59 +50,3 @@ a.plyr__control {
 .plyr__control.plyr__control--pressed .label--not-pressed {
     display: none;
 }
-
-// Audio control
-.plyr--audio .plyr__control {
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: $plyr-audio-control-bg-hover;
-        color: $plyr-audio-control-color-hover;
-    }
-}
-
-// Video control
-.plyr--video .plyr__control {
-    // Hover and tab focus
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: $plyr-video-control-bg-hover;
-        color: $plyr-video-control-color-hover;
-    }
-}
-
-// Large play button (video only)
-.plyr__control--overlaid {
-    background: rgba($plyr-video-control-bg-hover, 0.8);
-    border: 0;
-    border-radius: 100%;
-    color: $plyr-video-control-color;
-    display: none;
-    left: 50%;
-    padding: ceil($plyr-control-spacing * 1.5);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 2;
-
-    // Offset icon to make the play button look right
-    svg {
-        left: 2px;
-        position: relative;
-    }
-
-    &:hover,
-    &:focus {
-        background: $plyr-video-control-bg-hover;
-    }
-}
-
-.plyr--playing .plyr__control--overlaid {
-    opacity: 0;
-    visibility: hidden;
-}
-
-.plyr--full-ui.plyr--video .plyr__control--overlaid {
-    display: block;
-}

src/sass/components/controls.scss

@@ -49,40 +49,6 @@
     }
 }
 
-// Audio controls
-.plyr--audio .plyr__controls {
-    background: $plyr-audio-controls-bg;
-    border-radius: inherit;
-    color: $plyr-audio-control-color;
-    padding: $plyr-control-spacing;
-}
-
-// Video controls
-.plyr--video .plyr__controls {
-    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-    bottom: 0;
-    color: $plyr-video-control-color;
-    left: 0;
-    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
-    position: absolute;
-    right: 0;
-    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
-    z-index: 3;
-
-    @media (min-width: $plyr-bp-sm) {
-        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
-    }
-}
-
-// Hide video controls
-.plyr--video.plyr--hide-controls .plyr__controls {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(100%);
-}
-
 // Some options are hidden by default
 .plyr [data-plyr='captions'],
 .plyr [data-plyr='pip'],

src/sass/components/sliders.scss

@@ -19,11 +19,7 @@
 
     &::-webkit-slider-runnable-track {
         @include plyr-range-track();
-        background-image: linear-gradient(
+        background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
-            to right,
-            currentColor var(--value, 0%),
-            transparent var(--value, 0%)
-        );
     }
 
     &::-webkit-slider-thumb {
@@ -96,69 +92,3 @@
         }
     }
 }
-
-// Video range inputs
-.plyr--full-ui.plyr--video input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-ms-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active();
-        }
-
-        &::-moz-range-thumb {
-            @include plyr-range-thumb-active();
-        }
-
-        &::-ms-thumb {
-            @include plyr-range-thumb-active();
-        }
-    }
-}
-
-// Audio range inputs
-.plyr--full-ui.plyr--audio input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    &::-ms-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-
-        &::-moz-range-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-
-        &::-ms-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-    }
-}

src/sass/components/times.scss

@@ -18,7 +18,3 @@
         display: none;
     }
 }
-
-.plyr--video .plyr__time {
-    text-shadow: 0 1px 1px rgba(#000, 0.15);
-}

src/sass/components/video.scss

@@ -1,51 +0,0 @@
-// --------------------------------------------------------------
-// Video styles
-// --------------------------------------------------------------
-
-.plyr--video {
-    background: #000;
-    overflow: hidden;
-
-    // Menu open
-    &.plyr--menu-open {
-        overflow: visible;
-    }
-}
-
-.plyr__video-wrapper {
-    background: #000;
-    height: 100%;
-    margin: auto;
-    overflow: hidden;
-    width: 100%;
-}
-
-// Default to 16:9 ratio but this is set by JavaScript based on config
-$embed-padding: ((100 / 16) * 9);
-
-.plyr__video-embed,
-.plyr__video-wrapper--fixed-ratio {
-    height: 0;
-    padding-bottom: to-percentage($embed-padding);
-}
-
-.plyr__video-embed iframe,
-.plyr__video-wrapper--fixed-ratio video {
-    border: 0;
-    left: 0;
-    position: absolute;
-    top: 0;
-}
-
-// If the full custom UI is supported
-.plyr--full-ui .plyr__video-embed {
-    $height: 240;
-    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
-
-    // Only used for Vimeo
-    > .plyr__video-embed__container {
-        padding-bottom: to-percentage($height);
-        position: relative;
-        transform: translateY(-$offset);
-    }
-}

src/sass/plyr.scss

@@ -25,7 +25,6 @@
 
 @import 'base';
 
-@import 'components/audio';
 @import 'components/badges';
 @import 'components/captions';
 @import 'components/control';
@@ -35,10 +34,12 @@
 @import 'components/poster';
 @import 'components/times';
 @import 'components/tooltips';
-@import 'components/video';
 @import 'components/progress';
 @import 'components/volume';
 
+@import 'types/audio';
+@import 'types/video';
+
 @import 'states/fullscreen';
 
 @import 'plugins/ads';

src/sass/types/audio.scss

@@ -0,0 +1,56 @@
+// --------------------------------------------------------------
+// Audio styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--audio {
+    display: block;
+}
+
+// Controls container
+.plyr--audio .plyr__controls {
+    background: $plyr-audio-controls-bg;
+    border-radius: inherit;
+    color: $plyr-audio-control-color;
+    padding: $plyr-control-spacing;
+}
+
+// Control elements
+.plyr--audio .plyr__control {
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: $plyr-audio-control-bg-hover;
+        color: $plyr-audio-control-color-hover;
+    }
+}
+
+// Range inputs
+.plyr--full-ui.plyr--audio input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: $plyr-audio-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background-color: $plyr-audio-range-track-bg;
+    }
+
+    &::-ms-track {
+        background-color: $plyr-audio-range-track-bg;
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+    }
+}

src/sass/types/video.scss

@@ -0,0 +1,157 @@
+// --------------------------------------------------------------
+// Video styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--video {
+    background: #000;
+    overflow: hidden;
+
+    &.plyr--menu-open {
+        overflow: visible;
+    }
+}
+
+.plyr__video-wrapper {
+    background: #000;
+    height: 100%;
+    margin: auto;
+    overflow: hidden;
+    width: 100%;
+}
+
+// Default to 16:9 ratio but this is set by JavaScript based on config
+$embed-padding: ((100 / 16) * 9);
+
+.plyr__video-embed,
+.plyr__video-wrapper--fixed-ratio {
+    height: 0;
+    padding-bottom: to-percentage($embed-padding);
+}
+
+.plyr__video-embed iframe,
+.plyr__video-wrapper--fixed-ratio video {
+    border: 0;
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+// If the full custom UI is supported
+.plyr--full-ui .plyr__video-embed {
+    $height: 240;
+    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+
+    // Only used for Vimeo
+    > .plyr__video-embed__container {
+        padding-bottom: to-percentage($height);
+        position: relative;
+        transform: translateY(-$offset);
+    }
+}
+
+// Controls container
+.plyr--video .plyr__controls {
+    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    bottom: 0;
+    color: $plyr-video-control-color;
+    left: 0;
+    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
+    position: absolute;
+    right: 0;
+    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+    z-index: 3;
+
+    @media (min-width: $plyr-bp-sm) {
+        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    }
+}
+
+// Hide controls
+.plyr--video.plyr--hide-controls .plyr__controls {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(100%);
+}
+
+// Control elements
+.plyr--video .plyr__control {
+    // Hover and tab focus
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: $plyr-video-control-bg-hover;
+        color: $plyr-video-control-color-hover;
+    }
+}
+
+// Large play button (video only)
+.plyr__control--overlaid {
+    background: rgba($plyr-video-control-bg-hover, 0.8);
+    border: 0;
+    border-radius: 100%;
+    color: $plyr-video-control-color;
+    display: none;
+    left: 50%;
+    padding: ceil($plyr-control-spacing * 1.5);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+
+    // Offset icon to make the play button look right
+    svg {
+        left: 2px;
+        position: relative;
+    }
+
+    &:hover,
+    &:focus {
+        background: $plyr-video-control-bg-hover;
+    }
+}
+
+.plyr--playing .plyr__control--overlaid {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.plyr--full-ui.plyr--video .plyr__control--overlaid {
+    display: block;
+}
+
+// Video range inputs
+.plyr--full-ui.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    &::-ms-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active();
+        }
+    }
+}
+
+.plyr--video .plyr__time {
+    text-shadow: 0 1px 1px rgba(#000, 0.15);
+}