180 lines
2.7 KiB
SCSS
180 lines
2.7 KiB
SCSS
.jet-progress-bar {
|
|
&__inner {
|
|
|
|
}
|
|
|
|
&__title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-flow: row nowrap;
|
|
}
|
|
|
|
&__wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
&__status-bar {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
will-change: width, height;
|
|
transition: width 1s cubic-bezier(.6,.17,.37,.86),
|
|
height 1s cubic-bezier(.6,.17,.37,.86);
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
&__percent {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
&__percent-value {
|
|
line-height: 1;
|
|
}
|
|
|
|
&__percent-suffix {
|
|
line-height: 1;
|
|
}
|
|
|
|
&-type-1 {
|
|
.jet-progress-bar__inner {
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
.jet-progress-bar__status-bar {
|
|
width: 0%;
|
|
}
|
|
|
|
.jet-progress-bar__title {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.jet-progress-bar__wrapper {
|
|
align-self: stretch;
|
|
}
|
|
|
|
.jet-progress-bar__percent {
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-type-2 {
|
|
.jet-progress-bar__inner {
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
.jet-progress-bar__status-bar {
|
|
width: 0%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-type-3 {
|
|
.jet-progress-bar__inner {
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
.jet-progress-bar__wrapper {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.jet-progress-bar__status-bar {
|
|
width: 0%;
|
|
}
|
|
|
|
.jet-progress-bar__percent {
|
|
align-self: flex-end;
|
|
position: absolute;
|
|
bottom: calc(100% + 10px);
|
|
right: 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
&-type-4 {
|
|
.jet-progress-bar__inner {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.jet-progress-bar__wrapper {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.jet-progress-bar__status-bar {
|
|
width: 0%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-type-5 {
|
|
.jet-progress-bar__inner {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.jet-progress-bar__wrapper {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.jet-progress-bar__status-bar {
|
|
width: 0%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-type-6 {
|
|
.jet-progress-bar__inner {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.jet-progress-bar__wrapper {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.jet-progress-bar__status-bar {
|
|
width: 0%;
|
|
}
|
|
|
|
.jet-progress-bar__status {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-type-7 {
|
|
.jet-progress-bar__inner {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.jet-progress-bar__wrapper {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
|
|
.jet-progress-bar__status-bar {
|
|
width: 100%;
|
|
height: 0%;
|
|
}
|
|
}
|
|
}
|
|
}
|