Buttons

gistfile1.scss

// Buttons
$btn-font-weight:               normal;

$btn-font-size:					14px;
$btn-large-font-size:			18px;

$btn-base-color:              	white;
$btn-base-bg:                 	$brand-tertiary;

$btn-primary-color:             white;
$btn-primary-bg:                $brand-primary;

$btn-secondary-color:           $brand-primary;
$btn-secondary-bg:              white;

$btn-tertiary-color:           	$base-font-color;
$btn-tertiary-bg:              	white;

$btn-border:					$base-border-size;

$btn-padding-vertical: 			13px;
$btn-padding-horizontal: 		$btn-padding-vertical*1.5;

$btn-small-padding-vertical: 	$btn-padding-vertical*0.5;
$btn-small-padding-horizontal: 	$btn-padding-horizontal*0.5;

$btn-large-padding-vertical: 	$btn-padding-vertical*1.5;
$btn-large-padding-horizontal: 	$btn-padding-horizontal*2;

$btn-huge-padding-vertical: 	$btn-padding-vertical*2;
$btn-huge-padding-horizontal: 	$btn-padding-horizontal*1.4;


// Button variants

@mixin button-variant($color, $background) {
  color: $color;
  background-color: $background;

  &:hover {
    color: $color;
    background-color: darken($background, 10%);
  }
  &:focus,
  &:active,
  &.active {
    color: $color;
    background-color: darken($background, 15%);
    outline: 0;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.btn--active {
      background-color: $background;
      opacity: 0.5;
      color: white;
      cursor: not-allowed;
    }
  }

  &.btn--outlined {
    color: $color;
    background-color: transparent;
    border: $btn-border solid $background;

    &:hover {
      color: lighten($color, 5%);
      background-color: transparent;
      border-color: lighten($background, 5%);
    }

    &.btn--primary:hover {
      color: $base-font-color;
      background-color: $background;
      border-color: $background;
    }
  }

}

// Button sizes
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height) {
  padding: $padding-vertical $padding-horizontal $padding-vertical;
  font-size: $font-size;
  line-height: $line-height;

  .btn__icon--left {
    margin-right: $padding-horizontal*0.5;
  }
  .btn__icon--right {
    margin-left: $padding-horizontal*0.5;
  }

  &.btn--outlined {
    padding-top: ($padding-vertical - 4);
    padding-bottom: ($padding-vertical - 4);
  }
}


.btn {
  -webkit-font-smoothing: antialiased;
  border-radius: $base-border-radius;
  color: white;
  display: inline-block;
  font-family: $header-font-family;
  font-weight: $btn-font-weight;
  font-size: rem($btn-font-size);
  letter-spacing: 0.05rem;
  text-decoration: none;
  text-align: center;
  touch-action: manipulation;
  background-image: none;
  border: 0;
  border: none;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 80px;
  text-transform: uppercase;

  @include appearance(none);
  @include transition(all 0.2s ease-in-out);
  @include button-size($btn-padding-vertical, $btn-padding-horizontal, $btn-font-size, 1);
  @include button-variant($btn-base-color, $btn-base-bg);
}

// Button Styles
.btn--primary {
  @include button-variant($btn-primary-color, $btn-primary-bg);
}
.btn--secondary {
  @include button-variant($btn-secondary-color, $btn-secondary-bg);
}
.btn--tertiary {
  @include button-variant($btn-tertiary-color, $btn-tertiary-bg);
}

.btn--outlined {
  @include button-variant($btn-base-bg, $btn-base-bg);
  &.btn--primary {
    @include button-variant(white, white);
  }
}

.btn--empty {
  @include button-variant($base-font-color, transparent);
  border-radius: 0;
  position: relative;

  &:hover {
    @include button-variant($base-font-color, transparent);
    border-radius: 0;
  }
}


.btn--full {
  display: block;
  width: 100%;
}
.btn--wide {
  width: 260px;
}
.btn--hard {
  border-radius: 0;
}
.btn--natural {
  vertical-align: baseline;
  @include button-size(0, $btn-small-padding-horizontal, $btn-font-size, inherit);
}

// Button Sizes
.btn--small {
  @include button-size($btn-small-padding-vertical, $btn-small-padding-horizontal, $btn-font-size, 1);
}
.btn--large {
  @include button-size($btn-large-padding-vertical, $btn-large-padding-horizontal, $btn-font-size, 1);
}
.btn--huge {
  @include button-size($btn-huge-padding-vertical, $btn-huge-padding-horizontal, $btn-font-size, 1);
}

// Buttons with text increases
.btn--alpha {
  @include button-size($btn-huge-padding-vertical, $btn-huge-padding-horizontal, $btn-large-font-size, 1);
}
.btn--beta {
  @include button-size($btn-large-padding-vertical, $btn-large-padding-horizontal, $btn-large-font-size, 1);
}


// Button icons
.btn__icon {
  @extend %icon;
  vertical-align: middle;
  display: inline-block;
}