@patternfly/react-core 4.213.2 → 4.213.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/components/Card/Card.d.ts +7 -0
  3. package/dist/esm/components/Card/Card.d.ts.map +1 -1
  4. package/dist/esm/components/Card/Card.js +24 -1
  5. package/dist/esm/components/Card/Card.js.map +1 -1
  6. package/dist/esm/components/Card/CardTitle.d.ts.map +1 -1
  7. package/dist/esm/components/Card/CardTitle.js +8 -1
  8. package/dist/esm/components/Card/CardTitle.js.map +1 -1
  9. package/dist/js/components/Card/Card.d.ts +7 -0
  10. package/dist/js/components/Card/Card.d.ts.map +1 -1
  11. package/dist/js/components/Card/Card.js +24 -1
  12. package/dist/js/components/Card/Card.js.map +1 -1
  13. package/dist/js/components/Card/CardTitle.d.ts.map +1 -1
  14. package/dist/js/components/Card/CardTitle.js +8 -1
  15. package/dist/js/components/Card/CardTitle.js.map +1 -1
  16. package/dist/umd/react-core.css +475 -475
  17. package/dist/umd/react-core.js +31 -2
  18. package/dist/umd/react-core.min.css +142 -142
  19. package/dist/umd/react-core.min.js +1 -1
  20. package/package.json +5 -5
  21. package/src/components/Card/Card.tsx +53 -0
  22. package/src/components/Card/CardTitle.tsx +11 -1
  23. package/src/components/Card/__tests__/Card.test.tsx +90 -1
  24. package/src/components/Card/__tests__/CardTitle.test.tsx +13 -0
  25. package/src/components/Card/examples/Card.md +17 -0
  26. package/src/components/Card/examples/CardLegacySelectable.tsx +11 -2
  27. package/src/components/Card/examples/CardSelectable.tsx +10 -1
  28. package/src/components/Card/examples/CardSelectableA11yHighlight.tsx +61 -0
  29. package/src/demos/Card/Card.md +29 -29
  30. package/src/demos/PrimaryDetail.md +16 -2
  31. package/src/demos/examples/Tabs/ModalTabs.tsx +4 -1
@@ -2456,6 +2456,221 @@ button.pf-c-breadcrumb__link {
2456
2456
  --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
2457
2457
  }
2458
2458
 
