Vulture/VApp/node_modules/vuetify/lib/components/VProgressLinear/VProgressLinear.sass

197 lines
3.9 KiB
Sass

@use '../../styles/tools'
@use './variables' as *
// Block
.v-progress-linear
background: transparent
overflow: hidden
position: relative
transition: $progress-linear-transition
width: 100%
&--rounded
@include tools.rounded($progress-linear-border-radius)
// Elements
.v-progress-linear__background
background: $progress-linear-background
bottom: 0
left: 0
opacity: $progress-linear-background-opacity
position: absolute
top: 0
transition-property: width, left, right
transition: inherit
.v-progress-linear__content
align-items: center
display: flex
height: 100%
justify-content: center
left: 0
pointer-events: none
position: absolute
top: 0
width: 100%
.v-progress-linear__determinate,
.v-progress-linear__indeterminate
background: $progress-linear-background
.v-progress-linear__determinate
height: inherit
left: 0
position: absolute
transition: inherit
transition-property: width, left, right
.v-progress-linear__indeterminate
.long, .short
animation-play-state: paused
animation-duration: $progress-linear-indeterminate-animation-duration
animation-iteration-count: infinite
bottom: 0
height: inherit
left: 0
position: absolute
right: auto
top: 0
width: auto
will-change: left, right
.long
animation-name: indeterminate-ltr
.short
animation-name: indeterminate-short-ltr
.v-progress-linear__stream
animation: $progress-linear-stream-animation
animation-play-state: paused
bottom: 0
left: auto
opacity: $progress-linear-stream-opacity
pointer-events: none
position: absolute
transition: inherit
transition-property: width, left, right
// Modifiers
.v-progress-linear--reverse
.v-progress-linear__background,
.v-progress-linear__determinate,
.v-progress-linear__content
left: auto
right: 0
.v-progress-linear__indeterminate
.long, .short
left: auto
right: 0
.long
animation-name: indeterminate-rtl
.short
animation-name: indeterminate-short-rtl
.v-progress-linear__stream
right: auto
.v-progress-linear--absolute,
.v-progress-linear--fixed
left: 0
z-index: 1
.v-progress-linear--absolute
position: absolute
.v-progress-linear--fixed
position: fixed
.v-progress-linear--rounded
@include tools.rounded($progress-linear-border-radius)
&.v-progress-linear--rounded-bar
.v-progress-linear__determinate,
.v-progress-linear__indeterminate
border-radius: inherit
.v-progress-linear--striped
.v-progress-linear__determinate
animation: $progress-linear-striped-animation
background-image: $progress-linear-stripe-gradient
background-repeat: repeat
background-size: $progress-linear-striped-size
.v-progress-linear--active
.v-progress-linear__indeterminate
.long, .short
animation-play-state: running
.v-progress-linear__stream
animation-play-state: running
.v-progress-linear--rounded-bar
.v-progress-linear__determinate,
.v-progress-linear__indeterminate,
.v-progress-linear__stream + .v-progress-linear__background
@include tools.rounded($progress-linear-border-radius)
.v-progress-linear__determinate
border-start-start-radius: 0
border-end-start-radius: 0
// Keyframes
@keyframes indeterminate-ltr
0%
left: -90%
right: 100%
60%
left: -90%
right: 100%
100%
left: 100%
right: -35%
@keyframes indeterminate-rtl
0%
left: 100%
right: -90%
60%
left: 100%
right: -90%
100%
left: -35%
right: 100%
@keyframes indeterminate-short-ltr
0%
left: -200%
right: 100%
60%
left: 107%
right: -8%
100%
left: 107%
right: -8%
@keyframes indeterminate-short-rtl
0%
left: 100%
right: -200%
60%
left: -8%
right: 107%
100%
left: -8%
right: 107%
@keyframes stream
to
transform: translateX(var(--v-progress-linear-stream-to))
@keyframes progress-linear-stripes
0%
background-position-x: $progress-linear-striped-size