@rate-prefix-cls: ~"@{css-prefix}rate"; .@{rate-prefix-cls} { display: inline-block; margin: 0; padding: 0; font-size: 20px; vertical-align: middle; font-weight: normal; font-style: normal; font-family: 'Ionicons'; &-disabled &-star { &:before, &-content:before { cursor: default; } &:hover { transform: scale(1); } } &-star { display: inline-block; margin: 0; padding: 0; margin-right: 8px; position: relative; transition: all 0.3s ease; &:hover { transform: scale(1.1); } &:before, &-content:before { color: #e9e9e9; cursor: pointer; content: "\F4B3"; transition: all @transition-time @ease-in-out; display: block; } &-content { position: absolute; left: 0; top: 0; width: 50%; height: 100%; overflow: hidden; &:before { color: transparent; } } &-half &-content:before, &-full:before { color: @rate-star-color; } &-half:hover &-content:before, &-full:hover:before { color: tint(@rate-star-color, 20%); } } }