@patternfly/react-core 4.250.3 → 4.250.5

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 (28) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/esm/components/Select/Select.d.ts +2 -0
  3. package/dist/esm/components/Select/Select.d.ts.map +1 -1
  4. package/dist/esm/components/Select/Select.js +10 -3
  5. package/dist/esm/components/Select/Select.js.map +1 -1
  6. package/dist/esm/next/components/Dropdown/Dropdown.d.ts +3 -1
  7. package/dist/esm/next/components/Dropdown/Dropdown.d.ts.map +1 -1
  8. package/dist/esm/next/components/Dropdown/Dropdown.js +4 -3
  9. package/dist/esm/next/components/Dropdown/Dropdown.js.map +1 -1
  10. package/dist/js/components/Select/Select.d.ts +2 -0
  11. package/dist/js/components/Select/Select.d.ts.map +1 -1
  12. package/dist/js/components/Select/Select.js +10 -3
  13. package/dist/js/components/Select/Select.js.map +1 -1
  14. package/dist/js/next/components/Dropdown/Dropdown.d.ts +3 -1
  15. package/dist/js/next/components/Dropdown/Dropdown.d.ts.map +1 -1
  16. package/dist/js/next/components/Dropdown/Dropdown.js +4 -4
  17. package/dist/js/next/components/Dropdown/Dropdown.js.map +1 -1
  18. package/dist/umd/react-core.min.css +359 -359
  19. package/dist/umd/react-core.min.js +1 -1
  20. package/package.json +2 -2
  21. package/src/components/Select/Select.tsx +12 -1
  22. package/src/components/Select/__tests__/Select.test.tsx +32 -0
  23. package/src/components/Select/examples/Select.md +17 -0
  24. package/src/next/components/Dropdown/Dropdown.tsx +9 -2
  25. package/src/next/components/Dropdown/examples/DropdownBasic.tsx +0 -2
  26. package/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx +0 -2
  27. package/src/next/components/Dropdown/examples/DropdownWithGroups.tsx +0 -2
  28. package/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx +0 -2
@@ -529,245 +529,6 @@
529
529
  --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
530
530
  }
531
531
 
