platform/static/assets/scss/volt/components/_progress.scss
Administrator 9e7fc7b4c1 initial
2023-09-23 16:13:11 +03:00

117 lines
2.1 KiB
SCSS

/**
* = Progress bars
*/
.progress-wrapper {
position: relative;
}
.progress-bar {
box-shadow: none;
border-radius: 0;
height: auto;
}
.progress {
height: 6px;
margin-bottom: $spacer;
overflow: hidden;
background-color: $progress-bg;
font-size: $font-size-xs;
font-weight: $font-weight-bold;
@include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1))
}
.progress-xl {
height: $progress-xl-size;
}
.progress-lg {
height: $progress-lg-size;
}
.progress-sm {
height: $progress-sm-size;
}
.progress-info{
@include display-flex();
@include align-items(center);
@include justify-content(space-between);
margin-bottom: .5rem;
.progress-label {
span {
display: inline-block;
color: $primary;
font-size: $font-size-sm;
font-weight: $font-weight-bold;
}
}
.progress-percentage {
text-align: right;
span {
display: inline-block;
color: $gray-500;
font-size: $font-size-xs;
font-weight: $font-weight-bold;
}
}
}
.info-xl{
.progress-label,
.progress-percentage {
span {
font-size: $font-size-sm;
}
}
.progress-percentage {
text-align: right;
}
}
.progress-tooltip {
background: $primary;
color: $white;
font-weight: $font-weight-bold;
padding: .25rem .375rem;
line-height: 1;
font-size: $font-size-xs;
position: relative;
border-radius: $border-radius-sm;
&:after {
content: " ";
position: absolute;
top: 100%;
left: 10px;
border: solid transparent;
height: 0;
width: 0;
pointer-events: none;
border-top-color: $gray;
border-width: 6px;
}
}
@-webkit-keyframes animate-positive{
0% { width: 0%; }
}
@keyframes animate-positive{
0% { width: 0%; }
}
//Tooltip arrow color
@each $color,
$value in $theme-colors {
.progress-info{
.bg-#{$color} {
&::after{
border-top-color: $value;
}
}
}
}