quattro: cleanup and split of less files

1 files changed, 212 insertions, 0 deletions

diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
new file mode 100644
index 000000000..4c4a002f3
--- /dev/null
+++ b/view/theme/quattro/quattro.less
@@ -0,0 +1,212 @@
+// Quattro Theme LESS file
+
+/* global */
+body {
+	font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
+	font-size: 12px;
+	background-color: @BodyBackground;
+	color: @BodyColor;
+	margin: 0px;
+	display:table-row;
+}
+
+.shadow(@x: 0px, @y: 5px){
+   -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
+   -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
+   box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
+}
+
+.rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){
+	-moz-border-radius: @arguments;
+	-webkit-border-radius: @arguments;
+	border-radius: @arguments;
+}
+
+.roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); }
+.roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); }
+
+a, a:link { color: @Link; text-decoration: none; }
+a:visited { color: @LinkVisited; text-decoration: none; }
+a:hover {color: @LinkHover; text-decoration: underline; }
+
+.left { float: left; }
+.right { float: right; }
+
+/* icons */
+
+
+.icons(@size: 22) {
+	&.notify { background-image: url("../../../images/icons/notify_off_@{size}.png"); }
+	&.gear 	 { background-image: url("../../../images/icons/gear_@{size}.png"); }
+}
+
+
+.icon {
+	background-color: transparent ;
+	background-repeat: no-repeat;
+	background-position: center center;
+	display: block;
+	overflow: hidden;
+	text-indent: -9999px;
+
+	&.s22 {
+		width:22px; height: 22px;
+		padding: 1px;
+		.icons(22);
+	}
+	
+}
+
+
+
+/* header */
+header {
+	position: fixed; left: 43%; right: 43%; top: 0px;
+	margin: 0px; padding: 0px;
+	/*width: 100%; height: 12px; */
+	z-index: 110;
+	color: @Grey1;
+	#site-location {
+		display: none;
+	}
+	
+	#banner {
+		
+	    text-align: center;
+		width: 100%;
+		a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
+		#logo-img { height: 22px; margin-top:5px;}
+		#logo-text { font-size: 22px }
+	}
+}
+/* nav */
+nav { 
+	width: 100%; height: 32px;
+	position: fixed; left: 0px; top: 0px;
+	padding: 0px;
+	background-color: @NavbarBackground;
+	color: @Grey1;
+	z-index: 100;
+	.shadow(0px, 0px);
+
+		a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
+
+		ul {
+			margin: 0px;
+			padding: 0px 20px;
+			li { 
+				list-style: none; 
+				margin: 0px; padding: 0px;
+				float: left;
+				.menu-popup{ left: 0px; right: auto; }
+			}
+			
+		}
+
+		.nav-menu-icon {
+			position: relative;
+			height: 22px;
+			padding: 5px;
+			margin: 0px 10px;
+			.roundtop();
+			
+			&.selected {
+				background-color: @NavbarSelectedBg;
+			}
+			
+				img { width: 22px; height: 22px; }
+				.nav-notify { top: 3px; }
+		}
+
+		.nav-menu {
+			position: relative;
+			height: 16px;
+			padding: 5px;
+			margin: 3px 15px 0px;
+			font-size: 14px;
+			border-bottom: 3px solid @NavbarBackground;
+			&.selected {
+				border-bottom: 3px solid @NavbarSelectedBorder;
+			}
+			
+		}
+
+		.nav-notify {
+			display: none;
+			position: absolute;
+			background-color: @NavbarNotifBg;
+			.rounded();
+			font-size: 10px;
+			padding: 1px 3px;
+			top: 0px;
+			right: -10px;
+			min-width: 15px;
+			text-align: right;
+			
+				&.show{ display: block; }
+		}
+		
+		
+		#nav-help-link,
+		#nav-search-link,
+		#nav-directory-link,
+		#nav-apps-link,
+		#nav-site-linkmenu { 
+			float: right;
+			.menu-popup{ right: 0px; left: auto; }
+		}
+	
+		#nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/notify_on_22.png") }
+		#nav-apps-link.selected { background-color: @NavbarSelectedBg; }
+}
+
+
+ul.menu-popup {
+	position: absolute;
+	display: none;
+	width: 10em;
+	background: @MenuBg;
+	color: @Menu;
+	margin: 0px;
+	padding: 0px;
+	list-style: none;
+	border: 3px solid @MenuBorder;
+	z-index: 100000;
+	
+	.shadow();
+	
+		a { display: block; color: @Grey5; padding: 5px 10px;}
+		a:hover { background-color: @Metalic1; }
+		.menu-sep  { border-top: 1px solid @Metalic2; }
+		li { float: none;  overflow: auto; height: auto; display: block; }
+		
+		.empty {
+			padding: 5px;
+			text-align: center;
+			color: @Metalic2;
+		}
+}
+
+#nav-notifications-menu {
+	width: 400px;
+	img { float: left; margin-right: 5px; }
+	.contactname { font-weight: bold; }
+	.notif-when { font-size: 10px; color: @Metalic2; display: block; }
+}
+
+
+
+
+/* aside */
+aside { 
+	display: table-cell;
+	width: 200px;
+	padding:50px 10px 0px 20px;
+}
+
+/* section */
+section { 
+	display: table-cell;
+	width: 800px;
+	padding:50px 20px 0px 10px;
+}