Merge remote-tracking branch 'origin/issues/commercial/1659-bromley-shortlist-css-bug'

3 files changed, 28 insertions, 37 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
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index d5a0a041f..ae3277d2d 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -42,21 +42,37 @@ $direction: 'left' !default;
 @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;
-    @include linear-gradient($bg-top, $bg-bottom);
-    border: 1px solid $border;
+    @if $bg-top != $bg-bottom {
+        @include linear-gradient($bg-top, $bg-bottom);
+    }
+    @if $border {
+        border: 1px solid $border;
+    } @else {
+        border: none;
+    }
 
     &:hover,
     &:focus {
         color: $hover-text !important;
         background: $hover-bg-bottom;
-        @include linear-gradient($hover-bg-top, $hover-bg-bottom);
-        border-color: $hover-border;
+        @if $hover-bg-top != $hover-bg-bottom {
+            @include linear-gradient($hover-bg-top, $hover-bg-bottom);
+        }
+        @if $hover-border {
+            border-color: $hover-border;
+        } @else {
+            border: none;
+        }
     }
 
     &:disabled {
         color: desaturate(darken($bg-bottom, 50%), 50%) !important;
         background: $bg-bottom;
-        border-color: $border;
+        @if $border {
+            border-color: $border;
+        } @else {
+            border: none;
+        }
     }
 }