UNPKG

13.6 kBCSSView Raw
1
2.next-sr-only {
3 position: absolute;
4 width: 1px;
5 height: 1px;
6 padding: 0;
7 overflow: hidden;
8 clip: rect(0, 0, 0, 0);
9 white-space: nowrap;
10 border: 0;
11 top: 0;
12 margin: -1px; }
13
14.next-checkbox-wrapper[dir="rtl"] {
15 margin-right: 8px;
16 margin-left: 0; }
17 .next-checkbox-wrapper[dir="rtl"]:first-child {
18 margin-right: 0; }
19 .next-checkbox-wrapper[dir="rtl"] > .next-checkbox-label {
20 margin-right: 4px;
21 margin-right: var(--checkbox-margin-left, 4px);
22 margin-left: 0; }
23
24/* stylelint-disable max-nesting-depth */
25.next-checkbox-wrapper {
26 box-sizing: border-box;
27 display: inline-block; }
28 .next-checkbox-wrapper *,
29 .next-checkbox-wrapper *:before,
30 .next-checkbox-wrapper *:after {
31 box-sizing: border-box; }
32 .next-checkbox-wrapper .next-checkbox {
33 display: inline-block;
34 position: relative;
35 line-height: 1;
36 vertical-align: middle; }
37 .next-checkbox-wrapper input[type="checkbox"] {
38 opacity: 0;
39 position: absolute;
40 top: 0;
41 left: 0;
42 width: 16px;
43 width: var(--checkbox-size, 16px);
44 height: 16px;
45 height: var(--checkbox-size, 16px);
46 margin: 0;
47 cursor: pointer; }
48 .next-checkbox-wrapper .next-checkbox-inner {
49 display: block;
50 width: 16px;
51 width: var(--checkbox-size, 16px);
52 height: 16px;
53 height: var(--checkbox-size, 16px);
54 background: #FFFFFF;
55 background: var(--checkbox-bg-color, #FFFFFF);
56 border-radius: 3px;
57 border-radius: var(--checkbox-border-radius, 3px);
58 border: 1px solid #C4C6CF;
59 border: var(--checkbox-border-width, 1px) solid var(--checkbox-border-color, #C4C6CF);
60 transition: all 100ms linear;
61 transition: all var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
62 text-align: left;
63 /* 防止继承父级 */
64 box-shadow: none;
65 box-shadow: var(--checkbox-shadow, none); }
66 .next-checkbox-wrapper .next-checkbox-inner > .next-icon {
67 transform: scale(0);
68 position: absolute;
69 top: 0;
70 opacity: 0;
71 line-height: 16px;
72 line-height: var(--checkbox-size, 16px);
73 transition: all 100ms linear;
74 transition: all var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
75 color: #FFFFFF;
76 color: var(--checkbox-checked-circle-color, #FFFFFF);
77 left: 4px;
78 left: calc(var(--checkbox-size, 16px)/2 - var(--checkbox-circle-size, 8px)/2);
79 margin-left: 0px; }
80 .next-checkbox-wrapper .next-checkbox-inner > .next-icon:before,
81 .next-checkbox-wrapper .next-checkbox-inner > .next-icon .next-icon-remote {
82 width: 8px;
83 width: var(--checkbox-circle-size, 8px);
84 font-size: 8px;
85 font-size: var(--checkbox-circle-size, 8px);
86 line-height: inherit; }
87 @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
88 .next-checkbox-wrapper .next-checkbox-inner > .next-icon {
89 transform: scale(0.5);
90 margin-left: -4px;
91 margin-left: calc(0px - var(--icon-s, 16px)/2 + var(--checkbox-circle-size, 8px)/2);
92 margin-right: -4px;
93 margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--checkbox-circle-size, 8px)/2); }
94 .next-checkbox-wrapper .next-checkbox-inner > .next-icon:before {
95 width: 16px;
96 width: var(--icon-s, 16px);
97 font-size: 16px;
98 font-size: var(--icon-s, 16px); } }
99 .next-checkbox-wrapper .next-checkbox-inner > .next-icon::before {
100 vertical-align: top;
101 margin-top: 0; }
102 .next-checkbox-wrapper .next-checkbox-inner > .next-checkbox-select-icon::before {
103 content: "";
104 content: var(--checkbox-select-icon-content, ""); }
105 .next-checkbox-wrapper .next-checkbox-inner > .next-checkbox-semi-select-icon::before {
106 content: "";
107 content: var(--checkbox-semi-select-icon-content, ""); }
108 .next-checkbox-wrapper.checked > .next-checkbox > .next-checkbox-inner, .next-checkbox-wrapper.checked.focused > .next-checkbox > .next-checkbox-inner {
109 border-color: transparent;
110 border-color: var(--checkbox-checked-border-color, transparent);
111 background-color: #5584FF;
112 background-color: var(--checkbox-checked-bg-color, #5584FF); }
113 .next-checkbox-wrapper.checked > .next-checkbox > .next-checkbox-inner:hover, .next-checkbox-wrapper.checked > .next-checkbox > .next-checkbox-inner.hovered, .next-checkbox-wrapper.checked.focused > .next-checkbox > .next-checkbox-inner:hover, .next-checkbox-wrapper.checked.focused > .next-checkbox > .next-checkbox-inner.hovered {
114 border-color: transparent;
115 border-color: var(--checkbox-checked-border-color, transparent); }
116 .next-checkbox-wrapper.checked > .next-checkbox > .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked.focused > .next-checkbox > .next-checkbox-inner > .next-icon {
117 opacity: 1;
118 transform: scale(1);
119 margin-left: 0px;
120 /* font-size < 12px的时候进行覆盖。 */ }
121 .next-checkbox-wrapper.checked > .next-checkbox > .next-checkbox-inner > .next-icon:before,
122 .next-checkbox-wrapper.checked > .next-checkbox > .next-checkbox-inner > .next-icon .next-icon-remote, .next-checkbox-wrapper.checked.focused > .next-checkbox > .next-checkbox-inner > .next-icon:before,
123 .next-checkbox-wrapper.checked.focused > .next-checkbox > .next-checkbox-inner > .next-icon .next-icon-remote {
124 width: 8px;
125 width: var(--checkbox-circle-size, 8px);
126 font-size: 8px;
127 font-size: var(--checkbox-circle-size, 8px);
128 line-height: inherit; }
129 @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
130 .next-checkbox-wrapper.checked > .next-checkbox > .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked.focused > .next-checkbox > .next-checkbox-inner > .next-icon {
131 transform: scale(0.5);
132 margin-left: -4px;
133 margin-left: calc(0px - var(--icon-s, 16px)/2 + var(--checkbox-circle-size, 8px)/2);
134 margin-right: -4px;
135 margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--checkbox-circle-size, 8px)/2); }
136 .next-checkbox-wrapper.checked > .next-checkbox > .next-checkbox-inner > .next-icon:before, .next-checkbox-wrapper.checked.focused > .next-checkbox > .next-checkbox-inner > .next-icon:before {
137 width: 16px;
138 width: var(--icon-s, 16px);
139 font-size: 16px;
140 font-size: var(--icon-s, 16px); } }
141 .next-checkbox-wrapper.indeterminate > .next-checkbox > .next-checkbox-inner, .next-checkbox-wrapper.indeterminate.focused > .next-checkbox > .next-checkbox-inner {
142 border-color: transparent;
143 border-color: var(--checkbox-checked-border-color, transparent);
144 background-color: #5584FF;
145 background-color: var(--checkbox-checked-bg-color, #5584FF); }
146 .next-checkbox-wrapper.indeterminate > .next-checkbox > .next-checkbox-inner:hover, .next-checkbox-wrapper.indeterminate > .next-checkbox > .next-checkbox-inner.hovered, .next-checkbox-wrapper.indeterminate.focused > .next-checkbox > .next-checkbox-inner:hover, .next-checkbox-wrapper.indeterminate.focused > .next-checkbox > .next-checkbox-inner.hovered {
147 border-color: transparent;
148 border-color: var(--checkbox-checked-border-color, transparent); }
149 .next-checkbox-wrapper.indeterminate > .next-checkbox > .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.indeterminate.focused > .next-checkbox > .next-checkbox-inner > .next-icon {
150 opacity: 1;
151 transform: scale3d(1, 1, 1);
152 margin-left: 0px;
153 /* font-size < 12px的时候进行覆盖。 */ }
154 .next-checkbox-wrapper.indeterminate > .next-checkbox > .next-checkbox-inner > .next-icon:before,
155 .next-checkbox-wrapper.indeterminate > .next-checkbox > .next-checkbox-inner > .next-icon .next-icon-remote, .next-checkbox-wrapper.indeterminate.focused > .next-checkbox > .next-checkbox-inner > .next-icon:before,
156 .next-checkbox-wrapper.indeterminate.focused > .next-checkbox > .next-checkbox-inner > .next-icon .next-icon-remote {
157 width: 8px;
158 width: var(--checkbox-circle-size, 8px);
159 font-size: 8px;
160 font-size: var(--checkbox-circle-size, 8px);
161 line-height: inherit; }
162 @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
163 .next-checkbox-wrapper.indeterminate > .next-checkbox > .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.indeterminate.focused > .next-checkbox > .next-checkbox-inner > .next-icon {
164 transform: scale(0.5);
165 margin-left: -4px;
166 margin-left: calc(0px - var(--icon-s, 16px)/2 + var(--checkbox-circle-size, 8px)/2);
167 margin-right: -4px;
168 margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--checkbox-circle-size, 8px)/2); }
169 .next-checkbox-wrapper.indeterminate > .next-checkbox > .next-checkbox-inner > .next-icon:before, .next-checkbox-wrapper.indeterminate.focused > .next-checkbox > .next-checkbox-inner > .next-icon:before {
170 width: 16px;
171 width: var(--icon-s, 16px);
172 font-size: 16px;
173 font-size: var(--icon-s, 16px); } }
174 .next-checkbox-wrapper:not(.disabled):hover > .next-checkbox > .next-checkbox-inner, .next-checkbox-wrapper.hovered > .next-checkbox > .next-checkbox-inner, .next-checkbox-wrapper.focused > .next-checkbox > .next-checkbox-inner {
175 border-color: #5584FF;
176 border-color: var(--checkbox-hovered-border-color, #5584FF);
177 background-color: #DEE8FF;
178 background-color: var(--checkbox-hovered-bg-color, #DEE8FF); }
179 .next-checkbox-wrapper:not(.disabled):hover .next-checkbox-label, .next-checkbox-wrapper.hovered .next-checkbox-label, .next-checkbox-wrapper.focused .next-checkbox-label {
180 cursor: pointer; }
181 .next-checkbox-wrapper.indeterminate:not(.disabled):hover > .next-checkbox .next-checkbox-inner, .next-checkbox-wrapper.indeterminate:not(.disabled).hovered > .next-checkbox .next-checkbox-inner, .next-checkbox-wrapper.checked:not(.disabled):hover > .next-checkbox .next-checkbox-inner, .next-checkbox-wrapper.checked:not(.disabled).hovered > .next-checkbox .next-checkbox-inner {
182 border-color: transparent;
183 border-color: var(--checkbox-checked-hovered-border-color, transparent);
184 background-color: #3E71F7;
185 background-color: var(--checkbox-checked-hovered-bg-color, #3E71F7); }
186 .next-checkbox-wrapper.indeterminate:not(.disabled):hover > .next-checkbox .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.indeterminate:not(.disabled).hovered > .next-checkbox .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked:not(.disabled):hover > .next-checkbox .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked:not(.disabled).hovered > .next-checkbox .next-checkbox-inner > .next-icon {
187 color: #FFFFFF;
188 color: var(--checkbox-checked-hovered-circle-color, #FFFFFF);
189 opacity: 1; }
190 .next-checkbox-wrapper.disabled input[type="checkbox"] {
191 cursor: not-allowed; }
192 .next-checkbox-wrapper.disabled .next-checkbox-inner {
193 border-color: #E6E7EB;
194 border-color: var(--checkbox-disabled-border-color, #E6E7EB);
195 background: #F7F8FA;
196 background: var(--checkbox-disabled-bg-color, #F7F8FA); }
197 .next-checkbox-wrapper.disabled.checked .next-checkbox-inner, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner {
198 border-color: #E6E7EB;
199 border-color: var(--checkbox-disabled-border-color, #E6E7EB);
200 background: #F7F8FA;
201 background: var(--checkbox-disabled-bg-color, #F7F8FA); }
202 .next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover, .next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered {
203 border-color: #E6E7EB;
204 border-color: var(--checkbox-disabled-border-color, #E6E7EB); }
205 .next-checkbox-wrapper.disabled.checked .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner > .next-icon {
206 color: #CCCCCC;
207 color: var(--checkbox-disabled-circle-color, #CCCCCC);
208 opacity: 1; }
209 .next-checkbox-wrapper.disabled.checked.focused .next-checkbox-inner {
210 border-color: #E6E7EB;
211 border-color: var(--checkbox-disabled-border-color, #E6E7EB);
212 background: #F7F8FA;
213 background: var(--checkbox-disabled-bg-color, #F7F8FA); }
214 .next-checkbox-wrapper.disabled.checked.focused .next-checkbox-inner > .next-icon {
215 color: #CCCCCC;
216 color: var(--checkbox-disabled-circle-color, #CCCCCC);
217 opacity: 1; }
218 .next-checkbox-wrapper.disabled .next-checkbox-label {
219 color: #CCCCCC;
220 color: var(--checkbox-disabled-label-color, #CCCCCC);
221 cursor: not-allowed; }
222
223.next-checkbox-group .next-checkbox-wrapper {
224 display: inline-block;
225 margin-right: 12px; }
226 .next-checkbox-group .next-checkbox-wrapper:last-child {
227 margin-right: 0; }
228
229.next-checkbox-group-ver .next-checkbox-wrapper {
230 display: block;
231 margin-left: 0;
232 margin-right: 0;
233 margin-bottom: 8px; }
234
235.next-checkbox-label {
236 font-size: 12px;
237 font-size: var(--checkbox-font-size, 12px);
238 color: #333333;
239 color: var(--checkbox-label-color, #333333);
240 vertical-align: middle;
241 margin: 0;
242 margin-left: 4px;
243 margin-left: var(--checkbox-margin-left, 4px);
244 /* 使用已存margin-left变量 */
245 margin-right: 4px;
246 margin-right: var(--checkbox-margin-left, 4px);
247 line-height: 1; }