2018-09-29 17:16:22 +02:00
|
|
|
.progress {
|
|
|
|
@include border-style(5);
|
2020-08-26 00:45:10 +02:00
|
|
|
@include color('border-color', 'primary');
|
|
|
|
border: 2px solid;
|
2018-10-08 21:03:24 +02:00
|
|
|
box-shadow: $shadow-hover;
|
2018-10-06 22:37:41 +02:00
|
|
|
height: 1.2rem;
|
2018-09-29 17:16:22 +02:00
|
|
|
overflow: hidden;
|
|
|
|
width: 100%;
|
|
|
|
|
2018-10-07 14:45:00 +02:00
|
|
|
.bar {
|
2018-10-06 22:37:41 +02:00
|
|
|
@include border-style(5);
|
|
|
|
@include transition;
|
2020-08-26 00:45:10 +02:00
|
|
|
@include color('background-color', 'primary-light');
|
|
|
|
@include color('border-color', 'primary');
|
|
|
|
border-right: 2px solid;
|
2018-09-29 17:16:22 +02:00
|
|
|
display: flex;
|
2018-10-06 22:37:41 +02:00
|
|
|
flex-direction: column;
|
|
|
|
font-size: 0.6rem;
|
2018-09-29 17:16:22 +02:00
|
|
|
height: 100%;
|
|
|
|
justify-content: center;
|
2018-10-06 22:37:41 +02:00
|
|
|
text-align: center;
|
2018-09-29 17:16:22 +02:00
|
|
|
width: 0%;
|
2018-10-06 22:37:41 +02:00
|
|
|
|
2018-10-07 14:45:00 +02:00
|
|
|
&.striped {
|
|
|
|
@include striped-background($primary-light);
|
|
|
|
}
|
2018-10-06 22:37:41 +02:00
|
|
|
|
2018-10-07 14:45:00 +02:00
|
|
|
@each $colorName, $color, $color-light in $colors {
|
|
|
|
&.#{$colorName} {
|
2020-08-26 00:45:10 +02:00
|
|
|
@include color('background-color', #{$colorName}-light);
|
2018-10-07 14:45:00 +02:00
|
|
|
|
|
|
|
&.striped {
|
|
|
|
@include striped-background($color-light);
|
|
|
|
}
|
2018-10-06 22:37:41 +02:00
|
|
|
}
|
2018-09-29 17:16:22 +02:00
|
|
|
}
|
|
|
|
|
2018-10-07 14:45:00 +02:00
|
|
|
@for $i from 0 through 100 {
|
|
|
|
&.w-#{$i} {
|
2018-12-27 23:35:42 +01:00
|
|
|
width: $i * 1%;
|
2018-10-07 14:45:00 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.w-0,
|
|
|
|
&.w-100 {
|
|
|
|
border-right: 0;
|
2018-09-29 17:16:22 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|