src/pyams_skin/resources/less/menus.less
changeset 0 bb4aabe07487
child 66 7a2d69fe8f6c
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_skin/resources/less/menus.less	Thu Feb 19 10:59:00 2015 +0100
@@ -0,0 +1,768 @@
+/*
+ * Menus styles
+ */
+
+nav {
+	padding-top: 40px;
+
+	ul {
+		width: 100%;
+		padding: 40px 28px 25px 0;
+		padding: 0;
+		margin: 0;
+		font-size: 13px;
+		line-height: .5em;
+		list-style: none;
+		position: relative;
+		background-color: #627685;
+
+		li {
+			overflow: hidden;
+
+			&.divider {
+				height: 20px;
+				border: 0;
+			}
+			&.header {
+				font-family: "Ubuntu-Light", Arial, Helvetica, sans-serif;
+				font-size: 14px;
+				font-weight: bold;
+				color: #eee;
+				background-color: #b13510;
+				border-top-color: #d44918;
+				border-bottom-color: #a13812;
+				padding: 4px 10px 4px 20px;
+				line-height: 18px;
+
+				&:not(:first-child) {
+					margin-top: 10px;
+				}
+				.minified #left-panel & {
+					padding: 5px;
+					color: #b94015;
+					line-height: 0;
+					max-height: 10px;
+					overflow: hidden;
+				}
+			}
+			a {
+				line-height: normal;
+				font-size: 14px;
+				padding: 10px 10px 10px 11px;
+				color: #f4e8cf;
+				display: block;
+				font-weight: 400;
+				text-decoration: none!important;
+				position: relative;
+			}
+			a:active {
+				background: #616161!important;
+			}
+			a:focus {
+				color: #c9c9c9;
+			}
+			a:hover {
+				color: #fff;
+				text-decoration: none;
+			}
+			&.active {
+				>a {
+					background-color: #627685;
+					color: #fff!important;
+					position: relative;
+
+					&:before {
+						content: "\f0d9";
+						font-family: FontAwesome;
+						display: block;
+						height: 27px;
+						line-height: 14px;
+						width: 27px;
+						position: absolute;
+						right: -21px;
+						font-size: 20px;
+						color: #eee;
+					}
+				}
+				&.open >a {
+					&:before {
+						content: "";
+					}
+					&.active:before {
+						content: "\f0d9";
+					}
+				}
+			}
+			li {
+				border-bottom: 0;
+				position: relative;
+			}
+		}
+		.active >a {
+			color: #fefefe!important;
+			position: relative;
+		}
+		b {
+			float: right;
+			font-size: 14px;
+			margin-top: -1px;
+		}
+		span.menu-item-parent {
+			display: inline-block;
+			margin: 0;
+			padding: 0;
+		}
+		ul {
+			margin: 0;
+			display: none;
+			background: rgba(91,103,113,0.8);
+			padding: 7px 0;
+
+			>li:hover b {
+				color: #D5D9E2;
+			}
+			li {
+				margin: 0;
+				padding: 0;
+
+				>a {
+					padding-left: 42px;
+					font-size: 12px;
+					font-weight: 400;
+					outline: 0;
+
+					&:hover {
+						background-color: #46545e;
+						color: #fff;
+					}
+					&.active {
+						margin-left: 30px;
+						padding-left: 12px;
+						background-color: #296191;
+					}
+				}
+			}
+			ul {
+				background: 0 0;
+				padding: 0;
+
+				li a {
+					color: #bfbfbf;
+					padding: 8px 10px 8px 60px;
+					font-size: 11px;
+
+					&:hover {
+						background-color: #46545e;
+						color: #fff;
+					}
+					&.active {
+						margin-left: 50px;
+						padding-left: 10px;
+					}
+				}
+				ul {
+					li a {
+						padding-left: 90px;
+
+						&.active {
+							margin-left: 80px;
+							padding-left: 10px;
+						}
+					}
+					ul {
+						li a {
+							padding-left: 110px;
+
+							&.active {
+								margin-left: 100px;
+								padding-left: 10px;
+							}
+						}
+						ul li a {
+							padding-left: 130px;
+
+							&.active {
+								margin-left: 120px;
+								padding-left: 10px;
+							}
+						}
+					}
+				}
+			}
+			b {
+				color: #B3B3B3;
+			}
+		}
+	}
+
+	>ul {
+		>li {
+			border-top: 1px solid #718999;
+			border-bottom: 1px solid #576975;
+
+			&:hover >ul::before,
+			&:hover >ul >li::before {
+				border-color: #ACACAC!important;
+			}
+			>a {
+				>.badge.pull-right {
+					margin-right: 15px;
+				}
+				b {
+					position: absolute!important;
+					right: 10px;
+					top: 10px;
+				}
+				>i {
+					margin-right: 5px;
+					width: 15px;
+					display: inline-block;
+					text-align: center;
+					position: relative;
+
+					>em {
+						font-size: 9px;
+						display: block;
+						padding: 2px;
+						position: absolute;
+						top: -8px;
+						right: -6px;
+						text-decoration: none;
+						font-style: normal;
+						background: #ED1C24;
+						color: #fff;
+						min-width: 13px;
+						border-radius: 50%;
+						max-height: 13px;
+						line-height: 8px;
+						font-weight: 700;
+						vertical-align: baseline;
+						white-space: nowrap;
+						text-align: center;
+						border: 1px solid rgba(255, 255, 255, .1);
+					}
+				}
+			}
+			>ul::before {
+				content: "";
+				display: block;
+				position: absolute;
+				z-index: 1;
+				left: 23px;
+				top: 0;
+				bottom: 0;
+				border-left: 1px solid #7A7A7A;
+			}
+			>ul >li >a,
+			>ul >li >ul >li >a {
+				padding-top: 5px;
+				padding-bottom: 5px;
+			}
+		}
+		ul {
+			li {
+				a i {
+					font-size: 14px!important;
+					width: 18px!important;
+					text-align: center!important;
+				}
+				&::before {
+					content: "";
+					display: block;
+					position: absolute;
+					width: 8px;
+					left: 23px;
+					top: 13px;
+					border-top: 1px solid #7A7A7A;
+					z-index: 1;
+				}
+			}
+			ul li::before {
+				content: "";
+				display: block;
+				position: absolute;
+				width: 18px;
+				left: 10px;
+				top: 17px;
+				border-top: 1px solid transparent;
+			}
+		}
+	}
+}
+
+.navbar-nav >li >a {
+	@media (min-width: 768px) {
+		padding-top: 17px;
+		padding-bottom: 15px;
+	}
+}
+
+.ui-menu {
+	display: block;
+	width: 155px;
+	padding: 2px;
+	-webkit-box-shadow: 0 2px 4px rgba(30, 30, 100, .25);
+	box-shadow: 0 2px 4px rgba(30, 30, 100, .25);
+	background: #fff;
+	border: 1px solid rgba(0, 0, 0, .2);
+	z-index: 1;
+	list-style: none;
+	margin: 0;
+	margin-bottom: 2em;
+	outline: 0;
+
+	.ui-menu {
+		margin-top: -3px;
+		position: absolute;
+		list-style: none;
+	}
+	.ui-menu-item {
+		margin: 0;
+		padding: 0;
+		width: 100%;
+		list-style: none;
+		list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+
+		a {
+			text-decoration: none;
+			display: block;
+			padding: 2px .4em;
+			line-height: 1.5;
+			min-height: 0;
+			font-weight: 400;
+
+			&.ui-corner-all {
+				border-radius: 0;
+			}
+			&.ui-state-active,
+			&.ui-state-focus,
+			&.ui-widget-content {
+				font-weight: 700;
+				margin: 0;
+				background-color: #428BCA;
+				border-color: #357EBD;
+				color: #FFF;
+				display: block;
+				white-space: nowrap;
+			}
+			&.ui-state-active {
+				padding: 1px .4em;
+			}
+			.ui-menu-icon {
+				width: auto;
+				height: auto;
+				top: 0;
+				left: auto;
+				right: auto;
+				bottom: auto;
+				text-indent: 0;
+			}
+		}
+	}
+	.ui-menu-divider {
+		margin: 5px -2px 5px -2px;
+		height: 0;
+		font-size: 0;
+		line-height: 0;
+		border-width: 1px 0 0;
+	}
+	.ui-state-disabled {
+		margin: .4em 0 .2em!important;
+		background: none!important;
+		color: #999!important;
+		font-weight: 400!important;
+		cursor: default;
+		line-height: 1.5;
+
+		a {
+			cursor: default;
+		}
+	}
+	.ui-menu-icons {
+		position: relative;
+
+		.ui-menu-item a {
+			position: relative;
+			padding-left: 2em;
+		}
+	}
+	.ui-icon {
+		position: absolute;
+		top: .2em;
+		left: .2em;
+	}
+	.ui-menu-icon {
+		position: static;
+		float: right;
+	}
+}
+
+.dropdown {
+	&-menu {
+		>li {
+			>a:hover {
+				background-color: #e0e0e0;
+			}
+		}
+		.open >& {
+			-webkit-animation-name: flipInX;
+			animation-name: flipInX;
+			-webkit-animation-duration: .4s;
+			animation-duration: .4s;
+			-webkit-animation-fill-mode: both;
+			animation-fill-mode: both;
+		}
+		.small {
+			&.divider {
+				margin: 3px 0;
+			}
+		}
+	}
+	&-menu-xs {
+		min-width: 37px;
+
+		>li >a {
+			padding: 3px 10px;
+
+			&:hover i {
+				color: #fff!important;
+			}
+		}
+	}
+	&-submenu {
+		position: relative;
+
+		>.dropdown-menu {
+			top: 0;
+			left: 100%;
+			margin-top: -6px;
+			margin-left: -1px;
+		}
+		&:hover >.dropdown-menu {
+			display: block;
+		}
+		>a:after {
+			display: block;
+			content: " ";
+			float: right;
+			width: 0;
+			height: 0;
+			border-color: transparent;
+			border-style: solid;
+			border-width: 5px 0 5px 5px;
+			border-left-color: #bfbfbf;
+			margin-top: 5px;
+			margin-right: -10px;
+		}
+		&:hover >a:after {
+			border-left-color: #fff;
+		}
+		&.pull-left {
+			float: none;
+
+			>.dropdown-menu {
+				left: -100%;
+				margin-left: 10px;
+			}
+		}
+	}
+}
+
+.ajax-dropdown {
+	position: absolute;
+	display: none;
+	z-index: 1003;
+	top: 48px;
+	left: 16px;
+	width: 344px;
+	height: 435px;
+	border-radius: 0;
+	-webkit-box-shadow: 0 2px 4px rgba(30, 30, 100, .25);
+	box-shadow: 0 2px 4px rgba(30, 30, 100, .25);
+	padding: 10px;
+	background: #fff;
+	border: 1px solid #b3b3b3;
+
+	@media only screen and (min-width:320px) and (max-width:479px) {
+		width: 299px;
+		height: 320px;
+		left: 0;
+		top: 49px;
+	}
+	&:after,
+	&:before {
+		bottom: 100%;
+		border: solid transparent;
+		content: " ";
+		height: 0;
+		width: 0;
+		position: absolute;
+		pointer-events: none;
+	}
+	&:before {
+		border-color: rgba(131, 131, 131, 0);
+		border-bottom-color: #838383;
+		border-width: 8px;
+		left: 50%;
+		margin-left: -8px;
+
+		@media only screen and (min-width:320px) and (max-width:479px) {
+			margin-left: -14px;
+		}
+	}
+	&:after {
+		border-color: rgba(255, 255, 255, 0);
+		border-bottom-color: #fff;
+		border-width: 7px;
+		left: 50%;
+		margin-left: -7px;
+
+		@media only screen and (min-width:320px) and (max-width:479px) {
+			margin-left: -13px;
+		}
+	}
+	>:last-child {
+		font-size: 13px;
+		display: block;
+		padding: 5px 0;
+		line-height: 22px;
+		font-weight: 400;
+	}
+	>:first-child {
+		margin: 0 0 3px;
+		padding: 0 0 9px;
+	}
+	.fa-4x.fa-border {
+		border-width: 3px;
+		border-radius: 50%;
+		display: block;
+		margin: 0 auto;
+		width: 46px;
+		text-align: center;
+		color: #D1D1D1;
+		border-color: #D1D1D1;
+	}
+	.btn-group .btn {
+		font-weight: 700;
+		text-transform: capitalize;
+	}
+	.btn-group >:nth-child(2) {
+		border-right-width: 0;
+		border-left-width: 0;
+	}
+	.btn-group .btn:active {
+		top: 0;
+		left: 0;
+	}
+	.active + & {
+		-webkit-animation-name: flipInY;
+		animation-name: flipInY;
+		-webkit-animation-duration: .7s;
+		animation-duration: .7s;
+		-webkit-animation-fill-mode: both;
+		animation-fill-mode: both;
+	}
+}
+
+.dropdown-large {
+	position: static!important;
+}
+.dropdown-menu-large {
+	margin-left: 16px;
+	margin-right: 16px;
+	padding: 20px 0;
+
+	>li >ul {
+		padding: 0;
+		margin: 0;
+
+		>li {
+			list-style: none;
+
+			>a {
+				display: block;
+				padding: 3px 20px;
+				clear: both;
+				font-weight: 400;
+				line-height: 1.428571429;
+				color: #333;
+				white-space: normal;
+			}
+		}
+	}
+	>li ul >li >a:focus,
+	>li ul >li >a:hover {
+		text-decoration: none;
+		color: #262626;
+		background-color: #f5f5f5;
+	}
+	.disabled >a,
+	.disabled >a:focus,
+	.disabled >a:hover {
+		color: #999;
+	}
+	.disabled >a:focus,
+	.disabled >a:hover {
+		text-decoration: none;
+		background-color: transparent;
+		background-image: none;
+		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+		cursor: not-allowed;
+	}
+	.dropdown-header {
+		color: #428bca;
+		font-size: 18px;
+	}
+
+	@media (max-width:768px) {
+		margin-left: 0;
+		margin-right: 0;
+
+		>li {
+			margin-bottom: 30px;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+		.dropdown-header {
+			padding: 3px 15px!important;
+		}
+	}
+}
+
+
+.wijmo-wijmenu {
+	padding: 0 20px;
+	background-color: #222;
+	background-repeat: repeat-x;
+	background-image: -webkit-linear-gradient(top, #333, #222);
+	background-image: -webkit-gradient(linear, top left, bottom left, from(#333), to(#222));
+	background-image: -webkit-linear-gradient(top, #333, #222);
+	background-image: linear-gradient(top, #333, #222);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',  endColorstr='#222222',  GradientType=0);
+	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);
+
+	.ui-state-default .wijmo-wijmenu-text {
+		color: #bfbfbf;
+	}
+	.ui-state-hover {
+		background: #444;
+		background: rgba(255, 255, 255, .05);
+
+		.wijmo-wijmenu-text {
+			color: #fff;
+		}
+	}
+	.ui-widget-header h3 {
+		position: relative;
+		margin-top: 1px;
+		padding: 0;
+	}
+	h3 a {
+		color: #fff;
+		display: block;
+		float: left;
+		font-size: 20px;
+		font-weight: 200;
+		line-height: 1;
+		margin-left: -20px;
+		margin-top: 1px;
+		padding: 8px 20px 12px;
+
+		&:hover {
+			background-color: rgba(255, 255, 255, .05);
+			color: #fff;
+			text-decoration: none;
+		}
+	}
+	.ui-widget-header {
+		border: 0;
+	}
+	.wijmo-wijmenu-parent .wijmo-wijmenu-child {
+		padding: .3em 0;
+	}
+	.wijmo-wijmenu-item {
+		margin: 0;
+		border: 0;
+
+		.wijmo-wijmenu-child {
+			background: #333;
+			border: 0;
+			margin: 0;
+			padding: 6px 0;
+			width: 160px;
+			border-radius: 0 0 6px 6px;
+			-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
+			box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
+		}
+	}
+	a.wijmo-wijmenu-link {
+		margin: 0;
+		line-height: 19px;
+		padding: 10px 10px 11px;
+		border: 0;
+		border-radius: 0;
+	}
+	.wijmo-wijmenu-child .wijmo-wijmenu-link {
+		display: block;
+		float: none;
+		padding: 4px 15px;
+		width: auto;
+	}
+	.wijmo-wijmenu-child .wijmo-wijmenu-text {
+		float: none;
+	}
+	.wijmo-wijmenu-item {
+		.wijmo-wijmenu-child .ui-state-hover {
+			background: #191919;
+		}
+		.wijmo-wijmenu-separator {
+			padding: 5px 0;
+			background-image: none;
+			background-color: #222;
+			border-top: 1px solid #444;
+			border-bottom: 0;
+			border-left: 0;
+			border-right: 0;
+		}
+		input {
+			-moz-transition: none 0s ease 0s;
+			background-color: rgba(255, 255, 255, .3);
+			border: 1px solid #111;
+			border-radius: 4px;
+			-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .25);
+			box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .25);
+			color: rgba(255, 255, 255, .75);
+			font-family: Ubuntu, Helvetica, Arial, sans-serif;
+			line-height: 1;
+			margin: 5px 10px 0;
+			padding: 4px 9px;
+			width: 100px;
+
+			&:hover {
+				background-color: rgba(255, 255, 255, .5);
+				color: #fff;
+			}
+			&:focus {
+				background-color: #fff;
+				border: 0 none;
+				-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
+				box-shadow: 0 0 3px rgba(0, 0, 0, .15);
+				color: #404040;
+				outline: 0 none;
+				padding: 5px 10px;
+				text-shadow: 0 1px 0 #fff;
+			}
+		}
+	}
+	.ui-state-default {
+		text-shadow: none;
+		-webkit-box-shadow: none;
+		box-shadow: none;
+		color: #bfbfbf;
+		-webkit-filter: none;
+		filter: none;
+	}
+}