1 | @import '../core/index-noreset';
|
2 |
|
3 | @import './scss/variable';
|
4 | @import './scss/normalize';
|
5 | @import './scss/mixin';
|
6 |
|
7 | #{$btn-prefix} {
|
8 | & {
|
9 | position: relative;
|
10 | display: inline-block;
|
11 | box-shadow: $btn-shadow;
|
12 | text-decoration: none;
|
13 | text-align: center;
|
14 | text-transform: none;
|
15 | white-space: nowrap;
|
16 | vertical-align: middle;
|
17 | user-select: none;
|
18 | transition: all $motion-duration-immediately $motion-linear;
|
19 | line-height: 1;
|
20 | cursor: pointer;
|
21 |
|
22 | &:after {
|
23 | text-align: center;
|
24 | position: absolute;
|
25 | opacity: 0;
|
26 | visibility: hidden;
|
27 | transition: opacity $motion-duration-immediately $motion-linear;
|
28 | }
|
29 |
|
30 | &::before {
|
31 | content: '';
|
32 | display: inline-block;
|
33 | height: 100%;
|
34 | width: 0;
|
35 | vertical-align: middle;
|
36 | }
|
37 |
|
38 | .#{$css-prefix}icon {
|
39 | display: inline-block;
|
40 | font-size: 0;
|
41 | vertical-align: middle;
|
42 | }
|
43 |
|
44 | > span,
|
45 | > div {
|
46 | display: inline-block;
|
47 | vertical-align: middle;
|
48 | }
|
49 |
|
50 | > #{$btn-prefix}-helper {
|
51 | text-decoration: inherit;
|
52 | display: inline-block;
|
53 | vertical-align: middle;
|
54 | }
|
55 |
|
56 | &.hover,
|
57 | &:hover {
|
58 | box-shadow: $btn-shadow-hover;
|
59 | }
|
60 | }
|
61 |
|
62 |
|
63 |
|
64 | &.#{$css-prefix} {
|
65 | &small {
|
66 | @include next-button-size(
|
67 | $btn-size-s-padding,
|
68 | $btn-size-s-height,
|
69 | $btn-size-s-font,
|
70 | $btn-size-s-border-width,
|
71 | $btn-size-s-corner,
|
72 | $btn-size-s-icon-margin,
|
73 | $btn-size-s-icon-size,
|
74 | $btn-size-s-icon-split-size
|
75 | );
|
76 | }
|
77 | &medium {
|
78 | @include next-button-size(
|
79 | $btn-size-m-padding,
|
80 | $btn-size-m-height,
|
81 | $btn-size-m-font,
|
82 | $btn-size-m-border-width,
|
83 | $btn-size-m-corner,
|
84 | $btn-size-m-icon-margin,
|
85 | $btn-size-m-icon-size,
|
86 | $btn-size-m-icon-split-size
|
87 | );
|
88 | }
|
89 | &large {
|
90 | @include next-button-size(
|
91 | $btn-size-l-padding,
|
92 | $btn-size-l-height,
|
93 | $btn-size-l-font,
|
94 | $btn-size-l-border-width,
|
95 | $btn-size-l-corner,
|
96 | $btn-size-l-icon-margin,
|
97 | $btn-size-l-icon-size,
|
98 | $btn-size-l-icon-split-size
|
99 | );
|
100 | }
|
101 | }
|
102 |
|
103 |
|
104 | &#{$btn-prefix} {
|
105 | &-normal {
|
106 | border-style: $btn-pure-normal-border-style;
|
107 |
|
108 | @include button-color(
|
109 | $btn-pure-normal-color,
|
110 | $btn-pure-normal-color-hover,
|
111 | $btn-pure-normal-color-active,
|
112 | $btn-pure-normal-bg,
|
113 | $btn-pure-normal-bg-hover,
|
114 | $btn-pure-normal-bg-active,
|
115 | $btn-pure-normal-border-color,
|
116 | $btn-pure-normal-border-color-hover,
|
117 | $btn-pure-normal-border-color-active
|
118 | );
|
119 | }
|
120 |
|
121 | &-primary {
|
122 | border-style: $btn-pure-primary-border-style;
|
123 |
|
124 | @include button-color(
|
125 | $btn-pure-primary-color,
|
126 | $btn-pure-primary-color-hover,
|
127 | $btn-pure-primary-color-active,
|
128 | $btn-pure-primary-bg,
|
129 | $btn-pure-primary-bg-hover,
|
130 | $btn-pure-primary-bg-active,
|
131 | $btn-pure-primary-border-color,
|
132 | $btn-pure-primary-border-color-hover,
|
133 | $btn-pure-primary-border-color-active
|
134 | );
|
135 | }
|
136 |
|
137 | &-secondary {
|
138 | border-style: $btn-pure-secondary-border-style;
|
139 |
|
140 | @include button-color(
|
141 | $btn-pure-secondary-color,
|
142 | $btn-pure-secondary-color-hover,
|
143 | $btn-pure-secondary-color-active,
|
144 | $btn-pure-secondary-bg,
|
145 | $btn-pure-secondary-bg-hover,
|
146 | $btn-pure-secondary-bg-active,
|
147 | $btn-pure-secondary-border-color,
|
148 | $btn-pure-secondary-border-color-hover,
|
149 | $btn-pure-secondary-border-color-active
|
150 | );
|
151 | }
|
152 | }
|
153 |
|
154 |
|
155 | &.disabled,
|
156 | &[disabled] {
|
157 | cursor: not-allowed;
|
158 |
|
159 | &#{$btn-prefix}-normal {
|
160 | @include button-color(
|
161 | $btn-pure-normal-color-disabled,
|
162 | $btn-pure-normal-color-disabled,
|
163 | $btn-pure-normal-color-disabled,
|
164 | $btn-pure-normal-bg-disabled,
|
165 | $btn-pure-normal-bg-disabled,
|
166 | $btn-pure-normal-bg-disabled,
|
167 | $btn-pure-normal-border-color-disabled,
|
168 | $btn-pure-normal-border-color-disabled,
|
169 | $btn-pure-normal-border-color-disabled
|
170 | );
|
171 | }
|
172 |
|
173 | &#{$btn-prefix}-primary {
|
174 | @include button-color(
|
175 | $btn-pure-primary-color-disabled,
|
176 | $btn-pure-primary-color-disabled,
|
177 | $btn-pure-primary-color-disabled,
|
178 | $btn-pure-primary-bg-disabled,
|
179 | $btn-pure-primary-bg-disabled,
|
180 | $btn-pure-primary-bg-disabled,
|
181 | $btn-pure-primary-border-color-disabled,
|
182 | $btn-pure-primary-border-color-disabled,
|
183 | $btn-pure-primary-border-color-disabled
|
184 | );
|
185 | }
|
186 |
|
187 | &#{$btn-prefix}-secondary {
|
188 | @include button-color(
|
189 | $btn-pure-secondary-color-disabled,
|
190 | $btn-pure-secondary-color-disabled,
|
191 | $btn-pure-secondary-color-disabled,
|
192 | $btn-pure-secondary-bg-disabled,
|
193 | $btn-pure-secondary-bg-disabled,
|
194 | $btn-pure-secondary-bg-disabled,
|
195 | $btn-pure-secondary-border-color-disabled,
|
196 | $btn-pure-secondary-border-color-disabled,
|
197 | $btn-pure-secondary-border-color-disabled
|
198 | );
|
199 | }
|
200 | }
|
201 |
|
202 |
|
203 | &-warning {
|
204 | border-style: $btn-warning-border-style;
|
205 |
|
206 | &#{$btn-prefix}-primary {
|
207 | @include button-color(
|
208 | $btn-warning-primary-color,
|
209 | $btn-warning-primary-color-hover,
|
210 | $btn-warning-primary-color-active,
|
211 | $btn-warning-primary-bg,
|
212 | $btn-warning-primary-bg-hover,
|
213 | $btn-warning-primary-bg-active,
|
214 | $btn-warning-primary-border-color,
|
215 | $btn-warning-primary-border-color-hover,
|
216 | $btn-warning-primary-border-color-active
|
217 | );
|
218 | &.disabled,
|
219 | &[disabled] {
|
220 | @include button-color(
|
221 | $btn-warning-primary-color-disabled,
|
222 | $btn-warning-primary-color-disabled,
|
223 | $btn-warning-primary-color-disabled,
|
224 | $btn-warning-primary-bg-disabled,
|
225 | $btn-warning-primary-bg-disabled,
|
226 | $btn-warning-primary-bg-disabled,
|
227 | $btn-warning-primary-border-color-disabled,
|
228 | $btn-warning-primary-border-color-disabled,
|
229 | $btn-warning-primary-border-color-disabled
|
230 | );
|
231 | }
|
232 | }
|
233 |
|
234 | &#{$btn-prefix}-normal {
|
235 | @include button-color(
|
236 | $btn-warning-normal-color,
|
237 | $btn-warning-normal-color-hover,
|
238 | $btn-warning-normal-color-active,
|
239 | $btn-warning-normal-bg,
|
240 | $btn-warning-normal-bg-hover,
|
241 | $btn-warning-normal-bg-active,
|
242 | $btn-warning-normal-border-color,
|
243 | $btn-warning-normal-border-color-hover,
|
244 | $btn-warning-normal-border-color-active
|
245 | );
|
246 |
|
247 | &.disabled,
|
248 | &[disabled] {
|
249 | @include button-color(
|
250 | $btn-warning-normal-color-disabled,
|
251 | $btn-warning-normal-color-disabled,
|
252 | $btn-warning-normal-color-disabled,
|
253 | $btn-warning-normal-bg-disabled,
|
254 | $btn-warning-normal-bg-disabled,
|
255 | $btn-warning-normal-bg-disabled,
|
256 | $btn-warning-normal-border-color-disabled,
|
257 | $btn-warning-normal-border-color-disabled,
|
258 | $btn-warning-normal-border-color-disabled
|
259 | );
|
260 | }
|
261 | }
|
262 | }
|
263 |
|
264 |
|
265 | &-text {
|
266 | box-shadow: none;
|
267 | border-radius: 0;
|
268 | user-select: text;
|
269 |
|
270 | &.hover,
|
271 | &:hover {
|
272 | box-shadow: none;
|
273 | }
|
274 |
|
275 | &#{$btn-prefix}-primary {
|
276 | @include button-color(
|
277 | $btn-text-primary-color,
|
278 | $btn-text-primary-color-hover,
|
279 | $btn-text-primary-color-hover,
|
280 | transparent,
|
281 | transparent,
|
282 | transparent,
|
283 | transparent,
|
284 | transparent,
|
285 | transparent
|
286 | );
|
287 | &.disabled,
|
288 | &[disabled] {
|
289 | @include button-color(
|
290 | $btn-text-disabled-color,
|
291 | $btn-text-disabled-color,
|
292 | $btn-text-disabled-color,
|
293 | transparent,
|
294 | transparent,
|
295 | transparent,
|
296 | transparent,
|
297 | transparent,
|
298 | transparent
|
299 | );
|
300 | }
|
301 | }
|
302 | &#{$btn-prefix}-secondary {
|
303 | @include button-color(
|
304 | $btn-text-secondary-color,
|
305 | $btn-text-secondary-color-hover,
|
306 | $btn-text-secondary-color-hover,
|
307 | transparent,
|
308 | transparent,
|
309 | transparent,
|
310 | transparent,
|
311 | transparent,
|
312 | transparent
|
313 | );
|
314 | &.disabled,
|
315 | &[disabled] {
|
316 | @include button-color(
|
317 | $btn-text-disabled-color,
|
318 | $btn-text-disabled-color,
|
319 | $btn-text-disabled-color,
|
320 | transparent,
|
321 | transparent,
|
322 | transparent,
|
323 | transparent,
|
324 | transparent,
|
325 | transparent
|
326 | );
|
327 | }
|
328 | }
|
329 | &#{$btn-prefix}-normal {
|
330 | @include button-color(
|
331 | $btn-text-normal-color,
|
332 | $btn-text-normal-color-hover,
|
333 | $btn-text-normal-color-hover,
|
334 | transparent,
|
335 | transparent,
|
336 | transparent,
|
337 | transparent,
|
338 | transparent,
|
339 | transparent
|
340 | );
|
341 | &.disabled,
|
342 | &[disabled] {
|
343 | @include button-color(
|
344 | $btn-text-disabled-color,
|
345 | $btn-text-disabled-color,
|
346 | $btn-text-disabled-color,
|
347 | transparent,
|
348 | transparent,
|
349 | transparent,
|
350 | transparent,
|
351 | transparent,
|
352 | transparent
|
353 | );
|
354 | }
|
355 | }
|
356 | &.#{$css-prefix}large {
|
357 | @include next-button-size(
|
358 | 0px,
|
359 | $btn-text-size-l-height,
|
360 | $btn-text-size-l-font,
|
361 | 0,
|
362 | 0,
|
363 | $btn-text-icon-l-margin,
|
364 | $btn-size-l-icon-size,
|
365 | $btn-size-l-icon-split-size
|
366 | );
|
367 | }
|
368 | &.#{$css-prefix}medium {
|
369 | @include next-button-size(
|
370 | 0px,
|
371 | $btn-text-size-m-height,
|
372 | $btn-text-size-m-font,
|
373 | 0,
|
374 | 0,
|
375 | $btn-text-icon-m-margin,
|
376 | $btn-size-m-icon-size,
|
377 | $btn-size-m-icon-split-size
|
378 | );
|
379 | }
|
380 | &.#{$css-prefix}small {
|
381 | @include next-button-size(
|
382 | 0px,
|
383 | $btn-text-size-s-height,
|
384 | $btn-text-size-s-font,
|
385 | 0,
|
386 | 0,
|
387 | $btn-text-icon-s-margin,
|
388 | $btn-size-s-icon-size,
|
389 | $btn-size-s-icon-split-size
|
390 | );
|
391 | }
|
392 | &#{$btn-prefix}-loading {
|
393 | @include button-color(
|
394 | $btn-text-loading-color,
|
395 | $btn-text-loading-color,
|
396 | $btn-text-loading-color,
|
397 | transparent,
|
398 | transparent,
|
399 | transparent,
|
400 | transparent,
|
401 | transparent,
|
402 | transparent
|
403 | );
|
404 | }
|
405 | }
|
406 |
|
407 |
|
408 |
|
409 | &-loading {
|
410 | pointer-events: none;
|
411 | &:before {
|
412 | font-family: $icon-font-family;
|
413 | content: $icon-content-loading;
|
414 | opacity: 1;
|
415 | visibility: visible;
|
416 | animation: loadingCircle 2s infinite linear;
|
417 | }
|
418 | &:after {
|
419 | content: '';
|
420 | display: inline-block;
|
421 | position: static;
|
422 | height: 100%;
|
423 | width: 0;
|
424 | vertical-align: middle;
|
425 | }
|
426 | }
|
427 |
|
428 |
|
429 | &-custom-loading {
|
430 | pointer-events: none;
|
431 | }
|
432 |
|
433 |
|
434 | &-ghost {
|
435 | box-shadow: none;
|
436 | border-style: $btn-ghost-border-style;
|
437 | &#{$btn-prefix}-dark {
|
438 | @include button-color( $btn-ghost-dark-color, $btn-ghost-dark-color-hover, $btn-ghost-dark-color-hover, $btn-ghost-dark-bg-normal, $btn-ghost-dark-bg-hover, $btn-ghost-dark-bg-hover, $btn-ghost-dark-border-color, $btn-ghost-dark-border-color-hover, $btn-ghost-dark-border-color-hover);
|
439 | &.disabled,
|
440 | &[disabled] {
|
441 | @include button-color( $btn-ghost-dark-color-disabled, $btn-ghost-dark-color-disabled, $btn-ghost-dark-color-disabled, $btn-ghost-dark-bg-disabled, $btn-ghost-dark-bg-disabled, $btn-ghost-dark-bg-disabled, $btn-ghost-dark-border-color-disabled, $btn-ghost-dark-border-color-disabled, $btn-ghost-dark-border-color-disabled);
|
442 | }
|
443 | }
|
444 | &#{$btn-prefix}-light {
|
445 | @include button-color( $btn-ghost-light-color, $btn-ghost-light-color-hover, $btn-ghost-light-color-hover, $btn-ghost-light-bg-normal, $btn-ghost-light-bg-hover, $btn-ghost-light-bg-hover, $btn-ghost-light-border-color, $btn-ghost-light-border-color-hover, $btn-ghost-light-border-color-hover);
|
446 | &.disabled,
|
447 | &[disabled] {
|
448 | @include button-color( $btn-ghost-light-color-disabled, $btn-ghost-light-color-disabled, $btn-ghost-light-color-disabled, $btn-ghost-light-bg-disabled, $btn-ghost-light-bg-disabled, $btn-ghost-light-bg-disabled, $btn-ghost-light-border-color-disabled, $btn-ghost-light-border-color-disabled, $btn-ghost-light-border-color-disabled);
|
449 | }
|
450 | }
|
451 | }
|
452 |
|
453 |
|
454 |
|
455 | &-group {
|
456 | position: relative;
|
457 | display: inline-block;
|
458 | vertical-align: middle;
|
459 |
|
460 | > #{$btn-prefix} {
|
461 | position: relative;
|
462 | float: left;
|
463 | box-shadow: none;
|
464 |
|
465 | &:hover,
|
466 | &:focus,
|
467 | &:active,
|
468 | &.active {
|
469 | z-index: 1;
|
470 | }
|
471 | &.disabled,
|
472 | &[disabled] {
|
473 | z-index: 0;
|
474 | }
|
475 | }
|
476 |
|
477 | #{$btn-prefix}#{$btn-prefix} {
|
478 | margin: 0 0 0 -1px;
|
479 | }
|
480 |
|
481 | #{$btn-prefix}:not(:first-child):not(:last-child) {
|
482 | border-radius: 0;
|
483 | }
|
484 |
|
485 | > #{$btn-prefix}:first-child {
|
486 | margin: 0;
|
487 | }
|
488 |
|
489 | > #{$btn-prefix}:first-child:not(:last-child) {
|
490 | border-bottom-right-radius: 0;
|
491 | border-top-right-radius: 0;
|
492 | }
|
493 |
|
494 | > #{$btn-prefix}:last-child:not(:first-child) {
|
495 | border-bottom-left-radius: 0;
|
496 | border-top-left-radius: 0;
|
497 | }
|
498 |
|
499 | > #{$btn-prefix}-primary:not(:first-child) {
|
500 | border-left-color: rgba($color-white, .2);
|
501 |
|
502 | &:hover {
|
503 | border-left-color: transparent;
|
504 | }
|
505 | &.disabled,
|
506 | &[disabled] {
|
507 | border-left-color: $color-line1-1;
|
508 | }
|
509 | }
|
510 | }
|
511 | }
|
512 |
|
513 | @import './rtl.scss';
|