shineout/css/Rate/styles/rate.css

Shein 前端组件库

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