src/pyams_skin/resources/less/ui.less
changeset 0 bb4aabe07487
child 32 8419f7c811e7
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_skin/resources/less/ui.less	Thu Feb 19 10:59:00 2015 +0100
@@ -0,0 +1,1495 @@
+/*
+ * JQuery-UI for Bootstrap
+ */
+
+
+.slider {
+	margin-top: 0;
+	margin-bottom: 30px;
+
+	&.slider-vertical {
+		margin-bottom: 0;
+		margin-right: 5px;
+	}
+}
+
+.ui-helper {
+	&-hidden {
+		display: none;
+
+		&-accessible {
+			border: 0;
+			clip: rect(0 0 0 0);
+			height: 1px;
+			margin: -1px;
+			overflow: hidden;
+			padding: 0;
+			position: absolute;
+			width: 1px;
+		}
+	}
+	&-reset {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		outline: 0;
+		line-height: 1.3;
+		text-decoration: none;
+		font-size: 100%;
+		list-style: none;
+	}
+	&-clearfix {
+		display: block;
+		min-height: 0;
+
+		&:after,
+		&:before {
+			content: "";
+			display: table;
+			border-collapse: collapse;
+		}
+		&:after {
+			content: ".";
+			display: block;
+			height: 0;
+			clear: both;
+			visibility: hidden;
+		}
+		* html & {
+			height: 1%;
+		}
+	}
+	&-zfix {
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		position: absolute;
+		opacity: 0;
+		filter: alpha(opacity=0);
+	}
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+.ui-icon {
+	display: block;
+	width: 16px;
+	height: 16px;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+
+/*
+ * UI widget
+ */
+
+.ui-widget {
+	font-family: Ubuntu, Helvetica, Arial, sans-serif;
+	font-size: 13px;
+
+	:active {
+		outline: 0;
+	}
+	.ui-widget {
+		font-size: 13px;
+	}
+	button,
+	input,
+	select,
+	textarea {
+		font-family: Ubuntu, Helvetica, Arial, sans-serif;
+		font-size: inherit;
+	}
+	&-content {
+		border: 1px solid #aaa;
+		background: #fff;
+		color: #404040;
+
+		.ui-icon {
+			background: none!important;
+		}
+	}
+	&-header {
+		font-weight: 700;
+		background-color: #F5F5F5;
+		border-color: #DDD;
+		color: #333;
+
+		a {
+			color: #222;
+		}
+	}
+	&-overlay {
+		position: fixed;
+		background: #AAA;
+		width: 100%;
+		height: 200%;
+		top: 0;
+		left: 0;
+		z-index: 999;
+		opacity: .3;
+		filter: alpha(opacity=30);
+	}
+	&-shadow {
+		margin: -8px 0 0 -8px;
+		padding: 8px;
+		background: #aaa;
+		opacity: .3;
+		filter: alpha(opacity=30);
+		border-radius: 8px;
+	}
+}
+
+.ui-state {
+	&-default,
+	.ui-widget-content &-default,
+	.ui-widget-header &-default {
+		color: #333;
+		background-color: #fff;
+		font-weight: 400;
+		border: 1px solid #ccc;
+	}
+	&-default {
+		a,
+		a:link,
+		a:visited {
+			color: #555;
+			text-decoration: none;
+		}
+		&,
+		.ui-widget-content &,
+		.ui-widget-header & {
+			text-shadow: none;
+		}
+	}
+	&-default,
+	&-error,
+	&-highlight {
+		position: relative;
+		border-width: 1px;
+		border-style: solid;
+
+		p {
+			font-size: 13px;
+			font-weight: 400;
+			line-height: 18px;
+			margin: 7px 15px;
+		}
+	}
+	&-highlight, {
+		&,
+		.ui-widget-content &,
+		.ui-widget-header & {
+			color: #3a87ad;
+			background-color: #d9edf7;
+			border-color: #bce8f1;
+		}
+		a,
+		.ui-widget-content & a,
+		.ui-widget-header & a {
+			color: #2d6987;
+		}
+	}
+	&-error {
+		&,
+		.ui-widget-content &,
+		.ui-widget-header & {
+			color: #b94a48;
+			background-color: #f2dede;
+			border-color: #eed3d7;
+		}
+		a,
+		&-text,
+		.ui-widget-content & a,
+		.ui-widget-content &-text,
+		.ui-widget-header & a,
+		.ui-widget-header &-text {
+			color: #953b39;
+		}
+	}
+	&-focus,
+	&-hover,
+	.ui-widget-content &-focus,
+	.ui-widget-content &-hover,
+	.ui-widget-header &-focus,
+	.ui-widget-header &-hover {
+		color: #333;
+		background-color: #ebebeb;
+		border-color: #adadad;
+		text-decoration: none;
+	}
+	&-hover a {
+		&:hover,
+		&:link,
+		&:visited {
+			color: #333;
+			text-decoration: none;
+		}
+	}
+	&-active {
+		.ui-widget-content &,
+		.ui-widget-header & {
+			border: 1px solid #adadad;
+			font-weight: 400;
+			color: #333;
+		}
+		a,
+		a:link,
+		a:visited {
+			color: #333;
+			text-decoration: none;
+		}
+	}
+	&-disabled,
+	.ui-widget-content &-disabled,
+	.ui-widget-header &-disabled {
+		opacity: .35;
+		filter: alpha(opacity=35);
+		background-image: none;
+
+		.ui-icon {
+			filter: alpha(opacity=35);
+		}
+	}
+}
+
+.ui-priority {
+	&-primary,
+	.ui-widget-content &-primary,
+	.ui-widget-header &-primary {
+		font-weight: 700;
+	}
+	&-secondary,
+	.ui-widget-content &-secondary,
+	.ui-widget-header &-secondary {
+		opacity: .7;
+		filter: alpha(opacity=70);
+		font-weight: 400;
+	}
+}
+
+
+.ui-corner {
+	&-all {
+		border-radius: 0;
+	}
+	&-left,
+	&-tl,
+	&-top {
+		border-top-left-radius: 4px;
+	}
+	&-right,
+	&-top,
+	&-tr {
+		border-top-right-radius: 4px;
+	}
+	&-bl,
+	&-bottom,
+	&-left {
+		border-bottom-left-radius: 4px;
+	}
+	&-bottom,
+	&-br,
+	&-right {
+		border-bottom-right-radius: 4px;
+	}
+}
+
+
+.ui-autocomplete {
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: default;
+}
+
+.ui-autocomplete-loading {
+	input[type=color]&,
+	input[type=date]&,
+	input[type=datetime-local]&,
+	input[type=datetime]&,
+	input[type=email]&,
+	input[type=month]&,
+	input[type=number]&,
+	input[type=password]&,
+	input[type=search]&,
+	input[type=tel]&,
+	input[type=text]&,
+	input[type=time]&,
+	input[type=url]&,
+	input[type=week]& {
+		background-image: url(../img/select2-spinner.gif)!important;
+		background-repeat: no-repeat;
+		background-position: 99% 50%;
+		padding-right: 27px;
+	}
+}
+
+/*
+ * UI buttons
+ */
+
+.ui-btn {
+	&-lg {
+		padding: 10px 16px;
+		font-size: 18px;
+		line-height: 1.33;
+		border-radius: 6px;
+	}
+	&-sm,
+	&-xs {
+		padding: 5px 10px;
+		font-size: 12px;
+		line-height: 1.5;
+		border-radius: 3px;
+	}
+	&-xs {
+		padding: 1px 5px;
+	}
+	&-block {
+		display: block;
+		width: 100%;
+		padding-right: 0;
+		padding-left: 0;
+	}
+	&-block+&-block {
+		margin-top: 5px;
+	}
+	input[type=button]&-block,
+	input[type=reset]&-block,
+	input[type=submit]&-block {
+		width: 100%;
+	}
+}
+
+
+.ui-button {
+	display: inline-block;
+	padding: 6px 12px;
+	margin-bottom: 0;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.428571429;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: middle;
+	cursor: pointer;
+	border: 1px solid #ccc;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+
+	&:focus {
+		outline: thin dotted #333;
+		outline: 5px auto -webkit-focus-ring-color;
+		outline-offset: -2px;
+	}
+	&:focus,
+	&:hover {
+		color: #333;
+		background-color: #ebebeb;
+		border-color: #adadad;
+		text-decoration: none;
+	}
+	fieldset[disabled] &,
+	fieldset[disabled] &.ui-state-active,
+	fieldset[disabled] &:active,
+	fieldset[disabled] &:focus,
+	fieldset[disabled] &:hover,
+	&.disabled,
+	&.disabled.active,
+	&.disabled:active,
+	&.disabled:focus,
+	&.disabled:hover,
+	&[disabled],
+	&[disabled].active,
+	&[disabled]:active,
+	&[disabled]:focus,
+	&[disabled]:hover {
+		background-color: #fff;
+		border-color: #ccc;
+	}
+	&-text-icon-primary &-icon-primary {
+		float: left;
+	}
+	&-text-icon-primary {
+		padding: 2px 7px 3px;
+	}
+	&-primary {
+		color: #fff;
+		background-color: #428bca;
+		border-color: #357ebd;
+	}
+	&-warning {
+		color: #fff;
+		background-color: #f0ad4e;
+		border-color: #eea236;
+	}
+	&-info {
+		color: #fff;
+		background-color: #5bc0de;
+		border-color: #46b8da;
+	}
+	&-danger {
+		color: #fff;
+		background-color: #d9534f;
+		border-color: #d43f3a;
+	}
+	&-inverse {
+		color: #fff;
+		background-color: #222;
+		border-color: #080808;
+	}
+	&-success {
+		color: #fff;
+		background-color: #5cb85c;
+		border-color: #4cae4c;
+	}
+	&-error {
+		color: #fff;
+		background-color: #c43c35;
+		border-color: #882a25;
+	}
+	&-danger:hover,
+	&-info:hover,
+	&-inverse:hover,
+	&-primary:hover,
+	&-success:hover,
+	&-warning:hover {
+		text-decoration: none;
+	}
+	&-primary:focus,
+	&-primary:hover {
+		color: #fff;
+		background-color: #3276b1;
+		border-color: #285e8e;
+	}
+	&-success:hover {
+		color: #fff;
+		background-color: #47a447;
+		border-color: #398439;
+	}
+	&-info:hover {
+		color: #fff;
+		background-color: #39b3d7;
+		border-color: #269abc;
+	}
+	&-danger:hover {
+		color: #fff;
+		background-color: #d2322d;
+		border-color: #ac2925;
+	}
+	&-warning:hover {
+		color: #fff;
+		background-color: #ed9c28;
+		border-color: #d58512;
+	}
+	&-inverse:hover {
+		color: #fff;
+		background-color: #363636;
+		border-color: #000;
+	}
+	&-icon-only {
+		width: 2.2em;
+	}
+	&-icons-only {
+		width: 3.4em;
+	}
+	button&-icons-only {
+		width: 3.7em;
+	}
+	&-text-icon-primary &-icon-primary.ui-icon {
+		margin-top: 5px;
+	}
+	& &-text {
+		display: block;
+		line-height: normal;
+	}
+	&-icon-only &-text,
+	&-icons-only &-text {
+		padding: .4em;
+		text-indent: -9999px;
+		display: none;
+	}
+	&-text-icon-primary &-text,
+	&-text-icons &-text {
+		padding: .4em 1em .4em 2.1em;
+	}
+	&-text-icon-secondary &-text,
+	&-text-icons &-text {
+		padding: .4em 2.1em .4em 1em;
+	}
+	&-text-icons &-text {
+		padding-left: 2.1em;
+		padding-right: 2.1em;
+	}
+	input& {
+		padding: .4em 1em;
+	}
+	&-icon-only .ui-icon,
+	&-icons-only .ui-icon,
+	&-text-icon-primary .ui-icon,
+	&-text-icon-secondary .ui-icon,
+	&-text-icons .ui-icon {
+		margin-bottom: 0;
+		margin-top: 0;
+		top: 50%;
+	}
+	&-icon-only .ui-icon {
+		left: 50%;
+		margin-left: -8px;
+		margin-right: -6px;
+	}
+	&-icons-only &-icon-primary,
+	&-text-icon-primary &-icon-primary,
+	&-text-icons &-icon-primary {
+		left: .5em;
+	}
+	&-icons-only &-icon-secondary,
+	&-text-icon-secondary &-icon-secondary,
+	&-text-icons &-icon-secondary {
+		right: .5em;
+	}
+	&set {
+		margin-right: 7px;
+
+		.ui-state-active {
+			color: #fff;
+			background-color: #428bca;
+			border-color: #357ebd;
+
+			&.ui-state-hover {
+				color: #fff;
+				background-color: #3276b1;
+				border-color: #285e8e;
+			}
+		}
+		.ui-button {
+			margin-left: 0;
+			margin-right: -.4em;
+		}
+	}
+	button&::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+}
+
+
+/*
+ * UI slider
+ */
+
+.ui-slider {
+	position: relative;
+	text-align: left;
+
+	&.ui-state-disabled &-handle,
+	&.ui-state-disabled &-range {
+		-webkit-filter: inherit;
+		filter: inherit;
+	}
+	.ui-slider-handle {
+		position: absolute;
+		z-index: 2;
+		width: 16px;
+		height: 18px;
+		cursor: default;
+	}
+	.ui-slider-range {
+		position: absolute;
+		z-index: 1;
+		font-size: .7em;
+		display: block;
+		border: 0;
+		background-position: 0 0;
+		color: #fff;
+		background-color: #0e90d2;
+		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
+		background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
+		background-image: -webkit-gradient(linear, top left, bottom left, from(#149bdf), to(#0480be));
+		background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
+		background-image: linear-gradient(to bottom, #149bdf, #0480be);
+		background-repeat: repeat-x;
+		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf',  endColorstr='#ff0480be',  GradientType=0);
+		-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
+		box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+		-webkit-transition: width .6s ease;
+		transition: width .6s ease;
+	}
+	&-horizontal {
+		height: 10px;
+		background: #D5D5D5;
+		border: 0;
+
+		.ui-slider-handle {
+			top: -.2em;
+			margin-left: -.5em;
+			background-color: #fff;
+			border-color: #CCC;
+
+			&:focus {
+				background-color: #fff;
+				border-color: #357EBD;
+			}
+			&:hover {
+				background-color: #fff;
+				border-color: #285E8E;
+				outline: 0;
+			}
+			&:active {
+				background-color: #428BCA;
+				border-color: #3276B1;
+			}
+		}
+		.ui-slider-range {
+			top: 0;
+			height: 100%;
+
+			&-min {
+				left: 0;
+			}
+			&-max {
+				right: 0;
+			}
+		}
+	}
+	&-vertical {
+		width: .8em;
+		height: 100px;
+
+		.ui-slider-handle {
+			left: -.3em;
+			margin-left: 0;
+			margin-bottom: -.6em;
+		}
+		.ui-slider-range {
+			left: 0;
+			width: 100%;
+
+			&-min {
+				bottom: 0;
+			}
+			&-max {
+				top: 0;
+			}
+		}
+	}
+}
+
+
+/*
+ * UI tabs
+ */
+
+.ui-tabs {
+	position: relative;
+	border: 0;
+	border-radius: 0;
+
+	.ui-tabs-panel {
+		display: block;
+		border-radius: 0;
+		background: 0 0;
+	}
+	.ui-tabs-nav {
+		margin-bottom: 0;
+		border: solid #ddd;
+		border-width: 0 0 1px;
+		border-radius: 0;
+		background: 0 0;
+
+		li {
+			position: relative;
+			top: 0;
+			float: left;
+			margin-bottom: -1px;
+			margin-right: 3px;
+			border: 0;
+			list-style: none;
+			white-space: nowrap;
+			background: 0 0;
+			-webkit-filter: none;
+			filter: none;
+
+			&.ui-tabs-active {
+				&:hover {
+					background: #fff;
+					cursor: text;
+				}
+				a {
+					border: 1px solid #ddd;
+					border-bottom: 1px solid #fff;
+					background-color: #fff;
+					color: #555;
+					font-weight: 700;
+					border-top-width: 0!important;
+					margin-top: 1px!important;
+					-webkit-box-shadow: 0 -2px 0 #57889c;
+					box-shadow: 0 -2px 0 #57889c;
+				}
+			}
+			a {
+				float: left;
+				padding: 8px 12px;
+				font-weight: 400;
+				text-decoration: none;
+				outline: 0;
+				background: 0 0;
+				border-radius: 0;
+				background-color: #F5F5F5;
+				border: 1px solid #F5F5F5;
+				border-bottom: 1px solid #ddd;
+				color: #838383;
+
+				&:hover {
+					border: 1px solid #f5f5f5;
+					border-bottom: 1px solid #ddd;
+					background-color: #f5f5f5;
+				}
+			}
+			&.ui-state-disabled a,
+			&.ui-tabs-active a,
+			&.ui-tabs-loading a {
+				cursor: text;
+			}
+		}
+		.ui-state-default {
+			border: 0;
+			-webkit-box-shadow: none;
+			box-shadow: none;
+		}
+	}
+	.ui-tabs-panel {
+		border: 1px solid #ddd;
+		margin: 0;
+		padding: 10px 13px;
+		border-top: 0;
+	}
+	.ui-tabs-hide {
+		display: none!important;
+	}
+}
+
+
+/*
+ * UI tooltip
+ */
+
+.ui-tooltip {
+	display: block;
+	font-size: 11px;
+	opacity: .8;
+	position: absolute;
+	visibility: visible;
+	z-index: 1024;
+	max-width: 200px;
+	background: #000;
+	border: 1px solid #000;
+	color: #FFF;
+	padding: 3px 8px;
+	text-align: center;
+	text-decoration: none;
+	-webkit-box-shadow: inset 0 1px 0 #000;
+	box-shadow: inset 0 1px 0 #000;
+	border-radius: 4px;
+
+	body & {
+		border-width: 1px;
+	}
+}
+
+
+/*
+ * UI spinner
+ */
+
+.ui-spinner {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+	width: 100%;
+	padding: 0;
+	vertical-align: middle;
+
+	&-input {
+		margin: 0!important;
+		height: 30px;
+		padding: 6px 24px 6px 12px;
+		border: 0;
+		background: 0 0;
+		vertical-align: middle;
+
+		&.spinner-left {
+			padding: 6px 12px 6px 24px;
+
+			+.ui-spinner-button,
+			+.ui-spinner-button+.ui-spinner-button {
+				right: auto;
+				left: 0;
+			}
+		}
+		&.spinner-both {
+			padding: 6px 30px;
+
+			+.ui-spinner-button+.ui-spinner-button {
+				left: 0;
+				right: auto;
+			}
+			+.ui-spinner-button,
+			+.ui-spinner-button+.ui-spinner-button {
+				height: 30px;
+				width: 25px;
+			}
+			+.ui-spinner-up+.ui-spinner-down:before,
+			+.ui-spinner-up:before {
+				margin-top: 8px;
+			}
+		}
+	}
+	&-button {
+		width: 19px;
+		height: 50%;
+		font-size: .5em;
+		padding: 0;
+		margin: 0;
+		text-align: center;
+		position: absolute;
+		cursor: default;
+		display: block;
+		overflow: hidden;
+		right: 0;
+	}
+	a.ui-spinner-button {
+		border-top: 0;
+		border-bottom: 0;
+		border-right: 0;
+	}
+	.ui-icon {
+		position: absolute;
+		margin-top: -8px;
+		top: 50%;
+		left: 0;
+	}
+	&-down,
+	&-up {
+		background: #739e73;
+		border-radius: 0;
+
+		&:before {
+			display: inline-block;
+			font-family: FontAwesome;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 1;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+			content: "\f067";
+			color: #fff;
+			font-size: 14px;
+			margin-top: 1px;
+		}
+		>:first-child {
+			display: none;
+		}
+	}
+	&-up {
+		top: 0;
+
+		&:active,
+		&:focus,
+		&:hover {
+			background: #5b835b;
+		}
+	}
+	&-down {
+		bottom: 0;
+		background: #c2032f;
+
+		&:before {
+			content: "\f068";
+		}
+		&:active,
+		&:focus,
+		&:hover {
+			background: #77021d;
+		}
+	}
+	.ui-icon-triangle-1-s {
+		background-position: -65px -16px;
+	}
+}
+
+
+/*
+ * UI date picker
+ */
+
+.ui-datepicker {
+	width: 20em;
+	padding: .2em .2em 0;
+	display: none;
+
+	&-inline {
+		z-index: 9000!important;
+	}
+	&-header {
+		position: relative;
+		border: 0;
+		font-weight: 700;
+		width: 100%;
+		padding: 4px 0;
+		background-color: #f5f5f5;
+		color: gray;
+	}
+	&-next,
+	&-prev {
+		position: absolute;
+		top: 2px;
+		width: 5.6em;
+		height: 1.8em;
+		text-align: center;
+		margin-top: 2px;
+		cursor: pointer;
+
+		>:first-child {
+			text-indent: 0!important;
+		}
+		span {
+			display: block;
+			position: absolute;
+			text-align: center;
+			top: 50%;
+			margin-top: -8px;
+			width: 5.8em;
+		}
+	}
+	&-prev {
+		left: 2px;
+	}
+	&-next {
+		right: 2px;
+	}
+	&-title {
+		margin: 0 5.8em;
+		line-height: 1.8em;
+		text-align: center;
+
+		select {
+			font-size: 1em;
+			margin: 1px 0;
+		}
+	}
+	select.ui-datepicker-month-year {
+		width: 100%;
+	}
+	select.ui-datepicker-month,
+	select.ui-datepicker-year {
+		width: 49%;
+	}
+	table {
+		width: 100%;
+		font-size: .9em;
+		border-collapse: collapse;
+		margin: 0 0 .4em;
+	}
+	th {
+		padding: .7em .3em;
+		text-align: center;
+		border: 0;
+		font-weight: 700;
+		color: gray;
+	}
+	td {
+		border: 0;
+		padding: 1px;
+
+		&:hover {
+			color: #fff;
+		}
+		a {
+			margin-bottom: 0;
+			border: 0;
+		}
+		a,
+		span {
+			display: block;
+			padding: .2em;
+			text-align: right;
+			text-decoration: none;
+		}
+		.ui-state-default {
+			border: 0;
+			background: 0 0;
+			margin-bottom: 0;
+			padding: 5px;
+			color: gray;
+			text-align: center;
+			-webkit-filter: none;
+			filter: none;
+		}
+		.ui-state-highlight {
+			color: #fff;
+			background-color: #A90329;
+			text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+			border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
+			border-radius: 0;
+		}
+		.ui-state-active {
+			color: #333;
+			background-color: #ebebeb;
+			margin-bottom: 0;
+			font-size: normal;
+			text-shadow: 0;
+			border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
+			border-radius: 0;
+		}
+		.ui-state-hover {
+			color: #fff;
+			background: #428bca;
+			background-color: #428bca;
+			text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+			border-color: #357ebd;
+			border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
+			border-radius: 0;
+		}
+	}
+	&-buttonpane {
+		background-image: none;
+		margin: .7em 0 0;
+		padding: 0 .2em;
+		border-left: 0;
+		border-right: 0;
+		border-bottom: 0;
+
+		button {
+			float: right;
+			margin: .5em .2em .4em;
+			cursor: pointer;
+			padding: .2em .6em .3em;
+			width: auto;
+			overflow: visible;
+
+			&.ui-datepicker-current {
+				float: left;
+			}
+		}
+	}
+	&-multi {
+		width: auto;
+
+		.ui-datepicker-group {
+			float: left;
+		}
+		.ui-datepicker-group table {
+			width: 95%;
+			margin: 0 auto .4em;
+		}
+		&-2 .ui-datepicker-group {
+			width: 50%;
+		}
+		&-3 .ui-datepicker-group {
+			width: 33.3%;
+		}
+		&-4 .ui-datepicker-group {
+			width: 25%;
+		}
+		.ui-detepicker-group-last .ui-datepicker-header,
+		.ui-datepicket-group-middle .ui-datepicker-header {
+			border-left-width: 0;
+		}
+		.ui-datepicker-buttonpane {
+			clear: left;
+		}
+	}
+	&-row-break {
+		clear: both;
+		width: 100%;
+		font-size: 0;
+	}
+	&-rtl {
+		direction: rtl;
+
+		.ui-datepicker-prev {
+			right: 2px;
+			left: auto;
+		}
+		.ui-datepicker-next {
+			left: 2px;
+			right: auto;
+		}
+		.ui-datepicker-prev:hover {
+			right: 1px;
+			left: auto;
+		}
+		.ui-datepicker-next:hover {
+			left: 1px;
+			right: auto;
+		}
+		.ui-datepicker-buttonpane {
+			clear: right;
+		}
+		.ui-datepicker-buttonpane button {
+			float: left;
+		}
+		.ui-datepicker-buttonpane button.ui-datepicker-current,
+		.ui-datepicker-group {
+			float: right;
+		}
+		.ui-datepicker-group-last .ui-datepicker-header,
+		.ui-datepicker-group-middle .ui-datepicker-header {
+			border-right-width: 0;
+			border-left-width: 1px;
+		}
+	}
+	&-cover {
+		display: none;
+		display: block;
+		position: absolute;
+		z-index: -1;
+		-webkit-filter: mask();
+		filter: mask();
+		top: -4px;
+		left: -4px;
+		width: 200px;
+		height: 200px;
+	}
+	&-today {
+		a {
+			background-color: #BFBFBF;
+			cursor: pointer;
+			padding: 0 4px;
+			margin-bottom: 0;
+
+			&:hover {
+				background-color: gray;
+				color: #fff;
+			}
+		}
+	}
+}
+
+
+/*
+ * UI progressbar
+ */
+
+.ui-progressbar {
+	height: 2em;
+	margin-bottom: 20px;
+	border: 0;
+	overflow: hidden;
+	background-color: #f7f7f7;
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
+	background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
+	background-image: -webkit-gradient(linear, top left, bottom left, from(#f5f5f5), to(#f9f9f9));
+	background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
+	background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
+	background-repeat: repeat-x;
+	border-radius: 0;
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',  endColorstr='#fff9f9f9',  GradientType=0);
+	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+
+	.ui-progressbar-value {
+		margin: 0;
+		height: 100%;
+		color: #fff;
+		background-color: #428BCA;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+		-webkit-transition: width .6s ease;
+		transition: width .6s ease;
+	}
+	.ui-progressbar-overlay {
+		background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
+		background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+		background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+		background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+		-webkit-background-size: 40px 40px;
+		background-size: 40px 40px;
+		-webkit-animation: progress-bar-stripes 2s linear infinite;
+		-ms-animation: progress-bar-stripes 2s linear infinite;
+		animation: progress-bar-stripes 2s linear infinite;
+	}
+	&-indeterminate &-value {
+		background-image: none;
+	}
+}
+
+
+/*
+ * UI resizable
+ */
+
+.ui-resizable {
+	position: relative;
+
+	&-handle {
+		position: absolute;
+		font-size: .1px;
+		z-index: 99999;
+		display: block;
+	}
+	&-autohide &-handle,
+	&-disabled &-handle {
+		display: none;
+	}
+	&-n {
+		cursor: n-resize;
+		height: 7px;
+		width: 100%;
+		top: -5px;
+		left: 0;
+	}
+	&-s {
+		cursor: s-resize;
+		height: 7px;
+		width: 100%;
+		bottom: -5px;
+		left: 0;
+	}
+	&-e {
+		cursor: e-resize;
+		width: 7px;
+		right: -5px;
+		top: 0;
+		height: 100%;
+	}
+	&-w {
+		cursor: w-resize;
+		width: 7px;
+		left: -5px;
+		top: 0;
+		height: 100%;
+	}
+	&-se {
+		cursor: se-resize;
+		width: 12px;
+		height: 12px;
+		right: 1px;
+		bottom: 1px;
+	}
+	&-sw {
+		cursor: sw-resize;
+		width: 9px;
+		height: 9px;
+		left: -5px;
+		bottom: -5px;
+	}
+	&-nw {
+		cursor: nw-resize;
+		width: 9px;
+		height: 9px;
+		left: -5px;
+		top: -5px;
+	}
+	&-ne {
+		cursor: ne-resize;
+		width: 9px;
+		height: 9px;
+		right: -5px;
+		top: -5px;
+	}
+}
+
+
+/*
+ * UI selectable
+ */
+
+.ui-selectable {
+	&-helper {
+		position: absolute;
+		z-index: 100;
+		border: 1px dotted #000;
+	}
+}
+
+
+/*
+ * UI accordion
+ */
+
+.ui-accordion {
+	width: 100%;
+
+	.ui-accordion-li-fix {
+		display: inline;
+	}
+	.ui-accordion-header {
+		display: block;
+		position: relative;
+		margin-top: -2px;
+		border-color: #ddd!important;
+		padding: 10px 15px 10px 36px!important;
+		cursor: pointer;
+		min-height: 0;
+		background-color: #fbfbfb;
+		border-radius: 0;
+		font-size: 15px;
+
+		&-active {
+			border-bottom: 0!important;
+		}
+	}
+	.ui-accordion-icons {
+		padding-left: 2.2em;
+	}
+	.ui-accordion-noicons {
+		padding-left: .7em;
+	}
+	.ui-accordion-icons .ui-accordion-icons {
+		padding-left: 2.2em;
+	}
+	.ui-accordion-header .ui-accordion-header-icon {
+		position: absolute;
+		left: .5em;
+		top: 50%;
+		margin-top: -8px;
+		text-indent: 0!important;
+		background-image: none!important;
+		text-align: center;
+		line-height: normal;
+		left: 12px!important;
+		margin-top: -6px!important;
+		font-size: 14px!important;
+	}
+	.ui-accordion-content {
+		margin-top: -3px;
+		border-radius: 0;
+		border-top: 0 none;
+		border-color: #ddd!important;
+		padding: 15px;
+		position: relative;
+		top: 1px;
+		margin-bottom: 2px;
+		overflow: auto;
+		display: none;
+	}
+	.ui-accordion-content-active {
+		display: block;
+	}
+	&-header-active+.ui-accordion-content {
+		border-top: 1px solid #ddd;
+	}
+}
+
+.noUi {
+	&-target * {
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+		-webkit-touch-callout: none;
+		-ms-touch-action: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		cursor: default;
+
+		&[disabled] {
+			.noUi-base {
+				background: #999;
+			}
+			.noUi-connect {
+				background: #BBB;
+			}
+		}
+	}
+	&-base {
+		width: 100%;
+		height: 14px;
+		position: relative;
+		max-width: 100%;
+		max-height: 100%;
+		border: 1px solid #bfbfbf;
+		z-index: 1;
+	}
+	&-origin-lower {
+		background: #72a8d7;
+	}
+	&-handle {
+		background: #858585;
+		height: 30px;
+		width: 16px;
+		border: 1px solid #fff;
+		margin: -8px 0 0 -8px;
+		cursor: default;
+
+		&:hover {
+			background: #6c6c6c;
+		}
+	}
+	&-active {
+		cursor: default;
+		-webkit-box-shadow: rgba(0, 0, 0, .1) 1px 1px 1px 0;
+		box-shadow: rgba(0, 0, 0, .1) 1px 1px 1px 0;
+		background: #686868;
+		height: 32px;
+		width: 18px;
+		margin: -9px 0 0 -8px;
+		border: 0;
+
+		&:after {
+			-webkit-box-sizing: border-box;
+			-moz-box-sizing: border-box;
+			box-sizing: border-box;
+			content: "";
+			display: block;
+			height: 100%;
+			border: 1px solid #ddd;
+		}
+	}
+	&-connect {
+		background: #3276b1;
+	}
+	&-background {
+		background: #eee;
+		border: 0;
+	}
+	&-origin {
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 0;
+
+		&-upper {
+			background: inherit!important;
+		}
+	}
+	&-z-index {
+		z-index: 10;
+	}
+	&-vertical {
+		width: 10px;
+		height: 100%;
+
+		.noUi-origin {
+			bottom: 0;
+			left: 0;
+		}
+		.noUi-handle {
+			margin: -8px 0 0 -3px;
+		}
+	}
+	&-state-tap .noUi-origin {
+		-webkit-transition: left .3s, top .3s;
+		transition: left .3s, top .3s;
+	}
+}