_c-button.scss

/* ============================================================================
   @COMPONENTS -> BUTTON
   ========================================================================= */


/**
 * Main button component with a bunch of modifiers plus an optional 'Grouping'
 * option.
 *
 * The base component class and all of its modifiers:
 *
   .c-button
     .c-button--secondary
     .c-button--tiny
     .c-button--small
     .c-button--large
     .c-button--huge
     .c-button--full-bleed
 *
 * The 'Grouping' option base class and all of its modifiers:
 *
   .c-button-group
     .c-button-group--vertical
 *
 * @markup
   <button class="c-button [modifier(s)]">Button text</button>
 *
 * 'Grouping' option:
 *
 * N.B. grouping buttons requires that you remove the whitespace between the
 * buttons so they're flush to each other, one way to do this is by inserting
 * HTML comments between the buttons.
 *
   <div class="c-button-group">
     <button class="c-button [modifier(s)]">Button text</button><!--
     --><button class="c-button [modifier(s)]">Button text</button><!--
     --><button class="c-button [modifier(s)]">Button text</button>
   </div>

   <div class="c-button-group c-button-group--vertical">
     <button class="c-button c-button--full-bleed [modifier(s)]">Button text</button><!--
     --><button class="c-button c-button--full-bleed [modifier(s)]">Button text</button><!--
     --><button class="c-button c-button--full-bleed [modifier(s)]">Button text</button>
   </div>
 *
 * @dependency
 * This component is dependent on the Button object therefore it is
 * `@extend`ed from this component.
 */


/**
 * Settings.
 */

/**
 * Toggle on/off certain styles and treatments.
 */

$c-button-apply-hover-styles:                 true !default;

$c-button-apply-border:                       false !default;

$c-button-apply-rounded-corners:              true !default;

$c-button-apply-group:                        false !default;

$c-button-apply-group-rounded-corners:        true !default;

/**
 * Box sizing, here we set a variable assuming that `box-sizing: border-box;`
 * is not set globally. If it has been previously been defined, the following
 * variable will be overridden and will be set to `true`.
 */

$apply-friendly-box-model:                    false !default;

/**
 * Colours.
 */

$c-button-background-color:                   $color-primary !default;

$c-button-background-color-secondary:         $color-secondary !default;

$c-button-foreground-color:                   $color-white !default;

$c-button-foreground-color-secondary:         $c-button-foreground-color !default;

/**
 * Padding.
 */

$c-button-padding-base:                       $spacing-base !default;

$c-button-padding-tiny:                       $spacing-third !default;

$c-button-padding-small:                      $spacing-half !default;

$c-button-padding-large:                      $spacing-base-plus-half !default;

$c-button-padding-huge:                       $spacing-double !default;

/**
 * Border.
 *
 * N.B. also includes the borders used in the 'Grouping' option.
 */

$c-button-border-thickness:                   1 !default;

$c-button-border-style:                       solid !default;

$c-button-border-color:
darken($c-button-background-color, 10%) !default;

$c-button-border-color-secondary:
darken($c-button-background-color-secondary, 10%) !default;

/**
 * Rounded corners.
 */

$c-button-rounded-corners-size:               $border-radius !default;

/**
 * Hover/focus styles, simple fade out effect via `opacity`
 */

$c-button-hover-opacity-strength:             0.7 !default;

$c-button-hover-transition-duration:          0.15s !default;

$c-button-hover-transition-timing-function:   linear !default;


.c-button {
  @extend %o-button;
  text-align: center;
  background-color: $c-button-background-color;
  @include to-rem(padding, $c-button-padding-base / 2 $c-button-padding-base);

  // Apply a border
  @if $c-button-apply-border {
    border: strip-unit($c-button-border-thickness) * 1px $c-button-border-style
      $c-button-border-color;
  }

  // Apply rounded corners
  @if $c-button-apply-rounded-corners {
    // N.B. ugly hack in order to increase the specificity to override the
    // removal of rounded corners that iOS applies set in Core -> Base ->
    // Forms
    html & {border-radius: strip-unit($c-button-rounded-corners-size) * 1px;}
  }

  // Foreground colour
  &,
  &:hover,
  &:focus,
  &:active {
    color: $c-button-foreground-color;
  }

  // Apply hover/focus styles
  @if $c-button-apply-hover-styles {
    transition: opacity $c-button-hover-transition-duration
      $c-button-hover-transition-timing-function;

    &:hover,
    &:focus {
      opacity: $c-button-hover-opacity-strength;
    }
  }
}


