Merge pull request #759 from ministryofjustice/issues/758

Frontend Tweaks

Gemfile

@@ -14,7 +14,7 @@ gem 'rails', '4.2.0'
 gem 'responders', '~> 2.0'
 
 # Use SCSS for stylesheets
-gem 'sass-rails', '~>  5.0.0.beta1'
+gem 'sass-rails', '~> 5.0.3'
 
 # See https://github.com/sstephenson/execjs#readme for more supported runtimes
 # gem 'therubyracer',  platforms: :ruby
@@ -62,7 +62,7 @@ gem 'carrierwave', github: 'carrierwaveuploader/carrierwave', ref: '56873b071053
 gem 'cocaine'
 gem 'epdq', github: 'ministryofjustice/epdq'
 gem 'fog'
-gem 'govuk_frontend_toolkit', '3.4.2'
+gem 'govuk_frontend_toolkit', '~> 4.0.0'
 gem 'httparty'
 gem 'logstasher'
 gem 'moj_template', '0.23.0'

Gemfile.lock

@@ -260,7 +260,7 @@ GEM
     formtastic_i18n (0.1.1)
     globalid (0.3.0)
       activesupport (>= 4.1.0)
-    govuk_frontend_toolkit (3.4.2)
+    govuk_frontend_toolkit (4.0.0)
       rails (>= 3.1.0)
       sass (>= 3.2.0)
     guard (2.11.1)
@@ -320,25 +320,25 @@ GEM
     logstasher (0.6.2)
       logstash-event (~> 1.1.0)
       request_store
-    loofah (2.0.1)
+    loofah (2.0.2)
       nokogiri (>= 1.5.9)
     lumberjack (1.0.9)
     mail (2.6.3)
       mime-types (>= 1.16, < 3)
     method_source (0.8.2)
     mime-types (2.4.3)
     mini_portile (0.6.2)
-    minitest (5.5.1)
+    minitest (5.7.0)
     moj_template (0.23.0)
       rails (>= 3.1)
-    multi_json (1.10.1)
+    multi_json (1.11.0)
     multi_xml (0.5.5)
     multipart-post (2.0.0)
     nenv (0.2.0)
     net-scp (1.2.1)
       net-ssh (>= 2.6.5)
     net-ssh (2.9.2)
-    nokogiri (1.6.5)
+    nokogiri (1.6.6.2)
       mini_portile (~> 0.6.0)
     non-stupid-digest-assets (1.0.4)
     notiffany (0.0.3)
@@ -360,7 +360,7 @@ GEM
       pry (~> 0.10)
     pry-rails (0.3.2)
       pry (>= 0.9.10)
-    rack (1.6.0)
+    rack (1.6.1)
     rack-livereload (0.3.15)
       rack
     rack-test (0.6.3)
@@ -378,11 +378,11 @@ GEM
       sprockets-rails
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
-    rails-dom-testing (1.0.5)
+    rails-dom-testing (1.0.6)
       activesupport (>= 4.2.0.beta, < 5.0)
       nokogiri (~> 1.6.0)
       rails-deprecated_sanitizer (>= 1.0.1)
-    rails-html-sanitizer (1.0.1)
+    rails-html-sanitizer (1.0.2)
       loofah (~> 2.0)
     railties (4.2.0)
       actionpack (= 4.2.0)
@@ -436,8 +436,8 @@ GEM
       ruby-progressbar (~> 1.4)
     ruby-progressbar (1.7.1)
     safe_yaml (1.0.4)
-    sass (3.4.10)
-    sass-rails (5.0.1)
+    sass (3.4.14)
+    sass-rails (5.0.3)
       railties (>= 4.0.0, < 5.0)
       sass (~> 3.1)
       sprockets (>= 2.8, < 4.0)
@@ -478,7 +478,7 @@ GEM
       multi_json (~> 1.0)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
-    sprockets-rails (2.2.2)
+    sprockets-rails (2.3.1)
       actionpack (>= 3.0)
       activesupport (>= 3.0)
       sprockets (>= 2.8, < 4.0)
@@ -488,7 +488,7 @@ GEM
     temple (0.7.5)
     thor (0.19.1)
     thread (0.1.4)
-    thread_safe (0.3.4)
+    thread_safe (0.3.5)
     tilt (1.4.1)
     timers (4.0.1)
       hitimes
@@ -545,7 +545,7 @@ DEPENDENCIES
   epdq!
   factory_girl_rails
   fog
-  govuk_frontend_toolkit (= 3.4.2)
+  govuk_frontend_toolkit (~> 4.0.0)
   guard-livereload
   httparty
   jbuilder (~> 2.0)
