100 lines
1.9 KiB
SCSS
100 lines
1.9 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 "compass/css3/border-radius";
|
||
|
|
@import "compass/css3/images";
|
||
|
|
@import "../old_common/mixins";
|
||
|
|
|
||
|
|
@mixin progress-bar($h, $r, $grad, $min) {
|
||
|
|
div.progress-bar {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: $h;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: $r;
|
||
|
|
background: #E5E5E5;
|
||
|
|
|
||
|
|
.bar-3,
|
||
|
|
.bar-2,
|
||
|
|
.bar-1,
|
||
|
|
.bar-0 {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
border-radius: $r;
|
||
|
|
|
||
|
|
@if $min {
|
||
|
|
min-width: $min;
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $grad {
|
||
|
|
&::after {
|
||
|
|
@include position(0, 0, 0, 0);
|
||
|
|
@include background(linear-gradient(left, rgba(#FFF, 0.3), rgba(#FFF, 0)));
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Blue dark
|
||
|
|
.bar-3 {
|
||
|
|
@include background(linear-gradient(#2C6E9C, #245D8C));
|
||
|
|
z-index: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Blue light
|
||
|
|
.bar-2 {
|
||
|
|
@include background(linear-gradient(#419EDE, #3486C9));
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Grey light
|
||
|
|
.bar-1 {
|
||
|
|
z-index: 1;
|
||
|
|
background: #E5E5E5;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
@include position(0, 0, 0, auto);
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
border-right: 1px solid white;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// image pattern
|
||
|
|
.bar-0 {
|
||
|
|
@include background(image-url("layout/unassigned_bkg.png") repeat-x left 0);
|
||
|
|
z-index: 0;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Danger and caution background
|
||
|
|
.danger {
|
||
|
|
@include background(linear-gradient(#FF5255, #CB2828));
|
||
|
|
}
|
||
|
|
|
||
|
|
.caution {
|
||
|
|
@include background(linear-gradient(#F8B85C, #F49000));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|