Tidy up btn-primary usage

mysociety · Nov 4, 2024 · 3914400 · 3914400
1 parent b07c75a
commit 3914400
Show file tree

Hide file tree

Showing 22 changed files with 131 additions and 121 deletions.
diff --git a/web/cobrands/bexley/_colours.scss b/web/cobrands/bexley/_colours.scss
@@ -65,3 +65,16 @@ $front-main-background-desktop: $grey_highlight;
 $sticky-sidebar-bg-color: mix($fuchsia, #fff, 20%);
 $mobile-sticky-sidebar-button-bg: $fuchsia;
 $mobile-sticky-sidebar-button-menu-image: "menu-white";
+
+// Button
+$button-primary-bg-top: $col_button;
+$button-primary-bg-bottom: $col_button;
+$button-primary-border: $col_button;
+$button-primary-text: $white;
+
+$button-primary-hover-bg-top: $col_button_hover;
+$button-primary-hover-bg-bottom:$col_button_hover;
+$button-primary-hover-border: $col_button_hover;
+$button-primary-hover-text: $white;
+
+$button-border-radius: 0px;
diff --git a/web/cobrands/bexley/base.scss b/web/cobrands/bexley/base.scss
@@ -77,17 +77,6 @@ a,
   }
 }
 
-.btn--primary {
-    border: none;
-    background: $col_button;
-
-    &:focus,
-    &:hover,
-    &:active {
-        background: $col_button_hover;
-    }
-}
-
 ol.big-numbers > li:before {
     color: $fuchsia_lt;
 }

diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
@@ -11,10 +11,11 @@ $bromley_ligh_grey: #eeece8;
 $bromley_black: #171717;
 $bromley_yellow: #fdcb4c;
 $bromley_red_l1: #e8bac4;
+$white: #fff;
 
 $primary: $bromley_blue;
 $primary_b: $bromley_black;
-$primary_text: #ffffff;
+$primary_text: $white;
 $primary_link_color: $primary_text;
 $primary_link_hover_color: rgba($primary_text, 0.8);
 
@@ -60,3 +61,13 @@ $content-background-desktop: $bromley_green_l2;
 $geolocation-link: $primary;
 
 $mobile-sticky-sidebar-button-menu-image: "menu-white";
+
+$button-primary-bg-top: $bromley_blue;
+$button-primary-bg-bottom: $bromley_blue;
+$button-primary-border: $bromley_blue;
+$button-primary-text: $white;
+
+$button-primary-hover-bg-top: darken($bromley_blue, 10%);
+$button-primary-hover-bg-bottom:darken($bromley_blue, 10%);
+$button-primary-hover-border: darken($bromley_blue, 10%);
+$button-primary-hover-text: $white;
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
@@ -178,13 +178,6 @@ input.field, input.text,
   font-family: $body-font;
 }
 
