semantic-ui-sass 0.8.1.0 → 0.8.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +8 -0
  3. data/README.md +1 -1
  4. data/app/assets/javascripts/semantic-ui/dimmer.js +4 -2
  5. data/app/assets/javascripts/semantic-ui/modal.js +11 -6
  6. data/app/assets/javascripts/semantic-ui/popup.js +0 -1
  7. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +6 -2
  8. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +56 -73
  9. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +89 -53
  10. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +221 -316
  11. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +43 -88
  12. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +83 -23
  13. data/app/assets/stylesheets/semantic-ui/elements/_basic.icon.scss +831 -187
  14. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +189 -191
  15. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +4 -22
  16. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +43 -20
  17. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +1529 -472
  18. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +145 -152
  19. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +36 -63
  20. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +120 -175
  21. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +13 -11
  22. data/app/assets/stylesheets/semantic-ui/elements/_progress.scss +33 -115
  23. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +46 -101
  24. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +35 -65
  25. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +127 -170
  26. data/app/assets/stylesheets/semantic-ui/modules/_chatroom.scss +287 -269
  27. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +42 -129
  28. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +16 -49
  29. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +54 -107
  30. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +29 -22
  31. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +112 -147
  32. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +226 -230
  33. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +20 -28
  34. data/app/assets/stylesheets/semantic-ui/modules/_reveal.scss +35 -78
  35. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +27 -44
  36. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +10 -41
  37. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +31 -60
  38. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +3 -3
  39. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +219 -451
  40. data/app/assets/stylesheets/semantic-ui/modules/_video.scss +75 -79
  41. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +21 -23
  42. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +20 -8
  43. data/app/assets/stylesheets/semantic-ui/views/_item.scss +86 -43
  44. data/app/assets/stylesheets/semantic-ui/views/_list.scss +80 -53
  45. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +6 -1
  46. data/lib/semantic/ui/sass/version.rb +2 -2
  47. data/semantic-ui-sass.gemspec +1 -1
  48. data/spec/dummy/config/application.rb +1 -1
  49. data/spec/spec_helper.rb +0 -1
  50. data/tasks/converter.rb +7 -0
  51. metadata +4 -7
  52. data/spec/dummy/config/database.yml +0 -25
@@ -9,7 +9,6 @@
9
9
  *
10
10
  */
11
11
 
12
-
13
12
  /*******************************
14
13
  Segment
15
14
  *******************************/
@@ -17,21 +16,15 @@
17
16
  .ui.segment {
18
17
  position: relative;
19
18
  background-color: #FFFFFF;
20
-
19
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
21
20
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
22
-
23
21
  margin: 1em 0em;
24
22
  padding: 1em;
25
-
26
- -webkit-border-radius: 5px 5px 5px 5px;
27
- -moz-border-radius: 5px 5px 5px 5px;
28
23
  border-radius: 5px 5px 5px 5px;
29
-
30
24
  -webkit-box-sizing: border-box;
31
25
  -moz-box-sizing: border-box;
32
26
  -ms-box-sizing: border-box;
33
27
  box-sizing: border-box;
34
-
35
28
  }
36
29
 
37
30
  .ui.segment:first-child {
@@ -54,23 +47,12 @@
54
47
  margin: 0em;
55
48
  padding-left: 0em;
56
49
  padding-right: 0em;
57
-
58
50
  background-color: transparent;
59
-
60
- -webkit-border-radius: 0px;
61
- -moz-border-radius: 0px;
62
51
  border-radius: 0px;
63
-
64
- -webkit-box-shadow:
65
- 0px 1px 0px rgba(0, 0, 0, 0.1)
66
- ;
67
- -moz-box-shadow:
68
- 0px 1px 0px rgba(0, 0, 0, 0.1)
69
- ;
70
- box-shadow:
71
- 0px 1px 0px rgba(0, 0, 0, 0.1)
72
- ;
52
+ -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
53
+ box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
73
54
  }
55
+
74
56
  .ui.vertical.segment:first-child {
75
57
  padding-top: 0em;
76
58
  }
@@ -79,23 +61,12 @@
79
61
  margin: 0em;
80
62
  padding-top: 0em;
81
63
  padding-bottom: 0em;
82
-
83
64
  background-color: transparent;
