govuk_elements_rails 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 85648682a9e22e34cd2e42af89725178d104b997
-  data.tar.gz: 827a92dcc7d95e073db4e2590bbe28ffbbb4ca22
+  metadata.gz: ed73a5758d285ea9ec1e7a0421286d74ea2792f5
+  data.tar.gz: 1e3187d96b39928a349a22b1d7016f5b938e78f4
 SHA512:
-  metadata.gz: 17519e48bc499d28e907ac48025bb631b06581e87791f3086713ecd9208b69439d9cf8dd4f8a3d390e93e376a465df5faa3c2c8ac8225b0f6ac570ffab48eb87
-  data.tar.gz: e7c7b1fb30e9f189121ff0ea168c694237b3e8354ec007f3c55ed0f3923b2398908666ed73111657095f8a7ca321597c5a297e42278ccd8a6c29997ca8028d5c
+  metadata.gz: 201e1254abc711464992b54cd023d15bda0d5b3fc9ed58326493b4c18a0eeb0348be80a8744eba1e42cf993d58c948bd9ba9e162f113bd9ced2a925cb7ea021b
+  data.tar.gz: 95ce6ed1575e03f5d78a9ed37a07f51a4e754448d38c0afa7412f657e204df83fd073f303abcf5168bc8e0577f3ff09c4f5266e5bc444382311592ffb72fc740

data/README.md

@@ -28,6 +28,24 @@ To add a javascript file to gem, create new symlink to govuk_elements file like
     ln -s ../../../govuk_elements/public/javascripts/application.js
     ls -l
 
+To update govuk_elements to last master commit:
+
+    cd govuk_elements
+    git checkout master
+    git pull
+    cd ..
+    git commit -am "Update govuk_elements to last master commit."
+
+To update version number, edit version.rb, and repackage:
+
+    vi lib/govuk_elements_rails/version.rb
+    rake clean
+    rake package
+
+To tag and publish the gem to rubygems.org:
+
+    rake publish
+
 ## Usage
 
 At the top of a Sass file in your Rails project you should use an `@import` rule

data/lib/govuk_elements_rails/version.rb

@@ -1,5 +1,5 @@
 module GovUKElementsRails
   def self.elements_version
-    '0.2.2'
+    '0.3.0'
   end
 end

data/vendor/assets/javascripts/application.js

@@ -132,3 +132,26 @@ $(document).ready(function() {
   toggleContent.showHideCheckboxToggledContent();
 
 });
+
+$(window).load(function() {
+
+  // Only set focus for the error example pages
+  if ($(".js-error-example").length) {
+
+    // If there is an error summary, set focus to the summary
+    if ($(".error-summary").length) {
+      $(".error-summary").focus();
+      $(".error-summary a").click(function(e) {
+        e.preventDefault();
+        var href = $(this).attr("href");
+        $(href).focus();
+      });
+    }
+    // Otherwise, set focus to the field with the error
+    else {
+      $(".error input:first").focus();
+    }
+  }
+
+});
+

data/vendor/assets/javascripts/details.polyfill.js

