webshims-rails 1.11.1 → 1.11.2

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

@@ -0,0 +1,10 @@
+%clearfix {
+	zoom: 1;
+
+	&:before,
+	&:after {
+		display: table;
+		clear: both;
+		content: ' ';
+	}
+}

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

@@ -0,0 +1,743 @@
+@import "_extends.scss";
+
+
+/* spinner control for time, number (usable for date, datetime-local) */
+.has-input-buttons,
+input.has-input-buttons,
+span.has-input-buttons {
+	display: inline-block;
+}
+
+.input-buttons,
+.step-controls,
+.ws-popover-opener {
+	zoom: 1;
+	overflow: hidden;
+	display: inline-block;
+	font-size: 0;
+	vertical-align: middle;
+	margin-top: -3px;
+	margin-left: -20px;
+}
+
+.step-controls,
+.ws-popover-opener {
+	position: relative;
+	float: left;
+	margin: 0;
+	height: 19px;
+	width: 15px;
+}
+
+.ws-popover-opener {
+	position: relative;
+	zoom: 1;
+	overflow: visible;
+	margin: 0 0 0 2px;
+	width: 19px;
+	border-radius: 3px;
+	cursor: pointer;
+	background: #ccc;
+	
+	span {
+		display: block;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 16px;
+		height: 16px;
+		margin: -8px 0 0 -8px;
+		background: url(forms.png) no-repeat -321px -1px;
+		
+		
+		.color-input-buttons & {
+			background-position: -348px 0;
+		}
+		
+		.time-input-buttons & {
+			background-position: -377px 1px;
+		}
+		
+		&.ws-color-indicator-bg {
+			background: url(../jpicker/images/preview-opacity.png) no-repeat 0;
+		}
+		&.ws-color-indicator {
+			background: none;
+		}
+	}
+}
+
+input[type="color"] {
+	width: 6.5em;
+}
+
+.input-buttons {
+	text-align: left;
+	
+	&.color-input-buttons {
+		margin-left: 2px;
+	}
+	&.input-button-size-1 {
+		&.month-input-buttons,
+		&.date-input-buttons {
+			margin-left: -24px;
+		}
+	}
+	&.input-button-size-2 {
+		margin-left: -39px;
+	}
+	&.ws-disabled {
+		opacity: 0.95;
+	}
+	&.ws-disabled *,
+	&.ws-readonly * {
+		cursor: default;
+	}
+}
+
+.step-controls {
+
+	span {
+		position: absolute;
+		display: inline-block;
+		overflow: hidden;
+		margin: 0 !important;
+		padding: 0 !important;
+		width: 15px;
+		height: 9px;
+		cursor: pointer;
+		font-size: 0;
+		line-height: 0;
+		background: url(forms.png) no-repeat 0 0;
+
+		&.step-up {
+			top: 0;
+			background-position: -80px 0;
+			&:hover {
+				background-position: -105px 0;
+			}
+			&.mousepress-ui {
+				background-position: -105px -20px;
+			}
+			.ws-disabled & {
+				background-position: -130px 0;
+			}
+		}
+		&.step-down {
+			bottom: 0;
+			background-position: -155px 0;
+			&:hover {
+				background-position: -180px 0;
+			}
+			&.mousepress-ui {
+				background-position: -180px -20px;
+			}
+			.ws-disabled & {
+				background-position: -205px 0;
+			}
+		}
+
+	}
+}
+
+
+.ws-input {
+
+	letter-spacing: -0.31em;
+    word-spacing: -0.43em;
+	
+	> * {
+		text-align: center;
+		letter-spacing: normal;
+		word-spacing: normal;
+	}
+	.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;
+		
+	}
+	
+	
+}
+
+.ws-date {
+
+	.mm,
+	.dd {
+		width: 23.5%;
+		
+		.no-boxsizing & {
+			width: 16%;
+		}
+	}
+	.yy {
+		width: 48%;
+		
+		.no-boxsizing & {
+			width: 40%;
+		}
+	}
+	&.ws-month-select {
+		
+		.dd {
+			width: 22%;
+			
+			.no-boxsizing & {
+				width: 13%;
+			}
+		}
+		.mm {
+			width: 38%;
+		}
+		
+		.yy {
+			width: 36%;
+			
+			.no-boxsizing & {
+				width: 30%;
+			}
+		}
+	}
+}
+
+.ws-month {
+	.mm,
+	.yy {
+		width: 47.9%;
+		
+		.no-boxsizing & {
+			width: 41%;
+		}
+	}
+}
+
+/* range */
+.ws-range {
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
+	margin: 0;
+	zoom: 1;
+	border: none;
+	height: 19px;
+	width: 155px;
+	border-radius: 1px;
+	background: url(range-track.png) 0 center no-repeat;
+	cursor: pointer;
+	font-size: 0;
+	line-height: 0;
+
+	.ws-range-thumb {
+		top: 0;
+		position: absolute;
+		display: block;
+		z-index: 4;
+		overflow: hidden;
+		margin: -2px 0 0 -6px;
+		height: 22px;
+		width: 11px;
+		background: url(forms.png) -3px 1px no-repeat;
+		cursor: pointer;
+		outline: none;
+		font-size: 0;
+		line-height: 0;
+
+		&:hover {
+			background-position: -20px 1px;
+		}
+	}
+
+	&.ws-focus .ws-range-thumb {
+		background-position: -20px 1px;
+	}
+	
+	&.ws-active .ws-range-thumb {
+		background-position: -37px 1px;
+	}
+	
+	&[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-position: -54px 1px;
+	}
+
+	.ws-range-rail {
+		position: absolute;
+		display: block;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: 0;
+		zoom: 1;
+	}
+
+	.ws-range-min {
+		position: absolute !important;
+		display: block;
+		margin: 9px 0 0;
+		padding: 0 !important;
+		top: 0;
+		height: 1px;
+		left: 0;
+		z-index: 1;
+		overflow: hidden;
+		background: #b6e2fb;
+	}
+
+	.ws-range-ticks {
+		overflow: hidden;
+		position: absolute;
+		bottom: 0px;
+		left: 0;
+		height: 4px;
+		width: 1px;
+		margin: 0 0 0 -1.5px;
+		font-size: 0;
+		line-height: 0;
+		text-indent: -999px;
+		background: #ccc;
+	}
+
+	&.vertical-range {
+		background: url(vertical-range.png) center bottom no-repeat;
+		width: 20px;
+
+		.ws-range-thumb {
+			top: 0;
+			left: 3px;
+			bottom: auto;
+			background: url(vertical-range.png) 0 -51px no-repeat;
+			margin: -6px 0 0 0;
+			height: 11px;
+			width: 22px;
+
+		}
+		.ws-range-thumb:hover,
+		&.ws-focus .ws-range-thumb {
+			background-position: 0 -34px;
+		}
+		&.ws-active .ws-range-thumb {
+			background-position: 0 -17px;
+		}
+
+		&[aria-disabled="true"] .ws-range-thumb {
+			background-position: 0 0;
+		}
+
+		.ws-range-min {
+			top: auto;
+			bottom: 1px;
+			left: 0;
+			width: 1px;
+			height: 0;
+		}
+
+		.ws-range-rail {
+			top: 5px;
+			left: 0;
+			right: 0;
+			bottom: 5px;
+		}
+
+		.ws-range-ticks {
+			bottom: auto;
+			left: auto;
+			right: 0;
+			height: 1px;
+			width: 4px;
+		}
+	}
+}
+
+
+
+
+//date popover
+$border-light: 1px solid #ddd;
+$button-bgcolor: #f5f5f5;
+%ws-button {
+	border-radius: 4px;
+	background: #ccc;
+	padding: 5px 8px;
+	display: inline-block;
+	border: 1px solid transparent;
+}
+.input-picker {
+	outline: none;
+	text-align: center;
+	font-family: sans-serif;
+	width: 330px;
+	
+	&.time-popover,
+	&.datetime-local-popover {
+		width: 415px;
+	}
+	
+	&.time-popover	{
+	
+		.ws-prev,
+		.ws-next,
+		.ws-super-prev,
+		.ws-super-next		{
+			display: none;
+		}
+	}
+
+	
+	&.ws-size-2 {
+		width: 645px;
+	}
+	
+	&.ws-size-3 {
+		width: 960px;
+	}
+	
+	&.color-popover {
+		width: 590px;
+	}
+	
+	abbr[title] {
+		cursor: help;
+	}
+	
+	li,
+	button {
+		font-size: 13px;
+		line-height: 16px;
+		color: #000;
+		transition: all 400ms;
+	}
+	
+	.ws-focus,
+	:focus {
+		outline: 1px dotted #000;
+	}
+	
+
+	.ws-po-box {
+		position: relative;
+		padding: 10px 20px 15px;
+		border-radius: 5px;
+		box-shadow: 0 0 2px rgba(0, 0, 0, .3);
+	}
+
+	.ws-prev,
+	.ws-next,
+	.ws-super-prev,
+	.ws-super-next	{
+		@extend %ws-button;
+		position: absolute;
+		top: 10px;
+		border: 1px solid #ccc;
+		border-radius: 5px;
+		padding: 0;
+		width: 24px;
+		height: 24px;
+		background: #eee url(forms.png) no-repeat 0 0;
+		z-index: 1;
+		
+		span {
+			display: none;
+		}
+	}
+	
+	
+	&.time-popover .ws-picker-body {
+		padding-top: 36px;
+	}
+
+	.ws-picker-body {
+		@extend %clearfix;
+		position: relative;
+		padding: 46px 0 0;
+		zoom: 1;
+		margin: 0 -10px;
+	}
+
+	.ws-prev,
+	.ws-super-prev	{
+		left: 20px;
+		background-position: -243px 5px;
+	}
+	
+	.ws-super-prev {
+		background-position: -243px -12px;
+	}
+	
+	&.ws-year-buttons .ws-prev {
+		left: 50px;
+	}
+	
+	.ws-next,
+	.ws-super-next {
+		right: 20px;
+		background-position: -275px 5px;
+	}
+	
+	.ws-super-next {
+		background-position: -275px -12px;
+	}
+	
+	&.ws-year-buttons .ws-next {
+		right: 50px;
+	}
+	
+	.ws-prev:hover,
+	.ws-next:hover,
+	.ws-super-prev:hover,
+	.ws-super-next:hover	{
+		border-color: #666;
+	}
+	
+	.ws-prev[disabled],
+	.ws-next[disabled],
+	.ws-super-prev[disabled],
+	.ws-super-next[disabled]{
+		opacity: 0.4;
+		border-color: #eee;
+	}
+
+	.ws-button-row {
+		@extend %clearfix;
+		position: relative;
+		margin: 10px 0 0;
+		border-top: 1px solid #eee;
+		padding: 10px 0 0;
+		text-align: left;
+		z-index: 2;
+
+		button {
+			@extend %ws-button;
+			
+			border: 1px 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;
+
+			&.ws-empty {
+				float: right;
+			}
+		}
+	}
+	
+	&[data-currentview="setMonthList"] .ws-picker-header  select {
+		max-width: 95%;
+	}
+	
+	&[data-currentview="setDayList"] .ws-picker-header select {
+		max-width: 40%;
+	}
+	
+	&[data-currentview="setDayList"] .ws-picker-header select.month-select {
+		max-width: 55%;
+	}
+	
+	&.time-popover .ws-picker-header {
+		top: -30px;
+		
+		button {
+			font-size: 15px;
+		}
+	}
+	
+	&.ws-year-buttons .ws-picker-header {
+		margin: 0 65px;
+	}
+	
+	
+	.ws-picker-header {
+		position: absolute;
+		top: -44px;
+		right: 0;
+		left: 0;
+		margin: 0 40px;
+
+		button {
+			display: inline-block;
+			width: 100%;
+			margin: 0;
+			padding: 4px 0;
+			font-weight: 700;
+			color: #000;
+			
+
+			&:hover {
+				text-decoration: underline;
+			}
+			
+			&[disabled]:hover {
+				text-decoration: none;
+			}
+		}
+	 }
+	
+	.picker-grid {
+		@extend %clearfix;
+		position: relative;
+		zoom: 1;
+		overflow: hidden;
+	}
+	
+	&.ws-size-1 .picker-list  {
+		float: none;
+		width: auto;
+	}
+	
+	.picker-list {
+		@extend %clearfix;
+		position: relative;
+		zoom: 1;
+		width: 290px;
+		float: left;
+		margin: 0 10px;
+		background: #fff;
+		
+		tr {
+			border: 0;
+		}
+
+		th,
+		td {
+			padding: 3px 5px;
+		}
+		
+		&.day-list td {
+			padding: 2px 1px;
+		}
+		
+		&.day-list td button {
+			padding: 4px 0;
+		}
+
+
+		td button {
+			display: block;
+			padding: 9px 0;
+			width: 100%;
+			border-radius: 5px;
+			color: #000;
+			background-color: #fff;
+
+			&.othermonth {
+				color: #888;
+			}
+
+			&:hover,
+			&.checked-value {
+				color: #fff;
+				background: #000;
+			}
+
+			&[disabled],
+			&[disabled]:hover {
+				color: #888;
+				background-color: #fff;
+			}
+			
+			
+		}
+		
+		table {
+			width: 100%;
+			border: 0 none;
+			border-collapse: collapse;
+		}
+
+		th,
+		td.week-cell{
+			font-size: 13px;
+			line-height: 1.1em;
+			padding-bottom: 3px;
+			text-transform: uppercase;
+			font-weight: 700;
+		}
+
+		th, td {
+			width: 14.2856%;
+		}
+	}
+
+
+	.ws-options {
+		margin: 10px 0 0;
+		border-top: 1px solid #eee;
+		padding: 10px 0 0;
+		text-align: left;
+		
+		h5 {
+			margin: 0 0 5px;
+			padding: 0;
+			font-size: 14px;
+			font-weight: bold;
+		}
+		
+		ul,
+		li {
+			padding: 0;
+			margin: 0;
+			list-style: none;
+		}
+		
+		button {
+			@extend %clearfix;
+			display: block;
+			padding: 4px;
+			width: 100%;
+			text-align: left;
+			border-radius: 4px;
+			
+			&.ws-focus,
+			&:focus,
+			&:hover {
+				color: #fff;
+				background: #000;
+			}
+			
+			&[disabled],
+			&[disabled].ws-focus,
+			&[disabled]:focus,
+			&[disabled]:hover {
+				color: #888;
+				background: #fff;
+				text-decoration: none;
+			}
+			.ws-value {
+				float: left;
+			}
+			
+			.ws-label {
+				float: right;
+				font-size: 96%;
+			}
+		}
+		
+		
+	}
+}