diff options
Diffstat (limited to 'web-ui/app')
| -rw-r--r-- | web-ui/app/scss/_colors.scss | 1 | ||||
| -rw-r--r-- | web-ui/app/scss/style-guide.scss | 23 | ||||
| -rw-r--r-- | web-ui/app/style-guide.html | 28 |
3 files changed, 37 insertions, 15 deletions
diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss index 97c883a5..903ecb94 100644 --- a/web-ui/app/scss/_colors.scss +++ b/web-ui/app/scss/_colors.scss @@ -11,3 +11,4 @@ $contrast: #F2F3ED; $top_pane: #EAEAEA; $secondary: #3E3A37; $primary_color: #EF4E2F; +$action_buttons: #2ba6cb; diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss index f1b31ddd..6d73b185 100644 --- a/web-ui/app/scss/style-guide.scss +++ b/web-ui/app/scss/style-guide.scss @@ -49,7 +49,7 @@ section.guide-section { padding: 66px 32px; } -.color-swatch { +.color-card { width: 160px; height: 230px; background-color: #344a5f; @@ -77,3 +77,24 @@ section.guide-section { font-size: small; } +/* Color Cards definition */ + +.color-grid { + #primary-color-card { background-color: $primary_color; } + #secondary-color-card { background-color: $secondary;} + #top-pane-card { background-color: $top_pane;} + #contrast-card { background-color: $contrast;} + #action-buttons-card { background-color: $action_buttons; } + #success-card { background-color: $success;} + #attention-card { background-color: $attention; } + #warning-card { background-color: $warning; } + #error-card { background-color: $error; } + #search-highlight-card { background-color: $search_highlight; } + #count-background-card { background-color: $total_count_bg; } +} +/* Typeface cards definition*/ +ul.typography li h2 { + &.bold-header { font-weight: bold; } + &.extra-bold-header { font-weight: 800; } + &.lighter-header { font-weight: lighter; } +}
\ No newline at end of file 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> |