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

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

    .v-icon,
    .v-btn__loading
      color: $material.buttons.disabled !important

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

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

theme(button, "v-btn")

/** Base Spec */
.v-btn
  align-items: center
  border-radius: $button-border-radius
  display: inline-flex
  height: $button-height
  flex: 0 0 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: $primary-transition, color 1ms
  position: relative
  vertical-align: middle
  user-select: none


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

/** Content */
.v-btn
  padding: $button-padding

  &--active,
  &:hover,
  &:focus
    position: relative

    &:before
      background-color: currentColor

  &__content
    align-items: center
    border-radius: inherit
    color: inherit
    display: flex
    flex: 1 0 auto
    justify-content: center
    margin: 0 auto
    // Fixes bug where IE11 moves
    // button content when clicked
    // https://stackoverflow.com/questions/10305658/prevent-button-from-shifting-during-click-in-ie
    position: relative
    transition: $primary-transition
    white-space: nowrap
    width: inherit

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

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

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

/** Types */
.v-btn
  &:not(.v-btn--depressed):not(.v-btn--flat)
    will-change: box-shadow
    elevation(2)

    &:active
      elevation(8)

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

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

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

    &:before
      border-radius: 50%

  &--floating
    border-radius: 50%
    min-width: 0
    height: $button-floating-width
    width: $button-floating-width
    padding: 0

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

    &:not(.v-btn--depressed):not(.v-btn--flat)
      elevation(6)

      &:active
        elevation(12)

    .v-btn__content
      flex: 1 1 auto
      margin: 0
      height: 100%

    &:after
      border-radius: 50%

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

        &:first-child
          opacity: 1

        &:last-child
          opacity: 0
          transform: rotate(-45deg)

        &:last-child,
        &:first-child
          // https://stackoverflow.com/questions/14729492/css3-transform-rotate-causing-1px-shift-in-chrome
          -webkit-backface-visibility: hidden
          position: absolute
          left: 0
          top: 0

    &.v-btn--active
      .v-btn__content
        :not(:only-child)
          &:first-child
            opacity: 0
            transform: rotate(45deg)

          &:last-child
            opacity: 1
            transform: rotate(0)

    .v-icon
      height: inherit
      width: inherit

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

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


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

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

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

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

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

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

  &.v-btn--fixed
    position: fixed

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

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

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

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

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

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

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

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

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

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

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

  &:not(.v-btn--disabled):not(.v-btn--floating):not(.v-btn--icon)
    .v-btn__content .v-icon
      transition: none

.v-btn--icon
  padding: 0


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

    .v-btn__content
      opacity: 0

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

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

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


/** Custom Buttons */
.v-btn
  &.v-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 */
.v-btn
  .v-icon
    &--right
      margin-left: 16px

    &--left
      margin-right: 16px


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