532
- .pf-c-app-launcher {
533
- --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
534
- --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
535
- --pf-c-app-launcher__menu--PaddingTop: var(--pf-global--spacer--sm);
536
- --pf-c-app-launcher__menu--PaddingBottom: var(--pf-global--spacer--sm);
537
- --pf-c-app-launcher__menu--Top: calc(100% + var(--pf-global--spacer--xs));
538
- --pf-c-app-launcher__menu--ZIndex: var(--pf-global--ZIndex--sm);
539
- --pf-c-app-launcher--m-top__menu--Top: 0;
540
- --pf-c-app-launcher--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
541
- --pf-c-app-launcher__toggle--PaddingTop: var(--pf-global--spacer--form-element);
542
- --pf-c-app-launcher__toggle--PaddingRight: var(--pf-global--spacer--md);
543
- --pf-c-app-launcher__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
544
- --pf-c-app-launcher__toggle--PaddingLeft: var(--pf-global--spacer--md);
545
- --pf-c-app-launcher__toggle--Color: var(--pf-global--Color--200);
546
- --pf-c-app-launcher__toggle--hover--Color: var(--pf-global--Color--100);
547
- --pf-c-app-launcher__toggle--active--Color: var(--pf-global--Color--100);
548
- --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
549
- --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
550
- --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
551
- --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
552
- --pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
553
- --pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
554
- --pf-c-app-launcher__menu-search--PaddingLeft: var(--pf-global--spacer--md);
555
- --pf-c-app-launcher__menu-search--BottomBorderColor: var(--pf-global--BorderColor--100);
556
- --pf-c-app-launcher__menu-search--BottomBorderWidth: var(--pf-global--BorderWidth--sm);
557
- --pf-c-app-launcher__menu-search--MarginBottom: var(--pf-global--spacer--sm);
558
- --pf-c-app-launcher__menu-item--PaddingTop: var(--pf-global--spacer--sm);
559
- --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-global--spacer--md);
560
- --pf-c-app-launcher__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
561
- --pf-c-app-launcher__menu-item--PaddingLeft: var(--pf-global--spacer--md);
562
- --pf-c-app-launcher__menu-item--Color: var(--pf-global--Color--dark-100);
563
- --pf-c-app-launcher__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
564
- --pf-c-app-launcher__menu-item--Width: 100%;
565
- --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
566
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
567
- --pf-c-app-launcher__menu-item--m-link--PaddingRight: 0;
568
- --pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
569
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
570
- --pf-c-app-launcher__menu-item--m-action--Width: auto;
571
- --pf-c-app-launcher__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
572
- --pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
573
- --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
574
- --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
575
- --pf-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
576
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-400);
577
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-500);
578
- --pf-c-app-launcher__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
579
- --pf-c-app-launcher__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg);
580
- --pf-c-app-launcher__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg);
581
- --pf-c-app-launcher__menu-item-external-icon--Color: var(--pf-global--link--Color);
582
- --pf-c-app-launcher__menu-item-external-icon--PaddingLeft: var(--pf-global--spacer--md);
583
- --pf-c-app-launcher__menu-item-external-icon--TranslateY: -0.0625rem;
584
- --pf-c-app-launcher__menu-item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
585
- --pf-c-app-launcher__group--group--PaddingTop: var(--pf-global--spacer--sm);
586
- --pf-c-app-launcher__group-title--PaddingTop: var(--pf-global--spacer--sm);
587
- --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
588
- --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
589
- --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
590
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
591
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
592
- --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
593
- --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
594
- --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
595
- position: relative;
596
- display: inline-block;
597
- max-width: 100%;
598
- }
599
-
600
- .pf-c-app-launcher.pf-m-expanded > .pf-c-app-launcher__toggle {
601
- color: var(--pf-c-app-launcher__toggle--m-expanded--Color);
602
- }
603
-
604
- .pf-c-app-launcher .pf-c-divider {
605
- margin-top: var(--pf-c-app-launcher--c-divider--MarginTop);
606
- margin-bottom: var(--pf-c-app-launcher--c-divider--MarginBottom);
607
- }
608
-
609
- .pf-c-app-launcher .pf-c-divider:last-child {
610
- --pf-c-app-launcher--c-divider--MarginBottom: 0;
611
- }
612
-
613
- .pf-c-app-launcher__toggle {
614
- padding: var(--pf-c-app-launcher__toggle--PaddingTop) var(--pf-c-app-launcher__toggle--PaddingRight) var(--pf-c-app-launcher__toggle--PaddingBottom) var(--pf-c-app-launcher__toggle--PaddingLeft);
615
- color: var(--pf-c-app-launcher__toggle--Color);
616
- border: none;
617
- }
618
-
619
- .pf-c-app-launcher__toggle:hover {
620
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--hover--Color);
621
- }
622
-
623
- .pf-c-app-launcher__toggle:active, .pf-c-app-launcher__toggle.pf-m-active {
624
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--active--Color);
625
- }
626
-
627
- .pf-c-app-launcher__toggle:focus {
628
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--focus--Color);
629
- }
630
-
631
- .pf-c-app-launcher__toggle:disabled {
632
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--disabled--Color);
633
- pointer-events: none;
634
- }
635
-
636
- .pf-c-app-launcher__menu {
637
- position: absolute;
638
- top: var(--pf-c-app-launcher__menu--Top);
639
- z-index: var(--pf-c-app-launcher__menu--ZIndex);
640
- min-width: 100%;
641
- padding-top: var(--pf-c-app-launcher__menu--PaddingTop);
642
- padding-bottom: var(--pf-c-app-launcher__menu--PaddingBottom);
643
- background-color: var(--pf-c-app-launcher__menu--BackgroundColor);
644
- background-clip: padding-box;
645
- box-shadow: var(--pf-c-app-launcher__menu--BoxShadow);
646
- }
647
-
648
- .pf-c-app-launcher__menu.pf-m-align-right {
649
- right: 0;
650
- }
651
-
652
- .pf-c-app-launcher.pf-m-top .pf-c-app-launcher__menu {
653
- --pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
654
- transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
655
- }
656
-
657
- .pf-c-app-launcher__menu-search {
658
- padding: var(--pf-c-app-launcher__menu-search--PaddingTop) var(--pf-c-app-launcher__menu-search--PaddingRight) var(--pf-c-app-launcher__menu-search--PaddingBottom) var(--pf-c-app-launcher__menu-search--PaddingLeft);
659
- margin-bottom: var(--pf-c-app-launcher__menu-search--MarginBottom);
660
- border-bottom: var(--pf-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-c-app-launcher__menu-search--BottomBorderColor);
661
- }
662
-
663
- .pf-c-app-launcher__menu-wrapper {
664
- display: flex;
665
- }
666
-
667
- .pf-c-app-launcher__menu-wrapper.pf-m-favorite {
668
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
669
- --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color);
670
- }
671
-
672
- .pf-c-app-launcher__menu-item {
673
- display: flex;
674
- align-items: center;
675
- width: var(--pf-c-app-launcher__menu-item--Width);
676
- padding: var(--pf-c-app-launcher__menu-item--PaddingTop) var(--pf-c-app-launcher__menu-item--PaddingRight) var(--pf-c-app-launcher__menu-item--PaddingBottom) var(--pf-c-app-launcher__menu-item--PaddingLeft);
677
- font-weight: var(--pf-c-app-launcher__menu-item--FontWeight);
678
- color: var(--pf-c-app-launcher__menu-item--Color);
679
- white-space: nowrap;
680
- border: 0;
681
- }
682
-
683
- .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
684
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color);
685
- text-decoration: none;
686
- }
687
-
688
- .pf-c-app-launcher__menu-wrapper:hover,
689
- .pf-c-app-launcher__menu-wrapper:focus-within,
690
- .pf-c-app-launcher__menu-wrapper.pf-m-focus, .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
691
- background-color: var(--pf-c-app-launcher__menu-item--hover--BackgroundColor);
692
- }
693
-
694
- .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
695
- --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
696
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
697
- pointer-events: none;
698
- }
699
-
700
- .pf-c-app-launcher__menu-wrapper:disabled, .pf-c-app-launcher__menu-wrapper.pf-m-disabled, .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
701
- background-color: transparent;
702
- }
703
-
704
- .pf-c-app-launcher__menu-wrapper.pf-m-external:hover .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-wrapper.pf-m-external:focus .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-item.pf-m-external:hover .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-item.pf-m-external:focus .pf-c-app-launcher__menu-item-external-icon {
705
- opacity: 1;
706
- }
707
-
708
- .pf-c-app-launcher__menu-item.pf-m-link {
709
- --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-c-app-launcher__menu-item--m-link--PaddingRight);
710
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
711
- }
712
-
713
- .pf-c-app-launcher__menu-item.pf-m-action {
714
- --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--m-action--Color);
715
- --pf-c-app-launcher__menu-item--Width: var(--pf-c-app-launcher__menu-item--m-action--Width);
716
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
717
- font-size: var(--pf-c-app-launcher__menu-item--m-action--FontSize);
718
- }
719
-
720
- .pf-c-app-launcher__menu-item.pf-m-action:hover, .pf-c-app-launcher__menu-item.pf-m-action:focus {
721
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--hover--Color);
722
- }
723
-
724
- .pf-c-app-launcher__menu-item-icon {
725
- display: inline-flex;
726
- align-items: center;
727
- justify-content: center;
728
- width: var(--pf-c-app-launcher__menu-item-icon--Width);
729
- height: var(--pf-c-app-launcher__menu-item-icon--Height);
730
- margin-right: var(--pf-c-app-launcher__menu-item-icon--MarginRight);
731
- }
732
-
733
- .pf-c-app-launcher__menu-item-icon > * {
734
- max-width: 100%;
735
- max-height: 100%;
736
- }
737
-
738
- .pf-c-app-launcher__menu-item-external-icon {
739
- padding-left: var(--pf-c-app-launcher__menu-item-external-icon--PaddingLeft);
740
- margin-left: auto;
741
- font-size: var(--pf-c-app-launcher__menu-item-external-icon--FontSize);
742
- color: var(--pf-c-app-launcher__menu-item-external-icon--Color);
743
- opacity: 0;
744
- transform: translateY(var(--pf-c-app-launcher__menu-item-external-icon--TranslateY));
745
- }
746
-
747
- .pf-c-app-launcher__group + .pf-c-app-launcher__group {
748
- padding-top: var(--pf-c-app-launcher__group--group--PaddingTop);
749
- }
750
-
751
- .pf-c-app-launcher__group-title {
752
- padding-top: var(--pf-c-app-launcher__group-title--PaddingTop);
753
- padding-right: var(--pf-c-app-launcher__group-title--PaddingRight);
754
- padding-bottom: var(--pf-c-app-launcher__group-title--PaddingBottom);
755
- padding-left: var(--pf-c-app-launcher__group-title--PaddingLeft);
756
- font-size: var(--pf-c-app-launcher__group-title--FontSize);
757
- font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
758
- color: var(--pf-c-app-launcher__group-title--Color);
759
- }
760
-
761
- :where(.pf-theme-dark) .pf-c-app-launcher {
762
- --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
763
- --pf-c-app-launcher__menu--Top: 100%;
764
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
765
- --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--palette--black-300);
766
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
767
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
768
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
769
- }
770
-
771
532
  .pf-c-form-control {
772
533
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
773
534
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -1080,73 +841,312 @@ select.pf-c-form-control[aria-invalid=true] {
1080
841
  background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--invalid--BackgroundSize);
1081
842
  }
