.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%;
}
}
}
}