1 | @import "../node_modules/tinper-bee-core/scss/minxin-variables";
|
2 | @import "../node_modules/tinper-bee-core/scss/minxin-mixins";
|
3 |
|
4 | $tabs-border-color: rgb(233,233,233);
|
5 | .u-tabs {
|
6 | box-sizing: border-box;
|
7 | position: relative;
|
8 | max-width: 1920px;
|
9 | .u-tabs-bar,
|
10 | .u-tabs-nav-container {
|
11 | font-size: 14px;
|
12 | line-height: 1.5;
|
13 | box-sizing: border-box;
|
14 | overflow: hidden;
|
15 | position: relative;
|
16 | white-space: nowrap;
|
17 | outline: none;
|
18 | zoom: 1;
|
19 | }
|
20 | .u-tabs-extra-content {
|
21 | line-height: 38px;
|
22 | }
|
23 |
|
24 | .u-tabs-ink-bar {
|
25 | z-index: 1;
|
26 | position: absolute;
|
27 | box-sizing: border-box;
|
28 | margin-top: -3px;
|
29 | background-color: $brand-primary;
|
30 | -webkit-transform-origin: 0 0;
|
31 | transform-origin: 0 0;
|
32 | }
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | .u-tabs-tab-prev,
|
42 | .u-tabs-tab-next {
|
43 | -webkit-user-select: none;
|
44 | -moz-user-select: none;
|
45 | -ms-user-select: none;
|
46 | user-select: none;
|
47 | z-index: 1;
|
48 | line-height: 36px;
|
49 | cursor: pointer;
|
50 | border: none;
|
51 | background-color: transparent;
|
52 | position: absolute;
|
53 | opacity: 0;
|
54 | }
|
55 |
|
56 | .u-tabs-tab-prev-icon,
|
57 | .u-tabs-tab-next-icon {
|
58 | position: relative;
|
59 | display: inline-block;
|
60 | font-style: normal;
|
61 | font-weight: normal;
|
62 | font-variant: normal;
|
63 | line-height: inherit;
|
64 | vertical-align: sub;
|
65 | text-align: center;
|
66 | text-transform: none;
|
67 | font-smoothing: antialiased;
|
68 | text-stroke-width: 0;
|
69 | font-family: sans-serif;
|
70 | }
|
71 |
|
72 | .u-tabs-tab-prev-icon:before,
|
73 | .u-tabs-tab-next-icon:before {
|
74 | display: block;
|
75 | }
|
76 |
|
77 | .u-tabs-tab-btn-disabled {
|
78 | cursor: default;
|
79 | color: #ccc;
|
80 | }
|
81 | &-top &-tab-arrow-show,
|
82 | &-left &-tab-arrow-show,
|
83 | &-bottom &-tab-arrow-show,
|
84 | &-right &-tab-arrow-show {
|
85 | opacity: 1;
|
86 | }
|
87 |
|
88 | .u-tabs-nav-wrap {
|
89 | overflow: hidden;
|
90 | }
|
91 |
|
92 | .u-tabs-nav {
|
93 | box-sizing: border-box;
|
94 | padding-left: 0;
|
95 | position: relative;
|
96 | margin: 0;
|
97 | float: left;
|
98 | list-style: none;
|
99 | display: inline-block;
|
100 | -webkit-transform-origin: 0 0;
|
101 | transform-origin: 0 0;
|
102 | }
|
103 |
|
104 | .u-tabs-nav-animated {
|
105 |
|
106 |
|
107 |
|
108 |
|
109 | }
|
110 |
|
111 | .u-tabs-nav:before,
|
112 | .u-tabs-nav:after {
|
113 | display: table;
|
114 | content: " ";
|
115 | }
|
116 |
|
117 | .u-tabs-nav:after {
|
118 | clear: both;
|
119 | }
|
120 |
|
121 | .u-tabs-tab {
|
122 | box-sizing: border-box;
|
123 | position: relative;
|
124 | display: block;
|
125 | -webkit-transition: color 0.3s cubic-bezier(0.35, 0, 0.25, 1);
|
126 | transition: color 0.3s cubic-bezier(0.35, 0, 0.25, 1);
|
127 | padding: 8px 20px;
|
128 | font-weight: 500;
|
129 | cursor: pointer;
|
130 | }
|
131 |
|
132 | .u-tabs-tab:hover {
|
133 | color: $brand-primary;
|
134 | }
|
135 |
|
136 | .u-tabs-tab-active,
|
137 | .u-tabs-tab-active:hover {
|
138 | color: $brand-primary;
|
139 | cursor: default;
|
140 | -webkit-transform: translateZ(0);
|
141 | transform: translateZ(0);
|
142 | z-index: 0;
|
143 | }
|
144 |
|
145 | .u-tabs-tab-disabled {
|
146 | cursor: default;
|
147 | color: #ccc;
|
148 | }
|
149 |
|
150 | .u-tabs-tab-disabled:hover {
|
151 | color: #ccc;
|
152 | }
|
153 |
|
154 | .u-tabs-content {
|
155 | zoom: 1;
|
156 | font-size: 14px;
|
157 | }
|
158 |
|
159 | .u-tabs-content .u-tabs-tabpane {
|
160 | overflow: auto;
|
161 | min-width: 1px;
|
162 | }
|
163 |
|
164 | .u-tabs-content-animated {
|
165 |
|
166 |
|
167 |
|
168 |
|
169 | display: -webkit-box;
|
170 | display: -ms-flexbox;
|
171 | display: flex;
|
172 | will-change: transform;
|
173 | }
|
174 |
|
175 | .u-tabs-content-animated .u-tabs-tabpane {
|
176 | -ms-flex-negative: 0;
|
177 | flex-shrink: 0;
|
178 | }
|
179 |
|
180 | .no-flexbox .u-tabs-content {
|
181 | -webkit-transform: none;
|
182 | transform: none ;
|
183 | overflow: auto;
|
184 | }
|
185 |
|
186 | .no-csstransitions .u-tabs-tabpane-inactive,
|
187 | .no-flexbox .u-tabs-tabpane-inactive,
|
188 | .u-tabs-content-no-animated .u-tabs-tabpane-inactive {
|
189 | display: none;
|
190 | }
|
191 | }
|
192 |
|
193 |
|
194 |
|
195 | .u-tabs-left {
|
196 |
|
197 | overflow-y: hidden;
|
198 | .u-tabs-bar {
|
199 | float: left;
|
200 | height: 100%;
|
201 | margin-right: 16px;
|
202 | border-right: 1px solid $tabs-border-color;
|
203 | }
|
204 | .u-tabs-top .u-tabs-bar {
|
205 | height: 54px;
|
206 | }
|
207 |
|
208 | .u-tabs-nav-container {
|
209 | height: calc(100% - 38px);
|
210 | }
|
211 |
|
212 | .u-tabs-nav-container-scrolling {
|
213 | padding-top: 32px;
|
214 | padding-bottom: 32px;
|
215 | }
|
216 |
|
217 | .u-tabs-nav-wrap {
|
218 | height: 100%;
|
219 | }
|
220 |
|
221 | .u-tabs-content-animated {
|
222 | -webkit-box-orient: vertical;
|
223 | -webkit-box-direction: normal;
|
224 | -ms-flex-direction: column;
|
225 | flex-direction: column;
|
226 | }
|
227 |
|
228 | .u-tabs-left .u-tabs-content-animated .u-tabs-tabpane {
|
229 | height: 100%;
|
230 | }
|
231 |
|
232 | .u-tabs-nav-scroll {
|
233 | height: 99999px;
|
234 | }
|
235 |
|
236 | .u-tabs-nav-swipe {
|
237 | position: relative;
|
238 | top: 0;
|
239 | }
|
240 |
|
241 | .u-tabs-nav-swipe .u-tabs-nav {
|
242 | display: -webkit-box;
|
243 | display: -ms-flexbox;
|
244 | display: flex;
|
245 | -webkit-box-flex: 1;
|
246 | -ms-flex: 1;
|
247 | flex: 1;
|
248 | -webkit-box-orient: vertical;
|
249 | -webkit-box-direction: normal;
|
250 | -ms-flex-direction: column;
|
251 | flex-direction: column;
|
252 | height: 100%;
|
253 | }
|
254 |
|
255 | .u-tabs-nav-swipe .u-tabs-nav .u-tabs-tab {
|
256 | -webkit-box-pack: center;
|
257 | -ms-flex-pack: center;
|
258 | justify-content: center;
|
259 | }
|
260 |
|
261 | .u-tabs-tab-prev,
|
262 | .u-tabs-tab-next {
|
263 | margin-top: -2px;
|
264 | height: 32px;
|
265 | line-height: 32px;
|
266 | width: 100%;
|
267 | display: block;
|
268 | text-align: center;
|
269 | }
|
270 |
|
271 | .u-tabs-tab-next {
|
272 | bottom: 0;
|
273 | }
|
274 |
|
275 | .u-tabs-tab-next-icon {
|
276 | -webkit-transform: rotate(90deg);
|
277 | transform: rotate(90deg);
|
278 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
279 | }
|
280 |
|
281 | .u-tabs-tab-next-icon:before {
|
282 | content: ">";
|
283 | }
|
284 |
|
285 | .u-tabs-tab-prev {
|
286 | top: 2px;
|
287 | }
|
288 |
|
289 | .u-tabs-tab-prev-icon {
|
290 | -webkit-transform: rotate(270deg);
|
291 | transform: rotate(270deg);
|
292 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
293 | }
|
294 |
|
295 | .u-tabs-tab-prev-icon:before {
|
296 | content: ">";
|
297 | }
|
298 |
|
299 | .u-tabs-ink-bar {
|
300 | width: 2px;
|
301 | right: 0;
|
302 | height: auto;
|
303 | }
|
304 |
|
305 | .u-tabs-tab {
|
306 | padding: 16px 24px;
|
307 | }
|
308 | }
|
309 |
|
310 |
|
311 |
|
312 | .u-tabs-right {
|
313 |
|
314 | overflow-y: hidden;
|
315 | .u-tabs-bar {
|
316 | float: right;
|
317 | height: 100%;
|
318 | margin-left: 16px;
|
319 | border-left: 1px solid $tabs-border-color;
|
320 | }
|
321 |
|
322 | .u-tabs-nav-container {
|
323 | height: calc(100% - 38px);
|
324 | }
|
325 |
|
326 | .u-tabs-nav-container-scrolling {
|
327 | padding-top: 32px;
|
328 | padding-bottom: 32px;
|
329 | }
|
330 |
|
331 | .u-tabs-nav-wrap {
|
332 | height: 100%;
|
333 | }
|
334 |
|
335 | .u-tabs-nav-scroll {
|
336 | height: 99999px;
|
337 | }
|
338 |
|
339 | .u-tabs-nav-swipe {
|
340 | position: relative;
|
341 | }
|
342 |
|
343 | .u-tabs-nav-swipe .u-tabs-nav {
|
344 | display: -webkit-box;
|
345 | display: -ms-flexbox;
|
346 | display: flex;
|
347 | -webkit-box-flex: 1;
|
348 | -ms-flex: 1;
|
349 | flex: 1;
|
350 | -webkit-box-orient: vertical;
|
351 | -webkit-box-direction: normal;
|
352 | -ms-flex-direction: column;
|
353 | flex-direction: column;
|
354 | height: 100%;
|
355 | }
|
356 |
|
357 | .u-tabs-nav-swipe .u-tabs-nav .u-tabs-tab {
|
358 | -webkit-box-pack: center;
|
359 | -ms-flex-pack: center;
|
360 | justify-content: center;
|
361 | }
|
362 |
|
363 | .u-tabs-tab-prev,
|
364 | .u-tabs-tab-next {
|
365 | margin-top: -2px;
|
366 | height: 32px;
|
367 | width: 100%;
|
368 | display: block;
|
369 | text-align: center;
|
370 | line-height: 32px;
|
371 | }
|
372 |
|
373 | .u-tabs-tab-next {
|
374 | bottom: 0;
|
375 | }
|
376 |
|
377 | .u-tabs-tab-next-icon {
|
378 | -webkit-transform: rotate(90deg);
|
379 | transform: rotate(90deg);
|
380 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
381 | }
|
382 |
|
383 | .u-tabs-tab-next-icon:before {
|
384 | content: ">";
|
385 | }
|
386 |
|
387 | .u-tabs-tab-prev {
|
388 | top: 2px;
|
389 | }
|
390 |
|
391 | .u-tabs-tab-prev-icon {
|
392 | -webkit-transform: rotate(270deg);
|
393 | transform: rotate(270deg);
|
394 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
395 | }
|
396 |
|
397 | .u-tabs-tab-prev-icon:before {
|
398 | content: ">";
|
399 | }
|
400 |
|
401 | .u-tabs-content-animated {
|
402 | -webkit-box-orient: vertical;
|
403 | -webkit-box-direction: normal;
|
404 | -ms-flex-direction: column;
|
405 | flex-direction: column;
|
406 | }
|
407 |
|
408 | .u-tabs-content-animated .u-tabs-tabpane {
|
409 | height: 100%;
|
410 | }
|
411 |
|
412 | .u-tabs-ink-bar {
|
413 | width: 2px;
|
414 | left: 0;
|
415 | }
|
416 |
|
417 | .u-tabs-tab {
|
418 | padding: 16px 24px;
|
419 | }
|
420 | }
|
421 |
|
422 |
|
423 |
|
424 | .u-tabs-bottom {
|
425 |
|
426 | overflow-x: hidden;
|
427 | .u-tabs-content {
|
428 | width: 100%;
|
429 | }
|
430 |
|
431 | .u-tabs-bar {
|
432 | border-top: 1px solid $tabs-border-color;
|
433 | margin-top: 16px;
|
434 | }
|
435 |
|
436 | .u-tabs-nav-container-scrolling {
|
437 | padding-left: 32px;
|
438 | padding-right: 32px;
|
439 | }
|
440 |
|
441 | .u-tabs-nav-scroll {
|
442 | width: 99999px;
|
443 | }
|
444 |
|
445 | .u-tabs-nav-swipe {
|
446 | position: relative;
|
447 | left: 0;
|
448 | }
|
449 |
|
450 | .u-tabs-nav-swipe .u-tabs-nav {
|
451 | display: -webkit-box;
|
452 | display: -ms-flexbox;
|
453 | display: flex;
|
454 | -webkit-box-flex: 1;
|
455 | -ms-flex: 1;
|
456 | flex: 1;
|
457 | width: 100%;
|
458 | }
|
459 |
|
460 | .u-tabs-nav-swipe .u-tabs-nav .u-tabs-tab {
|
461 | margin-right: 0;
|
462 | padding: 8px 0;
|
463 | -webkit-box-pack: center;
|
464 | -ms-flex-pack: center;
|
465 | justify-content: center;
|
466 | }
|
467 |
|
468 | .u-tabs-nav-wrap {
|
469 | width: 100%;
|
470 | }
|
471 |
|
472 | .u-tabs-content-animated {
|
473 | -webkit-box-orient: horizontal;
|
474 | -webkit-box-direction: normal;
|
475 | -ms-flex-direction: row;
|
476 | flex-direction: row;
|
477 | }
|
478 |
|
479 | .u-tabs-content-animated .u-tabs-tabpane {
|
480 | width: 100%;
|
481 | }
|
482 |
|
483 | .u-tabs-tab-next {
|
484 | right: 2px;
|
485 | }
|
486 |
|
487 | .u-tabs-tab-next-icon:before {
|
488 | content: ">";
|
489 | }
|
490 |
|
491 | .u-tabs-tab-prev {
|
492 | left: 0;
|
493 | }
|
494 |
|
495 | .u-tabs-tab-prev-icon:before {
|
496 | content: "<";
|
497 | }
|
498 |
|
499 | .u-tabs-tab-prev,
|
500 | .u-tabs-tab-next {
|
501 | margin-right: -2px;
|
502 | width: 32px;
|
503 | height: 100%;
|
504 | top: 0;
|
505 | text-align: center;
|
506 | }
|
507 |
|
508 | .u-tabs-ink-bar {
|
509 | height: 2px;
|
510 | top: 3px;
|
511 | left: 0;
|
512 | }
|
513 |
|
514 | .u-tabs-tab {
|
515 | float: left;
|
516 | height: 100%;
|
517 | margin-right: 30px;
|
518 | }
|
519 |
|
520 | .u-tabs-tabpane-inactive {
|
521 | height: 0;
|
522 | overflow: visible;
|
523 | }
|
524 | }
|
525 |
|
526 |
|
527 |
|
528 | .u-tabs-top {
|
529 |
|
530 | overflow-x: hidden;
|
531 | .u-tabs-content {
|
532 | width: 100%;
|
533 | font-size: 14px;
|
534 | }
|
535 |
|
536 | .u-tabs-bar {
|
537 | border-bottom: 1px solid $tabs-border-color;
|
538 | margin-bottom: 16px;
|
539 | }
|
540 |
|
541 | .u-tabs-nav-container-scrolling {
|
542 | padding-left: 32px;
|
543 | padding-right: 32px;
|
544 | }
|
545 |
|
546 | .u-tabs-nav-scroll {
|
547 | width: 99999px;
|
548 | }
|
549 |
|
550 | .u-tabs-nav-swipe {
|
551 | position: relative;
|
552 | left: 0;
|
553 | }
|
554 |
|
555 | .u-tabs-nav-swipe .u-tabs-nav {
|
556 | display: -webkit-box;
|
557 | display: -ms-flexbox;
|
558 | display: flex;
|
559 | -webkit-box-flex: 1;
|
560 | -ms-flex: 1;
|
561 | flex: 1;
|
562 | width: 100%;
|
563 | }
|
564 |
|
565 | .u-tabs-nav-swipe .u-tabs-nav .u-tabs-tab {
|
566 | margin-right: 0;
|
567 | padding: 8px 0;
|
568 | -webkit-box-pack: center;
|
569 | -ms-flex-pack: center;
|
570 | justify-content: center;
|
571 | }
|
572 |
|
573 | .u-tabs-nav-wrap {
|
574 | width: 100%;
|
575 | }
|
576 |
|
577 | .u-tabs-content-animated {
|
578 | -webkit-box-orient: horizontal;
|
579 | -webkit-box-direction: normal;
|
580 | -ms-flex-direction: row;
|
581 | flex-direction: row;
|
582 | }
|
583 |
|
584 | .u-tabs-content-animated .u-tabs-tabpane {
|
585 | width: 100%;
|
586 | }
|
587 |
|
588 | .u-tabs-tab-next {
|
589 | right: 2px;
|
590 | }
|
591 |
|
592 | .u-tabs-tab-next-icon:before {
|
593 | content: ">";
|
594 | }
|
595 |
|
596 | .u-tabs-tab-prev {
|
597 | left: 0;
|
598 | }
|
599 |
|
600 | .u-tabs-tab-prev-icon:before {
|
601 | content: "<";
|
602 | }
|
603 |
|
604 | .u-tabs-tab-prev,
|
605 | .u-tabs-tab-next {
|
606 | margin-right: -2px;
|
607 | width: 32px;
|
608 | height: 100%;
|
609 | top: 0;
|
610 | text-align: center;
|
611 | }
|
612 |
|
613 | .u-tabs-ink-bar {
|
614 | height: 2px;
|
615 | bottom: 0;
|
616 | left: 0;
|
617 | width: auto;
|
618 | }
|
619 |
|
620 | .u-tabs-tab {
|
621 | float: left;
|
622 | height: 100%;
|
623 | margin-right: 30px;
|
624 | }
|
625 |
|
626 | .u-tabs-tabpane-inactive {
|
627 | height: 0;
|
628 | overflow: visible;
|
629 | }
|
630 | }
|
631 |
|
632 |
|
633 |
|
634 |
|
635 |
|
636 |
|
637 |
|
638 |
|
639 |
|
640 |
|
641 |
|
642 |
|
643 |
|
644 |
|
645 |
|
646 |
|
647 |
|
648 |
|
649 |
|
650 |
|
651 |
|
652 |
|
653 |
|
654 |
|
655 |
|
656 |
|
657 |
|
658 |
|
659 |
|
660 |
|
661 |
|
662 |
|
663 |
|
664 |
|
665 |
|
666 |
|
667 |
|
668 |
|
669 |
|
670 |
|
671 |
|
672 |
|
673 |
|
674 |
|
675 |
|
676 |
|
677 |
|
678 |
|
679 |
|
680 |
|
681 |
|
682 |
|
683 |
|
684 |
|
685 |
|
686 |
|
687 |
|
688 |
|
689 |
|
690 |
|
691 |
|
692 | .u-tabs-primary {
|
693 | .u-tabs-ink-bar {
|
694 | background-color: transparent;
|
695 | height: 0;
|
696 | }
|
697 | .u-tabs-bar, .u-tabs-nav-container {
|
698 | background: #f5f5f5;
|
699 | }
|
700 |
|
701 | .u-tabs-nav {
|
702 | margin-left: map_get($tabs-fade-tab, marLeft);
|
703 | .u-tabs-tab {
|
704 | min-width: 90px;
|
705 | margin: 5px 0 5px 5px;
|
706 | background-color: #fff;
|
707 | border-radius: map_get($tabs-fade-tab, radius);
|
708 | transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
709 | color: map_get($tabs-fade-tab, color);
|
710 | padding: 5px 20px;
|
711 | text-align: center;
|
712 | &:hover {
|
713 | color: $brand-primary;
|
714 | }
|
715 | }
|
716 | .u-tabs-tab-active {
|
717 | background: $brand-primary;
|
718 | color: #fff;
|
719 | &:hover {
|
720 | color: #fff;
|
721 | }
|
722 | }
|
723 | }
|
724 | }
|
725 |
|
726 |
|
727 | .u-tabs-upborder {
|
728 | .u-tabs-ink-bar {
|
729 | height: 0;
|
730 | }
|
731 | .u-tabs-bar, .u-tabs-nav-container {
|
732 | background: #f5f5f5;
|
733 | }
|
734 | .u-tabs-bar {
|
735 | border: none;
|
736 | }
|
737 | .u-tabs-nav {
|
738 | .u-tabs-tab:first-child {
|
739 | margin-left: 5px;
|
740 | }
|
741 | .u-tabs-tab {
|
742 | min-width: 90px;
|
743 | text-align: center;
|
744 | margin-right: 0;
|
745 | padding: 14px 16px 9px 16px;
|
746 | line-height: 1;
|
747 | border-bottom: 1px solid #e9e9e9;
|
748 | &::before {
|
749 | content: '';
|
750 | position: absolute;
|
751 | top: $tabs-turn-after-top;
|
752 | left: $tabs-turn-after-left;
|
753 | z-index: -1;
|
754 | width: $tabs-turn-after-width;
|
755 | height: $tabs-turn-after-height;
|
756 | border-left: none;
|
757 | z-index: -1;
|
758 | }
|
759 | &::after {
|
760 | position: absolute;
|
761 | top: $tabs-turn-after-top;
|
762 | left: $tabs-turn-after-left;
|
763 | z-index: -1;
|
764 | width: $tabs-turn-after-width;
|
765 | height: $tabs-turn-after-height;
|
766 | background-color: $brand-primary;
|
767 | content: '';
|
768 |
|
769 |
|
770 |
|
771 |
|
772 |
|
773 |
|
774 |
|
775 |
|
776 |
|
777 | border-bottom: 35px #fff solid;
|
778 | border-left: none;
|
779 | }
|
780 | &-active {
|
781 | color: $brand-primary;
|
782 | border-left: 1px solid #e9e9e9;
|
783 | border-right: 1px solid #e9e9e9;
|
784 | border-bottom: 1px solid #fff;
|
785 | &::after {
|
786 |
|
787 |
|
788 | }
|
789 | }
|
790 | }
|
791 | }
|
792 | }
|
793 |
|
794 |
|
795 | .u-tabs-downborder {
|
796 | .u-tabs-ink-bar {
|
797 | background-color: transparent;
|
798 | }
|
799 | .u-tabs-nav {
|
800 | background: #fff;
|
801 | .u-tabs-tab {
|
802 | min-width: 90px;
|
803 | text-align: center;
|
804 | z-index: 1;
|
805 | margin-right: 5px;
|
806 | padding: 9px 16px;
|
807 | line-height: 1;
|
808 | color: #666;
|
809 | transition: color 0.3s;
|
810 | &:hover {
|
811 | color: $brand-primary;
|
812 | }
|
813 | &::after {
|
814 | position: absolute;
|
815 | top: 0;
|
816 | left: 0;
|
817 | z-index: -1;
|
818 | width: 100%;
|
819 | height: 100%;
|
820 | background: #d2d8d6;
|
821 | content: '';
|
822 |
|
823 |
|
824 |
|
825 |
|
826 |
|
827 |
|
828 | }
|
829 | &:hover::after, &:focus::after, &.u-tabs-tab-active::after {
|
830 | background: $brand-primary;
|
831 | }
|
832 | &.u-tabs-tab-active::after {
|
833 |
|
834 |
|
835 | border-top-left-radius: $tabs-simple-activeTopRadius;
|
836 | border-top-right-radius: $tabs-simple-activeTopRadius;
|
837 | }
|
838 | &-active {
|
839 | color: #fff;
|
840 | &:hover {
|
841 | color: #fff;
|
842 | }
|
843 | }
|
844 | }
|
845 | }
|
846 | .u-content-list {
|
847 | border: none;
|
848 | }
|
849 | }
|
850 |
|
851 |
|
852 | .u-tabs-trapezoid {
|
853 | .u-tabs-ink-bar {
|
854 | background-color: transparent;
|
855 | height: 0;
|
856 | }
|
857 | .u-tabs-bar, .u-tabs-nav-container {
|
858 | background: #f5f5f5;
|
859 | }
|
860 |
|
861 | .u-tabs-nav {
|
862 | .u-tabs-tab:first-child {
|
863 | margin-left: 5px;
|
864 | }
|
865 | .u-tabs-tab {
|
866 | min-width: 90px;
|
867 | padding: 9px 20px;
|
868 |
|
869 | z-index: 1;
|
870 | color: #fff;
|
871 | margin-right: 0;
|
872 | line-height: 1;
|
873 | margin-top: 5px;
|
874 | &::before {
|
875 | content: '';
|
876 | position: absolute;
|
877 | top: 0;
|
878 | left: 0;
|
879 | z-index: -1;
|
880 | width: 100%;
|
881 | height: 100%;
|
882 | border-bottom: 32px $brand-primary solid;
|
883 | border-right: transparent $tabs-turn-beforeRight solid;
|
884 | border-left: none;
|
885 | z-index: -1;
|
886 | }
|
887 | &::after {
|
888 | position: absolute;
|
889 | top: $tabs-turn-after-top;
|
890 | left: $tabs-turn-after-left;
|
891 | z-index: -1;
|
892 | width: $tabs-turn-after-width;
|
893 | height: $tabs-turn-after-height;
|
894 | background-color: #f5f5f5;
|
895 | content: '';
|
896 |
|
897 |
|
898 |
|
899 |
|
900 |
|
901 |
|
902 |
|
903 |
|
904 | border-bottom: 32px #fff solid;
|
905 | border-right: #f5f5f5 15px solid;
|
906 | border-left: none;
|
907 | }
|
908 | &-active {
|
909 | color: $brand-primary;
|
910 | margin-top: 5px;
|
911 | &::after {
|
912 |
|
913 |
|
914 | }
|
915 | }
|
916 | }
|
917 | }
|
918 | }
|
919 |
|
920 |
|
921 | .u-tabs-fill {
|
922 | .u-tabs-ink-bar {
|
923 | background-color: transparent;
|
924 | }
|
925 | .u-tabs-nav {
|
926 | background: map_get($tabs-fill-tab, back);
|
927 | .u-tabs-tab {
|
928 | margin-right: $tabs-fill-tab-maright;
|
929 | color: map_get($tabs-fill-tab, color);
|
930 | transition: color 0.3s;
|
931 | &:hover {
|
932 | color: $brand-primary;
|
933 | }
|
934 | &::after {
|
935 | position: absolute;
|
936 | top: $tabs-fill-after-top;
|
937 | left: $tabs-fill-after-left;
|
938 | z-index: -1;
|
939 | width: $tabs-fill-after-width;
|
940 | height: $tabs-fill-after-height;
|
941 | background: map_get($tabs-fill-tab, afterBack);
|
942 | content: '';
|
943 |
|
944 |
|
945 |
|
946 |
|
947 |
|
948 |
|
949 | }
|
950 | &:hover::after, &:focus::after, &.u-tabs-tab-active::after {
|
951 | background: $brand-primary;
|
952 | }
|
953 | &.u-tabs-tab-active::after {
|
954 |
|
955 |
|
956 | border-top-left-radius: $tabs-simple-activeTopRadius;
|
957 | border-top-right-radius: $tabs-simple-activeTopRadius;
|
958 | }
|
959 | &-active {
|
960 | color: #fff;
|
961 | &:hover {
|
962 | color: #fff;
|
963 | }
|
964 | }
|
965 | }
|
966 | }
|
967 | .u-content-list {
|
968 | border: none;
|
969 | }
|
970 | }
|
971 |
|
972 |
|
973 | .u-tabs-editable-card {
|
974 | .u-tabs-bar {
|
975 | line-height: 38px;
|
976 | }
|
977 | .u-tabs-nav {
|
978 | .u-tabs-ink-bar {
|
979 | height: 0;
|
980 | }
|
981 | background: map_get($tabs-fill-tab, back);
|
982 | .u-tabs-tab {
|
983 | margin-right: $tabs-fill-tab-maright;
|
984 | color: map_get($tabs-fill-tab, color);
|
985 | transition: color 0.3s;
|
986 | background: #f5f5f5;
|
987 | border: 1px solid #e9e9e9;
|
988 | border-bottom-color: #f5f5f5;
|
989 | border-top-left-radius: $tabs-simple-activeTopRadius;
|
990 | border-top-right-radius: $tabs-simple-activeTopRadius;
|
991 | .u-tabs-close-x{
|
992 | font-size: 12px;
|
993 | }
|
994 | &:hover {
|
995 | color: $brand-primary;
|
996 | }
|
997 | &::after {
|
998 | position: absolute;
|
999 | top: $tabs-fill-after-top;
|
1000 | left: $tabs-fill-after-left;
|
1001 | z-index: -1;
|
1002 | width: $tabs-fill-after-width;
|
1003 | height: $tabs-fill-after-height;
|
1004 | background: map_get($tabs-fill-tab, afterBack);
|
1005 | content: '';
|
1006 | }
|
1007 | &:hover::after, &:focus::after, &.u-tabs-tab-active::after {
|
1008 | background: #fff;
|
1009 | }
|
1010 | &-active {
|
1011 | color: $brand-primary;
|
1012 | border-color: #e9e9e9;
|
1013 | border-bottom: 1px solid #fff;
|
1014 | }
|
1015 | }
|
1016 | }
|
1017 | .u-content-list {
|
1018 | border: none;
|
1019 | }
|
1020 | }
|
1021 |
|
1022 |
|
1023 | .u-tabs-turn {
|
1024 | .u-tabs-ink-bar {
|
1025 | background-color: transparent;
|
1026 | height: 0;
|
1027 | }
|
1028 | .u-tabs-bar, .u-tabs-nav-container {
|
1029 | background: #f5f5f5;
|
1030 | }
|
1031 |
|
1032 | .u-tabs-nav {
|
1033 | .u-tabs-tab:first-child {
|
1034 | margin-left: 5px;
|
1035 | }
|
1036 | .u-tabs-tab {
|
1037 | margin-bottom: $tabs-marginBottom;
|
1038 | z-index: 1;
|
1039 | color: #fff;
|
1040 | margin-right: 0;
|
1041 | line-height: 1;
|
1042 | margin-top: 5px;
|
1043 | &::before {
|
1044 | content: '';
|
1045 | position: absolute;
|
1046 | top: $tabs-turn-after-top;
|
1047 | left: $tabs-turn-after-left;
|
1048 | z-index: -1;
|
1049 | width: $tabs-turn-after-width;
|
1050 | height: $tabs-turn-after-height;
|
1051 | border-bottom: $tabs-turn-beforeBot $brand-primary solid;
|
1052 | border-right: transparent $tabs-turn-beforeRight solid;
|
1053 | border-left: none;
|
1054 | z-index: -1;
|
1055 | }
|
1056 | &::after {
|
1057 | position: absolute;
|
1058 | top: $tabs-turn-after-top;
|
1059 | left: $tabs-turn-after-left;
|
1060 | z-index: -1;
|
1061 | width: $tabs-turn-after-width;
|
1062 | height: $tabs-turn-after-height;
|
1063 | background-color: #f5f5f5;
|
1064 | content: '';
|
1065 |
|
1066 |
|
1067 |
|
1068 |
|
1069 |
|
1070 |
|
1071 |
|
1072 |
|
1073 | border-bottom: 32px #fff solid;
|
1074 | border-right: #f5f5f5 15px solid;
|
1075 | border-left: none;
|
1076 | }
|
1077 | &-active {
|
1078 | color: $brand-primary;
|
1079 | margin-top: 5px;
|
1080 | &::after {
|
1081 |
|
1082 |
|
1083 | }
|
1084 | }
|
1085 | }
|
1086 | }
|
1087 | }
|
1088 |
|
1089 | .u-tabs-moveleft {
|
1090 | .u-content-list {
|
1091 | border: $tabs-fill-tab-maright solid $tabs-basic-back;
|
1092 | border-top: none;
|
1093 | height: $tabs-moveleft-conHeight;
|
1094 | padding: $tabs-moveleft-conPad;
|
1095 | background: #fff;
|
1096 | position: relative;
|
1097 | .u-content {
|
1098 | display: inline-block;
|
1099 | transform: translateX(-100%);
|
1100 | opacity: 0;
|
1101 | position: absolute;
|
1102 | transition: all .3s ease-in-out;
|
1103 | }
|
1104 | .u-content-active {
|
1105 | transform: translateX(0);
|
1106 | transition-delay: .3s;
|
1107 | opacity: 1;
|
1108 | }
|
1109 | }
|
1110 | }
|
1111 |
|
1112 |
|
1113 | .u-tabs-fade {
|
1114 | .u-tabs-ink-bar {
|
1115 | background-color: transparent;
|
1116 | height: 0;
|
1117 | }
|
1118 | .u-tabs-bar, .u-tabs-nav-container {
|
1119 | background: #f5f5f5;
|
1120 | }
|
1121 |
|
1122 | .u-tabs-nav {
|
1123 | margin-left: map_get($tabs-fade-tab, marLeft);
|
1124 | .u-tabs-tab {
|
1125 | margin-right: 0;
|
1126 | margin-top: map_get($tabs-fade-tab, marTop);
|
1127 | border-radius: map_get($tabs-fade-tab, radius);
|
1128 | transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
1129 | color: map_get($tabs-fade-tab, color);
|
1130 | padding: 5px 20px;
|
1131 | text-align: center;
|
1132 | float: left;
|
1133 | display: inline-block;
|
1134 | box-sizing: border-box;
|
1135 | position: relative;
|
1136 | cursor: pointer;
|
1137 | text-decoration: none;
|
1138 | &:hover {
|
1139 | color: $brand-primary;
|
1140 | }
|
1141 | }
|
1142 | .u-tabs-tab-active {
|
1143 | background: #fff;
|
1144 | color: map_get($tabs-fade-tab, color);
|
1145 | &:hover {
|
1146 | color: $brand-primary;
|
1147 | }
|
1148 | }
|
1149 | }
|
1150 | }
|
1151 |
|
1152 |
|
1153 | .u-tabs-fadeup {
|
1154 | .u-tabs-ink-bar {
|
1155 | background-color: transparent;
|
1156 | height: 0;
|
1157 | }
|
1158 | .u-tabs-bar, .u-tabs-nav-container {
|
1159 | background: #f5f5f5;
|
1160 | }
|
1161 |
|
1162 | .u-tabs-nav {
|
1163 | margin-bottom: $tabs-marginBottom;
|
1164 | .u-tabs-tab {
|
1165 | margin-top: 5px;
|
1166 | border-radius: 0 0 0 0;
|
1167 | transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
1168 | color: #666;
|
1169 | padding: 0 16px;
|
1170 | text-align: center;
|
1171 | float: left;
|
1172 | display: inline-block;
|
1173 | box-sizing: border-box;
|
1174 | position: relative;
|
1175 | cursor: pointer;
|
1176 | text-decoration: none;
|
1177 | &:hover {
|
1178 | color: $brand-primary;
|
1179 | }
|
1180 | &::after {
|
1181 | position: absolute;
|
1182 | top: $tabs-fadeup-top;
|
1183 | left: $tabs-fadeup-left;
|
1184 | z-index: -1;
|
1185 | width: $tabs-fadeup-width;
|
1186 | height: $tabs-fadeup-height;
|
1187 | content: '';
|
1188 |
|
1189 |
|
1190 |
|
1191 |
|
1192 |
|
1193 |
|
1194 | }
|
1195 | &:hover::after, &:focus::after, &.u-tabs-tab-active::after {
|
1196 | background: $brand-primary;
|
1197 | }
|
1198 | &.u-tabs-tab-active::after {
|
1199 |
|
1200 |
|
1201 | }
|
1202 | &-active {
|
1203 | color: #fff;
|
1204 |
|
1205 | }
|
1206 | }
|
1207 | .u-tabs-tab-active {
|
1208 | background: #fff;
|
1209 | color: $tabs-fadeup-color;
|
1210 | &:hover {
|
1211 | color: $tabs-fadeup-color;
|
1212 | }
|
1213 | }
|
1214 | }
|
1215 | }
|
1216 |
|
1217 |
|
1218 | .u-tabs-slide {
|
1219 | .u-tabs-nav {
|
1220 | background: map_get($tabs-slide-tabs, back);
|
1221 | .u-tabs-tab {
|
1222 | padding: map_get($tabs-slide-tabs, padding);
|
1223 | &-child {
|
1224 | position: absolute;
|
1225 | bottom: $tabs-slide-child-bottom;
|
1226 | left: $tabs-slide-child-left;
|
1227 | height: $tabs-slide-child-height;
|
1228 | background: $brand-primary;
|
1229 | content: '';
|
1230 |
|
1231 |
|
1232 | }
|
1233 | }
|
1234 | }
|
1235 | }
|
1236 |
|
1237 |
|
1238 | .u-search-tabs{
|
1239 | &-item{
|
1240 | cursor: pointer;
|
1241 | &.active{
|
1242 | color: $brand-primary;
|
1243 | }
|
1244 | }
|
1245 | &-split{
|
1246 | margin: 0 15px;
|
1247 | color: #555;
|
1248 | font-size: 12px;
|
1249 | }
|
1250 | } |
\ | No newline at end of file |