UNPKG

4.3 kBtext/lessView Raw
1@import './index';
2
3.@{tab-prefix-cls} {
4 // ========================== Top & Bottom ==========================
5 &-top,
6 &-bottom {
7 flex-direction: column;
8
9 > .@{tab-prefix-cls}-nav,
10 > div > .@{tab-prefix-cls}-nav {
11 margin: @tabs-bar-margin;
12
13 &::before {
14 position: absolute;
15 right: 0;
16 left: 0;
17 border-bottom: @border-width-base @border-style-base @border-color-split;
18 content: '';
19 }
20
21 .@{tab-prefix-cls}-ink-bar {
22 height: 2px;
23
24 &-animated {
25 transition: width @animation-duration-slow, left @animation-duration-slow,
26 right @animation-duration-slow;
27 }
28 }
29
30 .@{tab-prefix-cls}-nav-wrap {
31 &::before,
32 &::after {
33 top: 0;
34 bottom: 0;
35 width: 30px;
36 }
37
38 &::before {
39 left: 0;
40 box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
41 }
42 &::after {
43 right: 0;
44 box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
45 }
46
47 &.@{tab-prefix-cls}-nav-wrap-ping-left::before {
48 opacity: 1;
49 }
50 &.@{tab-prefix-cls}-nav-wrap-ping-right::after {
51 opacity: 1;
52 }
53 }
54 }
55 }
56
57 &-top {
58 > .@{tab-prefix-cls}-nav,
59 > div > .@{tab-prefix-cls}-nav {
60 &::before {
61 bottom: 0;
62 }
63
64 .@{tab-prefix-cls}-ink-bar {
65 bottom: 0;
66 }
67 }
68 }
69
70 &-bottom {
71 > .@{tab-prefix-cls}-nav,
72 > div > .@{tab-prefix-cls}-nav {
73 order: 1;
74 margin-top: @margin-md;
75 margin-bottom: 0;
76
77 &::before {
78 top: 0;
79 }
80
81 .@{tab-prefix-cls}-ink-bar {
82 top: 0;
83 }
84 }
85
86 > .@{tab-prefix-cls}-content-holder,
87 > div > .@{tab-prefix-cls}-content-holder {
88 order: 0;
89 }
90 }
91
92 // ========================== Left & Right ==========================
93 &-left,
94 &-right {
95 > .@{tab-prefix-cls}-nav,
96 > div > .@{tab-prefix-cls}-nav {
97 flex-direction: column;
98 min-width: 50px;
99
100 // >>>>>>>>>>> Tab
101 .@{tab-prefix-cls}-tab {
102 padding: @tabs-vertical-padding;
103 text-align: center;
104 }
105
106 .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
107 margin: @tabs-vertical-margin;
108 }
109
110 // >>>>>>>>>>> Nav
111 .@{tab-prefix-cls}-nav-wrap {
112 flex-direction: column;
113
114 &::before,
115 &::after {
116 right: 0;
117 left: 0;
118 height: 30px;
119 }
120
121 &::before {
122 top: 0;
123 box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
124 }
125 &::after {
126 bottom: 0;
127 box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
128 }
129
130 &.@{tab-prefix-cls}-nav-wrap-ping-top::before {
131 opacity: 1;
132 }
133 &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
134 opacity: 1;
135 }
136 }
137
138 // >>>>>>>>>>> Ink Bar
139 .@{tab-prefix-cls}-ink-bar {
140 width: 2px;
141
142 &-animated {
143 transition: height @animation-duration-slow, top @animation-duration-slow;
144 }
145 }
146
147 .@{tab-prefix-cls}-nav-list,
148 .@{tab-prefix-cls}-nav-operations {
149 flex: 1 0 auto; // fix safari scroll problem
150 flex-direction: column;
151 }
152 }
153 }
154
155 &-left {
156 > .@{tab-prefix-cls}-nav,
157 > div > .@{tab-prefix-cls}-nav {
158 .@{tab-prefix-cls}-ink-bar {
159 right: 0;
160 }
161 }
162
163 > .@{tab-prefix-cls}-content-holder,
164 > div > .@{tab-prefix-cls}-content-holder {
165 margin-left: -@border-width-base;
166 border-left: @border-width-base @border-style-base @border-color-split;
167
168 > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
169 padding-left: @padding-lg;
170 }
171 }
172 }
173
174 &-right {
175 > .@{tab-prefix-cls}-nav,
176 > div > .@{tab-prefix-cls}-nav {
177 order: 1;
178
179 .@{tab-prefix-cls}-ink-bar {
180 left: 0;
181 }
182 }
183
184 > .@{tab-prefix-cls}-content-holder,
185 > div > .@{tab-prefix-cls}-content-holder {
186 order: 0;
187 margin-right: -@border-width-base;
188 border-right: @border-width-base @border-style-base @border-color-split;
189
190 > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
191 padding-right: @padding-lg;
192 }
193 }
194 }
195}