UNPKG

22.6 kBCSSView Raw
1@charset "UTF-8";
2/* FormGroup */
3/* Navlayout */
4.u-tabs {
5 box-sizing: border-box;
6 position: relative;
7 max-width: 1920px; }
8 .u-tabs .u-tabs-bar,
9 .u-tabs .u-tabs-nav-container {
10 font-size: 14px;
11 line-height: 1.5;
12 box-sizing: border-box;
13 overflow: hidden;
14 position: relative;
15 white-space: nowrap;
16 outline: none;
17 zoom: 1; }
18 .u-tabs .u-tabs-extra-content {
19 line-height: 38px; }
20 .u-tabs .u-tabs-ink-bar {
21 z-index: 1;
22 position: absolute;
23 box-sizing: border-box;
24 margin-top: -3px;
25 background-color: rgb(245, 60, 50);
26 -webkit-transform-origin: 0 0;
27 transform-origin: 0 0; }
28 .u-tabs .u-tabs-tab-prev,
29 .u-tabs .u-tabs-tab-next {
30 -webkit-user-select: none;
31 -moz-user-select: none;
32 -ms-user-select: none;
33 user-select: none;
34 z-index: 1;
35 line-height: 36px;
36 cursor: pointer;
37 border: none;
38 background-color: transparent;
39 position: absolute;
40 opacity: 0; }
41 .u-tabs .u-tabs-tab-prev-icon,
42 .u-tabs .u-tabs-tab-next-icon {
43 position: relative;
44 display: inline-block;
45 font-style: normal;
46 font-weight: normal;
47 font-variant: normal;
48 line-height: inherit;
49 vertical-align: sub;
50 text-align: center;
51 text-transform: none;
52 font-smoothing: antialiased;
53 text-stroke-width: 0;
54 font-family: sans-serif; }
55 .u-tabs .u-tabs-tab-prev-icon:before,
56 .u-tabs .u-tabs-tab-next-icon:before {
57 display: block; }
58 .u-tabs .u-tabs-tab-btn-disabled {
59 cursor: default;
60 color: #ccc; }
61 .u-tabs-top .u-tabs-tab-arrow-show,
62 .u-tabs-left .u-tabs-tab-arrow-show,
63 .u-tabs-bottom .u-tabs-tab-arrow-show,
64 .u-tabs-right .u-tabs-tab-arrow-show {
65 opacity: 1; }
66 .u-tabs .u-tabs-nav-wrap {
67 overflow: hidden; }
68 .u-tabs .u-tabs-nav {
69 box-sizing: border-box;
70 padding-left: 0;
71 position: relative;
72 margin: 0;
73 float: left;
74 list-style: none;
75 display: inline-block;
76 -webkit-transform-origin: 0 0;
77 transform-origin: 0 0; }
78 .u-tabs .u-tabs-nav:before,
79 .u-tabs .u-tabs-nav:after {
80 display: table;
81 content: " "; }
82 .u-tabs .u-tabs-nav:after {
83 clear: both; }
84 .u-tabs .u-tabs-tab {
85 box-sizing: border-box;
86 position: relative;
87 display: block;
88 -webkit-transition: color 0.3s cubic-bezier(0.35, 0, 0.25, 1);
89 transition: color 0.3s cubic-bezier(0.35, 0, 0.25, 1);
90 padding: 8px 20px;
91 font-weight: 500;
92 cursor: pointer; }
93 .u-tabs .u-tabs-tab:hover {
94 color: rgb(245, 60, 50); }
95 .u-tabs .u-tabs-tab-active,
96 .u-tabs .u-tabs-tab-active:hover {
97 color: rgb(245, 60, 50);
98 cursor: default;
99 -webkit-transform: translateZ(0);
100 transform: translateZ(0);
101 z-index: 0; }
102 .u-tabs .u-tabs-tab-disabled {
103 cursor: default;
104 color: #ccc; }
105 .u-tabs .u-tabs-tab-disabled:hover {
106 color: #ccc; }
107 .u-tabs .u-tabs-content {
108 zoom: 1;
109 font-size: 14px; }
110 .u-tabs .u-tabs-content .u-tabs-tabpane {
111 overflow: auto;
112 min-width: 1px; }
113 .u-tabs .u-tabs-content-animated {
114 display: -webkit-box;
115 display: -ms-flexbox;
116 display: flex;
117 will-change: transform; }
118 .u-tabs .u-tabs-content-animated .u-tabs-tabpane {
119 -ms-flex-negative: 0;
120 flex-shrink: 0; }
121 .u-tabs .no-flexbox .u-tabs-content {
122 -webkit-transform: none;
123 transform: none;
124 overflow: auto; }
125 .u-tabs .no-csstransitions .u-tabs-tabpane-inactive,
126 .u-tabs .no-flexbox .u-tabs-tabpane-inactive,
127 .u-tabs .u-tabs-content-no-animated .u-tabs-tabpane-inactive {
128 display: none; }
129
130.u-tabs-left {
131 overflow-y: hidden; }
132 .u-tabs-left .u-tabs-bar {
133 float: left;
134 height: 100%;
135 margin-right: 16px;
136 border-right: 1px solid #e9e9e9; }
137 .u-tabs-left .u-tabs-top .u-tabs-bar {
138 height: 54px; }
139 .u-tabs-left .u-tabs-nav-container {
140 height: calc(100% - 38px); }
141 .u-tabs-left .u-tabs-nav-container-scrolling {
142 padding-top: 32px;
143 padding-bottom: 32px; }
144 .u-tabs-left .u-tabs-nav-wrap {
145 height: 100%; }
146 .u-tabs-left .u-tabs-content-animated {
147 -webkit-box-orient: vertical;
148 -webkit-box-direction: normal;
149 -ms-flex-direction: column;
150 flex-direction: column; }
151 .u-tabs-left .u-tabs-left .u-tabs-content-animated .u-tabs-tabpane {
152 height: 100%; }
153 .u-tabs-left .u-tabs-nav-scroll {
154 height: 99999px; }
155 .u-tabs-left .u-tabs-nav-swipe {
156 position: relative;
157 top: 0; }
158 .u-tabs-left .u-tabs-nav-swipe .u-tabs-nav {
159 display: -webkit-box;
160 display: -ms-flexbox;
161 display: flex;
162 -webkit-box-flex: 1;
163 -ms-flex: 1;
164 flex: 1;
165 -webkit-box-orient: vertical;
166 -webkit-box-direction: normal;
167 -ms-flex-direction: column;
168 flex-direction: column;
169 height: 100%; }
170 .u-tabs-left .u-tabs-nav-swipe .u-tabs-nav .u-tabs-tab {
171 -webkit-box-pack: center;
172 -ms-flex-pack: center;
173 justify-content: center; }
174 .u-tabs-left .u-tabs-tab-prev,
175 .u-tabs-left .u-tabs-tab-next {
176 margin-top: -2px;
177 height: 32px;
178 line-height: 32px;
179 width: 100%;
180 display: block;
181 text-align: center; }
182 .u-tabs-left .u-tabs-tab-next {
183 bottom: 0; }
184 .u-tabs-left .u-tabs-tab-next-icon {
185 -webkit-transform: rotate(90deg);
186 transform: rotate(90deg);
187 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
188 .u-tabs-left .u-tabs-tab-next-icon:before {
189 content: ">"; }
190 .u-tabs-left .u-tabs-tab-prev {
191 top: 2px; }
192 .u-tabs-left .u-tabs-tab-prev-icon {
193 -webkit-transform: rotate(270deg);
194 transform: rotate(270deg);
195 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
196 .u-tabs-left .u-tabs-tab-prev-icon:before {
197 content: ">"; }
198 .u-tabs-left .u-tabs-ink-bar {
199 width: 2px;
200 right: 0;
201 height: auto; }
202 .u-tabs-left .u-tabs-tab {
203 padding: 16px 24px; }
204
205.u-tabs-right {
206 overflow-y: hidden; }
207 .u-tabs-right .u-tabs-bar {
208 float: right;
209 height: 100%;
210 margin-left: 16px;
211 border-left: 1px solid #e9e9e9; }
212 .u-tabs-right .u-tabs-nav-container {
213 height: calc(100% - 38px); }
214 .u-tabs-right .u-tabs-nav-container-scrolling {
215 padding-top: 32px;
216 padding-bottom: 32px; }
217 .u-tabs-right .u-tabs-nav-wrap {
218 height: 100%; }
219 .u-tabs-right .u-tabs-nav-scroll {
220 height: 99999px; }
221 .u-tabs-right .u-tabs-nav-swipe {
222 position: relative; }
223 .u-tabs-right .u-tabs-nav-swipe .u-tabs-nav {
224 display: -webkit-box;
225 display: -ms-flexbox;
226 display: flex;
227 -webkit-box-flex: 1;
228 -ms-flex: 1;
229 flex: 1;
230 -webkit-box-orient: vertical;
231 -webkit-box-direction: normal;
232 -ms-flex-direction: column;
233 flex-direction: column;
234 height: 100%; }
235 .u-tabs-right .u-tabs-nav-swipe .u-tabs-nav .u-tabs-tab {
236 -webkit-box-pack: center;
237 -ms-flex-pack: center;
238 justify-content: center; }
239 .u-tabs-right .u-tabs-tab-prev,
240 .u-tabs-right .u-tabs-tab-next {
241 margin-top: -2px;
242 height: 32px;
243 width: 100%;
244 display: block;
245 text-align: center;
246 line-height: 32px; }
247 .u-tabs-right .u-tabs-tab-next {
248 bottom: 0; }
249 .u-tabs-right .u-tabs-tab-next-icon {
250 -webkit-transform: rotate(90deg);
251 transform: rotate(90deg);
252 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
253 .u-tabs-right .u-tabs-tab-next-icon:before {
254 content: ">"; }
255 .u-tabs-right .u-tabs-tab-prev {
256 top: 2px; }
257 .u-tabs-right .u-tabs-tab-prev-icon {
258 -webkit-transform: rotate(270deg);
259 transform: rotate(270deg);
260 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
261 .u-tabs-right .u-tabs-tab-prev-icon:before {
262 content: ">"; }
263 .u-tabs-right .u-tabs-content-animated {
264 -webkit-box-orient: vertical;
265 -webkit-box-direction: normal;
266 -ms-flex-direction: column;
267 flex-direction: column; }
268 .u-tabs-right .u-tabs-content-animated .u-tabs-tabpane {
269 height: 100%; }
270 .u-tabs-right .u-tabs-ink-bar {
271 width: 2px;
272 left: 0; }
273 .u-tabs-right .u-tabs-tab {
274 padding: 16px 24px; }
275
276.u-tabs-bottom {
277 overflow-x: hidden; }
278 .u-tabs-bottom .u-tabs-content {
279 width: 100%; }
280 .u-tabs-bottom .u-tabs-bar {
281 border-top: 1px solid #e9e9e9;
282 margin-top: 16px; }
283 .u-tabs-bottom .u-tabs-nav-container-scrolling {
284 padding-left: 32px;
285 padding-right: 32px; }
286 .u-tabs-bottom .u-tabs-nav-scroll {
287 width: 99999px; }
288 .u-tabs-bottom .u-tabs-nav-swipe {
289 position: relative;
290 left: 0; }
291 .u-tabs-bottom .u-tabs-nav-swipe .u-tabs-nav {
292 display: -webkit-box;
293 display: -ms-flexbox;
294 display: flex;
295 -webkit-box-flex: 1;
296 -ms-flex: 1;
297 flex: 1;
298 width: 100%; }
299 .u-tabs-bottom .u-tabs-nav-swipe .u-tabs-nav .u-tabs-tab {
300 margin-right: 0;
301 padding: 8px 0;
302 -webkit-box-pack: center;
303 -ms-flex-pack: center;
304 justify-content: center; }
305 .u-tabs-bottom .u-tabs-nav-wrap {
306 width: 100%; }
307 .u-tabs-bottom .u-tabs-content-animated {
308 -webkit-box-orient: horizontal;
309 -webkit-box-direction: normal;
310 -ms-flex-direction: row;
311 flex-direction: row; }
312 .u-tabs-bottom .u-tabs-content-animated .u-tabs-tabpane {
313 width: 100%; }
314 .u-tabs-bottom .u-tabs-tab-next {
315 right: 2px; }
316 .u-tabs-bottom .u-tabs-tab-next-icon:before {
317 content: ">"; }
318 .u-tabs-bottom .u-tabs-tab-prev {
319 left: 0; }
320 .u-tabs-bottom .u-tabs-tab-prev-icon:before {
321 content: "<"; }
322 .u-tabs-bottom .u-tabs-tab-prev,
323 .u-tabs-bottom .u-tabs-tab-next {
324 margin-right: -2px;
325 width: 32px;
326 height: 100%;
327 top: 0;
328 text-align: center; }
329 .u-tabs-bottom .u-tabs-ink-bar {
330 height: 2px;
331 top: 3px;
332 left: 0; }
333 .u-tabs-bottom .u-tabs-tab {
334 float: left;
335 height: 100%;
336 margin-right: 30px; }
337 .u-tabs-bottom .u-tabs-tabpane-inactive {
338 height: 0;
339 overflow: visible; }
340
341.u-tabs-top {
342 overflow-x: hidden; }
343 .u-tabs-top .u-tabs-content {
344 width: 100%;
345 font-size: 14px; }
346 .u-tabs-top .u-tabs-bar {
347 border-bottom: 1px solid #e9e9e9;
348 margin-bottom: 16px; }
349 .u-tabs-top .u-tabs-nav-container-scrolling {
350 padding-left: 32px;
351 padding-right: 32px; }
352 .u-tabs-top .u-tabs-nav-scroll {
353 width: 99999px; }
354 .u-tabs-top .u-tabs-nav-swipe {
355 position: relative;
356 left: 0; }
357 .u-tabs-top .u-tabs-nav-swipe .u-tabs-nav {
358 display: -webkit-box;
359 display: -ms-flexbox;
360 display: flex;
361 -webkit-box-flex: 1;
362 -ms-flex: 1;
363 flex: 1;
364 width: 100%; }
365 .u-tabs-top .u-tabs-nav-swipe .u-tabs-nav .u-tabs-tab {
366 margin-right: 0;
367 padding: 8px 0;
368 -webkit-box-pack: center;
369 -ms-flex-pack: center;
370 justify-content: center; }
371 .u-tabs-top .u-tabs-nav-wrap {
372 width: 100%; }
373 .u-tabs-top .u-tabs-content-animated {
374 -webkit-box-orient: horizontal;
375 -webkit-box-direction: normal;
376 -ms-flex-direction: row;
377 flex-direction: row; }
378 .u-tabs-top .u-tabs-content-animated .u-tabs-tabpane {
379 width: 100%; }
380 .u-tabs-top .u-tabs-tab-next {
381 right: 2px; }
382 .u-tabs-top .u-tabs-tab-next-icon:before {
383 content: ">"; }
384 .u-tabs-top .u-tabs-tab-prev {
385 left: 0; }
386 .u-tabs-top .u-tabs-tab-prev-icon:before {
387 content: "<"; }
388 .u-tabs-top .u-tabs-tab-prev,
389 .u-tabs-top .u-tabs-tab-next {
390 margin-right: -2px;
391 width: 32px;
392 height: 100%;
393 top: 0;
394 text-align: center; }
395 .u-tabs-top .u-tabs-ink-bar {
396 height: 2px;
397 bottom: 0;
398 left: 0;
399 width: auto; }
400 .u-tabs-top .u-tabs-tab {
401 float: left;
402 height: 100%;
403 margin-right: 30px; }
404 .u-tabs-top .u-tabs-tabpane-inactive {
405 height: 0;
406 overflow: visible; }
407
408/*基础tab1*/
409/*基础table01*/
410.u-tabs-primary .u-tabs-ink-bar {
411 background-color: transparent;
412 height: 0; }
413
414.u-tabs-primary .u-tabs-bar, .u-tabs-primary .u-tabs-nav-container {
415 background: #f5f5f5; }
416
417.u-tabs-primary .u-tabs-nav {
418 margin-left: 5px; }
419 .u-tabs-primary .u-tabs-nav .u-tabs-tab {
420 min-width: 90px;
421 margin: 5px 0 5px 5px;
422 background-color: #fff;
423 border-radius: 0 0 0 0;
424 transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
425 color: #666;
426 padding: 5px 20px;
427 text-align: center; }
428 .u-tabs-primary .u-tabs-nav .u-tabs-tab:hover {
429 color: rgb(245, 60, 50); }
430 .u-tabs-primary .u-tabs-nav .u-tabs-tab-active {
431 background: rgb(245, 60, 50);
432 color: #fff; }
433 .u-tabs-primary .u-tabs-nav .u-tabs-tab-active:hover {
434 color: #fff; }
435
436/*基础table02*/
437.u-tabs-upborder .u-tabs-ink-bar {
438 height: 0; }
439
440.u-tabs-upborder .u-tabs-bar, .u-tabs-upborder .u-tabs-nav-container {
441 background: #f5f5f5; }
442
443.u-tabs-upborder .u-tabs-bar {
444 border: none; }
445
446.u-tabs-upborder .u-tabs-nav .u-tabs-tab:first-child {
447 margin-left: 5px; }
448
449.u-tabs-upborder .u-tabs-nav .u-tabs-tab {
450 min-width: 90px;
451 text-align: center;
452 margin-right: 0;
453 padding: 14px 16px 9px 16px;
454 line-height: 1;
455 border-bottom: 1px solid #e9e9e9; }
456 .u-tabs-upborder .u-tabs-nav .u-tabs-tab::before {
457 content: '';
458 position: absolute;
459 top: 0;
460 left: 0;
461 z-index: -1;
462 width: 100%;
463 height: 100%;
464 border-left: none;
465 z-index: -1; }
466 .u-tabs-upborder .u-tabs-nav .u-tabs-tab::after {
467 position: absolute;
468 top: 0;
469 left: 0;
470 z-index: -1;
471 width: 100%;
472 height: 100%;
473 background-color: rgb(245, 60, 50);
474 content: '';
475 border-bottom: 35px #fff solid;
476 border-left: none; }
477 .u-tabs-upborder .u-tabs-nav .u-tabs-tab-active {
478 color: rgb(245, 60, 50);
479 border-left: 1px solid #e9e9e9;
480 border-right: 1px solid #e9e9e9;
481 border-bottom: 1px solid #fff; }
482
483/*基础tab03*/
484.u-tabs-downborder .u-tabs-ink-bar {
485 background-color: transparent; }
486
487.u-tabs-downborder .u-tabs-nav {
488 background: #fff; }
489 .u-tabs-downborder .u-tabs-nav .u-tabs-tab {
490 min-width: 90px;
491 text-align: center;
492 z-index: 1;
493 margin-right: 5px;
494 padding: 9px 16px;
495 line-height: 1;
496 color: #666;
497 transition: color 0.3s; }
498 .u-tabs-downborder .u-tabs-nav .u-tabs-tab:hover {
499 color: rgb(245, 60, 50); }
500 .u-tabs-downborder .u-tabs-nav .u-tabs-tab::after {
501 position: absolute;
502 top: 0;
503 left: 0;
504 z-index: -1;
505 width: 100%;
506 height: 100%;
507 background: #d2d8d6;
508 content: ''; }
509 .u-tabs-downborder .u-tabs-nav .u-tabs-tab:hover::after, .u-tabs-downborder .u-tabs-nav .u-tabs-tab:focus::after, .u-tabs-downborder .u-tabs-nav .u-tabs-tab.u-tabs-tab-active::after {
510 background: rgb(245, 60, 50); }
511 .u-tabs-downborder .u-tabs-nav .u-tabs-tab.u-tabs-tab-active::after {
512 border-top-left-radius: 5px;
513 border-top-right-radius: 5px; }
514 .u-tabs-downborder .u-tabs-nav .u-tabs-tab-active {
515 color: #fff; }
516 .u-tabs-downborder .u-tabs-nav .u-tabs-tab-active:hover {
517 color: #fff; }
518
519.u-tabs-downborder .u-content-list {
520 border: none; }
521
522/*基础tab04*/
523.u-tabs-trapezoid .u-tabs-ink-bar {
524 background-color: transparent;
525 height: 0; }
526
527.u-tabs-trapezoid .u-tabs-bar, .u-tabs-trapezoid .u-tabs-nav-container {
528 background: #f5f5f5; }
529
530.u-tabs-trapezoid .u-tabs-nav .u-tabs-tab:first-child {
531 margin-left: 5px; }
532
533.u-tabs-trapezoid .u-tabs-nav .u-tabs-tab {
534 min-width: 90px;
535 padding: 9px 20px;
536 z-index: 1;
537 color: #fff;
538 margin-right: 0;
539 line-height: 1;
540 margin-top: 5px; }
541 .u-tabs-trapezoid .u-tabs-nav .u-tabs-tab::before {
542 content: '';
543 position: absolute;
544 top: 0;
545 left: 0;
546 z-index: -1;
547 width: 100%;
548 height: 100%;
549 border-bottom: 32px rgb(245, 60, 50) solid;
550 border-right: transparent 15px solid;
551 border-left: none;
552 z-index: -1; }
553 .u-tabs-trapezoid .u-tabs-nav .u-tabs-tab::after {
554 position: absolute;
555 top: 0;
556 left: 0;
557 z-index: -1;
558 width: 100%;
559 height: 100%;
560 background-color: #f5f5f5;
561 content: '';
562 border-bottom: 32px #fff solid;
563 border-right: #f5f5f5 15px solid;
564 border-left: none; }
565 .u-tabs-trapezoid .u-tabs-nav .u-tabs-tab-active {
566 color: rgb(245, 60, 50);
567 margin-top: 5px; }
568
569/*基础tab2*/
570.u-tabs-fill .u-tabs-ink-bar {
571 background-color: transparent; }
572
573.u-tabs-fill .u-tabs-nav {
574 background: #fff; }
575 .u-tabs-fill .u-tabs-nav .u-tabs-tab {
576 margin-right: 5px;
577 color: #666;
578 transition: color 0.3s; }
579 .u-tabs-fill .u-tabs-nav .u-tabs-tab:hover {
580 color: rgb(245, 60, 50); }
581 .u-tabs-fill .u-tabs-nav .u-tabs-tab::after {
582 position: absolute;
583 top: 0;
584 left: 0;
585 z-index: -1;
586 width: 100%;
587 height: 100%;
588 background: #d2d8d6;
589 content: ''; }
590 .u-tabs-fill .u-tabs-nav .u-tabs-tab:hover::after, .u-tabs-fill .u-tabs-nav .u-tabs-tab:focus::after, .u-tabs-fill .u-tabs-nav .u-tabs-tab.u-tabs-tab-active::after {
591 background: rgb(245, 60, 50); }
592 .u-tabs-fill .u-tabs-nav .u-tabs-tab.u-tabs-tab-active::after {
593 border-top-left-radius: 5px;
594 border-top-right-radius: 5px; }
595 .u-tabs-fill .u-tabs-nav .u-tabs-tab-active {
596 color: #fff; }
597 .u-tabs-fill .u-tabs-nav .u-tabs-tab-active:hover {
598 color: #fff; }
599
600.u-tabs-fill .u-content-list {
601 border: none; }
602
603/*可编辑card*/
604.u-tabs-editable-card .u-tabs-bar {
605 line-height: 38px; }
606
607.u-tabs-editable-card .u-tabs-nav {
608 background: #fff; }
609 .u-tabs-editable-card .u-tabs-nav .u-tabs-ink-bar {
610 height: 0; }
611 .u-tabs-editable-card .u-tabs-nav .u-tabs-tab {
612 margin-right: 5px;
613 color: #666;
614 transition: color 0.3s;
615 background: #f5f5f5;
616 border: 1px solid #e9e9e9;
617 border-bottom-color: #f5f5f5;
618 border-top-left-radius: 5px;
619 border-top-right-radius: 5px; }
620 .u-tabs-editable-card .u-tabs-nav .u-tabs-tab .u-tabs-close-x {
621 font-size: 12px; }
622 .u-tabs-editable-card .u-tabs-nav .u-tabs-tab:hover {
623 color: rgb(245, 60, 50); }
624 .u-tabs-editable-card .u-tabs-nav .u-tabs-tab::after {
625 position: absolute;
626 top: 0;
627 left: 0;
628 z-index: -1;
629 width: 100%;
630 height: 100%;
631 background: #d2d8d6;
632 content: ''; }
633 .u-tabs-editable-card .u-tabs-nav .u-tabs-tab:hover::after, .u-tabs-editable-card .u-tabs-nav .u-tabs-tab:focus::after, .u-tabs-editable-card .u-tabs-nav .u-tabs-tab.u-tabs-tab-active::after {
634 background: #fff; }
635 .u-tabs-editable-card .u-tabs-nav .u-tabs-tab-active {
636 color: rgb(245, 60, 50);
637 border-color: #e9e9e9;
638 border-bottom: 1px solid #fff; }
639
640.u-tabs-editable-card .u-content-list {
641 border: none; }
642
643/*基础tab3*/
644.u-tabs-turn .u-tabs-ink-bar {
645 background-color: transparent;
646 height: 0; }
647
648.u-tabs-turn .u-tabs-bar, .u-tabs-turn .u-tabs-nav-container {
649 background: #f5f5f5; }
650
651.u-tabs-turn .u-tabs-nav .u-tabs-tab:first-child {
652 margin-left: 5px; }
653
654.u-tabs-turn .u-tabs-nav .u-tabs-tab {
655 margin-bottom: -1px;
656 z-index: 1;
657 color: #fff;
658 margin-right: 0;
659 line-height: 1;
660 margin-top: 5px; }
661 .u-tabs-turn .u-tabs-nav .u-tabs-tab::before {
662 content: '';
663 position: absolute;
664 top: 0;
665 left: 0;
666 z-index: -1;
667 width: 100%;
668 height: 100%;
669 border-bottom: 32px rgb(245, 60, 50) solid;
670 border-right: transparent 15px solid;
671 border-left: none;
672 z-index: -1; }
673 .u-tabs-turn .u-tabs-nav .u-tabs-tab::after {
674 position: absolute;
675 top: 0;
676 left: 0;
677 z-index: -1;
678 width: 100%;
679 height: 100%;
680 background-color: #f5f5f5;
681 content: '';
682 border-bottom: 32px #fff solid;
683 border-right: #f5f5f5 15px solid;
684 border-left: none; }
685 .u-tabs-turn .u-tabs-nav .u-tabs-tab-active {
686 color: rgb(245, 60, 50);
687 margin-top: 5px; }
688
689.u-tabs-moveleft .u-content-list {
690 border: 5px solid #f5f5f5;
691 border-top: none;
692 height: 120px;
693 padding: 16px;
694 background: #fff;
695 position: relative; }
696 .u-tabs-moveleft .u-content-list .u-content {
697 display: inline-block;
698 transform: translateX(-100%);
699 opacity: 0;
700 position: absolute;
701 transition: all .3s ease-in-out; }
702 .u-tabs-moveleft .u-content-list .u-content-active {
703 transform: translateX(0);
704 transition-delay: .3s;
705 opacity: 1; }
706
707/*基础tab4 */
708.u-tabs-fade .u-tabs-ink-bar {
709 background-color: transparent;
710 height: 0; }
711
712.u-tabs-fade .u-tabs-bar, .u-tabs-fade .u-tabs-nav-container {
713 background: #f5f5f5; }
714
715.u-tabs-fade .u-tabs-nav {
716 margin-left: 5px; }
717 .u-tabs-fade .u-tabs-nav .u-tabs-tab {
718 margin-right: 0;
719 margin-top: 5px;
720 border-radius: 0 0 0 0;
721 transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
722 color: #666;
723 padding: 5px 20px;
724 text-align: center;
725 float: left;
726 display: inline-block;
727 box-sizing: border-box;
728 position: relative;
729 cursor: pointer;
730 text-decoration: none; }
731 .u-tabs-fade .u-tabs-nav .u-tabs-tab:hover {
732 color: rgb(245, 60, 50); }
733 .u-tabs-fade .u-tabs-nav .u-tabs-tab-active {
734 background: #fff;
735 color: #666; }
736 .u-tabs-fade .u-tabs-nav .u-tabs-tab-active:hover {
737 color: rgb(245, 60, 50); }
738
739/*基础tab5 */
740.u-tabs-fadeup .u-tabs-ink-bar {
741 background-color: transparent;
742 height: 0; }
743
744.u-tabs-fadeup .u-tabs-bar, .u-tabs-fadeup .u-tabs-nav-container {
745 background: #f5f5f5; }
746
747.u-tabs-fadeup .u-tabs-nav {
748 margin-bottom: -1px; }
749 .u-tabs-fadeup .u-tabs-nav .u-tabs-tab {
750 margin-top: 5px;
751 border-radius: 0 0 0 0;
752 transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
753 color: #666;
754 padding: 0 16px;
755 text-align: center;
756 float: left;
757 display: inline-block;
758 box-sizing: border-box;
759 position: relative;
760 cursor: pointer;
761 text-decoration: none; }
762 .u-tabs-fadeup .u-tabs-nav .u-tabs-tab:hover {
763 color: rgb(245, 60, 50); }
764 .u-tabs-fadeup .u-tabs-nav .u-tabs-tab::after {
765 position: absolute;
766 top: -5px;
767 left: 0;
768 z-index: -1;
769 width: 100%;
770 height: 100%;
771 content: ''; }
772 .u-tabs-fadeup .u-tabs-nav .u-tabs-tab:hover::after, .u-tabs-fadeup .u-tabs-nav .u-tabs-tab:focus::after, .u-tabs-fadeup .u-tabs-nav .u-tabs-tab.u-tabs-tab-active::after {
773 background: rgb(245, 60, 50); }
774 .u-tabs-fadeup .u-tabs-nav .u-tabs-tab-active {
775 color: #fff; }
776 .u-tabs-fadeup .u-tabs-nav .u-tabs-tab-active {
777 background: #fff;
778 color: #666; }
779 .u-tabs-fadeup .u-tabs-nav .u-tabs-tab-active:hover {
780 color: #666; }
781
782/*基础tab6*/
783.u-tabs-slide .u-tabs-nav {
784 background: #f5f5f5; }
785 .u-tabs-slide .u-tabs-nav .u-tabs-tab {
786 padding: 0 16px; }
787 .u-tabs-slide .u-tabs-nav .u-tabs-tab-child {
788 position: absolute;
789 bottom: 0;
790 left: 0;
791 height: 4px;
792 background: rgb(245, 60, 50);
793 content: ''; }
794
795.u-search-tabs-item {
796 cursor: pointer; }
797 .u-search-tabs-item.active {
798 color: rgb(245, 60, 50); }
799
800.u-search-tabs-split {
801 margin: 0 15px;
802 color: #555;
803 font-size: 12px; }