84
-
85
- -webkit-border-radius: 0px;
86
- -moz-border-radius: 0px;
87
65
  border-radius: 0px;
88
-
89
- -webkit-box-shadow:
90
- 1px 0px 0px rgba(0, 0, 0, 0.1)
91
- ;
92
- -moz-box-shadow:
93
- 1px 0px 0px rgba(0, 0, 0, 0.1)
94
- ;
95
- box-shadow:
96
- 1px 0px 0px rgba(0, 0, 0, 0.1)
97
- ;
66
+ -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
67
+ box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
98
68
  }
69
+
99
70
  .ui.horizontal.segment:first-child {
100
71
  padding-left: 0em;
101
72
  }
@@ -109,9 +80,11 @@
109
80
  }
110
81
 
111
82
  /* No padding on edge content */
83
+
112
84
  .ui.segment > :first-child {
113
85
  margin-top: 0em;
114
86
  }
87
+
115
88
  .ui.segment > :last-child {
116
89
  margin-bottom: 0em;
117
90
  }
@@ -126,28 +99,20 @@
126
99
 
127
100
  .ui.piled.segment {
128
101
  margin: 2em 0em;
129
- -webkit-box-shadow:
130
- 0px 0px 1px 1px rgba(0, 0, 0, 0.15)
131
- ;
132
- -moz-box-shadow:
133
- 0px 0px 1px 1px rgba(0, 0, 0, 0.15)
134
- ;
135
- -ms-box-shadow:
136
- 0px 0px 1px 1px rgba(0, 0, 0, 0.15)
137
- ;
138
- -o-box-shadow:
139
- 0px 0px 1px 1px rgba(0, 0, 0, 0.15)
140
- ;
141
- box-shadow:
142
- 0px 0px 1px 1px rgba(0, 0, 0, 0.15)
143
- ;
102
+ -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
103
+ -ms-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
104
+ -o-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
105
+ box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
144
106
  }
107
+
145
108
  .ui.piled.segment:first-child {
146
109
  margin-top: 0em;
147
110
  }
111
+
148
112
  .ui.piled.segment:last-child {
149
113
  margin-bottom: 0em;
150
114
  }
115
+
151
116
  .ui.piled.segment:after,
152
117
  .ui.piled.segment:before {
153
118
  background-color: #FFFFFF;
@@ -158,31 +123,21 @@
158
123
  left: -1px;
159
124
  position: absolute;
160
125
  width: 100%;
161
-
162
- -webkit-box-shadow:
163
- 0px 0px 1px 1px rgba(0, 0, 0, 0.1)
164
- ;
165
- -moz-box-shadow:
166
- 0px 0px 1px 1px rgba(0, 0, 0, 0.1)
167
- ;
168
- box-shadow:
169
- 0px 0px 1px 1px rgba(0, 0, 0, 0.1)
170
- ;
126
+ -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
127
+ box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
171
128
  }
129
+
172
130
  .ui.piled.segment:after {
173
131
  -webkit-transform: rotate(1.2deg);
174
- -moz-transform: rotate(1.2deg);
175
132
  -ms-transform: rotate(1.2deg);
176
- -o-transform: rotate(1.2deg);
177
133
  transform: rotate(1.2deg);
178
134
  top: 0;
179
135
  z-index: -1;
180
136
  }
