Create highlight styles

* Create big number and big message styles for use with highlight * Create highlight styles for dashboards
alphagov · Jan 21, 2014 · 502d1f7 · 502d1f7
1 parent 2a87526
commit 502d1f7
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 0 deletions.
diff --git a/app/assets/stylesheets/_theme.css.scss b/app/assets/stylesheets/_theme.css.scss
@@ -6,6 +6,10 @@ $default-vertical-margin: $line-height-base * $font-size-base;
 // Colours
 $link-color-visited       : #609; /* Purple */
 
+// From https://www.gov.uk/service-manual/user-centered-design/resources/colour-palettes
+$turquoise                : #28a197;
+$orange                   : #f47738;
+
 $good-HTTP-status-color    : #dfd; /* Green */
 $bad-HTTP-status-color     : #fdd; /* Red */
 $default-HTTP-status-color : #eee; /* Grey */

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
@@ -304,6 +304,19 @@ thead .table-header-secondary td {
   font-size: $font-size-large;
 }
 
+.big-message {
+  font-size: $font-size-h1;
+  font-weight: bold;
+}
+
+.big-number {
+  font-size: $font-size-h1 * 1.5;
+  font-weight: bold;
+}
+
+/* No content
+   ========================================================================== */
+
 .no-content {
   color: lighten($gray-light, 20%); // Large text needs a lighter colour for balance
   font-size: $font-size-base * 2;
@@ -317,6 +330,29 @@ thead .table-header-secondary td {
   border-radius: $border-radius-base;
 }
 
+/* Highlights
+   ========================================================================== */
+
+.highlight {
+  background: #aaa;
+  text-align: center;
+  padding: 2 * $default-vertical-margin;
+  color: #fff;
+  font-size: $font-size-base * 1.5;
+}
+
+.highlight > p:last-child {
+  margin-bottom: 0;
+}
+
+.highlight-turquoise {
+  background-color: $turquoise;
+}
+
+.highlight-orange {
+  background-color: $orange;
+}
+
 /* ==========================================================================
    Forms
    ========================================================================== */

diff --git a/app/views/style/index.html.erb b/app/views/style/index.html.erb
@@ -233,6 +233,46 @@
 </div>
 <hr>
 
+<h2>Big number</h2>
+<p class="big-number text-muted">100 hits</p>
+<hr>
+
+<h2>Big message</h2>
+<p class="big-message text-muted">A big message</p>
+<hr>
+
+<h2>Highlights</h2>
+<div class="row add-bottom-margin">
+  <p class="col-md-6 lead">Highlights are a reproduction of the <a href="https://www.gov.uk/vat-rates">GOV.UK answer style</a> and use colours from the <a href="https://www.gov.uk/service-manual/user-centered-design/resources/colour-palettes">style guide palette</a>. They are predominantly used on dashboards to highlight the transition status, time to or from transition and transition dates.</p>
+  <div class="col-md-6">
+    <div class="highlight add-bottom-margin">
+      <p>Some highlighted text</p>
+    </div>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-4">
+    <div class="highlight add-bottom-margin">
+      <span class="big-number">140 days</span>
+      <p>since transition<br />on 14 January 2013</p>
+    </div>
+  </div>
+  <div class="col-md-4">
+    <div class="highlight">
+      <p class="big-message">A big message in a highlight</p>
+    </div>
+  </div>
+  <div class="col-md-4">
+    <div class="highlight highlight-turquoise">
+      <p class="big-message">Turquoise &amp; Live</p>
+    </div>
+    <div class="highlight highlight-orange">
+      <p class="big-message">Orange &amp; Pre-transition</p>
+    </div>
+  </div>
+</div>
+<hr>
+
 <h2>No content</h2>
 <div class="row">
   <p class="col-md-6 lead">A large but light style which applies to the empty state, eg when there are no mappings or hits. The bordered version mimics bootstrap table styles.</p>