Adding (hard-coded) color palette section plus a few minor style changes

2 files changed, 122 insertions, 39 deletions

diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
index f6b957df..77efdfa8 100644
--- a/web-ui/app/scss/style-guide.scss
+++ b/web-ui/app/scss/style-guide.scss
@@ -1,4 +1,5 @@
 @import "compass/css3";
+@import "styles.scss";
 
 body {
   display: block;
@@ -12,10 +13,18 @@ nav {
   width: 100%;
   background-color: #3e3a37;
   color: white;
+  opacity: 0.95;
 }
 
 ul li {
   display: inline;
+
+  a {
+    color: $primary_color;
+  }
+  a:hover {
+    color: lighten($primary_color, 15%);
+  }
 }
 
 ul.left, ul.right {
@@ -32,15 +41,33 @@ ul.right {
 
 section.guide-section {
   display: block;
-  height: 550px;
+  height: 100%;
   overflow-y: auto;
   padding: 82px 32px;
+}
 
-  &:nth-child(even) {
-    background: white
-  }
-  
-  &:nth-child(odd) {
-    background: #E5E5E3
-  }
+.color-swatch {
+  width: 160px;
+  height: 230px;
+  background-color: #344a5f;
+  border-radius: 5px;
+  display: inline-block;
+  margin-right: 15px;
 }
+
+.color-label {
+  position: relative;
+  top: 173px;
+  background-color: white;
+  border: 1px solid #eee;
+  text-align: center;
+  color: #344a5f;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  padding: 10px 0;
+}
+
+.color-name {
+  font-size: small;
+}
+
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html
index dc72b9a0..0f7b8e03 100644
--- a/web-ui/app/style-guide.html
+++ b/web-ui/app/style-guide.html
@@ -29,7 +29,7 @@
 		    </ul>
 		</nav>
 		<section id="guidelines" class="guide-section" name="guidelines">
-			Basic Guidelines section.
+			<h2>Basic Guidelines</h2>
 
 			Guidelines, guidelines, guidelines.
 			</br>
@@ -45,59 +45,115 @@
 			 </br>
 		</section>
 		<section id="colors" class="guide-section">
-			Color palette.
-			</br>
-			Color palette. Primary and secondary colors.
-			</br>
-			Color palette. Primary and secondary colors.
-			</br>
-			Color palette. Primary and secondary colors.
-			</br>
-			Color palette. Primary and secondary colors.
-			</br>
-			Color palette. Primary and secondary colors.
-			 </br>
+			<h2>Color Palette</h2>
+			</br>
+			<div class="color-grid">
+				<div class="color-swatch" style="background-color: #EF4E2F">
+					<p class="color-label">
+						<span class="color-name">PRIMARY COLOR</span>
+						<br>#EF4E2F
+					</p>
+				</div>
+				<div class="color-swatch" style="background-color: #3E3A37">
+					<p class="color-label">
+						<span class="color-name">SECONDARY COLOR</span>
+						<br>#3E3A37
+					</p>
+				</div>
+				<div class="color-swatch" style="background-color: #EAEAEA">
+					<p class="color-label">
+						<span class="color-name">TOP PANE</span>
+						<br>#EAEAEA
+					</p>
+				</div>
+				<div class="color-swatch" style="background-color: #F2F3ED">
+					<p class="color-label">
+						<span class="color-name">CONTRAST</span>
+						<br>#F2F3ED
+					</p>
+				</div>
+			</div>
+			<br>
+			<div class="color-grid">
+				<div class="color-swatch" style="background-color: #2DAB49">
+					<p class="color-label">
+						<span class="color-name">SUCCESS</span>
+						<br>#2DAB49
+					</p>
+				</div>
+				<div class="color-swatch" style="background-color: #F6A40A">
+					<p class="color-label">
+						<span class="color-name">ATTENTION</span>
+						<br>#F6A40A
+					</p>
+				</div>
+				<div class="color-swatch" style="background-color: #F7E8AF">
+					<p class="color-label">
+						<span class="color-name">WARNING</span>
+						<br>#F7E8AF
+					</p>
+				</div>
+				<div class="color-swatch" style="background-color: #D72A25">
+						<p class="color-label">
+							<span class="color-name">ERROR</span>
+							<br>#D72A25
+						</p>
+				</div>
+				<div class="color-swatch" style="background-color: #FFEF29">
+					<p class="color-label">
+						<span class="color-name">SEARCH HIGHLIGHT</span>
+						<br>#FFEF29
+					</p>
+				</div>
+				<div class="color-swatch" style="background-color: #C0B9B9">
+					<p class="color-label">
+						<span class="color-name">COUNT BACKGROUND</span>
+						<br>#C0B9B9
+					</p>
+				</div>
+			</div>
 		</section>
 		<section id="typography" class="guide-section">
-			Typography. Basic references to typefaces and sizes.
+			<h2>Typography</h2>
+
 			</br>
-			Typography.
+			Typography. Basic references to typefaces and sizes.
 			</br>
-			Typography.
+			Typography. Basic references to typefaces and sizes.
 			</br>
-			Typography.
+			Typography. Basic references to typefaces and sizes.
 			</br>
-			Typography.
+			Typography. Basic references to typefaces and sizes.
 			</br>
-			Typography.
+			Typography. Basic references to typefaces and sizes.
 			 </br>
 		</section>
 		<section id="components" class="guide-section" name="components">
-			Example of components, such as warnings, modals, buttons, etc..
+			<h2>Components</h2>
 			</br>
-			Components.
+			Example of components, such as warnings, modals, buttons, etc..
 			</br>
-			Components.
+			Example of components, such as warnings, modals, buttons, etc..
 			</br>
-			Components.
+			Example of components, such as warnings, modals, buttons, etc..
 			</br>
-			Components.
+			Example of components, such as warnings, modals, buttons, etc..
 			</br>
-			Components.
+			Example of components, such as warnings, modals, buttons, etc..
 			 </br>
 		</section>
 		<section id="icons" class="guide-section" name="icons">
-			Icons - style and usage.
+			<h2>Icons</h2>
 			</br>
-			Icons.
+			Icons - style and usage.
 			</br>
-			Icons.
+			Icons - style and usage.
 			</br>
-			Icons.
+			Icons - style and usage.
 			</br>
-			Icons.
+			Icons - style and usage.
 			</br>
-			Icons.
+			Icons - style and usage.
 			 </br>
 		</section>
 	</div>