fomantic-ui-sass 2.7.2 → 2.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -7
  3. data/app/assets/javascripts/semantic-ui/accordion.js +0 -6
  4. data/app/assets/javascripts/semantic-ui/api.js +1 -1
  5. data/app/assets/javascripts/semantic-ui/calendar.js +40 -12
  6. data/app/assets/javascripts/semantic-ui/checkbox.js +9 -0
  7. data/app/assets/javascripts/semantic-ui/dimmer.js +2 -4
  8. data/app/assets/javascripts/semantic-ui/dropdown.js +9 -11
  9. data/app/assets/javascripts/semantic-ui/embed.js +0 -1
  10. data/app/assets/javascripts/semantic-ui/form.js +10 -16
  11. data/app/assets/javascripts/semantic-ui/modal.js +28 -17
  12. data/app/assets/javascripts/semantic-ui/nag.js +1 -20
  13. data/app/assets/javascripts/semantic-ui/popup.js +0 -4
  14. data/app/assets/javascripts/semantic-ui/progress.js +161 -102
  15. data/app/assets/javascripts/semantic-ui/rating.js +0 -1
  16. data/app/assets/javascripts/semantic-ui/search.js +2 -7
  17. data/app/assets/javascripts/semantic-ui/shape.js +68 -145
  18. data/app/assets/javascripts/semantic-ui/sidebar.js +14 -12
  19. data/app/assets/javascripts/semantic-ui/site.js +0 -1
  20. data/app/assets/javascripts/semantic-ui/state.js +0 -1
  21. data/app/assets/javascripts/semantic-ui/sticky.js +1 -7
  22. data/app/assets/javascripts/semantic-ui/tab.js +17 -4
  23. data/app/assets/javascripts/semantic-ui/transition.js +7 -23
  24. data/app/assets/javascripts/semantic-ui/visibility.js +1 -3
  25. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +4 -3
  26. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +16 -16
  27. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +8 -4
  28. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +12 -3
  29. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +3 -11
  30. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +3 -3
  31. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +1 -1
  32. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +3 -0
  33. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +7 -5
  34. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +5 -5
  35. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +21 -4
  36. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +0 -1
  37. data/app/assets/stylesheets/semantic-ui/modules/_calendar.scss +4 -0
  38. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +6 -0
  39. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +1 -1
  40. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +72 -3
  41. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +60 -41
  42. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +1 -1
  43. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +73 -35
  44. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +1 -1
  45. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +5 -0
  46. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +4 -1
  47. data/app/assets/stylesheets/semantic-ui/modules/_slider.scss +4 -4
  48. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +1 -1
  49. data/app/assets/stylesheets/semantic-ui/views/_card.scss +189 -3
  50. data/app/assets/stylesheets/semantic-ui/views/_item.scss +3 -3
  51. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +1 -1
  52. data/lib/fomantic/ui/sass/version.rb +2 -2
  53. metadata +3 -3
@@ -154,7 +154,7 @@
154
154
  }
155
155
 
156
156
  /* Responsive */
