react-toolbox/components/button/style.scss

@import "../variables";
@import "../mixins";

//-- Variables
$button-default-text-color: unquote("rgb(#{$color-black})") !default;
$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
$button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
$button-primary-color: unquote("rgb(#{$color-primary})") !default;
$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
$button-accent-color: unquote("rgb(#{$color-accent})") !default;
$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
$button-accent-color-active: unquote("rgba(#{$color-accent}, 0.40)") !default;
$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
$button-height: $unit * 3.6;
$button-floating-height: $unit * 5.6;
$button-floating-height-mini: $unit * 4;

//-- Mixins and commons
%button {
  position: relative;
  z-index: 1;
  display: inline-block;
  height: $button-height;
  flex-direction: row;
  overflow: hidden;
  color: $button-default-text-color;
  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;
  align-content: center;
  align-items: center;
  justify-content: center;

  &::-moz-focus-inner {
    border: 0;
  }
}

%squared {
  min-width: 9 * $unit;
  padding: 0 $unit * 1.2;
  border-radius: $border-radius;

  .icon {
    margin-right: $unit * .6;
    font-size: 120%;
    vertical-align: middle;
  }
}

%disabled {
  color: $button-disabled-text-color;
  pointer-events: none;
  cursor: auto;
}

//-- Local styles
.label {
  @include typo-button();
  line-height: $button-height;
}

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

  &:hover {
    background: $button-flat-color-hover;
  }

  &:focus:not(:active) {
    background: $button-flat-color-hover;
  }

  &[disabled] {
    @extend %disabled;
  }
}

.raised {
  @extend %button;
  @extend %squared;
  @include shadow-2dp();
  background: $button-solid-background-color;

  &:active {
    @include shadow-4dp();
  }

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

.floating {
  @extend %button;
  width: $button-floating-height;
  height: $button-floating-height;
  font-size: $unit * 2.4;
  background: $button-solid-background-color;
  border-radius: 50%;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);

  &:active {
    @include shadow-4dp();
  }

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

  .icon {
    line-height: $button-floating-height;
  }
}

//-- Global modifiers
:global(.primary):not([disabled]) {
  &.raised, &.floating {
    color: $button-primary-color-contrast;
    background: $button-primary-color;

    &:focus:not(:active) {
      @include focus-shadow();
    }
  }

  &.flat {
    color: $button-primary-color;

    &:hover {
      background: $button-primary-color-hover;
    }
    &:focus:not(:active) {
      background: $button-primary-color-hover;
    }
  }
}

:global(.accent):not([disabled]) {
  &.raised, &.floating {
    color: $button-accent-color-contrast;
    background-color: $button-accent-color;

    &:focus:not(:active) {
      @include focus-shadow();
    }
  }

  &.flat {
    color: $button-accent-color;

    &:hover {
      background: $button-accent-color-hover;
    }

    &:focus:not(:active) {
      background: $button-accent-color-hover;
    }
  }
}

:global(.mini) {
  &.floating {
    width: $button-floating-height-mini;
    height: $button-floating-height-mini;
    font-size: ($button-floating-height-mini / 2.25);

    .icon {
      line-height: $button-floating-height-mini;
    }
  }
}