webshims-rails 1.12.0 → 1.12.2

data/vendor/assets/javascripts/webshims/shims/i18n/formcfg-pl.js

@@ -1,16 +1,16 @@
 webshims.validityMessages.pl = {
 	"typeMismatch": {
 		"defaultMessage": "Wprowadź poprawną wartość.",
-		"email": "Wprowadź adres e-mail.",
-		"url": "Wprowadź adres URL."
+		"email": "Wprowadź poprawny adres e-mail.",
+		"url": "Wprowadź poprawny adres URL."
 	},
 	"badInput": {
 		"defaultMessage": "Wprowadź poprawną wartość.",
 		"number": "Wprowadź numer.",
 		"date": "Wprowadź datę.",
 		"time": "Wprowadź czas.",
-		"range": "Invalid input.",
-		"month": "Wprowadź prawidłową wartość.",
+		"range": "Niepoprawny zakres.",
+		"month": "Wprowadź poprawny miesiąc.",
 		"datetime-local": "Wprowadź datę i czas."
 	},
 	"rangeUnderflow": {

data/vendor/assets/javascripts/webshims/shims/i18n/formcfg-sv.js

@@ -1,20 +1,24 @@
 webshims.validityMessages.sv = {
 	"typeMismatch": {
+		"defaultMessage": "Fyll i det här fältet.",
 		"email": "Fyll i en e-postadress.",
 		"url": "Fyll i en URL."
 	},
 	"badInput": {
+		"defaultMessage": "Fyll i det här fältet.",
 		"number": "Fyll i ett nummer.",
-		"date": "Fyll i ett datum.",
+		"date": "Fyll i en datum.",
 		"time": "Fyll i en tid.",
 		"range": "Felaktig inmatning.",
+		"month": "Fyll i en månad.",
 		"datetime-local": "Fyll i datum och tid."
 	},
-	"tooLong": "Fyll i max {%maxlength} tecken. Du fyllde i {%valueLen} tecken.",
+	"tooLong": "Fyll i max {%maxlength} tecken. Du fyllde i {%valueLen}.",
+	"tooShort": "Fyll i minst {%minlength} tecken. Du fyllde i {%valueLen}.",
 	"patternMismatch": "Felaktig inmatning. {%title}",
 	"valueMissing": {
 		"defaultMessage": "Fyll i detta fält.",
-		"checkbox": "Bocka dennaa ruta för att gå vidare.",
+		"checkbox": "Bocka denna ruta för att gå vidare.",
 		"select": "Välj något ur listan.",
 		"radio": "Välj ett av valen."
 	},
@@ -22,13 +26,15 @@ webshims.validityMessages.sv = {
 		"defaultMessage": "Värdet måste vara större eller lika med {%min}.",
 		"date": "Datumet måste vara efter eller lika med {%min}.",
 		"time": "Tiden måste vara efter eller lika med {%min}.",
-		"datetime-local": "Värdet måste vara efter eller lika med {%min}."
+		"datetime-local": "Värdet måste vara efter eller lika med {%min}.",
+		"month": "Värdet måste vara efter eller lika med {%min}."
 	},
 	"rangeOverflow": {
 		"defaultMessage": "Värdet måste vara mindre eller lika med {%max}.",
 		"date": "Datumet måste vara före eller lika med {%max}.",
 		"time": "Tiden måste vara före eller lika med {%max}.",
-		"datetime-local": "Värdet måste vara före eller lika med {%max}."
+		"datetime-local": "Värdet måste vara före eller lika med {%max}.",
+		"month": "Värdet måste vara före eller lika med {%max}."
 	},
 	"stepMismatch": "Felaktig inmatning."
 };
@@ -46,6 +52,7 @@ webshims.formcfg.sv = {
 	},
 	date: {
 		closeText: 'Stäng',
+		clear: "Rensa",
 		prevText: '«Förra',
 		nextText: 'Nästa»',
 		currentText: 'Idag',
@@ -63,4 +70,4 @@ webshims.formcfg.sv = {
 		showMonthAfterYear: false,
 		yearSuffix: ''
 	}
-};
+};

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

@@ -15,8 +15,7 @@
 		_create: function(){
 			var i;
 			
-			
-			this.element.addClass('ws-range').attr({role: 'slider'}).append('<span class="ws-range-min ws-range-progress" /><span class="ws-range-rail ws-range-track"><span class="ws-range-thumb" /></span>');
+			this.element.addClass('ws-range').attr({role: 'slider'}).append('<span class="ws-range-min ws-range-progress" /><span class="ws-range-rail ws-range-track"><span class="ws-range-thumb"><span data-value="" data-valuetext="" /></span></span>');
 			this.trail = $('.ws-range-track', this.element);
 			this.range = $('.ws-range-progress', this.element);
 			this.thumb = $('.ws-range-thumb', this.trail);
@@ -38,7 +37,7 @@
 		},
 		value: $.noop,
 		_value: function(val, _noNormalize, animate){
-			var left, posDif, textValue;
+			var left, posDif;
 			var o = this.options;
 			var oVal = val;
 			var thumbStyle = {};
@@ -54,7 +53,7 @@
 			left =  100 * ((val - o.min) / (o.max - o.min));
 			
 			if(this._init && val == o.value && oVal == val){return;}
-			this.options.value = val;
+			o.value = val;
 			
 			if($.fn.stop){
 				this.thumb.stop();
@@ -62,6 +61,7 @@
 			}
 			
 			rangeStyle[this.dirs.width] = left+'%';
+			
 			if(this.vertical){
 				left = Math.abs(left - 100);
 			}
@@ -88,15 +88,26 @@
 				this.options._change(val);
 			}
 			
-			textValue = this.options.textValue ? this.options.textValue(this.options.value) : this.options.options[this.options.value] || this.options.value;
+			this._setValueMarkup();
+		},
+		_setValueMarkup: function(){
+			var o = this.options;
+			var textValue = o.textValue ? o.textValue(this.options.value) : o.options[o.value] || o.value;
 			this.element.attr({
 				'aria-valuenow': this.options.value,
 				'aria-valuetext': textValue
 			});
-			this.thumb.attr({
+			$('span', this.thumb).attr({
 				'data-value': this.options.value,
 				'data-valuetext': textValue
 			});
+			if(o.selectedOption){
+				$(o.selectedOption).removeClass('ws-selected-option');
+				o.selectedOption = null;
+			}
+			if(o.value in o.options){
+				o.selectedOption = $('[data-value="'+o.value+'"].ws-range-ticks').addClass('ws-selected-option');
+			}
 		},
 		initDataList: function(){
 			if(this.orig){
@@ -139,9 +150,9 @@
 			$.each(o.options, function(val, label){
 				if(!isNumber(val) || val < min || val > max){return;}
 				var left = 100 * ((val - min) / (max - min));
-				var attr = '';
+				var attr = 'data-value="'+val+'"';
 				if(label){
-					attr += 'data-label="'+label+'"';
+					attr += ' data-label="'+label+'"';
 					if(o.showLabels){
 						attr += ' title="'+label+'"';
 					}
@@ -154,6 +165,9 @@
 					$('<span class="ws-range-ticks"'+ attr +' style="'+(that.dirs.left)+': '+left+'%;" />').appendTo(trail)
 				);
 			});
+			if(o.value in o.options){
+				this._setValueMarkup();
+			}
 		},
 		readonly: function(val){
 			val = !!val;
@@ -197,12 +211,13 @@
 			var step = val == 'any' ? 'any' : retDefault(val, 1);
 			
 			if(o.stepping){
-				if(step != 'any' && o.stepping % step){
-					webshims.error('wrong stepping value for type range:'+ (o.stepping % step));
-				} else {
-					step = o.stepping;
-				}
+				webshims.error('stepping was removed. Use stepfactor instead.');
 			}
+
+			if(o.stepfactor && step != 'any'){
+				step *= o.stepfactor;
+			}
+
 			o.step = step;
 			this.value(this.options.value);
 		},
@@ -240,11 +255,11 @@
 			var val, valModStep, alignValue, step;
 			
 			if(pos <= 0){
-				val = this.options[this.dirs.min];
+				val = this.options[this.dirs[this.isRtl ? 'max' : 'min']];
 			} else if(pos > 100) {
-				val = this.options[this.dirs.max];
+				val = this.options[this.dirs[this.isRtl ? 'min' : 'max']];
 			} else {
-				if(this.vertical){
+				if(this.vertical || this.isRtl){
 					pos = Math.abs(pos - 100);
 				}
 				val = ((this.options.max - this.options.min) * (pos / 100)) + this.options.min;
@@ -329,17 +344,20 @@
 					return e;
 				};
 			})();
+			var updateValue = function(val, animate){
+				if(val != o.value){
+					that.value(val, false, animate);
+					eventTimer.call('input', val);
+				}
+			};
 			var setValueFromPos = function(e, animate){
 				if(e.type == 'touchmove'){
 					e.preventDefault();
 					normalizeTouch(e);
 				}
 				
-				var val = that.getStepedValueFromPos((e[that.dirs.mouse] - leftOffset) * widgetUnits);
-				if(val != o.value){
-					that.value(val, false, animate);
-					eventTimer.call('input', val);
-				}
+				updateValue(that.getStepedValueFromPos((e[that.dirs.mouse] - leftOffset) * widgetUnits), animate);
+				
 				if(e && e.type == 'mousemove'){
 					e.preventDefault();
 				}
@@ -377,7 +395,12 @@
 					outerWidth = that.thumb[that.dirs.outerWidth]();
 					leftOffset = leftOffset[that.dirs.pos];
 					widgetUnits = 100 / widgetUnits;
-					setValueFromPos(e, o.animate);
+
+					if(e.target.className == 'ws-range-ticks'){
+						updateValue(e.target.getAttribute('data-value'), o.animate);
+					} else {
+						setValueFromPos(e, o.animate);
+					}
 					isActive = true;
 					$(document)
 						.on(e.type == 'touchstart' ?
@@ -423,6 +446,13 @@
 					var step = true;
 					var code = e.keyCode;
 					if(!o.readonly && !o.disabled){
+						if(that.isRtl){
+							if(code == 39){
+								code = 37;
+							} else if(code == 37){
+								code = 39;
+							}
+						}
 						if (code == 39 || code == 38) {
 							that.doStep(1);
 						} else if (code == 37 || code == 40) {
@@ -522,10 +552,17 @@
 				{mouse: 'pageY', pos: 'top', min: 'max', max: 'min', left: 'top', right: 'bottom', width: 'height', innerWidth: 'innerHeight', innerHeight: 'innerWidth', outerWidth: 'outerHeight', outerHeight: 'outerWidth', marginTop: 'marginLeft', marginLeft: 'marginTop'} :
 				{mouse: 'pageX', pos: 'left', min: 'min', max: 'max', left: 'left', right: 'right', width: 'width', innerWidth: 'innerWidth', innerHeight: 'innerHeight', outerWidth: 'outerWidth', outerHeight: 'outerHeight', marginTop: 'marginTop', marginLeft: 'marginLeft'}
 			;
+			if(!this.vertical && this.element.css('direction') == 'rtl'){
+				this.isRtl = true;
+				this.dirs.left = 'right';
+				this.dirs.right = 'left';
+				this.dirs.marginLeft = 'marginRight';
+			}
 			this.element
 				[this.vertical ? 'addClass' : 'removeClass']('vertical-range')
-				[this.vertical ? 'addClass' : 'removeClass']('horizontal-range')
+				[this.isRtl ? 'addClass' : 'removeClass']('ws-is-rtl')
 			;
+			this.updateMetrics = this.posCenter;
 			this.posCenter();
 		}
 	};
@@ -562,4 +599,4 @@
 	if(window.webshims && webshims.isReady){
 		webshims.isReady('range-ui', true);
 	}
-})(window.webshims ? webshims.$ : jQuery);
+})(window.webshims ? webshims.$ : jQuery);

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