-.btn--primary {
-  $bg: $bromley_blue;
-  $hover-bg: darken($bromley_blue, 10%);
-  @include button-variant($bg, $bg, false, #fff, $hover-bg, $hover-bg, false, #fff);
-  border-color: $bromley_blue !important;
-}
-
 .container .content {
   .frontpage & {
     &:first-child p {

diff --git a/web/cobrands/camden/_mixins.scss b/web/cobrands/camden/_mixins.scss
@@ -181,14 +181,8 @@
 }
 
 @mixin cobrand-btn-primary {
-    // All the !important declarations are to override the default behaviour of button-variant.
-    @include button-variant($bg-top: $primary_button_background_color, $bg-bottom: $primary_button_background_color, $border: $primary_button_border_color, $text: $primary_button_color, $hover-bg-bottom: $primary_button_background_color_hover, $hover-bg-top: $primary_button_background_color_hover, $hover-border: $primary_button_border_color_hover, $hover-text: $primary_button_color_hover);
+    @include button-variant($bg-top: $primary_button_background_color, $bg-bottom: $primary_button_background_color, $border: $primary_button_border_color, $text: $primary_button_color, $hover-bg-bottom: $primary_button_background_color_hover, $hover-bg-top: $primary_button_background_color_hover, $hover-border: $primary_button_border_color_hover, $hover-text: $primary_button_color_hover,$focus-bg-bottom: $primary_button_background_color_focus, $focus-bg-top: $primary_button_background_color_focus, $focus-border: $primary_button_border_color_focus, $focus-text: $primary_button_color_focus);
     @include cobrand-btn;
-    &:focus {
-        background: $primary_button_background_color_focus !important;
-        color: $primary_button_color_focus !important;
-        border-color: $primary_button_border_color_focus !important;
-    }
 }
 
 @mixin cobrand-btn-secondary {

diff --git a/web/cobrands/cheshireeast/_colours.scss b/web/cobrands/cheshireeast/_colours.scss
@@ -59,3 +59,12 @@ $front-main-container-background-desktop: #fff;
 $sticky-sidebar-bg-color: mix($green, #fff, 20%);
 $mobile-sticky-sidebar-button-bg: $green;
 $mobile-sticky-sidebar-button-menu-image: "menu-white";
+
+$button-primary-bg-top: $col_button;
+$button-primary-border: $col_button;
+$button-primary-text: #fff;
+
+$button-primary-hover-bg-top: $green;
+$button-primary-hover-bg-bottom: $green;
+$button-primary-hover-border: $green;
+$button-primary-hover-text: #fff;
diff --git a/web/cobrands/cheshireeast/base.scss b/web/cobrands/cheshireeast/base.scss
@@ -75,17 +75,6 @@ a,
     }
 }
 
-.btn--primary {
-    border: none;
-    background: $col_button;
-
-    &:focus,
-    &:hover,
-    &:active {
-        background: $col_button_hover;
-    }
-}
-
 .box-warning {
     background-color: #ecf3ec;
 }

diff --git a/web/cobrands/gloucestershire/_variables.scss b/web/cobrands/gloucestershire/_variables.scss
@@ -44,11 +44,11 @@ $link-hover-text-decoration: underline;
 
 /* BUTTONS */
 $button-border-width: 2px;
-$button-padding-top: 6px;
-$button-padding-bottom: 6px;
+$button-padding-top: 10px;
+$button-padding-bottom: 10px;
 $button-padding-left: 25px;
 $button-padding-right: 25px;
-$button-border-radius: 10px; // This var doesn't exist in other cobrands
+$button-border-radius: 10px;
 
 // Usage 
 /*

diff --git a/web/cobrands/gloucestershire/base.scss b/web/cobrands/gloucestershire/base.scss
@@ -41,9 +41,6 @@ a {
     }
 }
 
-
-// This will prevent the update notifications buttons to have the same styling when checked and not checked. By default .btn doesn't have the primary button styling, it has a gray background colour, therefore in cobrands where the .btn has a primary button styling we get the .segmented-control looking the same no matter if they are selected or not.
-.btn:not(label),
 a#geolocate_link {
     @include button-variant($bg-top: $button-primary-bg-top, $bg-bottom: $button-primary-bg-bottom, $border: $button-primary-border, $text: $button-primary-text, $hover-bg-bottom: $button-primary-hover-bg-bottom, $hover-bg-top: $button-primary-hover-bg-top, $hover-border: $button-primary-hover-border, $hover-text: $button-primary-hover-text);
     border-width: $button-border-width;
@@ -57,7 +54,6 @@ a#geolocate_link {
 }
 
 .btn--primary {
-    @include button-variant($bg-top: $gloucestershire_blue_button, $bg-bottom: $gloucestershire_blue_button, $border: $gloucestershire_blue_button, $text: $primary_text, $hover-bg-bottom: $primary_text, $hover-bg-top: $primary_text, $hover-border: $button-primary-hover-border, $hover-text: $gloucestershire_blue_button);
     border-width: $button-border-width;
     @include focus-state;
 }

diff --git a/web/cobrands/highwaysengland/_colours.scss b/web/cobrands/highwaysengland/_colours.scss
@@ -63,3 +63,12 @@ $mappage-sidebar-width--medium: 24em;
 $mappage-actions-width--medium: 36em;
 
 $mobile-sticky-sidebar-button-menu-image: "menu-white";
+
+$button-primary-bg-top: $color-he-blue;
+$button-primary-border: transparent;
+$button-primary-text: #fff;
+
+$button-primary-hover-bg-top: darken($color-he-blue, 10%);
+$button-primary-hover-bg-bottom: darken($color-he-blue, 10%);
+$button-primary-hover-border: transparent;
+$button-primary-hover-text: #fff;
diff --git a/web/cobrands/highwaysengland/base.scss b/web/cobrands/highwaysengland/base.scss
@@ -218,15 +218,6 @@ p.form-error {
     margin: 0 0 0.5em 1em;
 }
 
-.btn--primary {
-    background: $color-he-blue;
-    border: none;
-
-    &:hover, &:focus {
-        background: darken($color-he-blue, 10%);
-    }
-}
-
 .big-green-banner {
     text-transform: none;
 }

diff --git a/web/cobrands/hounslow/_colours.scss b/web/cobrands/hounslow/_colours.scss
@@ -55,3 +55,12 @@ $front-main-background-desktop: $primary;
 $geolocation-link: $primary_text;
 
 $mobile-sticky-sidebar-button-menu-image: "menu-white";
+
+$button-primary-bg-top: $green;
+$button-primary-border: transparent;
+$button-primary-text: #fff;
+
+$button-primary-hover-bg-top: lighten($green, 5%);
+$button-primary-hover-bg-bottom: lighten($green, 5%);
+$button-primary-hover-border: transparent;
+$button-primary-hover-text: #fff;
diff --git a/web/cobrands/hounslow/base.scss b/web/cobrands/hounslow/base.scss
@@ -15,16 +15,6 @@
     background-color: white;
 }
 
-.btn--primary {
-    border: none;
-    background: $green;
-
-    &:hover,
-    &:active {
-        background: lighten($green, 5%);
-    }
-}
-
 .general-notes {
     .box-warning {
       font-size: 1.2em;

diff --git a/web/cobrands/lincolnshire/_colours.scss b/web/cobrands/lincolnshire/_colours.scss
@@ -60,4 +60,12 @@ $search-help-margin-desktop: -2em -2em 0 -2em;
 $form-hint-color: transparentize(#000, 0.3);
 $form-hint-color-desktop: transparentize(#000, 0.3);
 
+$button-primary-bg-top: $primary;
+$button-primary-border: $primary;
 $button-primary-text: $lincs-text;
+
+$button-primary-hover-bg-top: darken($primary, 10%);
+$button-primary-hover-bg-bottom: darken($primary, 10%);
+$button-primary-hover-border: darken($primary, 10%);
+$button-primary-hover-text: #fff;
+
diff --git a/web/cobrands/lincolnshire/base.scss b/web/cobrands/lincolnshire/base.scss
@@ -71,20 +71,7 @@ h1, h2, h3 {
   }
 }
 
-.btn--primary {
-  background: none; // remove gradient bg
-  background-color: $primary;
-  border-color: $primary;
-  &:hover,
-  &:active,
-  &:focus {
-    background: none; // remove gradient bg
-    border-color: darken($primary, 10%);
-    background-color: darken($primary, 10%);
-  }
-}
-
-.form-box,
+.form-box, 
 .alerts__cta-box {
   background-color: $lincs-panel;
 }

diff --git a/web/cobrands/nottinghamshirepolice/base.scss b/web/cobrands/nottinghamshirepolice/base.scss
@@ -20,7 +20,6 @@ h1, h2, h3 {
 .postcode-form-box input#sub,
 #report-cta {
   @include button-variant($bg-top: $button-primary-bg-top, $bg-bottom: $button-primary-bg-bottom, $border: $button-primary-border, $text: $button-primary-text, $hover-bg-bottom: $button-primary-hover-bg-bottom, $hover-bg-top: $button-primary-hover-bg-top, $hover-border: $button-primary-hover-border, $hover-text: $button-primary-hover-text,$focus-bg-bottom: $button-primary-focus-bg-bottom, $focus-bg-top: $button-primary-focus-bg-top, $focus-border: $button-primary-focus-border, $focus-text: $button-primary-focus-text);
-  border-radius: $button-border-radius;
   @include button-size();
   text-decoration: none; // For #report-cta
   font-size: 1.25rem;

diff --git a/web/cobrands/peterborough/_colours.scss b/web/cobrands/peterborough/_colours.scss
@@ -60,3 +60,24 @@ $postcodeform-color: $primary_b;
 $postcodeform-color-desktop: $primary_b;
 
 $mobile-sticky-sidebar-button-menu-image: "menu-white";
+
+$button-border-radius: 0.25em;
+$button-padding-top: .55em;
+$button-padding-bottom: .55em;
+$button-padding-left: 1em;
+$button-padding-right: 1em;
+
+$button-primary-bg-top: $primary;
+$button-primary-bg-bottom: $primary;
+$button-primary-border: $primary;
+$button-primary-text: $white;
+
+$button-primary-hover-bg-top: darken($green, 5%);
+$button-primary-hover-bg-bottom:darken($green, 5%);
+$button-primary-hover-border: darken($green, 5%);
+$button-primary-hover-text: $white;
+
+$button-primary-focus-bg-top: $primary;
+$button-primary-focus-bg-bottom: $primary;
+$button-primary-focus-border: $primary;
+$button-primary-focus-text: $white;
diff --git a/web/cobrands/peterborough/base.scss b/web/cobrands/peterborough/base.scss
@@ -33,18 +33,19 @@ h1, h2 {
     color: $alt-green;
 }
 
-.btn--primary, .btn-secondary {
+.btn-secondary {
     border: 0.2em solid $primary;
-    padding: 0.55em 1em;
-    border-radius: 0.25em;
+    @include button-size();
     text-decoration: none !important;
     font-weight: bold;
     line-height: 100%;
     font-size: 1em;
+}
 
+.btn--primary, .btn-secondary {
     &:focus {
+        outline: transparent;
         box-shadow: #4c9aff 0px 0px 0px 3px;
-        outline: none;
     }
 }
 
@@ -62,20 +63,6 @@ h1, h2 {
     }
 }
 
-.btn--primary {
-    background: $primary;
-
-    &:hover,
-    &:active {
-        background: darken($green, 5%);
-        border-color: darken($green, 5%);
-    }
-
-    &:focus {
-        color: $primary_text;
-        background: $primary;
-    }
-}
 
 .btn-secondary, input.btn-secondary {
     color: $primary ;

diff --git a/web/cobrands/shropshire/_colours.scss b/web/cobrands/shropshire/_colours.scss
@@ -48,6 +48,21 @@ $dropzone-button-text: $shropshire-white;
 $front-main-container-background-desktop: $shropshire-white;
 $postcodeform-background: transparent;
 
+$button-primary-bg-top: $primary;
+$button-primary-bg-bottom: $primary;
+$button-primary-border: $primary;
+$button-primary-text: $shropshire-white;
+
+$button-primary-hover-bg-top:$shropshire-dark-blue;
+$button-primary-hover-bg-bottom:$shropshire-dark-blue;
+$button-primary-hover-border:$shropshire-dark-blue;
+$button-primary-hover-text: $shropshire-white;
+
+$button-primary-focus-bg-top: #ffe100;
+$button-primary-focus-bg-bottom: #ffe100;
+$button-primary-focus-border: $button-primary-border;
+$button-primary-focus-text: #222;
+
 @mixin shropshire-form-input($margin: 0.5em 0, $padding: 5px) {
     margin: $margin;
     padding: $padding;
@@ -68,30 +83,17 @@ $postcodeform-background: transparent;
 }
 
 @mixin shropshire-button-primary($padding: 0.33em 1em, $font-size: 1em, $line-height: 1.5em) {
-    border: none;
+    @include button-variant();
     font-weight: normal;
-
     text-align: center;
     font-size: $font-size;
     line-height: $line-height;
     padding: $padding;
-    border-radius: 4px;
-    border: 2px solid $shropshire-blue;
-    background: $shropshire-blue;
-    color: #fff !important;
+    border-width: 2px;
 
     &:focus {
-        border: 2px solid $shropshire-dark-blue;
-        background: $shropshire-dark-blue;
-        color: #fff !important;
         outline: solid 3px $shropshire-yellow;
     }
-
-    &:hover {
-        border: 2px solid $shropshire-dark-blue;
-        background: $shropshire-dark-blue;
-        color: #fff !important;
-    }
 }
 
 @mixin shropshire-button-secondary($padding: 0.33em 1em, $font-size: 1em, $line-height: 1.5em) {

diff --git a/web/cobrands/westminster/_buttons.scss b/web/cobrands/westminster/_buttons.scss
@@ -18,15 +18,7 @@
   font-family: $body-font;
   font-size: 1.1em;
   line-height: 1.4;
-  color: #fff !important;
   font-weight: 600;
-  padding: .9em 1em;
-  background: $westminster_blue_btns;
-  border: none;
-  border-radius: 4.5px;
   -webkit-font-smoothing: antialiased;
   cursor: pointer;
-  &:hover {
-    background: $westminster_blue_btns_hover;
-  }
 }