webshims-rails 1.14.1 → 1.14.3

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

@@ -167,10 +167,10 @@ $rangeapis: show-ticklabels show-tickvalues hide-ticks show-valuetooltip show-la
 %show-valuetooltip {
 	span.ws-range-thumb > span {
 		&,
-		span:after {
+		> span:after {
 			display: inline-block;
 		}
-		span:after {
+		> span:after {
 			content: attr(data-value) !important;
 			visibility: visible !important;
 		}
@@ -182,10 +182,10 @@ $rangeapis: show-ticklabels show-tickvalues hide-ticks show-valuetooltip show-la
 	&.ws-active span.ws-range-thumb > span,
 	.ws-range.ws-active span.ws-range-thumb > span {
 		&,
-		span:after {
+		> span:after {
 			display: inline-block;
 		}
-		span:after {
+		> span:after {
 			content: attr(data-value) !important;
 			visibility: visible !important;
 		}
@@ -194,10 +194,10 @@ $rangeapis: show-ticklabels show-tickvalues hide-ticks show-valuetooltip show-la
 %show-labeltooltip {
 	span.ws-range-thumb > span {
 		&,
-		span:before {
+		> span:before {
 			display: inline-block;
 		}
-		span:before {
+		> span:before {
 			content: attr(data-valuetext) !important;
 			visibility: visible !important;
 		}
@@ -208,10 +208,10 @@ $rangeapis: show-ticklabels show-tickvalues hide-ticks show-valuetooltip show-la
 	&.ws-active span.ws-range-thumb > span,
 	.ws-range.ws-active span.ws-range-thumb > span {
 		&,
-		span:before {
+		> span:before {
 			display: inline-block;
 		}
-		span:before {
+		> span:before {
 			content: attr(data-valuetext) !important;
 			visibility: visible !important;
 		}

data/vendor/assets/javascripts/webshims/shims/styles/scss/_extends.scss

@@ -8,20 +8,6 @@
 		content: ' ';
 	}
 }
-%contentbox {
-	-moz-box-sizing: content-box;
-	box-sizing: content-box;
-	
-	*,
-	&:before,
-	&:after,
-	:after,
-	:before {
-		-moz-box-sizing: content-box;
-		box-sizing: content-box;
-	}
-
-}
 
 $browser-context: 13; // Default
 

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

@@ -43,6 +43,20 @@
 	}
 }
 
+.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,
@@ -88,7 +102,6 @@ span.has-input-buttons {
 	overflow: visible;
 	margin: 0 0 0 2px;
 	width: 19px;
-	border-radius: 3px;
 	cursor: pointer;
 	background: #ccc;
 	font-size: 13px;
@@ -109,7 +122,8 @@ span.has-input-buttons {
 		margin: 0 2px 0 0;
 	}
 	
-	span {
+	> span,
+	.ws-color-indicator {
 		display: block;
 		position: absolute;
 		top: 50%;
@@ -157,9 +171,13 @@ input[type="color"] {
 	&.ws-disabled {
 		opacity: 0.95;
 	}
-	&.ws-disabled *,
-	&.ws-readonly * {
-		cursor: default;
+
+	&.ws-disabled,
+	&.ws-readonly {
+		.ws-popover-opener,
+		.step-control {
+			cursor: default;
+		}
 	}
 }
 
@@ -203,76 +221,78 @@ input[type="color"] {
 
 .step-controls {
 	transition: all 300ms;
-	span {
+
+}
+
+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;
+
+
+	&.step-down {
+		bottom: 0;
+	}
+
+	&:before {
 		position: absolute;
-		left: 0;
+		top: 50%;
+		left:  50%;
+		content: "";
 		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;
+		width: 0px;
+		height: 0px;
+		border-style: solid;
+		margin: -2px 0 0 -4px;
 		transition: border-color 300ms, background-color 300ms;
+	}
 
-
-		&.step-down {
-			bottom: 0;
-		}
+	&.step-up {
 
 		&: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;
+			border-width: 0 4px 4px;
+			border-color: transparent transparent #999 transparent;
 		}
 
-		&.step-up {
-
-			&:before {
-				border-width: 0 4px 4px;
-				border-color: transparent transparent #999 transparent;
-			}
-
-			&:hover:before {
-				border-color: transparent transparent #666 transparent;
-			}
-			&.mousepress-ui:before {
-				border-color: transparent transparent #000 transparent;
-			}
-
-			.ws-disabled &:before {
-				border-color: transparent transparent #aaa transparent;
-			}
+		&:hover:before {
+			border-color: transparent transparent #666 transparent;
+		}
+		&.mousepress-ui:before {
+			border-color: transparent transparent #000 transparent;
 		}
 
-		&.step-down {
-			&:before {
-				border-width: 4px 4px 0;
-				border-color: #999 transparent transparent transparent;
-			}
+		.ws-disabled &:before {
+			border-color: transparent transparent #aaa transparent;
+		}
+	}
 
-			&:hover:before {
-				border-color: #666 transparent transparent transparent;
-			}
-			&.mousepress-ui:before {
-				border-color: #000 transparent transparent transparent;
-			}
-			.ws-disabled &:before {
-				border-color: #aaa transparent transparent transparent;
-			}
+	&.step-down {
+		&:before {
+			border-width: 4px 4px 0;
+			border-color: #999 transparent transparent transparent;
 		}
 
+		&:hover:before {
+			border-color: #666 transparent transparent transparent;
+		}
+		&.mousepress-ui:before {
+			border-color: #000 transparent transparent transparent;
+		}
+		.ws-disabled &:before {
+			border-color: #aaa transparent transparent transparent;
+		}
 	}
+
 }
 
 /* helper classes to hide show/hide specific btn features features */
@@ -288,15 +308,18 @@ input[type="color"] {
 
 
 
-	> * {
+	> select,
+	> input,
+	> .ws-input-seperator {
 		text-align: center;
 		letter-spacing: normal;
 		word-spacing: normal;
-		
-		> option {
-			text-align: left;
-		}
 	}
+
+	option {
+		text-align: left;
+	}
+
 	.ws-input-seperator {
 		vertical-align: middle;
 		width: 2%;
@@ -367,30 +390,27 @@ span.ws-input {
 	border: none;
 	height: em(8);
 	width: 155px;
-	border-radius: em(5);
 	background: #ddd;
 	cursor: pointer;
 	font-size: 13px;
 	outline: none;
 	transition: background-color 400ms, border-color 400ms;
 	background-color: #ddd;
-	box-shadow: 0 em(-1) em(1.5) rgba(0, 0, 0, 0.2) inset;
+	letter-spacing: normal;
+	word-spacing: normal;
 	
 	[list] + & {
 		margin: em(2.5) 0 em(12.5);
 	}
 	
 	.ws-range-thumb {
-		@extend %contentbox;
-		$dim: 20;
 		top: 0;
 		position: absolute;
 		display: block;
 		z-index: 4;
-		margin: em(($dim - 8) / -2) 0 0 em($dim / -2);
-		height: em($dim);
-		width: em($dim);
-		border-radius: 50%;
+		margin: em((18 - 8) / -2) 0 0 em(30 / -2);
+		height: em(18);
+		width: em(30);
 		background: #ccc;
 		border: em(1) solid #aaa;
 		cursor: pointer;
@@ -402,13 +422,13 @@ span.ws-input {
 			padding: 0;
 			border: 0;
 			left: 50%;
-			bottom: em($dim + 1);
+			bottom: em(18 + 1);
 			visibility: hidden;
 			width: 180px;
 			text-align: center;
 			background: none;
 
-			span {
+			> span {
 				visibility: visible;
 				&:after,
 				&:before {
@@ -417,7 +437,6 @@ span.ws-input {
 					text-align: center;
 					background: #fff;
 					border: em(1) solid #ccc;
-					border-radius: em(4);
 					visibility: visible;
 				}
 			}
@@ -431,7 +450,8 @@ span.ws-input {
 	}
 	
 	&.ws-active .ws-range-thumb {
-		box-shadow: 0 0 em(9) rgba(0, 75, 100, 0.2);
+		background: #efefef;
+		border-color: #666;
 	}
 	
 	&[aria-disabled="true"],
@@ -467,14 +487,11 @@ span.ws-input {
 		margin: 0;
 		padding: 0;
 		top: 0;
-		border-radius: em(5);
 		height: 100%;
 		left: 0;
 		z-index: 1;
 		overflow: hidden;
 		background: #09c;
-		box-shadow: 0 em(1.5) em(3.5) rgba(255, 255, 255, 0.2) inset;
-		-moz-box-sizing: content-box;
 		box-sizing: content-box;
 	}
 
@@ -559,8 +576,9 @@ span.ws-input {
 .ws-range-thumb {
 	> span {
 		&,
-		span:after,
-		span:before {
+		/* todo: improve selector performance */
+		> span:after,
+		> span:before {
 			display: none;
 		}
 	}
@@ -575,8 +593,9 @@ span.ws-input {
 }
 
 .ws-inline-picker,
-div.ws-inline-picker {
-	@extend %contentbox;
+div.ws-inline-picker,
+.ws-popinline,
+div.ws-popinline {
 	position: relative;
 	max-width: 100%;
 	z-index: 99;

data/vendor/assets/javascripts/webshims/shims/styles/scss/forms-picker.scss

@@ -5,7 +5,6 @@
 $border-light: 1px solid #ddd;
 $button-bgcolor: #f5f5f5;
 %ws-button {
-	border-radius: em(4);
 	background: #ccc;
 	padding: em(5) em(8);
 	display: inline-block;
@@ -20,14 +19,13 @@ $button-bgcolor: #f5f5f5;
 	font-family: sans-serif;
 	width: em(360);
 	min-width: em(270);
-	max-width: 96vw;
+	max-width: 98vw;
 
 	.ws-po-outerbox {
 		-webkit-transform: translate(0, 30%);
 		transform: translate(0, 30%);
-
-
 	}
+
 	&[data-vertical="bottom"] .ws-po-outerbox {
 		-webkit-transform: translate(0, -30%);
 		transform: translate(0, -30%);
@@ -48,13 +46,13 @@ $button-bgcolor: #f5f5f5;
 	}
 
 	&.ws-size-2 {
-		width: em(645);
-		min-width: em(643);
+		width: em(675);
+		min-width: em(670);
 	}
 
 	&.ws-size-3 {
-		width: em(960);
-		min-width: em(956);
+		width: em(985);
+		min-width: em(982);
 	}
 
 	&.color-popover {
@@ -83,8 +81,6 @@ $button-bgcolor: #f5f5f5;
 	.ws-po-box {
 		position: relative;
 		padding: em(15) em(20);
-		border-radius: em(5);
-		box-shadow: 0 0 2px rgba(0, 0, 0, .3);
 		direction: ltr;
 	}
 
@@ -93,8 +89,8 @@ $button-bgcolor: #f5f5f5;
 		top: em(15);
 
 		> button {
+			box-sizing: content-box;
 			border: em(1) solid #ccc;
-			border-radius: em(5);
 			padding: 0;
 			width: em(24);
 			height: em(24);
@@ -112,10 +108,6 @@ $button-bgcolor: #f5f5f5;
 				margin-top: em(3.8);
 			}
 
-			span {
-				display: none;
-			}
-
 			&:hover	{
 				border-color: #666;
 				color: #000;
@@ -134,14 +126,14 @@ $button-bgcolor: #f5f5f5;
 		left: em(20);
 		right: auto;
 
-		[class*="ws-super-"]:after,
-		button:before {
+		> .ws-year-btn:after,
+		> button:before {
 			border-width: 0.35em 0.6em 0.35em 0;
 			border-color: transparent #333 transparent transparent;
 			margin-left: -0.1em;
 		}
 
-		[class*="ws-super-"] {
+		> .ws-year-btn {
 			margin-right: em(3);
 			margin-left: 0;
 
@@ -157,19 +149,19 @@ $button-bgcolor: #f5f5f5;
 		right: em(20);
 		left: auto;
 
-		button:before {
+		> button:before {
 			margin-left: em(1.5);
 		}
 
 
-		[class*="ws-super-"]:after,
-		button:before {
+		> .ws-year-btn:after,
+		> button:before {
 			border-width: 0.35em 0 0.35em 0.6em;
 			border-color: transparent transparent transparent #333;
 			margin-right: -0.1em;
 		}
 
-		[class*="ws-super-"] {
+		> .ws-year-btn {
 			margin-left: em(3);
 			margin-right: 0;
 
@@ -179,7 +171,7 @@ $button-bgcolor: #f5f5f5;
 		}
 	}
 
-	&.ws-po-visible .ws-picker-controls button {
+	&.ws-po-visible .ws-picker-controls > button {
 		&:after,
 		&:before {
 			content: " ";
@@ -213,14 +205,10 @@ $button-bgcolor: #f5f5f5;
 		text-align: left;
 		z-index: 2;
 
-		button {
+		> button {
 			@extend %ws-button;
-
 			border: em(1) solid #ccc;
-			border-radius: 5px;
-			box-shadow: 1px 1px 0 #fff;
 			background-color: #ddd;
-			background-image: -webkit-linear-gradient(top, #ececec 0%, #ddd 100%);
 			background-image: linear-gradient(to bottom, #ececec 0%, #ddd 100%);
 			transition: border-color 200ms linear;
 			float: left;
@@ -231,7 +219,7 @@ $button-bgcolor: #f5f5f5;
 		}
 	}
 
-	.ws-po-box[dir="rtl"] .ws-button-row button {
+	.ws-po-box[dir="rtl"] .ws-button-row > button {
 		float: right;
 
 		&.ws-empty {
@@ -313,6 +301,8 @@ $button-bgcolor: #f5f5f5;
 		position: relative;
 		zoom: 1;
 		overflow: hidden;
+		/* negative padding of td */
+		margin: 0 em(-2);
 
 		.monthname,
 		.month-digit {
@@ -340,7 +330,7 @@ $button-bgcolor: #f5f5f5;
 
 		th,
 		td {
-			padding: em(3) em(5);
+			padding: em(2);
 			text-align: center;
 		}
 
@@ -371,7 +361,6 @@ $button-bgcolor: #f5f5f5;
 			display: block;
 			padding: em(20.669) 0;
 			width: 100%;
-			border-radius: em(5);
 			color: #000;
 			background-color: #fff;
 
@@ -436,7 +425,6 @@ $button-bgcolor: #f5f5f5;
 			padding: em(4);
 			width: 100%;
 			text-align: left;
-			border-radius: em(4);
 
 			&.ws-focus,
 			&:focus,