97 lines
1.7 KiB
Plaintext
97 lines
1.7 KiB
Plaintext
|
.t-float-left {
|
||
|
float: left;
|
||
|
}
|
||
|
.t-float-right {
|
||
|
float: right;
|
||
|
}
|
||
|
@keyframes tdesign-fade-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
.hotspot-expanded.relative {
|
||
|
position: relative;
|
||
|
}
|
||
|
.hotspot-expanded::after {
|
||
|
content: '';
|
||
|
display: block;
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
top: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
transform: scale(1.5);
|
||
|
}
|
||
|
.t-progress__inner {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
min-height: 64rpx;
|
||
|
}
|
||
|
.t-progress__bar {
|
||
|
position: relative;
|
||
|
flex: 1;
|
||
|
height: 8rpx;
|
||
|
background: #e7e7e7;
|
||
|
}
|
||
|
.t-progress__bar-percent {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
height: 100%;
|
||
|
background: #0052d9;
|
||
|
transition: all 0.3s ease-out;
|
||
|
border-radius: inherit;
|
||
|
}
|
||
|
.t-progress__label {
|
||
|
display: inline-block;
|
||
|
width: 84rpx;
|
||
|
text-align: right;
|
||
|
margin-left: 32rpx;
|
||
|
font-size: 32rpx;
|
||
|
color: rgba(0, 0, 0, 0.9);
|
||
|
line-height: 48rpx;
|
||
|
}
|
||
|
.t-progress--status--active .t-progress__bar-percent::before {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
z-index: 1;
|
||
|
content: '';
|
||
|
animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite;
|
||
|
background: #fff;
|
||
|
opacity: 0.2;
|
||
|
}
|
||
|
.t-progress--status--success .t-progress__bar-percent {
|
||
|
background: #078d5c;
|
||
|
}
|
||
|
.t-progress--status--warning .t-progress__bar-percent {
|
||
|
background: #ed7b2f;
|
||
|
}
|
||
|
.t-progress--status--warning .t-progress__label {
|
||
|
color: #ed7b2f;
|
||
|
}
|
||
|
.t-progress--status--error .t-progress__bar-percent {
|
||
|
background: #e34d59;
|
||
|
}
|
||
|
.t-progress--status--error .t-progress__label {
|
||
|
color: #e34d59;
|
||
|
}
|
||
|
@keyframes progress-active-animation {
|
||
|
0% {
|
||
|
width: 0;
|
||
|
opacity: 0.1;
|
||
|
}
|
||
|
35% {
|
||
|
width: 50%;
|
||
|
opacity: 0.4;
|
||
|
}
|
||
|
100% {
|
||
|
width: 100%;
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|