fomantic-ui-sass 2.7.8 → 2.8.1

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 (62) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/app/assets/javascripts/semantic-ui/api.js +1 -1
  4. data/app/assets/javascripts/semantic-ui/calendar.js +41 -18
  5. data/app/assets/javascripts/semantic-ui/dropdown.js +58 -33
  6. data/app/assets/javascripts/semantic-ui/form.js +9 -4
  7. data/app/assets/javascripts/semantic-ui/modal.js +96 -33
  8. data/app/assets/javascripts/semantic-ui/popup.js +8 -8
  9. data/app/assets/javascripts/semantic-ui/progress.js +10 -8
  10. data/app/assets/javascripts/semantic-ui/rating.js +35 -6
  11. data/app/assets/javascripts/semantic-ui/sidebar.js +2 -3
  12. data/app/assets/javascripts/semantic-ui/slider.js +78 -29
  13. data/app/assets/javascripts/semantic-ui/tab.js +1 -1
  14. data/app/assets/javascripts/semantic-ui/toast.js +395 -121
  15. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +3 -3
  16. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +741 -143
  17. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +35 -35
  18. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +73 -117
  19. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +11 -11
  20. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +976 -191
  21. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +1 -0
  22. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +51 -81
  23. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +12 -12
  24. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +35 -14
  25. data/app/assets/stylesheets/semantic-ui/elements/_emoji.scss +12312 -0
  26. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +111 -66
  27. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +70 -31
  28. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +28 -28
  29. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +218 -69
  30. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +20 -20
  31. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +52 -51
  32. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +85 -91
  33. data/app/assets/stylesheets/semantic-ui/elements/_placeholder.scss +8 -8
  34. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +11 -11
  35. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +31 -10
  36. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +38 -38
  37. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +16 -17
  38. data/app/assets/stylesheets/semantic-ui/elements/_text.scss +3 -3
  39. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +6 -6
  40. data/app/assets/stylesheets/semantic-ui/modules/_calendar.scss +2 -2
  41. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +14 -124
  42. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +21 -21
  43. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +181 -110
  44. data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +12 -12
  45. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +121 -30
  46. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +71 -72
  47. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +44 -26
  48. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +246 -21
  49. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +16 -13
  50. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +2 -2
  51. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +12 -14
  52. data/app/assets/stylesheets/semantic-ui/modules/_slider.scss +20 -23
  53. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +2 -2
  54. data/app/assets/stylesheets/semantic-ui/modules/_toast.scss +542 -155
  55. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +16 -16
  56. data/app/assets/stylesheets/semantic-ui/views/_card.scss +42 -17
  57. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +9 -9
  58. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +20 -5
  59. data/app/assets/stylesheets/semantic-ui/views/_item.scss +33 -12
  60. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +60 -46
  61. data/lib/fomantic/ui/sass/version.rb +2 -2
  62. metadata +2 -1
@@ -97,6 +97,9 @@
97
97
  Variations
98
98
  *******************************/
99
99
 
100
+ .ui.breadcrumb {
101
+ font-size: 1rem;
102
+ }
100
103
  .ui.mini.breadcrumb {
101
104
  font-size: 0.78571429rem;
102
105
  }
@@ -106,9 +109,6 @@
106
109
  .ui.small.breadcrumb {
107
110
  font-size: 0.92857143rem;
108
111
  }
109
- .ui.breadcrumb {
110
- font-size: 1rem;
111
- }
112
112
  .ui.large.breadcrumb {
113
113
  font-size: 1.14285714rem;
114
114
  }
@@ -175,8 +175,8 @@
175
175
  }
176
176
 
177
177
  /*--------------------
178
- Transparent
179
- ---------------------*/
178
+ Transparent
179
+ ---------------------*/
180
180
 
181
181
  .ui.form .field .transparent.input:not(.icon) input,
182
182
  .ui.form .field input.transparent,
@@ -190,13 +190,6 @@
190
190
  -webkit-box-shadow: none !important;
191
191
  box-shadow: none !important;
192
192
  }
193
- .ui.form .field.error .transparent.input input,
194
- .ui.form .field.error .transparent.input textarea,
195
- .ui.form .field.error input.transparent,
196
- .ui.form .field.error textarea.transparent {
197
- background-color: #FFF6F6 !important;
198
- color: #9F3A38 !important;
199
- }
200
193
 
201
194
  /*--------------------------
202
195
  Input w/ attached Button
@@ -295,12 +288,22 @@
295
288
  Types of Messages
296
289
  ---------------------*/
297
290
 
298
- .ui.form .success.message,
299
- .ui.form .warning.message,
300
291
  .ui.form .error.message,
301
292
  .ui.form .error.message:empty {
302
293
  display: none;
303
294
  }
295
+ .ui.form .info.message,
296
+ .ui.form .info.message:empty {
297
+ display: none;
298
+ }
299
+ .ui.form .success.message,
300
+ .ui.form .success.message:empty {
301
+ display: none;
302
+ }
303
+ .ui.form .warning.message,
304
+ .ui.form .warning.message:empty {
305
+ display: none;
306
+ }
304
307
 
305
308
  /* Assumptions */
306
309
  .ui.form .message:first-child {
@@ -354,13 +357,6 @@
354
357
  border-color: #D5C315 !important;
355
358
  }
356
359
 
357
- /* Error */
358
- .ui.form .error.error input:-webkit-autofill {
359
- -webkit-box-shadow: 0 0 0 100px #FFFAF0 inset !important;
360
- box-shadow: 0 0 0 100px #FFFAF0 inset !important;
361
- border-color: #E0B4B4 !important;
362
- }
363
-
364
360
  /*--------------------
365
361
  Placeholder
366
362
  ---------------------*/
@@ -386,26 +382,6 @@
386
382
  color: rgba(115, 115, 115, 0.87);
