Configbar yellow skin change + minor sass refactory

Michel Felipe
1 parent 0a0686be
Showing 2 changed files with 40 additions and 7 deletions Show diff stats
src/app/profile/configbar.scss
themes/angular-participa-consulta/app/layout/scss/skins/_yellow.scss
@@ -58,9 +58,12 @@
 	}
  
 	.section-title {
-		font-size: 15px;
-	  font-weight: bold;
 	  margin: 30px 0 5px;
+		font: {
+			size: 15px;
+	  	weight: bold;
+		}
+
 	}
  
 	#config-tool-options {
@@ -76,16 +79,21 @@
 		ul {
 			list-style: none;
 			border-radius: 2px;
-		  background-clip: padding-box;
-		  background-color: #f1f3f2;
 		  padding: 0;
  
+		  background: {
+				clip: padding-box;
+		  	color: #f1f3f2;
+			}
+
 			li {
-				font-size: 13px;
-			  font-weight: 300;
 			  padding: 10px;
 				width: 250px;
 			  min-height: 50px;
+				font: {
+					size: 13px;
+			  	weight: 300;
+				}
  
 				.checkbox {
 					margin: 0;
+$yellow-hover: #f5b025;
+$yellow-base: #f9c404;
+
 .skin-yellow {
   @extend %skin-base;
  
@@ -49,7 +52,7 @@
  
   .container-fluid .navbar-header .navbar-toggle {
     &:hover, &:focus {
-      background-color: #f5b025;
+      background-color: $yellow-hover;
     }
   }
  
@@ -61,4 +64,26 @@
 		}
   }
  
+  #config-tool {
+
+    #config-tool-cog {
+      color: $yellow-hover;
+    }
+
+    #config-tool-options {
+      h4 {
+        color: #2c3e50;
+        font-weight: bold;
+      }
+    }
+
+    &.closed {
+      #config-tool-cog {
+        &:hover {
+          background-color: $yellow-hover;
+        }
+      }
+    }
+  }
+
 }
...	...	@@ -58,9 +58,12 @@
58	58	}
59	59
60	60	.section-title {
61		- font-size: 15px;
62		- font-weight: bold;
63	61	margin: 30px 0 5px;
	62	+ font: {
	63	+ size: 15px;
	64	+ weight: bold;
	65	+ }
	66	+
64	67	}
65	68
66	69	#config-tool-options {
...	...	@@ -76,16 +79,21 @@
76	79	ul {
77	80	list-style: none;
78	81	border-radius: 2px;
79		- background-clip: padding-box;
80		- background-color: #f1f3f2;
81	82	padding: 0;
82	83
	84	+ background: {
	85	+ clip: padding-box;
	86	+ color: #f1f3f2;
	87	+ }
	88	+
83	89	li {
84		- font-size: 13px;
85		- font-weight: 300;
86	90	padding: 10px;
87	91	width: 250px;
88	92	min-height: 50px;
	93	+ font: {
	94	+ size: 13px;
	95	+ weight: 300;
	96	+ }
89	97
90	98	.checkbox {
91	99	margin: 0;
...	...
	1	+$yellow-hover: #f5b025;
	2	+$yellow-base: #f9c404;
	3	+
1	4	.skin-yellow {
2	5	@extend %skin-base;
3	6
...	...	@@ -49,7 +52,7 @@
49	52
50	53	.container-fluid .navbar-header .navbar-toggle {
51	54	&:hover, &:focus {
52		- background-color: #f5b025;
	55	+ background-color: $yellow-hover;
53	56	}
54	57	}
55	58
...	...	@@ -61,4 +64,26 @@
61	64	}
62	65	}
63	66
	67	+ #config-tool {
	68	+
	69	+ #config-tool-cog {
	70	+ color: $yellow-hover;
	71	+ }
	72	+
	73	+ #config-tool-options {
	74	+ h4 {
	75	+ color: #2c3e50;
	76	+ font-weight: bold;
	77	+ }
	78	+ }
	79	+
	80	+ &.closed {
	81	+ #config-tool-cog {
	82	+ &:hover {
	83	+ background-color: $yellow-hover;
	84	+ }
	85	+ }
	86	+ }
	87	+ }
	88	+
64	89	}
...	...