semantic-ui-sass 1.12.3.0 → 2.0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/app/assets/javascripts/semantic-ui.js +1 -0
- data/app/assets/javascripts/semantic-ui/accordion.js +67 -53
- data/app/assets/javascripts/semantic-ui/api.js +395 -189
- data/app/assets/javascripts/semantic-ui/checkbox.js +322 -114
- data/app/assets/javascripts/semantic-ui/colorize.js +4 -2
- data/app/assets/javascripts/semantic-ui/dimmer.js +74 -50
- data/app/assets/javascripts/semantic-ui/dropdown.js +2046 -584
- data/app/assets/javascripts/semantic-ui/embed.js +662 -0
- data/app/assets/javascripts/semantic-ui/form.js +345 -163
- data/app/assets/javascripts/semantic-ui/modal.js +119 -90
- data/app/assets/javascripts/semantic-ui/nag.js +8 -9
- data/app/assets/javascripts/semantic-ui/popup.js +390 -228
- data/app/assets/javascripts/semantic-ui/progress.js +112 -103
- data/app/assets/javascripts/semantic-ui/rating.js +79 -55
- data/app/assets/javascripts/semantic-ui/search.js +305 -123
- data/app/assets/javascripts/semantic-ui/shape.js +94 -48
- data/app/assets/javascripts/semantic-ui/sidebar.js +84 -151
- data/app/assets/javascripts/semantic-ui/site.js +5 -5
- data/app/assets/javascripts/semantic-ui/state.js +4 -4
- data/app/assets/javascripts/semantic-ui/sticky.js +108 -35
- data/app/assets/javascripts/semantic-ui/tab.js +220 -125
- data/app/assets/javascripts/semantic-ui/transition.js +205 -171
- data/app/assets/javascripts/semantic-ui/visibility.js +220 -100
- data/app/assets/javascripts/semantic-ui/visit.js +6 -4
- data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +17 -16
- data/app/assets/stylesheets/semantic-ui/collections/_form.scss +223 -121
- data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +462 -448
- data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +949 -665
- data/app/assets/stylesheets/semantic-ui/collections/_message.scss +134 -92
- data/app/assets/stylesheets/semantic-ui/collections/_table.scss +270 -208
- data/app/assets/stylesheets/semantic-ui/elements/_all.scss +1 -0
- data/app/assets/stylesheets/semantic-ui/elements/_button.scss +1357 -521
- data/app/assets/stylesheets/semantic-ui/elements/_container.scss +125 -0
- data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +51 -31
- data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +3 -3
- data/app/assets/stylesheets/semantic-ui/elements/_header.scss +270 -144
- data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +241 -110
- data/app/assets/stylesheets/semantic-ui/elements/_image.scss +30 -16
- data/app/assets/stylesheets/semantic-ui/elements/_input.scss +88 -53
- data/app/assets/stylesheets/semantic-ui/elements/_label.scss +432 -281
- data/app/assets/stylesheets/semantic-ui/elements/_list.scss +172 -128
- data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +16 -14
- data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +15 -7
- data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +32 -13
- data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +329 -212
- data/app/assets/stylesheets/semantic-ui/elements/_step.scss +291 -99
- data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +2 -2
- data/app/assets/stylesheets/semantic-ui/globals/_site.scss +19 -18
- data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +17 -18
- data/app/assets/stylesheets/semantic-ui/modules/_all.scss +1 -0
- data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +265 -161
- data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +29 -15
- data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +441 -156
- data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +168 -0
- data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +163 -85
- data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +8 -8
- data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +88 -23
- data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +185 -129
- data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +75 -60
- data/app/assets/stylesheets/semantic-ui/modules/_search.scss +99 -52
- data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +11 -11
- data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +16 -12
- data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +4 -4
- data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +3 -3
- data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +31 -39
- data/app/assets/stylesheets/semantic-ui/views/_ad.scss +3 -3
- data/app/assets/stylesheets/semantic-ui/views/_all.scss +1 -0
- data/app/assets/stylesheets/semantic-ui/views/_card.scss +204 -162
- data/app/assets/stylesheets/semantic-ui/views/_comment.scss +6 -6
- data/app/assets/stylesheets/semantic-ui/views/_feed.scss +51 -26
- data/app/assets/stylesheets/semantic-ui/views/_item.scss +62 -36
- data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +265 -90
- data/lib/semantic/ui/sass/version.rb +2 -2
- data/semantic-ui-sass.gemspec +2 -2
- metadata +9 -6
@@ -1,81 +1,135 @@
|
|
1
1
|
/*!
|
2
|
-
* # Semantic UI
|
2
|
+
* # Semantic UI 2.0.4 - Step
|
3
3
|
* http://github.com/semantic-org/semantic-ui/
|
4
4
|
*
|
5
5
|
*
|
6
|
-
* Copyright
|
6
|
+
* Copyright 2015 Contributors
|
7
7
|
* Released under the MIT license
|
8
8
|
* http://opensource.org/licenses/MIT
|
9
9
|
*
|
10
10
|
*/
|
11
11
|
|
12
12
|
|
13
|
+
/*******************************
|
14
|
+
Plural
|
15
|
+
*******************************/
|
16
|
+
|
17
|
+
.ui.steps {
|
18
|
+
display: -webkit-inline-box;
|
19
|
+
display: -webkit-inline-flex;
|
20
|
+
display: -ms-inline-flexbox;
|
21
|
+
display: inline-flex;
|
22
|
+
-webkit-box-orient: horizontal;
|
23
|
+
-webkit-box-direction: normal;
|
24
|
+
-webkit-flex-direction: row;
|
25
|
+
-ms-flex-direction: row;
|
26
|
+
flex-direction: row;
|
27
|
+
-webkit-box-align: stretch;
|
28
|
+
-webkit-align-items: stretch;
|
29
|
+
-ms-flex-align: stretch;
|
30
|
+
align-items: stretch;
|
31
|
+
margin: 1em 0em;
|
32
|
+
background: '';
|
33
|
+
box-shadow: none;
|
34
|
+
line-height: 1.14285714em;
|
35
|
+
border-radius: 0.28571429rem;
|
36
|
+
border: 1px solid rgba(34, 36, 38, 0.15);
|
37
|
+
}
|
38
|
+
|
39
|
+
/* First Steps */
|
40
|
+
.ui.steps:first-child {
|
41
|
+
margin-top: 0em;
|
42
|
+
}
|
43
|
+
|
44
|
+
/* Last Steps */
|
45
|
+
.ui.steps:last-child {
|
46
|
+
margin-bottom: 0em;
|
47
|
+
}
|
48
|
+
|
49
|
+
|
13
50
|
/*******************************
|
14
51
|
Singular
|
15
52
|
*******************************/
|
16
53
|
|
17
54
|
.ui.steps .step {
|
18
55
|
position: relative;
|
19
|
-
display:
|
56
|
+
display: -webkit-box;
|
57
|
+
display: -webkit-flex;
|
58
|
+
display: -ms-flexbox;
|
59
|
+
display: flex;
|
60
|
+
-webkit-box-flex: 1;
|
61
|
+
-webkit-flex: 1 0 auto;
|
62
|
+
-ms-flex: 1 0 auto;
|
63
|
+
flex: 1 0 auto;
|
64
|
+
-webkit-flex-wrap: wrap;
|
65
|
+
-ms-flex-wrap: wrap;
|
66
|
+
flex-wrap: wrap;
|
67
|
+
-webkit-box-orient: horizontal;
|
68
|
+
-webkit-box-direction: normal;
|
69
|
+
-webkit-flex-direction: row;
|
70
|
+
-ms-flex-direction: row;
|
71
|
+
flex-direction: row;
|
20
72
|
vertical-align: middle;
|
73
|
+
-webkit-box-align: center;
|
74
|
+
-webkit-align-items: center;
|
75
|
+
-ms-flex-align: center;
|
76
|
+
align-items: center;
|
77
|
+
-webkit-box-pack: center;
|
78
|
+
-webkit-justify-content: center;
|
79
|
+
-ms-flex-pack: center;
|
80
|
+
justify-content: center;
|
21
81
|
margin: 0em 0em;
|
22
|
-
padding:
|
82
|
+
padding: 1.14285714em 2em;
|
23
83
|
background: #ffffff;
|
24
|
-
color: rgba(0, 0, 0, 0.
|
25
|
-
box-shadow:
|
84
|
+
color: rgba(0, 0, 0, 0.87);
|
85
|
+
box-shadow: none;
|
26
86
|
border-radius: 0em;
|
87
|
+
border: none;
|
88
|
+
border-right: 1px solid rgba(34, 36, 38, 0.15);
|
89
|
+
-webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
|
90
|
+
transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
|
27
91
|
}
|
92
|
+
|
93
|
+
/* Arrow */
|
28
94
|
.ui.steps .step:after {
|
95
|
+
display: none;
|
29
96
|
position: absolute;
|
30
97
|
z-index: 2;
|
31
98
|
content: '';
|
32
99
|
top: 50%;
|
33
|
-
right:
|
100
|
+
right: 0%;
|
34
101
|
border: medium none;
|
35
102
|
background-color: #ffffff;
|
36
|
-
width: 1.
|
37
|
-
height: 1.
|
38
|
-
border-
|
39
|
-
border-
|
103
|
+
width: 1.14285714em;
|
104
|
+
height: 1.14285714em;
|
105
|
+
border-style: solid;
|
106
|
+
border-color: rgba(34, 36, 38, 0.15);
|
107
|
+
border-width: 0px 1px 1px 0px;
|
108
|
+
-webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
|
109
|
+
transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
|
40
110
|
-webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
|
41
111
|
-ms-transform: translateY(-50%) translateX(50%) rotate(-45deg);
|
42
112
|
transform: translateY(-50%) translateX(50%) rotate(-45deg);
|
43
113
|
}
|
44
|
-
.ui.steps .step,
|
45
|
-
.ui.steps .step:after {
|
46
|
-
-webkit-transition: background-color 0.2s ease, opacity 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
47
|
-
transition: background-color 0.2s ease, opacity 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
48
|
-
}
|
49
|
-
|
50
|
-
|
51
|
-
/*******************************
|
52
|
-
Plural
|
53
|
-
*******************************/
|
54
114
|
|
55
|
-
|
56
|
-
display: table;
|
57
|
-
table-layout: fixed;
|
58
|
-
background: '';
|
59
|
-
box-shadow: '';
|
60
|
-
line-height: 1.142rem;
|
61
|
-
box-sizing: border-box;
|
62
|
-
border-radius: 0.2857rem;
|
63
|
-
}
|
115
|
+
/* First Step */
|
64
116
|
.ui.steps .step:first-child {
|
65
|
-
padding-left:
|
66
|
-
border-radius: 0.
|
67
|
-
}
|
68
|
-
.ui.steps .step:last-child {
|
69
|
-
border-radius: 0em 0.2857rem 0.2857rem 0em;
|
117
|
+
padding-left: 2em;
|
118
|
+
border-radius: 0.28571429rem 0em 0em 0.28571429rem;
|
70
119
|
}
|
120
|
+
|
121
|
+
/* Only Step */
|
71
122
|
.ui.steps .step:only-child {
|
72
|
-
border-radius: 0.
|
123
|
+
border-radius: 0.28571429rem;
|
73
124
|
}
|
125
|
+
|
126
|
+
/* Last Step */
|
74
127
|
.ui.steps .step:last-child {
|
75
|
-
|
128
|
+
border-radius: 0em 0.28571429rem 0.28571429rem 0em;
|
76
129
|
}
|
77
|
-
.ui.steps .step:last-child
|
78
|
-
|
130
|
+
.ui.steps .step:last-child {
|
131
|
+
border-right: none;
|
132
|
+
margin-right: 0em;
|
79
133
|
}
|
80
134
|
|
81
135
|
|
@@ -87,30 +141,53 @@
|
|
87
141
|
/* Title */
|
88
142
|
.ui.steps .step .title {
|
89
143
|
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
90
|
-
font-size: 1.
|
144
|
+
font-size: 1.14285714em;
|
91
145
|
font-weight: bold;
|
92
146
|
}
|
147
|
+
.ui.steps .step > .title {
|
148
|
+
width: 100%;
|
149
|
+
}
|
93
150
|
|
94
151
|
/* Description */
|
95
152
|
.ui.steps .step .description {
|
96
153
|
font-weight: normal;
|
97
|
-
font-size: 0.
|
98
|
-
color: rgba(0, 0, 0, 0.
|
154
|
+
font-size: 0.92857143em;
|
155
|
+
color: rgba(0, 0, 0, 0.87);
|
156
|
+
}
|
157
|
+
.ui.steps .step > .description {
|
158
|
+
width: 100%;
|
99
159
|
}
|
100
160
|
.ui.steps .step .title ~ .description {
|
101
|
-
margin-top: 0.
|
161
|
+
margin-top: 0.25em;
|
102
162
|
}
|
103
163
|
|
104
164
|
/* Icon */
|
165
|
+
.ui.steps .step > .icon {
|
166
|
+
line-height: 1;
|
167
|
+
font-size: 2.5em;
|
168
|
+
margin: 0em 1rem 0em 0em;
|
169
|
+
}
|
105
170
|
.ui.steps .step > .icon,
|
106
171
|
.ui.steps .step > .icon ~ .content {
|
107
|
-
display:
|
108
|
-
|
172
|
+
display: block;
|
173
|
+
-webkit-box-flex: 0;
|
174
|
+
-webkit-flex: 0 1 auto;
|
175
|
+
-ms-flex: 0 1 auto;
|
176
|
+
flex: 0 1 auto;
|
177
|
+
-webkit-align-self: middle;
|
178
|
+
-ms-flex-item-align: middle;
|
179
|
+
align-self: middle;
|
109
180
|
}
|
110
|
-
.ui.steps .step > .icon {
|
111
|
-
|
112
|
-
|
113
|
-
|
181
|
+
.ui.steps .step > .icon ~ .content {
|
182
|
+
-webkit-box-flex: 1 0 auto;
|
183
|
+
-webkit-flex-grow: 1 0 auto;
|
184
|
+
-ms-flex-positive: 1 0 auto;
|
185
|
+
flex-grow: 1 0 auto;
|
186
|
+
}
|
187
|
+
|
188
|
+
/* Horizontal Icon */
|
189
|
+
.ui.steps:not(.vertical) .step > .icon {
|
190
|
+
width: auto;
|
114
191
|
}
|
115
192
|
|
116
193
|
/* Link */
|
@@ -133,18 +210,24 @@
|
|
133
210
|
counter-reset: ordered;
|
134
211
|
}
|
135
212
|
.ui.ordered.steps .step:before {
|
136
|
-
display:
|
213
|
+
display: block;
|
137
214
|
position: static;
|
138
215
|
text-align: center;
|
139
216
|
content: counters(ordered, ".");
|
140
|
-
|
141
|
-
|
142
|
-
|
217
|
+
-webkit-align-self: middle;
|
218
|
+
-ms-flex-item-align: middle;
|
219
|
+
align-self: middle;
|
220
|
+
margin-right: 1rem;
|
221
|
+
font-size: 2.5em;
|
143
222
|
counter-increment: ordered;
|
223
|
+
font-family: inherit;
|
224
|
+
font-weight: bold;
|
144
225
|
}
|
145
226
|
.ui.ordered.steps .step > * {
|
146
|
-
display:
|
147
|
-
|
227
|
+
display: block;
|
228
|
+
-webkit-align-self: middle;
|
229
|
+
-ms-flex-item-align: middle;
|
230
|
+
align-self: middle;
|
148
231
|
}
|
149
232
|
|
150
233
|
/*--------------
|
@@ -152,31 +235,57 @@
|
|
152
235
|
---------------*/
|
153
236
|
|
154
237
|
.ui.vertical.steps {
|
155
|
-
display: inline-
|
238
|
+
display: -webkit-inline-box;
|
239
|
+
display: -webkit-inline-flex;
|
240
|
+
display: -ms-inline-flexbox;
|
241
|
+
display: inline-flex;
|
242
|
+
-webkit-box-orient: vertical;
|
243
|
+
-webkit-box-direction: normal;
|
244
|
+
-webkit-flex-direction: column;
|
245
|
+
-ms-flex-direction: column;
|
246
|
+
flex-direction: column;
|
156
247
|
overflow: visible;
|
157
248
|
}
|
158
249
|
.ui.vertical.steps .step {
|
159
|
-
|
250
|
+
-webkit-box-pack: start;
|
251
|
+
-webkit-justify-content: flex-start;
|
252
|
+
-ms-flex-pack: start;
|
253
|
+
justify-content: flex-start;
|
160
254
|
border-radius: 0em;
|
161
|
-
padding:
|
255
|
+
padding: 1.14285714em 2em;
|
256
|
+
border-right: none;
|
257
|
+
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
|
162
258
|
}
|
163
259
|
.ui.vertical.steps .step:first-child {
|
164
|
-
padding:
|
165
|
-
border-radius: 0.
|
260
|
+
padding: 1.14285714em 2em;
|
261
|
+
border-radius: 0.28571429rem 0.28571429rem 0em 0em;
|
166
262
|
}
|
167
263
|
.ui.vertical.steps .step:last-child {
|
168
|
-
border-
|
264
|
+
border-bottom: none;
|
265
|
+
border-radius: 0em 0em 0.28571429rem 0.28571429rem;
|
169
266
|
}
|
170
267
|
|
171
268
|
/* Arrow */
|
172
269
|
.ui.vertical.steps .step:after {
|
173
270
|
display: none;
|
174
271
|
}
|
175
|
-
|
176
|
-
|
272
|
+
.ui.vertical.steps .step:after {
|
273
|
+
top: 50%;
|
274
|
+
right: 0%;
|
275
|
+
border-width: 0px 1px 1px 0px;
|
276
|
+
}
|
277
|
+
.ui.vertical.steps .step:after {
|
278
|
+
display: none;
|
279
|
+
}
|
177
280
|
.ui.vertical.steps .active.step:after {
|
178
281
|
display: block;
|
179
282
|
}
|
283
|
+
.ui.vertical.steps .step:last-child:after {
|
284
|
+
display: none;
|
285
|
+
}
|
286
|
+
.ui.vertical.steps .active.step:last-child:after {
|
287
|
+
display: block;
|
288
|
+
}
|
180
289
|
|
181
290
|
/*---------------
|
182
291
|
Responsive
|
@@ -186,24 +295,49 @@
|
|
186
295
|
/* Mobile (Default) */
|
187
296
|
@media only screen and (max-width: 767px) {
|
188
297
|
.ui.steps {
|
298
|
+
display: -webkit-inline-box;
|
299
|
+
display: -webkit-inline-flex;
|
300
|
+
display: -ms-inline-flexbox;
|
301
|
+
display: inline-flex;
|
189
302
|
overflow: visible;
|
303
|
+
-webkit-box-orient: vertical;
|
304
|
+
-webkit-box-direction: normal;
|
305
|
+
-webkit-flex-direction: column;
|
306
|
+
-ms-flex-direction: column;
|
307
|
+
flex-direction: column;
|
190
308
|
}
|
191
309
|
.ui.steps .step {
|
192
|
-
|
310
|
+
width: 100% !important;
|
311
|
+
-webkit-box-orient: vertical;
|
312
|
+
-webkit-box-direction: normal;
|
313
|
+
-webkit-flex-direction: column;
|
314
|
+
-ms-flex-direction: column;
|
315
|
+
flex-direction: column;
|
193
316
|
border-radius: 0em;
|
194
|
-
padding:
|
317
|
+
padding: 1.14285714em 2em;
|
195
318
|
}
|
196
319
|
.ui.steps .step:first-child {
|
197
|
-
padding:
|
198
|
-
border-radius: 0.
|
320
|
+
padding: 1.14285714em 2em;
|
321
|
+
border-radius: 0.28571429rem 0.28571429rem 0em 0em;
|
199
322
|
}
|
200
323
|
.ui.steps .step:last-child {
|
201
|
-
border-radius: 0em 0em 0.
|
324
|
+
border-radius: 0em 0em 0.28571429rem 0.28571429rem;
|
202
325
|
}
|
203
326
|
|
204
327
|
/* Arrow */
|
205
328
|
.ui.steps .step:after {
|
206
|
-
display: none;
|
329
|
+
display: none !important;
|
330
|
+
}
|
331
|
+
|
332
|
+
/* Content */
|
333
|
+
.ui.steps .step .content {
|
334
|
+
text-align: center;
|
335
|
+
}
|
336
|
+
|
337
|
+
/* Icon */
|
338
|
+
.ui.steps .step > .icon,
|
339
|
+
.ui.ordered.steps .step:before {
|
340
|
+
margin: 0em 0em 1rem 0em;
|
207
341
|
}
|
208
342
|
}
|
209
343
|
|
@@ -218,7 +352,7 @@
|
|
218
352
|
.ui.steps .link.step:hover,
|
219
353
|
.ui.steps a.step:hover::after,
|
220
354
|
.ui.steps a.step:hover {
|
221
|
-
background: #
|
355
|
+
background: #f9fafb;
|
222
356
|
color: rgba(0, 0, 0, 0.8);
|
223
357
|
}
|
224
358
|
|
@@ -227,40 +361,54 @@
|
|
227
361
|
.ui.steps .link.step:active,
|
228
362
|
.ui.steps a.step:active::after,
|
229
363
|
.ui.steps a.step:active {
|
230
|
-
background: #
|
231
|
-
color: rgba(0, 0, 0, 0.
|
364
|
+
background: #f3f4f5;
|
365
|
+
color: rgba(0, 0, 0, 0.9);
|
232
366
|
}
|
233
367
|
|
234
368
|
/* Active */
|
235
369
|
.ui.steps .step.active {
|
236
370
|
cursor: auto;
|
237
|
-
background: #
|
371
|
+
background: #f3f4f5;
|
238
372
|
}
|
239
373
|
.ui.steps .step.active:after {
|
240
|
-
background: #
|
374
|
+
background: #f3f4f5;
|
241
375
|
}
|
242
376
|
.ui.steps .step.active .title {
|
243
|
-
color: #
|
377
|
+
color: #4183c4;
|
244
378
|
}
|
245
379
|
.ui.ordered.steps .step.active:before,
|
246
380
|
.ui.steps .active.step .icon {
|
247
381
|
color: rgba(0, 0, 0, 0.85);
|
248
382
|
}
|
249
383
|
|
384
|
+
/* Active Arrow */
|
385
|
+
.ui.steps .step:after {
|
386
|
+
display: block;
|
387
|
+
}
|
388
|
+
.ui.steps .active.step:after {
|
389
|
+
display: block;
|
390
|
+
}
|
391
|
+
.ui.steps .step:last-child:after {
|
392
|
+
display: none;
|
393
|
+
}
|
394
|
+
.ui.steps .active.step:last-child:after {
|
395
|
+
display: none;
|
396
|
+
}
|
397
|
+
|
250
398
|
/* Active Hover */
|
251
399
|
.ui.steps .link.active.step:hover::after,
|
252
400
|
.ui.steps .link.active.step:hover,
|
253
401
|
.ui.steps a.active.step:hover::after,
|
254
402
|
.ui.steps a.active.step:hover {
|
255
403
|
cursor: pointer;
|
256
|
-
background: #
|
257
|
-
color: rgba(0, 0, 0, 0.
|
404
|
+
background: #dcddde;
|
405
|
+
color: rgba(0, 0, 0, 0.87);
|
258
406
|
}
|
259
407
|
|
260
408
|
/* Completed */
|
261
409
|
.ui.steps .step.completed > .icon:before,
|
262
410
|
.ui.ordered.steps .step.completed:before {
|
263
|
-
color: #
|
411
|
+
color: #21ba45;
|
264
412
|
}
|
265
413
|
|
266
414
|
/* Disabled */
|
@@ -290,26 +438,52 @@
|
|
290
438
|
|
291
439
|
|
292
440
|
/* Tablet Or Below */
|
293
|
-
@media only screen and (
|
441
|
+
@media only screen and (max-width: 992px) {
|
294
442
|
.ui[class*="tablet stackable"].steps {
|
443
|
+
display: -webkit-inline-box;
|
444
|
+
display: -webkit-inline-flex;
|
445
|
+
display: -ms-inline-flexbox;
|
446
|
+
display: inline-flex;
|
295
447
|
overflow: visible;
|
448
|
+
-webkit-box-orient: vertical;
|
449
|
+
-webkit-box-direction: normal;
|
450
|
+
-webkit-flex-direction: column;
|
451
|
+
-ms-flex-direction: column;
|
452
|
+
flex-direction: column;
|
296
453
|
}
|
454
|
+
|
455
|
+
/* Steps */
|
297
456
|
.ui[class*="tablet stackable"].steps .step {
|
298
|
-
|
457
|
+
-webkit-box-orient: vertical;
|
458
|
+
-webkit-box-direction: normal;
|
459
|
+
-webkit-flex-direction: column;
|
460
|
+
-ms-flex-direction: column;
|
461
|
+
flex-direction: column;
|
299
462
|
border-radius: 0em;
|
300
|
-
padding:
|
463
|
+
padding: 1.14285714em 2em;
|
301
464
|
}
|
302
465
|
.ui[class*="tablet stackable"].steps .step:first-child {
|
303
|
-
padding:
|
304
|
-
border-radius: 0.
|
466
|
+
padding: 1.14285714em 2em;
|
467
|
+
border-radius: 0.28571429rem 0.28571429rem 0em 0em;
|
305
468
|
}
|
306
469
|
.ui[class*="tablet stackable"].steps .step:last-child {
|
307
|
-
border-radius: 0em 0em 0.
|
470
|
+
border-radius: 0em 0em 0.28571429rem 0.28571429rem;
|
308
471
|
}
|
309
472
|
|
310
473
|
/* Arrow */
|
311
474
|
.ui[class*="tablet stackable"].steps .step:after {
|
312
|
-
display: none;
|
475
|
+
display: none !important;
|
476
|
+
}
|
477
|
+
|
478
|
+
/* Content */
|
479
|
+
.ui[class*="tablet stackable"].steps .step .content {
|
480
|
+
text-align: center;
|
481
|
+
}
|
482
|
+
|
483
|
+
/* Icon */
|
484
|
+
.ui[class*="tablet stackable"].steps .step > .icon,
|
485
|
+
.ui[class*="tablet stackable"].ordered.steps .step:before {
|
486
|
+
margin: 0em 0em 1rem 0em;
|
313
487
|
}
|
314
488
|
}
|
315
489
|
|
@@ -320,6 +494,10 @@
|
|
320
494
|
|
321
495
|
/* Fluid */
|
322
496
|
.ui.fluid.steps {
|
497
|
+
display: -webkit-box;
|
498
|
+
display: -webkit-flex;
|
499
|
+
display: -ms-flexbox;
|
500
|
+
display: flex;
|
323
501
|
width: 100%;
|
324
502
|
}
|
325
503
|
|
@@ -329,27 +507,29 @@
|
|
329
507
|
|
330
508
|
|
331
509
|
/* Top */
|
332
|
-
.attached.
|
333
|
-
|
334
|
-
|
510
|
+
.ui.attached.steps {
|
511
|
+
width: calc(100% + 2px ) !important;
|
512
|
+
margin: 0em -1px -1px;
|
513
|
+
max-width: calc(100% + 2px );
|
514
|
+
border-radius: 0.28571429rem 0.28571429rem 0em 0em;
|
335
515
|
}
|
336
|
-
.attached.
|
337
|
-
border-radius: 0.
|
516
|
+
.ui.attached.steps .step:first-child {
|
517
|
+
border-radius: 0.28571429rem 0em 0em 0em;
|
338
518
|
}
|
339
|
-
.attached.
|
340
|
-
border-radius: 0em 0.
|
519
|
+
.ui.attached.steps .step:last-child {
|
520
|
+
border-radius: 0em 0.28571429rem 0em 0em;
|
341
521
|
}
|
342
522
|
|
343
523
|
/* Bottom */
|
344
|
-
.bottom.attached.
|
345
|
-
margin: -1px
|
346
|
-
border-radius: 0em 0em 0.
|
524
|
+
.ui.bottom.attached.steps {
|
525
|
+
margin: -1px -1px 0em;
|
526
|
+
border-radius: 0em 0em 0.28571429rem 0.28571429rem;
|
347
527
|
}
|
348
|
-
.bottom.attached.
|
349
|
-
border-radius: 0em 0em 0em 0.
|
528
|
+
.ui.bottom.attached.steps .step:first-child {
|
529
|
+
border-radius: 0em 0em 0em 0.28571429rem;
|
350
530
|
}
|
351
|
-
.bottom.attached.
|
352
|
-
border-radius: 0em 0em 0.
|
531
|
+
.ui.bottom.attached.steps .step:last-child {
|
532
|
+
border-radius: 0em 0em 0.28571429rem 0em;
|
353
533
|
}
|
354
534
|
|
355
535
|
/*-------------------
|
@@ -366,6 +546,18 @@
|
|
366
546
|
.ui.eight.steps {
|
367
547
|
width: 100%;
|
368
548
|
}
|
549
|
+
.ui.one.steps > .step,
|
550
|
+
.ui.two.steps > .step,
|
551
|
+
.ui.three.steps > .step,
|
552
|
+
.ui.four.steps > .step,
|
553
|
+
.ui.five.steps > .step,
|
554
|
+
.ui.six.steps > .step,
|
555
|
+
.ui.seven.steps > .step,
|
556
|
+
.ui.eight.steps > .step {
|
557
|
+
-webkit-flex-wrap: nowrap;
|
558
|
+
-ms-flex-wrap: nowrap;
|
559
|
+
flex-wrap: nowrap;
|
560
|
+
}
|
369
561
|
.ui.one.steps > .step {
|
370
562
|
width: 100%;
|
371
563
|
}
|