react-toolbox/components/button/style.scss

@import "../base";
@import "../mixins";
@import "./config";

%button {
  @include typo-button();
  position: relative;
  display: inline-block;
  height: $button-height;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  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(.tooltip) {
    display: inline-block;
    line-height: $button-height;
    vertical-align: middle;
  }
  > svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 120%;
    vertical-align: middle;
    fill: currentColor;
  }
  > * {
    pointer-events: none;
  }
  [data-react-toolbox="ripple"] {
    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;
  }
  [data-react-toolbox="ripple"] {
    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: middle;
  }
  [data-react-toolbox="ripple"] {
    border-radius: 50%;
  }
}

.neutral:not([disabled]) {
  &:not(.inverse) {
    &.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;
    }
  }
}

@mixin btn-colors($name, $color, $background, $hover) {
  .#{$name}:not([disabled]) {
    &.raised, &.floating {
      color: $color;
      background: $background;
    }
    &.flat, &.toggle {
      color: $background;
      &:focus:not(:active) {
        background: $hover;
      }
    }
    &.flat:hover {
      background: $hover;
    }
  }
}

@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);