/**
 * Modifier: secondary colour.
 */

.c-button--secondary {
  background-color: $c-button-background-color-secondary;

  // Apply a border
  @if $c-button-apply-border {
    border-color: $c-button-border-color-secondary;
  }

  // Foreground colour
  &,
  &:hover,
  &:focus,
  &:active {
    color: $c-button-foreground-color-secondary;
  }
}


/**
 * Modifier: tiny padding.
 */

.c-button--tiny {
  @include to-rem(padding, $c-button-padding-tiny / 2 $c-button-padding-tiny);
}


/**
 * Modifier: small padding.
 */

.c-button--small {
  @include to-rem(padding, $c-button-padding-small / 2 $c-button-padding-small);
}


/**
 * Modifier: large padding.
 */

.c-button--large {
  @include to-rem(padding, $c-button-padding-large / 2 $c-button-padding-large);
}


/**
 * Modifier: huge padding.
 */

.c-button--huge {
  @include to-rem(padding, $c-button-padding-huge / 2 $c-button-padding-huge);
}


/**
 * Modifier: full bleed.
 */

.c-button--full-bleed {
  display: block;
  width: 100%;

  @if $apply-friendly-box-model == false {
    // Remove paddings so that widths and paddings don't conflict however if
    // you're applying a border then that *will* conflict with the width but
    // Scally cannot help you in this case
    padding-right: 0;
    padding-left: 0;
  }
}


/**
 * Button group (optional).
 *
 * When you want to group a bunch of buttons side-by-side flush to each other
 * i.e. with no gap between the buttons. To differentiate between the buttons
 * a border is added.
 */

@if $c-button-apply-group {
  .c-button-group {

    .c-button {

      @if $c-button-apply-border == false {
        border: $c-button-border-thickness $c-button-border-style
          $c-button-border-color;
      }

      // Turn off right borders so they don't double up, except for the last
      // one
      &:not(:last-child) {
        border-right: 0;
      }

      // Turn off rounded corners if rounded corners are on by default as only
      // the first and last buttons in the group need rounded corners
      @if $c-button-apply-rounded-corners {
        border-radius: 0;
      }

      // Round off the first and last buttons in the group
      @if $c-button-apply-group-rounded-corners or
      $c-button-apply-rounded-corners {
        &:first-child {
          border-top-left-radius: strip-unit($c-button-rounded-corners-size) * 1px;
          border-bottom-left-radius: strip-unit($c-button-rounded-corners-size) * 1px;
        }

        &:last-child {
          border-top-right-radius: strip-unit($c-button-rounded-corners-size) * 1px;
          border-bottom-right-radius: strip-unit($c-button-rounded-corners-size) * 1px;
        }
      }

    }


    /**
     * Modifier: vertically stacked button group.
     *
     * N.B. buttons within the vertically stacked version need to use the
     * `button--full-bleed` modifier.
     */

    &.c-button-group--vertical {
      // This will shrink wrap the container to be as wide as the widest button
      display: inline-block;

      .c-button {

        // Turn back on the right border that gets turned off by default
        border-right: $c-button-border-thickness $c-button-border-style
        $c-button-border-color;

        // Turn off bottom borders so they don't double up, except for the last
        // one
        &:not(:last-child) {
          border-bottom: 0;
        }

        // Round off the first and last buttons in the group
        @if $c-button-apply-group-rounded-corners or
        $c-button-apply-rounded-corners {
          &:first-child {
            border-bottom-left-radius: 0;
            border-top-left-radius: strip-unit($c-button-rounded-corners-size) * 1px;
            border-top-right-radius: strip-unit($c-button-rounded-corners-size) * 1px;
          }

          &:last-child {
            border-top-right-radius: 0;
            border-bottom-left-radius: strip-unit($c-button-rounded-corners-size) * 1px;
            border-bottom-right-radius: strip-unit($c-button-rounded-corners-size) * 1px;
          }
        }
      }
    }
  }
}