1082
843
 
1083
- select.pf-c-form-control.pf-m-success {
1084
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--success--PaddingRight);
1085
- --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control__select--success--BackgroundPosition);
1086
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--success--BackgroundUrl);
1087
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--success--BackgroundPosition);
1088
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--success--BackgroundSize);
844
+ select.pf-c-form-control.pf-m-success {
845
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--success--PaddingRight);
846
+ --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control__select--success--BackgroundPosition);
847
+ background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--success--BackgroundUrl);
848
+ background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--success--BackgroundPosition);
849
+ background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--success--BackgroundSize);
850
+ }
851
+
852
+ select.pf-c-form-control.pf-m-warning {
853
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--m-warning--PaddingRight);
854
+ background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--m-warning--BackgroundUrl);
855
+ background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control__select--m-warning--BackgroundPosition);
856
+ background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--m-warning--BackgroundSize);
857
+ }
858
+
859
+ select.pf-c-form-control.pf-m-placeholder {
860
+ color: var(--pf-c-form-control--placeholder--Color);
861
+ }
862
+
863
+ select.pf-c-form-control.pf-m-placeholder * {
864
+ color: var(--pf-c-form-control--placeholder--child--Color);
865
+ }
866
+
867
+ select.pf-c-form-control.pf-m-placeholder *:disabled {
868
+ color: revert;
869
+ }
870
+
871
+ textarea.pf-c-form-control {
872
+ --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
873
+ --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
874
+ --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
875
+ width: var(--pf-c-form-control--textarea--Width);
876
+ height: var(--pf-c-form-control--textarea--Height);
877
+ vertical-align: bottom;
878
+ }
879
+
880
+ .pf-c-form-control.pf-m-resize-vertical {
881
+ resize: vertical;
882
+ }
883
+
884
+ .pf-c-form-control.pf-m-resize-horizontal {
885
+ resize: horizontal;
886
+ }
887
+
888
+ :where(.pf-theme-dark) .pf-c-form-control {
889
+ --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
890
+ --pf-c-form-control--BorderTopColor: transparent;
891
+ --pf-c-form-control--BorderRightColor: transparent;
892
+ --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
893
+ --pf-c-form-control--BorderLeftColor: transparent;
894
+ --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
895
+ --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
896
+ --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
897
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
898
+ color: var(--pf-global--Color--100);
899
+ }
900
+
901
+ :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
902
+ filter: invert(1);
903
+ }
904
+
905
+ :where(.pf-theme-dark) .pf-c-form-control[readonly] {
906
+ border-bottom-color: var(--pf-global--palette--black-700);
907
+ }
908
+
909
+ :where(.pf-theme-dark) .pf-c-form-control:disabled {
910
+ color: var(--pf-global--palette--black-100);
911
+ }
912
+
913
+ .pf-c-app-launcher {
914
+ --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
915
+ --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
916
+ --pf-c-app-launcher__menu--PaddingTop: var(--pf-global--spacer--sm);
917
+ --pf-c-app-launcher__menu--PaddingBottom: var(--pf-global--spacer--sm);
918
+ --pf-c-app-launcher__menu--Top: calc(100% + var(--pf-global--spacer--xs));
919
+ --pf-c-app-launcher__menu--ZIndex: var(--pf-global--ZIndex--sm);
920
+ --pf-c-app-launcher--m-top__menu--Top: 0;
921
+ --pf-c-app-launcher--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
922
+ --pf-c-app-launcher__toggle--PaddingTop: var(--pf-global--spacer--form-element);
923
+ --pf-c-app-launcher__toggle--PaddingRight: var(--pf-global--spacer--md);
924
+ --pf-c-app-launcher__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
925
+ --pf-c-app-launcher__toggle--PaddingLeft: var(--pf-global--spacer--md);
926
+ --pf-c-app-launcher__toggle--Color: var(--pf-global--Color--200);
927
+ --pf-c-app-launcher__toggle--hover--Color: var(--pf-global--Color--100);
928
+ --pf-c-app-launcher__toggle--active--Color: var(--pf-global--Color--100);
929
+ --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
930
+ --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
931
+ --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
932
+ --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
933
+ --pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
934
+ --pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
935
+ --pf-c-app-launcher__menu-search--PaddingLeft: var(--pf-global--spacer--md);
936
+ --pf-c-app-launcher__menu-search--BottomBorderColor: var(--pf-global--BorderColor--100);
937
+ --pf-c-app-launcher__menu-search--BottomBorderWidth: var(--pf-global--BorderWidth--sm);
938
+ --pf-c-app-launcher__menu-search--MarginBottom: var(--pf-global--spacer--sm);
939
+ --pf-c-app-launcher__menu-item--PaddingTop: var(--pf-global--spacer--sm);
940
+ --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-global--spacer--md);
941
+ --pf-c-app-launcher__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
942
+ --pf-c-app-launcher__menu-item--PaddingLeft: var(--pf-global--spacer--md);
943
+ --pf-c-app-launcher__menu-item--Color: var(--pf-global--Color--dark-100);
944
+ --pf-c-app-launcher__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
945
+ --pf-c-app-launcher__menu-item--Width: 100%;
946
+ --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
947
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
948
+ --pf-c-app-launcher__menu-item--m-link--PaddingRight: 0;
949
+ --pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
950
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
951
+ --pf-c-app-launcher__menu-item--m-action--Width: auto;
952
+ --pf-c-app-launcher__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
953
+ --pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
954
+ --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
955
+ --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
956
+ --pf-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
957
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-400);
958
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-500);
959
+ --pf-c-app-launcher__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
960
+ --pf-c-app-launcher__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg);
961
+ --pf-c-app-launcher__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg);
962
+ --pf-c-app-launcher__menu-item-external-icon--Color: var(--pf-global--link--Color);
963
+ --pf-c-app-launcher__menu-item-external-icon--PaddingLeft: var(--pf-global--spacer--md);
964
+ --pf-c-app-launcher__menu-item-external-icon--TranslateY: -0.0625rem;
965
+ --pf-c-app-launcher__menu-item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
966
+ --pf-c-app-launcher__group--group--PaddingTop: var(--pf-global--spacer--sm);
967
+ --pf-c-app-launcher__group-title--PaddingTop: var(--pf-global--spacer--sm);
968
+ --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
969
+ --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
970
+ --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
971
+ --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
972
+ --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
973
+ --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
974
+ --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
975
+ --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
976
+ position: relative;
977
+ display: inline-block;
978
+ max-width: 100%;
979
+ }
980
+
981
+ .pf-c-app-launcher.pf-m-expanded > .pf-c-app-launcher__toggle {
982
+ color: var(--pf-c-app-launcher__toggle--m-expanded--Color);
983
+ }
984
+
985
+ .pf-c-app-launcher .pf-c-divider {
986
+ margin-top: var(--pf-c-app-launcher--c-divider--MarginTop);
987
+ margin-bottom: var(--pf-c-app-launcher--c-divider--MarginBottom);
988
+ }
989
+
990
+ .pf-c-app-launcher .pf-c-divider:last-child {
991
+ --pf-c-app-launcher--c-divider--MarginBottom: 0;
992
+ }
993
+
994
+ .pf-c-app-launcher__toggle {
995
+ padding: var(--pf-c-app-launcher__toggle--PaddingTop) var(--pf-c-app-launcher__toggle--PaddingRight) var(--pf-c-app-launcher__toggle--PaddingBottom) var(--pf-c-app-launcher__toggle--PaddingLeft);
996
+ color: var(--pf-c-app-launcher__toggle--Color);
997
+ border: none;
998
+ }
999
+
1000
+ .pf-c-app-launcher__toggle:hover {
1001
+ --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--hover--Color);
1002
+ }
1003
+
1004
+ .pf-c-app-launcher__toggle:active, .pf-c-app-launcher__toggle.pf-m-active {
1005
+ --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--active--Color);
1006
+ }
1007
+
1008
+ .pf-c-app-launcher__toggle:focus {
1009
+ --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--focus--Color);
1010
+ }
1011
+
1012
+ .pf-c-app-launcher__toggle:disabled {
1013
+ --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--disabled--Color);
1014
+ pointer-events: none;
1015
+ }
1016
+
1017
+ .pf-c-app-launcher__menu {
1018
+ position: absolute;
1019
+ top: var(--pf-c-app-launcher__menu--Top);
1020
+ z-index: var(--pf-c-app-launcher__menu--ZIndex);
1021
+ min-width: 100%;
1022
+ padding-top: var(--pf-c-app-launcher__menu--PaddingTop);
1023
+ padding-bottom: var(--pf-c-app-launcher__menu--PaddingBottom);
1024
+ background-color: var(--pf-c-app-launcher__menu--BackgroundColor);
1025
+ background-clip: padding-box;
1026
+ box-shadow: var(--pf-c-app-launcher__menu--BoxShadow);
1027
+ }
1028
+
1029
+ .pf-c-app-launcher__menu.pf-m-align-right {
1030
+ right: 0;
1031
+ }
1032
+
1033
+ .pf-c-app-launcher.pf-m-top .pf-c-app-launcher__menu {
1034
+ --pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
1035
+ transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
1036
+ }
1037
+
1038
+ .pf-c-app-launcher__menu-search {
1039
+ padding: var(--pf-c-app-launcher__menu-search--PaddingTop) var(--pf-c-app-launcher__menu-search--PaddingRight) var(--pf-c-app-launcher__menu-search--PaddingBottom) var(--pf-c-app-launcher__menu-search--PaddingLeft);
1040
+ margin-bottom: var(--pf-c-app-launcher__menu-search--MarginBottom);
1041
+ border-bottom: var(--pf-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-c-app-launcher__menu-search--BottomBorderColor);
1042
+ }
1043
+
1044
+ .pf-c-app-launcher__menu-wrapper {
1045
+ display: flex;
1046
+ }
1047
+
1048
+ .pf-c-app-launcher__menu-wrapper.pf-m-favorite {
1049
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
1050
+ --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color);
1051
+ }
1052
+
1053
+ .pf-c-app-launcher__menu-item {
1054
+ display: flex;
1055
+ align-items: center;
1056
+ width: var(--pf-c-app-launcher__menu-item--Width);
1057
+ padding: var(--pf-c-app-launcher__menu-item--PaddingTop) var(--pf-c-app-launcher__menu-item--PaddingRight) var(--pf-c-app-launcher__menu-item--PaddingBottom) var(--pf-c-app-launcher__menu-item--PaddingLeft);
1058
+ font-weight: var(--pf-c-app-launcher__menu-item--FontWeight);
1059
+ color: var(--pf-c-app-launcher__menu-item--Color);
1060
+ white-space: nowrap;
1061
+ border: 0;
1062
+ }
1063
+
1064
+ .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
1065
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color);
1066
+ text-decoration: none;
1067
+ }
1068
+
1069
+ .pf-c-app-launcher__menu-wrapper:hover,
1070
+ .pf-c-app-launcher__menu-wrapper:focus-within,
1071
+ .pf-c-app-launcher__menu-wrapper.pf-m-focus, .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
1072
+ background-color: var(--pf-c-app-launcher__menu-item--hover--BackgroundColor);
1089
1073
  }
