@alifd/meet-react/es/rating/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component rating
  @display Rating
  @chinese 评分
  @family data-entry
*/
:root {
  /*
    @desc 默认未选中时颜色
    @namespace style/common
    @semantic 未选中色
  */
  --rating-color: var(--box-normal-solid-background-color);
  /*
    @desc low-active-color
    @namespace style/common
    @semantic 低分选中色
  */
  --rating-low-grade-color: var(--color-text1-3);
  /*
    @desc high-active-color
    @namespace style/common
    @semantic 高分选中色
  */
  --rating-high-grade-color: var(--color-brand-3);
  /*
     @desc font-size
     @semantic 图标大小(小号)
     @namespace size/common
   */
  --rating-small-icon-size: var(--icon-xs);
  /*
     @desc font size
     @semantic 图标大小(中号)
     @namespace size/common
   */
  --rating-medium-icon-size: var(--icon-s);
  /*
     @desc font size
     @semantic 图标大小(大号)
     @namespace size/common
   */
  --rating-large-icon-size: var(--icon-m);
  /*
     @desc padding
     @namespace size/common
     @semantic 上下内边距(小号)
   */
  --rating-small-padding-tb: var(--s-zero);
  /*
     @desc spacing
     @namespace size/common
     @semantic 图标间隙(小号)
   */
  --rating-small-spacing: var(--box-small-spacing);
  /*
     @desc padding
     @namespace size/common
     @semantic 上下内边距(中号)
   */
  --rating-medium-padding-tb: var(--s-zero);
  /*
     @desc spacing
     @namespace size/common
     @semantic 图标间隙(中号)
   */
  --rating-medium-spacing: var(--box-medium-spacing);
  /*
     @desc padding
     @namespace size/common
     @semantic 上下内边距(大号)
   */
  --rating-large-padding-tb: var(--s-zero);
  /*
     @desc spacing
     @namespace size/common
     @semantic 图标间隙(大号)
   */
  --rating-large-spacing: var(--box-large-spacing);
}

.mt-rating {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  outline: none;
}
.mt-rating--left {
  text-align: left;
  justify-content: flex-start;
}
.mt-rating--right {
  text-align: right;
  justify-content: flex-end;
}
.mt-rating--disabled {
  opacity: 0.4;
}
.mt-rating--small {
  padding-top: var(--rating-small-padding-tb);
  padding-bottom: var(--rating-small-padding-tb);
}
.mt-rating--small-icon-wrapper {
  padding-left: calc(var(--rating-small-spacing) * 0.5);
  padding-right: calc(var(--rating-small-spacing) * 0.5);
}
.mt-rating--small-icon {
  font-size: var(--rating-small-icon-size);
  line-height: var(--rating-small-icon-size);
  height: var(--rating-small-icon-size);
  width: var(--rating-small-icon-size);
  overflow: hidden;
}
.mt-rating--medium {
  padding-top: var(--rating-medium-padding-tb);
  padding-bottom: var(--rating-medium-padding-tb);
}
.mt-rating--medium-icon-wrapper {
  padding-left: calc(var(--rating-medium-spacing) * 0.5);
  padding-right: calc(var(--rating-medium-spacing) * 0.5);
}
.mt-rating--medium-icon {
  font-size: var(--rating-medium-icon-size);
  line-height: var(--rating-medium-icon-size);
  height: var(--rating-medium-icon-size);
  width: var(--rating-medium-icon-size);
  overflow: hidden;
}
.mt-rating--large {
  padding-top: var(--rating-large-padding-tb);
  padding-bottom: var(--rating-large-padding-tb);
}
.mt-rating--large-icon-wrapper {
  padding-left: calc(var(--rating-large-spacing) * 0.5);
  padding-right: calc(var(--rating-large-spacing) * 0.5);
}
.mt-rating--large-icon {
  font-size: var(--rating-large-icon-size);
  line-height: var(--rating-large-icon-size);
  height: var(--rating-large-icon-size);
  width: var(--rating-large-icon-size);
  overflow: hidden;
}
.mt-rating-icon-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
.mt-rating-icon-wrapper--first {
  padding-left: 0;
}
.mt-rating-icon-wrapper--last {
  padding-right: 0;
}
.mt-rating-icon-wrapper--overlay {
  position: absolute;
  margin-left: calc(0vw - var(--rating--icon-size));
  padding-left: 0;
  padding-right: 0;
  z-index: var(--elevation-1);
}
.mt-rating-icon {
  color: var(--rating-color);
}
.mt-rating-icon--active-low {
  color: var(--rating-low-grade-color);
}
.mt-rating-icon--active-high {
  color: var(--rating-high-grade-color);
}