From 8a69c04dd7c9abefdf2ee1f032d21e3553c5f2a4 Mon Sep 17 00:00:00 2001
From: Gabriel Albo <gabriel@albo.com.br>
Date: Wed, 20 Aug 2014 18:15:29 -0300
Subject: Fixing hard-coded colors and typefaces for the style guide; adding
 the action_buttons color variable

---
 web-ui/app/style-guide.html | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

(limited to 'web-ui/app/style-guide.html')

diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html
index 39a4cdfe..354d9307 100644
--- a/web-ui/app/style-guide.html
+++ b/web-ui/app/style-guide.html
@@ -48,31 +48,31 @@
 			<h2>Color Palette</h2>
 			</br>
 			<div class="color-grid">
-				<div class="color-swatch" style="background-color: #EF4E2F">
+				<div id="primary-color-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">PRIMARY COLOR</span>
 						<br>#EF4E2F
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #3E3A37">
+				<div id="secondary-color-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">SECONDARY COLOR</span>
 						<br>#3E3A37
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #EAEAEA">
+				<div id="top-pane-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">TOP PANE</span>
 						<br>#EAEAEA
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #F2F3ED">
+				<div id="contrast-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">CONTRAST</span>
 						<br>#F2F3ED
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #2ba6cb">
+				<div id="action-buttons-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">ACTION BUTTONS</span>
 						<br>#2ba6cb
@@ -82,37 +82,37 @@
 			<br>
 
 			<div class="color-grid">
-				<div class="color-swatch" style="background-color: #2DAB49">
+				<div id="success-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">SUCCESS</span>
 						<br>#2DAB49
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #F6A40A">
+				<div id="attention-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">ATTENTION</span>
 						<br>#F6A40A
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #F7E8AF">
+				<div id="warning-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">WARNING</span>
 						<br>#F7E8AF
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #D72A25">
+				<div id="error-card" class="color-card">
 						<p class="color-label">
 							<span class="color-name">ERROR</span>
 							<br>#D72A25
 						</p>
 				</div>
-				<div class="color-swatch" style="background-color: #FFEF29">
+				<div id="search-highlight-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">SEARCH HIGHLIGHT</span>
 						<br>#FFEF29
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #C0B9B9">
+				<div id="count-background-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">COUNT BACKGROUND</span>
 						<br>#C0B9B9
@@ -132,15 +132,15 @@
 					<span>Regular</span>
 				</li>
 				<li>
-					<h2 style="font-weight: bold;">Aa</h2>
+					<h2 class="bold-header">Aa</h2>
 					<span>Bold</span>
 				</li>
 				<li>
-					<h2 style="font-weight: 800;">Aa</h2>
+					<h2 class="extra-bold-header">Aa</h2>
 					<span>Extra Bold</span>
 				</li>
 				<li>
-					<h2 style="font-weight: lighter;">Aa</h2>
+					<h2 class="lighter-header">Aa</h2>
 					<span>Lighter</span>
 				</li>
 		</section>
-- 
cgit v1.2.3