From 502d5977d79148957828cbf313b7ef4c9f31973f Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sat, 11 Apr 2020 16:23:14 +1000
Subject: Converted to 2 space indentation

---
 src/sass/components/sliders.scss | 154 +++++++++++++++++++--------------------
 1 file changed, 77 insertions(+), 77 deletions(-)

(limited to 'src/sass/components/sliders.scss')

diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index 7b13348e..b7872bcb 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -3,92 +3,92 @@
 // --------------------------------------------------------------
 
 .plyr--full-ui input[type='range'] {
-    // WebKit
+  // WebKit
+  -webkit-appearance: none; /* stylelint-disable-line */
+  background: transparent;
+  border: 0;
+  border-radius: calc(#{$plyr-range-thumb-height} * 2);
+  // color is used in JS to populate lower fill for WebKit
+  color: $plyr-range-fill-background;
+  display: block;
+  height: $plyr-range-max-height;
+  margin: 0;
+  padding: 0;
+  transition: box-shadow 0.3s ease;
+  width: 100%;
+
+  &::-webkit-slider-runnable-track {
+    @include plyr-range-track();
+    background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+  }
+
+  &::-webkit-slider-thumb {
+    @include plyr-range-thumb();
     -webkit-appearance: none; /* stylelint-disable-line */
-    background: transparent;
+    margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
+  }
+
+  // Mozilla
+  &::-moz-range-track {
+    @include plyr-range-track();
+  }
+
+  &::-moz-range-thumb {
+    @include plyr-range-thumb();
+  }
+
+  &::-moz-range-progress {
+    background: currentColor;
+    border-radius: calc(#{$plyr-range-track-height} / 2);
+    height: $plyr-range-track-height;
+  }
+
+  // Microsoft
+  &::-ms-track {
+    @include plyr-range-track();
+    color: transparent;
+  }
+
+  &::-ms-fill-upper {
+    @include plyr-range-track();
+  }
+
+  &::-ms-fill-lower {
+    @include plyr-range-track();
+
+    background: currentColor;
+  }
+
+  &::-ms-thumb {
+    @include plyr-range-thumb();
+    // For some reason, Edge uses the -webkit margin above
+    margin-top: 0;
+  }
+
+  &::-ms-tooltip {
+    display: none;
+  }
+
+  // Focus styles
+  &:focus {
+    outline: 0;
+  }
+
+  &::-moz-focus-outer {
     border: 0;
-    border-radius: ($plyr-range-thumb-height * 2);
-    // color is used in JS to populate lower fill for WebKit
-    color: $plyr-range-fill-background;
-    display: block;
-    height: $plyr-range-max-height;
-    margin: 0;
-    padding: 0;
-    transition: box-shadow 0.3s ease;
-    width: 100%;
+  }
 
+  &.plyr__tab-focus {
     &::-webkit-slider-runnable-track {
-        @include plyr-range-track();
-        background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+      @include plyr-tab-focus();
     }
 
-    &::-webkit-slider-thumb {
-        @include plyr-range-thumb();
-        -webkit-appearance: none; /* stylelint-disable-line */
-        margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
-    }
-
-    // Mozilla
     &::-moz-range-track {
-        @include plyr-range-track();
-    }
-
-    &::-moz-range-thumb {
-        @include plyr-range-thumb();
-    }
-
-    &::-moz-range-progress {
-        background: currentColor;
-        border-radius: ($plyr-range-track-height / 2);
-        height: $plyr-range-track-height;
+      @include plyr-tab-focus();
     }
 
-    // Microsoft
     &::-ms-track {
-        @include plyr-range-track();
-        color: transparent;
-    }
-
-    &::-ms-fill-upper {
-        @include plyr-range-track();
-    }
-
-    &::-ms-fill-lower {
-        @include plyr-range-track();
-
-        background: currentColor;
-    }
-
-    &::-ms-thumb {
-        @include plyr-range-thumb();
-        // For some reason, Edge uses the -webkit margin above
-        margin-top: 0;
-    }
-
-    &::-ms-tooltip {
-        display: none;
-    }
-
-    // Focus styles
-    &:focus {
-        outline: 0;
-    }
-
-    &::-moz-focus-outer {
-        border: 0;
-    }
-
-    &.plyr__tab-focus {
-        &::-webkit-slider-runnable-track {
-            @include plyr-tab-focus();
-        }
-
-        &::-moz-range-track {
-            @include plyr-tab-focus();
-        }
-
-        &::-ms-track {
-            @include plyr-tab-focus();
-        }
+      @include plyr-tab-focus();
     }
+  }
 }
-- 
cgit v1.2.3


From a97008aeebb19678e5183e7c934e60729857e11b Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Fri, 24 Apr 2020 00:14:50 +1000
Subject: More work on custom properties and documentation

---
 src/sass/components/sliders.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/sass/components/sliders.scss')

diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index b7872bcb..b90e7229 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -8,10 +8,10 @@
   background: transparent;
   border: 0;
   border-radius: calc(#{$plyr-range-thumb-height} * 2);
-  // color is used in JS to populate lower fill for WebKit
+  // `color` property is used in JS to populate lower fill for WebKit
   color: $plyr-range-fill-background;
   display: block;
-  height: $plyr-range-max-height;
+  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
   margin: 0;
   padding: 0;
   transition: box-shadow 0.3s ease;
-- 
cgit v1.2.3