quasar-framework
Version:
Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
99 lines (85 loc) • 1.82 kB
text/stylus
.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
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
.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-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)
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-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