[SUCS Devel] site r694 - branches/imranh-redesign/sass

imranh at sucs.org imranh at sucs.org
Thu Apr 23 08:53:04 BST 2015


Author: imranh
Date: 2015-04-23 08:52:55 +0100 (Thu, 23 Apr 2015)
New Revision: 694

Added:
   branches/imranh-redesign/sass/_header.scss
   branches/imranh-redesign/sass/_logo.scss
   branches/imranh-redesign/sass/_menu.scss
   branches/imranh-redesign/sass/_user-area.scss
Modified:
   branches/imranh-redesign/sass/main.scss
Log:
Start using some features of sass and compass

Added: branches/imranh-redesign/sass/_header.scss
===================================================================
--- branches/imranh-redesign/sass/_header.scss	                        (rev 0)
+++ branches/imranh-redesign/sass/_header.scss	2015-04-23 07:52:55 UTC (rev 694)
@@ -0,0 +1,14 @@
+ at import "compass/css3/images";
+
+#header {
+	height: 66px;
+	position: relative;
+	#background: linear-gradient(to bottom left, #f80, #f40);
+	@include background-image(linear-gradient(to bottom left, #f80, #f40));
+}
+
+ at import "logo.scss";
+
+ at import "menu.scss";
+
+ at import "_user-area.scss";
\ No newline at end of file

Added: branches/imranh-redesign/sass/_logo.scss
===================================================================
--- branches/imranh-redesign/sass/_logo.scss	                        (rev 0)
+++ branches/imranh-redesign/sass/_logo.scss	2015-04-23 07:52:55 UTC (rev 694)
@@ -0,0 +1,5 @@
+#logo {
+	float: left;
+	padding-left: 20px;
+	margin-top: -5px;
+}
\ No newline at end of file

Added: branches/imranh-redesign/sass/_menu.scss
===================================================================
--- branches/imranh-redesign/sass/_menu.scss	                        (rev 0)
+++ branches/imranh-redesign/sass/_menu.scss	2015-04-23 07:52:55 UTC (rev 694)
@@ -0,0 +1,80 @@
+#menu {
+	overflow: hidden;
+	position: absolute;
+	bottom: 0px;
+	left: 125px;
+
+	#menulist {
+	margin-bottom: 4px;
+	
+		li {
+			color: #fff;
+			font-weight: bold;
+			display: inline;
+			list-style-type: none;
+			padding-right: 15px;
+			padding-left: 15px;
+			#padding-top: 10px;
+			padding-bottom: 4px;
+			border-top-left-radius: 10px;
+			border-top-right-radius: 10px;
+
+			a {
+				color: #FFF;
+				text-decoration: none;
+				text-decoration: bold;
+			}
+		}
+	}
+
+	#menu-active {
+		background: #414345;
+		color: #f60;
+	}
+}
+
+#submenu {
+	position: absolute;
+	width: 100%;
+	overflow: hidden;
+	margin-top: 66px;
+
+	#submenulist {
+		-webkit-margin-before: 0em;
+		background: #414345;
+		padding-top: 6px;
+		padding-bottom: 5px;
+		padding-left: 165px;
+
+		li {
+			background: #414345;
+			color: #fff;
+			font-weight: bold;
+			display: inline;
+			list-style-type: none;
+			padding-right: 15px;
+			padding-left: 15px;
+			padding-top: 6px;
+			padding-bottom: 5px;
+
+			a {
+				color: #FFF;
+				text-decoration: none;
+				text-decoration: bold;
+			}
+		}
+
+		#submenu-active {
+			background: #E9EAED;
+			color: #414345;
+			padding-top: 4px;
+			padding-bottom: 7px;
+			border-top-right-radius: 10px;
+			border-top-left-radius: 10px;
+
+			a {
+				color: #414345;
+			}
+		}
+	}
+}
\ No newline at end of file

Added: branches/imranh-redesign/sass/_user-area.scss
===================================================================
--- branches/imranh-redesign/sass/_user-area.scss	                        (rev 0)
+++ branches/imranh-redesign/sass/_user-area.scss	2015-04-23 07:52:55 UTC (rev 694)
@@ -0,0 +1,12 @@
+#user-area {
+	text-align: right;
+	float: right;
+	color: #fff;
+	left: 100%;
+	margin-right: 10px;
+	margin-top: 15px;
+
+	#user-area a {
+		color: #fff;
+	}
+}
\ No newline at end of file

