From 233775bdc6f3aa6c0f1394390be3954282fe7cdd Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Mon, 2 Mar 2020 12:40:41 +0000
Subject: Better background and border handling in button-variant() Sass mixin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A couple of small fixes to tidy the output of button-variant() and
make it easier to style up flat, borderless buttons.

* If $bg-top and $bg-bottom are identical, no linear-gradient() will
  be generated. Same goes for $hover-bg-top and $hover-bg-bottom.
* If $border or $hover-border are `false`, then it’s assumed you don’t
  want a border, and `border: none` will be generated.
---
 web/cobrands/sass/_mixins.scss | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

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;
+        }
     }
 }
 
-- 
cgit v1.2.3


From 3e0b7c72357db4083c5d4a559ab1e60f9e707777 Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Mon, 2 Mar 2020 12:47:55 +0000
Subject: [Bromley] Reduce specificity of button styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 web/cobrands/bromley/_colours.scss |  2 +-
 web/cobrands/bromley/base.scss     | 37 ++++++-------------------------------
 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
-- 
cgit v1.2.3