157
- @media only screen and (max-width: 767px) {
157
+ @media only screen and (max-width: 767.99px) {
158
158
  .ui.table:not(.unstackable) {
159
159
  width: 100%;
160
160
  padding: 0;
@@ -386,7 +386,7 @@
386
386
  Stackable
387
387
  ---------------*/
388
388
 
389
- @media only screen and (max-width: 991px) {
389
+ @media only screen and (max-width: 991.99px) {
390
390
  .ui[class*="tablet stackable"].table,
391
391
  .ui[class*="tablet stackable"].table tbody,
392
392
  .ui[class*="tablet stackable"].table tr,
@@ -1138,7 +1138,7 @@
1138
1138
  color: rgba(255, 255, 255, 0.9);
1139
1139
  border: none;
1140
1140
  }
1141
- .ui.inverted.table th {
1141
+ .ui.ui.inverted.table th {
1142
1142
  background-color: rgba(0, 0, 0, 0.15);
1143
1143
  border-color: rgba(255, 255, 255, 0.1);
1144
1144
  color: rgba(255, 255, 255, 0.9);
@@ -1153,6 +1153,12 @@
1153
1153
  pointer-events: none;
1154
1154
  color: rgba(225, 225, 225, 0.3);
1155
1155
  }
1156
+ .ui.inverted.table tr td.disabled:not([class="disabled"]),
1157
+ .ui.inverted.table tr.disabled:not([class="disabled"]) td,
1158
+ .ui.inverted.table tr.disabled td[class]:not(.disabled),
1159
+ .ui.inverted.table tr:hover td.disabled:not([class="disabled"]) {
1160
+ color: rgba(40, 40, 40, 0.3);
1161
+ }
1156
1162
 
1157
1163
  /* Definition */
1158
1164
  .ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
@@ -1229,6 +1235,9 @@
1229
1235
  .ui.celled.table tr td {
1230
1236
  border-left: 1px solid rgba(34, 36, 38, 0.1);
1231
1237
  }
1238
+ .ui.inverted.celled.table tr td {
1239
+ border-left: 1px solid rgba(255, 255, 255, 0.1);
1240
+ }
1232
1241
  .ui.celled.table tr th:first-child,
1233
1242
  .ui.celled.table tr td:first-child {
1234
1243
  border-left: none;
@@ -1033,13 +1033,6 @@
1033
1033
  border-bottom-left-radius: 0.28571429rem;
1034
1034
  }
1035
1035
 
1036
- /* Fluid Labeled */
1037
- .ui.fluid[class*="left labeled"].icon.button,
1038
- .ui.fluid[class*="right labeled"].icon.button {
1039
- padding-left: 1.5em !important;
1040
- padding-right: 1.5em !important;
1041
- }
1042
-
1043
1036
  /* Loading Icon in Labeled Button */
1044
1037
  .ui.labeled.icon.button > .loading.icon:before {
1045
1038
  -webkit-animation: loader 2s linear infinite;
@@ -4216,7 +4209,7 @@
4216
4209
  box-shadow: 0 0 0 1px #198f35 inset;
4217
4210
  color: #198f35;
4218
4211
  }
4219
- .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
4212
+ .ui.buttons:not(.vertical) > .basic.positive.button:not(:first-child) {
4220
4213
  margin-left: -1px;
4221
4214
  }
4222
4215
 
@@ -4299,7 +4292,7 @@
4299
4292
  box-shadow: 0 0 0 1px #b21e1e inset;
4300
4293
  color: #b21e1e;
4301
4294
  }
4302
- .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
4295
+ .ui.buttons:not(.vertical) > .basic.negative.button:not(:first-child) {
4303
4296
  margin-left: -1px;
4304
4297
  }
4305
4298
 
@@ -4342,8 +4335,7 @@
4342
4335
  border-radius: 0;
4343
4336
  margin: 0 0 0 0;
4344
4337
  }
4345
- .ui.buttons > .ui.button:not(.basic):not(.inverted),
4346
- .ui.buttons:not(.basic):not(.inverted) > .button {
4338
+ .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) {
4347
4339
  -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
4348
4340
  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
4349
4341
  }
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  /* Mobile */
24
- @media only screen and (max-width: 767px) {
24
+ @media only screen and (max-width: 767.99px) {
25
25
  .ui.container {
26
26
  width: auto !important;
27
27
  margin-left: 1em !important;
@@ -39,7 +39,7 @@
39
39
  }
40
40
 
41
41
  /* Tablet */
42
- @media only screen and (min-width: 768px) and (max-width: 991px) {
42
+ @media only screen and (min-width: 768px) and (max-width: 991.99px) {
43
43
  .ui.container {
44
44
  width: 723px;
45
45
  margin-left: auto !important;
@@ -57,7 +57,7 @@
57
57
  }
58
58
 
59
59
  /* Small Monitor */
60
- @media only screen and (min-width: 992px) and (max-width: 1199px) {
60
+ @media only screen and (min-width: 992px) and (max-width: 1199.99px) {
61
61
  .ui.container {
62
62
  width: 933px;
63
63
  margin-left: auto !important;
@@ -114,7 +114,7 @@
114
114
  }
115
115
 
116
116
  /* Inside grid */
117
- @media only screen and (max-width: 767px) {
117
+ @media only screen and (max-width: 767.99px) {
118
118
  .ui.stackable.grid .ui.vertical.divider,
119
119
  .ui.grid .stackable.row .ui.vertical.divider {
120
120
  display: table;
@@ -513,6 +513,9 @@
513
513
  .ui.mini.input {
514
514
  font-size: 0.78571429em;
515
515
  }
516
+ .ui.tiny.input {
517
+ font-size: 0.85714286em;
518
+ }
516
519
  .ui.small.input {
517
520
  font-size: 0.92857143em;
518
521
  }
@@ -285,9 +285,10 @@ a.ui.label {
285
285
  }
286
286
  .ui.corner.label .icon {
287
287
  cursor: inherit;
288
- position: relative;
288
+ position: absolute;
289
289
  top: 0.64285714em;
290
- left: 0.78571429em;
290
+ left: auto;
291
+ right: 0.57142857em;
291
292
  font-size: 1.14285714em;
292
293
  margin: 0;
293
294
  }
@@ -306,7 +307,8 @@ a.ui.label {
306
307
  border-top-color: inherit;
307
308
  }
308
309
  .ui.left.corner.label .icon {
309
- left: -0.78571429em;
310
+ left: 0.57142857em;
311
+ right: auto;
310
312
  }
311
313
 
312
314
  /* Segment */
@@ -393,10 +395,10 @@ a.ui.label {
393
395
 
394
396
  /* Inside Table */
395
397
  .ui.table td > .ui.ribbon.label {
396
- left: calc(-0.7857142857142857em - 1.2em);
398
+ left: calc(-1em - 1.2em);
397
399
  }
398
400
  .ui.table td > .ui[class*="right ribbon"].label {
399
- left: calc(100% + 0.7857142857142857em + 1.2em);
401
+ left: calc(100% + 1em + 1.2em);
400
402
  padding-left: 0.833em;
401
403
  }
402
404
 
@@ -52,6 +52,7 @@
52
52
 
53
53
 
54
54
  /* Header */
55
+ .ui.inverted.segment > .ui.header > .sub.header,
55
56
  .ui.inverted.segment > .ui.header {
56
57
  color: #FFFFFF;
57
58
  }
@@ -447,15 +448,16 @@
447
448
  }
448
449
 
449
450
  /* Horizontal Segment */
450
- .ui.horizontal.segments > .segment {
451
+ .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
451
452
  -webkit-box-flex: 1;
452
453
  flex: 1 1 auto;
453
454
  -ms-flex: 1 1 0;
454
455
 
455
456
  /* Solves #2550 MS Flex */
457
+ }
458
+ .ui.horizontal.segments > .segment {
456
459
  margin: 0;
457
460
  min-width: 0;
458
- background-color: transparent;
459
461
  border-radius: 0;
460
462
  border: none;
461
463
  -webkit-box-shadow: none;
@@ -552,11 +554,9 @@
552
554
  --------------------*/
553
555
 
554
556
  .ui.clearing.segment:after {
555
- content: ".";
557
+ content: "";
556
558
  display: block;
557
- height: 0;
558
559
  clear: both;
559
- visibility: hidden;
560
560
  }
561
561
 
562
562
  /*-------------------
@@ -275,7 +275,7 @@
275
275
 
276
276
 
277
277
  /* Mobile (Default) */
278
- @media only screen and (max-width: 767px) {
278
+ @media only screen and (max-width: 767.99px) {
279
279
  .ui.steps:not(.unstackable) {
280
280
  display: -webkit-inline-box;
281
281
  display: -ms-inline-flexbox;
@@ -294,6 +294,8 @@
294
294
  flex-direction: column;
295
295
  border-radius: 0;
296
296
  padding: 1.14285714em 2em;
297
+ border-right: none;
298
+ border-bottom: 1px solid rgba(34, 36, 38, 0.15);
297
299
  }
298
300
  .ui.steps:not(.unstackable) .step:first-child {
299
301
  padding: 1.14285714em 2em;
@@ -301,11 +303,19 @@
301
303
  }
302
304
  .ui.steps:not(.unstackable) .step:last-child {
303
305
  border-radius: 0 0 0.28571429rem 0.28571429rem;
306
+ border-bottom: none;
304
307
  }
305
308
 
306
309
  /* Arrow */
307
310
  .ui.steps:not(.unstackable) .step:after {
308
- display: none !important;
311
+ top: unset;
312
+ bottom: -1.14285714em;
313
+ right: 50%;
314
+ -webkit-transform: translateY(-50%) translateX(50%) rotate(45deg);
315
+ transform: translateY(-50%) translateX(50%) rotate(45deg);
316
+ }
317
+ .ui.vertical.steps .active.step:last-child:after {
318
+ display: none;
309
319
  }
310
320
 
311
321
  /* Content */
@@ -414,7 +424,7 @@
414
424
 
415
425
 
416
426
  /* Tablet Or Below */
417
- @media only screen and (max-width: 991px) {
427
+ @media only screen and (max-width: 991.99px) {
418
428
  .ui[class*="tablet stackable"].steps {
419
429
  display: -webkit-inline-box;
420
430
  display: -ms-inline-flexbox;
@@ -434,6 +444,8 @@
434
444
  flex-direction: column;
435
445
  border-radius: 0;
436
446
  padding: 1.14285714em 2em;
447
+ border-right: none;
448
+ border-bottom: 1px solid rgba(34, 36, 38, 0.15);
437
449
  }
438
450
  .ui[class*="tablet stackable"].steps .step:first-child {
439
451
  padding: 1.14285714em 2em;
@@ -441,11 +453,16 @@
441
453
  }
442
454
  .ui[class*="tablet stackable"].steps .step:last-child {
443
455
  border-radius: 0 0 0.28571429rem 0.28571429rem;
456
+ border-bottom: none;
444
457
  }
445
458
 
446
459
  /* Arrow */
447
460
  .ui[class*="tablet stackable"].steps .step:after {
448
- display: none !important;
461
+ top: unset;
462
+ bottom: -1.14285714em;
463
+ right: 50%;
464
+ -webkit-transform: translateY(-50%) translateX(50%) rotate(45deg);
465
+ transform: translateY(-50%) translateX(50%) rotate(45deg);
449
466
  }
450
467
 
451
468
  /* Content */
@@ -33,7 +33,6 @@ body {
33
33
  font-size: 14px;
34
34
  line-height: 1.4285em;
35
35
  color: rgba(0, 0, 0, 0.87);
36
- font-smoothing: antialiased;
37
36
  }
38
37
 
39
38
 
@@ -109,6 +109,10 @@
109
109
  cursor: default;
110
110
  color: rgba(40, 40, 40, 0.3);
111
111
  }
112
+ .ui.calendar .ui.table tr .adjacent:not(.disabled) {
113
+ color: rgba(0, 0, 0, 0.6);
114
+ background: rgba(0, 0, 0, 0.03);
115
+ }
112
116
 
113
117
  /*--------------
114
118
  States
@@ -198,6 +198,12 @@
198
198
  opacity: 1;
199
199
  color: rgba(0, 0, 0, 0.95);
200
200
  }
201
+ .ui.indeterminate.toggle.checkbox input:not([type=radio]):indeterminate ~ label:before {
202
+ background: rgba(0, 0, 0, 0.15);
203
+ }
204
+ .ui.indeterminate.toggle.checkbox input:not([type=radio]) ~ label:after {
205
+ left: 1.075rem;
206
+ }
201
207
 
202
208
  /*--------------
203
209
  Active Focus
@@ -248,7 +248,7 @@ body.dimmable > .dimmer {
248
248
  .ui.simple.dimmer {
249
249
  display: block;
250
250
  overflow: hidden;
251
- opacity: 1;
251
+ opacity: 0;
252
252
  width: 0;
253
253
  height: 0;
254
254
  z-index: -100;
@@ -437,25 +437,73 @@ select.ui.dropdown {
437
437
  .ui.selection.dropdown .menu > .message {
438
438
  padding: 0.78571429rem 1.14285714rem;
439
439
  }
440
- @media only screen and (max-width: 767px) {
440
+ @media only screen and (max-width: 767.99px) {
441
+ .ui.selection.dropdown[class*="very short"] .menu {
442
+ max-height: 4.00714286rem;
443
+ }
444
+ .ui.selection.dropdown.short .menu {
445
+ max-height: 6.01071429rem;
446
+ }
441
447
  .ui.selection.dropdown .menu {
442
448
  max-height: 8.01428571rem;
443
449
  }
450
+ .ui.selection.dropdown.long .menu {
451
+ max-height: 16.02857143rem;
452
+ }
453
+ .ui.selection.dropdown[class*="very long"] .menu {
454
+ max-height: 24.04285714rem;
455
+ }
444
456
  }
445
457
  @media only screen and (min-width: 768px) {
458
+ .ui.selection.dropdown[class*="very short"] .menu {
459
+ max-height: 5.34285714rem;
460
+ }
461
+ .ui.selection.dropdown.short .menu {
462
+ max-height: 8.01428571rem;
463
+ }
446
464
  .ui.selection.dropdown .menu {
447
465
  max-height: 10.68571429rem;
448
466
  }
467
+ .ui.selection.dropdown.long .menu {
468
+ max-height: 21.37142857rem;
469
+ }
470
+ .ui.selection.dropdown[class*="very long"] .menu {
471
+ max-height: 32.05714286rem;
472
+ }
449
473
  }
450
474
  @media only screen and (min-width: 992px) {
475
+ .ui.selection.dropdown[class*="very short"] .menu {
476
+ max-height: 8.01428571rem;
477
+ }
478
+ .ui.selection.dropdown.short .menu {
479
+ max-height: 12.02142857rem;
480
+ }
451
481
  .ui.selection.dropdown .menu {
452
482
  max-height: 16.02857143rem;
453
483
  }
484
+ .ui.selection.dropdown.long .menu {
485
+ max-height: 32.05714286rem;
486
+ }
487
+ .ui.selection.dropdown[class*="very long"] .menu {
488
+ max-height: 48.08571429rem;
489
+ }
454
490
  }
455
491
  @media only screen and (min-width: 1920px) {
492
+ .ui.selection.dropdown[class*="very short"] .menu {
493
+ max-height: 10.68571429rem;
494
+ }
495
+ .ui.selection.dropdown.short .menu {
496
+ max-height: 16.02857143rem;
497
+ }
456
498
  .ui.selection.dropdown .menu {
457
499
  max-height: 21.37142857rem;
458
500
  }
501
+ .ui.selection.dropdown.long .menu {
502
+ max-height: 42.74285714rem;
503
+ }
504
+ .ui.selection.dropdown[class*="very long"] .menu {
505
+ max-height: 64.11428571rem;
506
+ }
459
507
  }
460
508
 
461
509
  /* Menu Item */
@@ -623,7 +671,7 @@ select.ui.dropdown {
623
671
  backface-visibility: hidden;
624
672
  -webkit-overflow-scrolling: touch;
625
673
  }
626
- @media only screen and (max-width: 767px) {
674
+ @media only screen and (max-width: 767.99px) {
627
675
  .ui.search.dropdown .menu {
628
676
  max-height: 8.01428571rem;
629
677
  }
@@ -1139,7 +1187,7 @@ select.ui.dropdown {
1139
1187
  min-width: calc(100% - 17px);
1140
1188
  }
1141
1189
  }
1142
- @media only screen and (max-width: 767px) {
1190
+ @media only screen and (max-width: 767.99px) {
1143
1191
  .ui.scrolling.dropdown .menu,
1144
1192
  .ui.dropdown .scrolling.menu {
1145
1193
  max-height: 10.28571429rem;
@@ -1164,6 +1212,27 @@ select.ui.dropdown {
1164
1212
  }
1165
1213
  }
1166
1214
 
1215
+ /*--------------
1216
+ Columnar
1217
+ ---------------*/
1218
+
1219
+ .ui.dropdown[class*="two column"] > .menu > .item {
1220
+ display: inline-block;
1221
+ width: 50%;
1222
+ }
1223
+ .ui.dropdown[class*="three column"] > .menu > .item {
1224
+ display: inline-block;
1225
+ width: 33%;
1226
+ }
1227
+ .ui.dropdown[class*="four column"] > .menu > .item {
1228
+ display: inline-block;
1229
+ width: 25%;
1230
+ }
1231
+ .ui.dropdown[class*="five column"] > .menu > .item {
1232
+ display: inline-block;
1233
+ width: 20%;
1234
+ }
1235
+
1167
1236
  /*--------------
1168
1237
  Simple
1169
1238
  ---------------*/