mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-01 20:10:16 -04:00
348e29fb40
- Deleted /stylesheets folder - Removed sass build from gulpfile - Changed gov links to usa links - Changed other govuk styles, like breadcrumbs - Changed name of uk_components file to us_components - Fixed a few tests that broke on account of the changes
257 lines
8.2 KiB
SCSS
257 lines
8.2 KiB
SCSS
@import "../../settings/all";
|
|
@import "../../tools/all";
|
|
@import "../../helpers/all";
|
|
|
|
@include govuk-exports("govuk/component/button") {
|
|
// Primary button variables
|
|
$govuk-button-colour: #00823b; // sass-lint:disable no-color-literals
|
|
$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");
|
|
$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).
|
|
$button-shadow-size: $govuk-border-width-form-element;
|
|
|
|
.govuk-button {
|
|
@include govuk-font($size: 19, $line-height: 19px);
|
|
@include govuk-focusable;
|
|
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 100%;
|
|
margin-top: 0;
|
|
@include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
|
|
padding: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)) govuk-spacing(2); // s1
|
|
border: $govuk-border-width-form-element solid transparent;
|
|
border-radius: 0;
|
|
color: $govuk-button-text-colour;
|
|
background-color: $govuk-button-colour;
|
|
box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
|
|
text-align: center;
|
|
vertical-align: top;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
|
|
@include govuk-if-ie8 {
|
|
border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
|
|
}
|
|
|
|
@include govuk-media-query($from: tablet) {
|
|
width: auto;
|
|
}
|
|
|
|
// Ensure that any global link styles are overridden
|
|
&:link,
|
|
&:visited,
|
|
&:active,
|
|
&:hover {
|
|
color: $govuk-button-text-colour;
|
|
text-decoration: none;
|
|
}
|
|
|
|
// 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-button-text-colour;
|
|
}
|
|
}
|
|
|
|
// Fix unwanted button padding in Firefox
|
|
&::-moz-focus-inner {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $govuk-button-hover-colour;
|
|
}
|
|
|
|
&:active {
|
|
top: $button-shadow-size;
|
|
box-shadow: none;
|
|
|
|
@include govuk-if-ie8 {
|
|
border-bottom-width: 0;
|
|
}
|
|
}
|
|
|
|
// The following adjustments do not work for <input type="button"> as
|
|
// non-container elements cannot include pseudo elements (i.e. ::before).
|
|
|
|
// Use a pseudo element to expand the click target area to include the
|
|
// button's shadow as well, in case users try to click it.
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
top: -$govuk-border-width-form-element;
|
|
right: -$govuk-border-width-form-element;
|
|
bottom: -($govuk-border-width-form-element + $button-shadow-size);
|
|
left: -$govuk-border-width-form-element;
|
|
|
|
background: transparent;
|
|
}
|
|
|
|
// When the button is active it is shifted down by $button-shadow-size to
|
|
// denote a 'pressed' state. If the user happened to click at the very top
|
|
// of the button, their mouse is no longer over the button (because it has
|
|
// 'moved beneath them') and so the click event is not fired.
|
|
//
|
|
// This corrects that by shifting the top of the pseudo element so that it
|
|
// continues to cover the area that the user originally clicked, which means
|
|
// the click event is still fired.
|
|
//
|
|
// 🎉
|
|
&:active::before {
|
|
top: -($govuk-border-width-form-element + $button-shadow-size);
|
|
}
|
|
}
|
|
|
|
.govuk-button--disabled,
|
|
.govuk-button[disabled="disabled"],
|
|
.govuk-button[disabled] {
|
|
opacity: (.5);
|
|
|
|
&:hover {
|
|
background-color: $govuk-button-colour;
|
|
cursor: default;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:active {
|
|
top: 0;
|
|
box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
|
|
@include govuk-if-ie8 {
|
|
border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
&[disabled] {
|
|
background-color: $govuk-secondary-button-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;
|
|
|
|
&[disabled] {
|
|
background-color: $govuk-warning-button-colour;
|
|
}
|
|
}
|
|
}
|
|
|
|
.govuk-button--start {
|
|
@include govuk-typography-weight-bold;
|
|
@include govuk-typography-responsive($size: 24, $override-line-height: 1);
|
|
|
|
min-height: auto;
|
|
padding-top: govuk-spacing(2) - $govuk-border-width-form-element;
|
|
padding-right: govuk-spacing(7);
|
|
padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element;
|
|
padding-left: govuk-spacing(3);
|
|
|
|
background-image: govuk-image-url("icon-pointer.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 100% 50%;
|
|
|
|
@include govuk-device-pixel-ratio {
|
|
background-image: govuk-image-url("icon-pointer-2x.png");
|
|
background-size: 30px 19px;
|
|
}
|
|
}
|
|
|
|
// Begin adjustments for font baseline offset
|
|
// These should be removed when the font is updated with the correct baseline
|
|
// For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428
|
|
|
|
$offset: 2;
|
|
|
|
.govuk-button {
|
|
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
|
|
}
|
|
|
|
.govuk-button--start {
|
|
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
|
|
}
|
|
}
|