134 @bluegray-1: #f0f3f5;
135 @bluegray-2: #d2dbe0;
136 @bluegray-3: #b4c3cb;
137 @bluegray-4: #96abb6;
138 @bluegray-5: #7893a1;
139 @bluegray-6: #607d8b;
140 @bluegray-7: #546c78;
141 @bluegray-8: #495f69;
142 @bluegray-9: #34444b;
143 @bluegray-10: #2a363c;
145 @default-white: #ffffff;
146 @default-black: #000000;
148 @default-blue: @blue-6;
149 @hover-blue: @blue-7;
150 @active-blue: @blue-8;
152 @nav-default-blue: @default-blue;
153 @nav-hover-blue: @hover-blue;
154 @nav-active-blue: @active-blue;
156 @default-green: @green-6;
157 @hover-green: @green-7;
158 @active-green: @green-8;
160 @default-red: @red-6;
164 @default-yellow: @yellow-6;
165 @hover-yellow: @yellow-7;
166 @active-yellow: @yellow-8;
168 @gray-grade-1: #212121;
169 @gray-grade-2: #404040;
170 @gray-grade-3: #595959;
171 @gray-grade-4: #737373;
172 @gray-grade-5: #999999;
173 @gray-grade-6: #bfbfbf;
174 @gray-grade-7: #d9d9d9;
175 @gray-grade-8: #e9e9e9;
176 @gray-grade-9: #f5f5f5;
179 @font-family: "Helvetica Neue","PingFang SC",Tahoma,"Microsoft Yahei";
181 @font-size-normal: 14px;
186 @font-gray-normal: @gray-grade-3;
187 @font-gray-light: @gray-grade-5;
188 @font-gray-lightest: @gray-grade-6;
189 @font-gray-dark: @gray-grade-2;
191 @font-weight-normal: 400;
192 @font-weight-bold: 500;
193 @title-font-weight: 500;
195 .font(@font-size: @font-size-normal, @color:@font-gray-normal, @font-weight: @font-weight-normal) {
196 font-family: @font-family;
197 font-weight: @font-weight;
198 font-size: @font-size;
199 line-height: @font-size;
203 .input-font(@font-size: @font-size-normal, @color:@font-gray-normal) {
204 .font(@font-size, @color, @font-weight-bold);
208 @disabled-font: @font-gray-lightest;
209 @disabled-background: @gray-grade-9;
210 @disabled-border-color: rgba(191, 191, 191, 0.5);
213 @hover-background: @blue-1;
214 @hover-border-color: @default-blue;
217 @active-background: @gray-grade-9;
220 @highlight-background: @gray-grade-6;
223 @border-color: @gray-grade-7;
224 @border-base: 1px solid @border-color;
225 @border-radius-base: 3px;
226 @box-shadow-base: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
229 @component-height-lg: 32px;
230 @component-height-md: 28px;
231 @component-height-sm: 24px;
232 @line-height-base: 1.5;
235 @spacing-within-item: 10px;
236 @spacing-between-item: 20px;
240 @z-index-back-top : 10;
241 @z-index-modal-mask : 1000;
242 @z-index-modal : 1000;
243 @z-index-notification : 1010;
244 @z-index-message : 1010;
245 @z-index-popover : 1030;
246 @z-index-picker : 1050;
247 @z-index-dropdown : 1050;
248 @z-index-tooltip : 1060;
251 @input-padding-both-side: 10px;
255 @overlay-margin-top: 5px;
256 @overlay-item-padding-left: 10px;
259 @hover-clear-icon-bg: @gray-grade-9;
260 @clear-icon-color: @gray-grade-5;
265 @button-border-color: @border-base;
269 @tab-active-line-height: 2px;
270 @tab-line-height: @tab-height - @tab-active-line-height;
271 @icon-menu-active-bg: @blue-2;