Added explanatory icons to the toggles

- they indicate the type
jbremer · Apr 5, 2017 · e6d3eb2 · e6d3eb2
1 parent 9719632
commit e6d3eb2
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 47 deletions.
diff --git a/cuckoo/web/src/scss/components/_cuckoo-analysis.scss b/cuckoo/web/src/scss/components/_cuckoo-analysis.scss
@@ -196,25 +196,18 @@
 			padding: 15px;
 			font-weight: 700;
 
-			.warning & {
-				color: #8A6D40;
-			}
-
-			.info & {
-				color: #31708f;
-			}
-
-			.danger & {
-				color: #A94441;
-			}
-
 			&:hover,
 			&:focus,
 			&:active {
 				background-color: rgba(0,0,0,.05);
 				text-decoration: none !important;
 			}
 
+			&:before {
+				@extend .fa;
+				margin-right: 5px;
+			}
+
 			&:after {
 				@extend .fa;
 				float: right;
@@ -225,6 +218,22 @@
 			&[aria-expanded="true"]:after {
 				content: "\f078";
 			}
+
+			.warning & {
+				color: #8A6D40;
+				&:before { content: "\f06a"; }
+			}
+
+			.info & {
+				color: #31708f;
+				&:before { content: "\f05a"; }
+			}
+
+			.danger & {
+				color: #A94441;
+				&:before { content: "\f057"; }
+			}
+
 		}
 
 		&--body {