add highlighting effect when mouse cursor over time sliders

dist/css/datepicker.css

@@ -401,15 +401,18 @@
           align-items: center;
   padding: 4px;
   position: relative; }
+  .datepicker--time.-am-pm- .datepicker--time-sliders {
+    -webkit-flex: 0 1 138px;
+        -ms-flex: 0 1 138px;
+            flex: 0 1 138px;
+    max-width: 138px; }
 
 .datepicker--time-sliders {
-  -webkit-flex: 0 1 138px;
+  -webkit-flex: 0 1 153px;
-      -ms-flex: 0 1 138px;
+      -ms-flex: 0 1 153px;
-          flex: 0 1 138px;
+          flex: 0 1 153px;
   margin-right: 10px;
-  -webkit-order: 2;
+  max-width: 153px; }
-      -ms-flex-order: 2;
-          order: 2; }
 
 .datepicker--time-label {
   display: none;
@@ -430,14 +433,31 @@
   margin: 0 0 0 10px; }
 
 .datepicker--time-current-colon {
-  margin: 0 1px 3px;
+  margin: 0 2px 3px;
   line-height: 1; }
 
 .datepicker--time-current-hours,
 .datepicker--time-current-minutes {
   line-height: 1;
   font-size: 19px;
-  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; }
+  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
+  position: relative;
+  z-index: 1; }
+  .datepicker--time-current-hours:after,
+  .datepicker--time-current-minutes:after {
+    content: '';
+    background: #f0f0f0;
+    border-radius: 4px;
+    position: absolute;
+    left: -2px;
+    top: -3px;
+    right: -2px;
+    bottom: -2px;
+    z-index: -1;
+    opacity: 0; }
+  .datepicker--time-current-hours.active:after,
+  .datepicker--time-current-minutes.active:after {
+    opacity: 1; }
 
 .datepicker--time-current-ampm {
   text-transform: uppercase;
@@ -477,11 +497,21 @@
       display: none; }
     .datepicker--time-row input[type='range']:hover::-webkit-slider-thumb {
       border-color: #b8b8b8; }
+    .datepicker--time-row input[type='range']:hover::-moz-range-thumb {
+      border-color: #b8b8b8; }
+    .datepicker--time-row input[type='range']:hover::-ms-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']:focus::-moz-range-thumb {
+        background: #5cc4ef;
+        border-color: #5cc4ef; }
+      .datepicker--time-row input[type='range']:focus::-ms-thumb {
+        background: #5cc4ef;
+        border-color: #5cc4ef; }
     .datepicker--time-row input[type='range']::-webkit-slider-thumb {
       box-sizing: border-box;
       height: 12px;

dist/js/datepicker.js

@@ -1866,6 +1866,8 @@ var Datepicker;
 
             this.d.$el.on('selectDate', this._onSelectDate.bind(this));
             this.$ranges.on(input, this._onChangeRange.bind(this));
+            this.$ranges.on('mouseenter', this._onMouseEnterRange.bind(this));
+            this.$ranges.on('mouseout', this._onMouseOutRange.bind(this));
         },
 
         _setInitialTime: function (date, parse) {
@@ -1940,7 +1942,9 @@ var Datepicker;
             if (this.d.ampm) {
                 this.$ampm = $('<span class="datepicker--time-current-ampm">')
                     .appendTo($('.datepicker--time-current', this.$timepicker))
-                    .html(this.dayPeriod)
+                    .html(this.dayPeriod);
+
+                this.$timepicker.addClass('-am-pm-');
             }
         },
 
@@ -2036,6 +2040,19 @@ var Datepicker;
             }
         },
 
+        set hours (val) {
+            this._hours = val;
+
+            var displayHours = this._getValidHoursFromDate(val);
+
+            this.displayHours = displayHours.hours;
+            this.dayPeriod = displayHours.dayPeriod;
+        },
+
+        get hours() {
+            return this._hours;
+        },
+
         //  Events
         // -------------------------------------------------
 
@@ -2053,17 +2070,14 @@ var Datepicker;
             this.update();
         },
 
-        set hours (val) {
+        _onMouseEnterRange: function (e) {
-            this._hours = val;
+            var name = $(e.target).attr('name');
-
+            $('.datepicker--time-current-' + name, this.$timepicker).addClass('active');
-            var displayHours = this._getValidHoursFromDate(val);
-
-            this.displayHours = displayHours.hours;
-            this.dayPeriod = displayHours.dayPeriod;
         },
 
-        get hours() {
+        _onMouseOutRange: function (e) {
-            return this._hours;
+            var name = $(e.target).attr('name');
+            $('.datepicker--time-current-' + name, this.$timepicker).removeClass('active');
         }
     };
 })(window, jQuery, Datepicker);

src/js/timepicker.js

@@ -34,6 +34,8 @@
 
             this.d.$el.on('selectDate', this._onSelectDate.bind(this));
             this.$ranges.on(input, this._onChangeRange.bind(this));
