vault/ui/app/styles/core/buttons.scss

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

.button {
  align-items: center;
  background-color: $grey-lightest;
  border: 1px solid $grey-light;
  border-radius: $radius;
  box-shadow: $box-shadow-low;
  cursor: pointer;
  color: $ui-gray-800;
  display: inline-block;
  font-size: $size-8;
  font-weight: $font-weight-semibold;
  min-height: 2.25rem;
  min-width: 6rem;
  padding: 0.5625rem 0.9375rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color $speed, border-color $speed, box-shadow $speed, color $speed;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;

  @keyframes spinAround {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  &:active,
  &.is-active,
  &:focus {
    border-color: darken($grey-light, 10%);
    box-shadow: $button-box-shadow-standard;
    color: darken($grey-dark, 10%);
  }

  &:focus:not(:active) {
    box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
  }

  &:disabled {
    background-color: $white;
    border-color: $ui-gray-050;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.5;
  }

  // Button types: is-compact, is-danger, is-danger-outlined, is-flat, is-ghost, is-icon, is-loading, is-link, is-outline, is-primary, is-transparent.

  &.is-compact {
    height: 2rem;
    padding: $spacing-4 $spacing-12;
  }

  &.is-danger {
    background-color: $red-500;
    border-color: darken($red-500, 2%);
    color: $white;
    text-shadow: 0 1px 1px rgba($black, 0.25);

    &:hover:not([disabled]) {
      background-color: darken($red-500, 5%);
      border-color: darken($red-500, 5%);
      box-shadow: $box-shadow-middle;
    }

    &:active,
    &.is-active {
      background-color: darken($red-500, 10%);
      border-color: darken($red-500, 10%);
      box-shadow: $box-shadow-middle;
    }

    &:focus {
      border-color: darken($red-500, 10%);
      box-shadow: $button-box-shadow-standard;
    }
  }

  &.is-danger-outlined {
    border: 1px solid $red-500;
    color: $red-500;
  }

  &.is-flat {
    min-width: auto;
    border: none;
    box-shadow: none;
  }

  &.is-ghost {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: $blue;
    text-decoration: none;

    &:hover {
      color: $blue-500;
      background-color: $grey-lightest;
    }
  }

  &.is-icon {
    padding: 0.25rem $spacing-24;
  }

  &.is-loading {
    color: transparent !important;
    pointer-events: none;
    &::after {
      animation: spinAround 500ms infinite linear;
      border: 2px solid $ui-gray-300;
      border-radius: 290486px;
      border-right-color: transparent;
      border-top-color: transparent;
      content: '';
      display: block;
      height: 1em;
      width: 1em;
      left: calc(50% - (1em / 2));
      top: calc(50% - (1em / 2));
      position: absolute !important;
    }
  }

  &.is-link {
    background-color: transparent;
    border-color: transparent;
    color: $blue;
    text-decoration: none;
    font-weight: $font-weight-semibold;
    box-shadow: none;
    min-width: 4rem;
  }

  &.is-primary {
    background-color: $blue;
    border-color: darken($blue, 2%);
    color: $white;
    font-weight: $font-weight-bold;
    text-shadow: 0 1px 1px rgba($black, 0.25);

    &:disabled {
      background-color: $ui-gray-700;
      border-color: transparent;
      box-shadow: none;
    }

    &:hover:not([disabled]) {
      background-color: darken($blue, 5%);
      border-color: darken($blue, 5%);
      box-shadow: $box-shadow-middle;
    }

    &:active,
    &.is-active {
      background-color: darken($blue, 10%);
      border-color: darken($blue, 10%);
      box-shadow: $box-shadow-middle;
    }

    &:focus {
      border-color: darken($blue, 10%);
      box-shadow: $button-box-shadow-standard;
    }

    &.is-loading::after {
      border-color: transparent transparent $white $white;
    }

    &.is-underlined {
      &:active,
      &.is-active {
        background-color: transparent;
        border-bottom: 2px solid darken($blue, 10%);
        border-radius: unset;
        color: darken($blue, 10%);
      }
    }
    // is-primary.is-outlined the only is-outlined buttons are primary.
    &.is-outlined {
      background-color: transparent;
      border-color: $blue;
      color: $blue;

      &:hover,
      &:focus {
        background-color: transparent;
        border-color: darken($blue, 10%);
        color: $blue;
      }

      &:active,
      &.is-active {
        background-color: transparent;
        border-color: darken($blue, 10%);
        color: darken($blue, 10%);
      }
    }

    &.is-outlined [disabled] {
      background-color: transparent;
      border-color: $ui-gray-700;
      box-shadow: none;
      color: $ui-gray-700;
    }
  }

  &.is-transparent {
    color: currentColor;
    background: none;
    border: none;
    box-shadow: none;
    min-width: auto;
    padding: 0;
  }
  // End of button types

  &.tool-tip-trigger {
    color: $grey-dark;
    min-width: auto;
    padding: 0;
  }

  &.has-icon-left,
  &.has-icon-right {
    .hs-icon {
      height: 16px;
      min-width: auto;
      width: 16px;
    }
  }

  &.has-icon-left {
    .hs-icon {
      &,
      &:first-child:last-child {
        position: relative;
        left: -$size-10;
      }
    }
  }

  &.has-icon-right {
    .hs-icon {
      &,
      &:first-child:last-child {
        margin-left: $spacing-4;
        margin-right: -$spacing-4;
      }
    }
  }
}

.button.icon {
  box-sizing: border-box;
  padding: 0 $spacing-4;
  height: 24px;
  width: 24px;
  &,
  & .icon {
    min-width: 0;
  }
}

.button.auto-width,
.button .icon.auto-width {
  width: auto;
  min-width: auto;
  margin: 0 !important;
}

a.button.disabled {
  color: $white;
  background-color: $grey-dark;
  opacity: 0.5;
  border-color: transparent;
  box-shadow: none;
  cursor: default;
}
.icon-button {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
}
.text-button {
  padding: unset;
  border: none;
  background-color: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;

  &:disabled {
    color: $grey-light;
    cursor: not-allowed;
  }
}

// TODO HDS adoption cleanup: audit styles with design and see what to keep/remove once buttons are fully HDS
// Existing class on <Hds::Copy::Button> component, modifying to match existing UI Structure buttons
.hds-copy-button {
  font-weight: $font-weight-semibold; // TODO delete
  box-shadow: $box-shadow-low; // TODO delete

  &.white-icon svg {
    color: $white;
  }

  &.icon-grey-300 svg {
    color: $ui-gray-300;
  }

  &.icon-grey-500 svg {
    color: $ui-gray-500;
  }

  &.transparent {
    background: none;
    box-shadow: none;
    border: 1px solid transparent;
    &:hover {
      border: 1px solid $grey-light;
      border-color: var(--token-color-border-strong);
    }
  }

  &.primary {
    background-color: $blue;
    border-color: darken($blue, 2%);
    color: $white;
    font-weight: $font-weight-bold;
    text-shadow: 0 1px 1px rgba($black, 0.25);
    svg {
      color: $white;
    }
  }

  &.secondary {
    background-color: $grey-lightest;
    border: 1px solid $grey-light;
  }

  &.in-dropdown {
    div {
      font-size: $size-7;
    }
    svg {
      color: transparent;
    }
  }
}

// Existing class on <Hds::Button> component, modifying to match existing UI Structure buttons
.hds-button {
  font-weight: $font-weight-semibold; // TODO consult design on font weight after button class audit
  display: inline-flex; // temporarily fixes existing button alignment until we adopt Hds::ButtonSet
  // for toolbar-button must pass arg @color="secondary"
  &.toolbar-button {
    color: $black;
    background: none;
    border: none;
    box-shadow: none;
    &:hover:not(.disabled) {
      background-color: $ui-gray-100;
      color: $blue;
    }
  }
}