wagtail/client/scss/components/_button.scss

// stylelint-disable max-nesting-depth

// Core button styles

@use 'sass:color';

.button {
  border-radius: theme('borderRadius.sm');
  width: auto;
  height: 2.25em;
  padding: 0 1em;
  font-size: theme('fontSize.14');
  font-weight: theme('fontWeight.normal');
  line-height: 2.25em;
  vertical-align: middle;
  display: inline-block;
  background-color: $color-button;
  border: 1px solid $color-button;
  color: $color-white;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-sizing: content-box;
  transition: background-color 0.1s ease;
  // stylelint-disable-next-line property-no-vendor-prefix
  -moz-appearance: none;
  -webkit-font-smoothing: auto;

  + .button {
    // ensure buttons can sit next to each other with a nice margin
    margin-inline-start: theme('spacing.4');
  }

  &.button-small {
    padding: 0 0.8em;
    height: 2em;
    font-size: calc(theme('fontSize.14') * 0.87);
    line-height: 2em;
  }

  &.button-secondary {
    color: $color-button;
    background-color: transparent;
  }

  &.yes {
    background-color: $color-button-yes;
    border: 1px solid $color-button-yes;

    &.button-secondary {
      border: 1px solid $color-button-yes;
      color: $color-button-yes;
      background-color: transparent;
    }

    &:hover {
      color: $color-white;
      border-color: transparent;
      background-color: $color-button-yes;
    }
  }

  &.warning {
    background-color: $color-button-warning;
    border: 1px solid $color-button-warning;

    &.button-secondary {
      border: 1px solid $color-button-warning;
      color: $color-button-warning;
      background-color: transparent;
    }

    &:hover {
      color: $color-white;
      border-color: transparent;
      background-color: $color-button-warning;
    }
  }

  &.no,
  &.serious {
    background-color: $color-button-no;
    border: 1px solid $color-button-no;

    &.button-secondary {
      border: 1px solid $color-button-no;
      color: $color-button-no;
      background-color: transparent;
    }

    &:hover {
      color: $color-white;
      border-color: transparent;
      background-color: $color-button-no;
    }
  }

  &.bicolor {
    border: 1px solid transparent;
    padding-inline-start: 3.5em;

    &:before {
      // iconfont
      font-size: theme('fontSize.15');
      position: absolute;
      inset-inline-start: 0;
      top: 0;
      width: 2em;
      line-height: inherit;
      height: 100%;
      text-align: center;
      background-color: theme('colors.black-20');
      display: block;
      // Remove once we drop support for Safari 14.
      // stylelint-disable-next-line property-disallowed-list
      border-top-left-radius: inherit;
      border-start-start-radius: inherit;
      // Remove once we drop support for Safari 14.
      // stylelint-disable-next-line property-disallowed-list
      border-bottom-left-radius: inherit;
      border-end-start-radius: inherit;
    }

    .icon-wrapper {
      background-color: theme('colors.black-20');
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      inset-inline-start: 0;
      top: 0;
      width: 3em;
      height: 100%;
      box-sizing: content-box;
      text-align: center;
      // Remove once we drop support for Safari 14.
      // stylelint-disable-next-line property-disallowed-list
      border-top-left-radius: inherit;
      border-start-start-radius: inherit;
      // Remove once we drop support for Safari 14.
      // stylelint-disable-next-line property-disallowed-list
      border-bottom-left-radius: inherit;
      border-end-start-radius: inherit;
    }

    &.button--icon {
      &:before {
        display: none; // TODO: remove once the icon font styles are gone
      }

      .icon {
        @include svg-icon(1.5em);
      }
    }

    &.button--icon-flipped {
      .icon {
        transform: scaleX(-1);
      }
    }

    &.button-secondary {
      border: 1px solid theme('colors.black-20');
    }

    &.button-small {
      padding-inline-start: 3.5em;

      .icon-wrapper {
        width: theme('spacing.8');
      }

      &.button--icon .icon {
        @include svg-icon(0.9rem);
        padding: 0.25em;
      }
    }
  }

  &.button-longrunning {
    span {
      // iconfont
      @include transition(all 0.3s ease);
      transform: scale(0.9);
      display: inline-block;
      height: 1em;
      position: relative;
      opacity: 0;
      width: 0;
      visibility: hidden;
      text-align: center;
      padding-inline-end: 0;
    }

    em {
      font-style: normal;
    }

    span.icon-spinner:after {
      // iconfont
      text-align: center;
      position: absolute;
      inset-inline-start: 0;
      margin: 0;
      line-height: 1em;
      display: inline-block;
      font-size: 1em;
    }

    svg.icon-spinner {
      @include transition(all 0.3s ease);
      display: none;
    }
  }

  &.button-longrunning-active {
    display: inline-flex;
    align-items: center;

    span {
      // iconfont
      transform: scale(1);
      visibility: visible;
      width: 1em;
      height: 1em;
      opacity: 0.8;
      padding-inline-end: 0.5em;
    }

    svg.icon-spinner {
      @include svg-icon();
      display: inline-block;
      opacity: 0.8;
      padding: 0;
    }

    .button-longrunning__icon {
      display: none;
    }
  }

  // Base hover state
  &:hover {
    background-color: $color-button-hover;
    color: $color-white;
    border-color: transparent;
  }

  // Disabled state
  &:disabled,
  &[disabled],
  &.disabled {
    background-color: $color-grey-3;
    border-color: $color-grey-3;
    color: $color-grey-2;
    cursor: default;

    @media (forced-colors: active) {
      color: GrayText;
      border-color: GrayText;
      border-style: dashed;
    }
  }

  &.button-secondary:disabled,
  &.button-secondary[disabled],
  &.button-secondary.disabled {
    background-color: $color-white;
    border-color: $color-grey-3;
    color: $color-grey-3;
  }

  // Buttons which are only an icon
  &.text-replace {
    &.icon {
      // iconfont
      font-size: 0; // unavoidable duplication of setting in icons.scss
      height: inherit;
      width: inherit;
      box-sizing: content-box;

      &:before {
        line-height: 1.7em;
      }
    }

    &.button--icon {
      background-color: transparent;
      color: $color-grey-2;
      border-color: transparent;
      font-size: 0;
      text-align: center;
      height: inherit;
      width: inherit;

      &:hover {
        color: $color-grey-1;
      }

      .icon {
        @include svg-icon(1rem, middle);

        font-size: initial;
        padding: 0.5em;
        box-sizing: content-box;
      }

      &.button-small {
        line-height: 1.75em;

        .icon {
          padding: 0.25em;
        }
      }
    }

    @include media-breakpoint-up(sm) {
      &.icon {
        &:before {
          line-height: 2.1em;
        }

        &.button-small {
          width: 1.75em;
          height: 1.75em;

          &:before {
            line-height: 1.7em;
          }
        }
      }
    }
  }

  // Larger viewport width adjustments

  @include media-breakpoint-up(sm) {
    font-size: theme('fontSize.14');
    padding: 0 1.4em;
    height: 3em;
    line-height: 3em;

    &.bicolor {
      padding-inline-start: 3.5em;

      &:before {
        width: 2em;
        font-size: theme('fontSize.16');
      }

      &.button-small {
        padding-inline-start: 3em;

        &:before {
          width: 1.75em;
        }
      }
    }
  }
}