137
+
181
138
  .ui.piled.segment:before {
182
139
  -webkit-transform: rotate(-1.2deg);
183
- -moz-transform: rotate(-1.2deg);
184
140
  -ms-transform: rotate(-1.2deg);
185
- -o-transform: rotate(-1.2deg);
186
141
  transform: rotate(-1.2deg);
187
142
  top: 0;
188
143
  z-index: -2;
@@ -195,25 +150,26 @@
195
150
  .ui.stacked.segment {
196
151
  padding-bottom: 1.7em;
197
152
  }
153
+
198
154
  .ui.stacked.segment:after,
199
155
  .ui.stacked.segment:before {
200
156
  content: '';
201
157
  position: absolute;
202
158
  bottom: -3px;
203
159
  left: 0%;
204
-
205
160
  border-top: 1px solid rgba(0, 0, 0, 0.1);
206
161
  background-color: rgba(0, 0, 0, 0.02);
207
-
208
162
  width: 100%;
209
163
  height: 5px;
210
164
  visibility: visible;
211
165
  }
166
+
212
167
  .ui.stacked.segment:before {
213
168
  bottom: 0px;
214
169
  }
215
170
 
216
171
  /* Inverted */
172
+
217
173
  .ui.stacked.inverted.segment:after,
218
174
  .ui.stacked.inverted.segment:before {
219
175
  background-color: rgba(255, 255, 255, 0.1);
@@ -226,11 +182,9 @@
226
182
 
227
183
  .ui.raised.segment {
228
184
  -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
229
- -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
230
185
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
231
186
  }
232
187
 
233
-
234
188
  /*******************************
235
189
  States
236
190
  *******************************/
@@ -240,12 +194,10 @@
240
194
  color: #DDDDDD;
241
195
  }
242
196
 
243
-
244
197
  /*******************************
245
198
  Variations
246
199
  *******************************/
247
200
 
248
-
249
201
  /*-------------------
250
202
  Basic
251
203
  --------------------*/
@@ -253,23 +205,19 @@
253
205
  .ui.basic.segment {
254
206
  position: relative;
255
207
  background-color: transparent;
256
-
257
208
  -webkit-box-shadow: none;
258
- -moz-box-shadow: none;
259
209
  box-shadow: none;
260
-
261
- -webkit-border-radius: 0px;
262
- -moz-border-radius: 0px;
263
210
  border-radius: 0px;
264
211
  }
212
+
265
213
  .ui.basic.segment:first-child {
266
214
  padding-top: 0em;
267
215
  }
216
+
268
217
  .ui.basic.segment:last-child {
269
218
  padding-bottom: 0em;
270
219
  }
271
220
 
272
-
273
221
  /*-------------------
274
222
  Fittted
275
223
  --------------------*/
@@ -278,7 +226,6 @@
278
226
  padding: 0em;
279
227
  }
280
228
 
281
-
282
229
  /*-------------------
283
230
  Colors
284
231
  --------------------*/
@@ -286,18 +233,23 @@
286
233
  .ui.blue.segment {
287
234
  border-top: 0.2em solid #6ECFF5;
288
235
  }
236
+
289
237
  .ui.green.segment {
290
238
  border-top: 0.2em solid #A1CF64;
291
239
  }
240
+
292
241
  .ui.red.segment {
293
242
  border-top: 0.2em solid #D95C5C;
294
243
  }
244
+
295
245
  .ui.orange.segment {
296
246
  border-top: 0.2em solid #F05940;
297
247
  }
248
+
298
249
  .ui.purple.segment {
299
250
  border-top: 0.2em solid #564F8A;
300
251
  }
252
+
301
253
  .ui.teal.segment {
302
254
  border-top: 0.2em solid #00B5AD;
303
255
  }
@@ -310,32 +262,37 @@
310
262
  background-color: #5C6166 !important;
311
263
  color: #FFFFFF !important;
312
264
  }
265
+
313
266
  .ui.inverted.blue.segment {
314
267
  background-color: #6ECFF5 !important;
315
268
  color: #FFFFFF !important;
316
269
  }
270
+
317
271
  .ui.inverted.green.segment {
318
272
  background-color: #A1CF64 !important;
319
273
  color: #FFFFFF !important;
320
274
  }
275
+
321
276
  .ui.inverted.red.segment {
322
277
  background-color: #D95C5C !important;
323
278
  color: #FFFFFF !important;
324
279
  }
280
+
325
281
  .ui.inverted.orange.segment {
326
282
  background-color: #F05940 !important;
327
283
  color: #FFFFFF !important;
328
284
  }
285
+
329
286
  .ui.inverted.purple.segment {
330
287
  background-color: #564F8A !important;
331
288
  color: #FFFFFF !important;
332
289
  }
290
+
333
291
  .ui.inverted.teal.segment {
334
292
  background-color: #00B5AD !important;
335
293
  color: #FFFFFF !important;
336
294
  }
337
295
 
338
-
339
296
  /*-------------------
340
297
  Aligned
341
298
  --------------------*/
@@ -343,9 +300,11 @@
343
300
  .ui.left.aligned.segment {
344
301
  text-align: left;
345
302
  }
303
+
346
304
  .ui.right.aligned.segment {
347
305
  text-align: right;
348
306
  }
