webshims-rails 1.14.1 → 1.14.3

data/vendor/assets/javascripts/webshims/shims/range-ui.js

@@ -11,6 +11,23 @@
 		return val * 1;
 	};
 	var createOpts = ['step', 'min', 'max', 'readonly', 'title', 'disabled', 'tabindex'];
+	var normalizeTouch = (function(){
+		var types = {
+			touchstart: 1,
+			touchend: 1,
+			touchmove: 1
+		};
+		var normalize = ['pageX', 'pageY'];
+		return function(e){
+			if(types[e.type] && e.originalEvent && e.originalEvent.touches && e.originalEvent.touches.length){
+				for(var i = 0; i < normalize.length; i++){
+					e[normalize[i]] = e.originalEvent.touches[0][normalize[i]];
+				}
+
+			}
+			return e;
+		};
+	})();
 	var rangeProto = {
 		_create: function(){
 			var i;
@@ -329,23 +346,7 @@
 					}
 				};
 			})();
-			var normalizeTouch = (function(){
-				var types = {
-					touchstart: 1,
-					touchend: 1,
-					touchmove: 1
-				};
-				var normalize = ['pageX', 'pageY'];
-				return function(e){
-					if(types[e.type] && e.originalEvent && e.originalEvent.touches && e.originalEvent.touches.length){
-						for(var i = 0; i < normalize.length; i++){
-							e[normalize[i]] = e.originalEvent.touches[0][normalize[i]];
-						}
-						
-					}
-					return e;
-				};
-			})();
+
 			var updateValue = function(val, animate){
 				if(val != o.value){
 					that.value(val, false, animate);
@@ -365,7 +366,7 @@
 				}
 			};
 			var remove = function(e){
-				if(e && e.type == 'mouseup'){
+				if(e && (e.type == 'mouseup' || e.type == 'touchend')){
 					eventTimer.call('input', o.value);
 					eventTimer.call('change', o.value);
 				}
@@ -386,6 +387,8 @@
 				$(document).off('mousemove touchmove', setValueFromPos).off('mouseup touchend', remove);
 				$(window).off('blur', removeWin);
 				if(!o.readonly && !o.disabled){
+					eventTimer.init('input', o.value);
+					eventTimer.init('change', o.value);
 					normalizeTouch(e);
 					that.element.trigger('focus');
 					that.addRemoveClass('ws-active', true);
@@ -421,8 +424,10 @@
 				'touchstart mousedown': add,
 				focus: function(e){
 					if(!o.disabled && !hasFocus){
-						eventTimer.init('input', o.value);
-						eventTimer.init('change', o.value);
+						if(!isActive){
+							eventTimer.init('input', o.value);
+							eventTimer.init('change', o.value);
+						}
 						that.addRemoveClass('ws-focus', true);
 						that.updateMetrics();
 					}
@@ -608,6 +613,7 @@
 			obj._create.call(obj);
 		});
 	};
+	$.fn.rangeUI.normalizeTouch = normalizeTouch;
 	if(window.webshims && webshims.isReady){
 		webshims.isReady('range-ui', true);
 	}

data/vendor/assets/javascripts/webshims/shims/styles/forms-ext.css

@@ -1,16 +1,3 @@
-.ws-range .ws-range-thumb, .ws-inline-picker,
-div.ws-inline-picker {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box; }
-  .ws-range .ws-range-thumb *, .ws-inline-picker *,
-  div.ws-inline-picker *, .ws-range .ws-range-thumb:before, .ws-inline-picker:before, .ws-range .ws-range-thumb:after, .ws-inline-picker:after,
-  .ws-range .ws-range-thumb :after,
-  .ws-inline-picker :after,
-  .ws-range .ws-range-thumb :before,
-  .ws-inline-picker :before {
-    -moz-box-sizing: content-box;
-    box-sizing: content-box; }
-
 /* style picker api */
 /* how to use: 
 *
@@ -33,101 +20,127 @@ SASS:
 /* btn api */
 .hide-spinbtns + .input-buttons > .step-controls,
 .hide-spinbtns .input-buttons > .step-controls {
-  display: none; }
+  display: none;
+}
 .hide-spinbtns::-webkit-inner-spin-button,
 .hide-spinbtns ::-webkit-inner-spin-button {
-  display: none; }
+  display: none;
+}
 
 .hide-dropdownbtn + .input-buttons > .ws-popover-opener,
 .hide-dropdownbtn .input-buttons > .ws-popover-opener {
-  display: none; }
+  display: none;
+}
 
 .hide-inputbtns + .input-buttons,
 .hide-inputbtns .input-buttons {
-  display: none; }
+  display: none;
+}
 .hide-inputbtns::-webkit-inner-spin-button,
 .hide-inputbtns ::-webkit-inner-spin-button {
-  display: none; }
+  display: none;
+}
 
 .a11yhide-inputbtns + .input-buttons,
 .a11yhide-inputbtns .input-buttons {
   width: 0;
   margin: 0;
-  overflow: visible; }
-  .a11yhide-inputbtns + .input-buttons > .step-controls,
-  .a11yhide-inputbtns .input-buttons > .step-controls {
-    display: none; }
-  .a11yhide-inputbtns + .input-buttons > .ws-popover-opener,
-  .a11yhide-inputbtns .input-buttons > .ws-popover-opener {
-    height: 0;
-    width: 0;
-    overflow: hidden; }
-    .a11yhide-inputbtns + .input-buttons > .ws-popover-opener:focus, .a11yhide-inputbtns + .input-buttons > .ws-popover-opener:active,
-    .a11yhide-inputbtns .input-buttons > .ws-popover-opener:focus,
-    .a11yhide-inputbtns .input-buttons > .ws-popover-opener:active {
-      height: 19px;
-      width: 19px; }
+  overflow: visible;
+}
+.a11yhide-inputbtns + .input-buttons > .step-controls,
+.a11yhide-inputbtns .input-buttons > .step-controls {
+  display: none;
+}
+.a11yhide-inputbtns + .input-buttons > .ws-popover-opener,
+.a11yhide-inputbtns .input-buttons > .ws-popover-opener {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+}
+.a11yhide-inputbtns + .input-buttons > .ws-popover-opener:focus, .a11yhide-inputbtns + .input-buttons > .ws-popover-opener:active,
+.a11yhide-inputbtns .input-buttons > .ws-popover-opener:focus,
+.a11yhide-inputbtns .input-buttons > .ws-popover-opener:active {
+  height: 19px;
+  width: 19px;
+}
 
 .inputbtns-outside + span.input-buttons,
 .inputbtns-outside span.input.input-buttons {
-  margin-left: 2px; }
-  .inputbtns-outside + span.input-buttons.ws-is-rtl,
-  .inputbtns-outside span.input.input-buttons.ws-is-rtl {
-    margin-left: 0;
-    margin-right: 2px; }
+  margin-left: 2px;
+}
+.inputbtns-outside + span.input-buttons.ws-is-rtl,
+.inputbtns-outside span.input.input-buttons.ws-is-rtl {
+  margin-left: 0;
+  margin-right: 2px;
+}
 
 .show-ticklabels .ws-range-ticks[data-label]:after {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .show-tickvalues .ws-range-ticks:before {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .hide-ticks .ws-range-ticks {
-  display: none; }
+  display: none;
+}
 
 .show-valuetooltip span.ws-range-thumb > span,
-.show-valuetooltip span.ws-range-thumb > span span:after {
-  display: inline-block; }
-.show-valuetooltip span.ws-range-thumb > span span:after {
+.show-valuetooltip span.ws-range-thumb > span > span:after {
+  display: inline-block;
+}
+.show-valuetooltip span.ws-range-thumb > span > span:after {
   content: attr(data-value) !important;
-  visibility: visible !important; }
+  visibility: visible !important;
+}
 
 .ws-active.show-activevaluetooltip span.ws-range-thumb > span,
-.ws-active.show-activevaluetooltip span.ws-range-thumb > span span:after,
+.ws-active.show-activevaluetooltip span.ws-range-thumb > span > span:after,
 .show-activevaluetooltip .ws-range.ws-active span.ws-range-thumb > span,
-.show-activevaluetooltip .ws-range.ws-active span.ws-range-thumb > span span:after {
-  display: inline-block; }
-.ws-active.show-activevaluetooltip span.ws-range-thumb > span span:after,
-.show-activevaluetooltip .ws-range.ws-active span.ws-range-thumb > span span:after {
+.show-activevaluetooltip .ws-range.ws-active span.ws-range-thumb > span > span:after {
+  display: inline-block;
+}
+.ws-active.show-activevaluetooltip span.ws-range-thumb > span > span:after,
+.show-activevaluetooltip .ws-range.ws-active span.ws-range-thumb > span > span:after {
   content: attr(data-value) !important;
-  visibility: visible !important; }
+  visibility: visible !important;
+}
 
 .show-labeltooltip span.ws-range-thumb > span,
-.show-labeltooltip span.ws-range-thumb > span span:before {
-  display: inline-block; }
-.show-labeltooltip span.ws-range-thumb > span span:before {
+.show-labeltooltip span.ws-range-thumb > span > span:before {
+  display: inline-block;
+}
+.show-labeltooltip span.ws-range-thumb > span > span:before {
   content: attr(data-valuetext) !important;
-  visibility: visible !important; }
+  visibility: visible !important;
+}
 
 .ws-active.show-activelabeltooltip span.ws-range-thumb > span,
-.ws-active.show-activelabeltooltip span.ws-range-thumb > span span:before,
+.ws-active.show-activelabeltooltip span.ws-range-thumb > span > span:before,
 .show-activelabeltooltip .ws-range.ws-active span.ws-range-thumb > span,
-.show-activelabeltooltip .ws-range.ws-active span.ws-range-thumb > span span:before {
-  display: inline-block; }
-.ws-active.show-activelabeltooltip span.ws-range-thumb > span span:before,
-.show-activelabeltooltip .ws-range.ws-active span.ws-range-thumb > span span:before {
+.show-activelabeltooltip .ws-range.ws-active span.ws-range-thumb > span > span:before {
+  display: inline-block;
+}
+.ws-active.show-activelabeltooltip span.ws-range-thumb > span > span:before,
+.show-activelabeltooltip .ws-range.ws-active span.ws-range-thumb > span > span:before {
   content: attr(data-valuetext) !important;
-  visibility: visible !important; }
+  visibility: visible !important;
+}
 
 @font-face {
   font-family: 'widget';
-  src: url("widget.eot"); }
+  src: url("widget.eot");
+}
 @font-face {
   font-family: 'widget';
   src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff"), url("widget.ttf") format("truetype");
   font-weight: normal;
-  font-style: normal; }
-.ws-popover-opener span, .time-input-buttons .ws-popover-opener span {
+  font-style: normal;
+}
+.ws-popover-opener > span,
+.ws-popover-opener .ws-color-indicator, .time-input-buttons .ws-popover-opener > span, .time-input-buttons
+.ws-popover-opener .ws-color-indicator {
   font-family: 'widget';
   speak: none;
   font-style: normal;
@@ -138,26 +151,48 @@ SASS:
   zoom: 1;
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale; }
-
-.ws-popover-opener span:before {
-  content: "\f073"; }
-
-.time-input-buttons .ws-popover-opener span:before {
-  content: "\f017"; }
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ws-popover-opener > span:before,
+.ws-popover-opener .ws-color-indicator:before {
+  content: "\f073";
+}
+
+.time-input-buttons .ws-popover-opener > span:before, .time-input-buttons
+.ws-popover-opener .ws-color-indicator:before {
+  content: "\f017";
+}
+
+.ws-range,
+.ws-range-rail,
+.ws-range span > span,
+.input-buttons,
+.step-controls,
+.ws-popover-opener,
+.step-control {
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: auto;
+  background: transparent none;
+}
 
 /* spinner control for time, number (usable for date, datetime-local) */
 .has-input-buttons,
 html > body input.ws-inputreplace.has-input-buttons,
 span.has-input-buttons {
   display: inline-block;
-  vertical-align: middle; }
+  vertical-align: middle;
+}
 
 .ws-inputreplace[readonly][aria-readonly="false"] {
-  cursor: pointer; }
-  .ws-inputreplace[readonly][aria-readonly="false"][disabled] {
-    cursor: default;
-    cursor: not-allowed; }
+  cursor: pointer;
+}
+.ws-inputreplace[readonly][aria-readonly="false"][disabled] {
+  cursor: default;
+  cursor: not-allowed;
+}
 
 .input-buttons,
 .step-controls,