@@ -5,11 +5,131 @@
     clear: both;
     content: ' '; }
 
+.ws-range .ws-range-thumb, .ws-inline-picker {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box; }
+  .ws-range .ws-range-thumb *, .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 */
+.input-picker[data-class~="show-week"] .ws-week,
+.show-week .input-picker .ws-week {
+  display: table-cell; }
+
+.input-picker[data-class~="show-yearbtns"] .ws-picker-header,
+.show-yearbtns .input-picker .ws-picker-header {
+  margin: 0 4.23077em; }
+.input-picker[data-class~="show-yearbtns"] button.ws-year-btn,
+.show-yearbtns .input-picker button.ws-year-btn {
+  display: inline-block; }
+
+.input-picker[data-class~="hide-btnrow"] .ws-button-row,
+.hide-btnrow .input-picker .ws-button-row {
+  display: none; }
+
+.input-picker[data-class~="show-selectnav"] .ws-picker-header > button:after,
+.show-selectnav .input-picker .ws-picker-header > button:after, .input-picker[data-class~="show-uparrow"] .ws-picker-header > button:after,
+.show-uparrow .input-picker .ws-picker-header > button:after {
+  display: inline-block; }
+
+.input-picker[data-class~="show-selectnav"] .ws-picker-header > select,
+.show-selectnav .input-picker .ws-picker-header > select {
+  display: inline-block; }
+.input-picker[data-class~="show-selectnav"] .ws-picker-header > button,
+.show-selectnav .input-picker .ws-picker-header > button {
+  width: auto; }
+  .input-picker[data-class~="show-selectnav"] .ws-picker-header > button > span,
+  .show-selectnav .input-picker .ws-picker-header > button > span {
+    display: none; }
+
+/* btn api */
+.hide-spinbtns + .input-buttons > .step-controls,
+.hide-spinbtns .input-buttons > .step-controls {
+  display: none; }
+.hide-spinbtns::-webkit-inner-spin-button,
+.hide-spinbtns ::-webkit-inner-spin-button {
+  display: none; }
+
+.hide-dropdownbtn + .input-buttons > .ws-popover-opener,
+.hide-dropdownbtn .input-buttons > .ws-popover-opener {
+  display: none; }
+
+.hide-inputbtns + .input-buttons,
+.hide-inputbtns .input-buttons {
+  display: none; }
+.hide-inputbtns::-webkit-inner-spin-button,
+.hide-inputbtns ::-webkit-inner-spin-button {
+  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; }
+
+.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; }
+
+.show-ticklabels .ws-range-ticks[data-label]:after {
+  display: inline-block; }
+
+.show-tickvalues .ws-range-ticks:before {
+  display: inline-block; }
+
+.hide-ticks .ws-range-ticks {
+  display: none; }
+
+.show-valuetooltip span.ws-range-thumb > span, .show-valuetooltip span.ws-range-thumb > span:after {
+  display: inline-block; }
+
+.ws-active.show-activevaluetooltip span.ws-range-thumb > span, .ws-active.show-activevaluetooltip span.ws-range-thumb > span:after,
+.show-activevaluetooltip .ws-range.ws-active span.ws-range-thumb > span,
+.show-activevaluetooltip .ws-range.ws-active span.ws-range-thumb > span:after {
+  display: inline-block; }
+
+.show-labeltooltip span.ws-range-thumb > span, .show-labeltooltip span.ws-range-thumb > span:before {
+  display: inline-block; }
+
+.ws-active.show-activelabeltooltip span.ws-range-thumb > span, .ws-active.show-activelabeltooltip span.ws-range-thumb > span:before,
+.show-activelabeltooltip .ws-range.ws-active span.ws-range-thumb > span,
+.show-activelabeltooltip .ws-range.ws-active span.ws-range-thumb > span:before {
+  display: inline-block; }
+
 /* 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; }
+  display: inline-block;
+  vertical-align: middle; }
+
+.ws-inputreplace[readonly][aria-readonly="false"] {
+  cursor: pointer; }
+  .ws-inputreplace[readonly][aria-readonly="false"][disabled] {
+    cursor: default;
+    cursor: not-allowed; }
 
 .input-buttons,
 .step-controls,
@@ -17,9 +137,7 @@ span.has-input-buttons {
   zoom: 1;
   overflow: hidden;
   display: inline-block;
-  font-size: 0;
   vertical-align: middle;
-  margin-top: -3px;
   margin-left: -20px; }
 
 .step-controls,
@@ -29,6 +147,9 @@ span.has-input-buttons {
   margin: 0;
   height: 19px;
   width: 15px; }
+  .ws-is-rtl .step-controls, .ws-is-rtl
+  .ws-popover-opener {
+    float: right; }
 
 .ws-popover-opener {
   position: relative;
@@ -39,6 +160,8 @@ span.has-input-buttons {
   border-radius: 3px;
   cursor: pointer;
   background: #ccc; }
+  .ws-is-rtl .ws-popover-opener {
+    margin: 0 2px 0 0; }
   .ws-popover-opener span {
     display: block;
     position: absolute;
@@ -58,23 +181,32 @@ span.has-input-buttons {
       background: none; }
 
 input[type="color"] {
-  width: 6.5em; }
+  width: 7.5em; }
 
 .input-buttons {
   text-align: left; }
   .input-buttons.color-input-buttons {
     margin-left: 2px; }
-  .input-buttons.input-button-size-1.month-input-buttons, .input-buttons.input-button-size-1.date-input-buttons {
-    margin-left: -24px; }
-  .input-buttons.input-button-size-2 {
-    margin-left: -39px; }
   .input-buttons.ws-disabled {
     opacity: 0.95; }
   .input-buttons.ws-disabled *, .input-buttons.ws-readonly * {
     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; }
+
+.input-button-size-2 {
+  margin-left: -39px; }
+  .input-button-size-2.ws-is-rtl {
+    margin-left: 0;
+    margin-right: -39px; }
+
 .step-controls span {
   position: absolute;
+  left: 0;
   display: inline-block;
   overflow: hidden;
   margin: 0 !important;
@@ -104,6 +236,7 @@ input[type="color"] {
     .ws-disabled .step-controls span.step-down {
       background-position: -205px 0; }
 
+/* helper classes to hide show/hide specific btn features features */
 .ws-input {
   letter-spacing: -0.31em;
   word-spacing: -0.43em; }
