118 lines
2.3 KiB
SCSS
118 lines
2.3 KiB
SCSS
@import "../utilities/mixins";
|
|
|
|
$progress-bar-background-color: $border-light !default;
|
|
$progress-value-background-color: $text !default;
|
|
$progress-border-radius: $radius-rounded !default;
|
|
|
|
$progress-indeterminate-duration: 1.5s !default;
|
|
|
|
$progress-colors: $colors !default;
|
|
|
|
.#{$class-prefix}progress {
|
|
@extend %block;
|
|
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
border: none;
|
|
border-radius: $progress-border-radius;
|
|
display: block;
|
|
height: $size-normal;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
width: 100%;
|
|
|
|
&::-webkit-progress-bar {
|
|
background-color: $progress-bar-background-color;
|
|
}
|
|
|
|
&::-webkit-progress-value {
|
|
background-color: $progress-value-background-color;
|
|
}
|
|
|
|
&::-moz-progress-bar {
|
|
background-color: $progress-value-background-color;
|
|
}
|
|
|
|
&::-ms-fill {
|
|
background-color: $progress-value-background-color;
|
|
border: none;
|
|
}
|
|
|
|
// Colors
|
|
@each $name, $pair in $progress-colors {
|
|
$color: nth($pair, 1);
|
|
|
|
&.is-#{$name} {
|
|
&::-webkit-progress-value {
|
|
background-color: $color;
|
|
}
|
|
|
|
&::-moz-progress-bar {
|
|
background-color: $color;
|
|
}
|
|
|
|
&::-ms-fill {
|
|
background-color: $color;
|
|
}
|
|
|
|
&:indeterminate {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
$color 30%,
|
|
$progress-bar-background-color 30%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:indeterminate {
|
|
animation-duration: $progress-indeterminate-duration;
|
|
animation-iteration-count: infinite;
|
|
animation-name: moveIndeterminate;
|
|
animation-timing-function: linear;
|
|
background-color: $progress-bar-background-color;
|
|
background-image: linear-gradient(
|
|
to right,
|
|
$text 30%,
|
|
$progress-bar-background-color 30%
|
|
);
|
|
background-position: top left;
|
|
background-repeat: no-repeat;
|
|
background-size: 150% 150%;
|
|
|
|
&::-webkit-progress-bar {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&::-moz-progress-bar {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&::-ms-fill {
|
|
animation-name: none;
|
|
}
|
|
}
|
|
|
|
// Sizes
|
|
&.is-small {
|
|
height: $size-small;
|
|
}
|
|
|
|
&.is-medium {
|
|
height: $size-medium;
|
|
}
|
|
|
|
&.is-large {
|
|
height: $size-large;
|
|
}
|
|
}
|
|
|
|
@keyframes moveIndeterminate {
|
|
from {
|
|
background-position: 200% 0;
|
|
}
|
|
|
|
to {
|
|
background-position: (-200%) 0;
|
|
}
|
|
}
|