Tidied up .btn class and button-reset mixin

Even though FMS has had a `.btn` class for a while, styling buttons has
still been difficult, mainly because of the very opinionated base styles
applied to overpowered selectors like `input[type="submit"]`.

This commit brings the FMS styles more in line with modern frameworks
like Bootstrap – inputs and buttons are left completely unstyled by
default, with an opt-in `.btn` class to add the styles back in.

Since `.btn` is just a single class, it’s easy to override, and avoids
selector bloat like `.green-btn, button.green-btn, input.green-btn`.

5 files changed, 89 insertions, 63 deletions

diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 869654b87..905f20f41 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -152,6 +152,19 @@
     }
 }
 
+.btn-primary {
+    @include button-reset(
+        mix($primary, #fff, 50%),
+        $primary,
+        mix($primary, #ccc, 30%),
+        inherit,
+        darken($primary, 3%),
+        darken(mix($primary, #fff, 50%), 3%),
+        mix($primary, #ccc, 30%),
+        inherit
+    );
+}
+
 .variant1 {
     #site-header {
         border-top-color: #fff;
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 12f92b531..16ec91244 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -70,3 +70,16 @@ dd, p {
     margin-bottom: 0;
   }
 }
+
+.btn-primary {
+    @include button-reset(
+        $oxfordshire_button_top,
+        $oxfordshire_button_bottom,
+        $oxfordshire_button_border,
+        #fff,
+        darken($oxfordshire_button_bottom, 3%),
+        darken($oxfordshire_button_top, 3%),
+        $oxfordshire_button_border,
+        #fff
+    );
+}
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index c44e91586..0a0b49fc2 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -286,11 +286,12 @@ h4.static-with-rule {
 
 #oxford-wrapper #front-main #postcodeForm div {
   border: 1px solid #fff; // because orange "Go" button (see below) abuts this border, looks a tiny bit better if it's not dark green
+  width: 24em; // up from default 20em
 
   #pc {
-    padding: 0 2%;
-    width: 89%;
-    height: 38px;
+    padding: 0 0 0 2%;
+    width: 20em;
+    height: 40px;
   }
 }
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 60f992410..98f578fa2 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -701,22 +701,22 @@ footer {
 
 /*BUTTONS*/
 
-// Default style set for buttons, inputs and .btn class. Red and green class available.
-// NB: a.btn is included in the selector otherwise a:visited is more specific and
-// the wrong text colour is applied.
-button, input[type=submit], .btn, a.btn {
+.btn {
   @include button-reset;
 }
 
-.green-btn,
-button.green-btn,
-input.green-btn{
+.btn + .btn {
+  // Ensure extra space between inline buttons placed next to each other.
+  margin-#{$left}: 0.5em;
+}
+
+.btn-primary,
+.green-btn {
   @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
 }
 
-.red-btn,
-button.red-btn,
-input.red-btn{
+.btn-danger,
+.red-btn {
   @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
 }
 
@@ -726,20 +726,9 @@ input.final-submit {
   float: $right;
 }
 
-// TODO: Sort out this a/a:visited/a.btn hideousness
-.btn-block,
-a.btn-block {
-  display: block;
-  text-align: center;
-}
-
 .btn--facebook {
     @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);
 
-    &:visited {
-        color: #fff;
-    }
-
     img {
         margin-right: 0.5em;
         vertical-align: -0.2em;
@@ -751,10 +740,6 @@ a.btn-block {
 .btn--twitter {
     @include button-reset(#55acee, darken(#55acee, 10%), #55acee, #fff, darken(#55acee, 5%), darken(#55acee, 10%), #55acee, #fff);
 
-    &:visited {
-        color: #fff;
-    }
-
     img {
         margin-right: 0.5em;
         vertical-align: -0.2em;
@@ -801,7 +786,7 @@ a.btn-block {
 
 .btn--block {
     display: block;
-    width: auto;
+    text-align: center;
 }
 
 // Under the button to override its text transform and width
@@ -1847,32 +1832,33 @@ table.nicetable {
 
   & > * {
     display: block;
-    margin: 0;
-    padding: 0.75em 0.5em;
     text-align: center;
-    background: #fff linear-gradient(to bottom, #fff 0%, #eee 100%) 0 0 no-repeat;
-    border: 1px solid #ccc;
     border-right-width: 0; // avoid double border between items
-    font-weight: bold;
-    color: inherit !important;
-    text-decoration: none !important;
-    cursor: pointer;
     float: left; // float fallback for browsers that don't support flexbox
     flex: 1 0 auto;
+  }
 
-    &:hover {
-      background: #f3f3f3 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) 0 0 no-repeat;
-    }
+  .btn {
+    padding: 0.75em 0.5em;
+    border-radius: 0;
+  }
+
+  .btn + .btn {
+    margin-#{$left}: 0;
   }
 
   & > :first-child {
-    border-radius: 0.25em 0 0 0.25em;
+    border-radius: 4px 0 0 4px;
   }
 
   & > :last-child {
-    border-radius: 0 0.25em 0.25em 0;
+    border-radius: 0 4px 4px 0;
     border-right-width: 1px; // reinstate border on last item
   }
+
+  & > :first-child:last-child {
+    border-radius: 4px;
+  }
 }
 
 // A special case of segmented control, where each "button" (or label) is
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index a1a278ad0..f5bf1fbdf 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -1,32 +1,45 @@
 $direction: 'left' !default;
 
 // Button reset
-@mixin button-reset($c1: #eee, $c2: #ccc, $c3: #999, $c4: #333, $c5: #777, $c6: #999, $c7: #666, $c8: #fff){
+// 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;
-  cursor:pointer;
-  font:{
-    size: 0.875em;
-    family: Helmet, Freesans, sans-serif;
-    weight:bold;
-  }
-  text-transform:uppercase;
-  line-height: 1.375em;
-  padding: 0.7em 0.5em 0.5em;
-  margin:0;
+  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);
-  background: $c1;
-  @include linear-gradient($c1, $c2);
-  border:1px solid $c3;
-  color:$c4;
-  &:hover, &:hover:enabled {
-    background:$c5;
-    @include linear-gradient($c6, $c5);
-    text-decoration: none;
-    border:1px solid $c7;
-    color:$c8;
+
+  &: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;
+  }
+
+  &:disabled {
+    background: $bg-bottom;
+    border-color: $border;
+    color: desaturate(darken($bg-bottom, 50%), 50%) !important;
+    cursor: default;
   }
 }