197 lines
3.9 KiB
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
|