change order in timepicker, change style

dist/css/datepicker.css

@@ -398,13 +398,16 @@
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 4px;
+  padding: 0 4px 4px;
   position: relative; }
 
 .datepicker--time-sliders {
   -webkit-flex: 0 1 138px;
       -ms-flex: 0 1 138px;
-          flex: 0 1 138px; }
+          flex: 0 1 138px;
+  -webkit-order: 2;
+      -ms-flex-order: 2;
+          order: 2; }
 
 .datepicker--time-label {
   display: none;
@@ -426,9 +429,10 @@
           align-items: center;
   font-size: 11px;
   height: 24px;
-  background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 2px no-repeat; }
+  background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px no-repeat; }
   .datepicker--time-row input[type='range'] {
     background: none;
+    cursor: pointer;
     -webkit-flex: 1;
         -ms-flex: 1;
             flex: 1;
@@ -440,40 +444,54 @@
       -webkit-appearance: none; }
     .datepicker--time-row input[type='range']::-ms-tooltip {
       display: none; }
+    .datepicker--time-row input[type='range']:hover::-webkit-slider-thumb {
+      border-color: #b8b8b8; }
     .datepicker--time-row input[type='range']:focus {
       outline: none; }
+      .datepicker--time-row input[type='range']:focus::-webkit-slider-thumb {
+        background: #5cc4ef;
+        border-color: #5cc4ef; }
     .datepicker--time-row input[type='range']::-webkit-slider-thumb {
-      height: 10px;
+      box-sizing: border-box;
-      width: 10px;
+      height: 12px;
-      border-radius: 50%;
+      width: 12px;
-      background: #5cc4ef;
+      border-radius: 3px;
-      margin-top: -5px;
+      border: 1px solid #dedede;
-      cursor: pointer; }
+      background: #fff;
+      margin-top: -6px;
+      cursor: pointer;
+      transition: background .2s; }
     .datepicker--time-row input[type='range']::-moz-range-thumb {
-      height: 10px;
+      box-sizing: border-box;
-      width: 10px;
+      height: 12px;
-      border-radius: 50%;
+      width: 12px;
-      border: none;
+      border-radius: 3px;
-      background: #5cc4ef;
+      border: 1px solid #dedede;
-      cursor: pointer; }
+      background: #fff;
+      margin-top: -6px;
+      cursor: pointer;
+      transition: background .2s; }
     .datepicker--time-row input[type='range']::-ms-thumb {
-      height: 10px;
+      box-sizing: border-box;
-      width: 10px;
+      height: 12px;
-      border: none;
+      width: 12px;
-      border-radius: 50%;
+      border-radius: 3px;
-      background: #5cc4ef;
+      border: 1px solid #dedede;
-      cursor: pointer; }
+      background: #fff;
+      margin-top: -6px;
+      cursor: pointer;
+      transition: background .2s; }
     .datepicker--time-row input[type='range']::-webkit-slider-runnable-track {
-      height: 2px;
+      height: 1px;
       cursor: pointer;
       background: transparent; }
     .datepicker--time-row input[type='range']::-moz-range-track {
-      height: 2px;
+      height: 1px;
       cursor: pointer;
       background: transparent; }
     .datepicker--time-row input[type='range']::-ms-track {
       border: none;
-      height: 10px;
+      height: 12px;
       cursor: pointer;
       color: transparent;
       background: transparent; }

src/sass/timepicker.scss

@@ -4,21 +4,35 @@
     Timepicker
    ------------------------------------------------- */
 
-$rangeTrackHeight: 2px;
+$rangeTrackHeight: 1px;
 $rangeTrackBg: #dedede;
-$rangeThumbSize: 10px;
+$rangeThumbSize: 12px;
-$rangeThumbBg: #5cc4ef;
+$rangeThumbBg: #dedede;
+
+@mixin thumb {
+  box-sizing: border-box;
+  height: $rangeThumbSize;
+  width: $rangeThumbSize;
+  border-radius: 3px;
+  border: 1px solid $rangeTrackBg;
+  background: #fff;
+  margin-top: -$rangeThumbSize/2;
+  cursor: pointer;
+
+  transition: background .2s;
+}
 
 .datepicker--time {
   display: flex;
   align-items: center;
 
-  padding: $datepickerPadding;
+  padding: 0 $datepickerPadding $datepickerPadding;
   position: relative;
 }
 
 .datepicker--time-sliders {
   flex: 0 1 138px;
+  order: 2;
 }
 
 .datepicker--time-label {
@@ -37,10 +51,11 @@ $rangeThumbBg: #5cc4ef;
   align-items: center;
   font-size: 11px;
   height: 24px;
-  background: linear-gradient(to right,#dedede,#dedede) left 50%/100% 2px no-repeat;
+  background: linear-gradient(to right,$rangeTrackBg, $rangeTrackBg) left 50%/100% $rangeTrackHeight no-repeat;
 
   input[type='range'] {
     background: none;
+    cursor: pointer;
     flex: 1;
     height: 100%;
     padding: 0;
@@ -55,38 +70,34 @@ $rangeThumbBg: #5cc4ef;
       display: none;
     }
 
+    &:hover {
+      &::-webkit-slider-thumb {
+        border-color: darken($rangeTrackBg, 15);
+      }
+    }
+
     &:focus {
       outline: none;
+
+      &::-webkit-slider-thumb {
+        background: map_get($bg, selected);
+        border-color: map_get($bg, selected);
+      }
     }
 
     //  Thumb
     // -------------------------------------------------
 
     &::-webkit-slider-thumb {
-      height: $rangeThumbSize;
+      @include thumb;
-      width: $rangeThumbSize;
-      border-radius: 50%;
-      background: $rangeThumbBg;
-      margin-top: -$rangeThumbSize/2;
-      cursor: pointer;
     }
 
     &::-moz-range-thumb {
-      height: $rangeThumbSize;
+      @include thumb;
-      width: $rangeThumbSize;
-      border-radius: 50%;
-      border: none;
-      background: $rangeThumbBg;
-      cursor: pointer;
     }
 
     &::-ms-thumb {
-      height: $rangeThumbSize;
+      @include thumb;
-      width: $rangeThumbSize;
-      border: none;
-      border-radius: 50%;
-      background: $rangeThumbBg;
-      cursor: pointer;
     }
 
     //  Track