vuetify/src/stylus/components/_buttons.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'
@import '../components/_ripples'
@import '../theme'

button($material)
  color: $material.text.primary

  &.btn--disabled
    color: $material.buttons.disabled !important

    .icon
      color: $material.buttons.disabled !important

    &:not(.btn--icon):not(.btn--flat)
      background-color: $material.buttons.focused !important

  &:not(.btn--icon):not(.btn--flat)
    background-color: $material.app-bar

theme(button, "btn")

/** Base Spec */
.btn
  align-items: center
  border-radius: $button-border-radius
  display: inline-flex
  height: $button-height
  flex: 0 1 auto
  font-size: $button-font-size
  font-weight: $button-font-weight
  justify-content: center
  margin: $button-margin
  min-width: $button-min-width
  outline: 0
  text-transform: $button-text-transform
  text-decoration: none
  transition: .3s $transition.swing, color 1ms
  position: relative
  vertical-align: middle
  user-select: none


/** Psuedo */
.btn
  &__content:before
    border-radius: inherit
    color: inherit
    content: ''
    position: absolute
    left: 0
    top: 0
    height: 100%
    opacity: .12
    transition: $primary-transition
    width: 100%

/** Sizes */
.btn
  &--small
    font-size: $button-small-font-size
    height: $button-small-height

    .btn__content
      padding: $button-small-padding

  &--large
    font-size: $button-large-font-size
    height: $button-large-height

    .btn__content
      padding: $button-large-padding

/** Content */
.btn
  &--active,
  &:hover,
  &:focus
    .btn__content:before
      background-color: currentColor

  &__content
    align-items: center
    border-radius: inherit
    color: inherit
    display: flex
    height: inherit
    flex: 1 0 auto
    justify-content: center
    margin: 0 auto
    padding: $button-padding
    transition: $primary-transition
    white-space: nowrap
    width: inherit

/** Icons */
.btn .btn__content .icon
  color: inherit

/** Types */
.btn
  &--flat
    background-color: transparent !important
    box-shadow: none !important

  &:not(.btn--depressed)
    will-change: box-shadow
    elevation(2)

    &:active
      elevation(8)

    // Fixes bug where IE11 moves
    // button content when clicked
    // https://stackoverflow.com/questions/10305658/prevent-button-from-shifting-during-click-in-ie
    &:active,
    &:focus
      .btn__content
        position: relative
        top: 0
        left: 0

  &--icon
    background: transparent
    box-shadow: none !important
    border-radius: 50%
    justify-content: center
    min-width: 0
    width: $button-height

    &.btn--small
      width: $button-small-height

    &.btn--large
      width: $button-large-height

    .btn__content:before
      border-radius: 50%

  &--floating
    border-radius: 50%
    min-width: 0
    height: $button-floating-width
    width: $button-floating-width
    padding: 0
    elevation(6)

    &.btn--fixed,
    &.btn--absolute
      z-index: 4

    &:active
      elevation(12)

    .btn__content
      flex: 1 1 auto
      margin: 0
      padding: 0

    &:after
      border-radius: 50%

    .btn__content
      :not(:only-child)
        transition: $primary-transition

        &:last-child
          opacity: 0
          position: absolute
          transform: rotate(-45deg)
          left: calc(50% - 12px)
          top: calc(50% - 12px)

    &.btn--active
      .btn__content
        :not(:only-child)
          &:first-child
            opacity: 0
            transform: rotate(45deg)
            left: 'calc(50% - %s)' % (24 / 2)
            top: 'calc(50% - %s)' % (24 / 2)

          &:last-child
            opacity: 1
            transform: none

    .icon
      height: inherit
      width: inherit

    &.btn--small
      height: $button-floating-small-width
      width: $button-floating-small-width

      .icon
        font-size: $button-floating-small-icon-width

      &.btn--floating .icon
        left: 'calc(50% - %s)' % ($button-floating-small-icon-width / 2)
        top: 'calc(50% - %s)' % ($button-floating-small-icon-width / 2)


    &.btn--large
      height: $button-floating-large-width
      width: $button-floating-large-width

      .icon
        font-size: $button-floating-large-icon-width

      &.btn--floating .icon
        left: 'calc(50% - %s)' % ($button-floating-large-icon-width / 2)
        top: 'calc(50% - %s)' % ($button-floating-large-icon-width / 2)

  &--reverse
    .btn__content
      flex-direction: row-reverse

    &.btn--column
      .btn__content
        flex-direction: column-reverse

  &--fixed, &--absolute
    margin: 0

  // Position must have prepended .btn
  // to account for tooltip
  // TODO: Remove this once tooltips are
  // converted to elements
  &.btn--absolute
    position: absolute

  &.btn--fixed
    position: fixed

  &--top
    &:not(.btn--absolute)
      top: $grid-gutters.lg

    &.btn--absolute
      top: -($button-floating-width / 2)

      &.btn--small
        top: -($button-floating-small-width / 2)

      &.btn--large
        top: -($button-floating-large-width / 2)

  &--bottom
    &:not(.btn--absolute)
      bottom: $grid-gutters.lg

    &.btn--absolute
      bottom: -($button-floating-width / 2)

      &.btn--small
        bottom: -($button-floating-small-width / 2)

      &.btn--large
        bottom: -($button-floating-large-width / 2)

  &--left
    left: $grid-gutters.lg

  &--right
    right: $grid-gutters.lg

/** Disabled */
.btn
  &.btn--disabled
    box-shadow: none !important
    pointer-events: none

.btn--icon
  .btn__content
    padding: 0


/** Loader */
.btn
  &--loader
    pointer-events: none

    .btn__content
      opacity: 0

  &__loading
    align-items: center
    display: flex
    height: 100%
    justify-content: center
    left: 0
    position: absolute
    top: 0
    width: 100%

    .icon
      &--left
        margin-right: 1rem
        line-height: inherit

      &--right
        margin-left: 1rem
        line-height: inherit


/** Custom Buttons */
.btn
  &.btn--outline
    border: 1px solid currentColor
    background: transparent !important
    box-shadow: none

    &:hover
      box-shadow: none

  &--block
    display: flex
    flex: 1
    margin: $button-margin-y 0
    width: 100%

  &--round
    border-radius: 28px

    &:after
      border-radius: 28px


/** Button w/ directional Icon */
.btn
  .icon
    &--right
      margin-left: 16px

    &--left
      margin-right: 16px


/** Themes */
.btn
  &.primary,
  &.secondary,
  &.accent,
  &.success,
  &.error,
  &.warning,
  &.info
    color: $material-dark.text.primary