button.scss

/* ------------------------------------ *\
   Button
\* ------------------------------------ */

// Dev Notes
// 1. [Morse] This mixin outputs a separate ruleset for each selector to prevent IE from failing on unrecognized selectors like `:host`. It is not a substitute for comma-separated selectors.
// 2. [Morse] Bolt-link delegates focus to inner element.

@import '@bolt/core';
@import './button-settings-and-tools';

/**
 * Base Button
 */
@include bolt-repeat-rule(('bolt-button', ':host')) {
  // [1]
  display: inline-flex;
  outline: none; // [2]

  &[type="button"],
  &[type="reset"],
  &[type="submit"] {
    appearance: none;
  }
}

.c-bolt-button {
  @include bolt-button;
}

/**
 * Button Styles
 */
.c-bolt-button--primary {
  @include bolt-button-style(primary);
  @include bolt-button-raised-effect;
}

.c-bolt-button--secondary {
  @include bolt-button-style(secondary);
  @include bolt-button-raised-effect;
}

.c-bolt-button--text {
  @include bolt-button-style(text);
}

[aria-disabled='true'] .c-bolt-button,
.c-bolt-button[disabled],
.c-bolt-button--disabled {
  @include bolt-button-style(disabled);
}

/**
 * Button Text Transform
 */
.c-bolt-button--uppercase {
  text-transform: uppercase;
}

.c-bolt-button--lowercase {
  text-transform: lowercase;
}

.c-bolt-button--capitalize {
  text-transform: capitalize;
}

@function bolt-button-icon-only-size($paddingSize, $fontSize: xsmall) {
  $line-height: map-get-deep(
    $bolt-font-sizes,
    'font-sizes',
    $fontSize,
    'line-height',
    'regular'
  );
  $font-size: map-get-deep(
    $bolt-font-sizes,
    'font-sizes',
    $fontSize,
    'font-size'
  );
  @return (bolt-v-spacing($paddingSize) * $bolt-spacing-squished * 2) +
    ($line-height * $font-size);
}

/**
 * Button Sizes
 */
.c-bolt-button--medium {
  @include bolt-padding(medium, squished);
  @include bolt-font-size(xsmall);

  &.c-bolt-button--icon-only {
    width: bolt-button-icon-only-size(medium);
    min-height: bolt-button-icon-only-size(medium);
  }
}

.c-bolt-button--xsmall {
  @include bolt-padding(xsmall, squished);
  @include bolt-font-size(xsmall);

  &.c-bolt-button--icon-only {
    width: bolt-button-icon-only-size(xsmall);
    min-height: bolt-button-icon-only-size(xsmall);
  }
}

.c-bolt-button--small {
  @include bolt-padding(small, squished);
  @include bolt-font-size(xsmall);

  &.c-bolt-button--icon-only {
    width: bolt-button-icon-only-size(small);
    min-height: bolt-button-icon-only-size(small);
  }
}

.c-bolt-button--large {
  @include bolt-padding(medium, squished);
  @include bolt-font-size(medium);

  &.c-bolt-button--icon-only {
    width: bolt-button-icon-only-size(medium, medium);
    min-height: bolt-button-icon-only-size(medium, medium);
  }
}

.c-bolt-button--xlarge {
  @include bolt-padding(large, squished);
  @include bolt-font-size(large);

  &.c-bolt-button--icon-only {
    width: bolt-button-icon-only-size(large, large);
    min-height: bolt-button-icon-only-size(large, large);
  }
}

/**
 * Icon Only Buttons
 */
.c-bolt-button--icon-only {
  @include bolt-padding(0);

  .c-bolt-button__item,
  .c-bolt-button__icon {
    @include bolt-margin(0);
  }

  .c-bolt-button__item {
    opacity: 0;
    width: 0;
    overflow: hidden;
    color: transparent;
    text-indent: -99999em;
    white-space: nowrap;
  }

  .c-bolt-button__icon-sizer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }

  // Scale icon only version's icon size based on button size
  &.c-bolt-button--xsmall {
    .c-bolt-button__icon-sizer {
      font-size: 1em;
    }
  }

  &.c-bolt-button--small {
    .c-bolt-button__icon-sizer {
      font-size: 1.25em;
    }
  }

  &.c-bolt-button--medium {
    .c-bolt-button__icon-sizer {
      font-size: 1.5em;
    }
  }

  &.c-bolt-button--large {
    .c-bolt-button__icon-sizer {
      font-size: 1.75em;
    }
  }

  &.c-bolt-button--xlarge {
    .c-bolt-button__icon-sizer {
      font-size: 2em;
    }
  }
}

/**
 * Button Width
 */
bolt-button[width='full'],
.c-bolt-button--full {
  width: 100%;
}

// :host selector for correctly styling the <bolt-button> element inside other components
// writing this out in a separate selector due to unsupporting browsers throwing out the :host selector
:host([width='full']) {
  width: 100%;
}

// full@small width variations
bolt-button[width='full@small'],
.c-bolt-button--full\@small {
  @include bolt-mq($until: small) {
    width: 100%;
  }
}

// :host selector for correctly styling the <bolt-button> element inside other components
// writing this out in a separate selector due to unsupporting browsers throwing out the :host selector
:host([width='full@small']) {
  @include bolt-mq($until: small) {
    width: 100%;
  }
}

/**
 * Border Radius
 */
@each $radius-name, $radius-value in $bolt-button-border-radii {
  .c-bolt-button--border-radius-#{$radius_name} {
    &,
    &:before {
      border-radius: $radius-value;
    }
  }

  bolt-button[border-radius='#{$radius_name}'] {
    border-radius: $radius-value;
  }
}

/**
 * Icon and text spacing and display
 */
.c-bolt-button__icon {
  display: flex;
}

.c-bolt-button__item {
  display: inline-flex;
  text-align: left;
  text-align: start;
}

.c-bolt-button__icon-sizer {
  display: flex; // This fixes the spacing issue caused by bolt-icon defined as inline-block.
}

// Spacing only applies when there are BOTH text and icon
.c-bolt-button:not(.c-bolt-button--icon-only) {
  .c-bolt-button__item + .c-bolt-button__icon {
    @include bolt-margin-left(xxsmall);
  }

  .c-bolt-button__icon + .c-bolt-button__item {
    @include bolt-margin-left(xxsmall);
  }
}

/**
 * Button Alignments
 */
.c-bolt-button--center {
  justify-content: center;
}

.c-bolt-button--start {
  justify-content: flex-start;
}

.c-bolt-button--end {
  justify-content: flex-end;
}