summaryrefslogtreecommitdiff
path: root/web-ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui/app')
-rw-r--r--web-ui/app/scss/_colors.scss1
-rw-r--r--web-ui/app/scss/style-guide.scss23
-rw-r--r--web-ui/app/style-guide.html28
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>