2459
+ .pf-c-calendar-month {
2460
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
2461
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
2462
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
2463
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
2464
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
2465
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
2466
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
2467
+ }
2468
+
2469
+ .pf-c-calendar-month {
2470
+ --pf-c-calendar-month--BackgroundColor: var(--pf-global--BackgroundColor--100);
2471
+ --pf-c-calendar-month--PaddingTop: var(--pf-global--spacer--lg);
2472
+ --pf-c-calendar-month--PaddingRight: var(--pf-global--spacer--lg);
2473
+ --pf-c-calendar-month--PaddingBottom: var(--pf-global--spacer--md);
2474
+ --pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
2475
+ --pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
2476
+ --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
2477
+ --pf-c-calendar-month__header-year--Width: 8ch;
2478
+ --pf-c-calendar-month__header-nav-control--MarginRight: 0;
2479
+ --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
2480
+ --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: var(--pf-global--spacer--sm);
2481
+ --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
2482
+ --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: calc(var(--pf-global--spacer--md) * -1);
2483
+ --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: var(--pf-global--spacer--sm);
2484
+ --pf-c-calendar-month__days--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
2485
+ --pf-c-calendar-month__days--BorderBottomColor: var(--pf-global--BorderColor--100);
2486
+ --pf-c-calendar-month__day--PaddingBottom: var(--pf-global--spacer--md);
2487
+ --pf-c-calendar-month__day--FontWeight: var(--pf-global--FontWeight--normal);
2488
+ --pf-c-calendar-month__dates-cell--PaddingTop: 0.125rem;
2489
+ --pf-c-calendar-month__dates-cell--PaddingRight: 0.125rem;
2490
+ --pf-c-calendar-month__dates-cell--PaddingBottom: 0.125rem;
2491
+ --pf-c-calendar-month__dates-cell--PaddingLeft: 0.125rem;
2492
+ --pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-global--spacer--sm);
2493
+ --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--BackgroundColor--200);
2494
+ --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--active-color--100);
2495
+ --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-global--active-color--100);
2496
+ --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-global--primary-color--200);
2497
+ --pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-global--primary-color--200);
2498
+ --pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow: 0 0 0.3125rem var(--pf-global--primary-color--100);
2499
+ --pf-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-global--Color--light-100);
2500
+ --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
2501
+ --pf-c-calendar-month__dates-cell--before--Top: 0;
2502
+ --pf-c-calendar-month__dates-cell--before--Right: 0;
2503
+ --pf-c-calendar-month__dates-cell--before--Bottom: var(--pf-c-calendar-month__dates-cell--PaddingBottom);
2504
+ --pf-c-calendar-month__dates-cell--before--Left: 0;
2505
+ --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-global--palette--blue-50);
2506
+ --pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left: 50%;
2507
+ --pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right: 50%;
2508
+ --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-global--palette--blue-100);
2509
+ --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-global--palette--blue-100);
2510
+ --pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-global--disabled-color--100);
2511
+ --pf-c-calendar-month__date--Width: 4ch;
2512
+ --pf-c-calendar-month__date--Height: 4ch;
2513
+ --pf-c-calendar-month__date--BorderRadius: var(--pf-global--BorderRadius--lg);
2514
+ --pf-c-calendar-month__date--Color: var(--pf-global--Color--100);
2515
+ --pf-c-calendar-month__date--BackgroundColor: transparent;
2516
+ --pf-c-calendar-month__date--disabled--Color: var(--pf-global--disabled-color--200);
2517
+ --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--md);
2518
+ --pf-c-calendar-month__date--after--BorderColor: transparent;
2519
+ --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-global--palette--blue-50);
2520
+ --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-global--palette--blue-50);
2521
+ --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-global--active-color--100);
2522
+ --pf-c-calendar-month__date--focus--BoxShadow: none;
2523
+ color: var(--pf-global--Color--100);
2524
+ display: inline-flex;
2525
+ flex-direction: column;
2526
+ padding: var(--pf-c-calendar-month--PaddingTop) var(--pf-c-calendar-month--PaddingRight) var(--pf-c-calendar-month--PaddingBottom) var(--pf-c-calendar-month--PaddingLeft);
2527
+ font-size: var(--pf-c-calendar-month--FontSize);
2528
+ background-color: var(--pf-c-calendar-month--BackgroundColor);
2529
+ }
2530
+
2531
+ .pf-c-calendar-month__header {
2532
+ display: flex;
2533
+ margin-bottom: var(--pf-c-calendar-month__header--MarginBottom);
2534
+ }
2535
+
2536
+ .pf-c-calendar-month__header-nav-control {
2537
+ margin-right: var(--pf-c-calendar-month__header-nav-control--MarginRight);
2538
+ margin-left: var(--pf-c-calendar-month__header-nav-control--MarginLeft);
2539
+ }
2540
+
2541
+ .pf-c-calendar-month__header-nav-control.pf-m-prev-month {
2542
+ --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
2543
+ --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
2544
+ }
2545
+
2546
+ .pf-c-calendar-month__header-nav-control.pf-m-next-month {
2547
+ --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginRight);
2548
+ --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft);
2549
+ }
2550
+
2551
+ .pf-c-calendar-month__header-month {
2552
+ flex-grow: 1;
2553
+ }
2554
+
2555
+ .pf-c-calendar-month__header-year {
2556
+ width: var(--pf-c-calendar-month__header-year--Width);
2557
+ }
2558
+
2559
+ .pf-c-calendar-month__calendar {
2560
+ table-layout: fixed;
2561
+ }
2562
+
2563
+ .pf-c-calendar-month__days {
2564
+ border-bottom: var(--pf-c-calendar-month__days--BorderBottomWidth) solid var(--pf-c-calendar-month__days--BorderBottomColor);
2565
+ }
2566
+
2567
+ .pf-c-calendar-month__day {
2568
+ padding-bottom: var(--pf-c-calendar-month__day--PaddingBottom);
2569
+ font-weight: var(--pf-c-calendar-month__day--FontWeight);
2570
+ text-align: center;
2571
+ }
2572
+
2573
+ .pf-c-calendar-month__dates-row:first-child {
2574
+ --pf-c-calendar-month__dates-cell--PaddingTop: var(--pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop);
2575
+ }
2576
+
2577
+ .pf-c-calendar-month__dates-cell {
2578
+ --pf-c-calendar-month__dates-cell--before--Top: var(--pf-c-calendar-month__dates-cell--PaddingTop);
2579
+ position: relative;
2580
+ padding: var(--pf-c-calendar-month__dates-cell--PaddingTop) var(--pf-c-calendar-month__dates-cell--PaddingRight) var(--pf-c-calendar-month__dates-cell--PaddingBottom) var(--pf-c-calendar-month__dates-cell--PaddingLeft);
2581
+ text-align: center;
2582
+ }
2583
+
2584
+ .pf-c-calendar-month__dates-cell::before {
2585
+ position: absolute;
2586
+ top: var(--pf-c-calendar-month__dates-cell--before--Top);
2587
+ right: var(--pf-c-calendar-month__dates-cell--before--Right);
2588
+ bottom: var(--pf-c-calendar-month__dates-cell--before--Bottom);
2589
+ left: var(--pf-c-calendar-month__dates-cell--before--Left);
2590
+ content: "";
2591
+ background-color: var(--pf-c-calendar-month__dates-cell--before--BackgroundColor);
2592
+ }
2593
+
2594
+ .pf-c-calendar-month__dates-cell.pf-m-current {
2595
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
2596
+ }
2597
+
2598
+ .pf-c-calendar-month__dates-cell.pf-m-in-range {
2599
+ --pf-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
2600
+ --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
2601
+ --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor);
2602
+ }
2603
+
2604
+ .pf-c-calendar-month__dates-cell.pf-m-start-range {
2605
+ --pf-c-calendar-month__dates-cell--before--Left: var(--pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left);
2606
+ }
2607
+
2608
+ .pf-c-calendar-month__dates-cell.pf-m-end-range {
2609
+ --pf-c-calendar-month__dates-cell--before--Right: var(--pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right);
2610
+ }
2611
+
2612
+ .pf-c-calendar-month__dates-cell.pf-m-adjacent-month {
2613
+ --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color);
2614
+ }
2615
+
2616
+ .pf-c-calendar-month__dates-cell.pf-m-selected {
2617
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
2618
+ --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
2619
+ --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
2620
+ --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
2621
+ --pf-c-calendar-month__date--focus--BoxShadow: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow);
2622
+ --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-selected__date--Color);
2623
+ }
2624
+
2625
+ .pf-c-calendar-month__dates-cell.pf-m-disabled {
2626
+ --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
2627
+ --pf-c-calendar-month__date--BackgroundColor: transparent;
2628
+ }
2629
+
2630
+ .pf-c-calendar-month__date {
2631
+ position: relative;
2632
+ display: inline-flex;
2633
+ align-items: center;
2634
+ justify-content: center;
2635
+ width: var(--pf-c-calendar-month__date--Width);
2636
+ height: var(--pf-c-calendar-month__date--Height);
2637
+ line-height: 1;
2638
+ color: var(--pf-c-calendar-month__date--Color);
2639
+ background-color: var(--pf-c-calendar-month__date--BackgroundColor);
2640
+ border: 0;
2641
+ }
2642
+
2643
+ .pf-c-calendar-month__date::after {
2644
+ position: absolute;
2645
+ top: 0;
2646
+ right: 0;
2647
+ bottom: 0;
2648
+ left: 0;
2649
+ content: "";
2650
+ border: var(--pf-c-calendar-month__date--after--BorderWidth) solid var(--pf-c-calendar-month__date--after--BorderColor);
2651
+ }
2652
+
2653
+ .pf-c-calendar-month__date, .pf-c-calendar-month__date::after {
2654
+ border-radius: var(--pf-c-calendar-month__date--BorderRadius);
2655
+ }
2656
+
2657
+ .pf-c-calendar-month__date:hover, .pf-c-calendar-month__date.pf-m-hover {
2658
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--hover--BackgroundColor);
2659
+ }
2660
+
2661
+ .pf-c-calendar-month__date:focus, .pf-c-calendar-month__date.pf-m-focus {
2662
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--focus--BackgroundColor);
2663
+ --pf-c-calendar-month__date--after--BorderColor: var(--pf-c-calendar-month__date--focus--after--BorderColor);
2664
+ outline: 0;
2665
+ box-shadow: var(--pf-c-calendar-month__date--focus--BoxShadow);
2666
+ }
2667
+
2668
+ .pf-c-calendar-month__date:disabled {
2669
+ pointer-events: none;
2670
+ --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
2671
+ --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
2672
+ }
2673
+
2459
2674
  .pf-c-card {
2460
2675
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
2461
2676
  --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
@@ -2867,222 +3082,7 @@ label.pf-c-check, .pf-c-check__label,
2867
3082
  cursor: not-allowed;
2868
3083
  }
