quasar-framework/src/components/btn/btn-default.mat.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-btn
  outline 0
  border 0
  vertical-align middle
  cursor pointer
  padding $button-padding
  font-size $button-font-size
  text-decoration none
  color inherit
  background transparent
  transition $button-transition
  min-height 2.572em
  box-shadow $button-shadow
  font-weight $button-font-weight
  text-transform uppercase
  button&
    -webkit-appearance button
  a&
    display inline-flex
  .q-icon, .q-spinner
    font-size 1.4em
  // workaround for alignment/sizing change when showing loader
  .q-btn-inner
    transition opacity .6s
    &--hidden
      opacity 0
    &:before
      content ''

  &.disabled
    opacity .7 !important

  &:not(.disabled):not(.q-btn-flat):not(.q-btn-outline):not(.q-btn-push)
    &:before
      // This places the button active raise shadow behind adjacent elements
      // Active raise shadow will still be visible under adjacent transparent elements, this is ok and coherent with a desired transparency effect.
      // Visible active raise shadow can be removed by specifying a background color to the button
      // Visible active raise shadow can be removed by specifying a flat or outline button type
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      border-radius inherit
      z-index -1
      transition $button-transition
    &:active:before
    &.active:before
      box-shadow $button-shadow-active

.q-btn-progress
  transition all .3s
  height 100%
  background rgba(255, 255, 255, .25)
  &.q-btn-dark-progress
    background rgba(0, 0, 0, .2)

.q-btn-no-uppercase
  text-transform none

.q-btn-rectangle
  border-radius $button-border-radius

.q-btn-outline
  border 1px solid currentColor
  background transparent !important

.q-btn-push
  border-radius $button-push-border-radius
  border-bottom 3px solid rgba(0, 0, 0, .15)
  &:active:not(.disabled)
  &.active:not(.disabled)
    box-shadow none
    transform translateY(3px)
    border-bottom-color transparent
  .q-focus-helper, .q-ripple-container
    height auto
    bottom -3px

.q-btn-rounded
  border-radius $button-rounded-border-radius

.q-btn-round
  border-radius 50%
  padding 0
  min-height 0
  height 3em
  width 3em

.q-btn-flat, .q-btn-outline
  box-shadow none

.q-btn-dense
  padding $button-dense-padding
  min-height 2em
  &.q-btn-round
    padding 0
    height 2.4em
    width 2.4em
  .on-left
    margin-right 6px
  .on-right
    margin-left 6px

.q-btn-fab, .q-btn-fab-mini
  .q-icon
    font-size 24px
.q-btn-fab
  height 56px
  width 56px
.q-btn-fab-mini
  height 40px
  width 40px

.q-transition

  &--fade

    &-leave-active
      position absolute

  &--fade
    &-enter-active, &-leave-active
      transition opacity .4s ease-out
    &-enter, &-leave, &-leave-to
      opacity 0