react-toolbox/components/button/theme.scss

@import "../colors";
@import "../globals";
@import "../mixins";
@import "./config";
@import "./mixins";

.button {
  position: relative;

  > input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 0.1px;
    height: 0.1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
  }
}

%button {
  @include typo-button();
  position: relative;
  display: inline-block;
  height: $button-height;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  line-height: $button-height;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  outline: none;
  transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
  &::-moz-focus-inner {
    border: 0;
  }
  > span:not([data-react-toolbox="tooltip"]) {
    display: inline-block;
    line-height: $button-height;
    vertical-align: top;
  }
  > svg {
    display: inline-block;
    width: 1em;
    height: $button-height;
    font-size: 120%;
    vertical-align: top;
    fill: currentColor;
  }
  > * {
    pointer-events: none;
  }
  > .rippleWrapper {
    overflow: hidden;
  }
  &[disabled] {
    color: $button-disabled-text-color;
    pointer-events: none;
    cursor: auto;
  }
}

%squared {
  min-width: $button-squared-min-width;
  padding: $button-squared-padding;
  border-radius: $button-border-radius;
  .icon {
    margin-right: $button-squared-icon-margin;
    font-size: 120%;
    vertical-align: middle;
  }
  > svg {
    margin-right: .5 * $unit;
  }
}

%solid {
  &[disabled] {
    @include shadow-2dp();
    background-color: $button-disabled-background-color;
  }
  &:active {
    @include shadow-4dp();
  }
  &:focus:not(:active) {
    @include focus-shadow();
  }
}

.raised {
  @extend %button;
  @extend %squared;
  @extend %solid;
  @include shadow-2dp();
}

.flat {
  @extend %button;
  @extend %squared;
  background: transparent;
}

.floating {
  @extend %button;
  @extend %solid;
  width: $button-floating-height;
  height: $button-floating-height;
  font-size: $button-floating-font-size;
  border-radius: 50%;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
  .icon {
    line-height: $button-floating-height;
  }
  > .rippleWrapper {
    border-radius: 50%;
  }
  &.mini {
    width: $button-floating-mini-height;
    height: $button-floating-mini-height;
    font-size: $button-floating-mini-font-size;
    .icon {
      line-height: $button-floating-mini-height;
    }
  }
}

.toggle {
  @extend %button;
  width: $button-height;
  background: transparent;
  border-radius: 50%;
  > .icon, svg {
    font-size: $button-toggle-font-size;
    line-height: $button-height;
    vertical-align: top;
  }
  > .rippleWrapper {
    border-radius: 50%;
  }
}

.neutral:not([disabled]) {
  &.raised, &.floating {
    color: $button-neutral-color-contrast;
    background-color: $button-neutral-color;
  }
  &.flat, &.toggle {
    color: $button-neutral-color-contrast;
    &:focus:not(:active) {
      background: $button-neutral-color-hover;
    }
  }
  &.flat:hover {
    background: $button-neutral-color-hover;
  }

  &.inverse {
    &.raised, &.floating {
      color: $button-neutral-color;
      background-color: $button-neutral-color-contrast;
    }
    &.flat, &.toggle {
      color: $button-neutral-color;
      &:focus:not(:active) {
        background: $button-neutral-color-hover;
      }
    }
    &.flat:hover {
      background: $button-neutral-color-hover;
    }
  }
}

.neutral.inverse[disabled] {
  color: $button-disabled-text-color-inverse;
  background-color: $button-disabled-background-inverse;
}

@include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
@include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);