naive-ui/styles/Progress.scss
2020-02-13 20:24:09 +08:00

277 lines
8.0 KiB
SCSS

@import "./mixins/mixins.scss";
@mixin progress-animation-mixin ($type) {
@keyframes progress-#{$type}-type-ripple {
0% {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 100%;
opacity: 1;
}
66% {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
}
100% {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
}
}
}
@mixin progress-type-mixin ($type) {
@include m($type) {
@include b(progress-text) {
color: map-get($--progress-indicator-color, 'outside');
}
$fill-color: map-get($--progress-fill-color, $type);
@include b(progress-icon) {
fill: $fill-color;
@include m(as-text) {
color: map-get($--progress-indicator-color, 'outside');
}
}
@include b(progress-graph) {
@include b(progress-graph-circle) {
@include b(progress-graph-circle-fill) {
stroke: $fill-color;
}
}
@include b(progress-graph-line) {
@include b(progress-graph-line-rail) {
@include b(progress-graph-line-fill) {
background-color: $fill-color;
@include m(processing) {
&::after {
content: '';
background-image: $--progress-line-processing-background-image;
animation: progress-#{$type}-type-ripple 3s $--n-ease-out-cubic-bezier infinite;
}
}
}
}
@include b(progress-graph-line-indicator) {
background-color: $fill-color;
}
}
}
}
}
@include progress-animation-mixin('default');
@include progress-animation-mixin('success');
@include progress-animation-mixin('warning');
@include progress-animation-mixin('error');
@include progress-animation-mixin('info');
@include themes-mixin {
@include b(progress) {
@include once {
display: inline-block;
@include m(line) {
width: 100%;
display: block;
@include b(progress-content) {
display: flex;
align-items: center;
@include b(progress-graph) {
flex: 1;
}
}
@include b(progress-custom-content) {
margin-left: 14px;
}
@include b(progress-icon) {
width: 30px;
padding-left: 14px;
height: 18px;
line-height: 18px;
font-size: 18px;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
@include m(as-text) {
text-align: center;
width: 40px;
font-size: 14px;
padding-left: 4px;
}
}
}
@include m(circle) {
width: 120px;
@include b(progress-custom-content) {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
}
@include b(progress-text) {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
align-items: center;
color: inherit;
font-size: 36px;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
@include b(progress-icon) {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
align-items: center;
color: inherit;
font-size: 36px;
}
@include b(progress-text) {
white-space: nowrap;
font-weight: 500;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include e(percentage) {
color: inherit;
font-size: 28px;
}
@include e(unit) {
color: inherit;
font-size: 24px;
margin-left: 6px;
}
}
}
@include m(multiple-circle) {
width: 200px;
color: inherit;
@include b(progress-text) {
transition: color .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
}
}
@include b(progress-content) {
position: relative;
}
}
@include progress-type-mixin('default');
@include progress-type-mixin('info');
@include progress-type-mixin('success');
@include progress-type-mixin('warning');
@include progress-type-mixin('error');
@include b(progress-graph) {
@include once {
position: relative;
}
@include b(progress-graph-circle) {
@include once {
svg {
vertical-align: bottom;
}
@include b(progress-graph-circle-fill) {
transition: stroke .3s $--n-ease-in-out-cubic-bezier, stroke-dasharray .3s $--n-ease-in-out-cubic-bezier;
}
}
@include b(progress-graph-circle-rail) {
@include once {
transition: stroke .3s $--n-ease-in-out-cubic-bezier;
}
stroke: $--progress-rail-color;
}
}
@include b(progress-graph-line) {
@include m(indicator-inside) {
@include once {
@include b(progress-graph-line-rail) {
height: 21px;
border-radius: 10.5px;
@include b(progress-graph-line-fill) {
height: 21px;
border-radius: 10.5px;
}
}
}
@include b(progress-graph-line-indicator) {
@include once {
background-color: transparent;
transition: color .3s $--n-ease-in-out-cubic-bezier;
white-space: nowrap;
text-align: right;
font-weight: 500;
margin-left: 14px;
margin-right: 14px;
height: 21px;
font-size: 14px;
line-height: 21px;
}
color: map-get($--progress-indicator-color, 'inside');
}
}
@include m(indicator-inside-label) {
@include once {
height: 21px;
display: flex;
align-items: center;
@include b(progress-graph-line-rail) {
transition: background-color .3s $--n-ease-in-out-cubic-bezier, right .2s $--n-ease-in-out-cubic-bezier;
flex: 1;
}
}
@include b(progress-graph-line-indicator) {
@include once {
transform: translateZ(0); // to avoid strange offset
display: flex;
vertical-align: middle;
transition: right .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
height: 21px;
line-height: 21px;
padding: 0 10px;
border-radius: 10.5px;
position: absolute;
white-space: nowrap;
font-weight: 500;
font-size: 14px;
}
color: map-get($--progress-indicator-color, 'inside');
}
}
@include b(progress-graph-line-rail) {
@include once {
position: relative;
overflow: hidden;
height: 10px;
border-radius: 5px;
@include b(progress-graph-line-fill) {
position: relative;
border-radius: 5px;
height: 10px;
width: 100%;
max-width: 0%;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, max-width .2s $--n-ease-in-out-cubic-bezier;
}
}
background-color: $--progress-rail-color;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
}
}
}
}
}