@@ -166,7 +201,8 @@ span.has-input-buttons {
   overflow: hidden;
   display: inline-block;
   vertical-align: middle;
-  margin-left: -18.5px; }
+  margin-left: -18.5px;
+}
 
 .step-controls,
 .ws-popover-opener {
@@ -174,10 +210,12 @@ span.has-input-buttons {
   float: left;
   margin: 0;
   height: 19px;
-  width: 15px; }
-  .ws-is-rtl .step-controls, .ws-is-rtl
-  .ws-popover-opener {
-    float: right; }
+  width: 15px;
+}
+.ws-is-rtl .step-controls, .ws-is-rtl
+.ws-popover-opener {
+  float: right;
+}
 
 .ws-popover-opener {
   position: relative;
@@ -185,162 +223,218 @@ span.has-input-buttons {
   overflow: visible;
   margin: 0 0 0 2px;
   width: 19px;
-  border-radius: 3px;
   cursor: pointer;
   background: #ccc;
   font-size: 13px;
   text-align: center;
-  outline-offset: -2px; }
-  .ws-popover-opener:focus, .ws-popover-opener:active {
-    outline: 1px dotted #666; }
-  .ws-popover-opener:hover {
-    outline: none; }
-  .ws-is-rtl .ws-popover-opener {
-    margin: 0 2px 0 0; }
-  .ws-popover-opener span {
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 16px;
-    height: 16px;
-    margin: -8px 0 0 -8px; }
-    .time-input-buttons .ws-popover-opener span {
-      margin: -7.5px 0 0 -7.5px; }
-    .color-input-buttons .ws-popover-opener span {
-      background: url(color-picker.png) no-repeat 0 0; }
-      .color-input-buttons .ws-popover-opener span:before {
-        content: ""; }
-    .ws-popover-opener span.ws-color-indicator-bg {
-      background: url(../jpicker/images/preview-opacity.png) no-repeat 0; }
-    .ws-popover-opener span.ws-color-indicator {
-      background: none; }
+  outline-offset: -2px;
+}
+.ws-popover-opener:focus, .ws-popover-opener:active {
+  outline: 1px dotted #666;
+}
+.ws-popover-opener:hover {
+  outline: none;
+}
+.ws-is-rtl .ws-popover-opener {
+  margin: 0 2px 0 0;
+}
+.ws-popover-opener > span,
+.ws-popover-opener .ws-color-indicator {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+}
+.time-input-buttons .ws-popover-opener > span, .time-input-buttons
+.ws-popover-opener .ws-color-indicator {
+  margin: -7.5px 0 0 -7.5px;
+}
+.color-input-buttons .ws-popover-opener > span, .color-input-buttons
+.ws-popover-opener .ws-color-indicator {
+  background: url(color-picker.png) no-repeat 0 0;
+}
+.color-input-buttons .ws-popover-opener > span:before, .color-input-buttons
+.ws-popover-opener .ws-color-indicator:before {
+  content: "";
+}
+.ws-popover-opener > span.ws-color-indicator-bg,
+.ws-popover-opener .ws-color-indicator.ws-color-indicator-bg {
+  background: url(../jpicker/images/preview-opacity.png) no-repeat 0;
+}
+.ws-popover-opener > span.ws-color-indicator,
+.ws-popover-opener .ws-color-indicator.ws-color-indicator {
+  background: none;
+}
 
 input[type="color"] {
-  width: 7.5em; }
+  width: 7.5em;
+}
 
 .input-buttons {
-  text-align: left; }
-  .input-buttons.color-input-buttons {
-    margin-left: 2px; }
-  .input-buttons.ws-disabled {
-    opacity: 0.95; }
-  .input-buttons.ws-disabled *, .input-buttons.ws-readonly * {
-    cursor: default; }
+  text-align: left;
+}
+.input-buttons.color-input-buttons {
+  margin-left: 2px;
+}
+.input-buttons.ws-disabled {
+  opacity: 0.95;
+}
+.input-buttons.ws-disabled .ws-popover-opener,
+.input-buttons.ws-disabled .step-control, .input-buttons.ws-readonly .ws-popover-opener,
+.input-buttons.ws-readonly .step-control {
+  cursor: default;
+}
 
 .input-button-size-1.month-input-buttons, .input-button-size-1.date-input-buttons, .input-button-size-1.datetime-local-input-buttons {
-  margin-left: -24px; }
-  .input-button-size-1.month-input-buttons.ws-is-rtl, .input-button-size-1.date-input-buttons.ws-is-rtl, .input-button-size-1.datetime-local-input-buttons.ws-is-rtl {
-    margin-left: 0;
-    margin-right: -24px; }
+  margin-left: -24px;
+}
+.input-button-size-1.month-input-buttons.ws-is-rtl, .input-button-size-1.date-input-buttons.ws-is-rtl, .input-button-size-1.datetime-local-input-buttons.ws-is-rtl {
+  margin-left: 0;
+  margin-right: -24px;
+}
 
 .input-button-size-2 {
-  margin-left: -39px; }
-  .input-button-size-2.ws-is-rtl {
-    margin-left: 0;
-    margin-right: -39px; }
-  .input-button-size-2 .step-controls {
-    visibility: hidden;
-    opacity: 0; }
-  :focus + .input-button-size-2 .step-controls, :hover + .input-button-size-2 .step-controls, :active + .input-button-size-2 .step-controls, .input-button-size-2:hover .step-controls {
-    opacity: 1;
-    visibility: visible; }
+  margin-left: -39px;
+}
+.input-button-size-2.ws-is-rtl {
+  margin-left: 0;
+  margin-right: -39px;
+}
+.input-button-size-2 .step-controls {
+  visibility: hidden;
+  opacity: 0;
+}
+:focus + .input-button-size-2 .step-controls, :hover + .input-button-size-2 .step-controls, :active + .input-button-size-2 .step-controls, .input-button-size-2:hover .step-controls {
+  opacity: 1;
+  visibility: visible;
+}
 
 .step-controls {
-  transition: all 300ms; }
-  .step-controls span {
-    position: absolute;
-    left: 0;
-    display: inline-block;
-    overflow: hidden;
-    margin: 0 !important;
-    padding: 0 !important;
-    width: 15px;
-    height: 9px;
-    cursor: pointer;
-    font-size: 0;
-    line-height: 0;
-    text-align: center;
-    transition: border-color 300ms, background-color 300ms; }
-    .step-controls span.step-down {
-      bottom: 0; }
-    .step-controls span:before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      content: "";
-      display: inline-block;
-      width: 0px;
-      height: 0px;
-      border-style: solid;
-      margin: -2px 0 0 -4px;
-      transition: border-color 300ms, background-color 300ms; }
-    .step-controls span.step-up:before {
-      border-width: 0 4px 4px;
-      border-color: transparent transparent #999 transparent; }
-    .step-controls span.step-up:hover:before {
-      border-color: transparent transparent #666 transparent; }
-    .step-controls span.step-up.mousepress-ui:before {
-      border-color: transparent transparent #000 transparent; }
-    .ws-disabled .step-controls span.step-up:before {
-      border-color: transparent transparent #aaa transparent; }
-    .step-controls span.step-down:before {
-      border-width: 4px 4px 0;
-      border-color: #999 transparent transparent transparent; }
-    .step-controls span.step-down:hover:before {
-      border-color: #666 transparent transparent transparent; }
-    .step-controls span.step-down.mousepress-ui:before {
-      border-color: #000 transparent transparent transparent; }
-    .ws-disabled .step-controls span.step-down:before {
-      border-color: #aaa transparent transparent transparent; }
+  transition: all 300ms;
+}
+
+span.step-control {
+  position: absolute;
+  left: 0;
+  display: inline-block;
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 15px;
+  height: 9px;
+  cursor: pointer;
+  font-size: 0;
+  line-height: 0;
+  text-align: center;
+  transition: border-color 300ms, background-color 300ms;
+}
+span.step-control.step-down {
+  bottom: 0;
+}
+span.step-control:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: "";
+  display: inline-block;
+  width: 0px;
+  height: 0px;
+  border-style: solid;
+  margin: -2px 0 0 -4px;
+  transition: border-color 300ms, background-color 300ms;
+}
+span.step-control.step-up:before {
+  border-width: 0 4px 4px;
+  border-color: transparent transparent #999 transparent;
+}
+span.step-control.step-up:hover:before {
+  border-color: transparent transparent #666 transparent;
+}
+span.step-control.step-up.mousepress-ui:before {
+  border-color: transparent transparent #000 transparent;
+}
+.ws-disabled span.step-control.step-up:before {
+  border-color: transparent transparent #aaa transparent;
+}
+span.step-control.step-down:before {
+  border-width: 4px 4px 0;
+  border-color: #999 transparent transparent transparent;
+}
+span.step-control.step-down:hover:before {
+  border-color: #666 transparent transparent transparent;
+}
+span.step-control.step-down.mousepress-ui:before {
+  border-color: #000 transparent transparent transparent;
+}
+.ws-disabled span.step-control.step-down:before {
+  border-color: #aaa transparent transparent transparent;
+}
 
 /* helper classes to hide show/hide specific btn features features */
 .ws-input {
   letter-spacing: -0.31em;
-  word-spacing: -0.43em; }
-  .ws-input > * {
-    text-align: center;
-    letter-spacing: normal;
-    word-spacing: normal; }
-    .ws-input > * > option {
-      text-align: left; }
-  .ws-input .ws-input-seperator {
-    vertical-align: middle;
-    width: 2%;
-    overflow: hidden; }
-  .ws-input + .input-buttons {
-    margin-left: 2px; }
-  .ws-input input,
-  .ws-input .ws-input-seperator {
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    text-align: center;
-    display: inline-block; }
+  word-spacing: -0.43em;
+}
+.ws-input > select,
+.ws-input > input,
+.ws-input > .ws-input-seperator {
+  text-align: center;
+  letter-spacing: normal;
+  word-spacing: normal;
+}
+.ws-input option {
+  text-align: left;
+}
+.ws-input .ws-input-seperator {
+  vertical-align: middle;
+  width: 2%;
+  overflow: hidden;
+}
+.ws-input + .input-buttons {
+  margin-left: 2px;
+}
+.ws-input input,
+.ws-input .ws-input-seperator {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: center;
+  display: inline-block;
+}
 
 span.ws-input {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .ws-date .mm,
 .ws-date .dd {
   width: 23.5%;
-  min-width: 10%; }
+  min-width: 10%;
+}
 .ws-date .yy {
   width: 48%;
-  min-width: 20%; }
+  min-width: 20%;
+}
 .ws-date.ws-month-select .dd {
   width: 22%;
-  min-width: 10%; }
+  min-width: 10%;
+}
 .ws-date.ws-month-select .mm {
   width: 38%;
-  min-width: 17%; }
+  min-width: 17%;
+}
 .ws-date.ws-month-select .yy {
   width: 36%;
-  min-width: 16%; }
+  min-width: 16%;
+}
 
 .ws-month .mm,
 .ws-month .yy {
   width: 47.9%;
-  min-width: 20%; }
+  min-width: 20%;
+}
 
 /* range */
 .ws-range {
@@ -352,121 +446,137 @@ span.ws-input {
   border: none;
   height: 0.61538em;
   width: 155px;
-  border-radius: 0.38462em;
   background: #ddd;
   cursor: pointer;
   font-size: 13px;
   outline: none;
   transition: background-color 400ms, border-color 400ms;
   background-color: #ddd;
-  box-shadow: 0 -0.07692em 0.11538em rgba(0, 0, 0, 0.2) inset; }
-  [list] + .ws-range {
-    margin: 0.19231em 0 0.96154em; }
-  .ws-range .ws-range-thumb {
-    top: 0;
-    position: absolute;
-    display: block;
-    z-index: 4;
-    margin: -0.46154em 0 0 -0.76923em;
-    height: 1.53846em;
-    width: 1.53846em;
-    border-radius: 50%;
-    background: #ccc;
-    border: 0.07692em solid #aaaaaa;
-    cursor: pointer;
-    transition: background-color 400ms, border-color 400ms; }
-    .ws-range .ws-range-thumb > span {
-      position: absolute;
-      margin: 0 0 3px -90px;
-      padding: 0;
-      border: 0;
-      left: 50%;
-      bottom: 1.61538em;
-      visibility: hidden;
-      width: 180px;
-      text-align: center;
-      background: none; }
-      .ws-range .ws-range-thumb > span span {
-        visibility: visible; }
-        .ws-range .ws-range-thumb > span span:after, .ws-range .ws-range-thumb > span span:before {
-          content: "";
-          padding: 0.07692em 0.26923em;
-          text-align: center;
-          background: #fff;
-          border: 0.07692em solid #cccccc;
-          border-radius: 0.30769em;
-          visibility: visible; }
-  .ws-range.ws-focus .ws-range-thumb {
-    background: #eee;
-    border-color: #999; }
-  .ws-range.ws-active .ws-range-thumb {
-    box-shadow: 0 0 0.69231em rgba(0, 75, 100, 0.2); }
-  .ws-range[aria-disabled="true"], .ws-range[aria-readonly="true"] {
-    cursor: default;
-    opacity: 0.95; }
-  .ws-range[aria-disabled="true"] .ws-range-thumb, .ws-range[aria-readonly="true"] .ws-range-thumb {
-    cursor: default; }
-  .ws-range[aria-disabled="true"] .ws-range-thumb {
-    background: #ddd;
-    border-color: #ddd; }
-  .ws-range .ws-range-rail {
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0;
-    zoom: 1; }
-  .ws-range .ws-range-progress {
-    position: absolute !important;
-    display: block;
-    margin: 0;
-    padding: 0;
-    top: 0;
-    border-radius: 0.38462em;
-    height: 100%;
-    left: 0;
-    z-index: 1;
-    overflow: hidden;
-    background: #09c;
-    box-shadow: 0 0.11538em 0.26923em rgba(255, 255, 255, 0.2) inset;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box; }
-  .ws-range .ws-range-ticks {
-    position: absolute;
-    bottom: -0.76923em;
-    left: 0;
-    height: 0.61538em;
-    width: 0.07692em;
-    margin: 0 0 0 -0.07692em;
-    background: #ccc;
-    transition: background-color 400ms, color 400ms; }
-    .ws-range .ws-range-ticks.ws-selected-option {
-      background: #09c;
-      color: #09c; }
-  .ws-range.ws-is-rtl .ws-range-progress {
-    left: auto;
-    right: 0; }
-  .ws-range.ws-is-rtl .ws-range-ticks {
-    left: auto;
-    right: 0; }
-  .ws-range.vertical-range {
-    width: 0.61538em;
-    margin: 0 10px 0 5px; }
-    .ws-range.vertical-range .ws-range-ticks {
-      bottom: auto;
-      left: auto;
-      margin: -0.05769em 0 0 0;
-      right: -0.57692em;
-      height: 0.11538em;
-      width: 0.52308em; }
-    .ws-range.vertical-range .ws-range-progress {
-      top: auto;
-      bottom: 1px;
-      left: 0;
-      width: 100%;
-      height: 0; }
+  letter-spacing: normal;
+  word-spacing: normal;
+}
+[list] + .ws-range {
+  margin: 0.19231em 0 0.96154em;
+}
+.ws-range .ws-range-thumb {
+  top: 0;
+  position: absolute;
+  display: block;
+  z-index: 4;
+  margin: -0.38462em 0 0 -1.15385em;
+  height: 1.38462em;
+  width: 2.30769em;
+  background: #ccc;
+  border: 0.07692em solid #aaaaaa;
+  cursor: pointer;
+  transition: background-color 400ms, border-color 400ms;
+}
+.ws-range .ws-range-thumb > span {
+  position: absolute;
+  margin: 0 0 3px -90px;
+  padding: 0;
+  border: 0;
+  left: 50%;
+  bottom: 1.46154em;
+  visibility: hidden;
+  width: 180px;
+  text-align: center;
+  background: none;
+}
+.ws-range .ws-range-thumb > span > span {
+  visibility: visible;
+}
+.ws-range .ws-range-thumb > span > span:after, .ws-range .ws-range-thumb > span > span:before {
+  content: "";
+  padding: 0.07692em 0.26923em;
+  text-align: center;
+  background: #fff;
+  border: 0.07692em solid #cccccc;
+  visibility: visible;
+}
+.ws-range.ws-focus .ws-range-thumb {
+  background: #eee;
+  border-color: #999;
+}
+.ws-range.ws-active .ws-range-thumb {
+  background: #efefef;
+  border-color: #666;
+}
+.ws-range[aria-disabled="true"], .ws-range[aria-readonly="true"] {
+  cursor: default;
+  opacity: 0.95;
+}
+.ws-range[aria-disabled="true"] .ws-range-thumb, .ws-range[aria-readonly="true"] .ws-range-thumb {
+  cursor: default;
+}
+.ws-range[aria-disabled="true"] .ws-range-thumb {
+  background: #ddd;
+  border-color: #ddd;
+}
+.ws-range .ws-range-rail {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  zoom: 1;
+}
+.ws-range .ws-range-progress {
+  position: absolute !important;
+  display: block;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  height: 100%;
+  left: 0;
+  z-index: 1;
+  overflow: hidden;
+  background: #09c;
+  box-sizing: content-box;
+}
+.ws-range .ws-range-ticks {
+  position: absolute;
+  bottom: -0.76923em;
+  left: 0;
+  height: 0.61538em;
+  width: 0.07692em;
+  margin: 0 0 0 -0.07692em;
+  background: #ccc;
+  transition: background-color 400ms, color 400ms;
+}
+.ws-range .ws-range-ticks.ws-selected-option {
+  background: #09c;
+  color: #09c;
+}
+.ws-range.ws-is-rtl .ws-range-progress {
+  left: auto;
+  right: 0;
+}
+.ws-range.ws-is-rtl .ws-range-ticks {
+  left: auto;
+  right: 0;
+}
+.ws-range.vertical-range {
+  width: 0.61538em;
+  margin: 0 10px 0 5px;
+}
+.ws-range.vertical-range .ws-range-ticks {
+  bottom: auto;
+  left: auto;
+  margin: -0.05769em 0 0 0;
+  right: -0.57692em;
+  height: 0.11538em;
+  width: 0.52308em;
+}
+.ws-range.vertical-range .ws-range-progress {
+  top: auto;
+  bottom: 1px;
+  left: 0;
+  width: 100%;
+  height: 0;
+}
 
 .ws-range-ticks[data-label]:after,
 .ws-range-ticks:before {
@@ -475,29 +585,37 @@ span.ws-input {
   font-size: 0.76923em;
   min-width: 2em;
   text-align: center;
-  margin: 0.69231em 0 0 -0.95em; }
-  .ws-is-rtl .ws-range-ticks[data-label]:after, .ws-is-rtl
-  .ws-range-ticks:before {
-    margin: 0.69231em -0.95em 0 0; }
-  .vertical-range .ws-range-ticks[data-label]:after, .vertical-range
-  .ws-range-ticks:before {
-    margin: 0 0 0 5px;
-    position: relative;
-    top: -0.7em;
-    left: 0.53846em;
-    min-width: 0; }
+  margin: 0.69231em 0 0 -0.95em;
+}
+.ws-is-rtl .ws-range-ticks[data-label]:after, .ws-is-rtl
+.ws-range-ticks:before {
+  margin: 0.69231em -0.95em 0 0;
+}
+.vertical-range .ws-range-ticks[data-label]:after, .vertical-range
+.ws-range-ticks:before {
+  margin: 0 0 0 5px;
+  position: relative;
+  top: -0.7em;
+  left: 0.53846em;
+  min-width: 0;
+}
 
 .ws-range-ticks:before {
-  content: attr(data-value); }
+  content: attr(data-value);
+}
 
 .ws-range-thumb > span,
-.ws-range-thumb > span span:after,
-.ws-range-thumb > span span:before {
-  display: none; }
+.ws-range-thumb > span > span:after,
+.ws-range-thumb > span > span:before {
+  display: none;
+}
 
 /* helper classes to hide show/hide specific range features features */
 .ws-inline-picker,
-div.ws-inline-picker {
+div.ws-inline-picker,
+.ws-popinline,
+div.ws-popinline {
   position: relative;
   max-width: 100%;
-  z-index: 99; }
+  z-index: 99;
+}