307
+
349
308
  .ui.center.aligned.segment {
350
309
  text-align: center;
351
310
  }
@@ -358,11 +317,11 @@
358
317
  .ui.left.floated.segment {
359
318
  float: left;
360
319
  }
320
+
361
321
  .ui.right.floated.segment {
362
322
  float: right;
363
323
  }
364
324
 
365
-
366
325
  /*-------------------
367
326
  Inverted
368
327
  --------------------*/
@@ -370,9 +329,9 @@
370
329
  .ui.inverted.segment {
371
330
  border: none;
372
331
  -webkit-box-shadow: none;
373
- -moz-box-shadow: none;
374
332
  box-shadow: none;
375
333
  }
334
+
376
335
  .ui.inverted.segment,
377
336
  .ui.primary.inverted.segment {
378
337
  background-color: #222222;
@@ -402,22 +361,20 @@
402
361
  background-color: #555555;
403
362
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3)));
404
363
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
405
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
406
- background-image: -o-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
364
+ background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3)));
407
365
  background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
408
366
  color: #FAFAFA;
409
367
  }
368
+
410
369
  .ui.tertiary.inverted.segment {
411
370
  background-color: #555555;
412
371
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6)));
413
372
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
414
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
415
- background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
373
+ background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6)));
416
374
  background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
417
375
  color: #EEEEEE;
418
376
  }
419
377
 
420
-
421
378
  /*-------------------
422
379
  Attached
423
380
  --------------------*/
@@ -425,36 +382,24 @@
425
382
  .ui.segment.attached {
426
383
  top: -1px;
427
384
  bottom: -1px;
428
-
429
- -moz-border-radius: 0px;
430
- -webkit-border-radius: 0px;
431
385
  border-radius: 0px;
432
-
433
386
  margin: 0em;
434
-
435
- -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
436
387
  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
437
388
  box-shadow: 0px 0px 0px 1px #DDDDDD;
438
389
  }
390
+
439
391
  .ui.top.attached.segment {
440
392
  top: 0px;
441
393
  bottom: -1px;
442
-
443
394
  margin-top: 1em;
444
395
  margin-bottom: 0em;
445
-
446
- -moz-border-radius: 5px 5px 0px 0px;
447
- -webkit-border-radius: 5px 5px 0px 0px;
448
396
  border-radius: 5px 5px 0px 0px;
449
397
  }
398
+
450
399
  .ui.segment.bottom.attached {
451
400
  top: -1px;
452
401
  bottom: 0px;
453
-
454
402
  margin-top: 0em;
455
403
  margin-bottom: 1em;
456
-
457
- -moz-border-radius: 0px 0px 5px 5px;
458
- -webkit-border-radius: 0px 0px 5px 5px;
459
404
  border-radius: 0px 0px 5px 5px;
460
- }
405
+ }
@@ -18,16 +18,15 @@
18
18
  display: inline-block;
19
19
  position: relative;
20
20
  padding: 1em 2em 1em 3em;
21
-
22
21
  vertical-align: top;
23
22
  background-color: #FFFFFF;
24
23
  color: #888888;
25
-
26
24
  -webkit-box-sizing: border-box;
27
25
  -moz-box-sizing: border-box;
28
26
  -ms-box-sizing: border-box;
29
27
  box-sizing: border-box;
30
28
  }
29
+
31
30
  .ui.step:after,
32
31
  .ui.steps .step:after {
33
32
  position: absolute;
@@ -35,11 +34,9 @@
35
34
  content: '';
36
35
  top: 0em;
37
36
  right: -1.45em;
38
-
39
37
  border-bottom: 1.5em solid transparent;
40
38
  border-left: 1.5em solid #FFFFFF;
41
39
  border-top: 1.5em solid transparent;
42
-
43
40
  width: 0em;
44
41
  height: 0em;
45
42
  }
@@ -47,31 +44,12 @@
47
44
  .ui.step,
48
45
  .ui.steps .step,
