109 lines
1.7 KiB
SCSS
109 lines
1.7 KiB
SCSS
//
|
|
// Animated Progress bar Styles //
|
|
//
|
|
.progress-box {
|
|
* {
|
|
margin: 0;
|
|
}
|
|
.animated-progress {
|
|
position: relative;
|
|
background: get-color("dark", 0.1);
|
|
height: 5px;
|
|
margin-top: 2px;
|
|
border-radius: 3px;
|
|
div {
|
|
position: absolute;
|
|
display: block;
|
|
background: get-color("dark");
|
|
width: 50%;
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
color: get-color("dark");
|
|
@include transition(width 0.7s cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
@include transition-delay(0.1s);
|
|
&::after {
|
|
content: attr(data-progress) '%';
|
|
position: absolute;
|
|
top: -24px;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
&.progress-blue {
|
|
.animated-progress {
|
|
div {
|
|
background: $bg-color-blue;
|
|
}
|
|
}
|
|
}
|
|
&.progress-purple {
|
|
.animated-progress {
|
|
div {
|
|
background: $bg-color-purple;
|
|
}
|
|
}
|
|
}
|
|
&.progress-pink-edge {
|
|
.animated-progress {
|
|
div {
|
|
background: $bg-color-pink-edge;
|
|
}
|
|
}
|
|
}
|
|
&.progress-golden-yellow {
|
|
.animated-progress {
|
|
div {
|
|
background: $bg-color-golden-yellow;
|
|
}
|
|
}
|
|
}
|
|
&.progress-very-peri {
|
|
.animated-progress {
|
|
div {
|
|
background: $bg-color-very-peri;
|
|
}
|
|
}
|
|
}
|
|
&.progress-turquoise {
|
|
.animated-progress {
|
|
div {
|
|
background: $bg-color-turquoise;
|
|
}
|
|
}
|
|
}
|
|
&.progress-spring-red {
|
|
.animated-progress {
|
|
div {
|
|
background: $bg-color-spring-red;
|
|
}
|
|
}
|
|
}
|
|
&.progress-tan {
|
|
.animated-progress {
|
|
div {
|
|
background: $bg-color-tan;
|
|
}
|
|
}
|
|
}
|
|
&.progress-aqua {
|
|
.animated-progress {
|
|
div {
|
|
background: $bg-color-aqua;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bg-black,
|
|
[class*='bg-dark'],
|
|
[class*='bg-gradient-'],
|
|
[class*='bg-color-'] {
|
|
.progress-box {
|
|
.animated-progress {
|
|
background: get-color("white", 0.3);
|
|
div {
|
|
background: white;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
} |