shineout
Version:
Shein 前端组件库
111 lines (110 loc) • 2.19 kB
CSS
.so-rate {
position: relative;
white-space: nowrap;
display: inline-block;
}
.so-rate-rtl {
direction: rtl;
text-align: right;
}
@-webkit-keyframes so-rate-highlight {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
@keyframes so-rate-highlight {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
.so-rate-background {
position: relative;
z-index: 0;
}
.so-rate-background > span {
color: var(--gray-400, #ced4da);
}
.so-rate-front,
.so-rate-static {
position: absolute;
z-index: 1;
}
.so-rate-front > span,
.so-rate-static > span {
position: relative;
color: #fadb14;
}
.so-rate-front span,
.so-rate-background span {
cursor: pointer;
}
.so-rate-front,
.so-rate-background,
.so-rate-static {
top: 0;
left: 0;
}
.so-rate-rtl .so-rate-front,
.so-rate-rtl .so-rate-background,
.so-rate-rtl .so-rate-static {
left: auto;
right: 0;
}
.so-rate-front > span,
.so-rate-background > span,
.so-rate-static > span {
display: inline-block;
margin-right: 6px;
vertical-align: middle;
}
.so-rate-rtl .so-rate-front > span,
.so-rate-rtl .so-rate-background > span,
.so-rate-rtl .so-rate-static > span {
margin-right: 0;
margin-left: 6px;
}
.so-rate-front > span:last-child,
.so-rate-background > span:last-child,
.so-rate-static > span:last-child {
margin-right: 0;
}
.so-rate-rtl .so-rate-front > span:last-child,
.so-rate-rtl .so-rate-background > span:last-child,
.so-rate-rtl .so-rate-static > span:last-child {
margin-left: 0;
}
.so-rate-highlight {
position: absolute;
top: 0;
left: 0;
-webkit-animation: so-rate-highlight 0.3s ease-out;
animation: so-rate-highlight 0.3s ease-out;
font-style: normal;
}
.so-rate-rtl .so-rate-highlight {
left: auto;
right: 0;
}
span.so-rate-text {
margin-left: 4px;
color: var(--gray-600, #6c757d);
font-size: 14px;
}
.so-rate-rtl span.so-rate-text {
margin-right: 4px;
margin-left: 0;
}