+            this.$ranges.on('mouseenter', this._onMouseEnterRange.bind(this));
+            this.$ranges.on('mouseout', this._onMouseOutRange.bind(this));
         },
 
         _setInitialTime: function (date, parse) {
@@ -108,7 +110,9 @@
             if (this.d.ampm) {
                 this.$ampm = $('<span class="datepicker--time-current-ampm">')
                     .appendTo($('.datepicker--time-current', this.$timepicker))
-                    .html(this.dayPeriod)
+                    .html(this.dayPeriod);
+
+                this.$timepicker.addClass('-am-pm-');
             }
         },
 
@@ -204,6 +208,19 @@
             }
         },
 
+        set hours (val) {
+            this._hours = val;
+
+            var displayHours = this._getValidHoursFromDate(val);
+
+            this.displayHours = displayHours.hours;
+            this.dayPeriod = displayHours.dayPeriod;
+        },
+
+        get hours() {
+            return this._hours;
+        },
+
         //  Events
         // -------------------------------------------------
 
@@ -221,17 +238,14 @@
             this.update();
         },
 
-        set hours (val) {
+        _onMouseEnterRange: function (e) {
-            this._hours = val;
+            var name = $(e.target).attr('name');
-
+            $('.datepicker--time-current-' + name, this.$timepicker).addClass('active');
-            var displayHours = this._getValidHoursFromDate(val);
-
-            this.displayHours = displayHours.hours;
-            this.dayPeriod = displayHours.dayPeriod;
         },
 
-        get hours() {
+        _onMouseOutRange: function (e) {
-            return this._hours;
+            var name = $(e.target).attr('name');
+            $('.datepicker--time-current-' + name, this.$timepicker).removeClass('active');
         }
     };
 })(window, jQuery, Datepicker);

src/sass/timepicker.scss

@@ -9,6 +9,34 @@ $rangeTrackBg: #dedede;
 $rangeThumbSize: 12px;
 $rangeThumbBg: #dedede;
 
+@mixin trackSelector {
+  &::-webkit-slider-runnable-track {
+    @content;
+  }
+
+  &::-moz-range-track {
+    @content;
+  }
+
+  &::-ms-track {
+    @content;
+  }
+}
+
+@mixin thumbSelector {
+  &::-webkit-slider-thumb {
+    @content;
+  }
+
+  &::-moz-range-thumb {
+    @content;
+  }
+
+  &::-ms-thumb {
+    @content;
+  }
+}
+
 @mixin thumb {
   box-sizing: border-box;
   height: $rangeThumbSize;
@@ -37,12 +65,19 @@ $rangeThumbBg: #dedede;
 
   padding: $datepickerPadding;
   position: relative;
+
+  &.-am-pm- {
+    .datepicker--time-sliders {
+      flex: 0 1 138px;
+      max-width: 138px;
+    }
+  }
 }
 
 .datepicker--time-sliders {
-  flex: 0 1 138px;
+  flex: 0 1 153px;
   margin-right: 10px;
-  order: 2;
+  max-width: 153px;
 }
 
 .datepicker--time-label {
@@ -60,7 +95,7 @@ $rangeThumbBg: #dedede;
 }
 
 .datepicker--time-current-colon {
-  margin: 0 1px 3px;
+  margin: 0 2px 3px;
   line-height: 1;
 }
 
@@ -69,6 +104,27 @@ $rangeThumbBg: #dedede;
   line-height: 1;
   font-size: 19px;
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
+  position: relative;
+  z-index: 1;
+
+  &:after {
+    content: '';
+    background: map_get($bg, hover);
+    border-radius: $datepickerBorderRadius;
+    position: absolute;
+    left: -2px;
+    top: -3px;
+    right: -2px;
+    bottom: -2px;
+    z-index: -1;
+    opacity: 0;
+  }
+
+  &.active {
+    &:after {
+      opacity: 1;
+    }
+  }
 }
 
 .datepicker--time-current-ampm {
@@ -109,7 +165,7 @@ $rangeThumbBg: #dedede;
     }
 
     &:hover {
-      &::-webkit-slider-thumb {
+      @include thumbSelector() {
         border-color: darken($rangeTrackBg, 15);
       }
     }
@@ -117,7 +173,7 @@ $rangeThumbBg: #dedede;
     &:focus {
       outline: none;
 
-      &::-webkit-slider-thumb {
+      @include thumbSelector() {
         background: map_get($bg, selected);
         border-color: map_get($bg, selected);
       }
@@ -126,29 +182,13 @@ $rangeThumbBg: #dedede;
     //  Thumb
     // -------------------------------------------------
 
-    &::-webkit-slider-thumb {
+    @include thumbSelector() {
-      @include thumb;
-    }
-
-    &::-moz-range-thumb {
-      @include thumb;
-    }
-
-    &::-ms-thumb {
       @include thumb;
     }
 
     //  Track
     // -------------------------------------------------
-    &::-webkit-slider-runnable-track {
+    @include trackSelector() {
-      @include track;
-    }
-
-    &::-moz-range-track {
-      @include track;
-    }
-
-    &::-ms-track {
       @include track;
     }