vui-design/src/style/components/rate.less

A high quality UI Toolkit based on Vue.js

@vui-rate: ~"@{vui}-rate";

.@{vui-rate} {
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:0;
  font-size:@rate-star-size;
  line-height:1;
  vertical-align:middle;

  li {
    display:flex;
    align-items:center;

    &:not(:last-child) {
      margin-right:@rate-star-margin-right;
    }
  }

  &-star {
    position:relative;
    cursor:pointer;
    display:flex;
    align-items:center;
    transition:all @transition-duration @transition-timing-function;

    &:hover {
      transform:scale(1.1);
    }

    &-first,
    &-second {
      display:flex;
      align-items:center;
      user-select:none;
      transition:all @transition-duration @transition-timing-function;
    }

    &-first {
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      width:50%;
      height:100%;
      overflow:hidden;
    }

    &-zero &-first,
    &-zero &-second {
      color:@rate-star-color;
    }

    &-half &-first {
      color:@rate-star-checked-color;
    }
    &-half &-second {
      color:@rate-star-color;
    }

    &-full &-first,
    &-full &-second {
      color:@rate-star-checked-color;
    }
  }

  &-disabled &-star {
    cursor:default;
  }
}