2869
3084
 
2870
- .pf-c-calendar-month {
2871
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
2872
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
2873
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
2874
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
2875
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
2876
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
2877
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
2878
- }
2879
-
2880
- .pf-c-calendar-month {
2881
- --pf-c-calendar-month--BackgroundColor: var(--pf-global--BackgroundColor--100);
2882
- --pf-c-calendar-month--PaddingTop: var(--pf-global--spacer--lg);
2883
- --pf-c-calendar-month--PaddingRight: var(--pf-global--spacer--lg);
2884
- --pf-c-calendar-month--PaddingBottom: var(--pf-global--spacer--md);
2885
- --pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
2886
- --pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
2887
- --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
2888
- --pf-c-calendar-month__header-year--Width: 8ch;
2889
- --pf-c-calendar-month__header-nav-control--MarginRight: 0;
2890
- --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
2891
- --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: var(--pf-global--spacer--sm);
2892
- --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
2893
- --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: calc(var(--pf-global--spacer--md) * -1);
2894
- --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: var(--pf-global--spacer--sm);
2895
- --pf-c-calendar-month__days--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
2896
- --pf-c-calendar-month__days--BorderBottomColor: var(--pf-global--BorderColor--100);
2897
- --pf-c-calendar-month__day--PaddingBottom: var(--pf-global--spacer--md);
2898
- --pf-c-calendar-month__day--FontWeight: var(--pf-global--FontWeight--normal);
2899
- --pf-c-calendar-month__dates-cell--PaddingTop: 0.125rem;
2900
- --pf-c-calendar-month__dates-cell--PaddingRight: 0.125rem;
2901
- --pf-c-calendar-month__dates-cell--PaddingBottom: 0.125rem;
2902
- --pf-c-calendar-month__dates-cell--PaddingLeft: 0.125rem;
2903
- --pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-global--spacer--sm);
2904
- --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--BackgroundColor--200);
2905
- --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--active-color--100);
2906
- --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-global--active-color--100);
2907
- --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-global--primary-color--200);
2908
- --pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-global--primary-color--200);
2909
- --pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow: 0 0 0.3125rem var(--pf-global--primary-color--100);
2910
- --pf-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-global--Color--light-100);
2911
- --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
2912
- --pf-c-calendar-month__dates-cell--before--Top: 0;
2913
- --pf-c-calendar-month__dates-cell--before--Right: 0;
2914
- --pf-c-calendar-month__dates-cell--before--Bottom: var(--pf-c-calendar-month__dates-cell--PaddingBottom);
2915
- --pf-c-calendar-month__dates-cell--before--Left: 0;
2916
- --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-global--palette--blue-50);
2917
- --pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left: 50%;
2918
- --pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right: 50%;
2919
- --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-global--palette--blue-100);
2920
- --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-global--palette--blue-100);
2921
- --pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-global--disabled-color--100);
2922
- --pf-c-calendar-month__date--Width: 4ch;
2923
- --pf-c-calendar-month__date--Height: 4ch;
2924
- --pf-c-calendar-month__date--BorderRadius: var(--pf-global--BorderRadius--lg);
2925
- --pf-c-calendar-month__date--Color: var(--pf-global--Color--100);
2926
- --pf-c-calendar-month__date--BackgroundColor: transparent;
2927
- --pf-c-calendar-month__date--disabled--Color: var(--pf-global--disabled-color--200);
2928
- --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--md);
2929
- --pf-c-calendar-month__date--after--BorderColor: transparent;
2930
- --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-global--palette--blue-50);
2931
- --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-global--palette--blue-50);
2932
- --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-global--active-color--100);
2933
- --pf-c-calendar-month__date--focus--BoxShadow: none;
2934
- color: var(--pf-global--Color--100);
2935
- display: inline-flex;
2936
- flex-direction: column;
2937
- padding: var(--pf-c-calendar-month--PaddingTop) var(--pf-c-calendar-month--PaddingRight) var(--pf-c-calendar-month--PaddingBottom) var(--pf-c-calendar-month--PaddingLeft);
2938
- font-size: var(--pf-c-calendar-month--FontSize);
2939
- background-color: var(--pf-c-calendar-month--BackgroundColor);
2940
- }
2941
-
2942
- .pf-c-calendar-month__header {
2943
- display: flex;
2944
- margin-bottom: var(--pf-c-calendar-month__header--MarginBottom);
2945
- }
2946
-
2947
- .pf-c-calendar-month__header-nav-control {
2948
- margin-right: var(--pf-c-calendar-month__header-nav-control--MarginRight);
2949
- margin-left: var(--pf-c-calendar-month__header-nav-control--MarginLeft);
2950
- }
2951
-
2952
- .pf-c-calendar-month__header-nav-control.pf-m-prev-month {
2953
- --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
2954
- --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
2955
- }
2956
-
2957
- .pf-c-calendar-month__header-nav-control.pf-m-next-month {
2958
- --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginRight);
2959
- --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft);
2960
- }
2961
-
2962
- .pf-c-calendar-month__header-month {
2963
- flex-grow: 1;
2964
- }
2965
-
2966
- .pf-c-calendar-month__header-year {
2967
- width: var(--pf-c-calendar-month__header-year--Width);
2968
- }
2969
-
2970
- .pf-c-calendar-month__calendar {
2971
- table-layout: fixed;
2972
- }
2973
-
2974
- .pf-c-calendar-month__days {
2975
- border-bottom: var(--pf-c-calendar-month__days--BorderBottomWidth) solid var(--pf-c-calendar-month__days--BorderBottomColor);
2976
- }
2977
-
2978
- .pf-c-calendar-month__day {
2979
- padding-bottom: var(--pf-c-calendar-month__day--PaddingBottom);
2980
- font-weight: var(--pf-c-calendar-month__day--FontWeight);
2981
- text-align: center;
2982
- }
2983
-
2984
- .pf-c-calendar-month__dates-row:first-child {
2985
- --pf-c-calendar-month__dates-cell--PaddingTop: var(--pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop);
2986
- }
2987
-
2988
- .pf-c-calendar-month__dates-cell {
2989
- --pf-c-calendar-month__dates-cell--before--Top: var(--pf-c-calendar-month__dates-cell--PaddingTop);
2990
- position: relative;
2991
- padding: var(--pf-c-calendar-month__dates-cell--PaddingTop) var(--pf-c-calendar-month__dates-cell--PaddingRight) var(--pf-c-calendar-month__dates-cell--PaddingBottom) var(--pf-c-calendar-month__dates-cell--PaddingLeft);
2992
- text-align: center;
2993
- }
2994
-
2995
- .pf-c-calendar-month__dates-cell::before {
2996
- position: absolute;
2997
- top: var(--pf-c-calendar-month__dates-cell--before--Top);
2998
- right: var(--pf-c-calendar-month__dates-cell--before--Right);
2999
- bottom: var(--pf-c-calendar-month__dates-cell--before--Bottom);
3000
- left: var(--pf-c-calendar-month__dates-cell--before--Left);
3001
- content: "";
3002
- background-color: var(--pf-c-calendar-month__dates-cell--before--BackgroundColor);
3003
- }
3004
-
3005
- .pf-c-calendar-month__dates-cell.pf-m-current {
3006
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
3007
- }
3008
-
3009
- .pf-c-calendar-month__dates-cell.pf-m-in-range {
3010
- --pf-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
3011
- --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
3012
- --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor);
3013
- }
3014
-
3015
- .pf-c-calendar-month__dates-cell.pf-m-start-range {
3016
- --pf-c-calendar-month__dates-cell--before--Left: var(--pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left);
3017
- }
3018
-
3019
- .pf-c-calendar-month__dates-cell.pf-m-end-range {
3020
- --pf-c-calendar-month__dates-cell--before--Right: var(--pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right);
3021
- }
3022
-
3023
- .pf-c-calendar-month__dates-cell.pf-m-adjacent-month {
3024
- --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color);
3025
- }
3026
-
3027
- .pf-c-calendar-month__dates-cell.pf-m-selected {
3028
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
3029
- --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
3030
- --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
3031
- --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
3032
- --pf-c-calendar-month__date--focus--BoxShadow: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow);
3033
- --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-selected__date--Color);
3034
- }
3035
-
3036
- .pf-c-calendar-month__dates-cell.pf-m-disabled {
3037
- --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
3038
- --pf-c-calendar-month__date--BackgroundColor: transparent;
3039
- }
3040
-
3041
- .pf-c-calendar-month__date {
3042
- position: relative;
3043
- display: inline-flex;
3044
- align-items: center;
3045
- justify-content: center;
3046
- width: var(--pf-c-calendar-month__date--Width);
3047
- height: var(--pf-c-calendar-month__date--Height);
3048
- line-height: 1;
3049
- color: var(--pf-c-calendar-month__date--Color);
3050
- background-color: var(--pf-c-calendar-month__date--BackgroundColor);
3051
- border: 0;
3052
- }
3053
-
3054
- .pf-c-calendar-month__date::after {
3055
- position: absolute;
3056
- top: 0;
3057
- right: 0;
3058
- bottom: 0;
3059
- left: 0;
3060
- content: "";
3061
- border: var(--pf-c-calendar-month__date--after--BorderWidth) solid var(--pf-c-calendar-month__date--after--BorderColor);
3062
- }
3063
-
3064
- .pf-c-calendar-month__date, .pf-c-calendar-month__date::after {
3065
- border-radius: var(--pf-c-calendar-month__date--BorderRadius);
3066
- }
3067
-
3068
- .pf-c-calendar-month__date:hover, .pf-c-calendar-month__date.pf-m-hover {
3069
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--hover--BackgroundColor);
3070
- }
3071
-
3072
- .pf-c-calendar-month__date:focus, .pf-c-calendar-month__date.pf-m-focus {
3073
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--focus--BackgroundColor);
3074
- --pf-c-calendar-month__date--after--BorderColor: var(--pf-c-calendar-month__date--focus--after--BorderColor);
3075
- outline: 0;
3076
- box-shadow: var(--pf-c-calendar-month__date--focus--BoxShadow);
3077
- }
3078
-
3079
- .pf-c-calendar-month__date:disabled {
3080
- pointer-events: none;
3081
- --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
3082
- --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
3083
- }
3084
-
3085
- .pf-c-chip {
3085
+ .pf-c-chip {
3086
3086
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3087
3087
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
3088
3088
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -8045,81 +8045,6 @@ label.pf-c-check, .pf-c-check__label,
8045
8045
  font-size: var(--pf-global--FontSize--lg);
8046
8046
  }
8047
8047
 
8048
- .pf-c-file-upload {
8049
- --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
8050
- --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
8051
- --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
8052
- --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
8053
- --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
8054
- --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
8055
- --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
8056
- --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
8057
- --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
8058
- --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
8059
- --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
8060
- position: relative;
8061
- display: flex;
8062
- flex-direction: column;
8063
- }
8064
-
8065
- .pf-c-file-upload.pf-m-drag-hover::before {
8066
- position: absolute;
8067
- top: 0;
8068
- right: 0;
8069
- bottom: 0;
8070
- left: 0;
8071
- z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
8072
- content: "";
8073
- border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor);
8074
- }
8075
-
8076
- .pf-c-file-upload.pf-m-drag-hover::after {
8077
- position: absolute;
8078
- top: 0;
8079
- right: 0;
8080
- bottom: 0;
8081
- left: 0;
8082
- content: "";
8083
- background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
8084
- opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity);
8085
- }
8086
-
8087
- .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
8088
- position: relative;
8089
- }
8090
-
8091
- .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
8092
- position: absolute;
8093
- top: 0;
8094
- right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8095
- bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8096
- left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8097
- content: "";
8098
- background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor);
8099
- }
8100
-
8101
- .pf-c-file-upload__file-select .pf-c-button.pf-m-control {
8102
- outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset);
8103
- }
8104
-
8105
- .pf-c-file-upload__file-details {
8106
- position: relative;
8107
- display: flex;
8108
- }
8109
-
8110
- .pf-c-file-upload__file-details .pf-c-form-control {
8111
- flex: 1 1 auto;
8112
- min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
8113
- border-top: 0;
8114
- }
8115
-
8116
- .pf-c-file-upload__file-details-spinner {
8117
- position: absolute;
8118
- top: 50%;
8119
- left: 50%;
8120
- transform: translate(-50%, -50%);
8121
- }
8122
-
8123
8048
  .pf-c-expandable-section {
8124
8049
  --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
8125
8050
  --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
@@ -8244,11 +8169,86 @@ label.pf-c-check, .pf-c-check__label,
8244
8169
  font-weight: var(--pf-global--FontWeight--semi-bold);
8245
8170
  }