@@ -111,6 +244,8 @@ input[type="color"] {
     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%;
@@ -124,6 +259,9 @@ input[type="color"] {
     text-align: center;
     display: inline-block; }
 
+span.ws-input {
+  display: inline-block; }
+
 .ws-date .mm,
 .ws-date .dd {
   width: 23.5%;
@@ -151,7 +289,7 @@ input[type="color"] {
   position: relative;
   display: inline-block;
   vertical-align: middle;
-  margin: 5px 0 10px;
+  margin: 0.57692em 0;
   zoom: 1;
   border: none;
   height: 0.61538em;
@@ -164,36 +302,44 @@ input[type="color"] {
   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.61538em 0 0 -0.61538em;
-    height: 1.23077em;
-    width: 1.23077em;
+    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:after, .ws-range .ws-range-thumb:before {
+    .ws-range .ws-range-thumb > span {
       position: absolute;
-      top: -2.15385em;
-      left: -.3em;
-      display: inline-block;
-      content: attr(data-value);
-      padding: 0.23077em 0.07692em;
-      min-width: 2em;
+      margin: 0 0 3px -90px;
+      padding: 0;
+      border: 0;
+      left: 50%;
+      bottom: 1.61538em;
       visibility: hidden;
+      width: 180px;
       text-align: center;
-      background: #fff;
-      border: 0.07692em solid #cccccc;
-      transition: all 400ms; }
-    .ws-range .ws-range-thumb:after {
-      content: attr(data-value); }
-    .ws-range .ws-range-thumb:before {
-      content: attr(data-valuetext); }
+      background: none; }
+      .ws-range .ws-range-thumb > span:after, .ws-range .ws-range-thumb > span:before {
+        content: attr(data-value);
+        padding: 0.07692em 0.26923em;
+        text-align: center;
+        background: #fff;
+        border: 0.07692em solid #cccccc;
+        border-radius: 0.30769em;
+        visibility: visible; }
+      .ws-range .ws-range-thumb > span:after {
+        content: attr(data-value); }
+      .ws-range .ws-range-thumb > span:before {
+        content: attr(data-valuetext); }
   .ws-range.ws-focus .ws-range-thumb {
     background: #eee;
     border-color: #999; }
@@ -231,55 +377,65 @@ input[type="color"] {
     box-shadow: 0 0.11538em 0.26923em rgba(255, 255, 255, 0.2) inset; }
   .ws-range .ws-range-ticks {
     position: absolute;
-    bottom: -0.57692em;
+    bottom: -0.76923em;
     left: 0;
-    height: 0.52308em;
-    width: 0.11538em;
-    margin: 0 0 0 -0.15385em;
-    background: #ccc; }
-  .ws-range .ws-range-ticks[data-label]:after {
-    visibility: hidden;
-    content: attr(data-label);
-    display: inline-block;
-    font-size: 0.69231em;
-    min-width: 2em;
-    text-align: center;
-    margin: 0.53846em 0 0 -1em; }
+    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 {
-    background: url(vertical-range.png) center bottom no-repeat;
-    width: 20px; }
-    .ws-range.vertical-range .ws-range-thumb {
-      top: 0;
-      left: 3px;
+    width: 0.61538em;
+    margin: 0 10px 0 5px; }
+    .ws-range.vertical-range .ws-range-ticks {
       bottom: auto;
-      background: url(vertical-range.png) 0 -51px no-repeat;
-      margin: -6px 0 0 0;
-      height: 11px;
-      width: 22px; }
-    .ws-range.vertical-range .ws-range-thumb:hover, .ws-range.vertical-range.ws-focus .ws-range-thumb {
-      background-position: 0 -34px; }
-    .ws-range.vertical-range.ws-active .ws-range-thumb {
-      background-position: 0 -17px; }
-    .ws-range.vertical-range[aria-disabled="true"] .ws-range-thumb {
-      background-position: 0 0; }
+      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: 1px;
+      width: 100%;
       height: 0; }
-    .ws-range.vertical-range .ws-range-rail {
-      top: 5px;
-      left: 0;
-      right: 0;
-      bottom: 5px; }
-    .ws-range.vertical-range .ws-range-ticks {
-      bottom: auto;
-      left: auto;
-      right: 0;
-      height: 1px;
-      width: 4px; }
 
+.ws-range-ticks[data-label]:after,
+.ws-range-ticks:before {
+  display: none;
+  content: attr(data-label);
+  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; }
+
+.ws-range-ticks:before {
+  content: attr(data-value); }
+
+.ws-range-thumb > span, .ws-range-thumb > span:after, .ws-range-thumb > span:before {
+  display: none; }
+
+/* helper classes to hide show/hide specific range features features */
 .input-picker .ws-button-row button {
   border-radius: 0.30769em;
   background: #ccc;
@@ -287,22 +443,25 @@ input[type="color"] {
   display: inline-block;
   border: 0.07692em solid transparent; }
 
+.ws-inline-picker {
+  position: relative;
+  z-index: 99; }
+
 .input-picker {
   overflow: visible;
   font-size: 13px;
   outline: none;
   text-align: center;
   font-family: sans-serif;
-  width: 25.38462em;
-  max-width: 100%;
+  width: 27.69231em;
   min-width: 23.07692em;
   /* Selector API: */ }
   .input-picker .ws-po-outerbox {
     -webkit-transform: translate(0, 30%);
     transform: translate(0, 30%); }
-    [data-vertical="bottom"] .input-picker .ws-po-outerbox {
-      -webkit-transform: translate(0, -3%);
-      transform: translate(0, -30%); }
+  .input-picker[data-vertical="bottom"] .ws-po-outerbox {
+    -webkit-transform: translate(0, -30%);
+    transform: translate(0, -30%); }
   .input-picker.time-popover, .input-picker.datetime-local-popover {
     width: 31.92308em; }
   .input-picker.time-popover .ws-prev,
@@ -329,12 +488,13 @@ input[type="color"] {
     outline: 1px dotted black; }
   .input-picker .ws-po-box {
     position: relative;
-    padding: 0.76923em 1.53846em 1.15385em;
-    border-radius: 5px;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); }
+    padding: 1.15385em 1.53846em;
+    border-radius: 0.38462em;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    direction: ltr; }
   .input-picker .ws-picker-controls {
     position: absolute;
-    top: 0.76923em; }
+    top: 1.15385em; }
     .input-picker .ws-picker-controls > button {
       border: 0.07692em solid #cccccc;
       border-radius: 0.38462em;
@@ -349,7 +509,8 @@ input[type="color"] {
         content: " ";
         width: 0px;
         height: 0px;
-        border-style: solid; }
+        border-style: solid;
+        margin-top: 0.29231em; }
       .input-picker .ws-picker-controls > button span {
         display: none; }
       .input-picker .ws-picker-controls > button:hover {
@@ -359,32 +520,47 @@ input[type="color"] {
         opacity: 0.4;
         border-color: #eee;
         color: #ddd; }
-  .input-picker .prev-controls {
-    left: 1.53846em; }
-    .input-picker .prev-controls .ws-super-prev:after,
-    .input-picker .prev-controls .ws-super-prev:before,
-    .input-picker .prev-controls .ws-prev:before {
+  .input-picker .prev-controls,
+  .input-picker .ws-po-box[dir="rtl"] .next-controls {
+    left: 1.53846em;
+    right: auto; }
+    .input-picker .prev-controls [class*="ws-super-"]:after,
+    .input-picker .prev-controls button:before,
+    .input-picker .ws-po-box[dir="rtl"] .next-controls [class*="ws-super-"]:after,
+    .input-picker .ws-po-box[dir="rtl"] .next-controls button:before {
       border-width: 0.35em 0.6em 0.35em 0;
       border-color: transparent #333333 transparent transparent;
       margin-left: -0.1em; }
-    .input-picker .prev-controls .ws-super-prev {
-      margin-right: 0.23077em; }
-      .input-picker .prev-controls .ws-super-prev[disabled] {
+    .input-picker .prev-controls [class*="ws-super-"],
+    .input-picker .ws-po-box[dir="rtl"] .next-controls [class*="ws-super-"] {
+      margin-right: 0.23077em;
+      margin-left: 0; }
+      .input-picker .prev-controls [class*="ws-super-"][disabled],
+      .input-picker .ws-po-box[dir="rtl"] .next-controls [class*="ws-super-"][disabled] {
         display: none; }
-  .input-picker .next-controls {
-    right: 1.53846em; }
-    .input-picker .next-controls button:before {
+  .input-picker .next-controls,
+  .input-picker .ws-po-box[dir="rtl"] .prev-controls {
+    right: 1.53846em;
+    left: auto; }
+    .input-picker .next-controls button:before,
+    .input-picker .ws-po-box[dir="rtl"] .prev-controls button:before {
       margin-left: 0.11538em; }
-    .input-picker .next-controls .ws-super-next:before,
-    .input-picker .next-controls .ws-super-next:after,
-    .input-picker .next-controls .ws-next:before {
+    .input-picker .next-controls [class*="ws-super-"]:after,
+    .input-picker .next-controls button:before,
+    .input-picker .ws-po-box[dir="rtl"] .prev-controls [class*="ws-super-"]:after,
+    .input-picker .ws-po-box[dir="rtl"] .prev-controls button:before {
       border-width: 0.35em 0 0.35em 0.6em;
       border-color: transparent transparent transparent #333333;
       margin-right: -0.1em; }
-    .input-picker .next-controls .ws-super-next {
-      margin-left: 0.23077em; }
-      .input-picker .next-controls .ws-super-next[disabled] {
+    .input-picker .next-controls [class*="ws-super-"],
+    .input-picker .ws-po-box[dir="rtl"] .prev-controls [class*="ws-super-"] {
+      margin-left: 0.23077em;
+      margin-right: 0; }
+      .input-picker .next-controls [class*="ws-super-"][disabled],
+      .input-picker .ws-po-box[dir="rtl"] .prev-controls [class*="ws-super-"][disabled] {
         display: none; }
+  .input-picker .ws-po-box[dir="rtl"] {
+    direction: rtl; }
   .input-picker.time-popover .ws-picker-body {
     padding-top: 2.76923em; }
   .input-picker .ws-picker-body {
@@ -410,6 +586,10 @@ input[type="color"] {
       float: left; }
       .input-picker .ws-button-row button.ws-empty {
         float: right; }
+  .input-picker .ws-po-box[dir="rtl"] .ws-button-row button {
+    float: right; }
+    .input-picker .ws-po-box[dir="rtl"] .ws-button-row button.ws-empty {
+      float: left; }
   .input-picker[data-currentview="setMonthList"] .ws-picker-header > select, .input-picker[data-currentview="setYearList"] .ws-picker-header > select {
     max-width: 90%; }
   .input-picker[data-currentview="setDayList"] .ws-picker-header > select {
@@ -425,7 +605,7 @@ input[type="color"] {
     top: -3.07692em;
     right: 0;
     left: 0;
-    margin: 0 4.23077em; }
+    margin: 0 2.69231em; }
     .input-picker .ws-picker-header > button {
       display: inline-block;
       width: 100%;
@@ -503,7 +683,8 @@ input[type="color"] {
       width: 100%;
       margin: 0;
       border: 0 none;
-      border-collapse: collapse; }
+      border-collapse: collapse;
+      table-layout: fixed; }
     .input-picker .picker-list th,
     .input-picker .picker-list td.week-cell {
       font-size: 1em;
@@ -556,3 +737,5 @@ input[type="color"] {
 
 .ws-picker-header select {
   display: none; }
+
+/* helper classes to hide show/hide specific picker features */