summaryrefslogtreecommitdiff
path: root/web-ui/app/style-guide.html
diff options
context:
space:
mode:
authorGabriel Albo <gabriel@albo.com.br>2014-08-20 18:15:29 -0300
committerGabriel Albo <gabriel@albo.com.br>2014-08-20 18:15:29 -0300
commit8a69c04dd7c9abefdf2ee1f032d21e3553c5f2a4 (patch)
treef4a0585bdbc2e37b33e83ddc97f4f87147aea259 /web-ui/app/style-guide.html
parent27ebf2d416df50513c19d83472e999530c9ce568 (diff)
Fixing hard-coded colors and typefaces for the style guide; adding the action_buttons color variable
Diffstat (limited to 'web-ui/app/style-guide.html')
-rw-r--r--web-ui/app/style-guide.html28
1 files changed, 14 insertions, 14 deletions
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>