8246
8171
 
8247
- .pf-c-form {
8248
- --pf-c-form--GridGap: var(--pf-global--gutter--md);
8249
- --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);
8250
- --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
8251
- --pf-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-global--spacer--md);
8172
+ .pf-c-file-upload {
8173
+ --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
8174
+ --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
8175
+ --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
8176
+ --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
8177
+ --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
8178
+ --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
8179
+ --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
8180
+ --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
8181
+ --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
8182
+ --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
8183
+ --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
8184
+ position: relative;
8185
+ display: flex;
8186
+ flex-direction: column;
8187
+ }
8188
+
8189
+ .pf-c-file-upload.pf-m-drag-hover::before {
8190
+ position: absolute;
8191
+ top: 0;
8192
+ right: 0;
8193
+ bottom: 0;
8194
+ left: 0;
8195
+ z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
8196
+ content: "";
8197
+ border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor);
8198
+ }
8199
+
8200
+ .pf-c-file-upload.pf-m-drag-hover::after {
8201
+ position: absolute;
8202
+ top: 0;
8203
+ right: 0;
8204
+ bottom: 0;
8205
+ left: 0;
8206
+ content: "";
8207
+ background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
8208
+ opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity);
8209
+ }
8210
+
8211
+ .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
8212
+ position: relative;
8213
+ }
8214
+
8215
+ .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
8216
+ position: absolute;
8217
+ top: 0;
8218
+ right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8219
+ bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8220
+ left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8221
+ content: "";
8222
+ background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor);
8223
+ }
8224
+
8225
+ .pf-c-file-upload__file-select .pf-c-button.pf-m-control {
8226
+ outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset);
8227
+ }
8228
+
8229
+ .pf-c-file-upload__file-details {
8230
+ position: relative;
8231
+ display: flex;
8232
+ }
8233
+
8234
+ .pf-c-file-upload__file-details .pf-c-form-control {
8235
+ flex: 1 1 auto;
8236
+ min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
8237
+ border-top: 0;
8238
+ }
8239
+
8240
+ .pf-c-file-upload__file-details-spinner {
8241
+ position: absolute;
8242
+ top: 50%;
8243
+ left: 50%;
8244
+ transform: translate(-50%, -50%);
8245
+ }
8246
+
8247
+ .pf-c-form {
8248
+ --pf-c-form--GridGap: var(--pf-global--gutter--md);
8249
+ --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);
8250
+ --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
8251
+ --pf-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-global--spacer--md);
8252
8252
  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
