react-toolbox/components/button/style.styl

@import '../constants'

:local(.root)
  z-index                       : 1
  display                       : inline-block
  position                      : relative
  overflow                      : hidden
  font-weight                   : FONT_WEIGHT_NORMAL
  text-align                    : center
  text-decoration               : none
  white-space                   : nowrap
  border                        : none
  transition-property           : background-color, box-shadow
  transition-duration           : ANIMATION_DURATION
  transition-timing-function    : ANIMATION_EASE

  &.raised, &.flat
    padding                       : (SPACE / 2) (SPACE / 1.25)
    font-size                     : FONT_SIZE_SMALL
    text-transform                : uppercase
    border-radius                 : (SPACE / 8)
    > *
      vertical-align              : middle
    > [data-react-toolbox='icon']
      font-size                   : FONT_SIZE_BIG
      margin-right                : (SPACE / 2)
    > abbr
      font-weight                 : FONT_WEIGHT_BOLD
    &.anchor
      width                       : 100%

  &.flat
    background-color          : transparent
    &:not(.primary):not(.accent)
      > [data-react-toolbox='ripple']
        background-color      : alpha(TEXT, 12.5%)
    &.primary
      color                   : PRIMARY
      > [data-react-toolbox='ripple']
        background-color      : alpha(PRIMARY, 12.5%)
    &.accent
      color                   : ACCENT
      > [data-react-toolbox='ripple']
        background-color      : alpha(ACCENT, 12.5%)

  &.floating
    width                         : BUTTON_CIRCLE_HEIGHT
    height                        : BUTTON_CIRCLE_HEIGHT
    font-size                     : (BUTTON_CIRCLE_HEIGHT / 2.25)
    border-radius                 : 50%
    > [data-react-toolbox='icon']
      line-height                 : BUTTON_CIRCLE_HEIGHT

  // Overrides
  &[disabled]
    color                     : darken(DIVIDER, 25%)
    background-color          : DIVIDER

  &:not([disabled])
    cursor                      : pointer
    &:hover, &:active, &:focus
      outline                   : 0
    &:not(.flat)
      box-shadow                  ZDEPTH_SHADOW_1
      &:not(.primary):not(.accent)
        color                   : TEXT
        background-color        : WHITE
      &.focused
        box-shadow              : ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
      &.primary, &.accent
        color                   : WHITE
      &.primary
        background-color        : PRIMARY
      &.accent
        background-color        : ACCENT

    &:not(.primary):not(.accent) > [data-react-toolbox='ripple']
      background-color          : DIVIDER

  > *
    pointer-events: none