webshims-rails 1.13.0 → 1.14.1

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

@@ -0,0 +1,31 @@
+%clearfix {
+	zoom: 1;
+
+	&:before,
+	&:after {
+		display: table;
+		clear: both;
+		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
+
+@function em($pixels, $context: $browser-context) {
+	@return #{$pixels/$context}em
+}
+

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

@@ -0,0 +1,583 @@
+@import "_extends.scss";
+@import "_api-forms-ext.scss";
+
+@font-face {
+	font-family: 'widget';
+	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;
+}
+
+%iconbase {
+	font-family: 'widget';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	zoom: 1;
+
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+%icon-calendar {
+	@extend %iconbase;
+	&:before {
+		content: "\f073";
+	}
+}
+
+
+%icon-clock {
+	@extend %iconbase;
+	&:before {
+		content: "\f017";
+	}
+}
+
+/* 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;
+}
+
+.ws-inputreplace[readonly][aria-readonly="false"] {
+	cursor: pointer;
+	&[disabled] {
+		cursor: default;
+		cursor: not-allowed;
+	}
+}
+
+.input-buttons,
+.step-controls,
+.ws-popover-opener {
+	zoom: 1;
+	overflow: hidden;
+	display: inline-block;
+	vertical-align: middle;
+	margin-left: -18.5px;
+}
+
+.step-controls,
+.ws-popover-opener {
+	position: relative;
+	float: left;
+	margin: 0;
+	height: 19px;
+	width: 15px;
+	
+	.ws-is-rtl & {
+		float: right;
+	}
+}
+
+.ws-popover-opener {
+	position: relative;
+	zoom: 1;
+	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;
+
+
+	&:focus,
+	&:active {
+		outline: 1px dotted #666;
+	}
+
+	&:hover {
+		outline: none;
+	}
+	
+	.ws-is-rtl & {
+		margin: 0 2px 0 0;
+	}
+	
+	span {
+		display: block;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 16px;
+		height: 16px;
+		margin: -8px 0 0 -8px;
+		@extend %icon-calendar;
+		
+
+		
+		.time-input-buttons & {
+			@extend %icon-clock;
+			margin: -7.5px 0 0 -7.5px;
+		}
+
+
+		.color-input-buttons & {
+			&:before {
+				content: "";
+			}
+			background: url(color-picker.png) no-repeat 0 0;
+		}
+
+		&.ws-color-indicator-bg {
+			background: url(../jpicker/images/preview-opacity.png) no-repeat 0;
+		}
+		&.ws-color-indicator {
+			background: none;
+		}
+	}
+}
+
+input[type="color"] {
+	width: 7.5em;
+}
+
+.input-buttons {
+	text-align: left;
+	
+	&.color-input-buttons {
+		margin-left: 2px;
+	}
+	
+	&.ws-disabled {
+		opacity: 0.95;
+	}
+	&.ws-disabled *,
+	&.ws-readonly * {
+		cursor: default;
+	}
+}
+
+.input-button-size-1 {
+	&.month-input-buttons,
+	&.date-input-buttons,
+	&.datetime-local-input-buttons {
+		margin-left: -24px;
+		
+		
+		&.ws-is-rtl {
+			margin-left: 0;
+			margin-right: -24px;
+		}
+	}
+}
+.input-button-size-2 {
+	margin-left: -39px;
+	
+	&.ws-is-rtl {
+		margin-left: 0;
+		margin-right: -39px;
+	}
+
+	.step-controls {
+		visibility: hidden;
+		opacity: 0;
+	}
+
+	:focus + &,
+	:hover + &,
+	:active + &,
+	&:hover {
+		.step-controls {
+			opacity: 1;
+			visibility: visible;
+		}
+
+	}
+}
+
+.step-controls {
+	transition: all 300ms;
+	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-down {
+			bottom: 0;
+		}
+
+		&: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-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;
+			}
+		}
+
+		&.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 */
+@each $class in $btnapis {
+	.#{$class} {
+		@extend %#{$class};
+	}
+}
+
+.ws-input {
+	letter-spacing: -0.31em;
+	word-spacing: -0.43em;
+
+
+
+	> * {
+		text-align: center;
+		letter-spacing: normal;
+		word-spacing: normal;
+		
+		> option {
+			text-align: left;
+		}
+	}
+	.ws-input-seperator {
+		vertical-align: middle;
+		width: 2%;
+		overflow: hidden;
+	}
+	
+	& + .input-buttons {
+		margin-left: 2px;
+	}
+	
+	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;
+}
+
+.ws-date {
+
+	.mm,
+	.dd {
+		width: 23.5%;
+		min-width: 10%;
+	}
+	.yy {
+		width: 48%;
+		min-width: 20%;
+	}
+	&.ws-month-select {
+		
+		.dd {
+			width: 22%;
+			min-width: 10%;
+		}
+		.mm {
+			width: 38%;
+			min-width: 17%;
+		}
+		
+		.yy {
+			width: 36%;
+			min-width: 16%;
+		}
+	}
+}
+
+.ws-month {
+	.mm,
+	.yy {
+		width: 47.9%;
+		min-width: 20%;
+	}
+}
+
+/* range */
+.ws-range {
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
+	margin: em(7.5) 0;
+	zoom: 1;
+	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;
+	
+	[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%;
+		background: #ccc;
+		border: em(1) solid #aaa;
+		cursor: pointer;
+		transition: background-color 400ms, border-color 400ms;
+		
+		> span {
+			position: absolute;
+			margin: 0 0 3px -90px;
+			padding: 0;
+			border: 0;
+			left: 50%;
+			bottom: em($dim + 1);
+			visibility: hidden;
+			width: 180px;
+			text-align: center;
+			background: none;
+
+			span {
+				visibility: visible;
+				&:after,
+				&:before {
+					content: "";
+					padding: em(1) em(3.5);
+					text-align: center;
+					background: #fff;
+					border: em(1) solid #ccc;
+					border-radius: em(4);
+					visibility: visible;
+				}
+			}
+		}
+		
+	}
+
+	&.ws-focus .ws-range-thumb {
+		background: #eee;
+		border-color: #999;
+	}
+	
+	&.ws-active .ws-range-thumb {
+		box-shadow: 0 0 em(9) rgba(0, 75, 100, 0.2);
+	}
+	
+	&[aria-disabled="true"],
+	&[aria-readonly="true"] {
+		cursor: default;
+		opacity: 0.95;
+	}
+	
+	&[aria-disabled="true"]  .ws-range-thumb,
+	&[aria-readonly="true"]  .ws-range-thumb {
+		cursor: default;
+	}
+	
+	&[aria-disabled="true"] .ws-range-thumb {
+		background: #ddd;
+		border-color: #ddd;
+	}
+
+	.ws-range-rail {
+		position: absolute;
+		display: block;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: 0;
+		zoom: 1;
+	}
+
+	.ws-range-progress {
+		position: absolute !important;
+		display: block;
+		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;
+	}
+
+	.ws-range-ticks {
+		position: absolute;
+		bottom: em(-10);
+		left: 0;
+		height: em(8);
+		width: em(1);
+		margin: 0 0 0 em(-1);
+		background: #ccc;
+		transition: background-color 400ms, color 400ms;
+		
+		&.ws-selected-option {
+			background: #09c;
+			color: #09c;
+		}
+	}
+	
+	&.ws-is-rtl {
+		.ws-range-progress {
+			left: auto;
+			right: 0;
+		}
+		.ws-range-ticks {
+			left: auto;
+			right: 0;
+		}
+	}
+	
+	&.vertical-range {
+		width: em(8);
+		margin: 0 10px 0 5px;
+		
+		.ws-range-ticks {
+			bottom: auto;
+			left: auto;
+			margin:  em(-0.75) 0 0 0;
+			right: em(-7.5);
+			height: em(1.5);
+			width: em(6.8);
+		}
+		
+		.ws-range-progress {
+			top: auto;
+			bottom: 1px;
+			left: 0;
+			width: 100%;
+			height: 0;
+		}
+		
+	}
+}
+
+
+.ws-range-ticks[data-label]:after,
+.ws-range-ticks:before {
+	display: none;
+	content: attr(data-label);
+	font-size: em(10);
+	min-width: 2em;
+	text-align: center;
+	margin: em(9) 0 0 -0.95em;
+	
+	.ws-is-rtl & {
+		margin: em(9) -0.95em 0 0;
+	}
+	
+	.vertical-range & {
+		margin: 0 0 0 5px;
+		position: relative;
+		top: -0.7em;
+		left: em(7);
+		min-width: 0;
+	}
+}
+
+.ws-range-ticks:before {
+	content: attr(data-value);
+}
+
+.ws-range-thumb {
+	> span {
+		&,
+		span:after,
+		span:before {
+			display: none;
+		}
+	}
+}
+
+
+/* helper classes to hide show/hide specific range features features */
+@each $class in $rangeapis {
+	.#{$class} {
+		@extend %#{$class};
+	}
+}
+
+.ws-inline-picker,
+div.ws-inline-picker {
+	@extend %contentbox;
+	position: relative;
+	max-width: 100%;
+	z-index: 99;
+}