49
46
  .ui.steps .step:after {
50
- -webkit-transition:
51
- opacity 0.1s ease,
52
- color 0.1s ease,
53
- box-shadow 0.1s ease
54
- ;
55
- -moz-transition:
56
- opacity 0.1s ease,
57
- color 0.1s ease,
58
- box-shadow 0.1s ease
59
- ;
60
- -o-transition:
61
- opacity 0.1s ease,
47
+ -webkit-transition: opacity 0.1s ease,
62
48
  color 0.1s ease,
63
- box-shadow 0.1s ease
64
- ;
65
- -ms-transition:
66
- opacity 0.1s ease,
49
+ -webkit-box-shadow 0.1s ease;
50
+ transition: opacity 0.1s ease,
67
51
  color 0.1s ease,
68
- box-shadow 0.1s ease
69
- ;
70
- transition:
71
- opacity 0.1s ease,
72
- color 0.1s ease,
73
- box-shadow 0.1s ease
74
- ;
52
+ box-shadow 0.1s ease;
75
53
  }
76
54
 
77
55
  /*******************************
@@ -82,58 +60,49 @@
82
60
  cursor: pointer;
83
61
  display: inline-block;
84
62
  font-size: 0em;
85
-
86
- -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
87
63
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
88
64
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
89
-
90
65
  line-height: 1;
91
-
92
66
  -webkit-box-sizing: border-box;
93
67
  -moz-box-sizing: border-box;
94
68
  -ms-box-sizing: border-box;
95
69
  box-sizing: border-box;
96
-
97
- -moz-border-radius: 0.3125rem;
98
- -webkit-border-radius: 0.3125rem;
99
70
  border-radius: 0.3125rem;
100
71
  }
101
72
 
102
73
  .ui.steps .step:first-child {
103
74
  padding-left: 1.35em;
104
- -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
105
- -moz-border-radius: 0.3125em 0em 0em 0.3125em;
106
75
  border-radius: 0.3125em 0em 0em 0.3125em;
107
76
  }
77
+
108
78
  .ui.steps .step:last-child {
109
- -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
110
- -moz-border-radius: 0em 0.3125em 0.3125em 0em;
111
79
  border-radius: 0em 0.3125em 0.3125em 0em;
112
80
  }
81
+
113
82
  .ui.steps .step:only-child {
114
- -webkit-border-radius: 0.3125em;
115
- -moz-border-radius: 0.3125em;
116
83
  border-radius: 0.3125em;
117
84
  }
118
85
 
119
86
  .ui.steps .step:last-child {
120
87
  margin-right: 0em;
121
88
  }
89
+
122
90
  .ui.steps .step:last-child:after {
123
91
  display: none;
124
92
  }
125
93
 
126
-
127
94
  /*******************************
128
95
  States
129
96
  *******************************/
130
97
 
131
98
  /* Hover */
99
+
132
100
  .ui.step:hover,
133
101
  .ui.step.hover {
134
102
  background-color: #F7F7F7;
135
103
  color: rgba(0, 0, 0, 0.8);
136
104
  }
105
+
137
106
  .ui.steps .step.hover:after,
138
107
  .ui.steps .step:hover:after,
139
108
  .ui.step:hover,
@@ -142,12 +111,14 @@
142
111
  }
143
112
 
144
113
  /* Hover */
114
+
145
115
  .ui.steps .step.down,
146
116
  .ui.steps .step:active,
147
117
  .ui.step.down,
148
- .ui.step:active {
118
+ .ui.step:active {
149
119
  background-color: #F0F0F0;
150
120
  }
121
+
151
122
  .ui.steps .step.down:after,
152
123
  .ui.steps .step:active:after,
153
124
  .ui.steps.down::after,
@@ -156,43 +127,40 @@
156
127
  }
157
128
 
158
129
  /* Active */
130
+
159
131
  .ui.steps .step.active,
160
132
  .ui.active.step {
161
133
  cursor: auto;
162
134
  background-color: #555555;
163
-
164
135
  color: #FFFFFF;
165
136
  font-weight: bold;
166
137
  }
138
+
167
139
  .ui.steps .step.active:after,
168
140
  .ui.active.steps:after {
169
141
  border-left-color: #555555;
170
142
  }
171
143
 
172
144
  /* Disabled */
145
+
173
146
  .ui.steps .disabled.step,
174
147
  .ui.disabled.step {
175
148
  cursor: auto;
176
149
  background-color: #FFFFFF;
177
150
  color: #CBCBCB;
178
151
  }
