kibana/ui_framework/components/button/_button.scss

/**
 * 1. Links can't have a disabled attribute, so they can't support :disabled.
 */
@mixin kuiButtonDisabled {
  &:disabled {
    @content;
  }

  @at-root a#{&}.kuiButton-isDisabled {
    @content;
  }
}

/**
 * 1. Links can't have a disabled attribute, so they can't support :enabled.
 */
@mixin kuiButtonHover {
  &:enabled:hover {
    @content;
  }

  @at-root a#{&}:not(.kuiButton-isDisabled):hover { /* 1 */
    @content;
  }
}

/**
 * 1. Links can't have a disabled attribute, so they can't support :enabled.
 */
@mixin kuiButtonActive {
  &:enabled:active {
    @content;
  }

  @at-root a#{&}:not(.kuiButton-isDisabled):active { /* 1 */
    @content;
  }
}

/**
 * 1. Links can't have a disabled attribute, so they can't support :enabled.
 */
@mixin kuiButtonFocus {
  &:not(a):enabled:focus {
    @content;
  }

  @at-root a#{&}:not(.kuiButton-isDisabled):focus { /* 1 */
    @content;
  }
}

@mixin kuiButtonHoverAndActive {
  @include kuiButtonHover { @content }
  @include kuiButtonActive { @content }
}

/**
 * 1. Setting to inline-block guarantees the same height when applied to both
 *    button elements and anchor tags.
 * 2. Links can be focused when they're "disabled" (since we're just faking this with a class), but
 *    at least make them look like they're not focused.
 */
.kuiButton {
  display: inline-block; /* 1 */
  appearance: none;
  cursor: pointer;
  padding: 4px 12px 5px;
  font-size: $globalFontSize;
  font-weight: $buttonFontWeight;
  line-height: $globalLineHeight;
  height: $buttonHeight;
  text-decoration: none;
  border: none;
  border-radius: $globalBorderRadius;

  @include kuiButtonDisabled {
    cursor: default;
  }

  @include kuiButtonActive {
    transform: translateY(1px);
  }

  &:focus {
    outline: none; /* 2 */
  }

  @include kuiButtonFocus {
    @include focus;
  }
}

  /**
   * 1. Solves whitespace problems introduced by inline elements.
   */
  .kuiButton__inner {
    display: flex; /* 1 */
    align-items: center; /* 1 */
  }

.kuiButton--iconText {
  .kuiButton__icon {

    &:first-child:not(:only-child) {
      margin-right: $buttonIconSpacing;
    }

    &:last-child:not(:only-child) {
      margin-left: $buttonIconSpacing;
    }
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--basic {
  color: $buttonBasicTextColor;
  background-color: $buttonBasicBackgroundColor;

  @include kuiButtonFocus {
    color: $buttonBasicTextColor;
  }

  @include kuiButtonHoverAndActive {
    color: $buttonDefaultTextColor !important; /* 1 */
    background-color: $buttonBasicHoverBackgroundColor !important; /* 1 */
  }

  @include kuiButtonDisabled {
    color: $buttonBasicDisabledTextColor;
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--primary {
  color: $buttonDefaultTextColor;
  background-color: $buttonPrimaryBackgroundColor;

  @include kuiButtonFocus {
    color: $buttonDefaultTextColor;
  }

  @include kuiButtonHoverAndActive {
    color: $buttonDefaultTextColor !important; /* 1 */
    background-color: $buttonPrimaryHoverBackgroundColor;
  }

  @include kuiButtonDisabled {
    background-color: $buttonPrimaryDisabledBackgroundColor;
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--danger {
  color: $buttonDefaultTextColor;
  background-color: $buttonDangerBackgroundColor;

  @include kuiButtonFocus {
    @include focus($globalFocusDangerColor);
    color: $buttonDefaultTextColor;
  }

  @include kuiButtonHoverAndActive {
    color: $buttonDefaultTextColor !important; /* 1 */
    background-color: $buttonDangerHoverBackgroundColor;
  }

  @include kuiButtonDisabled {
    background-color: $buttonDangerDisabledBackgroundColor;
  }
}

/**
 * 1. Override Bootstrap.
 * 2. Override either Bootstrap or Timelion styles.
 */
.kuiButton--hollow {
  color: $globalLinkColor !important; /* 2 */
  background-color: transparent;

  @include kuiButtonHoverAndActive {
    color: $globalLinkHoverColor !important; /* 1 */
    text-decoration: underline;
  }

  @include kuiButtonDisabled {
    color: $buttonHollowDiabledTextColor;
  }
}