1 | @import '../../style/themes/index';
|
2 | @import '../../style/mixins/index';
|
3 | @import './size';
|
4 | @import './rtl';
|
5 | @import './position';
|
6 | @import './dropdown';
|
7 | @import './card';
|
8 |
|
9 | @tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
10 |
|
11 | .@{tab-prefix-cls} {
|
12 | .reset-component();
|
13 |
|
14 | display: flex;
|
15 | overflow: hidden;
|
16 |
|
17 |
|
18 | > .@{tab-prefix-cls}-nav,
|
19 | > div > .@{tab-prefix-cls}-nav {
|
20 | position: relative;
|
21 | display: flex;
|
22 | flex: none;
|
23 | align-items: center;
|
24 |
|
25 | .@{tab-prefix-cls}-nav-wrap {
|
26 | position: relative;
|
27 | display: inline-block;
|
28 | display: flex;
|
29 | flex: auto;
|
30 | align-self: stretch;
|
31 | overflow: hidden;
|
32 | white-space: nowrap;
|
33 | transform: translate(0);
|
34 |
|
35 |
|
36 | &::before,
|
37 | &::after {
|
38 | position: absolute;
|
39 | z-index: 1;
|
40 | opacity: 0;
|
41 | transition: opacity @animation-duration-slow;
|
42 | content: '';
|
43 | pointer-events: none;
|
44 | }
|
45 | }
|
46 |
|
47 | .@{tab-prefix-cls}-nav-list {
|
48 | position: relative;
|
49 | display: flex;
|
50 | transition: transform @animation-duration-slow;
|
51 | }
|
52 |
|
53 |
|
54 | .@{tab-prefix-cls}-nav-operations {
|
55 | display: flex;
|
56 | align-self: stretch;
|
57 |
|
58 | &-hidden {
|
59 | position: absolute;
|
60 | visibility: hidden;
|
61 | pointer-events: none;
|
62 | }
|
63 | }
|
64 |
|
65 | .@{tab-prefix-cls}-nav-more {
|
66 | position: relative;
|
67 | padding: @tabs-card-horizontal-padding;
|
68 | background: transparent;
|
69 | border: 0;
|
70 |
|
71 | &::after {
|
72 | position: absolute;
|
73 | right: 0;
|
74 | bottom: 0;
|
75 | left: 0;
|
76 | height: 5px;
|
77 | transform: translateY(100%);
|
78 | content: '';
|
79 | }
|
80 | }
|
81 |
|
82 | .@{tab-prefix-cls}-nav-add {
|
83 | min-width: @tabs-card-height;
|
84 | padding: 0 @padding-xs;
|
85 | background: @tabs-card-head-background;
|
86 | border: @border-width-base @border-style-base @border-color-split;
|
87 | border-radius: @border-radius-base @border-radius-base 0 0;
|
88 | outline: none;
|
89 | cursor: pointer;
|
90 | transition: all @animation-duration-slow @ease-in-out;
|
91 |
|
92 | &:hover {
|
93 | color: @tabs-hover-color;
|
94 | }
|
95 |
|
96 | &:active,
|
97 | &:focus {
|
98 | color: @tabs-active-color;
|
99 | }
|
100 | }
|
101 | }
|
102 |
|
103 | &-extra-content {
|
104 | flex: none;
|
105 | }
|
106 |
|
107 | &-centered {
|
108 | > .@{tab-prefix-cls}-nav,
|
109 | > div > .@{tab-prefix-cls}-nav {
|
110 | .@{tab-prefix-cls}-nav-wrap {
|
111 | &:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
|
112 | justify-content: center;
|
113 | }
|
114 | }
|
115 | }
|
116 | }
|
117 |
|
118 |
|
119 | &-ink-bar {
|
120 | position: absolute;
|
121 | background: @tabs-ink-bar-color;
|
122 | pointer-events: none;
|
123 | }
|
124 |
|
125 |
|
126 | &-tab {
|
127 | position: relative;
|
128 | display: inline-flex;
|
129 | align-items: center;
|
130 | padding: @tabs-horizontal-padding;
|
131 | font-size: @tabs-title-font-size;
|
132 | background: transparent;
|
133 | border: 0;
|
134 | outline: none;
|
135 | cursor: pointer;
|
136 |
|
137 | &-btn,
|
138 | &-remove {
|
139 | &:focus,
|
140 | &:active {
|
141 | color: @tabs-active-color;
|
142 | }
|
143 | }
|
144 |
|
145 | &-btn {
|
146 | outline: none;
|
147 | transition: all 0.3s;
|
148 | }
|
149 |
|
150 | &-remove {
|
151 | flex: none;
|
152 | margin-right: -@margin-xss;
|
153 | margin-left: @margin-xs;
|
154 | color: @text-color-secondary;
|
155 | font-size: @font-size-sm;
|
156 | background: transparent;
|
157 | border: none;
|
158 | outline: none;
|
159 | cursor: pointer;
|
160 | transition: all @animation-duration-slow;
|
161 |
|
162 | &:hover {
|
163 | color: @heading-color;
|
164 | }
|
165 | }
|
166 |
|
167 | &:hover {
|
168 | color: @tabs-hover-color;
|
169 | }
|
170 |
|
171 | &&-active &-btn {
|
172 | color: @tabs-highlight-color;
|
173 | text-shadow: 0 0 0.25px currentColor;
|
174 | }
|
175 |
|
176 | &&-disabled {
|
177 | color: @disabled-color;
|
178 | cursor: not-allowed;
|
179 | }
|
180 |
|
181 | &&-disabled &-btn,
|
182 | &&-disabled &-remove {
|
183 | &:focus,
|
184 | &:active {
|
185 | color: @disabled-color;
|
186 | }
|
187 | }
|
188 |
|
189 | & &-remove .@{iconfont-css-prefix} {
|
190 | margin: 0;
|
191 | }
|
192 |
|
193 | .@{iconfont-css-prefix} {
|
194 | margin-right: @margin-sm;
|
195 | }
|
196 | }
|
197 |
|
198 | &-tab + &-tab {
|
199 | margin: @tabs-horizontal-margin;
|
200 | }
|
201 |
|
202 |
|
203 | &-content {
|
204 | &-holder {
|
205 | flex: auto;
|
206 | min-width: 0;
|
207 | min-height: 0;
|
208 | }
|
209 |
|
210 | display: flex;
|
211 | width: 100%;
|
212 |
|
213 | &-animated {
|
214 | transition: margin @animation-duration-slow;
|
215 | }
|
216 | }
|
217 |
|
218 | &-tabpane {
|
219 | flex: none;
|
220 | width: 100%;
|
221 | outline: none;
|
222 | }
|
223 | }
|