1 | @import "../core/index-noreset.scss";
|
2 | @import "scss/variable";
|
3 | @import "scss/mixin";
|
4 | @import "./rtl.scss";
|
5 |
|
6 | #{$rating-prefix} {
|
7 | vertical-align: top;
|
8 |
|
9 | & {
|
10 | display: inline-block;
|
11 | position: relative;
|
12 | }
|
13 |
|
14 | &:after {
|
15 | visibility: hidden;
|
16 | display: block;
|
17 | height: 0;
|
18 | font-size: 0;
|
19 | content: '\0020';
|
20 | clear: both;
|
21 | }
|
22 |
|
23 | &-base {
|
24 | float: left;
|
25 | }
|
26 |
|
27 | &-text {
|
28 | float: left;
|
29 | }
|
30 |
|
31 | &-base-disabled {
|
32 | cursor: not-allowed;
|
33 |
|
34 | #{$rating-prefix}-underlay #{$rating-prefix}-icon {
|
35 | cursor: not-allowed;
|
36 | }
|
37 |
|
38 | #{$rating-prefix}-overlay #{$rating-prefix}-icon {
|
39 | cursor: not-allowed;
|
40 | }
|
41 | }
|
42 |
|
43 | &-symbol-icon::before {
|
44 | content: $rating-grade-icon-content;
|
45 | }
|
46 |
|
47 | &-underlay {
|
48 | white-space: nowrap;
|
49 | overflow: hidden;
|
50 |
|
51 | @include rating-state($rating-normal-underlay-color);
|
52 | }
|
53 |
|
54 | &-stroke-mode &-underlay {
|
55 | #{$rating-icon-prefix} {
|
56 | color: $color-transparent;
|
57 | -webkit-text-stroke: 1px $rating-normal-overlay-color;
|
58 | }
|
59 | }
|
60 |
|
61 | &-overlay {
|
62 | white-space: nowrap;
|
63 | overflow: hidden;
|
64 | position: absolute;
|
65 | width: 0;
|
66 | top: 0;
|
67 | left: 0;
|
68 |
|
69 | @include rating-state($rating-normal-overlay-color);
|
70 | }
|
71 |
|
72 | &-underlay,
|
73 | &-overlay {
|
74 | #{$rating-prefix}-icon {
|
75 | cursor: pointer;
|
76 | margin-left: $s-1;
|
77 | }
|
78 |
|
79 | #{$rating-prefix}-icon:last-child {
|
80 |
|
81 | margin-right: $s-1;
|
82 | }
|
83 |
|
84 | #{$rating-icon-prefix} {
|
85 | transition: all $motion-duration-immediately $motion-linear;
|
86 |
|
87 | &.hover {
|
88 | transform: scale3d(1.1, 1.1, 1.1);
|
89 | }
|
90 |
|
91 | &.clicked {
|
92 | transform: scale3d(.9, .9, .9);
|
93 | }
|
94 | }
|
95 | }
|
96 |
|
97 | &-info {
|
98 | position: absolute;
|
99 | top: calc(100% + #{$s-1});
|
100 | left: 0;
|
101 | border: 1px solid $color-fill1-4;
|
102 | background: $color-white;
|
103 | padding: 4px 8px 3px;
|
104 | font-size: 12px;
|
105 | white-space: nowrap;
|
106 |
|
107 | &:after {
|
108 | position: absolute;
|
109 | content: '';
|
110 | width: 4px;
|
111 | height: 4px;
|
112 | transform: rotate(45deg);
|
113 | border: 1px solid $color-fill1-4;
|
114 | background: $color-white;
|
115 | border-bottom-color: transparent;
|
116 | border-right-color: transparent;
|
117 | top: -3px;
|
118 | left: 4px;
|
119 | }
|
120 | }
|
121 |
|
122 | &:focus #{$rating-prefix}-base:not(#{$rating-prefix}-base-disabled),
|
123 | &.hover {
|
124 | outline: none;
|
125 | #{$rating-prefix}-overlay {
|
126 | @include rating-state($rating-normal-overlay-hover-color);
|
127 | }
|
128 | }
|
129 | }
|
130 |
|
131 |
|
132 |
|
133 |
|
134 | #{$rating-prefix}-grade-low {
|
135 | #{$rating-prefix}-overlay {
|
136 | @include rating-state($rating-grade-low-overlay-color);
|
137 | }
|
138 |
|
139 | &.hover {
|
140 | #{$rating-prefix}-overlay {
|
141 | @include rating-state($rating-grade-low-overlay-color);
|
142 | }
|
143 | }
|
144 | }
|
145 |
|
146 | #{$rating-prefix}-grade-high {
|
147 | #{$rating-prefix}-overlay {
|
148 | @include rating-state($rating-grade-high-overlay-color);
|
149 | }
|
150 |
|
151 | &.hover {
|
152 | #{$rating-prefix}-overlay {
|
153 | @include rating-state($rating-grade-high-overlay-hover-color);
|
154 | }
|
155 | }
|
156 | }
|
157 |
|
158 |
|
159 |
|
160 |
|
161 | #{$rating-prefix}-small {
|
162 | @include rating-size($rating-small-icon-size, $rating-small-font-size, $rating-small-text-margin-left);
|
163 | }
|
164 |
|
165 | #{$rating-prefix}-medium {
|
166 | @include rating-size($rating-medium-icon-size, $rating-medium-font-size, $rating-medium-text-margin-left);
|
167 | }
|
168 |
|
169 | #{$rating-prefix}-large {
|
170 | @include rating-size($rating-large-icon-size, $rating-large-font-size, $rating-large-text-margin-left);
|
171 | }
|