fomantic-ui-sass 2.7.8 → 2.8.1

Sign up to get free protection for your applications and to get access to all the features.
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
  }