Permalink
142 lines (118 sloc) 2.63 KB
@import '../shims';
@import '../css3';
@import '../conditionals';
@import '../colours';
// Mixin and defaults for making buttons on GOV.UK services.
// For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
// Example usage:
// .button{
// @include button;
// }
// .button-secondary{
// @include button($grey-3);
// }
// .button-warning{
// @include button($red);
// }
@mixin button($colour: $button-colour) {
// Colour
background-color: $colour;
// Size and shape
position: relative;
@include inline-block;
padding: .526315em .789473em .263157em; // 10px 15px 5px
border: none;
@include border-radius(0);
-webkit-appearance: none;
// Bottom edge effect
@include box-shadow(0 2px 0 darken($colour, 15%));
@include ie-lte(8) {
border-bottom: 2px solid darken($colour, 15%);
}
// Text
font-size: 1em; // inherit from parent
line-height: 1.25;
text-decoration: none;
-webkit-font-smoothing: antialiased;
// Interaction
cursor: pointer;
&:visited {
background-color: $colour;
}
&:hover,
&:focus {
background-color: darken($colour, 5%);
}
&:active {
top: 2px;
@include box-shadow(0 0 0 $colour);
}
// Disabled button styles
&.disabled,
&[disabled="disabled"],
&[disabled] {
@include opacity(0.5);
&:hover {
cursor: default;
background-color: $colour;
}
&:active {
top: 0;
@include box-shadow(0 2px 0 darken($colour, 15%));
@include ie-lte(8) {
border-bottom: 2px solid darken($colour, 15%);
}
}
}
// Set text colour depending on background colour
@if lightness($colour) < 50% {
color: $white;
&:link,
&:hover,
&:focus,
&:visited {
color: $white;
}
} @else {
color: $text-colour;
&:link,
&:hover,
&:focus,
&:visited {
color: $text-colour;
}
}
// making the click target bigger than the button
// (and fill the space made when the button moves)
&:before {
content: "";
height: 110%;
width: 100%;
display: block;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
&:active:before {
top: -10%;
height: 120%;
// IE6 ignores the :before psuedo-class but applies the block to :active
// It therefore needs to be reset
@include ie(6) {
top: auto;
height: 100%;
}
}
// Fixes a bug where IE puts a black border around certain elements
@include ie-lte(8) {
&[type="submit"],
&[type="reset"],
&[type="button"] {
filter: chroma(color = $black);
}
&[type=submit].button {
filter: none;
}
}
}