From c2079b687ee88632f24fdf31a251c11f7d695a13 Mon Sep 17 00:00:00 2001
From: Gabriel Albo <gabriel@albo.com.br>
Date: Tue, 19 Aug 2014 14:43:02 -0300
Subject: Adding (hard-coded) color palette section plus a few minor style
 changes

---
 web-ui/app/style-guide.html | 118 ++++++++++++++++++++++++++++++++------------
 1 file changed, 87 insertions(+), 31 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 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>
-- 
cgit v1.2.3