Merge pull request #147 from picturepan2/feature/bars v0.2.3

Feature/bars

1 files changed, 71 insertions, 0 deletions

diff --git a/src/sliders.less b/src/sliders.less
new file mode 100644
index 0000000..520e9a1
--- /dev/null
+++ b/src/sliders.less
@@ -0,0 +1,71 @@
+// Sliders
+// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
+.slider {
+  appearance: none;
+  background: transparent;
+  display: block;
+  width: 100%;
+  height: 2.4rem;
+
+  // Slider Thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: @core-color;
+    border-radius: 50%;
+    height: 1.4rem;
+    margin-top: -.5rem;
+    transition: transform .2s ease;
+    width: 1.4rem;
+  }
+  &::-moz-range-thumb {
+    background: @core-color;
+    border: 0;
+    border-radius: 50%;
+    height: 1.4rem;
+    transition: transform .2s ease;
+    width: 1.4rem;
+  }
+  &::-ms-thumb {
+    background: @core-color;
+    border: 0;
+    border-radius: 50%;
+    height: 1.4rem;
+    transition: transform .2s ease;
+    width: 1.4rem;
+  }
+
+  &:active {
+    &::-webkit-slider-thumb {
+      transform: scale(1.25);
+    }
+    &::-moz-range-thumb {
+      transform: scale(1.25);
+    }
+    &::-ms-thumb {
+      transform: scale(1.25);
+    }
+  }
+
+  // Slider Track
+  &::-webkit-slider-runnable-track {
+    background: @core-border-color;
+    border-radius: @border-radius;
+    height: .4rem;
+    width: 100%;
+  }
+  &::-moz-range-track {
+    background: @core-border-color;
+    border-radius: @border-radius;
+    height: .4rem;
+    width: 100%;
+  }
+  &::-ms-track {
+    background: @core-border-color;
+    border-radius: @border-radius;
+    height: .4rem;
+    width: 100%;
+  }
+  &::-ms-fill-lower {
+    background: @core-color;
+  }
+}