tdesign-react
Version:
TDesign Component for React
52 lines (51 loc) • 1.13 kB
CSS
.t-rate {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.t-rate .t-rate__star-top {
position: absolute;
width: 0;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
-webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-rate .t-rate__star-top,
.t-rate .t-rate__star-bottom {
display: grid;
}
.t-rate__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.t-rate__item {
position: relative;
cursor: pointer;
-webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-rate__item:hover {
-webkit-transform: scale(1.33);
transform: scale(1.33);
}
.t-rate__item--half .t-rate__star-top {
width: 50%;
}
.t-rate__item--full .t-rate__star-top {
width: 100%;
}
.t-rate__text {
color: var(--td-text-color-primary);
font: var(--td-font-mark-medium);
margin-left: var(--td-comp-margin-l);
}