1090
1074
 
1091
- select.pf-c-form-control.pf-m-warning {
1092
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--m-warning--PaddingRight);
1093
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--m-warning--BackgroundUrl);
1094
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control__select--m-warning--BackgroundPosition);
1095
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--m-warning--BackgroundSize);
1075
+ .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
1076
+ --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
1077
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
1078
+ pointer-events: none;
1096
1079
  }
1097
1080
 
1098
- select.pf-c-form-control.pf-m-placeholder {
1099
- color: var(--pf-c-form-control--placeholder--Color);
1081
+ .pf-c-app-launcher__menu-wrapper:disabled, .pf-c-app-launcher__menu-wrapper.pf-m-disabled, .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
1082
+ background-color: transparent;
1100
1083
  }
1101
1084
 
1102
- select.pf-c-form-control.pf-m-placeholder * {
1103
- color: var(--pf-c-form-control--placeholder--child--Color);
1085
+ .pf-c-app-launcher__menu-wrapper.pf-m-external:hover .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-wrapper.pf-m-external:focus .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-item.pf-m-external:hover .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-item.pf-m-external:focus .pf-c-app-launcher__menu-item-external-icon {
1086
+ opacity: 1;
1104
1087
  }
1105
1088
 
1106
- select.pf-c-form-control.pf-m-placeholder *:disabled {
1107
- color: revert;
1089
+ .pf-c-app-launcher__menu-item.pf-m-link {
1090
+ --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-c-app-launcher__menu-item--m-link--PaddingRight);
1091
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
1108
1092
  }
1109
1093
 
1110
- textarea.pf-c-form-control {
1111
- --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
1112
- --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
1113
- --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
1114
- width: var(--pf-c-form-control--textarea--Width);
1115
- height: var(--pf-c-form-control--textarea--Height);
1116
- vertical-align: bottom;
1094
+ .pf-c-app-launcher__menu-item.pf-m-action {
1095
+ --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--m-action--Color);
1096
+ --pf-c-app-launcher__menu-item--Width: var(--pf-c-app-launcher__menu-item--m-action--Width);
1097
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
1098
+ font-size: var(--pf-c-app-launcher__menu-item--m-action--FontSize);
1117
1099
  }
1118
1100
 
1119
- .pf-c-form-control.pf-m-resize-vertical {
1120
- resize: vertical;
1101
+ .pf-c-app-launcher__menu-item.pf-m-action:hover, .pf-c-app-launcher__menu-item.pf-m-action:focus {
1102
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--hover--Color);
1121
1103
  }
1122
1104
 
1123
- .pf-c-form-control.pf-m-resize-horizontal {
1124
- resize: horizontal;
1105
+ .pf-c-app-launcher__menu-item-icon {
1106
+ display: inline-flex;
1107
+ align-items: center;
1108
+ justify-content: center;
1109
+ width: var(--pf-c-app-launcher__menu-item-icon--Width);
1110
+ height: var(--pf-c-app-launcher__menu-item-icon--Height);
1111
+ margin-right: var(--pf-c-app-launcher__menu-item-icon--MarginRight);
1125
1112
  }
1126
1113
 
1127
- :where(.pf-theme-dark) .pf-c-form-control {
1128
- --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
1129
- --pf-c-form-control--BorderTopColor: transparent;
1130
- --pf-c-form-control--BorderRightColor: transparent;
1131
- --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
1132
- --pf-c-form-control--BorderLeftColor: transparent;
1133
- --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
1134
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
1135
- --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
1136
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
1137
- color: var(--pf-global--Color--100);
1114
+ .pf-c-app-launcher__menu-item-icon > * {
1115
+ max-width: 100%;
1116
+ max-height: 100%;
1138
1117
  }
1139
1118
 
1140
- :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
1141
- filter: invert(1);
1119
+ .pf-c-app-launcher__menu-item-external-icon {
1120
+ padding-left: var(--pf-c-app-launcher__menu-item-external-icon--PaddingLeft);
1121
+ margin-left: auto;
1122
+ font-size: var(--pf-c-app-launcher__menu-item-external-icon--FontSize);
1123
+ color: var(--pf-c-app-launcher__menu-item-external-icon--Color);
1124
+ opacity: 0;
1125
+ transform: translateY(var(--pf-c-app-launcher__menu-item-external-icon--TranslateY));
1142
1126
  }
1143
1127
 
1144
- :where(.pf-theme-dark) .pf-c-form-control[readonly] {
1145
- border-bottom-color: var(--pf-global--palette--black-700);
1128
+ .pf-c-app-launcher__group + .pf-c-app-launcher__group {
1129
+ padding-top: var(--pf-c-app-launcher__group--group--PaddingTop);
1146
1130
  }
1147
1131
 
1148
- :where(.pf-theme-dark) .pf-c-form-control:disabled {
1149
- color: var(--pf-global--palette--black-100);
1132
+ .pf-c-app-launcher__group-title {
1133
+ padding-top: var(--pf-c-app-launcher__group-title--PaddingTop);
1134
+ padding-right: var(--pf-c-app-launcher__group-title--PaddingRight);
1135
+ padding-bottom: var(--pf-c-app-launcher__group-title--PaddingBottom);
1136
+ padding-left: var(--pf-c-app-launcher__group-title--PaddingLeft);
1137
+ font-size: var(--pf-c-app-launcher__group-title--FontSize);
1138
+ font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
1139
+ color: var(--pf-c-app-launcher__group-title--Color);
1140
+ }
1141
+
1142
+ :where(.pf-theme-dark) .pf-c-app-launcher {
1143
+ --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
1144
+ --pf-c-app-launcher__menu--Top: 100%;
1145
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
1146
+ --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--palette--black-300);
1147
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
1148
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
1149
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
1150
1150
  }
1151
1151
 
1152
1152
  .pf-u-screen-reader {
@@ -8635,81 +8635,6 @@ label.pf-c-check, .pf-c-check__label,
8635
8635
  font-weight: var(--pf-global--FontWeight--semi-bold);
8636
8636
  }
8637
8637
 
8638
- .pf-c-file-upload {
8639
- --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
8640
- --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
8641
- --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
8642
- --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
8643
- --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
8644
- --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
8645
- --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
8646
- --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
8647
- --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
8648
- --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
8649
- --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
8650
- position: relative;
8651
- display: flex;
8652
- flex-direction: column;
8653
- }
8654
-
8655
- .pf-c-file-upload.pf-m-drag-hover::before {
8656
- position: absolute;
8657
- top: 0;
8658
- right: 0;
8659
- bottom: 0;
8660
- left: 0;
8661
- z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
8662
- content: "";
8663
- border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor);
8664
- }
8665
-
8666
- .pf-c-file-upload.pf-m-drag-hover::after {
8667
- position: absolute;
8668
- top: 0;
8669
- right: 0;
8670
- bottom: 0;
8671
- left: 0;
8672
- content: "";
8673
- background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
8674
- opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity);
8675
- }
8676
-
8677
- .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
8678
- position: relative;
8679
- }
8680
-
8681
- .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
8682
- position: absolute;
8683
- top: 0;
8684
- right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8685
- bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8686
- left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8687
- content: "";
8688
- background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor);
8689
- }
8690
-
8691
- .pf-c-file-upload__file-select .pf-c-button.pf-m-control {
8692
- outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset);
8693
- }
8694
-
8695
- .pf-c-file-upload__file-details {
8696
- position: relative;
8697
- display: flex;
8698
- }
8699
-
8700
- .pf-c-file-upload__file-details .pf-c-form-control {
8701
- flex: 1 1 auto;
8702
- min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
8703
- border-top: 0;
8704
- }
8705
-
8706
- .pf-c-file-upload__file-details-spinner {
8707
- position: absolute;
8708
- top: 50%;
8709
- left: 50%;
8710
- transform: translate(-50%, -50%);
8711
- }
8712
-
8713
8638
  .pf-c-form {
8714
8639
  --pf-c-form--GridGap: var(--pf-global--gutter--md);
8715
8640
  --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);
