quasar-framework/src/vue-components/progress-button/progress-button.mat.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

.quasar-progress-button
  overflow hidden

  &.active.indeterminate:before
    content ''
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background-image linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)
    background-size 40px 40px
    animation quasar-progress-stripes 2s linear infinite

.quasar-progress-button-content
  transition all .3s
  transform translateY(0)

  &.quasar-progress-button-complete
    transform translateY(-3.25rem)
  &.quasar-progress-button-incomplete
    transform translateY(2.75rem)

.quasar-progress-button-error,
.quasar-progress-button-success
  position absolute
  text-align center
  top 0
  left 50%
  div
    min-height 1.275rem
    line-height 1.275rem

.quasar-progress-button-error
  transform translateX(-50%) translateY(-3rem)

.quasar-progress-button-success
  transform translateX(-50%) translateY(3rem)

.quasar-progress-button-filler
  transition all .3s
  position absolute
  left 0
  top 0
  bottom 0
  height 100%
  background rgba(255, 255, 255, .25)
  &.quasar-progress-button-dark-filler
    background rgba(0, 0, 0, .2)