UNPKG

bee-step/build/Step.css

Version:

1/* FormGroup */
2/*  Navlayout  */
u-steps {
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.u-steps .u-steps-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden; }
.u-steps .u-steps-item:last-child {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none; }
.u-steps .u-steps-item:last-child .u-steps-item-tail,
.u-steps .u-steps-item:last-child .u-steps-item-title:after {
  display: none; }
.u-steps .uf {
  font-size: 22px; }
.u-steps .uicon {
  display: inline-block;
  font-family: uf; }
42
u-steps-item-icon,
u-steps-item-content {
display: inline-block;
vertical-align: top; }
47
u-steps-item-icon {
border: 1px solid rgba(0, 0, 0, 0.25);
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 32px;
font-size: 16px;
margin-right: 8px;
-webkit-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
60
u-steps-item-icon > .u-steps-icon {
line-height: 1;
top: -1px;
color: rgb(245, 60, 50);
position: relative; }
66
u-steps-item-tail {
position: absolute;
left: 0;
width: 100%;
top: 12px;
padding: 0 10px; }
73
u-steps-item-tail:after {
content: '';
display: inline-block;
background: #e8e8e8;
height: 1px;
border-radius: 1px;
width: 100%;
-webkit-transition: background .3s;
transition: background .3s; }
83
u-steps-item-title {
font-size: 16px;
color: rgba(0, 0, 0, 0.65);
display: inline-block;
padding-right: 16px;
position: relative;
line-height: 32px; }
91
u-steps-item-title:after {
content: '';
height: 1px;
width: 9999px;
background: #e8e8e8;
display: block;
position: absolute;
top: 16px;
left: 100%; }
101
u-steps-item-description {
font-size: 14px;
color: rgba(0, 0, 0, 0.45); }
105
u-steps-item-wait .u-steps-item-icon {
border-color: rgba(0, 0, 0, 0.25);
background-color: #fff; }
109
u-steps-item-wait .u-steps-item-icon > .u-steps-icon {
color: rgba(0, 0, 0, 0.25); }
112
u-steps-item-wait .u-steps-item-icon > .u-steps-icon .u-steps-icon-dot {
background: rgba(0, 0, 0, 0.25); }
115
u-steps-item-wait > .u-steps-item-content > .u-steps-item-title {
color: rgba(0, 0, 0, 0.45); }
118
u-steps-item-wait > .u-steps-item-content > .u-steps-item-title:after {
background-color: #e8e8e8; }
121
u-steps-item-wait > .u-steps-item-content > .u-steps-item-description {
color: rgba(0, 0, 0, 0.45); }
124
u-steps-item-wait > .u-steps-item-tail:after {
background-color: #e8e8e8; }
127
u-steps-item-process .u-steps-item-icon {
border-color: rgb(245, 60, 50);
background-color: #fff; }
131
u-steps-item-process .u-steps-item-icon > .u-steps-icon {
color: rgb(245, 60, 50); }
134
u-steps-item-process .u-steps-item-icon > .u-steps-icon .u-steps-icon-dot {
background: rgb(245, 60, 50); }
137
u-steps-item-process > .u-steps-item-content > .u-steps-item-title {
color: rgba(0, 0, 0, 0.85); }
140
u-steps-item-process > .u-steps-item-content > .u-steps-item-title:after {
background-color: #e8e8e8; }
143
u-steps-item-process > .u-steps-item-content > .u-steps-item-description {
color: rgba(0, 0, 0, 0.65); }
146
u-steps-item-process > .u-steps-item-tail:after {
background-color: #e8e8e8; }
149
u-steps-item-process .u-steps-item-icon {
background: rgb(245, 60, 50); }
152
u-steps-item-process .u-steps-item-icon > .u-steps-icon {
color: #fff; }
155
u-steps-item-process .u-steps-item-title {
font-weight: 500; }
158
u-steps-item-finish .u-steps-item-icon {
border-color: rgb(245, 60, 50);
background-color: #fff; }
162
u-steps-item-finish .u-steps-item-icon .u-steps-icon {
color: rgb(245, 60, 50); }
165
u-steps-item-finish .u-steps-item-icon .uicon:before {
content: "\e677"; }
168
u-steps-item-finish .u-steps-item-icon > .u-steps-icon .u-steps-icon-dot {
background: rgb(245, 60, 50); }
171
u-steps-item-finish > .u-steps-item-content > .u-steps-item-title {
color: rgba(0, 0, 0, 0.65); }
174
u-steps-item-finish > .u-steps-item-content > .u-steps-item-title:after {
background-color: rgb(245, 60, 50); }
177
u-steps-item-finish > .u-steps-item-content > .u-steps-item-description {
color: rgba(0, 0, 0, 0.45); }
180
u-steps-item-finish > .u-steps-item-tail:after {
background-color: rgb(245, 60, 50); }
183
u-steps-item-error .u-steps-item-icon {
border-color: #f5222d;
background-color: #fff; }
187
u-steps-item-error .u-steps-item-icon .u-steps-icon {
color: #f5222d; }
190
u-steps-item-error .u-steps-item-icon .uicon::before {
content: "\e76b"; }
193
u-steps-item-error .u-steps-item-icon > .u-steps-icon .u-steps-icon-dot {
background: #f5222d; }
196
u-steps-item-error > .u-steps-item-content > .u-steps-item-title {
color: #f5222d; }
199
u-steps-item-error > .u-steps-item-content > .u-steps-item-title:after {
background-color: #e8e8e8; }
202
u-steps-item-error > .u-steps-item-content > .u-steps-item-description {
color: #f5222d; }
205
u-steps-item-error > .u-steps-item-tail:after {
background-color: #e8e8e8; }
208
u-steps-item.u-steps-next-error .u-steps-item-title:after {
background: #f5222d; }
211
u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item {
margin-right: 16px;
white-space: nowrap; }
215
u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child {
margin-right: 0; }
218
u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child .u-steps-item-title {
padding-right: 0; }
221
u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item-tail {
display: none; }
224
u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item-description {
max-width: 140px;
white-space: normal; }
228
u-steps-item-custom .u-steps-item-icon {
background: none;
border: 0;
width: auto;
height: auto; }
234
u-steps-item-custom .u-steps-item-icon > .u-steps-icon {
font-size: 24px;
line-height: 32px;
top: 0;
left: 0.5px;
width: 32px;
height: 32px; }
242
u-steps-item-custom.u-steps-item-process .u-steps-item-icon > .u-steps-icon {
color: rgb(245, 60, 50); }
245
u-steps-small.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item {
margin-right: 12px; }
248
u-steps-small.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child {
margin-right: 0; }
251
u-steps-small .u-steps-item-icon {
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 24px;
font-size: 12px; }
259
u-steps-small .u-steps-item-title {
font-size: 14px;
line-height: 24px;
padding-right: 12px; }
264
u-steps-small .u-steps-item-title:after {
top: 12px; }
267
u-steps-small .u-steps-item-description {
font-size: 14px;
color: rgba(0, 0, 0, 0.45); }
271
u-steps-small .u-steps-item-tail {
top: 8px;
padding: 0 8px; }
275
u-steps-small .u-steps-item-custom .u-steps-item-icon {
width: inherit;
height: inherit;
line-height: inherit;
border-radius: 0;
border: 0;
background: none; }
283
u-steps-small .u-steps-item-custom .u-steps-item-icon > .u-steps-icon {
font-size: 24px;
line-height: 24px;
-webkit-transform: none;
-ms-transform: none;
transform: none; }
290
u-steps-vertical {
display: block; }
293
u-steps-vertical .u-steps-item {
display: block;
overflow: visible; }
297
u-steps-vertical .u-steps-item-icon {
float: left;
margin-right: 16px; }
301
u-steps-vertical .u-steps-item-content {
min-height: 48px;
overflow: hidden;
display: block; }
306
u-steps-vertical .u-steps-item-title {
line-height: 32px; }
309
u-steps-vertical .u-steps-item-description {
padding-bottom: 12px; }
312
u-steps-vertical > .u-steps-item > .u-steps-item-tail {
position: absolute;
left: 16px;
top: 0;
height: 100%;
width: 1px;
padding: 38px 0 6px; }
320
u-steps-vertical > .u-steps-item > .u-steps-item-tail:after {
height: 100%;
width: 1px; }
324
u-steps-vertical > .u-steps-item:not(:last-child) > .u-steps-item-tail {
display: block; }
327
u-steps-vertical > .u-steps-item > .u-steps-item-content > .u-steps-item-title:after {
display: none; }
330
u-steps-vertical.u-steps-small .u-steps-item-tail {
position: absolute;
left: 12px;
top: 0;
padding: 30px 0 6px; }
336
u-steps-vertical.u-steps-small .u-steps-item-title {
line-height: 24px; }
339
340@media (max-width: 480px) {
.u-steps-horizontal.u-steps-label-horizontal {
  display: block; }
.u-steps-horizontal.u-steps-label-horizontal .u-steps-item {
  display: block;
  overflow: visible; }
.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-icon {
  float: left;
  margin-right: 16px; }
.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-content {
  min-height: 48px;
  overflow: hidden;
  display: block; }
.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-title {
  line-height: 32px; }
.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-description {
  padding-bottom: 12px; }
.u-steps-horizontal.u-steps-label-horizontal > .u-steps-item > .u-steps-item-tail {
  position: absolute;
  left: 16px;
  top: 0;
  height: 100%;
  width: 1px;
  padding: 38px 0 6px; }
.u-steps-horizontal.u-steps-label-horizontal > .u-steps-item > .u-steps-item-tail:after {
  height: 100%;
  width: 1px; }
.u-steps-horizontal.u-steps-label-horizontal > .u-steps-item:not(:last-child) > .u-steps-item-tail {
  display: block; }
.u-steps-horizontal.u-steps-label-horizontal > .u-steps-item > .u-steps-item-content > .u-steps-item-title:after {
  display: none; }
.u-steps-horizontal.u-steps-label-horizontal.u-steps-small .u-steps-item-tail {
  position: absolute;
  left: 12px;
  top: 0;
  padding: 30px 0 6px; }
.u-steps-horizontal.u-steps-label-horizontal.u-steps-small .u-steps-item-title {
  line-height: 24px; } }
378
u-steps-label-vertical .u-steps-item {
overflow: visible; }
381
u-steps-label-vertical .u-steps-item-tail {
padding: 0 24px;
margin-left: 48px; }
385
u-steps-label-vertical .u-steps-item-content {
display: block;
text-align: center;
margin-top: 8px;
width: 104px; }
391
u-steps-label-vertical .u-steps-item-icon {
display: inline-block;
margin-left: 36px; }
395
u-steps-label-vertical .u-steps-item-title {
padding-right: 0; }
398
u-steps-label-vertical .u-steps-item-title:after {
display: none; }
401
u-steps-dot .u-steps-item-title {
line-height: 1.5; }
404
u-steps-dot .u-steps-item-tail {
width: 100%;
top: 2px;
margin: 0 0 0 70px;
padding: 0; }
410
u-steps-dot .u-steps-item-tail:after {
height: 3px;
width: calc(100% - 20px);
margin-left: 12px; }
415
u-steps-dot .u-steps-item:first-child .u-steps-icon-dot {
left: 2px; }
418
u-steps-dot .u-steps-item-icon {
padding-right: 0;
width: 8px;
height: 8px;
line-height: 8px;
border: 0;
margin-left: 67px;
background: transparent; }
427
u-steps-dot .u-steps-item-icon .u-steps-icon-dot {
float: left;
width: 100%;
height: 100%;
border-radius: 100px;
position: relative;
-webkit-transition: all .3s;
transition: all .3s;
/* expand hover area */ }
437
u-steps-dot .u-steps-item-icon .u-steps-icon-dot:after {
content: "";
background: rgba(0, 0, 0, 0.001);
width: 60px;
height: 32px;
position: absolute;
top: -12px;
left: -26px; }
446
u-steps-dot .u-steps-item-content {
width: 140px; }
449
u-steps-dot .u-steps-item-process .u-steps-item-icon {
width: 10px;
height: 10px;
line-height: 10px; }
454
u-steps-dot .u-steps-item-process .u-steps-item-icon .u-steps-icon-dot {
top: -1px; }
457
u-steps-vertical.u-steps-dot .u-steps-item-icon {
margin-left: 0;
margin-top: 8px; }
461
u-steps-vertical.u-steps-dot .u-steps-item-tail {
margin: 0;
left: -9px;
top: 2px;
padding: 22px 0 4px; }
467
u-steps-vertical.u-steps-dot .u-steps-item:first-child .u-steps-icon-dot {
left: 0; }
470
u-steps-vertical.u-steps-dot .u-steps-item-process .u-steps-icon-dot {
left: -2px; }

1	`/* FormGroup */`
2	`/* Navlayout */`
3	`.u-steps {`
4	`font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";`
5	`font-size: 14px;`
6	`font-variant: tabular-nums;`
7	`line-height: 1.5;`
8	`color: rgba(0, 0, 0, 0.65);`
9	`-webkit-box-sizing: border-box;`
10	`box-sizing: border-box;`
11	`margin: 0;`
12	`padding: 0;`
13	`list-style: none;`
14	`font-size: 0;`
15	`width: 100%;`
16	`display: -webkit-box;`
17	`display: -webkit-flex;`
18	`display: -ms-flexbox;`
19	`display: flex; }`
20	`.u-steps .u-steps-item {`
21	`position: relative;`
22	`display: inline-block;`
23	`vertical-align: top;`
24	`-webkit-box-flex: 1;`
25	`-webkit-flex: 1;`
26	`-ms-flex: 1;`
27	`flex: 1;`
28	`overflow: hidden; }`
29	`.u-steps .u-steps-item:last-child {`
30	`-webkit-box-flex: 0;`
31	`-webkit-flex: none;`
32	`-ms-flex: none;`
33	`flex: none; }`
34	`.u-steps .u-steps-item:last-child .u-steps-item-tail,`
35	`.u-steps .u-steps-item:last-child .u-steps-item-title:after {`
36	`display: none; }`
37	`.u-steps .uf {`
38	`font-size: 22px; }`
39	`.u-steps .uicon {`
40	`display: inline-block;`
41	`font-family: uf; }`
42
43	`.u-steps-item-icon,`
44	`.u-steps-item-content {`
45	`display: inline-block;`
46	`vertical-align: top; }`
47
48	`.u-steps-item-icon {`
49	`border: 1px solid rgba(0, 0, 0, 0.25);`
50	`width: 32px;`
51	`height: 32px;`
52	`line-height: 32px;`
53	`text-align: center;`
54	`border-radius: 32px;`
55	`font-size: 16px;`
56	`margin-right: 8px;`
57	`-webkit-transition: background-color 0.3s, border-color 0.3s;`
58	`transition: background-color 0.3s, border-color 0.3s;`
59	`font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }`
60
61	`.u-steps-item-icon > .u-steps-icon {`
62	`line-height: 1;`
63	`top: -1px;`
64	`color: rgb(245, 60, 50);`
65	`position: relative; }`
66
67	`.u-steps-item-tail {`
68	`position: absolute;`
69	`left: 0;`
70	`width: 100%;`
71	`top: 12px;`
72	`padding: 0 10px; }`
73
74	`.u-steps-item-tail:after {`
75	`content: '';`
76	`display: inline-block;`
77	`background: #e8e8e8;`
78	`height: 1px;`
79	`border-radius: 1px;`
80	`width: 100%;`
81	`-webkit-transition: background .3s;`
82	`transition: background .3s; }`
83
84	`.u-steps-item-title {`
85	`font-size: 16px;`
86	`color: rgba(0, 0, 0, 0.65);`
87	`display: inline-block;`
88	`padding-right: 16px;`
89	`position: relative;`
90	`line-height: 32px; }`
91
92	`.u-steps-item-title:after {`
93	`content: '';`
94	`height: 1px;`
95	`width: 9999px;`
96	`background: #e8e8e8;`
97	`display: block;`
98	`position: absolute;`
99	`top: 16px;`
100	`left: 100%; }`
101
102	`.u-steps-item-description {`
103	`font-size: 14px;`
104	`color: rgba(0, 0, 0, 0.45); }`
105
106	`.u-steps-item-wait .u-steps-item-icon {`
107	`border-color: rgba(0, 0, 0, 0.25);`
108	`background-color: #fff; }`
109
110	`.u-steps-item-wait .u-steps-item-icon > .u-steps-icon {`
111	`color: rgba(0, 0, 0, 0.25); }`
112
113	`.u-steps-item-wait .u-steps-item-icon > .u-steps-icon .u-steps-icon-dot {`
114	`background: rgba(0, 0, 0, 0.25); }`
115
116	`.u-steps-item-wait > .u-steps-item-content > .u-steps-item-title {`
117	`color: rgba(0, 0, 0, 0.45); }`
118
119	`.u-steps-item-wait > .u-steps-item-content > .u-steps-item-title:after {`
120	`background-color: #e8e8e8; }`
121
122	`.u-steps-item-wait > .u-steps-item-content > .u-steps-item-description {`
123	`color: rgba(0, 0, 0, 0.45); }`
124
125	`.u-steps-item-wait > .u-steps-item-tail:after {`
126	`background-color: #e8e8e8; }`
127
128	`.u-steps-item-process .u-steps-item-icon {`
129	`border-color: rgb(245, 60, 50);`
130	`background-color: #fff; }`
131
132	`.u-steps-item-process .u-steps-item-icon > .u-steps-icon {`
133	`color: rgb(245, 60, 50); }`
134
135	`.u-steps-item-process .u-steps-item-icon > .u-steps-icon .u-steps-icon-dot {`
136	`background: rgb(245, 60, 50); }`
137
138	`.u-steps-item-process > .u-steps-item-content > .u-steps-item-title {`
139	`color: rgba(0, 0, 0, 0.85); }`
140
141	`.u-steps-item-process > .u-steps-item-content > .u-steps-item-title:after {`
142	`background-color: #e8e8e8; }`
143
144	`.u-steps-item-process > .u-steps-item-content > .u-steps-item-description {`
145	`color: rgba(0, 0, 0, 0.65); }`
146
147	`.u-steps-item-process > .u-steps-item-tail:after {`
148	`background-color: #e8e8e8; }`
149
150	`.u-steps-item-process .u-steps-item-icon {`
151	`background: rgb(245, 60, 50); }`
152
153	`.u-steps-item-process .u-steps-item-icon > .u-steps-icon {`
154	`color: #fff; }`
155
156	`.u-steps-item-process .u-steps-item-title {`
157	`font-weight: 500; }`
158
159	`.u-steps-item-finish .u-steps-item-icon {`
160	`border-color: rgb(245, 60, 50);`
161	`background-color: #fff; }`
162
163	`.u-steps-item-finish .u-steps-item-icon .u-steps-icon {`
164	`color: rgb(245, 60, 50); }`
165
166	`.u-steps-item-finish .u-steps-item-icon .uicon:before {`
167	`content: "\e677"; }`
168
169	`.u-steps-item-finish .u-steps-item-icon > .u-steps-icon .u-steps-icon-dot {`
170	`background: rgb(245, 60, 50); }`
171
172	`.u-steps-item-finish > .u-steps-item-content > .u-steps-item-title {`
173	`color: rgba(0, 0, 0, 0.65); }`
174
175	`.u-steps-item-finish > .u-steps-item-content > .u-steps-item-title:after {`
176	`background-color: rgb(245, 60, 50); }`
177
178	`.u-steps-item-finish > .u-steps-item-content > .u-steps-item-description {`
179	`color: rgba(0, 0, 0, 0.45); }`
180
181	`.u-steps-item-finish > .u-steps-item-tail:after {`
182	`background-color: rgb(245, 60, 50); }`
183
184	`.u-steps-item-error .u-steps-item-icon {`
185	`border-color: #f5222d;`
186	`background-color: #fff; }`
187
188	`.u-steps-item-error .u-steps-item-icon .u-steps-icon {`
189	`color: #f5222d; }`
190
191	`.u-steps-item-error .u-steps-item-icon .uicon::before {`
192	`content: "\e76b"; }`
193
194	`.u-steps-item-error .u-steps-item-icon > .u-steps-icon .u-steps-icon-dot {`
195	`background: #f5222d; }`
196
197	`.u-steps-item-error > .u-steps-item-content > .u-steps-item-title {`
198	`color: #f5222d; }`
199
200	`.u-steps-item-error > .u-steps-item-content > .u-steps-item-title:after {`
201	`background-color: #e8e8e8; }`
202
203	`.u-steps-item-error > .u-steps-item-content > .u-steps-item-description {`
204	`color: #f5222d; }`
205
206	`.u-steps-item-error > .u-steps-item-tail:after {`
207	`background-color: #e8e8e8; }`
208
209	`.u-steps-item.u-steps-next-error .u-steps-item-title:after {`
210	`background: #f5222d; }`
211
212	`.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item {`
213	`margin-right: 16px;`
214	`white-space: nowrap; }`
215
216	`.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child {`
217	`margin-right: 0; }`
218
219	`.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child .u-steps-item-title {`
220	`padding-right: 0; }`
221
222	`.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item-tail {`
223	`display: none; }`
224
225	`.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item-description {`
226	`max-width: 140px;`
227	`white-space: normal; }`
228
229	`.u-steps-item-custom .u-steps-item-icon {`
230	`background: none;`
231	`border: 0;`
232	`width: auto;`
233	`height: auto; }`
234
235	`.u-steps-item-custom .u-steps-item-icon > .u-steps-icon {`
236	`font-size: 24px;`
237	`line-height: 32px;`
238	`top: 0;`
239	`left: 0.5px;`
240	`width: 32px;`
241	`height: 32px; }`
242
243	`.u-steps-item-custom.u-steps-item-process .u-steps-item-icon > .u-steps-icon {`
244	`color: rgb(245, 60, 50); }`
245
246	`.u-steps-small.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item {`
247	`margin-right: 12px; }`
248
249	`.u-steps-small.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child {`
250	`margin-right: 0; }`
251
252	`.u-steps-small .u-steps-item-icon {`
253	`width: 24px;`
254	`height: 24px;`
255	`line-height: 24px;`
256	`text-align: center;`
257	`border-radius: 24px;`
258	`font-size: 12px; }`
259
260	`.u-steps-small .u-steps-item-title {`
261	`font-size: 14px;`
262	`line-height: 24px;`
263	`padding-right: 12px; }`
264
265	`.u-steps-small .u-steps-item-title:after {`
266	`top: 12px; }`
267
268	`.u-steps-small .u-steps-item-description {`
269	`font-size: 14px;`
270	`color: rgba(0, 0, 0, 0.45); }`
271
272	`.u-steps-small .u-steps-item-tail {`
273	`top: 8px;`
274	`padding: 0 8px; }`
275
276	`.u-steps-small .u-steps-item-custom .u-steps-item-icon {`
277	`width: inherit;`
278	`height: inherit;`
279	`line-height: inherit;`
280	`border-radius: 0;`
281	`border: 0;`
282	`background: none; }`
283
284	`.u-steps-small .u-steps-item-custom .u-steps-item-icon > .u-steps-icon {`
285	`font-size: 24px;`
286	`line-height: 24px;`
287	`-webkit-transform: none;`
288	`-ms-transform: none;`
289	`transform: none; }`
290
291	`.u-steps-vertical {`
292	`display: block; }`
293
294	`.u-steps-vertical .u-steps-item {`
295	`display: block;`
296	`overflow: visible; }`
297
298	`.u-steps-vertical .u-steps-item-icon {`
299	`float: left;`
300	`margin-right: 16px; }`
301
302	`.u-steps-vertical .u-steps-item-content {`
303	`min-height: 48px;`
304	`overflow: hidden;`
305	`display: block; }`
306
307	`.u-steps-vertical .u-steps-item-title {`
308	`line-height: 32px; }`
309
310	`.u-steps-vertical .u-steps-item-description {`
311	`padding-bottom: 12px; }`
312
313	`.u-steps-vertical > .u-steps-item > .u-steps-item-tail {`
314	`position: absolute;`
315	`left: 16px;`
316	`top: 0;`
317	`height: 100%;`
318	`width: 1px;`
319	`padding: 38px 0 6px; }`
320
321	`.u-steps-vertical > .u-steps-item > .u-steps-item-tail:after {`
322	`height: 100%;`
323	`width: 1px; }`
324
325	`.u-steps-vertical > .u-steps-item:not(:last-child) > .u-steps-item-tail {`
326	`display: block; }`
327
328	`.u-steps-vertical > .u-steps-item > .u-steps-item-content > .u-steps-item-title:after {`
329	`display: none; }`
330
331	`.u-steps-vertical.u-steps-small .u-steps-item-tail {`
332	`position: absolute;`
333	`left: 12px;`
334	`top: 0;`
335	`padding: 30px 0 6px; }`
336
337	`.u-steps-vertical.u-steps-small .u-steps-item-title {`
338	`line-height: 24px; }`
339
340	`@media (max-width: 480px) {`
341	`.u-steps-horizontal.u-steps-label-horizontal {`
342	`display: block; }`
343	`.u-steps-horizontal.u-steps-label-horizontal .u-steps-item {`
344	`display: block;`
345	`overflow: visible; }`
346	`.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-icon {`
347	`float: left;`
348	`margin-right: 16px; }`
349	`.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-content {`
350	`min-height: 48px;`
351	`overflow: hidden;`
352	`display: block; }`
353	`.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-title {`
354	`line-height: 32px; }`
355	`.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-description {`
356	`padding-bottom: 12px; }`
357	`.u-steps-horizontal.u-steps-label-horizontal > .u-steps-item > .u-steps-item-tail {`
358	`position: absolute;`
359	`left: 16px;`
360	`top: 0;`
361	`height: 100%;`
362	`width: 1px;`
363	`padding: 38px 0 6px; }`
364	`.u-steps-horizontal.u-steps-label-horizontal > .u-steps-item > .u-steps-item-tail:after {`
365	`height: 100%;`
366	`width: 1px; }`
367	`.u-steps-horizontal.u-steps-label-horizontal > .u-steps-item:not(:last-child) > .u-steps-item-tail {`
368	`display: block; }`
369	`.u-steps-horizontal.u-steps-label-horizontal > .u-steps-item > .u-steps-item-content > .u-steps-item-title:after {`
370	`display: none; }`
371	`.u-steps-horizontal.u-steps-label-horizontal.u-steps-small .u-steps-item-tail {`
372	`position: absolute;`
373	`left: 12px;`
374	`top: 0;`
375	`padding: 30px 0 6px; }`
376	`.u-steps-horizontal.u-steps-label-horizontal.u-steps-small .u-steps-item-title {`
377	`line-height: 24px; } }`
378
379	`.u-steps-label-vertical .u-steps-item {`
380	`overflow: visible; }`
381
382	`.u-steps-label-vertical .u-steps-item-tail {`
383	`padding: 0 24px;`
384	`margin-left: 48px; }`
385
386	`.u-steps-label-vertical .u-steps-item-content {`
387	`display: block;`
388	`text-align: center;`
389	`margin-top: 8px;`
390	`width: 104px; }`
391
392	`.u-steps-label-vertical .u-steps-item-icon {`
393	`display: inline-block;`
394	`margin-left: 36px; }`
395
396	`.u-steps-label-vertical .u-steps-item-title {`
397	`padding-right: 0; }`
398
399	`.u-steps-label-vertical .u-steps-item-title:after {`
400	`display: none; }`
401
402	`.u-steps-dot .u-steps-item-title {`
403	`line-height: 1.5; }`
404
405	`.u-steps-dot .u-steps-item-tail {`
406	`width: 100%;`
407	`top: 2px;`
408	`margin: 0 0 0 70px;`
409	`padding: 0; }`
410
411	`.u-steps-dot .u-steps-item-tail:after {`
412	`height: 3px;`
413	`width: calc(100% - 20px);`
414	`margin-left: 12px; }`
415
416	`.u-steps-dot .u-steps-item:first-child .u-steps-icon-dot {`
417	`left: 2px; }`
418
419	`.u-steps-dot .u-steps-item-icon {`
420	`padding-right: 0;`
421	`width: 8px;`
422	`height: 8px;`
423	`line-height: 8px;`
424	`border: 0;`
425	`margin-left: 67px;`
426	`background: transparent; }`
427
428	`.u-steps-dot .u-steps-item-icon .u-steps-icon-dot {`
429	`float: left;`
430	`width: 100%;`
431	`height: 100%;`
432	`border-radius: 100px;`
433	`position: relative;`
434	`-webkit-transition: all .3s;`
435	`transition: all .3s;`
436	`/* expand hover area */ }`
437
438	`.u-steps-dot .u-steps-item-icon .u-steps-icon-dot:after {`
439	`content: "";`
440	`background: rgba(0, 0, 0, 0.001);`
441	`width: 60px;`
442	`height: 32px;`
443	`position: absolute;`
444	`top: -12px;`
445	`left: -26px; }`
446
447	`.u-steps-dot .u-steps-item-content {`
448	`width: 140px; }`
449
450	`.u-steps-dot .u-steps-item-process .u-steps-item-icon {`
451	`width: 10px;`
452	`height: 10px;`
453	`line-height: 10px; }`
454
455	`.u-steps-dot .u-steps-item-process .u-steps-item-icon .u-steps-icon-dot {`
456	`top: -1px; }`
457
458	`.u-steps-vertical.u-steps-dot .u-steps-item-icon {`
459	`margin-left: 0;`
460	`margin-top: 8px; }`
461
462	`.u-steps-vertical.u-steps-dot .u-steps-item-tail {`
463	`margin: 0;`
464	`left: -9px;`
465	`top: 2px;`
466	`padding: 22px 0 4px; }`
467
468	`.u-steps-vertical.u-steps-dot .u-steps-item:first-child .u-steps-icon-dot {`
469	`left: 0; }`
470
471	`.u-steps-vertical.u-steps-dot .u-steps-item-process .u-steps-icon-dot {`
472	`left: -2px; }`