Make .btn--block work on button and input elements

The intention of .btn--block is to make the element full width. Because
of the weird way browsers handle sizing of form elements, just setting
`display: block` on `<button>` and `<input type="submit">` elements
wasn’t making them full width. Instead, .btn--block needed to explicitly
set a 100% width, and then reset any margins or box-sizing issues that
might cause it to overflow its parent.

6 files changed, 87 insertions, 54 deletions

diff --git a/web/cobrands/borsetshire/base.scss b/web/cobrands/borsetshire/base.scss
index 10973fea2..73e2e8f76 100644
--- a/web/cobrands/borsetshire/base.scss
+++ b/web/cobrands/borsetshire/base.scss
@@ -110,10 +110,10 @@ body.authpage {
   & > :last-child {
     margin-bottom: 0;
   }
-}
 
-.btn--borsetshire {
-  @include button-reset($text: #000, $hover-text: #000);
+  .btn {
+    @include button-variant($text: #000, $hover-text: #000);
+  }
 }
 
 @import "mysoc-header";
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index d98dec712..2e8e6febc 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -152,8 +152,10 @@ svg|g.site-logo__svg {
     }
 }
 
-.btn-primary {
-    @include button-reset(
+// Yellow primary buttons on FMS.com, rather than green.
+.btn-primary,
+.btn--primary {
+    @include button-variant(
         mix($primary, #fff, 50%),
         $primary,
         mix($primary, #ccc, 30%),
diff --git a/web/cobrands/lincolnshire/base.scss b/web/cobrands/lincolnshire/base.scss
index 33ae1f3ce..de1e4789f 100644
--- a/web/cobrands/lincolnshire/base.scss
+++ b/web/cobrands/lincolnshire/base.scss
@@ -82,7 +82,8 @@ a {
 }
 
 .btn-primary,
-.green-btn {
+.green-btn,
+.btn--primary {
   background: none; // remove gradient bg
   background-color: $primary;
   border-color: $primary;
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 9a098c439..426a56e02 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -214,7 +214,7 @@ dd, p {
 }
 
 .btn {
-    @include button-reset(
+    @include button-variant(
         #ffffff, #ffffff, #ffffff, #000,
         #f3f3f3, #f3f3f3, #f3f3f3, #000
     );
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index c17790176..b0cd4612d 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -734,7 +734,16 @@ footer {
 /*BUTTONS*/
 
 .btn {
-  @include button-reset;
+  @include button-reset();
+}
+
+// Deprecated
+// Try to use `btn btn--primary` etc instead of `btn-primary` where possible.
+.btn-primary,
+.green-btn,
+.btn-danger,
+.red-btn {
+  @include button-size();
 }
 
 .btn + .btn {
@@ -743,13 +752,15 @@ footer {
 }
 
 .btn-primary,
-.green-btn {
-  @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
+.green-btn,
+.btn--primary {
+  @include button-variant(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
 }
 
 .btn-danger,
-.red-btn {
-  @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
+.red-btn,
+.btn--danger {
+  @include button-variant(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
 }
 
 .final-submit,
@@ -759,7 +770,7 @@ input.final-submit {
 }
 
 .btn--facebook {
-    @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);
+    @include button-variant(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);
 
     img {
         margin-#{$right}: 0.5em;
@@ -770,7 +781,7 @@ input.final-submit {
 }
 
 .btn--twitter {
-    @include button-reset(#55acee, darken(#55acee, 10%), #55acee, #fff, darken(#55acee, 5%), darken(#55acee, 10%), #55acee, #fff);
+    @include button-variant(#55acee, darken(#55acee, 10%), #55acee, #fff, darken(#55acee, 5%), darken(#55acee, 10%), #55acee, #fff);
 
     img {
         margin-#{$right}: 0.5em;
@@ -850,7 +861,11 @@ input.final-submit {
 
 .btn--block {
     display: block;
-    text-align: center;
+    // Need to force 100% width if this is applied to <button> or <input> elements
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    @include box-sizing(border-box);
 }
 
 // Under the button to override its text transform and width
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index b78a699fe..d5a0a041f 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -10,47 +10,62 @@ $direction: 'left' !default;
     $nav_background_colour: $nav_fg_hover !global;
 }
 
-// Button reset
-// Uses !important a few times to quickly reset
-// styles from a:link, a:hover, a:visited etc.
-@mixin button-reset($bg-top: #fff, $bg-bottom: #eee, $border: #ccc, $text: inherit, $hover-bg-bottom: #e9e9e9, $hover-bg-top: #f9f9f9, $hover-border: #ccc, $hover-text: inherit){
-  display: inline-block;
-  margin: 0;
-  padding: 0.75em 1em;
-  width: auto;
-  height: auto;
-  vertical-align: top;
-  text-align: center;
-
-  font-size: 1em;
-  line-height: 1em;
-  font-weight: bold;
-  font-family: inherit;
-  text-decoration: none !important;
-  color: $text !important;
-
-  cursor: pointer;
-  background: $bg-bottom;
-  @include linear-gradient($bg-top, $bg-bottom);
-
-  border: 1px solid $border;
-  @include border-radius(4px);
-
-  &:hover,
-  &:focus {
-    background: $hover-bg-bottom;
-    @include linear-gradient($hover-bg-top, $hover-bg-bottom);
-    text-decoration: none !important;
-    border-color: $hover-border;
-    color: $hover-text !important;
-  }
+@mixin button-size() {
+    display: inline-block;
+    margin: 0;
+    padding: 0.75em 1em;
+    width: auto;
+    height: auto;
+
+    vertical-align: top;
+    text-align: center;
+    font-size: 1em;
+    line-height: 1em;
+    font-weight: bold;
+    font-family: inherit;
+
+    cursor: pointer;
+    @include border-radius(4px);
+
+    &,
+    &:hover,
+    &:focus {
+        // We *never* want buttons to be underlined.
+        text-decoration: none !important;
+    }
+
+    &:disabled {
+        cursor: default;
+    }
+}
 
-  &:disabled {
+@mixin button-variant($bg-top: #fff, $bg-bottom: #eee, $border: #ccc, $text: inherit, $hover-bg-bottom: #e9e9e9, $hover-bg-top: #f9f9f9, $hover-border: #ccc, $hover-text: inherit) {
+    color: $text !important; // !important to override more specific selectors like `a:link`
     background: $bg-bottom;
-    border-color: $border;
-    color: desaturate(darken($bg-bottom, 50%), 50%) !important;
-    cursor: default;
-  }
+    @include linear-gradient($bg-top, $bg-bottom);
+    border: 1px solid $border;
+
+    &:hover,
+    &:focus {
+        color: $hover-text !important;
+        background: $hover-bg-bottom;
+        @include linear-gradient($hover-bg-top, $hover-bg-bottom);
+        border-color: $hover-border;
+    }
+
+    &:disabled {
+        color: desaturate(darken($bg-bottom, 50%), 50%) !important;
+        background: $bg-bottom;
+        border-color: $border;
+    }
+}
+
+// Deprecated.
+// Where possible, use button-size() and button-variant() separately to avoid
+// replicating layout rules at higher specificities than required.
+@mixin button-reset($bg-top: #fff, $bg-bottom: #eee, $border: #ccc, $text: inherit, $hover-bg-bottom: #e9e9e9, $hover-bg-top: #f9f9f9, $hover-border: #ccc, $hover-text: inherit){
+  @include button-size();
+  @include button-variant($bg-top, $bg-bottom, $border, $text, $hover-bg-bottom, $hover-bg-top, $hover-border, $hover-text);
 }
 
 // list reset