[Bromley] Reduce specificity of button styling

Brings Bromley more in line with how other cobrands do their button
styling, and also fixes mysociety/fixmystreet-commercial#1659 (where
Bromley’s high-specificity input styles were causing the shortlist
"star" input to display as a regular button).

2 files changed, 7 insertions, 32 deletions

diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index f00922435..9528f5403 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -2,7 +2,7 @@
 
 $menu-image: 'menu-black';
 
-$bromley_blue: rgb(91,120,147);
+$bromley_blue: #647890;
 $bromley_green: #235e1c;
 $bromley_dark_green: #505050;
 
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 0f316b955..3791f1d16 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -218,37 +218,12 @@ input.field, input.text,
   font-family: Arial,'Helvetica Neue',Helvetica,sans-serif;
 }
 
-// Bromley's button definitions
-.button__primary, .button, input[type=submit], .doc-main-content .byEditor .basketitem a.button {
-  background: #647890;
-  color: white;
-  border: none;
-}
-.button, input[type=submit] {
-  border-style: solid;
-  border-width: 1px;
-  display: inline-block;
-  text-decoration: none;
-  font-weight: 400;
-  cursor: pointer;
-  font-size: 1em;
-  line-height: 2em;
-  height: 2em;
-  padding: 0 1em;
-  margin: 0.5em 0;
-  opacity: 1;
-  transition: opacity .25s ease-in-out;
-  -moz-transition: opacity .25s ease-in-out;
-  -webkit-transition: opacity .25s ease-in-out;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-
-  #postcodeForm & {
-    margin: 0;
-    height: auto;
-    line-height: 1;
-  }
+.btn-primary,
+.green-btn,
+.btn--primary {
+  $bg: $bromley_blue;
+  $hover-bg: darken($bromley_blue, 10%);
+  @include button-variant($bg, $bg, false, #fff, $hover-bg, $hover-bg, false, #fff);
 }
 
 // Bromley's silly A-Z menu