8253
8253
  --pf-c-form--m-limit-width--MaxWidth: 55rem;
8254
8254
  --pf-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)) + (2 * var(--pf-global--BorderWidth--sm))) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)) - ((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) + var(--pf-global--BorderWidth--sm));
@@ -15983,6 +15983,185 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15983
15983
  margin-top: var(--pf-c-popover__footer--MarginTop);
15984
15984
  }
15985
15985
 
15986
+ .pf-c-progress {
15987
+ --pf-c-progress--GridGap: var(--pf-global--spacer--md);
15988
+ --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100);
15989
+ --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
15990
+ --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
15991
+ --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
15992
+ --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
15993
+ --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
15994
+ --pf-c-progress__bar--before--Opacity: .2;
15995
+ --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
15996
+ --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
15997
+ --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
15998
+ --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100);
15999
+ --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100);
16000
+ --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100);
16001
+ --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100);
16002
+ --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100);
16003
+ --pf-c-progress--m-inside__indicator--MinWidth: var(--pf-global--spacer--xl);
16004
+ --pf-c-progress--m-inside__measure--Color: var(--pf-global--Color--light-100);
16005
+ --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100);
16006
+ --pf-c-progress--m-warning--m-inside__measure--Color: var(--pf-global--Color--dark-100);
16007
+ --pf-c-progress--m-inside__measure--FontSize: var(--pf-global--FontSize--sm);
16008
+ --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm);
16009
+ --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm);
16010
+ --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm);
16011
+ --pf-c-progress--m-sm__measure--FontSize: var(--pf-global--FontSize--sm);
16012
+ --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg);
16013
+ display: grid;
16014
+ align-items: end;
16015
+ grid-gap: var(--pf-c-progress--GridGap);
16016
+ grid-template-columns: auto auto;
16017
+ grid-template-rows: 1fr auto;
16018
+ }
16019
+
16020
+ .pf-c-progress.pf-m-sm {
16021
+ --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
16022
+ }
16023
+
16024
+ .pf-c-progress.pf-m-sm .pf-c-progress__description {
16025
+ font-size: var(--pf-c-progress--m-sm__description--FontSize);
16026
+ }
16027
+
16028
+ .pf-c-progress.pf-m-sm .pf-c-progress__measure {
16029
+ font-size: var(--pf-c-progress--m-sm__measure--FontSize);
16030
+ }
16031
+
16032
+ .pf-c-progress.pf-m-lg {
16033
+ --pf-c-progress__bar--Height: var(--pf-c-progress--m-lg__bar--Height);
16034
+ }
16035
+
16036
+ .pf-c-progress.pf-m-inside .pf-c-progress__indicator {
16037
+ display: flex;
16038
+ align-items: center;
16039
+ justify-content: center;
16040
+ min-width: var(--pf-c-progress--m-inside__indicator--MinWidth);
16041
+ }
16042
+
16043
+ .pf-c-progress.pf-m-inside .pf-c-progress__measure {
16044
+ font-size: var(--pf-c-progress--m-inside__measure--FontSize);
16045
+ color: var(--pf-c-progress--m-inside__measure--Color);
16046
+ text-align: center;
16047
+ }
16048
+
16049
+ .pf-c-progress.pf-m-outside .pf-c-progress__description {
16050
+ grid-column: 1/3;
16051
+ }
16052
+
16053
+ .pf-c-progress.pf-m-outside .pf-c-progress__status {
16054
+ grid-column: 2/3;
16055
+ grid-row: 2/3;
16056
+ align-self: center;
16057
+ }
16058
+
16059
+ .pf-c-progress.pf-m-outside .pf-c-progress__measure {
16060
+ display: inline-block;
16061
+ font-size: var(--pf-c-progress--m-outside__measure--FontSize);
16062
+ }
16063
+
16064
+ .pf-c-progress.pf-m-outside .pf-c-progress__measure.pf-m-static-width {
16065
+ min-width: var(--pf-c-progress__measure--m-static-width--MinWidth);
16066
+ text-align: left;
16067
+ }
16068
+
16069
+ .pf-c-progress.pf-m-outside .pf-c-progress__bar,
16070
+ .pf-c-progress.pf-m-outside .pf-c-progress__indicator {
16071
+ grid-column: 1/2;
16072
+ }
16073
+
16074
+ .pf-c-progress.pf-m-singleline {
16075
+ grid-template-rows: 1fr;
16076
+ }
16077
+
16078
+ .pf-c-progress.pf-m-singleline .pf-c-progress__description {
16079
+ display: none;
16080
+ visibility: hidden;
16081
+ }
16082
+
16083
+ .pf-c-progress.pf-m-singleline .pf-c-progress__bar {
16084
+ grid-row: 1/2;
16085
+ grid-column: 1/2;
16086
+ }
16087
+
16088
+ .pf-c-progress.pf-m-singleline .pf-c-progress__status {
16089
+ grid-row: 1/2;
16090
+ grid-column: 2/3;
16091
+ }
16092
+
16093
+ .pf-c-progress.pf-m-outside, .pf-c-progress.pf-m-singleline {
16094
+ grid-template-columns: 1fr fit-content(50%);
16095
+ }
16096
+
16097
+ .pf-c-progress.pf-m-success {
16098
+ --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-success__bar--BackgroundColor);
16099
+ --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-success__status-icon--Color);
16100
+ --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-success--m-inside__measure--Color);
16101
+ }
16102
+
16103
+ .pf-c-progress.pf-m-warning {
16104
+ --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-warning__bar--BackgroundColor);
16105
+ --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-warning__status-icon--Color);
16106
+ --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-warning--m-inside__measure--Color);
16107
+ }
16108
+
16109
+ .pf-c-progress.pf-m-danger {
16110
+ --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-danger__bar--BackgroundColor);
16111
+ --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-danger__status-icon--Color);
16112
+ }
16113
+
16114
+ .pf-c-progress__description {
16115
+ word-break: break-word;
16116
+ grid-column: 1/2;
16117
+ }
16118
+
16119
+ .pf-c-progress__description.pf-m-truncate {
16120
+ overflow: hidden;
16121
+ text-overflow: ellipsis;
16122
+ white-space: nowrap;
16123
+ }
16124
+
16125
+ .pf-c-progress__status {
16126
+ grid-column: 2/3;
16127
+ grid-row: 1/2;
16128
+ text-align: right;
16129
+ word-break: break-word;
16130
+ }
16131
+
16132
+ .pf-c-progress__status-icon {
16133
+ margin-left: var(--pf-c-progress__status-icon--MarginLeft);
16134
+ color: var(--pf-c-progress__status-icon--Color);
16135
+ }
16136
+
16137
+ .pf-c-progress__bar {
16138
+ position: relative;
16139
+ grid-column: 1/3;
16140
+ grid-row: 2/3;
16141
+ align-self: center;
16142
+ height: var(--pf-c-progress__bar--Height);
16143
+ background-color: var(--pf-c-progress__bar--BackgroundColor);
16144
+ }
16145
+
16146
+ .pf-c-progress__bar::before {
16147
+ position: absolute;
16148
+ top: 0;
16149
+ left: 0;
16150
+ width: 100%;
16151
+ height: 100%;
16152
+ content: "";
16153
+ background-color: var(--pf-c-progress__bar--before--BackgroundColor);
16154
+ opacity: var(--pf-c-progress__bar--before--Opacity);
16155
+ }
16156
+
16157
+ .pf-c-progress__indicator {
16158
+ position: absolute;
16159
+ top: 0;
16160
+ left: 0;
16161
+ height: var(--pf-c-progress__indicator--Height);
16162
+ background-color: var(--pf-c-progress__indicator--BackgroundColor);
16163
+ }
16164
+
15986
16165
  .pf-c-progress-stepper {
15987
16166
  --pf-c-progress-stepper--GridAutoFlow: column;
15988
16167
  --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
@@ -16252,185 +16431,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16252
16431
  text-align: var(--pf-c-progress-stepper__step-description--TextAlign);
16253
16432
  }
