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

Add 'secondary' and 'warning' action buttons #1207

Merged
merged 3 commits into from
Apr 24, 2019
Merged

Add 'secondary' and 'warning' action buttons #1207

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
a7b74f1
Add tint and shade mixins
Feb 20, 2019
94b76fd
Add modifiers for secondary and warning buttons
Feb 20, 2019
afb9b18
Include ‘compatibility mode’ fix
36degrees Apr 18, 2019
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
79 changes: 74 additions & 5 deletions src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,24 @@
@import "../../helpers/all";

@include govuk-exports("govuk/component/button") {

$govuk-button-colour: #00823b;
$govuk-button-hover-colour: darken($govuk-button-colour, 5%);
$govuk-button-shadow-colour: darken($govuk-button-colour, 15%);
// Primary button variables
$govuk-button-colour: #00823b; // sass-lint:disable no-color-literals
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just wondered why we were using colour literals here? Should it not be a green from the colour platte?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope, the buttons have been their own 'button colour' green for a long time. It's something we're planning to fix with the palette change, but it shouldn't change in this PR.

$govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
$govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
$govuk-button-text-colour: govuk-colour("white");

// Secondary button variables
$govuk-secondary-button-colour: govuk-colour("grey-3");
dashouse marked this conversation as resolved.
Show resolved Hide resolved
$govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
$govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
$govuk-secondary-button-text-colour: govuk-colour("black");

// Warning button variables
$govuk-warning-button-colour: govuk-colour("red");
$govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
$govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
$govuk-warning-button-text-colour: govuk-colour("white");

// Because the shadow (s0) is visually 'part of' the button, we need to reduce
// the height of the button to compensate by adjusting its padding (s1) and
// increase the bottom margin to include it (s2).
Expand Down Expand Up @@ -141,6 +153,64 @@
}
}

.govuk-button--secondary {
background-color: $govuk-secondary-button-colour;
box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;

&,
&:link,
&:visited,
&:active,
&:hover {
color: $govuk-secondary-button-text-colour;
}

// alphagov/govuk_template includes a specific a:link:focus selector
// designed to make unvisited links a slightly darker blue when focussed, so
// we need to override the text colour for that combination of selectors so
// so that unvisited links styled as buttons do not end up with dark blue
// text when focussed.
@include govuk-compatibility(govuk_template) {
&:link:focus {
color: $govuk-secondary-button-text-colour;
}
}

&:hover,
&:focus {
background-color: $govuk-secondary-button-hover-colour;
}
}

.govuk-button--warning {
background-color: $govuk-warning-button-colour;
box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;

&,
&:link,
&:visited,
&:active,
&:hover {
color: $govuk-warning-button-text-colour;
}

// alphagov/govuk_template includes a specific a:link:focus selector
// designed to make unvisited links a slightly darker blue when focussed, so
// we need to override the text colour for that combination of selectors so
// so that unvisited links styled as buttons do not end up with dark blue
// text when focussed.
@include govuk-compatibility(govuk_template) {
&:link:focus {
color: $govuk-warning-button-text-colour;
}
}

&:hover,
&:focus {
background-color: $govuk-warning-button-hover-colour;
}
}

.govuk-button--start {
@include govuk-typography-weight-bold;
@include govuk-typography-responsive($size: 24, $override-line-height: 1);
Expand Down Expand Up @@ -176,5 +246,4 @@
padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
}

}
26 changes: 26 additions & 0 deletions src/components/button/button.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,3 +98,29 @@ examples:
name: focus
text: Focussed
classes: :focus
- name: Secondary
dashouse marked this conversation as resolved.
Show resolved Hide resolved
description: A button for secondary actions
data:
name: secondary
text: Secondary button
classes: govuk-button--secondary
- name: Secondary link
description: A link button for secondary actions
data:
name: secondary
text: Secondary button
href: '/'
classes: govuk-button--secondary
- name: Warning
description: A button for actions that need a warning
data:
name: Warning
text: Warning button
classes: govuk-button--warning
- name: Warning link
description: A link button for actions that need a warning
data:
name: Warning
text: Warning button
href: '/'
classes: govuk-button--warning
22 changes: 22 additions & 0 deletions src/helpers/_colour.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,25 @@
@return map-get($org-colour, colour);
}
}

/// Make a colour darker by mixing it with black
///
/// @param {Colour} $colour - colour to shade
/// @param {Number} $percentage - percentage of `$colour` in returned color
/// @return {Colour}
/// @access public

@function govuk-shade($colour, $percentage) {
@return mix(#000000, $colour, $percentage);
}

/// Make a colour lighter by mixing it with white
///
/// @param {Colour} $colour - colour to tint
/// @param {Number} $percentage - percentage of `$colour` in returned color
/// @return {Colour}
/// @access public

@function govuk-tint($colour, $percentage) {
@return mix(govuk-colour("white"), $colour, $percentage);
}