acud/es/rate/style/index.css

acg react 组件库

/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
.acud-rate {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  /* 🌟 */
  /* 标签 */
}
.acud-rate-star {
  color: #E8E9EB;
  cursor: pointer;
  display: inline-block;
  position: relative;
  /* 半⭐样式 */
  /* 鼠标划过 两个半星星transtion时会有缝隙 单个设置变形同时设置transform-origin */
  /* 普通样式 */
  /* 高分选中样式 */
  /* 低分选中样式 */
  /* 鼠标焦点选中样式 */
  /* 禁用样式 */
}
.acud-rate-star-inner {
  width: 24px;
  height: 24px;
  overflow: hidden;
  position: relative;
}
.acud-rate-star-inner-left {
  transform-origin: center center;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  line-height: 100%;
}
.acud-rate-star-inner-left-svg {
  width: 200%;
  height: 100%;
  position: relative;
}
.acud-rate-star-inner-left-svg svg {
  width: 100%;
  height: 100%;
}
.acud-rate-star-inner-right {
  transform-origin: center center;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0%;
  height: 100%;
  width: 50%;
  overflow: hidden;
  line-height: 100%;
}
.acud-rate-star-inner-right-svg {
  width: 200%;
  height: 100%;
  position: relative;
  right: 100%;
}
.acud-rate-star-inner-right-svg svg {
  width: 100%;
  height: 100%;
}
.acud-rate-star-half .acud-rate-star-inner-right {
  color: #E8E9EB;
}
.acud-rate-star:not(:last-child) {
  margin-right: 4px;
}
.acud-rate-star:hover .acud-rate-star-inner-left {
  transform: scale(1.1);
}
.acud-rate-star:hover .acud-rate-star-inner-right {
  transform: scale(1.1);
}
.acud-rate-star-normal {
  color: #E8E9EB;
}
.acud-rate-star-full {
  color: #FF9326;
}
.acud-rate-star-low {
  color: #FF9326;
}
.acud-rate-star-focues .acud-rate-star-inner-left {
  transform: scale(1.1);
}
.acud-rate-star-focues .acud-rate-star-inner-right {
  transform: scale(1.1);
}
.acud-rate-star-disabled {
  cursor: not-allowed;
}
.acud-rate-label {
  color: #151B26;
}
.acud-rate-tags {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 12px;
}
.acud-rate-tags-item {
  min-width: 72px;
  height: 32px;
  color: #84868C;
  border: 1px solid #B8BABF;
  border-radius: 4px;
  font-size: 8px;
  line-height: 32px;
  text-align: center;
  box-sizing: border-box;
  padding: 0 12px;
  margin-bottom: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.3s;
  cursor: pointer;
}
.acud-rate-tags-item:hover {
  color: #2468F2;
}
.acud-rate-tags-item:focus,
.acud-rate-tags-item:active {
  color: #144BCC;
}
.acud-rate-tags-item[disabled],
.acud-rate-tags-item[aria-disabled="true"],
.acud-rate-tags-item[disabled]:hover,
.acud-rate-tags-item[aria-disabled="true"]:hover,
.acud-rate-tags-item[disabled]:focus,
.acud-rate-tags-item[aria-disabled="true"]:focus,
.acud-rate-tags-item[disabled]:active,
.acud-rate-tags-item[aria-disabled="true"]:active {
  color: #B8BABF;
}
.acud-rate-tags-item:not(:last-child) {
  margin-right: 4px;
}
.acud-rate-tags-item:hover {
  color: #528EFF;
  border-color: #528EFF;
}
.acud-rate-tags-select {
  color: #2468F2;
  border-color: #2468F2;
}
.acud-rate-tags-disabled {
  cursor: not-allowed;
}
.acud-rate-tags-disabled:hover {
  color: #84868C;
  border-color: #84868C;
}
.acud-rate-tags-disabled:hover:hover {
  color: #2468F2;
}
.acud-rate-tags-disabled:hover:focus,
.acud-rate-tags-disabled:hover:active {
  color: #144BCC;
}
.acud-rate-tags-disabled:hover[disabled],
.acud-rate-tags-disabled:hover[aria-disabled="true"],
.acud-rate-tags-disabled:hover[disabled]:hover,
.acud-rate-tags-disabled:hover[aria-disabled="true"]:hover,
.acud-rate-tags-disabled:hover[disabled]:focus,
.acud-rate-tags-disabled:hover[aria-disabled="true"]:focus,
.acud-rate-tags-disabled:hover[disabled]:active,
.acud-rate-tags-disabled:hover[aria-disabled="true"]:active {
  color: #B8BABF;
}