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
@@ -193,39 +193,39 @@
193
193
 
194
194
 
195
195
  /* Modal Width */
196
- @media only screen and (max-width: 767px) {
197
- .ui.modal {
196
+ @media only screen and (max-width: 767.99px) {
197
+ .ui.modal:not(.fullscreen) {
198
198
  width: 95%;
199
199
  margin: 0 0 0 0;
200
200
  }
201
201
  }
202
202
  @media only screen and (min-width: 768px) {
203
- .ui.modal {
203
+ .ui.modal:not(.fullscreen) {
204
204
  width: 88%;
205
205
  margin: 0 0 0 0;
206
206
  }
207
207
  }
208
208
  @media only screen and (min-width: 992px) {
209
- .ui.modal {
209
+ .ui.modal:not(.fullscreen) {
210
210
  width: 850px;
211
211
  margin: 0 0 0 0;
212
212
  }
213
213
  }
214
214
  @media only screen and (min-width: 1200px) {
215
- .ui.modal {
215
+ .ui.modal:not(.fullscreen) {
216
216
  width: 900px;
217
217
  margin: 0 0 0 0;
218
218
  }
219
219
  }
220
220
  @media only screen and (min-width: 1920px) {
221
- .ui.modal {
221
+ .ui.modal:not(.fullscreen) {
222
222
  width: 950px;
223
223
  margin: 0 0 0 0;
224
224
  }
225
225
  }
226
226
 
227
227
  /* Tablet and Mobile */
228
- @media only screen and (max-width: 991px) {
228
+ @media only screen and (max-width: 991.99px) {
229
229
  .ui.modal > .header {
230
230
  padding-right: 2.25rem;
231
231
  }
@@ -237,11 +237,17 @@
237
237
  }
238
238
 
239
239
  /* Mobile */
240
- @media only screen and (max-width: 767px) {
240
+ @media only screen and (max-width: 767.99px) {
241
241
  .ui.modal > .header {
242
242
  padding: 0.75rem 1rem !important;
243
243
  padding-right: 2.25rem !important;
244
244
  }
245
+ .ui.overlay.fullscreen.modal .content.content.content {
246
+ min-height: calc(100vh - 8.1rem);
247
+ }
248
+ .ui.overlay.fullscreen.modal .scrolling.content.content.content {
249
+ max-height: calc(100vh - 8.1rem);
250
+ }
245
251
  .ui.modal > .content {
246
252
  display: block;
247
253
  padding: 1rem !important;
@@ -333,14 +339,20 @@
333
339
  /* Resort to margin positioning if legacy */
334
340
  .ui.legacy.legacy.modal,
335
341
  .ui.legacy.legacy.page.dimmer > .ui.modal {
336
- top: 50% !important;
337
342
  left: 50% !important;
338
343
  }
339
- .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal,
340
- .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal,
341
- .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal,
342
- .ui.top.aligned.dimmer > .ui.legacy.legacy.modal {
343
- top: auto !important;
344
+ .ui.legacy.legacy.modal:not(.aligned),
345
+ .ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) {
346
+ top: 50%;
347
+ }
348
+ .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned),
349
+ .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned),
350
+ .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned),
351
+ .ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) {
352
+ top: auto;
353
+ }
354
+ .ui.legacy.overlay.fullscreen.modal {
355
+ margin-top: -1rem !important;
344
356
  }
345
357
 
346
358
 
@@ -364,27 +376,21 @@
364
376
 
365
377
 
366
378
  /*--------------
367
- Top Aligned
379
+ Aligned
368
380
  ---------------*/
369
381
 
370
-
371
- /* Top Aligned Modal */
372
- .modals.dimmer[class*="top aligned"] .modal {
373
- margin: 5vh auto;
374
- }
375
- @media only screen and (max-width: 767px) {
376
- .modals.dimmer[class*="top aligned"] .modal {
377
- margin: 1rem auto;
378
- }
382
+ .ui.top.aligned.modal {
383
+ top: 5vh;
379
384
  }
380
-
381
- /* Legacy Top Aligned */
382
- .legacy.modals.dimmer[class*="top aligned"] {
383
- padding-top: 5vh;
385
+ .ui.bottom.aligned.modal {
386
+ bottom: 5vh;
384
387
  }
385
- @media only screen and (max-width: 767px) {
386
- .legacy.modals.dimmer[class*="top aligned"] {
387
- padding-top: 1rem;
388
+ @media only screen and (max-width: 767.99px) {
389
+ .ui.top.aligned.modal {
390
+ top: 1rem;
391
+ }
392
+ .ui.bottom.aligned.modal {
393
+ bottom: 1rem;
388
394
  }
389
395
  }
390
396
 
@@ -407,7 +413,7 @@
407
413
  overflow: auto;
408
414
  -webkit-overflow-scrolling: touch;
409
415
  }
410
- .modals.dimmer .ui.scrolling.modal {
416
+ .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
411
417
  margin: 1rem auto;
412
418
  }
413
419
 
@@ -419,7 +425,7 @@
419
425
  .scrolling.undetached.dimmable.dimmed > .dimmer {
420
426
  overflow: hidden;
421
427
  }
422
- .scrolling.undetached.dimmable .ui.scrolling.modal {
428
+ .scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) {
423
429
  position: absolute;
424
430
  left: 50%;
425
431
  margin-top: 1rem !important;
@@ -427,19 +433,32 @@
427
433
 
428
434
  /* Scrolling Content */
429
435
  .ui.modal .scrolling.content {
430
- max-height: calc(80vh - 10em);
436
+ max-height: calc(80vh - 10rem);
431
437
  overflow: auto;
432
438
  }
439
+ .ui.overlay.fullscreen.modal .content {
440
+ min-height: calc(100vh - 9.1rem);
441
+ }
442
+ .ui.overlay.fullscreen.modal .scrolling.content {
443
+ max-height: calc(100vh - 9.1rem);
444
+ }
433
445
 
434
446
  /*--------------
435
447
  Full Screen
436
448
  ---------------*/
437
449
 
438
450
  .ui.fullscreen.modal {
439
- width: 95% !important;
440
- left: 2.5% !important;
451
+ width: 95%;
452
+ left: 2.5%;
441
453
  margin: 1em auto;
442
454
  }
455
+ .ui.overlay.fullscreen.modal {
456
+ width: 100%;
457
+ left: 0;
458
+ margin: 0 auto;
459
+ top: 0;
460
+ border-radius: 0;
461
+ }
443
462
  .ui.fullscreen.modal > .header {
444
463
  padding-right: 2.25rem;
445
464
  }
@@ -466,7 +485,7 @@
466
485
  }
467
486
 
468
487
  /* Mini Modal Width */
469
- @media only screen and (max-width: 767px) {
488
+ @media only screen and (max-width: 767.99px) {
470
489
  .ui.mini.modal {
471
490
  width: 95%;
472
491
  margin: 0 0 0 0;
@@ -503,7 +522,7 @@
503
522
  }
504
523
 
505
524
  /* Tiny Modal Width */
506
- @media only screen and (max-width: 767px) {
525
+ @media only screen and (max-width: 767.99px) {
507
526
  .ui.tiny.modal {
508
527
  width: 95%;
509
528
  margin: 0 0 0 0;
@@ -540,7 +559,7 @@
540
559
  }
541
560
 
542
561
  /* Small Modal Width */
543
- @media only screen and (max-width: 767px) {
562
+ @media only screen and (max-width: 767.99px) {
544
563
  .ui.small.modal {
545
564
  width: 95%;
546
565
  margin: 0 0 0 0;
@@ -575,7 +594,7 @@
575
594
  .ui.large.modal > .header {
576
595
  font-size: 1.6em;
577
596
  }
578
- @media only screen and (max-width: 767px) {
597
+ @media only screen and (max-width: 767.99px) {
579
598
  .ui.large.modal {
580
599
  width: 95%;
581
600
  margin: 0 0 0 0;
@@ -627,7 +646,7 @@
627
646
  .ui.inverted.dimmer > .modal > .close {
628
647
  color: rgba(0, 0, 0, 0.85);
629
648
  }
630
- @media only screen and (max-width: 991px) {
649
+ @media only screen and (max-width: 991.99px) {
631
650
  .ui.dimmer .inverted.modal > .close {
632
651
  color: #FFFFFF;
633
652
  }
@@ -706,7 +706,7 @@
706
706
  .ui[class*="very wide"].popup {
707
707
  max-width: 550px;
708
708
  }
709
- @media only screen and (max-width: 767px) {
709
+ @media only screen and (max-width: 767.99px) {
710
710
  .ui.wide.popup,
711
711
  .ui[class*="very wide"].popup {
712
712
  max-width: 250px;
@@ -49,9 +49,10 @@
49
49
  border-radius: 0.28571429rem;
50
50
  -webkit-transition: width 0.1s ease, background-color 0.1s ease;
51
51
  transition: width 0.1s ease, background-color 0.1s ease;
52
+ overflow: hidden;
52
53
  }
53
- .ui.progress:not([data-percent]) .bar,
54
- .ui.progress[data-percent="0"] .bar {
54
+ .ui.ui.ui.progress:not([data-percent]) .bar,
55
+ .ui.ui.ui.progress[data-percent="0"] .bar {
55
56
  background: transparent;
56
57
  }
57
58
  .ui.progress[data-percent="0"] .bar .progress {
@@ -216,6 +217,13 @@
216
217
  color: #1A531B;
217
218
  }
218
219
 
220
+ /* Multiple */
221
+ .ui.multiple.progress {
222
+ display: -webkit-box;
223
+ display: -ms-flexbox;
224
+ display: flex;
225
+ }
226
+
219
227
 
220
228
  /*******************************
221
229
  States
@@ -226,7 +234,7 @@
226
234
  Success
227
235
  ---------------*/
228
236
 
229
- .ui.progress.success .bar {
237
+ .ui.ui.progress.success .bar {
230
238
  background-color: #21BA45;
231
239
  }
232
240
  .ui.ui.progress.success .bar,
@@ -242,7 +250,7 @@
242
250
  Warning
243
251
  ---------------*/
244
252
 
245
- .ui.progress.warning .bar {
253
+ .ui.ui.progress.warning .bar {
246
254
  background-color: #F2C037;
247
255
  }
248
256
  .ui.ui.progress.warning .bar,
@@ -258,7 +266,7 @@
258
266
  Error
259
267
  ---------------*/
260
268
 
261
- .ui.progress.error .bar {
269
+ .ui.ui.progress.error .bar {
262
270
  background-color: #DB2828;
263
271
  }
264
272
  .ui.ui.progress.error .bar,
@@ -417,94 +425,124 @@
417
425
  Colors
418
426
  ---------------*/
419
427
 
420
- .ui.primary.progress .bar {
428
+ .ui.primary.progress .bar,
429
+ .ui.progress .primary.bar {
421
430
  background-color: #2185D0;
422
431
  }
423
- .ui.primary.inverted.progress .bar {
432
+ .ui.primary.inverted.progress .bar,
433
+ .ui.inverted.progress .primary.bar {
424
434
  background-color: #54C8FF;
425
435
  }
426
- .ui.secondary.progress .bar {
436
+ .ui.secondary.progress .bar,
437
+ .ui.progress .secondary.bar {
427
438
  background-color: #1B1C1D;
428
439
  }
429
- .ui.secondary.inverted.progress .bar {
440
+ .ui.secondary.inverted.progress .bar,
441
+ .ui.inverted.progress .secondary.bar {
430
442
  background-color: #545454;
431
443
  }
432
- .ui.red.progress .bar {
444
+ .ui.red.progress .bar,
445
+ .ui.progress .red.bar {
433
446
  background-color: #DB2828;
434
447
  }
435
- .ui.red.inverted.progress .bar {
448
+ .ui.red.inverted.progress .bar,
449
+ .ui.inverted.progress .red.bar {
436
450
  background-color: #FF695E;
437
451
  }
438
- .ui.orange.progress .bar {
452
+ .ui.orange.progress .bar,
453
+ .ui.progress .orange.bar {
439
454
  background-color: #F2711C;
440
455
  }
441
- .ui.orange.inverted.progress .bar {
456
+ .ui.orange.inverted.progress .bar,
457
+ .ui.inverted.progress .orange.bar {
442
458
  background-color: #FF851B;
443
459
  }
444
- .ui.yellow.progress .bar {
460
+ .ui.yellow.progress .bar,
461
+ .ui.progress .yellow.bar {
445
462
  background-color: #FBBD08;
446
463
  }
447
- .ui.yellow.inverted.progress .bar {
464
+ .ui.yellow.inverted.progress .bar,
465
+ .ui.inverted.progress .yellow.bar {
448
466
  background-color: #FFE21F;
449
467
  }
450
- .ui.olive.progress .bar {
468
+ .ui.olive.progress .bar,
469
+ .ui.progress .olive.bar {
451
470
  background-color: #B5CC18;
452
471
  }
453
- .ui.olive.inverted.progress .bar {
472
+ .ui.olive.inverted.progress .bar,
473
+ .ui.inverted.progress .olive.bar {
454
474
  background-color: #D9E778;
455
475
  }
456
- .ui.green.progress .bar {
476
+ .ui.green.progress .bar,
477
+ .ui.progress .green.bar {
457
478
  background-color: #21BA45;
458
479
  }
459
- .ui.green.inverted.progress .bar {
480
+ .ui.green.inverted.progress .bar,
481
+ .ui.inverted.progress .green.bar {
460
482
  background-color: #2ECC40;
461
483
  }
462
- .ui.teal.progress .bar {
484
+ .ui.teal.progress .bar,
485
+ .ui.progress .teal.bar {
463
486
  background-color: #00B5AD;
464
487
  }
465
- .ui.teal.inverted.progress .bar {
488
+ .ui.teal.inverted.progress .bar,
489
+ .ui.inverted.progress .teal.bar {
466
490
  background-color: #6DFFFF;
467
491
  }
468
- .ui.blue.progress .bar {
492
+ .ui.blue.progress .bar,
493
+ .ui.progress .blue.bar {
469
494
  background-color: #2185D0;
470
495
  }
471
- .ui.blue.inverted.progress .bar {
496
+ .ui.blue.inverted.progress .bar,
497
+ .ui.inverted.progress .blue.bar {
472
498
  background-color: #54C8FF;
473
499
  }
474
- .ui.violet.progress .bar {
500
+ .ui.violet.progress .bar,
501
+ .ui.progress .violet.bar {
475
502
  background-color: #6435C9;
476
503
  }
477
- .ui.violet.inverted.progress .bar {
504
+ .ui.violet.inverted.progress .bar,
505
+ .ui.inverted.progress .violet.bar {
478
506
  background-color: #A291FB;
479
507
  }
480
- .ui.purple.progress .bar {
508
+ .ui.purple.progress .bar,
509
+ .ui.progress .purple.bar {
481
510
  background-color: #A333C8;
482
511
  }
483
- .ui.purple.inverted.progress .bar {
512
+ .ui.purple.inverted.progress .bar,
513
+ .ui.inverted.progress .purple.bar {
484
514
  background-color: #DC73FF;
485
515
  }
486
- .ui.pink.progress .bar {
516
+ .ui.pink.progress .bar,
517
+ .ui.progress .pink.bar {
487
518
  background-color: #E03997;
488
519
  }
489
- .ui.pink.inverted.progress .bar {
520
+ .ui.pink.inverted.progress .bar,
521
+ .ui.inverted.progress .pink.bar {
490
522
  background-color: #FF8EDF;
491
523
  }
492
- .ui.brown.progress .bar {
524
+ .ui.brown.progress .bar,
525
+ .ui.progress .brown.bar {
493
526
  background-color: #A5673F;
494
527
  }
495
- .ui.brown.inverted.progress .bar {
528
+ .ui.brown.inverted.progress .bar,
529
+ .ui.inverted.progress .brown.bar {
496
530
  background-color: #D67C1C;
497
531
  }
498
- .ui.grey.progress .bar {
532
+ .ui.grey.progress .bar,
533
+ .ui.progress .grey.bar {
499
534
  background-color: #767676;
500
535
  }
501
- .ui.grey.inverted.progress .bar {
536
+ .ui.grey.inverted.progress .bar,
537
+ .ui.inverted.progress .grey.bar {
502
538
  background-color: #DCDDDE;
503
539
  }
504
- .ui.black.progress .bar {
540
+ .ui.black.progress .bar,
541
+ .ui.progress .black.bar {
505
542
  background-color: #1B1C1D;
506
543
  }
507
- .ui.black.inverted.progress .bar {
544
+ .ui.black.inverted.progress .bar,
545
+ .ui.inverted.progress .black.bar {
508
546
  background-color: #545454;
509
547
  }
510
548
 
@@ -422,7 +422,7 @@
422
422
  Mobile
423
423
  ---------------*/
424
424
 
425
- @media only screen and (max-width: 767px) {
425
+ @media only screen and (max-width: 767.99px) {
426
426
  .ui.search .results {
427
427
  max-width: calc(100vw - 2rem);
428
428
  }