387
383
  }
388
384
 
389
- /* Error Placeholder */
390
- .ui.form .error ::-webkit-input-placeholder {
391
- color: #e7bdbc;
392
- }
393
- .ui.form .error :-ms-input-placeholder {
394
- color: #e7bdbc !important;
395
- }
396
- .ui.form .error ::-moz-placeholder {
397
- color: #e7bdbc;
398
- }
399
- .ui.form .error :focus::-webkit-input-placeholder {
400
- color: #da9796;
401
- }
402
- .ui.form .error :focus:-ms-input-placeholder {
403
- color: #da9796 !important;
404
- }
405
- .ui.form .error :focus::-moz-placeholder {
406
- color: #da9796;
407
- }
408
-
409
385
  /*--------------------
410
386
  Focus
411
387
  ---------------------*/
@@ -440,60 +416,38 @@
440
416
  }
441
417
 
442
418
  /*--------------------
443
- Success
444
- ---------------------*/
445
-
446
-
447
- /* On Form */
448
- .ui.form.success .success.message:not(:empty) {
449
- display: block;
450
- }
451
- .ui.form.success .compact.success.message:not(:empty) {
452
- display: inline-block;
453
- }
454
- .ui.form.success .icon.success.message:not(:empty) {
455
- display: -webkit-box;
456
- display: -ms-flexbox;
457
- display: flex;
458
- }
459
-
460
- /*--------------------
461
- Warning
462
- ---------------------*/
419
+ States
420
+ ---------------------*/
463
421
 
464
422
 
465
423
  /* On Form */
