diff options
| author | Gabriel Albo <gabriel@albo.com.br> | 2014-08-20 18:15:29 -0300 |
|---|---|---|
| committer | Gabriel Albo <gabriel@albo.com.br> | 2014-08-20 18:15:29 -0300 |
| commit | 8a69c04dd7c9abefdf2ee1f032d21e3553c5f2a4 (patch) | |
| tree | f4a0585bdbc2e37b33e83ddc97f4f87147aea259 /web-ui/app/style-guide.html | |
| parent | 27ebf2d416df50513c19d83472e999530c9ce568 (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.html | 28 |
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> |