@@ -9276,6 +9201,81 @@ label.pf-c-check, .pf-c-check__label,
9276
9201
  --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9277
9202
  }
9278
9203
 
9204
+ .pf-c-file-upload {
9205
+ --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
9206
+ --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
9207
+ --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
9208
+ --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
9209
+ --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9210
+ --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
9211
+ --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
9212
+ --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
9213
+ --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
9214
+ --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
9215
+ --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
9216
+ position: relative;
9217
+ display: flex;
9218
+ flex-direction: column;
9219
+ }
9220
+
9221
+ .pf-c-file-upload.pf-m-drag-hover::before {
9222
+ position: absolute;
9223
+ top: 0;
9224
+ right: 0;
9225
+ bottom: 0;
9226
+ left: 0;
9227
+ z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
9228
+ content: "";
9229
+ border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor);
9230
+ }
9231
+
9232
+ .pf-c-file-upload.pf-m-drag-hover::after {
9233
+ position: absolute;
9234
+ top: 0;
9235
+ right: 0;
9236
+ bottom: 0;
9237
+ left: 0;
9238
+ content: "";
9239
+ background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
9240
+ opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity);
9241
+ }
9242
+
9243
+ .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
9244
+ position: relative;
9245
+ }
9246
+
9247
+ .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
9248
+ position: absolute;
9249
+ top: 0;
9250
+ right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
9251
+ bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
9252
+ left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
9253
+ content: "";
9254
+ background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor);
9255
+ }
9256
+
9257
+ .pf-c-file-upload__file-select .pf-c-button.pf-m-control {
9258
+ outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset);
9259
+ }
9260
+
9261
+ .pf-c-file-upload__file-details {
9262
+ position: relative;
9263
+ display: flex;
9264
+ }
9265
+
9266
+ .pf-c-file-upload__file-details .pf-c-form-control {
9267
+ flex: 1 1 auto;
9268
+ min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
9269
+ border-top: 0;
9270
+ }
9271
+
9272
+ .pf-c-file-upload__file-details-spinner {
9273
+ position: absolute;
9274
+ top: 50%;
9275
+ left: 50%;
9276
+ transform: translate(-50%, -50%);
9277
+ }
9278
+
9279
9279
  .pf-c-helper-text {
9280
9280
  --pf-c-helper-text--Gap: var(--pf-global--spacer--xs);
9281
9281
  --pf-c-helper-text--FontSize: var(--pf-global--FontSize--sm);