16254
16433
 
16255
- .pf-c-progress {
16256
- --pf-c-progress--GridGap: var(--pf-global--spacer--md);
16257
- --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100);
16258
- --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
16259
- --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
16260
- --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
16261
- --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
16262
- --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
16263
- --pf-c-progress__bar--before--Opacity: .2;
16264
- --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
16265
- --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
16266
- --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
16267
- --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100);
16268
- --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100);
16269
- --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100);
16270
- --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100);
16271
- --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100);
16272
- --pf-c-progress--m-inside__indicator--MinWidth: var(--pf-global--spacer--xl);
16273
- --pf-c-progress--m-inside__measure--Color: var(--pf-global--Color--light-100);
16274
- --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100);
16275
- --pf-c-progress--m-warning--m-inside__measure--Color: var(--pf-global--Color--dark-100);
16276
- --pf-c-progress--m-inside__measure--FontSize: var(--pf-global--FontSize--sm);
16277
- --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm);
16278
- --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm);
16279
- --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm);
16280
- --pf-c-progress--m-sm__measure--FontSize: var(--pf-global--FontSize--sm);
16281
- --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg);
16282
- display: grid;
16283
- align-items: end;
16284
- grid-gap: var(--pf-c-progress--GridGap);
16285
- grid-template-columns: auto auto;
16286
- grid-template-rows: 1fr auto;
16287
- }
16288
-
16289
- .pf-c-progress.pf-m-sm {
16290
- --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
16291
- }
16292
-
16293
- .pf-c-progress.pf-m-sm .pf-c-progress__description {
16294
- font-size: var(--pf-c-progress--m-sm__description--FontSize);
16295
- }
16296
-
16297
- .pf-c-progress.pf-m-sm .pf-c-progress__measure {
16298
- font-size: var(--pf-c-progress--m-sm__measure--FontSize);
16299
- }
16300
-
16301
- .pf-c-progress.pf-m-lg {
16302
- --pf-c-progress__bar--Height: var(--pf-c-progress--m-lg__bar--Height);
16303
- }
16304
-
16305
- .pf-c-progress.pf-m-inside .pf-c-progress__indicator {
16306
- display: flex;
16307
- align-items: center;
16308
- justify-content: center;
16309
- min-width: var(--pf-c-progress--m-inside__indicator--MinWidth);
16310
- }
16311
-
16312
- .pf-c-progress.pf-m-inside .pf-c-progress__measure {
16313
- font-size: var(--pf-c-progress--m-inside__measure--FontSize);
16314
- color: var(--pf-c-progress--m-inside__measure--Color);
16315
- text-align: center;
16316
- }
16317
-
16318
- .pf-c-progress.pf-m-outside .pf-c-progress__description {
16319
- grid-column: 1/3;
16320
- }
16321
-
16322
- .pf-c-progress.pf-m-outside .pf-c-progress__status {
16323
- grid-column: 2/3;
16324
- grid-row: 2/3;
16325
- align-self: center;
16326
- }
16327
-
16328
- .pf-c-progress.pf-m-outside .pf-c-progress__measure {
16329
- display: inline-block;
16330
- font-size: var(--pf-c-progress--m-outside__measure--FontSize);
16331
- }
16332
-
16333
- .pf-c-progress.pf-m-outside .pf-c-progress__measure.pf-m-static-width {
16334
- min-width: var(--pf-c-progress__measure--m-static-width--MinWidth);
16335
- text-align: left;
16336
- }
16337
-
16338
- .pf-c-progress.pf-m-outside .pf-c-progress__bar,
16339
- .pf-c-progress.pf-m-outside .pf-c-progress__indicator {
16340
- grid-column: 1/2;
16341
- }
16342
-
16343
- .pf-c-progress.pf-m-singleline {
16344
- grid-template-rows: 1fr;
16345
- }
16346
-
16347
- .pf-c-progress.pf-m-singleline .pf-c-progress__description {
16348
- display: none;
16349
- visibility: hidden;
16350
- }
16351
-
16352
- .pf-c-progress.pf-m-singleline .pf-c-progress__bar {
16353
- grid-row: 1/2;
16354
- grid-column: 1/2;
16355
- }
16356
-
16357
- .pf-c-progress.pf-m-singleline .pf-c-progress__status {
16358
- grid-row: 1/2;
16359
- grid-column: 2/3;
16360
- }
16361
-
16362
- .pf-c-progress.pf-m-outside, .pf-c-progress.pf-m-singleline {
16363
- grid-template-columns: 1fr fit-content(50%);
16364
- }
16365
-
16366
- .pf-c-progress.pf-m-success {
16367
- --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-success__bar--BackgroundColor);
16368
- --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-success__status-icon--Color);
16369
- --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-success--m-inside__measure--Color);
16370
- }
16371
-
16372
- .pf-c-progress.pf-m-warning {
16373
- --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-warning__bar--BackgroundColor);
16374
- --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-warning__status-icon--Color);
16375
- --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-warning--m-inside__measure--Color);
16376
- }
16377
-
16378
- .pf-c-progress.pf-m-danger {
16379
- --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-danger__bar--BackgroundColor);
16380
- --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-danger__status-icon--Color);
16381
- }
16382
-
16383
- .pf-c-progress__description {
16384
- word-break: break-word;
16385
- grid-column: 1/2;
16386
- }
16387
-
16388
- .pf-c-progress__description.pf-m-truncate {
16389
- overflow: hidden;
16390
- text-overflow: ellipsis;
16391
- white-space: nowrap;
16392
- }
16393
-
16394
- .pf-c-progress__status {
16395
- grid-column: 2/3;
16396
- grid-row: 1/2;
16397
- text-align: right;
16398
- word-break: break-word;
16399
- }
16400
-
16401
- .pf-c-progress__status-icon {
16402
- margin-left: var(--pf-c-progress__status-icon--MarginLeft);
16403
- color: var(--pf-c-progress__status-icon--Color);
16404
- }
16405
-
16406
- .pf-c-progress__bar {
16407
- position: relative;
16408
- grid-column: 1/3;
16409
- grid-row: 2/3;
16410
- align-self: center;
16411
- height: var(--pf-c-progress__bar--Height);
16412
- background-color: var(--pf-c-progress__bar--BackgroundColor);
16413
- }
16414
-
16415
- .pf-c-progress__bar::before {
16416
- position: absolute;
16417
- top: 0;
16418
- left: 0;
16419
- width: 100%;
16420
- height: 100%;
16421
- content: "";
16422
- background-color: var(--pf-c-progress__bar--before--BackgroundColor);
16423
- opacity: var(--pf-c-progress__bar--before--Opacity);
16424
- }
16425
-
16426
- .pf-c-progress__indicator {
16427
- position: absolute;
16428
- top: 0;
16429
- left: 0;
16430
- height: var(--pf-c-progress__indicator--Height);
16431
- background-color: var(--pf-c-progress__indicator--BackgroundColor);
16432
- }
16433
-
16434
16434
  .pf-c-radio {
16435
16435
  --pf-c-radio--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
16436
16436
  --pf-c-radio__label--disabled--Color: var(--pf-global--disabled-color--100);