_buttons.scss

@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);
  outline: 1px solid transparent; // keep some button appearance when changing colour settings in browsers
  outline-offset: -1px; // fixes bug in Safari that outline width on focus is not overwritten, is reset to 0 on focus in govuk_template
  -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,
    &:link:focus,
    &:hover,
    &:focus,
    &:visited {
      color: $white;
    }
  } @else {
    color: $text-colour;

    &:link,
    &:link:focus,
    &: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;
    }
  }
}