govuk_elements_rails 0.3.0 → 1.1.2

data/vendor/assets/stylesheets/elements/_helpers.scss

@@ -1,16 +1,9 @@
 // Helpers
 // ==========================================================================
-// GOV.UK front end toolkit dependencies
-@import "colours";
-@import "shims";
-@import "measurements";
-@import "typography";
-@import "css3";
-@import "url-helpers";
 
 // Path to assets for use with file-url() is not already defined
 @if ($path == false) {
-    $path: "/public/images/";
+  $path: "/public/images/";
 }
 
 // Return ems from a pixel value
@@ -33,13 +26,14 @@
 
 }
 
-// Used to space the "back" link on example pages
-.example-back-link {
-  @include inline-block;
-  margin-top: $gutter;
+// Hide for both screenreaders and browsers
+.hidden {
+  display: none;
+  visibility: hidden;
 }
 
 // Hide, but not for screenreaders
+.visually-hidden,
 .visuallyhidden {
   position: absolute;
   overflow: hidden;

data/vendor/assets/stylesheets/elements/_icons.scss

@@ -1,246 +1,102 @@
-// GOV.UK icons
-// GOV.UK front end toolkit dependencies
-@import "device-pixels";
+// Icons
+// ==========================================================================
 
-.icon {
-  background-position: 0 0;
-  background-repeat: no-repeat;
-}
+// Icon mixin
+@mixin icon($icon-name, $icon-width, $icon-height, $icon-sub-folder:false) {
 
-.icon-calendar {
-  width: 27px;
-  height: 27px;
-  background-image: file-url("icons/icon-calendar.png");
+  width: #{$icon-width}px;
+  height: #{$icon-height}px;
 
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-calendar-2x.png");
-    background-size: 100%;
-  }
-}
+  @if $icon-sub-folder {
+    background-image: file-url("icons/#{$icon-sub-folder}/#{$icon-name}.png");
 
-.icon-download {
-  width: 30px;
-  height: 39px;
-  background-image: file-url("icons/icon-file-download.png");
+    @include device-pixel-ratio() {
+      background-image: file-url("icons/#{$icon-sub-folder}/#{$icon-name}-2x.png");
+      background-size: 100%;
+    }
 
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-file-download-2x.png");
-    background-size: 100%;
-  } 
-}
+  } @else {
+    background-image: file-url("icons/#{$icon-name}.png");
 
-.icon-important {
-  width: 34px;
-  height: 34px;
-  background-image: file-url("icons/icon-important.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-important-2x.png");
-    background-size: 100%;
-  }
-}
-
-.icon-information {
-  width: 27px;
-  height: 27px;
-  background-image: file-url("icons/icon-information.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-information-2x.png");
-    background-size: 100%;
+    @include device-pixel-ratio() {
+      background-image: file-url("icons/#{$icon-name}-2x.png");
+      background-size: 100%;
+    }
   }
 }
 
-.icon-locator {
-  width: 26px;
-  height: 36px;
-  background-image: file-url("icons/icon-locator.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-locator-2x.png");
-    background-size: 100%;
-  }
-}
-
-.icon-search {
-  width: 30px;
-  height: 22px;
-  background-color: $black;
-  background-image: file-url("icons/icon-search.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-search-2x.png");
-    background-size: 100%;
-  }
-}
-
-// GOV.UK arrow icons
-.icon-pointer {
-  width: 30px;
-  height: 19px;
-  background-color: $black;
-  background-image: file-url("icons/icon-pointer.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-pointer-2x.png");
-    background-size: 100%;
-  }
-}
-
-.icon-pointer-black {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-pointer-black.png");
+.icon {
+  display: inline-block;
 
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-pointer-black-2x.png");
-    background-size: 100%;
-  }
+  background-position: 0 0;
+  background-repeat: no-repeat;
 }
 
-// GOV.UK external link icons
-// TODO (Are these provided by the template?)
-
-// GOV.UK step icons
-.icon-step-1 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-1.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-1-2x.png");
-    background-size: 100%;
-  }
+// GOV.UK front end toolkit icons
+.icon-calendar {
+  @include icon(icon-calendar, 27, 27);
 }
 
-.icon-step-2 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-2.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-2-2x.png");
-    background-size: 100%;
-  }
+.icon-file-download {
+  @include icon(icon-file-download, 30, 39);
 }
 
-.icon-step-3 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-3.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-3-2x.png");
-    background-size: 100%;
-  }
+.icon-important {
+  @include icon(icon-important, 35, 35);
 }
 
-.icon-step-4 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-4.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-4-2x.png");
-    background-size: 100%;
-  }
+.icon-information {
+  @include icon(icon-information, 27, 27);
 }
 