@@ -566,7 +566,7 @@ DEPENDENCIES
   rspec-its
   rspec-rails (~> 3.0.0)
   rubocop
-  sass-rails (~> 5.0.0.beta1)
+  sass-rails (~> 5.0.3)
   shoulda-matchers
   simple_form (= 3.1.0rc2)
   slim-rails

app/assets/stylesheets/_layout.scss

@@ -98,7 +98,7 @@ input.form-control.file {
 
 aside{
   h3{
-    @extend .heading-medium;
+    @include heading-medium;
     margin-top:0;
   }
   ul{

app/assets/stylesheets/_shame.scss

@@ -52,13 +52,13 @@
     margin-top:0;
   }
   h2 {
-    @extend .legend;
+    @include legend;
     &:first-child{
       margin-top:0;
     }
   }
   h3 {
-    @extend .bold-small;
+    @include bold-19();
     margin-bottom:0;
     & + p,
     & + ul{
@@ -81,7 +81,7 @@
 // ==========================================================================
 aside{
   h3{
-    @extend .heading-medium;
+    @include heading-medium;
     margin:0 0 $gutter-half/2;
   }
   ul{

app/assets/stylesheets/elements/_buttons.scss

@@ -3,7 +3,7 @@
 @import "design-patterns/buttons";
 $blue: #005ea5;
 
-%button {
+@mixin etfees-button {
   margin: 0 $gutter-half $gutter-half 0;
   vertical-align: top;
   &:focus {
@@ -13,7 +13,7 @@ $blue: #005ea5;
 
 .button {
   @include button ($button-colour);
-  @extend %button;
+  @include etfees-button;
   padding-top: $gutter/4;
   padding-bottom: $gutter/4;
   &[disabled="disabled"] {
@@ -27,7 +27,7 @@ $blue: #005ea5;
 
 .button-return {
   @include button ($blue);
-  @extend %button;
+  @include etfees-button;
   padding-top: $gutter/4;
   padding-bottom: $gutter/4;
   color: $white;

app/assets/stylesheets/elements/_details.scss

@@ -8,7 +8,7 @@ details {
   display: block;
   margin:$gutter-half/4 0 $gutter-half;
   summary {
-    @extend .button-link !optional;
+    /* @extend .button-link !optional; */
     @include core-19;
     display: block;
     color: $govuk-blue;

app/assets/stylesheets/elements/_payment-pages.scss

@@ -65,7 +65,7 @@ table.ncoltable3{
 //secondary buttons
 #ncol_cancel, #btn_Back {
   @include button ($panel-colour);
-  @extend %button;
+  @include etfees-button;
   margin-right: 0;
   padding-top: $gutter/4;
   padding-bottom: $gutter/4;
@@ -137,7 +137,7 @@ table.ncoltable2{
 // submit button
 #submit3 {
   @include button ($button-colour);
-  @extend %button;
+  @include etfees-button;
   margin-right: 300px;
   padding-bottom: $gutter/4;
   padding-top: $gutter/4;

app/assets/stylesheets/elements/_tables.scss

@@ -37,7 +37,7 @@ table.review-table{
     }
   }
   caption{
-    @extend .bold-small;
+    @include bold-19();
     text-align:left;
     background: $highlight-colour;
     padding:$gutter-half/2 0;

app/assets/stylesheets/elements/_typography.scss

@@ -87,7 +87,7 @@
 
 }
 
-.heading-medium {
+@mixin heading-medium {
   @include bold-24();
 
   margin-top: em(25, 20);

app/assets/stylesheets/forms/_form-chunky-labels.scss

@@ -1,4 +1,4 @@
-%block-label{
+@mixin block-label{
   float: none;
   clear: left;
 
@@ -25,7 +25,7 @@
 // By default, block labels stack vertically
 label.block-label {
 
-  @extend %block-label;
+  @include block-label;
   margin-top: 10px;
   margin-bottom: 10px;
 
@@ -44,7 +44,7 @@ span.block-label {
   display: block; // This wraps block level elements so needs to be block itself.
 
   label{
-    @extend %block-label;
+    @include block-label;
     display:block;
     margin:0;
 

app/assets/stylesheets/forms/_form-errors.scss

@@ -18,7 +18,7 @@
     margin-top:0;
   }
   h2{
-    @extend .heading-medium;
+    @include heading-medium;
     margin:0;
   }
 }

app/assets/stylesheets/forms/_form-prefixes.scss

@@ -31,7 +31,7 @@
     clear:none;
     margin-bottom:0;
     span.slim-label {
-      @extend .block-label;
+      @include block-label;
       margin-top:0;
       margin-bottom:0;
       label {