Use scss nesting & variables (#393)

* ued SCSS features

* beatify scss
* applied variables for fonts, borders, spacing
* variables fr exra sizing
* add variable for triagle
* applied scss nesting

* compiled scss to css

Author: jkowalleck

src/layout/css/style.scss

@@ -1,23 +1,33 @@
+$font-size-text: 12px;
+$font-size-h1: 24px;
+$font-size-h2: 16px;
+
+$border-width: 1px;
+
+$spacing: 5px;
+
+
+
 body {
 	font-family: Helvetica, Arial, sans-serif;
-	font-size: 12px;
+	font-size: $font-size-text;
 	/* do not increase min-width as some may use split screens */
 	min-width: 800px;
 	color: #999;
 }
 
 h1 {
-	font-size: 24px;
+	font-size: $font-size-h1;
 	color: black;
 }
 
 h2 {
-	font-size: 16px;
+	font-size: $font-size-h2;
 	color: black;
 }
 
 p {
-    color: black;
+	color: black;
 }
 
 a {
@@ -32,25 +42,40 @@ table {
  * SUMMARY INFORMATION
  ******************************/
 
-#environment td {
-	padding: 5px;
-	border: 1px solid #E6E6E6;
-}
+#environment {
+	td {
+		padding: $spacing;
+		border: $border-width solid #E6E6E6;
+	}
 
-#environment tr:nth-child(odd) {
-	background-color: #f6f6f6;
+	tr:nth-child(odd) {
+		background-color: #f6f6f6;
+	}
 }
 
 /******************************
  * TEST RESULT COLORS
  ******************************/
-span.passed, .passed .col-result {
+span.passed,
+.passed .col-result {
 	color: green;
 }
-span.skipped, span.xfailed, span.rerun, .skipped .col-result, .xfailed .col-result, .rerun .col-result {
+
+span.skipped,
+span.xfailed,
+span.rerun,
+.skipped .col-result,
+.xfailed .col-result,
+.rerun .col-result {
 	color: orange;
 }
-span.error, span.failed, span.xpassed, .error .col-result, .failed .col-result, .xpassed .col-result  {
+
+span.error,
+span.failed,
+span.xpassed,
+.error .col-result,
+.failed .col-result,
+.xpassed .col-result {
 	color: red;
 }
 
@@ -69,72 +94,85 @@ span.error, span.failed, span.xpassed, .error .col-result, .failed .col-result,
  *------------------*/
 
 #results-table {
-	border: 1px solid #e6e6e6;
+	border: $border-width solid #e6e6e6;
 	color: #999;
-	font-size: 12px;
-	width: 100%
-}
+	font-size: $font-size-text;
+	width: 100%;
 
-#results-table th, #results-table td {
-	padding: 5px;
-	border: 1px solid #E6E6E6;
-	text-align: left
-}
-#results-table th {
-	font-weight: bold
+	th,
+	td {
+		padding: $spacing;
+		border: $border-width solid #E6E6E6;
+		text-align: left;
+	}
+
+	th {
+		font-weight: bold;
+	}
 }
 
 /*------------------
  * 2. Extra
  *------------------*/
 
-.log:only-child {
-	height: inherit
-}
+$extra-height: 240px;
+$extra-media-width: 320px;
+
 .log {
 	background-color: #e6e6e6;
-	border: 1px solid #e6e6e6;
+	border: $border-width solid #e6e6e6;
 	color: black;
 	display: block;
 	font-family: "Courier New", Courier, monospace;
-	height: 230px;
+	height: $extra-height - 2 * $spacing;
 	overflow-y: scroll;
-	padding: 5px;
-	white-space: pre-wrap
+	padding: $spacing;
+	white-space: pre-wrap;
+
+	&:only-child {
+		height: inherit;
+	}
 }
+
 div.image {
-	border: 1px solid #e6e6e6;
+	border: $border-width solid #e6e6e6;
 	float: right;
-	height: 240px;
-	margin-left: 5px;
+	height: $extra-height;
+	margin-left: $spacing;
 	overflow: hidden;
-	width: 320px
-}
-div.image img {
-	width: 320px
+	width: $extra-media-width;
+
+	img {
+		width: $extra-media-width;
+	}
 }
+
 div.video {
-	border: 1px solid #e6e6e6;
+	border: $border-width solid #e6e6e6;
 	float: right;
-	height: 240px;
-	margin-left: 5px;
-	overflow: hidden;
-	width: 320px
-}
-div.video video {
+	height: $extra-height;
+	margin-left: $spacing;
 	overflow: hidden;
-	width: 320px;
-    height: 240px;
+	width: $extra-media-width;
+
+	video {
+		overflow: hidden;
+		width: $extra-media-width;
+		height: $extra-height;
+	}
 }
+
 .collapsed {
 	display: none;
 }
+
 .expander::after {
 	content: " (show details)";
 	color: #BBB;
 	font-style: italic;
 	cursor: pointer;
 }
+
 .collapser::after {
 	content: " (hide details)";
 	color: #BBB;
@@ -152,26 +190,28 @@ div.video video {
 .sort-icon {
 	font-size: 0px;
 	float: left;
-	margin-right: 5px;
-	margin-top: 5px;
+	margin-right: $spacing;
+	margin-top: $spacing;
+
 	/*triangle*/
+	$triangle-width: 8px;
 	width: 0;
 	height: 0;
-	border-left: 8px solid transparent;
-	border-right: 8px solid transparent;
-}
-
-.inactive .sort-icon {
-	/*finish triangle*/
-	border-top: 8px solid #E6E6E6;
-}
-
-.asc.active .sort-icon {
-	/*finish triangle*/
-	border-bottom: 8px solid #999;
-}
-
-.desc.active .sort-icon {
-	/*finish triangle*/
-	border-top: 8px solid #999;
+	border-left: $triangle-width solid transparent;
+	border-right: $triangle-width solid transparent;
+
+	.inactive {
+		/*finish triangle*/
+		border-top: $triangle-width solid #E6E6E6;
+	}
+
+	.asc.active {
+		/*finish triangle*/
+		border-bottom: $triangle-width solid #999;
+	}
+
+	.desc.active {
+		/*finish triangle*/
+		border-top: $triangle-width solid #999;
+	}
 }