sce-component/btn/button.mat.styl

button-round-factor($size)
  if $size == 'small'
    .54
  else
    .47

.q-btn
  display inline-flex
  align-items center
  justify-content center
  outline 0
  border 0
  vertical-align middle
  cursor pointer
  -webkit-appearance button
  padding $button-padding
  font-weight $button-font-weight
  text-decoration none
  color inherit
  background transparent
  box-shadow $shadow-2
  transition $button-transition
  text-transform uppercase

  &.disabled
    opacity .7 !important
  &:not([disabled]):active
    box-shadow $shadow-8
  &.full-width
    border-radius 0 !important
    white-space normal

.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-flat, .q-btn-outline
  box-shadow none !important

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

.q-btn-push
  border-bottom 3px solid rgba(0, 0, 0, .15)
  border-radius 7px
  &:active:not(.disabled)
    border-bottom 0
    box-shadow none

.q-btn-rounded
  border-radius 28px

.q-btn-round
  border-radius 50%
  padding 0
  box-shadow $shadow-2
  &:active
    box-shadow $shadow-8

for $name, $size in $button-sizes
  .q-btn-{$name}
    min-height $size
    font-size round($size * .38)
    .q-icon
      font-size round($size * .68)
    .q-spinner
      height round($size * .68)
      width round($size * .68)
for $name, $size in $button-round-sizes
  .q-btn-round.q-btn-{$name}
    height $size
    width $size
    .q-icon, .q-spinner
      height round(button-round-factor($name) * $size)
      width round(button-round-factor($name) * $size)
      font-size round(button-round-factor($name) * $size)