-.icon-step-5 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-5.png");
-  
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-5-2x.png");
-    background-size: 100%;
-  }
+.icon-locator {
+  @include icon(icon-locator, 26, 36);
 }
 
-.icon-step-6 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-6.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-6-2x.png");
-    background-size: 100%;
-  }
+.icon-pointer {
+  @include icon(icon-pointer, 30, 19);
 }
 
-.icon-step-7 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-7.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-7-2x.png");
-    background-size: 100%;
-  }
+.icon-pointer-black {
+  @include icon(icon-pointer-black, 23, 23);
 }
 
-.icon-step-8 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-8.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-8-2x.png");
-    background-size: 100%;
-  }
+.icon-search {
+  @include icon(icon-search, 30, 22);
 }
 
-.icon-step-9 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-9.png");
 
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-9-2x.png");
-    background-size: 100%;
+// GOV.UK step icons
+@for $i from 1 through 14 {
+  .icon-step-#{$i} {
+    @include icon(icon-step-#{$i}, 23, 23, icon-steps);
   }
 }
 
-.icon-step-10 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-10.png");
+// Propose replacing step icons with circles
+.circle {
+  display: inline-block;
+  @include border-radius(50%);
 
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-10-2x.png");
-    background-size: 100%;
-  }
-}
+  background: $black;
+  color: $white;
 
-.icon-step-11 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-11.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-11-2x.png");
-    background-size: 100%;
-  }
+  font-family: $NTA-Light-Tabular;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
 }
 
-.icon-step-12 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-12.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-12-2x.png");
-    background-size: 100%;
-  }
+// All step circles are 24px x 24px
+.circle-step {
+  min-width: 24px;
+  min-height: 24px;
+  line-height: 24px;
 }
 
-.icon-step-13 {
-  width: 23px;
-  height: 23px;
-  background-image: file-url("icons/icon-steps/icon-step-13.png");
-
-  @include device-pixel-ratio() {
-    background-image: file-url("icons/icon-steps/icon-step-13-2x.png");
-    background-size: 100%;
-  }
+.circle-step-large {
+  font-size: 19px;
+  min-width: 38px;
+  min-height: 38px;
+  line-height: 38px;
 }

data/vendor/assets/stylesheets/elements/_layout.scss

@@ -1,14 +1,6 @@
 // Layout
 // ==========================================================================
 
-// GOV.UK front end toolkit dependencies
-@import "measurements";
-@import "conditionals";
-@import "grid_layout";
-@import "helpers";
-@import "design-patterns/alpha-beta";
-
-
 // Content
 // ==========================================================================
 
@@ -17,21 +9,13 @@
   @extend %site-width-container;
   @extend %contain-floats;
   padding-bottom: $gutter;
-  
+
   @include media(desktop) {
     padding-bottom: $gutter*3;
   }
 }
 
 
-// Phase banner
-// ==========================================================================
-
-.phase-banner {
-  @include phase-banner(alpha);
-}
-
-
 // Grid layout
 // ==========================================================================
 
@@ -39,10 +23,10 @@
 // For two equal columns
 
 // <div class="grid-row">
-//   <div class="column-half">
+//   <div class="column-one-half">
 //
 //   </div>
-//   <div class="column-half">
+//   <div class="column-one-half">
 //
 //   </div>
 // </div>
@@ -54,15 +38,18 @@
 
 // Use .grid-column to create a grid column with 15px gutter
 // By default grid columns break to become full width at tablet size
-.column-quarter {
+.column-quarter,
+.column-one-quarter {
   @include grid-column(1/4);
 }
 
-.column-half {
+.column-half,
+.column-one-half {
   @include grid-column(1/2);
 }
 
-.column-third {
+.column-third,
+.column-one-third {
   @include grid-column(1/3);
 }
 

data/vendor/assets/stylesheets/elements/_lists.scss

@@ -4,7 +4,16 @@
 ul,
 ol {
   list-style-type: none;
+}
+
+.list {
   padding: 0;
+  margin-top: 5px;
+  margin-bottom: 20px;
+}
+
+.list li {
+  margin-bottom: 5px;
 }
 
 // Bulleted lists
@@ -17,20 +26,8 @@ ol {
 .list-number {
   list-style-type: decimal;
   padding-left: 20px;
-  
+
   @include ie-lte(7) {
     padding-left: 28px;
   }
 }
-
-.list-bullet,
-.list-number {
-  margin-top: 5px;
-  margin-bottom: 20px;
-}
-
-.list-bullet li,
-.list-number li {
-  margin-bottom: 5px;
-}
-