ADD: Sliders experimental component

3 files changed, 97 insertions, 19 deletions

diff --git a/src/forms.less b/src/forms.less
index a2a8b49..257438c 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -2,6 +2,7 @@
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
+
 // Form element: Input boxes
 .form-input {
   appearance: none;
@@ -70,7 +71,7 @@
   }
 }
 
-// Form element: Input note
+// Form element: Input hint
 .form-input-hint {
   color: @core-meta-color;
   margin-top: .4rem;
@@ -146,7 +147,8 @@
     border-color: @control-color-danger;
   }
 }
-// Form element: Checkbox and radio
+
+// Form element: Checkbox and Radio
 .form-checkbox,
 .form-radio,
 .form-switch {
@@ -260,12 +262,13 @@
     }
   }
 }
+
 // Form element: Switch
 .form-switch {
   cursor: pointer;
   display: inline-block;
   line-height: 2rem;
-  padding: .3rem 2rem .3rem 3.6rem;
+  padding: .2rem 2rem .2rem 3.6rem;
   position: relative;
 
   .form-icon {
@@ -280,7 +283,7 @@
     outline: none;
     padding: 0;
     position: absolute;
-    top: .4rem;
+    top: .3rem;
     vertical-align: top;
     width: 3rem;
     &::after {
@@ -312,6 +315,7 @@
     }
   }
 }
+
 // Form element: Input groups
 .input-group {
   display: flex;
@@ -363,3 +367,21 @@
     display: inline-flex;
   }
 }
+
+// Form Horizontal
+.form-horizontal {
+  padding: 1rem;
+
+  .form-group {
+    display: flex;
+  }
+  .form-label {
+    padding: .8rem .4rem;
+    margin-bottom: 0;
+  }
+  .form-checkbox,
+  .form-radio,
+  .form-switch {
+    margin: .4rem 0;
+  }
+}
diff --git a/src/layout.less b/src/layout.less
index 657b59e..05642aa 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -355,21 +355,6 @@
     width: 8.33333333%;
   }
 }
-.form-horizontal {
-  padding: 1rem;
-
-  .form-group {
-    display: flex;
-  }
-  .form-label {
-    padding: .8rem .4rem;
-    margin-bottom: 0;
-  }
-  .form-checkbox,
-  .form-radio {
-    margin: .4rem 0;
-  }
-}
 
 // Responsive breakpoint system
 @media screen and (max-width: @size-xs) {
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;
+  }
+}