UNPKG

8.49 kBCSSView Raw
1@charset "UTF-8";
2/*
3* @Author: zhongjiahao
4* @Date: 2016-08-03 15:31:16
5* @Last Modified by: zhongjiahao
6* @Last Modified time: 2016-10-18 15:54:22
7*/
8/*
9 font-size: 34px;
10*/
11/*
12 font-size: 24px;
13*/
14/*
15 font-size: 20px;
16*/
17/*
18 font-size: 16px;
19*/
20/*
21 font-size: 14px;
22*/
23/*
24 font-size: 14px;
25*/
26/*
27 font-size: 12px;
28*/
29/*
30 clearfix
31 */
32/*
33 text overflow
34 */
35/*
36* @Author: zhongjiahao
37* @Date: 2016-09-13 10:44:22
38* @Last Modified by: zhongjiahao
39* @Last Modified time: 2016-11-08 10:28:06
40*/
41/*
42 主色
43*/
44/*
45 中性色
46*/
47/*
48 辅助色
49*/
50/*
51 系统提示色
52*/
53/*
54 z-index
55 */
56/*
57* @Author: zhongjiahao
58* @Date: 2016-09-06 16:07:29
59* @Last Modified by: zhongjiahao
60* @Last Modified time: 2016-12-06 15:32:45
61*/
62.u-input {
63 flex: 1 1 auto;
64 height: 28px;
65 border-radius: 5px;
66 padding: 0px 5px 0px 5px;
67 outline: transparent;
68 font-size: 12px;
69 line-height: 20px;
70 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
71 color: #021726;
72}
73
74.u-input::placeholder {
75 color: #BCC8D1;
76 opacity: 1;
77}
78
79.u-input:disabled {
80 cursor: not-allowed;
81}
82
83[type="text"]::-ms-clear {
84 display: none;
85}
86
87::-webkit-input-placeholder {
88 /* WebKit browsers */
89 color: #BCC8D1;
90 font-size: 12px;
91 line-height: 20px;
92 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
93}
94
95:-moz-placeholder {
96 /* Mozilla Firefox 4 to 18 */
97 color: #BCC8D1;
98 font-size: 12px;
99 line-height: 20px;
100 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
101}
102
103::-moz-placeholder {
104 /* Mozilla Firefox 19+ */
105 color: #BCC8D1;
106 font-size: 12px;
107 line-height: 20px;
108 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
109}
110
111:-ms-input-placeholder {
112 /* Internet Explorer 10+ */
113 color: #BCC8D1;
114 font-size: 12px;
115 line-height: 20px;
116 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
117}
118
119.u-icon {
120 display: inline-block;
121}
122
123.u-icon.icon-close {
124 width: 14px;
125 height: 14px;
126 font-size: 14px;
127 cursor: pointer;
128 color: #acb7bf;
129 line-height: 0;
130}
131
132.u-icon.icon-close:hover {
133 color: #cc2929;
134}
135
136.form-item {
137 position: relative;
138 margin-bottom: 15px;
139 -webkit-box-sizing: border-box;
140 -moz-box-sizing: border-box;
141 box-sizing: border-box;
142}
143
144.form-item_is-static {
145 margin-bottom: 10px;
146 border-bottom: 1px solid #e4ebf0;
147}
148
149.form-item_is-static .form-item__control {
150 min-height: 24px;
151}
152
153.form-item_is-static .form-item__control .form-item__multi-list {
154 border-bottom: 0px;
155}
156
157.form-item_is-static .form-item__control .form-item__text {
158 margin-top: 0;
159 margin-bottom: 0;
160 color: #021726;
161}
162
163.form-item_is-static .form-item__control .form-item__link {
164 margin-left: 5px;
165 font-size: 12px;
166 line-height: 20px;
167 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
168}
169
170.form-item_is-static .form-item__control .form-item__link:hover {
171 outline: 0;
172 color: #1687d9;
173 text-decoration: underline;
174}
175
176.form-item_is-static .form-item__control .sys-icon-cus-bianji {
177 color: #BCC8D1;
178}
179
180.form-item_is-static .form-item__control:hover .sys-icon-cus-bianji {
181 color: #3D5566;
182}
183
184.form-item_is-static .form-item__control .sys-icon-cus-bianji:hover {
185 color: #1687d9;
186 cursor: pointer;
187}
188
189.form-item_is-static .form-item__avatar-item {
190 margin-bottom: 5px;
191 margin-right: 5px;
192 line-height: 0px;
193}
194
195.form-item_is-static .form-item__avatar-item .form-item__text {
196 vertical-align: middle;
197}
198
199.form-item_is-hidden-tips {
200 position: absolute;
201 width: calc(100% - 20px);
202 line-height: 28px;
203 height: 28px;
204 margin-left: 5px;
205 white-space: nowrap;
206 overflow: hidden;
207 text-overflow: ellipsis;
208 color: transparent;
209 cursor: text;
210 font-size: 12px;
211 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", SimSun, STHeitiSC, sans-serif;
212}
213
214.form-item__title {
215 position: relative;
216 max-width: 100%;
217 vertical-align: middle;
218 font-size: 12px;
219 line-height: 28px;
220 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
221 color: #3D5566;
222 white-space: nowrap;
223 overflow: hidden;
224 text-overflow: ellipsis;
225}
226
227.form-item__title .form-item__text {
228 font-size: inherit;
229 line-height: inherit;
230 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
231 text-indent: 5px;
232 max-width: inherit;
233 white-space: nowrap;
234 overflow: hidden;
235 text-overflow: ellipsis;
236 vertical-align: middle;
237}
238
239.form-item__text {
240 display: inline-block;
241 font-size: 12px;
242 line-height: 20px;
243 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
244}
245
246.form-item__control {
247 border: 1px solid #e4ebf0;
248 border-radius: 5px;
249 position: relative;
250 display: flex;
251 flex-wrap: wrap;
252 min-height: 25px;
253}
254
255.form-item__control:hover {
256 border-color: #96d0fa;
257}
258
259.form-item__control.form-item__control_is-active {
260 background: #ffffff;
261 border: 1px solid #1687d9;
262 box-shadow: 0 0 2px 1px #96d0fa;
263}
264
265.form-item__control.form-item__control_is-active .form-item__bottom-line {
266 left: 0;
267 width: 100%;
268 background-color: #1687d9;
269 transition: left cubic-bezier(0.66, 1.65, 0.23, 0.87) 0.35s, width cubic-bezier(0.66, 1.65, 0.23, 0.87) 0.35s;
270}
271
272.form-item__control.form-item__control_has-info .form-item__explain {
273 color: #1687d9;
274}
275
276.form-item__control.form-item__control_has-info .form-item__bottom-line {
277 bottom: 20px;
278}
279
280.form-item__control.form-item__control_has-error {
281 border: none;
282 box-shadow: none;
283}
284
285.form-item__control.form-item__control_has-error .u-input {
286 background: transparent;
287 border: none;
288 border-radius: 5px;
289}
290
291.form-item__control.form-item__control_has-error [type="text"]:focus + .form-item__bottom-line {
292 background-color: #cc2929;
293}
294
295.form-item__control.form-item__control_has-error .u-textarea__element:focus + .form-item__bottom-line {
296 background-color: #cc2929;
297}
298
299.form-item__control.form-item__control_has-error .form-item__bottom-line {
300 background-color: #cc2929;
301}
302
303.form-item__control.form-item__control_has-error .form-item__explain {
304 color: #cc2929;
305}
306
307.form-item__control .form-item__bottom-line {
308 position: absolute;
309 left: 50%;
310 bottom: 0;
311 width: 0;
312 height: 2px;
313}
314
315.form-item__explain {
316 display: block;
317 width: 100%;
318 min-height: 20px;
319 font-size: 12px;
320 line-height: 28px;
321 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
322 margin-left: 5px;
323}
324
325.form-item__label {
326 display: inline-block;
327 padding-top: 15px;
328 padding-bottom: 10px;
329 font-size: 12px;
330 line-height: 20px;
331 font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
332}
333
334.form-item__right-icon {
335 display: flex;
336 align-items: center;
337 position: absolute;
338 top: 7px;
339 right: 5px;
340}
341
342.form-item__right-icon i + i {
343 margin-left: 5px;
344}
345
346.form-item__right-icon .icon-arrowdown {
347 line-height: 0;
348 color: #66757F;
349 margin-top: 4px;
350}
351
352.form-item__right-icon .icon-close + .icon-arrowdown {
353 margin-top: 0px;
354}
355
356.form-item__multi-list {
357 width: 100%;
358 padding-left: 5px;
359 cursor: text;
360}
361
362.form-item__multi-list .form-item__multi-item {
363 height: 26px;
364 padding-left: 0px;
365 padding-right: 10px;
366 margin-right: 5px;
367 border-radius: 2px;
368 line-height: 28px;
369 cursor: default;
370 max-width: 100%;
371 overflow: hidden;
372}
373
374.form-item__multi-list .form-item__multi-item .form-item__text {
375 max-width: calc(100% - 18px);
376 margin-right: 4px;
377 color: #021726;
378 vertical-align: middle;
379 white-space: nowrap;
380 overflow: hidden;
381 text-overflow: ellipsis;
382 line-height: 26px;
383}
384
385.form-item__multi-list .form-item__multi-item .icon-close {
386 font-size: 14px;
387 vertical-align: middle;
388}
389
390.form-item__editable {
391 padding-right: 20px;
392}
393
394.avatar {
395 display: inline-block;
396 text-align: center;
397 vertical-align: middle;
398 white-space: nowrap;
399 overflow: hidden;
400 text-overflow: ellipsis;
401}
402
403.avatar.avatar_size-30 {
404 color: #fff;
405 width: 30px;
406 height: 30px;
407 line-height: 30px;
408 border-radius: 50%;
409 font-size: 12px;
410}
411
412.list_horizontal {
413 display: flex;
414}
415
416.list_wrap {
417 flex-wrap: wrap;
418}