Modified: branches/imranh-redesign/sass/main.scss
===================================================================
--- branches/imranh-redesign/sass/main.scss	2015-04-23 06:17:48 UTC (rev 693)
+++ branches/imranh-redesign/sass/main.scss	2015-04-23 07:52:55 UTC (rev 694)
@@ -1,3 +1,6 @@
+ at import "compass/reset";
+ at import "compass/support";
+
 body {
 	#background: linear-gradient(#f80,#f40);
 	background: #E9EAED;
@@ -5,119 +8,12 @@
 	font-family: Arial;
 	margin: 0px;
 }
-#header {
-	#border-top-left-radius: 15px;
-	#border-top-right-radius: 15px;
-	#border: 2px solid #fff;
-	height: 66px;
-	position: relative;
-	#box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.25);
-	#background: #f60;
-	background: linear-gradient(to bottom left, #f80, #f40);
-}
-#logo {
-	float: left;
-	padding-left: 20px;
-	margin-top: -5px;
-}
-#menu {
-	overflow: hidden;
-	position: absolute; 
-	bottom: 0px;
-	left: 125px;
-}
-#menulist {
-	margin-bottom: 4px;
-}
-#menulist li {
-	color: #fff;
-	font-weight: bold;
-	display: inline;
-	list-style-type: none;
-	padding-right: 15px;
-	padding-left: 15px;
-	padding-top: 10px;
-	padding-bottom: 5px;
-	border-top-left-radius: 10px;
-	border-top-right-radius: 10px;
-}
-#menulist li a {
-	color: #FFF;
-	text-decoration: none;
-	text-decoration: bold;
-}
-#menulist #menu-active {
-	#background: #fff;
-	background: #414345;
-	color: #f60;
-}
-#submenu {
-	#-webkit-margin-before: 0em;
-	position: absolute;
-	#bottom: -45px;
-	#left: 125px;
-	width: 100%;
-	#height: 92%;
-	overflow: hidden;
-	margin-top: 66px;
-}
-#submenulist {
-	-webkit-margin-before: 0em;
-	#text-align: center;
-	background: #414345;
-	padding-top: 6px;
-	padding-bottom: 5px;
-	padding-left: 165px;
-}
-#submenulist li {
-	#background: #000;
-	background: #414345;
-	color: #fff;
-	font-weight: bold;
-	display: inline;
-	list-style-type: none;
-	padding-right: 15px;
-	padding-left: 15px;
-	padding-top: 6px;
-	padding-bottom: 5px;
-	#border-top-left-radius: 15px;
-	#border-top-right-radius: 15px;
-}
-#submenulist li a {
-	color: #FFF;
-	text-decoration: none;
-	text-decoration: bold;
-}
-#submenulist #submenu-active {
-	background: #E9EAED;
-	color: #414345;
-	padding-top: 4px;
-	padding-bottom: 7px;
-	border-top-right-radius: 10px;
-	border-top-left-radius: 10px;
-}
-#submenulist #submenu-active a {
-	color: #414345;
-}
-#user-area {
-	text-align: right;
-	float: right;
-	color: #fff;
-	#position: absolute; 
-	#bottom: 0px;
-	left: 100%;
-	margin-right: 10px;
-	margin-top: 15px;
-}
-#user-area a {
-	color: #fff;
-}
+
+ at import "_header.scss";
+
 #bodyer {
 	background: #E9EAED;
 	height: 87%;
-	#width: 96.0%;
-	#position: absolute;
-	#box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.25);
 	margin-top: 30px;
 	padding-top: 1.25%;
 	padding-left: 2.5%;
@@ -125,12 +21,10 @@
 }
 #bodyer .panel {
 	padding: 20px 20px 20px 20px;
-	#box-shadow: 1px 5px 10px 5px #888888;
 	background: #fff;
 	border-radius: 2px;
 	border: 0px;
 	box-shadow: 0 1px 6px 0 rgba(0,0,0,.12),0 1px 6px 0 rgba(0,0,0,.12);
-	#margin-right: 75px;
 }
 #bodyer #leftside {
 	width: 70%;
@@ -139,8 +33,6 @@
 #bodyer #bottomleftside {
 	float: left;
 	margin-top: 15px;
-	#display: flex;
-	#justify-content: center;
 	display: inline-flex;
 }
 #bodyer #bottomleftsidebox {
@@ -160,6 +52,4 @@
 #footer {
 	display: none;
 	visibility: hidden;
-	#background: #f80;
-	#box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.25);
 }
\ No newline at end of file




More information about the Devel mailing list