@import "../../settings/all"; @import "../../tools/all"; @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%); $govuk-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; -webkit-box-sizing: border-box; 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; -webkit-box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-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; -webkit-box-shadow: none; box-shadow: none; @include govuk-if-ie8 { border-bottom-width: 0; } } // The following adjustments do not work for 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); background: $govuk-button-colour; &:hover { background-color: $govuk-button-colour; cursor: default; } &:focus { outline: none; } &:active { top: 0; -webkit-box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; 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--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 } }