Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added btn--primary class to "Continue" button in New report page #4943

Merged
merged 3 commits into from
Nov 4, 2024
Merged

Added btn--primary class to "Continue" button in New report page #4943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2b75182
Added btn--primary class to "Continue" button in New page
lucascumsille May 1, 2024
0ce674f
Added variable to adjust border-radius in buttons
lucascumsille May 7, 2024
bc0538e
Tidy up btn-primary usage
lucascumsille May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions templates/web/base/report/new/form_report.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
[% PROCESS "report/new/category_wrapper.html" %]
[% TRY %][% PROCESS 'report/new/after_category.html' %][% CATCH file %][% END %]

<button class="btn btn--block btn--final hidden-nojs js-reporting-page--next"
<button class="btn btn--block btn--final btn--primary hidden-nojs js-reporting-page--next"
[% ' disabled' IF disable_form_message %]>[% loc('Continue') %]</button>
</div>

Expand All @@ -32,7 +32,7 @@
</div>

<div class="js-post-category-messages"></div>
<button class="btn btn--block btn--final hidden-nojs js-reporting-page--next">[% loc('Continue') %]</button>
<button class="btn btn--block btn--final btn--primary hidden-nojs js-reporting-page--next">[% loc('Continue') %]</button>
</div>

[% PROCESS "report/new/duplicate_suggestions.html" %]
Expand All @@ -43,7 +43,7 @@
[% PROCESS "report/new/category_extras.html" %]
[% END %]
<div class="js-post-category-messages"></div>
<button class="btn btn--block btn--final hidden-nojs js-reporting-page--next">[% loc('Continue') %]</button>
<button class="btn btn--block btn--final btn--primary hidden-nojs js-reporting-page--next">[% loc('Continue') %]</button>
</div>

[% IF form_show_category_only %]
Expand All @@ -61,7 +61,7 @@
[% PROCESS 'report/form/photo_upload.html' type='report' %]
[% PROCESS 'report/new/after_photo.html' %]

<button class="btn btn--block btn--final hidden-nojs js-reporting-page--next">[% loc('Continue') %]</button>
<button class="btn btn--block btn--final btn--primary hidden-nojs js-reporting-page--next">[% loc('Continue') %]</button>
</div>
[% END %]

Expand Down
13 changes: 13 additions & 0 deletions web/cobrands/bexley/_colours.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
11 changes: 0 additions & 11 deletions web/cobrands/bexley/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
13 changes: 12 additions & 1 deletion web/cobrands/bromley/_colours.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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;
7 changes: 0 additions & 7 deletions web/cobrands/bromley/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
8 changes: 1 addition & 7 deletions web/cobrands/camden/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
9 changes: 9 additions & 0 deletions web/cobrands/cheshireeast/_colours.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
11 changes: 0 additions & 11 deletions web/cobrands/cheshireeast/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,17 +75,6 @@ a,
}
}

.btn--primary {
border: none;
background: $col_button;

&:focus,
&:hover,
&:active {
background: $col_button_hover;
}
}

.box-warning {
background-color: #ecf3ec;
}
Expand Down
6 changes: 3 additions & 3 deletions web/cobrands/gloucestershire/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
/*
Expand Down
4 changes: 0 additions & 4 deletions web/cobrands/gloucestershire/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
9 changes: 9 additions & 0 deletions web/cobrands/highwaysengland/_colours.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
9 changes: 0 additions & 9 deletions web/cobrands/highwaysengland/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
9 changes: 9 additions & 0 deletions web/cobrands/hounslow/_colours.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
10 changes: 0 additions & 10 deletions web/cobrands/hounslow/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions web/cobrands/lincolnshire/_colours.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

15 changes: 1 addition & 14 deletions web/cobrands/lincolnshire/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
1 change: 0 additions & 1 deletion web/cobrands/nottinghamshirepolice/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
21 changes: 21 additions & 0 deletions web/cobrands/peterborough/_colours.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
23 changes: 5 additions & 18 deletions web/cobrands/peterborough/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand All @@ -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 ;
Expand Down
Loading
Loading