111 lines
2.7 KiB
SCSS
111 lines
2.7 KiB
SCSS
|
|
/**
|
|
* Progress element styles
|
|
*
|
|
* It needs:
|
|
* - Height of the progress "bar".
|
|
* - Border radius of the element.
|
|
* - If it needs a white gradient over it.
|
|
* - If bars needs a min width.
|
|
*
|
|
*/
|
|
|
|
@import "./mixins";
|
|
@import "./colors";
|
|
|
|
@mixin progress-bar($h, $r, $grad, $min) {
|
|
div.progress-bar {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
height: $h;
|
|
overflow: hidden;
|
|
border-radius: $r;
|
|
background: #F5F5F5;
|
|
|
|
&.overflow-visible { overflow: visible; }
|
|
|
|
.bar-3,
|
|
.bar-2,
|
|
.bar-1,
|
|
.bar-0 {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
|
|
border-radius: $r;
|
|
|
|
@if $min {
|
|
min-width: $min;
|
|
}
|
|
}
|
|
|
|
// Blue dark
|
|
.bar-3 {
|
|
z-index: 3;
|
|
border-right: 1px solid #FFF;
|
|
background: #7DD4FF;
|
|
}
|
|
|
|
// Blue light
|
|
.bar-2 {
|
|
z-index: 2;
|
|
background: #0090D7;
|
|
}
|
|
|
|
// Grey light
|
|
.bar-1 {
|
|
z-index: 1;
|
|
background: #E5E5E5;
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: auto;
|
|
border-right: 1px solid white;
|
|
}
|
|
}
|
|
|
|
// image pattern
|
|
.bar-0 {
|
|
background: url($assetsDir + "/images/layout/unassigned_bkg.png") repeat-x left 0;
|
|
|
|
z-index: 0;
|
|
&::after { display: none; }
|
|
}
|
|
|
|
// Danger and caution background
|
|
.danger { background: $cHighlight-negative; }
|
|
.caution { background: $cHighlight-caution; }
|
|
}
|
|
}
|
|
|
|
// Animated bar
|
|
@mixin progress-animated-bar($h, $r, $grad, $min) {
|
|
@include progress-bar($h, $r, $grad, $min);
|
|
|
|
$animatedSize: $h*2;
|
|
|
|
div.progress-bar span.bar-2 {
|
|
animation: move 1s linear infinite;
|
|
background-color: #5DA1D6;
|
|
background-image: -webkit-linear-gradient(-45deg, rgba(85, 128, 197, 1) 25%, transparent 25%, transparent 50%, rgba(85, 128, 197, 1) 50%, rgba(85, 128, 197, 1) 75%, transparent 75%, transparent);
|
|
background-image: -moz-linear-gradient(-45deg, rgba(85, 128, 197, 1) 25%, transparent 25%, transparent 50%, rgba(85, 128, 197, 1) 50%, rgba(85, 128, 197, 1) 75%, transparent 75%, transparent);
|
|
background-image: -ms-linear-gradient(-45deg, rgba(85, 128, 197, 1) 25%, transparent 25%, transparent 50%, rgba(85, 128, 197, 1) 50%, rgba(85, 128, 197, 1) 75%, transparent 75%, transparent);
|
|
background-image: linear-gradient(-45deg rgba(85, 128, 197, 1) 25%, transparent 25%, transparent 50%, rgba(85, 128, 197, 1) 50%, rgba(85, 128, 197, 1) 75%, transparent 75%, transparent);
|
|
background-size: $animatedSize $animatedSize;
|
|
}
|
|
|
|
@keyframes move {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: $animatedSize $animatedSize; }
|
|
}
|
|
}
|