152
+
179
153
  .ui.disabled.step:after {
180
154
  border: none;
181
155
  background-color: #FFFFFF;
182
156
  top: 0.42em;
183
157
  right: -1em;
184
-
185
158
  width: 2.15em;
186
159
  height: 2.15em;
187
-
188
160
  -webkit-transform: rotate(-45deg);
189
- -moz-transform: rotate(-45deg);
190
- -o-transform: rotate(-45deg);
191
161
  -ms-transform: rotate(-45deg);
192
162
  transform: rotate(-45deg);
193
-
194
163
  -webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
195
- -moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
196
164
  box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
197
165
  }
198
166
 
@@ -201,43 +169,37 @@
201
169
  *******************************/
202
170
 
203
171
  /* Attached */
172
+
204
173
  .attached.ui.steps {
205
174
  margin: 0em;
206
- -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
207
- -moz-border-radius: 0.3125em 0.3125em 0em 0em;
208
175
  border-radius: 0.3125em 0.3125em 0em 0em;
209
176
  }
177
+
210
178
  .attached.ui.steps .step:first-child {
211
- -webkit-border-radius: 0.3125em 0em 0em 0em;
212
- -moz-border-radius: 0.3125em 0em 0em 0em;
213
179
  border-radius: 0.3125em 0em 0em 0em;
214
180
  }
181
+
215
182
  .attached.ui.steps .step:last-child {
216
- -webkit-border-radius: 0em 0.3125em 0em 0em;
217
- -moz-border-radius: 0em 0.3125em 0em 0em;
218
183
  border-radius: 0em 0.3125em 0em 0em;
219
184
  }
220
185
 
221
186
  /* Bottom Side */
187
+
222
188
  .bottom.attached.ui.steps {
223
189
  margin-top: -1px;
224
- -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
225
- -moz-border-radius: 0em 0em 0.3125em 0.3125em;
226
190
  border-radius: 0em 0em 0.3125em 0.3125em;
227
191
  }
192
+
228
193
  .bottom.attached.ui.steps .step:first-child {
229
- -webkit-border-radius: 0em 0em 0em 0.3125em;
230
- -moz-border-radius: 0em 0em 0em 0.3125em;
231
194
  border-radius: 0em 0em 0em 0.3125em;
232
195
  }
196
+
233
197
  .bottom.attached.ui.steps .step:last-child {
234
- -webkit-border-radius: 0em 0em 0.3125em 0em;
235
- -moz-border-radius: 0em 0em 0.3125em 0em;
236
198
  border-radius: 0em 0em 0.3125em 0em;
237
199
  }
238
200
 
239
-
240
201
  /* Evenly divided */
202
+
241
203
  .ui.one.steps,
242
204
  .ui.two.steps,
243
205
  .ui.three.steps,
@@ -248,33 +210,39 @@
248
210
  .ui.eight.steps {
249
211
  display: block;
250
212
  }
213
+
251
214
  .ui.one.steps > .step {
252
215
  width: 100%;
253
216
  }
217
+
254
218
  .ui.two.steps > .step {
255
219
  width: 50%;
256
220
  }
221
+
257
222
  .ui.three.steps > .step {
258
223
  width: 33.333%;
259
224
  }
225
+
260
226
  .ui.four.steps > .step {
261
227
  width: 25%;
262
228
  }
229
+
263
230
  .ui.five.steps > .step {
264
231
  width: 20%;
265
232
  }
233
+
266
234
  .ui.six.steps > .step {
267
235
  width: 16.666%;
268
236
  }
237
+
269
238
  .ui.seven.steps > .step {
270
239
  width: 14.285%;
271
240
  }
241
+
272
242
  .ui.eight.steps > .step {
273
243
  width: 12.500%;
274
244
  }
275
245
 
276
-
277
-
278
246
  /*******************************
279
247
  Sizes
280
248
  *******************************/
@@ -283,11 +251,13 @@
283
251
  .ui.small.steps .step {
284
252
  font-size: 0.8rem;
285
253
  }
254
+
286
255
  .ui.step,
287
256
  .ui.steps .step {
288
257
  font-size: 1rem;
289
258
  }
259
+
290
260
  .ui.large.step,
291
261
  .ui.large.steps .step {
292
262
  font-size: 1.25rem;
293
- }
263
+ }