466
- .ui.form.warning .warning.message:not(:empty) {
424
+ .ui.form.error .error.message:not(:empty) {
467
425
  display: block;
468
426
  }
469
- .ui.form.warning .compact.warning.message:not(:empty) {
427
+ .ui.form.error .compact.error.message:not(:empty) {
470
428
  display: inline-block;
471
429
  }
472
- .ui.form.warning .icon.warning.message:not(:empty) {
430
+ .ui.form.error .icon.error.message:not(:empty) {
473
431
  display: -webkit-box;
474
432
  display: -ms-flexbox;
475
433
  display: flex;
476
434
  }
477
435
 
478
- /*--------------------
479
- Error
480
- ---------------------*/
481
-
482
-
483
- /* On Form */
484
- .ui.form.error .error.message:not(:empty) {
436
+ /* On Field(s) */
437
+ .ui.form .fields.error .error.message:not(:empty),
438
+ .ui.form .field.error .error.message:not(:empty) {
485
439
  display: block;
486
440
  }
487
- .ui.form.error .compact.error.message:not(:empty) {
441
+ .ui.form .fields.error .compact.error.message:not(:empty),
442
+ .ui.form .field.error .compact.error.message:not(:empty) {
488
443
  display: inline-block;
489
444
  }
490
- .ui.form.error .icon.error.message:not(:empty) {
445
+ .ui.form .fields.error .icon.error.message:not(:empty),
446
+ .ui.form .field.error .icon.error.message:not(:empty) {
491
447
  display: -webkit-box;
492
448
  display: -ms-flexbox;
493
449
  display: flex;
494
450
  }
495
-
496
- /* On Field(s) */
497
451
  .ui.ui.form .fields.error .field label,
498
452
  .ui.ui.form .field.error label,
499
453
  .ui.ui.form .fields.error .field .input,
@@ -533,9 +487,9 @@
533
487
  .ui.form .field.error input[type="text"],
534
488
  .ui.form .field.error input[type="file"],
535
489
  .ui.form .field.error input[type="url"] {
490
+ color: #9F3A38;
536
491
  background: #FFF6F6;
537
492
  border-color: #E0B4B4;
538
- color: #9F3A38;
539
493
  border-radius: '';
540
494
  -webkit-box-shadow: none;
541
495
  box-shadow: none;
@@ -567,8 +521,49 @@
567
521
  }
568
522
 
569
523
  /*------------------
570
- Dropdown Error
571
- --------------------*/
524
+ Input State
525
+ --------------------*/
526
+
527
+
528
+ /* Transparent */
529
+ .ui.form .field.error .transparent.input input,
530
+ .ui.form .field.error .transparent.input textarea,
531
+ .ui.form .field.error input.transparent,
532
+ .ui.form .field.error textarea.transparent {
533
+ background-color: #FFF6F6;
534
+ color: #9F3A38;
535
+ }
536
+
537
+ /* Autofilled */
538
+ .ui.form .error.error input:-webkit-autofill {
539
+ -webkit-box-shadow: 0 0 0 100px #FFFAF0 inset !important;
540
+ box-shadow: 0 0 0 100px #FFFAF0 inset !important;
541
+ border-color: #E0B4B4;
542
+ }
543
+
544
+ /* Placeholder */
545
+ .ui.form .error ::-webkit-input-placeholder {
546
+ color: #e7bdbc;
547
+ }
548
+ .ui.form .error :-ms-input-placeholder {
549
+ color: #e7bdbc;
550
+ }
551
+ .ui.form .error ::-moz-placeholder {
552
+ color: #e7bdbc;
553
+ }
554
+ .ui.form .error :focus::-webkit-input-placeholder {
555
+ color: #da9796;
556
+ }
557
+ .ui.form .error :focus:-ms-input-placeholder {
558
+ color: #da9796;
559
+ }
560
+ .ui.form .error :focus::-moz-placeholder {
561
+ color: #da9796;
562
+ }
563
+
564
+ /*------------------
565
+ Dropdown State
566
+ --------------------*/
572
567
 
573
568
  .ui.form .fields.error .field .ui.dropdown,
574
569
  .ui.form .fields.error .field .ui.dropdown .item,
@@ -611,12 +606,12 @@
611
606
  /* Active */
612
607
  .ui.form .fields.error .field .ui.dropdown .menu .active.item,
613
608
  .ui.form .field.error .ui.dropdown .menu .active.item {
614
- background-color: #FDCFCF !important;
609
+ background-color: #FDCFCF;
615
610
  }
616
611
 
617
612
  /*--------------------
618
- Checkbox Error
619
- ---------------------*/
613
+ Checkbox State
614
+ ---------------------*/
620
615
 
621
616
  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
622
617
  .ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
@@ -638,9 +633,648 @@
638
633
  color: #9F3A38;
639
634
  }
640
635
 
636
+ /* On Form */
637
+ .ui.form.info .info.message:not(:empty) {
638
+ display: block;
639
+ }
640
+ .ui.form.info .compact.info.message:not(:empty) {
641
+ display: inline-block;
642
+ }
643
+ .ui.form.info .icon.info.message:not(:empty) {
644
+ display: -webkit-box;
645
+ display: -ms-flexbox;
646
+ display: flex;
647
+ }
648
+
649
+ /* On Field(s) */
650
+ .ui.form .fields.info .info.message:not(:empty),
651
+ .ui.form .field.info .info.message:not(:empty) {
652
+ display: block;
653
+ }
654
+ .ui.form .fields.info .compact.info.message:not(:empty),
655
+ .ui.form .field.info .compact.info.message:not(:empty) {
656
+ display: inline-block;
657
+ }
658
+ .ui.form .fields.info .icon.info.message:not(:empty),
659
+ .ui.form .field.info .icon.info.message:not(:empty) {
660
+ display: -webkit-box;
661
+ display: -ms-flexbox;
662
+ display: flex;
663
+ }
664
+ .ui.ui.form .fields.info .field label,
665
+ .ui.ui.form .field.info label,
666
+ .ui.ui.form .fields.info .field .input,
667
+ .ui.ui.form .field.info .input {
668
+ color: #276F86;
669
+ }
670
+ .ui.form .fields.info .field .corner.label,
671
+ .ui.form .field.info .corner.label {
672
+ border-color: #276F86;
673
+ color: #FFFFFF;
674
+ }
675
+ .ui.form .fields.info .field textarea,
676
+ .ui.form .fields.info .field select,
677
+ .ui.form .fields.info .field input:not([type]),
678
+ .ui.form .fields.info .field input[type="date"],
679
+ .ui.form .fields.info .field input[type="datetime-local"],
680
+ .ui.form .fields.info .field input[type="email"],
681
+ .ui.form .fields.info .field input[type="number"],
682
+ .ui.form .fields.info .field input[type="password"],
683
+ .ui.form .fields.info .field input[type="search"],
684
+ .ui.form .fields.info .field input[type="tel"],
685
+ .ui.form .fields.info .field input[type="time"],
686
+ .ui.form .fields.info .field input[type="text"],
687
+ .ui.form .fields.info .field input[type="file"],
688
+ .ui.form .fields.info .field input[type="url"],
689
+ .ui.form .field.info textarea,
690
+ .ui.form .field.info select,
691
+ .ui.form .field.info input:not([type]),
692
+ .ui.form .field.info input[type="date"],
693
+ .ui.form .field.info input[type="datetime-local"],
694
+ .ui.form .field.info input[type="email"],
695
+ .ui.form .field.info input[type="number"],
696
+ .ui.form .field.info input[type="password"],
697
+ .ui.form .field.info input[type="search"],
698
+ .ui.form .field.info input[type="tel"],
699
+ .ui.form .field.info input[type="time"],
700
+ .ui.form .field.info input[type="text"],
701
+ .ui.form .field.info input[type="file"],
702
+ .ui.form .field.info input[type="url"] {
703
+ color: #276F86;
704
+ background: #F8FFFF;
705
+ border-color: #A9D5DE;
706
+ border-radius: '';
707
+ -webkit-box-shadow: none;
708
+ box-shadow: none;
709
+ }
710
+ .ui.form .field.info textarea:focus,
711
+ .ui.form .field.info select:focus,
712
+ .ui.form .field.info input:not([type]):focus,
713
+ .ui.form .field.info input[type="date"]:focus,
714
+ .ui.form .field.info input[type="datetime-local"]:focus,
715
+ .ui.form .field.info input[type="email"]:focus,
716
+ .ui.form .field.info input[type="number"]:focus,
717
+ .ui.form .field.info input[type="password"]:focus,
718
+ .ui.form .field.info input[type="search"]:focus,
719
+ .ui.form .field.info input[type="tel"]:focus,
720
+ .ui.form .field.info input[type="time"]:focus,
721
+ .ui.form .field.info input[type="text"]:focus,
722
+ .ui.form .field.info input[type="file"]:focus,
723
+ .ui.form .field.info input[type="url"]:focus {
724
+ background: #F8FFFF;
725
+ border-color: #A9D5DE;
726
+ color: #276F86;
727
+ -webkit-box-shadow: none;
728
+ box-shadow: none;
729
+ }
730
+
731
+ /* Preserve Native Select Stylings */
732
+ .ui.form .field.info select {
733
+ -webkit-appearance: menulist-button;
734
+ }
735
+
736
+ /*------------------
737
+ Input State
738
+ --------------------*/
739
+
740
+
741
+ /* Transparent */
742
+ .ui.form .field.info .transparent.input input,
743
+ .ui.form .field.info .transparent.input textarea,
744
+ .ui.form .field.info input.transparent,
745
+ .ui.form .field.info textarea.transparent {
746
+ background-color: #F8FFFF;
747
+ color: #276F86;
748
+ }
749
+
750
+ /* Autofilled */
751
+ .ui.form .info.info input:-webkit-autofill {
752
+ -webkit-box-shadow: 0 0 0 100px #F0FAFF inset !important;
753
+ box-shadow: 0 0 0 100px #F0FAFF inset !important;
754
+ border-color: #b3e0e0;
755
+ }
756
+
757
+ /* Placeholder */
758
+ .ui.form .info ::-webkit-input-placeholder {
759
+ color: #98cfe1;
760
+ }
761
+ .ui.form .info :-ms-input-placeholder {
762
+ color: #98cfe1;
763
+ }
764
+ .ui.form .info ::-moz-placeholder {
765
+ color: #98cfe1;
766
+ }
767
+ .ui.form .info :focus::-webkit-input-placeholder {
768
+ color: #70bdd6;
769
+ }
770
+ .ui.form .info :focus:-ms-input-placeholder {
771
+ color: #70bdd6;
772
+ }
773
+ .ui.form .info :focus::-moz-placeholder {
774
+ color: #70bdd6;
775
+ }
776
+
777
+ /*------------------
778
+ Dropdown State
779
+ --------------------*/
780
+
781
+ .ui.form .fields.info .field .ui.dropdown,
782
+ .ui.form .fields.info .field .ui.dropdown .item,
783
+ .ui.form .field.info .ui.dropdown,
784
+ .ui.form .field.info .ui.dropdown .text,
785
+ .ui.form .field.info .ui.dropdown .item {
786
+ background: #F8FFFF;
787
+ color: #276F86;
788
+ }
789
+ .ui.form .fields.info .field .ui.dropdown,
790
+ .ui.form .field.info .ui.dropdown {
791
+ border-color: #A9D5DE !important;
792
+ }
793
+ .ui.form .fields.info .field .ui.dropdown:hover,
794
+ .ui.form .field.info .ui.dropdown:hover {
795
+ border-color: #A9D5DE !important;
796
+ }
797
+ .ui.form .fields.info .field .ui.dropdown:hover .menu,
798
+ .ui.form .field.info .ui.dropdown:hover .menu {
799
+ border-color: #A9D5DE;
800
+ }
801
+ .ui.form .fields.info .field .ui.multiple.selection.dropdown > .label,
802
+ .ui.form .field.info .ui.multiple.selection.dropdown > .label {
803
+ background-color: #cce3ea;
804
+ color: #276F86;
805
+ }
806
+
807
+ /* Hover */
808
+ .ui.form .fields.info .field .ui.dropdown .menu .item:hover,
809
+ .ui.form .field.info .ui.dropdown .menu .item:hover {
810
+ background-color: #e9f2fb;
811
+ }
812
+
813
+ /* Selected */
814
+ .ui.form .fields.info .field .ui.dropdown .menu .selected.item,
815
+ .ui.form .field.info .ui.dropdown .menu .selected.item {
816
+ background-color: #e9f2fb;
817
+ }
818
+
819
+ /* Active */
820
+ .ui.form .fields.info .field .ui.dropdown .menu .active.item,
821
+ .ui.form .field.info .ui.dropdown .menu .active.item {
822
+ background-color: #cef1fd;
823
+ }
824
+
641
825
  /*--------------------
642
- Disabled
643
- ---------------------*/
826
+ Checkbox State
827
+ ---------------------*/
828
+
829
+ .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label,
830
+ .ui.form .field.info .checkbox:not(.toggle):not(.slider) label,
831
+ .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box,
832
+ .ui.form .field.info .checkbox:not(.toggle):not(.slider) .box {
833
+ color: #276F86;
834
+ }
835
+ .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label:before,
836
+ .ui.form .field.info .checkbox:not(.toggle):not(.slider) label:before,
837
+ .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box:before,
838
+ .ui.form .field.info .checkbox:not(.toggle):not(.slider) .box:before {
839
+ background: #F8FFFF;
840
+ border-color: #A9D5DE;
841
+ }
842
+ .ui.form .fields.info .field .checkbox label:after,
843
+ .ui.form .field.info .checkbox label:after,
844
+ .ui.form .fields.info .field .checkbox .box:after,
845
+ .ui.form .field.info .checkbox .box:after {
846
+ color: #276F86;
847
+ }
848
+
849
+ /* On Form */
850
+ .ui.form.success .success.message:not(:empty) {
851
+ display: block;
852
+ }
853
+ .ui.form.success .compact.success.message:not(:empty) {
854
+ display: inline-block;
855
+ }
856
+ .ui.form.success .icon.success.message:not(:empty) {
857
+ display: -webkit-box;
858
+ display: -ms-flexbox;
859
+ display: flex;
860
+ }
861
+
862
+ /* On Field(s) */
863
+ .ui.form .fields.success .success.message:not(:empty),
864
+ .ui.form .field.success .success.message:not(:empty) {
865
+ display: block;
866
+ }
867
+ .ui.form .fields.success .compact.success.message:not(:empty),
868
+ .ui.form .field.success .compact.success.message:not(:empty) {
869
+ display: inline-block;
870
+ }
871
+ .ui.form .fields.success .icon.success.message:not(:empty),
872
+ .ui.form .field.success .icon.success.message:not(:empty) {
873
+ display: -webkit-box;
874
+ display: -ms-flexbox;
875
+ display: flex;
876
+ }
877
+ .ui.ui.form .fields.success .field label,
878
+ .ui.ui.form .field.success label,
879
+ .ui.ui.form .fields.success .field .input,
880
+ .ui.ui.form .field.success .input {
881
+ color: #2C662D;
882
+ }
883
+ .ui.form .fields.success .field .corner.label,
884
+ .ui.form .field.success .corner.label {
885
+ border-color: #2C662D;
886
+ color: #FFFFFF;
887
+ }
888
+ .ui.form .fields.success .field textarea,
889
+ .ui.form .fields.success .field select,
890
+ .ui.form .fields.success .field input:not([type]),
891
+ .ui.form .fields.success .field input[type="date"],
892
+ .ui.form .fields.success .field input[type="datetime-local"],
893
+ .ui.form .fields.success .field input[type="email"],
894
+ .ui.form .fields.success .field input[type="number"],
895
+ .ui.form .fields.success .field input[type="password"],
896
+ .ui.form .fields.success .field input[type="search"],
897
+ .ui.form .fields.success .field input[type="tel"],
898
+ .ui.form .fields.success .field input[type="time"],
899
+ .ui.form .fields.success .field input[type="text"],
900
+ .ui.form .fields.success .field input[type="file"],
901
+ .ui.form .fields.success .field input[type="url"],
902
+ .ui.form .field.success textarea,
903
+ .ui.form .field.success select,
904
+ .ui.form .field.success input:not([type]),
905
+ .ui.form .field.success input[type="date"],
906
+ .ui.form .field.success input[type="datetime-local"],
907
+ .ui.form .field.success input[type="email"],
908
+ .ui.form .field.success input[type="number"],
909
+ .ui.form .field.success input[type="password"],
910
+ .ui.form .field.success input[type="search"],
911
+ .ui.form .field.success input[type="tel"],
912
+ .ui.form .field.success input[type="time"],
913
+ .ui.form .field.success input[type="text"],
914
+ .ui.form .field.success input[type="file"],
915
+ .ui.form .field.success input[type="url"] {
916
+ color: #2C662D;
917
+ background: #FCFFF5;
918
+ border-color: #A3C293;
919
+ border-radius: '';
920
+ -webkit-box-shadow: none;
921
+ box-shadow: none;
922
+ }
923
+ .ui.form .field.success textarea:focus,
924
+ .ui.form .field.success select:focus,
925
+ .ui.form .field.success input:not([type]):focus,
926
+ .ui.form .field.success input[type="date"]:focus,
927
+ .ui.form .field.success input[type="datetime-local"]:focus,
928
+ .ui.form .field.success input[type="email"]:focus,
929
+ .ui.form .field.success input[type="number"]:focus,
930
+ .ui.form .field.success input[type="password"]:focus,
931
+ .ui.form .field.success input[type="search"]:focus,
932
+ .ui.form .field.success input[type="tel"]:focus,
933
+ .ui.form .field.success input[type="time"]:focus,
934
+ .ui.form .field.success input[type="text"]:focus,
935
+ .ui.form .field.success input[type="file"]:focus,
936
+ .ui.form .field.success input[type="url"]:focus {
937
+ background: #FCFFF5;
938
+ border-color: #A3C293;
939
+ color: #2C662D;
940
+ -webkit-box-shadow: none;
941
+ box-shadow: none;
942
+ }
943
+
944
+ /* Preserve Native Select Stylings */
945
+ .ui.form .field.success select {
946
+ -webkit-appearance: menulist-button;
947
+ }
948
+
949
+ /*------------------
950
+ Input State
951
+ --------------------*/
952
+
953
+
954
+ /* Transparent */
955
+ .ui.form .field.success .transparent.input input,
956
+ .ui.form .field.success .transparent.input textarea,
957
+ .ui.form .field.success input.transparent,
958
+ .ui.form .field.success textarea.transparent {
959
+ background-color: #FCFFF5;
960
+ color: #2C662D;
961
+ }
962
+
963
+ /* Autofilled */
964
+ .ui.form .success.success input:-webkit-autofill {
965
+ -webkit-box-shadow: 0 0 0 100px #F0FFF0 inset !important;
966
+ box-shadow: 0 0 0 100px #F0FFF0 inset !important;
967
+ border-color: #bee0b3;
968
+ }
969
+
970
+ /* Placeholder */
971
+ .ui.form .success ::-webkit-input-placeholder {
972
+ color: #8fcf90;
973
+ }
974
+ .ui.form .success :-ms-input-placeholder {
975
+ color: #8fcf90;
976
+ }
977
+ .ui.form .success ::-moz-placeholder {
978
+ color: #8fcf90;
979
+ }
980
+ .ui.form .success :focus::-webkit-input-placeholder {
981
+ color: #6cbf6d;
982
+ }
983
+ .ui.form .success :focus:-ms-input-placeholder {
984
+ color: #6cbf6d;
985
+ }
986
+ .ui.form .success :focus::-moz-placeholder {
987
+ color: #6cbf6d;
988
+ }
989
+
990
+ /*------------------
991
+ Dropdown State
992
+ --------------------*/
993
+
994
+ .ui.form .fields.success .field .ui.dropdown,
995
+ .ui.form .fields.success .field .ui.dropdown .item,
996
+ .ui.form .field.success .ui.dropdown,
997
+ .ui.form .field.success .ui.dropdown .text,
998
+ .ui.form .field.success .ui.dropdown .item {
999
+ background: #FCFFF5;
1000
+ color: #2C662D;
1001
+ }
1002
+ .ui.form .fields.success .field .ui.dropdown,
1003
+ .ui.form .field.success .ui.dropdown {
1004
+ border-color: #A3C293 !important;
1005
+ }
1006
+ .ui.form .fields.success .field .ui.dropdown:hover,
1007
+ .ui.form .field.success .ui.dropdown:hover {
1008
+ border-color: #A3C293 !important;
1009
+ }
1010
+ .ui.form .fields.success .field .ui.dropdown:hover .menu,
1011
+ .ui.form .field.success .ui.dropdown:hover .menu {
1012
+ border-color: #A3C293;
1013
+ }
1014
+ .ui.form .fields.success .field .ui.multiple.selection.dropdown > .label,
1015
+ .ui.form .field.success .ui.multiple.selection.dropdown > .label {
1016
+ background-color: #cceacc;
1017
+ color: #2C662D;
1018
+ }
1019
+
1020
+ /* Hover */
1021
+ .ui.form .fields.success .field .ui.dropdown .menu .item:hover,
1022
+ .ui.form .field.success .ui.dropdown .menu .item:hover {
1023
+ background-color: #e9fbe9;
1024
+ }
1025
+
1026
+ /* Selected */
1027
+ .ui.form .fields.success .field .ui.dropdown .menu .selected.item,
1028
+ .ui.form .field.success .ui.dropdown .menu .selected.item {
1029
+ background-color: #e9fbe9;
1030
+ }
1031
+
1032
+ /* Active */
1033
+ .ui.form .fields.success .field .ui.dropdown .menu .active.item,
1034
+ .ui.form .field.success .ui.dropdown .menu .active.item {
1035
+ background-color: #dafdce;
1036
+ }
1037
+
1038
+ /*--------------------
1039
+ Checkbox State
1040
+ ---------------------*/
1041
+
1042
+ .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label,
1043
+ .ui.form .field.success .checkbox:not(.toggle):not(.slider) label,
1044
+ .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box,
1045
+ .ui.form .field.success .checkbox:not(.toggle):not(.slider) .box {
1046
+ color: #2C662D;
1047
+ }
1048
+ .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label:before,
1049
+ .ui.form .field.success .checkbox:not(.toggle):not(.slider) label:before,
1050
+ .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box:before,
1051
+ .ui.form .field.success .checkbox:not(.toggle):not(.slider) .box:before {
1052
+ background: #FCFFF5;
1053
+ border-color: #A3C293;
1054
+ }
1055
+ .ui.form .fields.success .field .checkbox label:after,
1056
+ .ui.form .field.success .checkbox label:after,
1057
+ .ui.form .fields.success .field .checkbox .box:after,
1058
+ .ui.form .field.success .checkbox .box:after {
1059
+ color: #2C662D;
1060
+ }
1061
+
1062
+ /* On Form */
1063
+ .ui.form.warning .warning.message:not(:empty) {
1064
+ display: block;
1065
+ }
1066
+ .ui.form.warning .compact.warning.message:not(:empty) {
1067
+ display: inline-block;
1068
+ }
1069
+ .ui.form.warning .icon.warning.message:not(:empty) {
1070
+ display: -webkit-box;
1071
+ display: -ms-flexbox;
1072
+ display: flex;
1073
+ }
1074
+
1075
+ /* On Field(s) */
1076
+ .ui.form .fields.warning .warning.message:not(:empty),
1077
+ .ui.form .field.warning .warning.message:not(:empty) {
1078
+ display: block;
1079
+ }
1080
+ .ui.form .fields.warning .compact.warning.message:not(:empty),
1081
+ .ui.form .field.warning .compact.warning.message:not(:empty) {
1082
+ display: inline-block;
1083
+ }
1084
+ .ui.form .fields.warning .icon.warning.message:not(:empty),
1085
+ .ui.form .field.warning .icon.warning.message:not(:empty) {
1086
+ display: -webkit-box;
1087
+ display: -ms-flexbox;
1088
+ display: flex;
1089
+ }
1090
+ .ui.ui.form .fields.warning .field label,
1091
+ .ui.ui.form .field.warning label,
1092
+ .ui.ui.form .fields.warning .field .input,
1093
+ .ui.ui.form .field.warning .input {
1094
+ color: #573A08;
1095
+ }
1096
+ .ui.form .fields.warning .field .corner.label,
1097
+ .ui.form .field.warning .corner.label {
1098
+ border-color: #573A08;
1099
+ color: #FFFFFF;
1100
+ }
1101
+ .ui.form .fields.warning .field textarea,
1102
+ .ui.form .fields.warning .field select,
1103
+ .ui.form .fields.warning .field input:not([type]),
1104
+ .ui.form .fields.warning .field input[type="date"],
1105
+ .ui.form .fields.warning .field input[type="datetime-local"],
1106
+ .ui.form .fields.warning .field input[type="email"],
1107
+ .ui.form .fields.warning .field input[type="number"],
1108
+ .ui.form .fields.warning .field input[type="password"],
1109
+ .ui.form .fields.warning .field input[type="search"],
1110
+ .ui.form .fields.warning .field input[type="tel"],
1111
+ .ui.form .fields.warning .field input[type="time"],
1112
+ .ui.form .fields.warning .field input[type="text"],
1113
+ .ui.form .fields.warning .field input[type="file"],
1114
+ .ui.form .fields.warning .field input[type="url"],
1115
+ .ui.form .field.warning textarea,
1116
+ .ui.form .field.warning select,
1117
+ .ui.form .field.warning input:not([type]),
1118
+ .ui.form .field.warning input[type="date"],
1119
+ .ui.form .field.warning input[type="datetime-local"],
1120
+ .ui.form .field.warning input[type="email"],
1121
+ .ui.form .field.warning input[type="number"],
1122
+ .ui.form .field.warning input[type="password"],
1123
+ .ui.form .field.warning input[type="search"],
1124
+ .ui.form .field.warning input[type="tel"],
1125
+ .ui.form .field.warning input[type="time"],
1126
+ .ui.form .field.warning input[type="text"],
1127
+ .ui.form .field.warning input[type="file"],
1128
+ .ui.form .field.warning input[type="url"] {
1129
+ color: #573A08;
1130
+ background: #FFFAF3;
1131
+ border-color: #C9BA9B;
1132
+ border-radius: '';
1133
+ -webkit-box-shadow: none;
1134
+ box-shadow: none;
1135
+ }
1136
+ .ui.form .field.warning textarea:focus,
1137
+ .ui.form .field.warning select:focus,
1138
+ .ui.form .field.warning input:not([type]):focus,
1139
+ .ui.form .field.warning input[type="date"]:focus,
1140
+ .ui.form .field.warning input[type="datetime-local"]:focus,
1141
+ .ui.form .field.warning input[type="email"]:focus,
1142
+ .ui.form .field.warning input[type="number"]:focus,
1143
+ .ui.form .field.warning input[type="password"]:focus,
1144
+ .ui.form .field.warning input[type="search"]:focus,
1145
+ .ui.form .field.warning input[type="tel"]:focus,
1146
+ .ui.form .field.warning input[type="time"]:focus,
1147
+ .ui.form .field.warning input[type="text"]:focus,
1148
+ .ui.form .field.warning input[type="file"]:focus,
1149
+ .ui.form .field.warning input[type="url"]:focus {
1150
+ background: #FFFAF3;
1151
+ border-color: #C9BA9B;
1152
+ color: #573A08;
1153
+ -webkit-box-shadow: none;
1154
+ box-shadow: none;
1155
+ }
1156
+
1157
+ /* Preserve Native Select Stylings */
1158
+ .ui.form .field.warning select {
1159
+ -webkit-appearance: menulist-button;
1160
+ }
1161
+
1162
+ /*------------------
1163
+ Input State
1164
+ --------------------*/
1165
+
1166
+
1167
+ /* Transparent */
1168
+ .ui.form .field.warning .transparent.input input,
1169
+ .ui.form .field.warning .transparent.input textarea,
1170
+ .ui.form .field.warning input.transparent,
1171
+ .ui.form .field.warning textarea.transparent {
1172
+ background-color: #FFFAF3;
1173
+ color: #573A08;
1174
+ }
1175
+
1176
+ /* Autofilled */
1177
+ .ui.form .warning.warning input:-webkit-autofill {
1178
+ -webkit-box-shadow: 0 0 0 100px #FFFFe0 inset !important;
1179
+ box-shadow: 0 0 0 100px #FFFFe0 inset !important;
1180
+ border-color: #e0e0b3;
1181
+ }
1182
+
1183
+ /* Placeholder */
1184
+ .ui.form .warning ::-webkit-input-placeholder {
1185
+ color: #edad3e;
1186
+ }
1187
+ .ui.form .warning :-ms-input-placeholder {
1188
+ color: #edad3e;
1189
+ }
1190
+ .ui.form .warning ::-moz-placeholder {
1191
+ color: #edad3e;
1192
+ }
1193
+ .ui.form .warning :focus::-webkit-input-placeholder {
1194
+ color: #e39715;
1195
+ }
1196
+ .ui.form .warning :focus:-ms-input-placeholder {
1197
+ color: #e39715;
1198
+ }
1199
+ .ui.form .warning :focus::-moz-placeholder {
1200
+ color: #e39715;
1201
+ }
1202
+
1203
+ /*------------------
1204
+ Dropdown State
1205
+ --------------------*/
1206
+
1207
+ .ui.form .fields.warning .field .ui.dropdown,
1208
+ .ui.form .fields.warning .field .ui.dropdown .item,
1209
+ .ui.form .field.warning .ui.dropdown,
1210
+ .ui.form .field.warning .ui.dropdown .text,
1211
+ .ui.form .field.warning .ui.dropdown .item {
1212
+ background: #FFFAF3;
1213
+ color: #573A08;
1214
+ }
1215
+ .ui.form .fields.warning .field .ui.dropdown,
1216
+ .ui.form .field.warning .ui.dropdown {
1217
+ border-color: #C9BA9B !important;
1218
+ }
1219
+ .ui.form .fields.warning .field .ui.dropdown:hover,
1220
+ .ui.form .field.warning .ui.dropdown:hover {
1221
+ border-color: #C9BA9B !important;
1222
+ }
1223
+ .ui.form .fields.warning .field .ui.dropdown:hover .menu,
1224
+ .ui.form .field.warning .ui.dropdown:hover .menu {
1225
+ border-color: #C9BA9B;
1226
+ }
1227
+ .ui.form .fields.warning .field .ui.multiple.selection.dropdown > .label,
1228
+ .ui.form .field.warning .ui.multiple.selection.dropdown > .label {
1229
+ background-color: #eaeacc;
1230
+ color: #573A08;
1231
+ }
1232
+
1233
+ /* Hover */
1234
+ .ui.form .fields.warning .field .ui.dropdown .menu .item:hover,
1235
+ .ui.form .field.warning .ui.dropdown .menu .item:hover {
1236
+ background-color: #fbfbe9;
1237
+ }
1238
+
1239
+ /* Selected */
1240
+ .ui.form .fields.warning .field .ui.dropdown .menu .selected.item,
1241
+ .ui.form .field.warning .ui.dropdown .menu .selected.item {
1242
+ background-color: #fbfbe9;
1243
+ }
1244
+
1245
+ /* Active */
1246
+ .ui.form .fields.warning .field .ui.dropdown .menu .active.item,
1247
+ .ui.form .field.warning .ui.dropdown .menu .active.item {
1248
+ background-color: #fdfdce;
1249
+ }
1250
+
1251
+ /*--------------------
1252
+ Checkbox State
1253
+ ---------------------*/
1254
+
1255
+ .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label,
1256
+ .ui.form .field.warning .checkbox:not(.toggle):not(.slider) label,
1257
+ .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box,
1258
+ .ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box {
1259
+ color: #573A08;
1260
+ }
1261
+ .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label:before,
1262
+ .ui.form .field.warning .checkbox:not(.toggle):not(.slider) label:before,
1263
+ .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box:before,
1264
+ .ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box:before {
1265
+ background: #FFFAF3;
1266
+ border-color: #C9BA9B;
1267
+ }
1268
+ .ui.form .fields.warning .field .checkbox label:after,
1269
+ .ui.form .field.warning .checkbox label:after,
1270
+ .ui.form .fields.warning .field .checkbox .box:after,
1271
+ .ui.form .field.warning .checkbox .box:after {
1272
+ color: #573A08;
1273
+ }
1274
+
1275
+ /*--------------------
1276
+ Disabled
1277
+ ---------------------*/
644
1278
 
645
1279
  .ui.form .disabled.fields .field,
646
1280
  .ui.form .disabled.field,
@@ -657,8 +1291,8 @@
657
1291
  }
658
1292
 
659
1293
  /*--------------
660
- Loading
661
- ---------------*/
1294
+ Loading
1295
+ ---------------*/
662
1296
 
663
1297
  .ui.loading.form {
664
1298
  position: relative;
@@ -703,8 +1337,8 @@
703
1337
 
704
1338
 
705
1339
  /*--------------------
706
- Required Field
707
- ---------------------*/
1340
+ Required Field
1341
+ ---------------------*/
708
1342
 
709
1343
  .ui.form .required.fields:not(.grouped) > .field > label:after,
710
1344
  .ui.form .required.fields.grouped > label:after,
@@ -737,8 +1371,8 @@
737
1371
 
738
1372
 
739
1373
  /*--------------------
740
- Inverted Colors
741
- ---------------------*/
1374
+ Inverted Colors
1375
+ ---------------------*/
742
1376
 
743
1377
  .ui.inverted.form label,
744
1378
  .ui.form .inverted.segment label,
@@ -781,8 +1415,8 @@
781
1415
  }
782
1416
 
783
1417
  /*--------------------
784
- Field Groups
785
- ---------------------*/
1418
+ Field Groups
1419
+ ---------------------*/
786
1420
 
787
1421
 
788
1422
  /* Grouped Vertically */
@@ -1005,8 +1639,8 @@
1005
1639
  }
1006
1640
 
1007
1641
  /*--------------------
1008
- Inline Fields
1009
- ---------------------*/
1642
+ Inline Fields
1643
+ ---------------------*/
1010
1644
 
1011
1645
  .ui.form .inline.fields {
1012
1646
  margin: 0 0 1em;
@@ -1082,79 +1716,43 @@
1082
1716
  Sizes
1083
1717
  ---------------------*/
1084
1718
 
1085
- .ui.mini.form {
1086
- font-size: 0.78571429rem;
1087
- }
1088
- .ui.tiny.form {
1089
- font-size: 0.85714286rem;
1090
- }
1091
- .ui.small.form {
1092
- font-size: 0.92857143rem;
1093
- }
1094
- .ui.form {
1095
- font-size: 1rem;
1096
- }
1097
- .ui.large.form {
1098
- font-size: 1.14285714rem;
1099
- }
1100
- .ui.big.form {
1101
- font-size: 1.28571429rem;
1102
- }
1103
- .ui.huge.form {
1104
- font-size: 1.42857143rem;
1105
- }
1106
- .ui.massive.form {
1107
- font-size: 1.71428571rem;
1108
- }
1109
-
1110
- /* Dropdown */
1111
- .ui.mini.form .field .dropdown {
1112
- font-size: 0.78571429rem;
1113
- }
1114
- .ui.tiny.form .field .dropdown {
1115
- font-size: 0.85714286rem;
1116
- }
1117
- .ui.small.form .field .dropdown {
1118
- font-size: 0.92857143rem;
1119
- }
1120
- .ui.form .field .dropdown {
1719
+ .ui.form,
1720
+ .ui.form .field .dropdown,
1721
+ .ui.form .field .dropdown .menu > .item {
1121
1722
  font-size: 1rem;
1122
1723
  }
1123
- .ui.large.form .field .dropdown {
1124
- font-size: 1.14285714rem;
1125
- }
1126
- .ui.big.form .field .dropdown {
1127
- font-size: 1.28571429rem;
1128
- }
1129
- .ui.huge.form .field .dropdown {
1130
- font-size: 1.42857143rem;
1131
- }
1132
- .ui.massive.form .field .dropdown {
1133
- font-size: 1.71428571rem;
1134
- }
1135
-
1136
- /* Dropdown Items */
1724
+ .ui.mini.form,
1725
+ .ui.mini.form .field .dropdown,
1137
1726
  .ui.mini.form .field .dropdown .menu > .item {
1138
1727
  font-size: 0.78571429rem;
1139
1728
  }
1729
+ .ui.tiny.form,
1730
+ .ui.tiny.form .field .dropdown,
1140
1731
  .ui.tiny.form .field .dropdown .menu > .item {
1141
1732
  font-size: 0.85714286rem;
1142
1733
  }
1734
+ .ui.small.form,
1735
+ .ui.small.form .field .dropdown,
1143
1736
  .ui.small.form .field .dropdown .menu > .item {
1144
1737
  font-size: 0.92857143rem;
1145
1738
  }
1146
- .ui.form .field .dropdown .menu > .item {
1147
- font-size: 1rem;
1148
- }
1739
+ .ui.large.form,
1740
+ .ui.large.form .field .dropdown,
1149
1741
  .ui.large.form .field .dropdown .menu > .item {
1150
1742
  font-size: 1.14285714rem;
1151
1743
  }
1744
+ .ui.big.form,
1745
+ .ui.big.form .field .dropdown,
1152
1746
  .ui.big.form .field .dropdown .menu > .item {
1153
1747
  font-size: 1.28571429rem;
1154
1748
  }
1749
+ .ui.huge.form,
1750
+ .ui.huge.form .field .dropdown,
1155
1751
  .ui.huge.form .field .dropdown .menu > .item {
1156
1752
  font-size: 1.42857143rem;
1157
1753
  }
1754
+ .ui.massive.form,
1755
+ .ui.massive.form .field .dropdown,
1158
1756
  .ui.massive.form .field .dropdown .menu > .item {
1159
1757
  font-size: 1.71428571rem;
1160
1758
  }