@@ -26,11 +26,14 @@
   function addClickEvent(node, callback) {
     // Prevent space(32) from scrolling the page
     addEvent(node, 'keypress', function (e, target) {
-      if (e.keyCode === 32) {
-        if (e.preventDefault) {
-          e.preventDefault();
+      if (target.nodeName === "SUMMARY") {
+        if (e.keyCode === 32) {
+          if (e.preventDefault) {
+            e.preventDefault();
+          } else {
+            e.returnValue = false;
+          }
         }
-        else { e.returnValue = false; }
       }
     });
     // When the key comes up - check if it is enter(13) or space(32)

data/vendor/assets/stylesheets/elements-page.scss

@@ -31,7 +31,7 @@
 // Elements page styles
 // ==========================================================================
 
-// These are example styles, used only for the Elements page example boxes
+// These are example styles, used only for the Elements index page
 
 // Headings
 // Used with heading-large = 36px
@@ -40,8 +40,8 @@
   padding-top: em(45, 36);
 }
 
-// Text
-.tight {
+// Use for paragraphs before lists
+.lead-in {
   margin-bottom: 0;
 }
 
@@ -207,12 +207,20 @@ $palette: (
   background-color: $beta-colour;
 }
 
+.swatch-discovery {
+  background-color: $discovery-colour;
+}
+
+.swatch-live {
+  background-color: $live-colour;
+}
+
 .swatch-error {
   background-color: $error-colour;
 }
 
 .swatch-focus {
-  background-color: $yellow;
+  background-color: $focus-colour;
 }
 
 .swatch-button-colour {

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

@@ -19,7 +19,7 @@
 }
 
 .button:focus {
-  outline: 3px solid $yellow;
+  outline: 3px solid $focus-colour;
 }
 
 // Disabled buttons

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

@@ -5,36 +5,36 @@
 
 details {
   display: block;
-}
 
-details summary {
-  display: inline-block;
-  color: $govuk-blue;
-  cursor: pointer;
-  position: relative;
-  margin-bottom: em(5);
-}
+  summary {
+    display: inline-block;
+    color: $govuk-blue;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: em(5);
 
-details summary:hover {
-  color: $link-hover-colour;
-}
-
-details summary:focus {
-  outline: 3px solid $yellow;
-}
-
-// Underline only summary text (not the arrow)
-details .summary {
-  text-decoration: underline;
-}
-
-// Match fallback arrow spacing with -webkit default
-details .arrow {
-  margin-right: 0.35em;
-  font-style: normal;
-}
+    &:hover {
+      color: $link-hover-colour;
+    }
 
-// Remove top margin from bordered panel
-details .panel-indent {
-  margin-top: 0;
+    &:focus {
+      outline: 3px solid $focus-colour;
+    }
+  }
+  
+  // Underline only summary text (not the arrow)
+  .summary {
+    text-decoration: underline;
+  }
+  
+  // Match fallback arrow spacing with -webkit default
+  .arrow {
+    margin-right: .35em;
+    font-style: normal;
+  }
+  
+  // Remove top margin from bordered panel
+  .panel-indent {
+    margin-top: 0;
+  }
 }

data/vendor/assets/stylesheets/elements/_elements-typography.scss

@@ -17,18 +17,23 @@ main {
 .font-xxlarge {
   @include core-80;
 }
+
 .font-xlarge {
   @include core-48;
 }
+
 .font-large {
   @include core-36;
 }
+
 .font-medium {
   @include core-24;
 }
+
 .font-small {
   @include core-19;
 }
+
 .font-xsmall {
   @include core-16;
 }
@@ -37,18 +42,23 @@ main {
 .bold-xxlarge {
   @include bold-80();
 }
+
 .bold-xlarge {
   @include bold-48();
 }
+
 .bold-large {
   @include bold-36();
 }
+
 .bold-medium {
   @include bold-24();
 }
+
 .bold-small {
   @include bold-19();
 }
+
 .bold-xsmall {
   @include bold-16();
 }
@@ -85,7 +95,7 @@ main {
   margin-bottom: em(10, 24);
 
   @include media(tablet) {
-    margin-top: em(45, 36 );
+    margin-top: em(45, 36);
     margin-bottom: em(20, 36);
   }
 
@@ -125,7 +135,7 @@ main {
 
 // Text
 p {
-  margin-top: em(5, 16 );
+  margin-top: em(5, 16);
   margin-bottom: em(20, 16);
 
   @include media(tablet) {
@@ -155,12 +165,15 @@ p {
   color: $link-colour;
   text-decoration: underline;
 }
+
 .link:visited {
   color: $link-visited-colour;
 }
+
 .link:hover {
   color: $link-hover-colour;
 }
+
 .link:active {
   color: $link-colour;
 }

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

@@ -6,16 +6,25 @@
 
 // Fieldset is used to group more than one .form-group
 fieldset {
-  width: 100%;
   @extend %contain-floats;
+  width: 100%;
+}
+
+// Fix left hand gap in IE7 and below
+@include ie-lte(7) {
+  legend {
+    margin-left: -7px;
+  }
 }
 
 // Form group is used to wrap label and input pairs
 .form-group {
+  @extend %contain-floats;
+  @include box-sizing(border-box);
   float: left;
   width: 100%;
-  @extend %contain-floats;
   margin-bottom: $gutter-half;
+
   @include media(tablet) {
     margin-bottom: $gutter;
   }
@@ -23,11 +32,13 @@ fieldset {
 
 .form-group-related {
   margin-bottom: 10px;
+
   @include media(tablet) {
     margin-bottom: 20px;
   }
 }
 
+// Form group compound is used to reduce the space between label and input pairs
 .form-group-compound {
   margin-bottom: 10px;
 }
@@ -36,6 +47,7 @@ fieldset {
 // Form title
 .form-title {
   margin-bottom: $gutter;
+
   @include media(tablet) {
     margin-bottom: ($gutter*1.5);
   }
@@ -53,22 +65,39 @@ fieldset {
 
 .form-label {
   @include core-19;
-  margin-bottom: 5px;
 }
 
 .form-label-bold {
-  @include bold-24;
-  margin-bottom: 0;
-  .form-hint {
-    @include core-19;
+  @include bold-19;
+}
+
+// Add spacing under spans within labels
+legend {
+  .form-label,
+  .form-label-bold {
+    padding-bottom: 7px;
+  }
+}
+
+// Remove spacing when error messages are shown
+.error legend {
+  .form-label,
+  .form-label-bold {
+    padding-bottom: 0;
   }
 }
 
 // Used for paragraphs in-between form elements
 .form-block {
+  @extend %contain-floats;
   float: left;
   width: 100%;
-  @extend %contain-floats;
+
+  margin-bottom: 5px;
+
+  @include media(tablet) {
+    margin-top: 10px;
+  }
 }
 
 
@@ -76,24 +105,22 @@ fieldset {
 
 // Form hints & examples are light grey and sit above a form control
 .form-hint {
+  @include core-19;
   display: block;
   color: $secondary-text-colour;
+  font-weight: normal;
   margin-bottom: 5px;
-  @include media (tablet) {
-    margin-top: 8px;
-  }
 }
 
-
 // Form controls
 
 // By default, form controls are 50% width for desktop,
 // and 100% width for mobile
 .form-control {
+  @include box-sizing(border-box);
   @include core-19;
-
   width: 100%;
-  @include box-sizing(border-box);
+
   padding: 4px;
   background-color: $white;
   border: 1px solid $border-colour;
@@ -111,6 +138,7 @@ fieldset {
 // Form control widths
 .form-control-3-4 {
   width: 100%;
+
   @include media(tablet) {
     width: 75%;
   }
@@ -118,6 +146,7 @@ fieldset {
 
 .form-control-1-2 {
   width: 100%;
+
   @include media(tablet) {
     width: 50%;
   }
@@ -136,10 +165,11 @@ fieldset {
 .form-radio {
   display: block;
   margin: 10px 0;
-}
-.form-radio input {
-  vertical-align: middle;
-  margin: -4px 5px 0 0;
+
+  input {
+    vertical-align: middle;
+    margin: -4px 5px 0 0;
+  }
 }
 
 
@@ -147,11 +177,13 @@ fieldset {
 .form-checkbox {
   display: block;
   margin: $gutter-half 0;
+
+  input {
+    vertical-align: middle;
+    margin: -2px 5px 0 0;
+  }
 }
-.form-checkbox input {
-  vertical-align: middle;
-  margin: -2px 5px 0 0;
-}
+
 
 // Buttons
 .form .button {

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

@@ -6,6 +6,12 @@
 @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/";
+}
 
 // Return ems from a pixel value
 // This assumes a base of 19px
@@ -17,12 +23,14 @@
 // add this class to the body to see how grid padding is set
 .example-highlight-grid {
   .grid-row {
-    background:  $grey-2;
+    background: $grey-2;
   }
+
   .column-highlight {
     background: $grey-3;
     width: 100%;
   }
+
 }
 
 // Used to space the "back" link on example pages
@@ -36,8 +44,11 @@
   position: absolute;
   overflow: hidden;
   clip: rect(0 0 0 0);
-  height: 1px; width: 1px;
-  margin: -1px; padding: 0; border: 0;
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
 }
 
 // Hide, only when JavaScript is enabled

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

@@ -8,85 +8,94 @@
 }
 
 .icon-calendar {
+  width: 27px;
+  height: 27px;
   background-image: file-url("icons/icon-calendar.png");
+
   @include device-pixel-ratio() {
     background-image: file-url("icons/icon-calendar-2x.png");
     background-size: 100%;
   }
-  width: 27px;
-  height: 27px;
 }
 
 .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-file-download-2x.png");
     background-size: 100%;
-  }
-  width: 30px;
-  height: 39px;
+  } 
 }
 
 .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%;
   }
-  width: 34px;
-  height: 34px;
 }
 
 .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%;
   }
-  width: 27px;
-  height: 27px;
 }
 
 .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%;
   }
-  width: 26px;
-  height: 36px;
 }
 
 .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%;
   }
-  width: 30px;
-  height: 22px;
-  background-color: black;
 }
 
 // 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%;
   }
-  width: 30px;
-  height: 19px;
-  background-color: black;
 }
+
 .icon-pointer-black {
+  width: 23px;
+  height: 23px;
   background-image: file-url("icons/icon-pointer-black.png");
+
   @include device-pixel-ratio() {
     background-image: file-url("icons/icon-pointer-black-2x.png");
     background-size: 100%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 // GOV.UK external link icons
@@ -94,131 +103,144 @@
 
 // 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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .icon-step-10 {
+  width: 23px;
+  height: 23px;
   background-image: file-url("icons/icon-steps/icon-step-10.png");
+
   @include device-pixel-ratio() {
     background-image: file-url("icons/icon-steps/icon-step-10-2x.png");
     background-size: 100%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }
 
 .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%;
   }
-  width: 23px;
-  height: 23px;
 }

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

@@ -17,6 +17,7 @@
   @extend %site-width-container;
   @extend %contain-floats;
   padding-bottom: $gutter;
+  
   @include media(desktop) {
     padding-bottom: $gutter*3;
   }
@@ -26,7 +27,7 @@
 // Phase banner
 // ==========================================================================
 
-.phase-banner  {
+.phase-banner {
   @include phase-banner(alpha);
 }
 
@@ -54,14 +55,17 @@
 // 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 {
-  @include grid-column( 1/4 );
+  @include grid-column(1/4);
 }
+
 .column-half {
-  @include grid-column( 1/2 );
+  @include grid-column(1/2);
 }
+
 .column-third {
-  @include grid-column( 1/3 );
+  @include grid-column(1/3);
 }
+
 .column-two-thirds {
-  @include grid-column( 2/3 );
+  @include grid-column(2/3);
 }

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

@@ -17,6 +17,7 @@ ol {
 .list-number {
   list-style-type: decimal;
   padding-left: 20px;
+  
   @include ie-lte(7) {
     padding-left: 28px;
   }

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

@@ -12,18 +12,18 @@
 
   padding: 10px 0 10px $gutter-half;
   margin: ($gutter $gutter-half $gutter*1.5 0);
-}
-
-.panel-indent legend {
-  margin-top: 0;
-}
-
-// Remove bottom margin on last paragraph
-.panel-indent p:only-child,
-.panel-indent p:last-child {
-  margin-bottom: 0;
-}
 
-.panel-indent .form-group:last-child {
-  margin-bottom: 0;
+  legend {
+    margin-top: 0;
+  }
+  
+  // Remove bottom margin on last paragraph
+  p:only-child,
+  p:last-child {
+    margin-bottom: 0;
+  }
+  
+  .form-group:last-child {
+    margin-bottom: 0;
+  }
 }

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

@@ -9,29 +9,28 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
-}
 
-table th,
-table td {
-  @include core-16;
-  padding: em(12, 16) em(20, 16) em(9, 16) 0;
+  th,
+  td {
+    @include core-16;
+    padding: em(12, 16) em(20, 16) em(9, 16) 0;
 
-  text-align: left;
-  color: #0b0c0c;
-  border-bottom: 1px solid $border-colour;
-}
+    text-align: left;
+    color: $black;
+    border-bottom: 1px solid $border-colour;
+  }
 
-table th {
-  font-weight: 700;
-}
-
-// Right align headings for numeric content
-table th.numeric {
-  text-align: right;
-}
+  th {
+    font-weight: 700;
+    // Right align headings for numeric content
+    &.numeric {
+      text-align: right;
+    } 
+  }
 
-// Use tabular numbers for numeric table cells
-table td.numeric {
-  @include core-16($tabular-numbers: true);
-  text-align: right;
+  // Use tabular numbers for numeric table cells
+  td.numeric {
+    @include core-16($tabular-numbers: true);
+    text-align: right;
+  }
 }

data/vendor/assets/stylesheets/elements/forms/_form-block-labels.scss

@@ -5,6 +5,7 @@
 @import "measurements";
 @import "conditionals";
 
+
 // By default, block labels stack vertically
 .block-label {
 
@@ -16,15 +17,12 @@
   background: $panel-colour;
   border: 1px solid $panel-colour;
   padding: (18px $gutter $gutter-half $gutter*1.5);
-  margin-top: 10px;
-  margin-bottom: 10px;
 
+  margin-bottom: 10px;
   cursor: pointer; // Encourage clicking on block labels
 
   @include media(tablet) {
     float: left;
-    margin-top: 5px;
-    margin-bottom: 5px;
     // width: 25%; - Test : check that text within labels will wrap
   }
 
@@ -42,6 +40,10 @@
   }
 }
 
+.block-label:last-child {
+  margin-bottom: 0;
+}
+
 // To stack horizontally, use .inline on parent, to sit block labels next to each other
 .inline .block-label {
   clear: none;
@@ -58,7 +60,7 @@
 
 // Add focus to block labels
 .js-enabled label.focused {
-  outline: 3px solid $yellow;
+  outline: 3px solid $focus-colour;
 }
 
 // Remove focus from radio/checkboxes

data/vendor/assets/stylesheets/elements/forms/_form-date.scss

@@ -5,10 +5,11 @@
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
-  margin: 0
+  margin: 0;
 }
+
 input[type=number] {
-  -moz-appearance: textfield
+  -moz-appearance: textfield;
 }
 
 .form-date {
@@ -29,11 +30,9 @@ input[type=number] {
     input {
       width: 100%;
     }
-
   }
 
   .form-group-year {
     width: 70px;
   }
-
 }

data/vendor/assets/stylesheets/elements/forms/_form-validation.scss

@@ -1,68 +1,107 @@
-// Validation summary box
+// Form validation
+// ==========================================================================
 
-@import "colours";
-@import "measurements";
-@import "conditionals";
-@import "typography";
+// Update the error colour in the govuk frontend toolkit
+$error-colour: #b10e1e;
 
-.validation-summary {
-  border: 3px solid $error-colour;
-  padding: $gutter-half $gutter;
-  margin-bottom: $gutter;
+// Using the classname .error as it's shorter than .validation and easier to type!
+.error {
 
-  @include ie-lte(6){
-    zoom: 1;
+  // Ensure the .error class is applied to .form-group, otherwide box-sizing(border-box) will need to be used
+  // @include box-sizing(border-box);
+  margin-right: 15px;
+
+  // Error messages should be red and bold
+  .error-message {
+    color: $error-colour;
+    font-weight: bold;
+  }
+
+  // Form inputs should have a red border
+  .form-control {
+    border: 4px solid $error-colour;
   }
+
+  .form-hint {
+    margin-bottom: 0;
+  }
+
 }
 
-.validation-summary ul {
-  margin-top: 10px;
+.error,
+.error-summary {
+
+  // Add a red border to the left of the field
+  border-left: 4px solid $error-colour;
+  padding-left: 10px;
+
+  @include media(tablet) {
+    border-left: 5px solid $error-colour;
+    padding-left: $gutter-half;
+  }
 }
 
-.validation-summary li,
-.validation-summary p {
-  @include core-16;
+.error-message {
+  @include core-19;
+
+  display: block;
+  clear: both;
+
+  margin: 0;
+  padding: 5px 0 7px 0;
 }
 
-.validation-summary p {
+// Summary of multiple error messages
+.error-summary {
+
+  // Error summary has a border on all sides
+  border: 4px solid $error-colour;
+
   margin-top: $gutter-half;
-  margin-bottom: 5px;
-}
+  margin-bottom: $gutter-half;
+
+  padding: $gutter-half 10px;
+
+  @include media(tablet) {
+    border: 5px solid $error-colour;
+
+    margin-top: $gutter;
+    margin-bottom: $gutter;
+
+    padding: 20px $gutter-half $gutter-half $gutter-half;
+  }
 
-.validation-summary a {
-  color: $error-colour;
   @include ie-lte(6) {
-    color: $error-colour !important;
+    zoom: 1;
   }
-}
 
-.validation-summary .heading-small {
-  margin-top: $gutter-half;
-}
+  // Use the GOV.UK outline focus style
+  &:focus {
+    outline: 3px solid $focus-colour;
+  }
 
+  .error-summary-heading {
+    margin-top: 0;
+  }
 
-// Validation error message box
-// .validation-error {
-//   clear: both;
-//   @extend %contain-floats;
-//   border-left: 3px solid $error-colour;
-//   padding: $gutter- $gutter;
-//   margin-bottom: $gutter-half;
-//   margin-left: -($gutter);
-// }
+  p {
+    margin-bottom: 10px;
+  }
 
-// .validation-error .form-group {
-//   margin-bottom: 20px;
-// }
+  .error-summary-list {
+    padding-left: 0;
 
-// .validation-error p {
-//   margin-bottom: 10px;
-// }
+    li {
 
+      @include media(tablet) {
+        margin-bottom: 5px;
+      }
+    }
 
-// Validation message
-.validation-message {
-  display: block;
-  @include core-16;
-  color: $error-colour;
+    a {
+      color: $error-colour;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_elements_rails
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.0
 platform: ruby
 authors:
 - Rob McKinnon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-26 00:00:00.000000000 Z
+date: 2015-06-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -50,8 +50,8 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.2.0
-description: A gem wrapper around SHA caadd5a3bf04d58ab61bab5ec8e00afdba818b18 govuk_elements
-  (remotes/origin/HEAD) that pulls stylesheet and javascript files into a Rails app.
+description: A gem wrapper around SHA 281fb6b9e14129a6c3f982c46c43970e3f2f7f78 govuk_elements
+  (heads/master) that pulls stylesheet and javascript files into a Rails app.
 email: rob.mckinnon ~@nospam@~ digital.justice.gov.uk
 executables: []
 extensions: []