@patternfly/react-core 4.235.6 → 4.236.0

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 (86) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/esm/components/DualListSelector/DualListSelectorControl.d.ts.map +1 -1
  3. package/dist/esm/components/DualListSelector/DualListSelectorControl.js +2 -1
  4. package/dist/esm/components/DualListSelector/DualListSelectorControl.js.map +1 -1
  5. package/dist/esm/components/DualListSelector/DualListSelectorControlsWrapper.d.ts.map +1 -1
  6. package/dist/esm/components/DualListSelector/DualListSelectorControlsWrapper.js +2 -1
  7. package/dist/esm/components/DualListSelector/DualListSelectorControlsWrapper.js.map +1 -1
  8. package/dist/esm/components/DualListSelector/DualListSelectorListItem.d.ts.map +1 -1
  9. package/dist/esm/components/DualListSelector/DualListSelectorListItem.js +2 -1
  10. package/dist/esm/components/DualListSelector/DualListSelectorListItem.js.map +1 -1
  11. package/dist/esm/components/DualListSelector/DualListSelectorListWrapper.d.ts.map +1 -1
  12. package/dist/esm/components/DualListSelector/DualListSelectorListWrapper.js +2 -1
  13. package/dist/esm/components/DualListSelector/DualListSelectorListWrapper.js.map +1 -1
  14. package/dist/esm/components/InputGroup/InputGroup.d.ts.map +1 -1
  15. package/dist/esm/components/InputGroup/InputGroup.js +2 -1
  16. package/dist/esm/components/InputGroup/InputGroup.js.map +1 -1
  17. package/dist/esm/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  18. package/dist/esm/components/MenuToggle/MenuToggle.js +1 -1
  19. package/dist/esm/components/MenuToggle/MenuToggle.js.map +1 -1
  20. package/dist/esm/components/Page/PageSection.d.ts +2 -0
  21. package/dist/esm/components/Page/PageSection.d.ts.map +1 -1
  22. package/dist/esm/components/Page/PageSection.js +3 -2
  23. package/dist/esm/components/Page/PageSection.js.map +1 -1
  24. package/dist/esm/components/SearchInput/SearchInput.d.ts.map +1 -1
  25. package/dist/esm/components/SearchInput/SearchInput.js +2 -1
  26. package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
  27. package/dist/esm/components/TextInputGroup/TextInputGroup.d.ts.map +1 -1
  28. package/dist/esm/components/TextInputGroup/TextInputGroup.js +2 -1
  29. package/dist/esm/components/TextInputGroup/TextInputGroup.js.map +1 -1
  30. package/dist/esm/components/TextInputGroup/TextInputGroupMain.d.ts.map +1 -1
  31. package/dist/esm/components/TextInputGroup/TextInputGroupMain.js +2 -1
  32. package/dist/esm/components/TextInputGroup/TextInputGroupMain.js.map +1 -1
  33. package/dist/esm/next/components/Wizard/WizardToggle.d.ts.map +1 -1
  34. package/dist/esm/next/components/Wizard/WizardToggle.js +32 -31
  35. package/dist/esm/next/components/Wizard/WizardToggle.js.map +1 -1
  36. package/dist/js/components/DualListSelector/DualListSelectorControl.d.ts.map +1 -1
  37. package/dist/js/components/DualListSelector/DualListSelectorControl.js +2 -1
  38. package/dist/js/components/DualListSelector/DualListSelectorControl.js.map +1 -1
  39. package/dist/js/components/DualListSelector/DualListSelectorControlsWrapper.d.ts.map +1 -1
  40. package/dist/js/components/DualListSelector/DualListSelectorControlsWrapper.js +2 -1
  41. package/dist/js/components/DualListSelector/DualListSelectorControlsWrapper.js.map +1 -1
  42. package/dist/js/components/DualListSelector/DualListSelectorListItem.d.ts.map +1 -1
  43. package/dist/js/components/DualListSelector/DualListSelectorListItem.js +2 -1
  44. package/dist/js/components/DualListSelector/DualListSelectorListItem.js.map +1 -1
  45. package/dist/js/components/DualListSelector/DualListSelectorListWrapper.d.ts.map +1 -1
  46. package/dist/js/components/DualListSelector/DualListSelectorListWrapper.js +2 -1
  47. package/dist/js/components/DualListSelector/DualListSelectorListWrapper.js.map +1 -1
  48. package/dist/js/components/InputGroup/InputGroup.d.ts.map +1 -1
  49. package/dist/js/components/InputGroup/InputGroup.js +2 -1
  50. package/dist/js/components/InputGroup/InputGroup.js.map +1 -1
  51. package/dist/js/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  52. package/dist/js/components/MenuToggle/MenuToggle.js +1 -1
  53. package/dist/js/components/MenuToggle/MenuToggle.js.map +1 -1
  54. package/dist/js/components/Page/PageSection.d.ts +2 -0
  55. package/dist/js/components/Page/PageSection.d.ts.map +1 -1
  56. package/dist/js/components/Page/PageSection.js +3 -2
  57. package/dist/js/components/Page/PageSection.js.map +1 -1
  58. package/dist/js/components/SearchInput/SearchInput.d.ts.map +1 -1
  59. package/dist/js/components/SearchInput/SearchInput.js +2 -1
  60. package/dist/js/components/SearchInput/SearchInput.js.map +1 -1
  61. package/dist/js/components/TextInputGroup/TextInputGroup.d.ts.map +1 -1
  62. package/dist/js/components/TextInputGroup/TextInputGroup.js +2 -1
  63. package/dist/js/components/TextInputGroup/TextInputGroup.js.map +1 -1
  64. package/dist/js/components/TextInputGroup/TextInputGroupMain.d.ts.map +1 -1
  65. package/dist/js/components/TextInputGroup/TextInputGroupMain.js +2 -1
  66. package/dist/js/components/TextInputGroup/TextInputGroupMain.js.map +1 -1
  67. package/dist/js/next/components/Wizard/WizardToggle.d.ts.map +1 -1
  68. package/dist/js/next/components/Wizard/WizardToggle.js +32 -31
  69. package/dist/js/next/components/Wizard/WizardToggle.js.map +1 -1
  70. package/dist/umd/react-core.min.css +1337 -1337
  71. package/dist/umd/react-core.min.js +2 -2
  72. package/package.json +5 -5
  73. package/src/components/Dropdown/__tests__/Dropdown.test.tsx +1 -1
  74. package/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx +1 -1
  75. package/src/components/DualListSelector/DualListSelectorControl.tsx +2 -1
  76. package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx +2 -1
  77. package/src/components/DualListSelector/DualListSelectorListItem.tsx +2 -1
  78. package/src/components/DualListSelector/DualListSelectorListWrapper.tsx +2 -1
  79. package/src/components/InputGroup/InputGroup.tsx +2 -1
  80. package/src/components/MenuToggle/MenuToggle.tsx +7 -1
  81. package/src/components/Page/PageSection.tsx +7 -2
  82. package/src/components/Page/__tests__/PageSection.test.tsx +12 -0
  83. package/src/components/SearchInput/SearchInput.tsx +2 -1
  84. package/src/components/TextInputGroup/TextInputGroup.tsx +2 -1
  85. package/src/components/TextInputGroup/TextInputGroupMain.tsx +2 -1
  86. package/src/next/components/Wizard/WizardToggle.tsx +87 -85
package/dist/umd/react-core.min.css CHANGED
@@ -4,23 +4,6 @@
4
4
  pointer-events: none;
5
5
  }
6
6
 
7
- .pf-c-backdrop {
8
- --pf-c-backdrop--Position: fixed;
9
- --pf-c-backdrop--ZIndex: var(--pf-global--ZIndex--lg);
10
- --pf-c-backdrop--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
11
- position: var(--pf-c-backdrop--Position);
12
- top: 0;
13
- left: 0;
14
- z-index: var(--pf-c-backdrop--ZIndex);
15
- width: 100%;
16
- height: 100%;
17
- background-color: var(--pf-c-backdrop--BackgroundColor);
18
- }
19
-
20
- .pf-c-backdrop__open {
21
- overflow: hidden;
22
- }
23
-
24
7
  .pf-c-accordion {
25
8
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
26
9
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -1626,6 +1609,23 @@ textarea.pf-c-form-control {
1626
1609
  display: block;
1627
1610
  }
1628
1611
 
1612
+ .pf-c-backdrop {
1613
+ --pf-c-backdrop--Position: fixed;
1614
+ --pf-c-backdrop--ZIndex: var(--pf-global--ZIndex--lg);
1615
+ --pf-c-backdrop--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
1616
+ position: var(--pf-c-backdrop--Position);
1617
+ top: 0;
1618
+ left: 0;
1619
+ z-index: var(--pf-c-backdrop--ZIndex);
1620
+ width: 100%;
1621
+ height: 100%;
1622
+ background-color: var(--pf-c-backdrop--BackgroundColor);
1623
+ }
1624
+
1625
+ .pf-c-backdrop__open {
1626
+ overflow: hidden;
1627
+ }
1628
+
1629
1629
  .pf-c-badge {
1630
1630
  --pf-c-badge--BorderRadius: var(--pf-global--BorderRadius--lg);
1631
1631
  --pf-c-badge--FontSize: var(--pf-global--FontSize--xs);
@@ -2014,366 +2014,605 @@ button.pf-c-breadcrumb__link {
2014
2014
  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
2015
2015
  }
2016
2016
 
2017
- .pf-c-button {
2018
- --pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
2019
- --pf-c-button--PaddingRight: var(--pf-global--spacer--md);
2020
- --pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element);
2021
- --pf-c-button--PaddingLeft: var(--pf-global--spacer--md);
2022
- --pf-c-button--LineHeight: var(--pf-global--LineHeight--md);
2023
- --pf-c-button--FontWeight: var(--pf-global--FontWeight--normal);
2024
- --pf-c-button--FontSize: var(--pf-global--FontSize--md);
2025
- --pf-c-button--BackgroundColor: transparent;
2026
- --pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm);
2027
- --pf-c-button--after--BorderRadius: var(--pf-global--BorderRadius--sm);
2028
- --pf-c-button--after--BorderColor: transparent;
2029
- --pf-c-button--after--BorderWidth: var(--pf-global--BorderWidth--sm);
2030
- --pf-c-button--hover--after--BorderWidth: var(--pf-global--BorderWidth--md);
2031
- --pf-c-button--focus--after--BorderWidth: var(--pf-global--BorderWidth--md);
2032
- --pf-c-button--active--after--BorderWidth: var(--pf-global--BorderWidth--md);
2033
- --pf-c-button--disabled--Color: var(--pf-global--disabled-color--100);
2034
- --pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
2035
- --pf-c-button--disabled--after--BorderColor: transparent;
2036
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
2037
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
2038
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
2039
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
2040
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
2041
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
2042
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
2043
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
2044
- --pf-c-button--m-secondary--BackgroundColor: transparent;
2045
- --pf-c-button--m-secondary--after--BorderColor: var(--pf-global--primary-color--100);
2046
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
2047
- --pf-c-button--m-secondary--hover--BackgroundColor: transparent;
2048
- --pf-c-button--m-secondary--hover--after--BorderColor: var(--pf-global--primary-color--100);
2049
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
2050
- --pf-c-button--m-secondary--focus--BackgroundColor: transparent;
2051
- --pf-c-button--m-secondary--focus--after--BorderColor: var(--pf-global--primary-color--100);
2052
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
2053
- --pf-c-button--m-secondary--active--BackgroundColor: transparent;
2054
- --pf-c-button--m-secondary--active--after--BorderColor: var(--pf-global--primary-color--100);
2055
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
2056
- --pf-c-button--m-secondary--m-danger--BackgroundColor: transparent;
2057
- --pf-c-button--m-secondary--m-danger--Color: var(--pf-global--danger-color--100);
2058
- --pf-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-global--danger-color--100);
2059
- --pf-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
2060
- --pf-c-button--m-secondary--m-danger--hover--Color: var(--pf-global--danger-color--200);
2061
- --pf-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-global--danger-color--100);
2062
- --pf-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
2063
- --pf-c-button--m-secondary--m-danger--focus--Color: var(--pf-global--danger-color--200);
2064
- --pf-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-global--danger-color--100);
2065
- --pf-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
2066
- --pf-c-button--m-secondary--m-danger--active--Color: var(--pf-global--danger-color--200);
2067
- --pf-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-global--danger-color--100);
2068
- --pf-c-button--m-tertiary--BackgroundColor: transparent;
2069
- --pf-c-button--m-tertiary--after--BorderColor: var(--pf-global--Color--100);
2070
- --pf-c-button--m-tertiary--Color: var(--pf-global--Color--100);
2071
- --pf-c-button--m-tertiary--hover--BackgroundColor: transparent;
2072
- --pf-c-button--m-tertiary--hover--after--BorderColor: var(--pf-global--Color--100);
2073
- --pf-c-button--m-tertiary--hover--Color: var(--pf-global--Color--100);
2074
- --pf-c-button--m-tertiary--focus--BackgroundColor: transparent;
2075
- --pf-c-button--m-tertiary--focus--after--BorderColor: var(--pf-global--Color--100);
2076
- --pf-c-button--m-tertiary--focus--Color: var(--pf-global--Color--100);
2077
- --pf-c-button--m-tertiary--active--BackgroundColor: transparent;
2078
- --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--Color--100);
2079
- --pf-c-button--m-tertiary--active--Color: var(--pf-global--Color--100);
2080
- --pf-c-button--m-warning--BackgroundColor: var(--pf-global--warning-color--100);
2081
- --pf-c-button--m-warning--Color: var(--pf-global--Color--dark-100);
2082
- --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--palette--gold-500);
2083
- --pf-c-button--m-warning--hover--Color: var(--pf-global--Color--dark-100);
2084
- --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--palette--gold-500);
2085
- --pf-c-button--m-warning--focus--Color: var(--pf-global--Color--dark-100);
2086
- --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--palette--gold-500);
2087
- --pf-c-button--m-warning--active--Color: var(--pf-global--Color--dark-100);
2088
- --pf-c-button--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
2089
- --pf-c-button--m-danger--Color: var(--pf-global--Color--light-100);
2090
- --pf-c-button--m-danger--hover--BackgroundColor: var(--pf-global--danger-color--200);
2091
- --pf-c-button--m-danger--hover--Color: var(--pf-global--Color--light-100);
2092
- --pf-c-button--m-danger--focus--BackgroundColor: var(--pf-global--danger-color--200);
2093
- --pf-c-button--m-danger--focus--Color: var(--pf-global--Color--light-100);
2094
- --pf-c-button--m-danger--active--BackgroundColor: var(--pf-global--danger-color--200);
2095
- --pf-c-button--m-danger--active--Color: var(--pf-global--Color--light-100);
2096
- --pf-c-button--m-link--BackgroundColor: transparent;
2097
- --pf-c-button--m-link--Color: var(--pf-global--link--Color);
2098
- --pf-c-button--m-link--hover--BackgroundColor: transparent;
2099
- --pf-c-button--m-link--hover--Color: var(--pf-global--link--Color--hover);
2100
- --pf-c-button--m-link--focus--BackgroundColor: transparent;
2101
- --pf-c-button--m-link--focus--Color: var(--pf-global--link--Color--hover);
2102
- --pf-c-button--m-link--active--BackgroundColor: transparent;
2103
- --pf-c-button--m-link--active--Color: var(--pf-global--link--Color--hover);
2104
- --pf-c-button--m-link--disabled--BackgroundColor: transparent;
2105
- --pf-c-button--m-link--m-inline--FontSize: inherit;
2106
- --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
2107
- --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
2108
- --pf-c-button--m-link--m-danger--BackgroundColor: transparent;
2109
- --pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100);
2110
- --pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
2111
- --pf-c-button--m-link--m-danger--hover--Color: var(--pf-global--danger-color--200);
2112
- --pf-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
2113
- --pf-c-button--m-link--m-danger--focus--Color: var(--pf-global--danger-color--200);
2114
- --pf-c-button--m-link--m-danger--active--BackgroundColor: transparent;
2115
- --pf-c-button--m-link--m-danger--active--Color: var(--pf-global--danger-color--200);
2116
- --pf-c-button--m-plain--BackgroundColor: transparent;
2117
- --pf-c-button--m-plain--Color: var(--pf-global--Color--200);
2118
- --pf-c-button--m-plain--hover--BackgroundColor: transparent;
2119
- --pf-c-button--m-plain--hover--Color: var(--pf-global--Color--100);
2120
- --pf-c-button--m-plain--focus--BackgroundColor: transparent;
2121
- --pf-c-button--m-plain--focus--Color: var(--pf-global--Color--100);
2122
- --pf-c-button--m-plain--active--BackgroundColor: transparent;
2123
- --pf-c-button--m-plain--active--Color: var(--pf-global--Color--100);
2124
- --pf-c-button--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
2125
- --pf-c-button--m-plain--disabled--BackgroundColor: transparent;
2126
- --pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--100);
2127
- --pf-c-button--m-control--Color: var(--pf-global--Color--100);
2128
- --pf-c-button--m-control--BorderRadius: 0;
2129
- --pf-c-button--m-control--after--BorderWidth: var(--pf-global--BorderWidth--sm);
2130
- --pf-c-button--m-control--after--BorderTopColor: var(--pf-global--BorderColor--300);
2131
- --pf-c-button--m-control--after--BorderRightColor: var(--pf-global--BorderColor--300);
2132
- --pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--200);
2133
- --pf-c-button--m-control--after--BorderLeftColor: var(--pf-global--BorderColor--300);
2134
- --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
2135
- --pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
2136
- --pf-c-button--m-control--hover--Color: var(--pf-global--Color--100);
2137
- --pf-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
2138
- --pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--active-color--100);
2139
- --pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
2140
- --pf-c-button--m-control--active--Color: var(--pf-global--Color--100);
2141
- --pf-c-button--m-control--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
2142
- --pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--active-color--100);
2143
- --pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
2144
- --pf-c-button--m-control--focus--Color: var(--pf-global--Color--100);
2145
- --pf-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
2146
- --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--active-color--100);
2147
- --pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--100);
2148
- --pf-c-button--m-control--m-expanded--Color: var(--pf-global--Color--100);
2149
- --pf-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
2150
- --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
2151
- --pf-c-button--m-small--FontSize: var(--pf-global--FontSize--sm);
2152
- --pf-c-button--m-display-lg--PaddingTop: var(--pf-global--spacer--md);
2153
- --pf-c-button--m-display-lg--PaddingRight: var(--pf-global--spacer--xl);
2154
- --pf-c-button--m-display-lg--PaddingBottom: var(--pf-global--spacer--md);
2155
- --pf-c-button--m-display-lg--PaddingLeft: var(--pf-global--spacer--xl);
2156
- --pf-c-button--m-display-lg--FontWeight: var(--pf-global--FontWeight--bold);
2157
- --pf-c-button--m-link--m-display-lg--FontSize: var(--pf-global--FontSize--lg);
2158
- --pf-c-button__icon--m-start--MarginRight: var(--pf-global--spacer--xs);
2159
- --pf-c-button__icon--m-end--MarginLeft: var(--pf-global--spacer--xs);
2160
- --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
2161
- --pf-c-button__progress--Opacity: 0;
2162
- --pf-c-button__progress--TranslateY: -50%;
2163
- --pf-c-button__progress--TranslateX: 0;
2164
- --pf-c-button__progress--Top: 50%;
2165
- --pf-c-button__progress--Left: var(--pf-global--spacer--md);
2166
- --pf-c-button--m-progress--TransitionProperty: padding;
2167
- --pf-c-button--m-progress--TransitionDuration: var(--pf-global--TransitionDuration);
2168
- --pf-c-button--m-progress--PaddingRight: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
2169
- --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
2170
- --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
2171
- --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
2172
- --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
2173
- --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
2174
- --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
2175
- --pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm);
2176
- --pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100);
2177
- --pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200);
2178
- --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300);
2179
- --pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm);
2180
- position: relative;
2181
- display: inline-block;
2182
- padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
2183
- font-size: var(--pf-c-button--FontSize);
2184
- font-weight: var(--pf-c-button--FontWeight);
2185
- line-height: var(--pf-c-button--LineHeight);
2186
- text-align: center;
2187
- white-space: nowrap;
2188
- user-select: none;
2189
- border: 0;
2190
- border-radius: var(--pf-c-button--BorderRadius);
2191
- }
2192
-
2193
- .pf-c-button::after {
2194
- position: absolute;
2195
- top: 0;
2196
- right: 0;
2197
- bottom: 0;
2198
- left: 0;
2199
- pointer-events: none;
2200
- content: "";
2201
- border: var(--pf-c-button--after--BorderWidth) solid;
2202
- border-color: var(--pf-c-button--after--BorderColor);
2203
- border-radius: var(--pf-c-button--after--BorderRadius);
2204
- }
2205
-
2206
- .pf-c-button:hover {
2207
- --pf-c-button--after--BorderWidth: var(--pf-c-button--hover--after--BorderWidth);
2208
- text-decoration: none;
2209
- }
2210
-
2211
- .pf-c-button:focus {
2212
- --pf-c-button--after--BorderWidth: var(--pf-c-button--focus--after--BorderWidth);
2213
- }
2214
-
2215
- .pf-c-button:active, .pf-c-button.pf-m-active {
2216
- --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth);
2217
- }
2218
-
2219
- .pf-c-button.pf-m-block {
2220
- display: block;
2221
- width: 100%;
2222
- }
2223
-
2224
- .pf-c-button.pf-m-small {
2225
- --pf-c-button--FontSize: var(--pf-c-button--m-small--FontSize);
2017
+ .pf-c-calendar-month {
2018
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
2019
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
2020
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
2021
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
2022
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
2023
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
2024
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
2226
2025
  }
2227
2026
 
2228
- .pf-c-button.pf-m-primary.pf-m-display-lg, .pf-c-button.pf-m-secondary.pf-m-display-lg, .pf-c-button.pf-m-tertiary.pf-m-display-lg, .pf-c-button.pf-m-link.pf-m-display-lg {
2229
- --pf-c-button--PaddingTop: var(--pf-c-button--m-display-lg--PaddingTop);
2230
- --pf-c-button--PaddingRight: var(--pf-c-button--m-display-lg--PaddingRight);
2231
- --pf-c-button--PaddingBottom: var(--pf-c-button--m-display-lg--PaddingBottom);
2232
- --pf-c-button--PaddingLeft: var(--pf-c-button--m-display-lg--PaddingLeft);
2233
- --pf-c-button--FontWeight: var(--pf-c-button--m-display-lg--FontWeight);
2027
+ .pf-c-calendar-month {
2028
+ --pf-c-calendar-month--BackgroundColor: var(--pf-global--BackgroundColor--100);
2029
+ --pf-c-calendar-month--PaddingTop: var(--pf-global--spacer--lg);
2030
+ --pf-c-calendar-month--PaddingRight: var(--pf-global--spacer--lg);
2031
+ --pf-c-calendar-month--PaddingBottom: var(--pf-global--spacer--md);
2032
+ --pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
2033
+ --pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
2034
+ --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
2035
+ --pf-c-calendar-month__header-year--Width: 8ch;
2036
+ --pf-c-calendar-month__header-nav-control--MarginRight: 0;
2037
+ --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
2038
+ --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;
2039
+ --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: 0;
2040
+ --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: 0;
2041
+ --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: 0;
2042
+ --pf-c-calendar-month__days--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
2043
+ --pf-c-calendar-month__days--BorderBottomColor: var(--pf-global--BorderColor--100);
2044
+ --pf-c-calendar-month__day--PaddingBottom: var(--pf-global--spacer--md);
2045
+ --pf-c-calendar-month__day--FontWeight: var(--pf-global--FontWeight--normal);
2046
+ --pf-c-calendar-month__dates-cell--PaddingTop: 0.125rem;
2047
+ --pf-c-calendar-month__dates-cell--PaddingRight: 0.125rem;
2048
+ --pf-c-calendar-month__dates-cell--PaddingBottom: 0.125rem;
2049
+ --pf-c-calendar-month__dates-cell--PaddingLeft: 0.125rem;
2050
+ --pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-global--spacer--sm);
2051
+ --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--BackgroundColor--200);
2052
+ --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--active-color--100);
2053
+ --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-global--active-color--100);
2054
+ --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-global--primary-color--200);
2055
+ --pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-global--primary-color--200);
2056
+ --pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow: 0 0 0.3125rem var(--pf-global--primary-color--100);
2057
+ --pf-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-global--Color--light-100);
2058
+ --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
2059
+ --pf-c-calendar-month__dates-cell--before--Top: 0;
2060
+ --pf-c-calendar-month__dates-cell--before--Right: 0;
2061
+ --pf-c-calendar-month__dates-cell--before--Bottom: var(--pf-c-calendar-month__dates-cell--PaddingBottom);
2062
+ --pf-c-calendar-month__dates-cell--before--Left: 0;
2063
+ --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-global--palette--blue-50);
2064
+ --pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left: 50%;
2065
+ --pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right: 50%;
2066
+ --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-global--palette--blue-100);
2067
+ --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-global--palette--blue-100);
2068
+ --pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-global--disabled-color--100);
2069
+ --pf-c-calendar-month__date--Width: 4ch;
2070
+ --pf-c-calendar-month__date--Height: 4ch;
2071
+ --pf-c-calendar-month__date--BorderRadius: var(--pf-global--BorderRadius--lg);
2072
+ --pf-c-calendar-month__date--Color: var(--pf-global--Color--100);
2073
+ --pf-c-calendar-month__date--BackgroundColor: transparent;
2074
+ --pf-c-calendar-month__date--disabled--Color: var(--pf-global--disabled-color--200);
2075
+ --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--md);
2076
+ --pf-c-calendar-month__date--after--BorderColor: transparent;
2077
+ --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-global--palette--blue-50);
2078
+ --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-global--palette--blue-50);
2079
+ --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-global--active-color--100);
2080
+ --pf-c-calendar-month__date--focus--BoxShadow: none;
2081
+ color: var(--pf-global--Color--100);
2082
+ display: inline-flex;
2083
+ flex-direction: column;
2084
+ 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);
2085
+ font-size: var(--pf-c-calendar-month--FontSize);
2086
+ background-color: var(--pf-c-calendar-month--BackgroundColor);
2234
2087
  }
2235
2088
 
2236
- .pf-c-button.pf-m-primary {
2237
- color: var(--pf-c-button--m-primary--Color);
2238
- background-color: var(--pf-c-button--m-primary--BackgroundColor);
2089
+ .pf-c-calendar-month__header {
2090
+ display: flex;
2091
+ margin-bottom: var(--pf-c-calendar-month__header--MarginBottom);
2239
2092
  }
2240
2093
 
2241
- .pf-c-button.pf-m-primary:hover {
2242
- --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color);
2243
- --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor);
2094
+ .pf-c-calendar-month__header-nav-control {
2095
+ margin-right: var(--pf-c-calendar-month__header-nav-control--MarginRight);
2096
+ margin-left: var(--pf-c-calendar-month__header-nav-control--MarginLeft);
2244
2097
  }
2245
2098
 
2246
- .pf-c-button.pf-m-primary:focus {
2247
- --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color);
2248
- --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--focus--BackgroundColor);
2099
+ .pf-c-calendar-month__header-nav-control.pf-m-prev-month {
2100
+ --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
2101
+ --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
2249
2102
  }
2250
2103
 
2251
- .pf-c-button.pf-m-primary:active, .pf-c-button.pf-m-primary.pf-m-active {
2252
- --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color);
2253
- --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor);
2104
+ .pf-c-calendar-month__header-nav-control.pf-m-next-month {
2105
+ --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginRight);
2106
+ --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft);
2254
2107
  }
2255
2108
 
2256
- .pf-c-button.pf-m-primary .pf-c-badge.pf-m-unread {
2257
- border: var(--pf-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-c-button--m-primary__c-badge--BorderColor);
2109
+ .pf-c-calendar-month__header-month {
2110
+ flex-grow: 1;
2258
2111
  }
2259
2112
 
2260
- .pf-c-button.pf-m-secondary {
2261
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor);
2262
- color: var(--pf-c-button--m-secondary--Color);
2263
- background-color: var(--pf-c-button--m-secondary--BackgroundColor);
2113
+ .pf-c-calendar-month__header-year {
2114
+ width: var(--pf-c-calendar-month__header-year--Width);
2264
2115
  }
2265
2116
 
2266
- .pf-c-button.pf-m-secondary:hover {
2267
- --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--hover--Color);
2268
- --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--hover--BackgroundColor);
2269
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--hover--after--BorderColor);
2117
+ .pf-c-calendar-month__calendar {
2118
+ table-layout: fixed;
2270
2119
  }
2271
2120
 
2272
- .pf-c-button.pf-m-secondary:focus {
2273
- --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color);
2274
- --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--focus--BackgroundColor);
2275
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--focus--after--BorderColor);
2121
+ .pf-c-calendar-month__days {
2122
+ border-bottom: var(--pf-c-calendar-month__days--BorderBottomWidth) solid var(--pf-c-calendar-month__days--BorderBottomColor);
2276
2123
  }
2277
2124
 
2278
- .pf-c-button.pf-m-secondary.pf-m-active, .pf-c-button.pf-m-secondary:active {
2279
- --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color);
2280
- --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor);
2281
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor);
2125
+ .pf-c-calendar-month__day {
2126
+ padding-bottom: var(--pf-c-calendar-month__day--PaddingBottom);
2127
+ font-weight: var(--pf-c-calendar-month__day--FontWeight);
2128
+ text-align: center;
2282
2129
  }
2283
2130
 
2284
- .pf-c-button.pf-m-tertiary {
2285
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor);
2286
- color: var(--pf-c-button--m-tertiary--Color);
2287
- background-color: var(--pf-c-button--m-tertiary--BackgroundColor);
2131
+ .pf-c-calendar-month__dates-row:first-child {
2132
+ --pf-c-calendar-month__dates-cell--PaddingTop: var(--pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop);
2288
2133
  }
2289
2134
 
2290
- .pf-c-button.pf-m-tertiary:hover {
2291
- --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--hover--Color);
2292
- --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--hover--BackgroundColor);
2293
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor);
2135
+ .pf-c-calendar-month__dates-cell {
2136
+ --pf-c-calendar-month__dates-cell--before--Top: var(--pf-c-calendar-month__dates-cell--PaddingTop);
2137
+ position: relative;
2138
+ 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);
2139
+ text-align: center;
2294
2140
  }
2295
2141
 
2296
- .pf-c-button.pf-m-tertiary:focus {
2297
- --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color);
2298
- --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--focus--BackgroundColor);
2299
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--focus--after--BorderColor);
2142
+ .pf-c-calendar-month__dates-cell::before {
2143
+ position: absolute;
2144
+ top: var(--pf-c-calendar-month__dates-cell--before--Top);
2145
+ right: var(--pf-c-calendar-month__dates-cell--before--Right);
2146
+ bottom: var(--pf-c-calendar-month__dates-cell--before--Bottom);
2147
+ left: var(--pf-c-calendar-month__dates-cell--before--Left);
2148
+ content: "";
2149
+ background-color: var(--pf-c-calendar-month__dates-cell--before--BackgroundColor);
2300
2150
  }
2301
2151
 
2302
- .pf-c-button.pf-m-tertiary:active, .pf-c-button.pf-m-tertiary.pf-m-active {
2303
- --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color);
2304
- --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor);
2305
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor);
2152
+ .pf-c-calendar-month__dates-cell.pf-m-current {
2153
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
2306
2154
  }
2307
2155
 
2308
- .pf-c-button.pf-m-link {
2309
- --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor);
2310
- color: var(--pf-c-button--m-link--Color);
2311
- background-color: var(--pf-c-button--m-link--BackgroundColor);
2156
+ .pf-c-calendar-month__dates-cell.pf-m-in-range {
2157
+ --pf-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
2158
+ --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
2159
+ --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor);
2312
2160
  }
2313
2161
 
2314
- .pf-c-button.pf-m-link:not(.pf-m-inline):hover {
2315
- --pf-c-button--m-link--Color: var(--pf-c-button--m-link--hover--Color);
2316
- --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor);
2162
+ .pf-c-calendar-month__dates-cell.pf-m-start-range {
2163
+ --pf-c-calendar-month__dates-cell--before--Left: var(--pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left);
2317
2164
  }
2318
2165
 
2319
- .pf-c-button.pf-m-link:not(.pf-m-inline):focus {
2320
- --pf-c-button--m-link--Color: var(--pf-c-button--m-link--focus--Color);
2321
- --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--focus--BackgroundColor);
2166
+ .pf-c-calendar-month__dates-cell.pf-m-end-range {
2167
+ --pf-c-calendar-month__dates-cell--before--Right: var(--pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right);
2322
2168
  }
2323
2169
 
2324
- .pf-c-button.pf-m-link:not(.pf-m-inline):active, .pf-c-button.pf-m-link:not(.pf-m-inline).pf-m-active {
2325
- --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color);
2326
- --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor);
2170
+ .pf-c-calendar-month__dates-cell.pf-m-adjacent-month {
2171
+ --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color);
2327
2172
  }
2328
2173
 
2329
- .pf-c-button.pf-m-link.pf-m-inline {
2330
- --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
2331
- display: inline;
2332
- padding: 0;
2333
- text-align: left;
2334
- white-space: normal;
2335
- cursor: pointer;
2174
+ .pf-c-calendar-month__dates-cell.pf-m-selected {
2175
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
2176
+ --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
2177
+ --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
2178
+ --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
2179
+ --pf-c-calendar-month__date--focus--BoxShadow: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow);
2180
+ --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-selected__date--Color);
2336
2181
  }
2337
2182
 
2338
- .pf-c-button.pf-m-link.pf-m-inline:hover {
2339
- --pf-c-button--m-link--Color: var(--pf-c-button--m-link--m-inline--hover--Color);
2340
- text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration);
2183
+ .pf-c-calendar-month__dates-cell.pf-m-disabled {
2184
+ --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
2185
+ --pf-c-calendar-month__date--BackgroundColor: transparent;
2341
2186
  }
2342
2187
 
2343
- .pf-c-button.pf-m-link.pf-m-display-lg {
2344
- --pf-c-button--FontSize: var(--pf-c-button--m-link--m-display-lg--FontSize);
2188
+ .pf-c-calendar-month__date {
2189
+ position: relative;
2190
+ display: inline-flex;
2191
+ align-items: center;
2192
+ justify-content: center;
2193
+ width: var(--pf-c-calendar-month__date--Width);
2194
+ height: var(--pf-c-calendar-month__date--Height);
2195
+ line-height: 1;
2196
+ color: var(--pf-c-calendar-month__date--Color);
2197
+ background-color: var(--pf-c-calendar-month__date--BackgroundColor);
2198
+ border: 0;
2345
2199
  }
2346
2200
 
2347
- .pf-c-button.pf-m-danger {
2348
- color: var(--pf-c-button--m-danger--Color);
2349
- background-color: var(--pf-c-button--m-danger--BackgroundColor);
2201
+ .pf-c-calendar-month__date::after {
2202
+ position: absolute;
2203
+ top: 0;
2204
+ right: 0;
2205
+ bottom: 0;
2206
+ left: 0;
2207
+ content: "";
2208
+ border: var(--pf-c-calendar-month__date--after--BorderWidth) solid var(--pf-c-calendar-month__date--after--BorderColor);
2350
2209
  }
2351
2210
 
2352
- .pf-c-button.pf-m-danger:hover {
2353
- --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--hover--Color);
2354
- --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--BackgroundColor);
2211
+ .pf-c-calendar-month__date, .pf-c-calendar-month__date::after {
2212
+ border-radius: var(--pf-c-calendar-month__date--BorderRadius);
2355
2213
  }
2356
2214
 
2357
- .pf-c-button.pf-m-danger:focus {
2358
- --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--focus--Color);
2359
- --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--focus--BackgroundColor);
2215
+ .pf-c-calendar-month__date:hover, .pf-c-calendar-month__date.pf-m-hover {
2216
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--hover--BackgroundColor);
2360
2217
  }
2361
2218
 
2362
- .pf-c-button.pf-m-danger:active, .pf-c-button.pf-m-danger.pf-m-active {
2363
- --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color);
2364
- --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor);
2219
+ .pf-c-calendar-month__date:focus, .pf-c-calendar-month__date.pf-m-focus {
2220
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--focus--BackgroundColor);
2221
+ --pf-c-calendar-month__date--after--BorderColor: var(--pf-c-calendar-month__date--focus--after--BorderColor);
2222
+ outline: 0;
2223
+ box-shadow: var(--pf-c-calendar-month__date--focus--BoxShadow);
2365
2224
  }
2366
2225
 
2367
- .pf-c-button.pf-m-danger.pf-m-secondary {
2368
- --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--Color);
2369
- --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--BackgroundColor);
2370
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor);
2226
+ .pf-c-calendar-month__date:disabled {
2227
+ pointer-events: none;
2228
+ --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
2229
+ --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
2371
2230
  }
2372
2231
 
2373
- .pf-c-button.pf-m-danger.pf-m-secondary:hover {
2374
- --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--hover--Color);
2375
- --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor);
2376
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor);
2232
+ :where(.pf-theme-dark) .pf-c-calendar-month {
2233
+ --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--palette--black-500);
2234
+ --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--primary-color--300);
2235
+ --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-global--palette--black-900);
2236
+ --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-global--palette--blue-400);
2237
+ --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-global--BackgroundColor--200);
2238
+ --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
2239
+ --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
2240
+ --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
2241
+ --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
2242
+ --pf-c-calendar-month__date--focus--after--BorderColor: transparent;
2243
+ }
2244
+
2245
+ :where(.pf-theme-dark) .pf-c-calendar-month__date:hover, :where(.pf-theme-dark) .pf-c-calendar-month__date.pf-m-hover {
2246
+ --pf-c-calendar-month__date--after--BorderColor: var(--pf-global--BorderColor--100);
2247
+ --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--sm);
2248
+ }
2249
+
2250
+ :where(.pf-theme-dark) .pf-c-calendar-month__date:focus, :where(.pf-theme-dark) .pf-c-calendar-month__date.pf-m-focus {
2251
+ --pf-c-calendar-month__date--after--BorderColor: var(--pf-global--active-color--100);
2252
+ --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--sm);
2253
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-global--primary-color--300);
2254
+ }
2255
+
2256
+ .pf-c-button {
2257
+ --pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
2258
+ --pf-c-button--PaddingRight: var(--pf-global--spacer--md);
2259
+ --pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element);
2260
+ --pf-c-button--PaddingLeft: var(--pf-global--spacer--md);
2261
+ --pf-c-button--LineHeight: var(--pf-global--LineHeight--md);
2262
+ --pf-c-button--FontWeight: var(--pf-global--FontWeight--normal);
2263
+ --pf-c-button--FontSize: var(--pf-global--FontSize--md);
2264
+ --pf-c-button--BackgroundColor: transparent;
2265
+ --pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm);
2266
+ --pf-c-button--after--BorderRadius: var(--pf-global--BorderRadius--sm);
2267
+ --pf-c-button--after--BorderColor: transparent;
2268
+ --pf-c-button--after--BorderWidth: var(--pf-global--BorderWidth--sm);
2269
+ --pf-c-button--hover--after--BorderWidth: var(--pf-global--BorderWidth--md);
2270
+ --pf-c-button--focus--after--BorderWidth: var(--pf-global--BorderWidth--md);
2271
+ --pf-c-button--active--after--BorderWidth: var(--pf-global--BorderWidth--md);
2272
+ --pf-c-button--disabled--Color: var(--pf-global--disabled-color--100);
2273
+ --pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
2274
+ --pf-c-button--disabled--after--BorderColor: transparent;
2275
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
2276
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
2277
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
2278
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
2279
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
2280
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
2281
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
2282
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
2283
+ --pf-c-button--m-secondary--BackgroundColor: transparent;
2284
+ --pf-c-button--m-secondary--after--BorderColor: var(--pf-global--primary-color--100);
2285
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
2286
+ --pf-c-button--m-secondary--hover--BackgroundColor: transparent;
2287
+ --pf-c-button--m-secondary--hover--after--BorderColor: var(--pf-global--primary-color--100);
2288
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
2289
+ --pf-c-button--m-secondary--focus--BackgroundColor: transparent;
2290
+ --pf-c-button--m-secondary--focus--after--BorderColor: var(--pf-global--primary-color--100);
2291
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
2292
+ --pf-c-button--m-secondary--active--BackgroundColor: transparent;
2293
+ --pf-c-button--m-secondary--active--after--BorderColor: var(--pf-global--primary-color--100);
2294
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
2295
+ --pf-c-button--m-secondary--m-danger--BackgroundColor: transparent;
2296
+ --pf-c-button--m-secondary--m-danger--Color: var(--pf-global--danger-color--100);
2297
+ --pf-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-global--danger-color--100);
2298
+ --pf-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
2299
+ --pf-c-button--m-secondary--m-danger--hover--Color: var(--pf-global--danger-color--200);
2300
+ --pf-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-global--danger-color--100);
2301
+ --pf-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
2302
+ --pf-c-button--m-secondary--m-danger--focus--Color: var(--pf-global--danger-color--200);
2303
+ --pf-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-global--danger-color--100);
2304
+ --pf-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
2305
+ --pf-c-button--m-secondary--m-danger--active--Color: var(--pf-global--danger-color--200);
2306
+ --pf-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-global--danger-color--100);
2307
+ --pf-c-button--m-tertiary--BackgroundColor: transparent;
2308
+ --pf-c-button--m-tertiary--after--BorderColor: var(--pf-global--Color--100);
2309
+ --pf-c-button--m-tertiary--Color: var(--pf-global--Color--100);
2310
+ --pf-c-button--m-tertiary--hover--BackgroundColor: transparent;
2311
+ --pf-c-button--m-tertiary--hover--after--BorderColor: var(--pf-global--Color--100);
2312
+ --pf-c-button--m-tertiary--hover--Color: var(--pf-global--Color--100);
2313
+ --pf-c-button--m-tertiary--focus--BackgroundColor: transparent;
2314
+ --pf-c-button--m-tertiary--focus--after--BorderColor: var(--pf-global--Color--100);
2315
+ --pf-c-button--m-tertiary--focus--Color: var(--pf-global--Color--100);
2316
+ --pf-c-button--m-tertiary--active--BackgroundColor: transparent;
2317
+ --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--Color--100);
2318
+ --pf-c-button--m-tertiary--active--Color: var(--pf-global--Color--100);
2319
+ --pf-c-button--m-warning--BackgroundColor: var(--pf-global--warning-color--100);
2320
+ --pf-c-button--m-warning--Color: var(--pf-global--Color--dark-100);
2321
+ --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--palette--gold-500);
2322
+ --pf-c-button--m-warning--hover--Color: var(--pf-global--Color--dark-100);
2323
+ --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--palette--gold-500);
2324
+ --pf-c-button--m-warning--focus--Color: var(--pf-global--Color--dark-100);
2325
+ --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--palette--gold-500);
2326
+ --pf-c-button--m-warning--active--Color: var(--pf-global--Color--dark-100);
2327
+ --pf-c-button--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
2328
+ --pf-c-button--m-danger--Color: var(--pf-global--Color--light-100);
2329
+ --pf-c-button--m-danger--hover--BackgroundColor: var(--pf-global--danger-color--200);
2330
+ --pf-c-button--m-danger--hover--Color: var(--pf-global--Color--light-100);
2331
+ --pf-c-button--m-danger--focus--BackgroundColor: var(--pf-global--danger-color--200);
2332
+ --pf-c-button--m-danger--focus--Color: var(--pf-global--Color--light-100);
2333
+ --pf-c-button--m-danger--active--BackgroundColor: var(--pf-global--danger-color--200);
2334
+ --pf-c-button--m-danger--active--Color: var(--pf-global--Color--light-100);
2335
+ --pf-c-button--m-link--BackgroundColor: transparent;
2336
+ --pf-c-button--m-link--Color: var(--pf-global--link--Color);
2337
+ --pf-c-button--m-link--hover--BackgroundColor: transparent;
2338
+ --pf-c-button--m-link--hover--Color: var(--pf-global--link--Color--hover);
2339
+ --pf-c-button--m-link--focus--BackgroundColor: transparent;
2340
+ --pf-c-button--m-link--focus--Color: var(--pf-global--link--Color--hover);
2341
+ --pf-c-button--m-link--active--BackgroundColor: transparent;
2342
+ --pf-c-button--m-link--active--Color: var(--pf-global--link--Color--hover);
2343
+ --pf-c-button--m-link--disabled--BackgroundColor: transparent;
2344
+ --pf-c-button--m-link--m-inline--FontSize: inherit;
2345
+ --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
2346
+ --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
2347
+ --pf-c-button--m-link--m-danger--BackgroundColor: transparent;
2348
+ --pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100);
2349
+ --pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
2350
+ --pf-c-button--m-link--m-danger--hover--Color: var(--pf-global--danger-color--200);
2351
+ --pf-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
2352
+ --pf-c-button--m-link--m-danger--focus--Color: var(--pf-global--danger-color--200);
2353
+ --pf-c-button--m-link--m-danger--active--BackgroundColor: transparent;
2354
+ --pf-c-button--m-link--m-danger--active--Color: var(--pf-global--danger-color--200);
2355
+ --pf-c-button--m-plain--BackgroundColor: transparent;
2356
+ --pf-c-button--m-plain--Color: var(--pf-global--Color--200);
2357
+ --pf-c-button--m-plain--hover--BackgroundColor: transparent;
2358
+ --pf-c-button--m-plain--hover--Color: var(--pf-global--Color--100);
2359
+ --pf-c-button--m-plain--focus--BackgroundColor: transparent;
2360
+ --pf-c-button--m-plain--focus--Color: var(--pf-global--Color--100);
2361
+ --pf-c-button--m-plain--active--BackgroundColor: transparent;
2362
+ --pf-c-button--m-plain--active--Color: var(--pf-global--Color--100);
2363
+ --pf-c-button--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
2364
+ --pf-c-button--m-plain--disabled--BackgroundColor: transparent;
2365
+ --pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--100);
2366
+ --pf-c-button--m-control--Color: var(--pf-global--Color--100);
2367
+ --pf-c-button--m-control--BorderRadius: 0;
2368
+ --pf-c-button--m-control--after--BorderWidth: var(--pf-global--BorderWidth--sm);
2369
+ --pf-c-button--m-control--after--BorderTopColor: var(--pf-global--BorderColor--300);
2370
+ --pf-c-button--m-control--after--BorderRightColor: var(--pf-global--BorderColor--300);
2371
+ --pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--200);
2372
+ --pf-c-button--m-control--after--BorderLeftColor: var(--pf-global--BorderColor--300);
2373
+ --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
2374
+ --pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
2375
+ --pf-c-button--m-control--hover--Color: var(--pf-global--Color--100);
2376
+ --pf-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
2377
+ --pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--active-color--100);
2378
+ --pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
2379
+ --pf-c-button--m-control--active--Color: var(--pf-global--Color--100);
2380
+ --pf-c-button--m-control--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
2381
+ --pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--active-color--100);
2382
+ --pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
2383
+ --pf-c-button--m-control--focus--Color: var(--pf-global--Color--100);
2384
+ --pf-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
2385
+ --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--active-color--100);
2386
+ --pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--100);
2387
+ --pf-c-button--m-control--m-expanded--Color: var(--pf-global--Color--100);
2388
+ --pf-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
2389
+ --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
2390
+ --pf-c-button--m-small--FontSize: var(--pf-global--FontSize--sm);
2391
+ --pf-c-button--m-display-lg--PaddingTop: var(--pf-global--spacer--md);
2392
+ --pf-c-button--m-display-lg--PaddingRight: var(--pf-global--spacer--xl);
2393
+ --pf-c-button--m-display-lg--PaddingBottom: var(--pf-global--spacer--md);
2394
+ --pf-c-button--m-display-lg--PaddingLeft: var(--pf-global--spacer--xl);
2395
+ --pf-c-button--m-display-lg--FontWeight: var(--pf-global--FontWeight--bold);
2396
+ --pf-c-button--m-link--m-display-lg--FontSize: var(--pf-global--FontSize--lg);
2397
+ --pf-c-button__icon--m-start--MarginRight: var(--pf-global--spacer--xs);
2398
+ --pf-c-button__icon--m-end--MarginLeft: var(--pf-global--spacer--xs);
2399
+ --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
2400
+ --pf-c-button__progress--Opacity: 0;
2401
+ --pf-c-button__progress--TranslateY: -50%;
2402
+ --pf-c-button__progress--TranslateX: 0;
2403
+ --pf-c-button__progress--Top: 50%;
2404
+ --pf-c-button__progress--Left: var(--pf-global--spacer--md);
2405
+ --pf-c-button--m-progress--TransitionProperty: padding;
2406
+ --pf-c-button--m-progress--TransitionDuration: var(--pf-global--TransitionDuration);
2407
+ --pf-c-button--m-progress--PaddingRight: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
2408
+ --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
2409
+ --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
2410
+ --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
2411
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
2412
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
2413
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
2414
+ --pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm);
2415
+ --pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100);
2416
+ --pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200);
2417
+ --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300);
2418
+ --pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm);
2419
+ position: relative;
2420
+ display: inline-block;
2421
+ padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
2422
+ font-size: var(--pf-c-button--FontSize);
2423
+ font-weight: var(--pf-c-button--FontWeight);
2424
+ line-height: var(--pf-c-button--LineHeight);
2425
+ text-align: center;
2426
+ white-space: nowrap;
2427
+ user-select: none;
2428
+ border: 0;
2429
+ border-radius: var(--pf-c-button--BorderRadius);
2430
+ }
2431
+
2432
+ .pf-c-button::after {
2433
+ position: absolute;
2434
+ top: 0;
2435
+ right: 0;
2436
+ bottom: 0;
2437
+ left: 0;
2438
+ pointer-events: none;
2439
+ content: "";
2440
+ border: var(--pf-c-button--after--BorderWidth) solid;
2441
+ border-color: var(--pf-c-button--after--BorderColor);
2442
+ border-radius: var(--pf-c-button--after--BorderRadius);
2443
+ }
2444
+
2445
+ .pf-c-button:hover {
2446
+ --pf-c-button--after--BorderWidth: var(--pf-c-button--hover--after--BorderWidth);
2447
+ text-decoration: none;
2448
+ }
2449
+
2450
+ .pf-c-button:focus {
2451
+ --pf-c-button--after--BorderWidth: var(--pf-c-button--focus--after--BorderWidth);
2452
+ }
2453
+
2454
+ .pf-c-button:active, .pf-c-button.pf-m-active {
2455
+ --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth);
2456
+ }
2457
+
2458
+ .pf-c-button.pf-m-block {
2459
+ display: block;
2460
+ width: 100%;
2461
+ }
2462
+
2463
+ .pf-c-button.pf-m-small {
2464
+ --pf-c-button--FontSize: var(--pf-c-button--m-small--FontSize);
2465
+ }
2466
+
2467
+ .pf-c-button.pf-m-primary.pf-m-display-lg, .pf-c-button.pf-m-secondary.pf-m-display-lg, .pf-c-button.pf-m-tertiary.pf-m-display-lg, .pf-c-button.pf-m-link.pf-m-display-lg {
2468
+ --pf-c-button--PaddingTop: var(--pf-c-button--m-display-lg--PaddingTop);
2469
+ --pf-c-button--PaddingRight: var(--pf-c-button--m-display-lg--PaddingRight);
2470
+ --pf-c-button--PaddingBottom: var(--pf-c-button--m-display-lg--PaddingBottom);
2471
+ --pf-c-button--PaddingLeft: var(--pf-c-button--m-display-lg--PaddingLeft);
2472
+ --pf-c-button--FontWeight: var(--pf-c-button--m-display-lg--FontWeight);
2473
+ }
2474
+
2475
+ .pf-c-button.pf-m-primary {
2476
+ color: var(--pf-c-button--m-primary--Color);
2477
+ background-color: var(--pf-c-button--m-primary--BackgroundColor);
2478
+ }
2479
+
2480
+ .pf-c-button.pf-m-primary:hover {
2481
+ --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color);
2482
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor);
2483
+ }
2484
+
2485
+ .pf-c-button.pf-m-primary:focus {
2486
+ --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color);
2487
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--focus--BackgroundColor);
2488
+ }
2489
+
2490
+ .pf-c-button.pf-m-primary:active, .pf-c-button.pf-m-primary.pf-m-active {
2491
+ --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color);
2492
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor);
2493
+ }
2494
+
2495
+ .pf-c-button.pf-m-primary .pf-c-badge.pf-m-unread {
2496
+ border: var(--pf-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-c-button--m-primary__c-badge--BorderColor);
2497
+ }
2498
+
2499
+ .pf-c-button.pf-m-secondary {
2500
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor);
2501
+ color: var(--pf-c-button--m-secondary--Color);
2502
+ background-color: var(--pf-c-button--m-secondary--BackgroundColor);
2503
+ }
2504
+
2505
+ .pf-c-button.pf-m-secondary:hover {
2506
+ --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--hover--Color);
2507
+ --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--hover--BackgroundColor);
2508
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--hover--after--BorderColor);
2509
+ }
2510
+
2511
+ .pf-c-button.pf-m-secondary:focus {
2512
+ --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color);
2513
+ --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--focus--BackgroundColor);
2514
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--focus--after--BorderColor);
2515
+ }
2516
+
2517
+ .pf-c-button.pf-m-secondary.pf-m-active, .pf-c-button.pf-m-secondary:active {
2518
+ --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color);
2519
+ --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor);
2520
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor);
2521
+ }
2522
+
2523
+ .pf-c-button.pf-m-tertiary {
2524
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor);
2525
+ color: var(--pf-c-button--m-tertiary--Color);
2526
+ background-color: var(--pf-c-button--m-tertiary--BackgroundColor);
2527
+ }
2528
+
2529
+ .pf-c-button.pf-m-tertiary:hover {
2530
+ --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--hover--Color);
2531
+ --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--hover--BackgroundColor);
2532
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor);
2533
+ }
2534
+
2535
+ .pf-c-button.pf-m-tertiary:focus {
2536
+ --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color);
2537
+ --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--focus--BackgroundColor);
2538
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--focus--after--BorderColor);
2539
+ }
2540
+
2541
+ .pf-c-button.pf-m-tertiary:active, .pf-c-button.pf-m-tertiary.pf-m-active {
2542
+ --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color);
2543
+ --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor);
2544
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor);
2545
+ }
2546
+
2547
+ .pf-c-button.pf-m-link {
2548
+ --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor);
2549
+ color: var(--pf-c-button--m-link--Color);
2550
+ background-color: var(--pf-c-button--m-link--BackgroundColor);
2551
+ }
2552
+
2553
+ .pf-c-button.pf-m-link:not(.pf-m-inline):hover {
2554
+ --pf-c-button--m-link--Color: var(--pf-c-button--m-link--hover--Color);
2555
+ --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor);
2556
+ }
2557
+
2558
+ .pf-c-button.pf-m-link:not(.pf-m-inline):focus {
2559
+ --pf-c-button--m-link--Color: var(--pf-c-button--m-link--focus--Color);
2560
+ --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--focus--BackgroundColor);
2561
+ }
2562
+
2563
+ .pf-c-button.pf-m-link:not(.pf-m-inline):active, .pf-c-button.pf-m-link:not(.pf-m-inline).pf-m-active {
2564
+ --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color);
2565
+ --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor);
2566
+ }
2567
+
2568
+ .pf-c-button.pf-m-link.pf-m-inline {
2569
+ --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
2570
+ display: inline;
2571
+ padding: 0;
2572
+ text-align: left;
2573
+ white-space: normal;
2574
+ cursor: pointer;
2575
+ }
2576
+
2577
+ .pf-c-button.pf-m-link.pf-m-inline:hover {
2578
+ --pf-c-button--m-link--Color: var(--pf-c-button--m-link--m-inline--hover--Color);
2579
+ text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration);
2580
+ }
2581
+
2582
+ .pf-c-button.pf-m-link.pf-m-display-lg {
2583
+ --pf-c-button--FontSize: var(--pf-c-button--m-link--m-display-lg--FontSize);
2584
+ }
2585
+
2586
+ .pf-c-button.pf-m-danger {
2587
+ color: var(--pf-c-button--m-danger--Color);
2588
+ background-color: var(--pf-c-button--m-danger--BackgroundColor);
2589
+ }
2590
+
2591
+ .pf-c-button.pf-m-danger:hover {
2592
+ --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--hover--Color);
2593
+ --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--BackgroundColor);
2594
+ }
2595
+
2596
+ .pf-c-button.pf-m-danger:focus {
2597
+ --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--focus--Color);
2598
+ --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--focus--BackgroundColor);
2599
+ }
2600
+
2601
+ .pf-c-button.pf-m-danger:active, .pf-c-button.pf-m-danger.pf-m-active {
2602
+ --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color);
2603
+ --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor);
2604
+ }
2605
+
2606
+ .pf-c-button.pf-m-danger.pf-m-secondary {
2607
+ --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--Color);
2608
+ --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--BackgroundColor);
2609
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor);
2610
+ }
2611
+
2612
+ .pf-c-button.pf-m-danger.pf-m-secondary:hover {
2613
+ --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--hover--Color);
2614
+ --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor);
2615
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor);
2377
2616
  }
2378
2617
 
2379
2618
  .pf-c-button.pf-m-danger.pf-m-secondary:focus {
@@ -2601,265 +2840,26 @@ button.pf-c-breadcrumb__link {
2601
2840
  --pf-c-button--m-danger--hover--Color: var(--pf-global--palette--black-900);
2602
2841
  --pf-c-button--m-danger--focus--Color: var(--pf-global--palette--black-900);
2603
2842
  --pf-c-button--m-danger--active--Color: var(--pf-global--palette--black-900);
2604
- --pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
2605
- --pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
2606
- --pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
2607
- --pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
2608
- --pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--400);
2609
- --pf-c-button--m-control--after--BorderTopColor: transparent;
2610
- --pf-c-button--m-control--after--BorderRightColor: transparent;
2611
- --pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--400);
2612
- --pf-c-button--m-control--after--BorderLeftColor: transparent;
2613
- --pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--primary-color--100);
2614
- --pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--primary-color--100);
2615
- --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--primary-color--100);
2616
- --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--primary-color--100);
2617
- --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
2618
- --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--Color--100);
2619
- }
2620
-
2621
- :where(.pf-theme-dark) .pf-c-button.pf-m-control:disabled::after {
2622
- border: 0;
2623
- border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--palette--black-700);
2624
- }
2625
-
2626
- .pf-c-calendar-month {
2627
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
2628
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
2629
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
2630
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
2631
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
2632
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
2633
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
2634
- }
2635
-
2636
- .pf-c-calendar-month {
2637
- --pf-c-calendar-month--BackgroundColor: var(--pf-global--BackgroundColor--100);
2638
- --pf-c-calendar-month--PaddingTop: var(--pf-global--spacer--lg);
2639
- --pf-c-calendar-month--PaddingRight: var(--pf-global--spacer--lg);
2640
- --pf-c-calendar-month--PaddingBottom: var(--pf-global--spacer--md);
2641
- --pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
2642
- --pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
2643
- --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
2644
- --pf-c-calendar-month__header-year--Width: 8ch;
2645
- --pf-c-calendar-month__header-nav-control--MarginRight: 0;
2646
- --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
2647
- --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;
2648
- --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: 0;
2649
- --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: 0;
2650
- --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: 0;
2651
- --pf-c-calendar-month__days--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
2652
- --pf-c-calendar-month__days--BorderBottomColor: var(--pf-global--BorderColor--100);
2653
- --pf-c-calendar-month__day--PaddingBottom: var(--pf-global--spacer--md);
2654
- --pf-c-calendar-month__day--FontWeight: var(--pf-global--FontWeight--normal);
2655
- --pf-c-calendar-month__dates-cell--PaddingTop: 0.125rem;
2656
- --pf-c-calendar-month__dates-cell--PaddingRight: 0.125rem;
2657
- --pf-c-calendar-month__dates-cell--PaddingBottom: 0.125rem;
2658
- --pf-c-calendar-month__dates-cell--PaddingLeft: 0.125rem;
2659
- --pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-global--spacer--sm);
2660
- --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--BackgroundColor--200);
2661
- --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--active-color--100);
2662
- --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-global--active-color--100);
2663
- --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-global--primary-color--200);
2664
- --pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-global--primary-color--200);
2665
- --pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow: 0 0 0.3125rem var(--pf-global--primary-color--100);
2666
- --pf-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-global--Color--light-100);
2667
- --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
2668
- --pf-c-calendar-month__dates-cell--before--Top: 0;
2669
- --pf-c-calendar-month__dates-cell--before--Right: 0;
2670
- --pf-c-calendar-month__dates-cell--before--Bottom: var(--pf-c-calendar-month__dates-cell--PaddingBottom);
2671
- --pf-c-calendar-month__dates-cell--before--Left: 0;
2672
- --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-global--palette--blue-50);
2673
- --pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left: 50%;
2674
- --pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right: 50%;
2675
- --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-global--palette--blue-100);
2676
- --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-global--palette--blue-100);
2677
- --pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-global--disabled-color--100);
2678
- --pf-c-calendar-month__date--Width: 4ch;
2679
- --pf-c-calendar-month__date--Height: 4ch;
2680
- --pf-c-calendar-month__date--BorderRadius: var(--pf-global--BorderRadius--lg);
2681
- --pf-c-calendar-month__date--Color: var(--pf-global--Color--100);
2682
- --pf-c-calendar-month__date--BackgroundColor: transparent;
2683
- --pf-c-calendar-month__date--disabled--Color: var(--pf-global--disabled-color--200);
2684
- --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--md);
2685
- --pf-c-calendar-month__date--after--BorderColor: transparent;
2686
- --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-global--palette--blue-50);
2687
- --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-global--palette--blue-50);
2688
- --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-global--active-color--100);
2689
- --pf-c-calendar-month__date--focus--BoxShadow: none;
2690
- color: var(--pf-global--Color--100);
2691
- display: inline-flex;
2692
- flex-direction: column;
2693
- 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);
2694
- font-size: var(--pf-c-calendar-month--FontSize);
2695
- background-color: var(--pf-c-calendar-month--BackgroundColor);
2696
- }
2697
-
2698
- .pf-c-calendar-month__header {
2699
- display: flex;
2700
- margin-bottom: var(--pf-c-calendar-month__header--MarginBottom);
2701
- }
2702
-
2703
- .pf-c-calendar-month__header-nav-control {
2704
- margin-right: var(--pf-c-calendar-month__header-nav-control--MarginRight);
2705
- margin-left: var(--pf-c-calendar-month__header-nav-control--MarginLeft);
2706
- }
2707
-
2708
- .pf-c-calendar-month__header-nav-control.pf-m-prev-month {
2709
- --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
2710
- --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
2711
- }
2712
-
2713
- .pf-c-calendar-month__header-nav-control.pf-m-next-month {
2714
- --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginRight);
2715
- --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft);
2716
- }
2717
-
2718
- .pf-c-calendar-month__header-month {
2719
- flex-grow: 1;
2720
- }
2721
-
2722
- .pf-c-calendar-month__header-year {
2723
- width: var(--pf-c-calendar-month__header-year--Width);
2724
- }
2725
-
2726
- .pf-c-calendar-month__calendar {
2727
- table-layout: fixed;
2728
- }
2729
-
2730
- .pf-c-calendar-month__days {
2731
- border-bottom: var(--pf-c-calendar-month__days--BorderBottomWidth) solid var(--pf-c-calendar-month__days--BorderBottomColor);
2732
- }
2733
-
2734
- .pf-c-calendar-month__day {
2735
- padding-bottom: var(--pf-c-calendar-month__day--PaddingBottom);
2736
- font-weight: var(--pf-c-calendar-month__day--FontWeight);
2737
- text-align: center;
2738
- }
2739
-
2740
- .pf-c-calendar-month__dates-row:first-child {
2741
- --pf-c-calendar-month__dates-cell--PaddingTop: var(--pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop);
2742
- }
2743
-
2744
- .pf-c-calendar-month__dates-cell {
2745
- --pf-c-calendar-month__dates-cell--before--Top: var(--pf-c-calendar-month__dates-cell--PaddingTop);
2746
- position: relative;
2747
- 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);
2748
- text-align: center;
2749
- }
2750
-
2751
- .pf-c-calendar-month__dates-cell::before {
2752
- position: absolute;
2753
- top: var(--pf-c-calendar-month__dates-cell--before--Top);
2754
- right: var(--pf-c-calendar-month__dates-cell--before--Right);
2755
- bottom: var(--pf-c-calendar-month__dates-cell--before--Bottom);
2756
- left: var(--pf-c-calendar-month__dates-cell--before--Left);
2757
- content: "";
2758
- background-color: var(--pf-c-calendar-month__dates-cell--before--BackgroundColor);
2759
- }
2760
-
2761
- .pf-c-calendar-month__dates-cell.pf-m-current {
2762
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
2763
- }
2764
-
2765
- .pf-c-calendar-month__dates-cell.pf-m-in-range {
2766
- --pf-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
2767
- --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
2768
- --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor);
2769
- }
2770
-
2771
- .pf-c-calendar-month__dates-cell.pf-m-start-range {
2772
- --pf-c-calendar-month__dates-cell--before--Left: var(--pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left);
2773
- }
2774
-
2775
- .pf-c-calendar-month__dates-cell.pf-m-end-range {
2776
- --pf-c-calendar-month__dates-cell--before--Right: var(--pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right);
2777
- }
2778
-
2779
- .pf-c-calendar-month__dates-cell.pf-m-adjacent-month {
2780
- --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color);
2781
- }
2782
-
2783
- .pf-c-calendar-month__dates-cell.pf-m-selected {
2784
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
2785
- --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
2786
- --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
2787
- --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
2788
- --pf-c-calendar-month__date--focus--BoxShadow: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow);
2789
- --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-selected__date--Color);
2790
- }
2791
-
2792
- .pf-c-calendar-month__dates-cell.pf-m-disabled {
2793
- --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
2794
- --pf-c-calendar-month__date--BackgroundColor: transparent;
2795
- }
2796
-
2797
- .pf-c-calendar-month__date {
2798
- position: relative;
2799
- display: inline-flex;
2800
- align-items: center;
2801
- justify-content: center;
2802
- width: var(--pf-c-calendar-month__date--Width);
2803
- height: var(--pf-c-calendar-month__date--Height);
2804
- line-height: 1;
2805
- color: var(--pf-c-calendar-month__date--Color);
2806
- background-color: var(--pf-c-calendar-month__date--BackgroundColor);
2807
- border: 0;
2808
- }
2809
-
2810
- .pf-c-calendar-month__date::after {
2811
- position: absolute;
2812
- top: 0;
2813
- right: 0;
2814
- bottom: 0;
2815
- left: 0;
2816
- content: "";
2817
- border: var(--pf-c-calendar-month__date--after--BorderWidth) solid var(--pf-c-calendar-month__date--after--BorderColor);
2818
- }
2819
-
2820
- .pf-c-calendar-month__date, .pf-c-calendar-month__date::after {
2821
- border-radius: var(--pf-c-calendar-month__date--BorderRadius);
2822
- }
2823
-
2824
- .pf-c-calendar-month__date:hover, .pf-c-calendar-month__date.pf-m-hover {
2825
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--hover--BackgroundColor);
2826
- }
2827
-
2828
- .pf-c-calendar-month__date:focus, .pf-c-calendar-month__date.pf-m-focus {
2829
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--focus--BackgroundColor);
2830
- --pf-c-calendar-month__date--after--BorderColor: var(--pf-c-calendar-month__date--focus--after--BorderColor);
2831
- outline: 0;
2832
- box-shadow: var(--pf-c-calendar-month__date--focus--BoxShadow);
2833
- }
2834
-
2835
- .pf-c-calendar-month__date:disabled {
2836
- pointer-events: none;
2837
- --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
2838
- --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
2839
- }
2840
-
2841
- :where(.pf-theme-dark) .pf-c-calendar-month {
2842
- --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--palette--black-500);
2843
- --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--primary-color--300);
2844
- --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-global--palette--black-900);
2845
- --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-global--palette--blue-400);
2846
- --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-global--BackgroundColor--200);
2847
- --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
2848
- --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
2849
- --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
2850
- --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
2851
- --pf-c-calendar-month__date--focus--after--BorderColor: transparent;
2852
- }
2853
-
2854
- :where(.pf-theme-dark) .pf-c-calendar-month__date:hover, :where(.pf-theme-dark) .pf-c-calendar-month__date.pf-m-hover {
2855
- --pf-c-calendar-month__date--after--BorderColor: var(--pf-global--BorderColor--100);
2856
- --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--sm);
2843
+ --pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
2844
+ --pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
2845
+ --pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
2846
+ --pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
2847
+ --pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--400);
2848
+ --pf-c-button--m-control--after--BorderTopColor: transparent;
2849
+ --pf-c-button--m-control--after--BorderRightColor: transparent;
2850
+ --pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--400);
2851
+ --pf-c-button--m-control--after--BorderLeftColor: transparent;
2852
+ --pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--primary-color--100);
2853
+ --pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--primary-color--100);
2854
+ --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--primary-color--100);
2855
+ --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--primary-color--100);
2856
+ --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
2857
+ --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--Color--100);
2857
2858
  }
2858
2859
 
2859
- :where(.pf-theme-dark) .pf-c-calendar-month__date:focus, :where(.pf-theme-dark) .pf-c-calendar-month__date.pf-m-focus {
2860
- --pf-c-calendar-month__date--after--BorderColor: var(--pf-global--active-color--100);
2861
- --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--sm);
2862
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-global--primary-color--300);
2860
+ :where(.pf-theme-dark) .pf-c-button.pf-m-control:disabled::after {
2861
+ border: 0;
2862
+ border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--palette--black-700);
2863
2863
  }
2864
2864
 
2865
2865
  .pf-c-card {
@@ -9378,136 +9378,457 @@ label.pf-c-check, .pf-c-check__label,
9378
9378
  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
9379
9379
  }
9380
9380
 
9381
- .pf-c-hint__actions + .pf-c-hint__body {
9382
- grid-column: 1;
9383
- }
9381
+ .pf-c-hint__actions + .pf-c-hint__body {
9382
+ grid-column: 1;
9383
+ }
9384
+
9385
+ .pf-c-hint__title {
9386
+ font-size: var(--pf-c-hint__title--FontSize);
9387
+ }
9388
+
9389
+ .pf-c-hint__body {
9390
+ grid-column: 1/-1;
9391
+ font-size: var(--pf-c-hint__body--FontSize);
9392
+ }
9393
+
9394
+ .pf-c-hint__footer {
9395
+ grid-column: 1/-1;
9396
+ }
9397
+
9398
+ .pf-c-hint__footer > :not(:last-child) {
9399
+ margin-right: var(--pf-c-hint__footer--child--MarginRight);
9400
+ }
9401
+
9402
+ :where(.pf-theme-dark) .pf-c-hint {
9403
+ --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
9404
+ --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9405
+ }
9406
+
9407
+ .pf-c-input-group {
9408
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
9409
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
9410
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9411
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9412
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
9413
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9414
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9415
+ }
9416
+
9417
+ .pf-c-input-group {
9418
+ --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9419
+ --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9420
+ --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9421
+ --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9422
+ --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9423
+ --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9424
+ --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9425
+ --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9426
+ --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9427
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9428
+ --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9429
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9430
+ --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9431
+ --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9432
+ --pf-c-input-group--c-form-control--MarginRight: 0;
9433
+ color: var(--pf-global--Color--100);
9434
+ display: flex;
9435
+ width: 100%;
9436
+ background-color: var(--pf-c-input-group--BackgroundColor);
9437
+ }
9438
+
9439
+ .pf-c-input-group.pf-m-plain {
9440
+ --pf-c-input-group--BackgroundColor: transparent;
9441
+ }
9442
+
9443
+ .pf-c-input-group > * + * {
9444
+ margin-left: -1px;
9445
+ }
9446
+
9447
+ .pf-c-input-group > :focus,
9448
+ .pf-c-input-group > :focus-within {
9449
+ z-index: var(--pf-c-input-group--child--ZIndex);
9450
+ }
9451
+
9452
+ .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9453
+ margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9454
+ }
9455
+
9456
+ .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9457
+ .pf-c-input-group textarea {
9458
+ flex: 2;
9459
+ min-width: 0;
9460
+ }
9461
+
9462
+ .pf-c-input-group textarea {
9463
+ min-height: var(--pf-c-input-group__textarea--MinHeight);
9464
+ }
9465
+
9466
+ .pf-c-input-group__text {
9467
+ display: flex;
9468
+ align-items: center;
9469
+ padding-right: var(--pf-c-input-group__text--PaddingRight);
9470
+ padding-left: var(--pf-c-input-group__text--PaddingLeft);
9471
+ font-size: var(--pf-c-input-group__text--FontSize);
9472
+ color: var(--pf-c-input-group__text--Color);
9473
+ text-align: center;
9474
+ background-color: var(--pf-c-input-group__text--BackgroundColor);
9475
+ border: var(--pf-c-input-group__text--BorderWidth) solid;
9476
+ border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
9477
+ }
9478
+
9479
+ label.pf-c-input-group__text {
9480
+ cursor: pointer;
9481
+ }
9482
+
9483
+ .pf-c-input-group__text.pf-m-plain {
9484
+ --pf-c-input-group__text--BorderWidth: 0;
9485
+ margin-left: 0;
9486
+ }
9487
+
9488
+ :where(.pf-theme-dark) .pf-c-input-group {
9489
+ --pf-c-input-group--BackgroundColor: transparent;
9490
+ --pf-c-input-group__text--BorderTopColor: transparent;
9491
+ --pf-c-input-group__text--BorderRightColor: transparent;
9492
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9493
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9494
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9495
+ }
9496
+
9497
+ :where(.pf-theme-dark) .pf-c-input-group > * + * {
9498
+ margin-left: 0;
9499
+ border-left: 1px solid var(--pf-global--palette--black-700);
9500
+ }
9501
+
9502
+ :where(.pf-theme-dark) .pf-c-input-group__text {
9503
+ --pf-c-input-group__text--BorderTopColor: transparent;
9504
+ --pf-c-input-group__text--BorderRightColor: transparent;
9505
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9506
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9507
+ }
9508
+
9509
+ :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9510
+ --pf-c-input-group__text--BackgroundColor: transparent;
9511
+ }
9512
+
9513
+ .pf-c-jump-links {
9514
+ --pf-c-jump-links__list--Display: flex;
9515
+ --pf-c-jump-links__list--Visibility: visible;
9516
+ --pf-c-jump-links__list--PaddingTop: 0;
9517
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9518
+ --pf-c-jump-links__list--PaddingBottom: 0;
9519
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9520
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9521
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9522
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9523
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9524
+ --pf-c-jump-links__list--FlexDirection: row;
9525
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9526
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9527
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9528
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
9529
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9530
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9531
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9532
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9533
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9534
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9535
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9536
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9537
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9538
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9539
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9540
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9541
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9542
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
9543
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
9544
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9545
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9546
+ --pf-c-jump-links__link--before--BorderColor: transparent;
9547
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9548
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9549
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9550
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9551
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9552
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9553
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9554
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9555
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9556
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9557
+ --pf-c-jump-links__label--Display: block;
9558
+ --pf-c-jump-links__label--Visibility: visible;
9559
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9560
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9561
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9562
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9563
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9564
+ --pf-c-jump-links__toggle--Display: none;
9565
+ --pf-c-jump-links__toggle--Visibility: hidden;
9566
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
9567
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9568
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
9569
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9570
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9571
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9572
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9573
+ display: flex;
9574
+ }
9575
+
9576
+ .pf-c-jump-links.pf-m-center {
9577
+ justify-content: center;
9578
+ }
9579
+
9580
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9581
+ align-items: center;
9582
+ }
9583
+
9584
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9585
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9586
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9587
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9588
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9589
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9590
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9591
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9592
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9593
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9594
+ flex-direction: column;
9595
+ }
9596
+
9597
+ .pf-c-jump-links.pf-m-expandable {
9598
+ --pf-c-jump-links__list--Display: none;
9599
+ --pf-c-jump-links__list--Visibility: hidden;
9600
+ --pf-c-jump-links__toggle--Display: block;
9601
+ --pf-c-jump-links__toggle--Visibility: visible;
9602
+ --pf-c-jump-links__label--Display: none;
9603
+ --pf-c-jump-links__label--Visibility: hidden;
9604
+ }
9605
+
9606
+ .pf-c-jump-links.pf-m-non-expandable {
9607
+ --pf-c-jump-links__list--Display: flex;
9608
+ --pf-c-jump-links__list--Visibility: visible;
9609
+ --pf-c-jump-links__toggle--Display: none;
9610
+ --pf-c-jump-links__toggle--Visibility: hidden;
9611
+ --pf-c-jump-links__label--Display: block;
9612
+ --pf-c-jump-links__label--Visibility: visible;
9613
+ }
9614
+
9615
+ @media (min-width: 576px) {
9616
+ .pf-c-jump-links.pf-m-expandable-on-sm {
9617
+ --pf-c-jump-links__list--Display: none;
9618
+ --pf-c-jump-links__list--Visibility: hidden;
9619
+ --pf-c-jump-links__toggle--Display: block;
9620
+ --pf-c-jump-links__toggle--Visibility: visible;
9621
+ --pf-c-jump-links__label--Display: none;
9622
+ --pf-c-jump-links__label--Visibility: hidden;
9623
+ }
9384
9624
 
9385
- .pf-c-hint__title {
9386
- font-size: var(--pf-c-hint__title--FontSize);
9625
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
9626
+ --pf-c-jump-links__list--Display: flex;
9627
+ --pf-c-jump-links__list--Visibility: visible;
9628
+ --pf-c-jump-links__toggle--Display: none;
9629
+ --pf-c-jump-links__toggle--Visibility: hidden;
9630
+ --pf-c-jump-links__label--Display: block;
9631
+ --pf-c-jump-links__label--Visibility: visible;
9632
+ }
9387
9633
  }
9634
+ @media (min-width: 768px) {
9635
+ .pf-c-jump-links.pf-m-expandable-on-md {
9636
+ --pf-c-jump-links__list--Display: none;
9637
+ --pf-c-jump-links__list--Visibility: hidden;
9638
+ --pf-c-jump-links__toggle--Display: block;
9639
+ --pf-c-jump-links__toggle--Visibility: visible;
9640
+ --pf-c-jump-links__label--Display: none;
9641
+ --pf-c-jump-links__label--Visibility: hidden;
9642
+ }
9388
9643
 
9389
- .pf-c-hint__body {
9390
- grid-column: 1/-1;
9391
- font-size: var(--pf-c-hint__body--FontSize);
9644
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
9645
+ --pf-c-jump-links__list--Display: flex;
9646
+ --pf-c-jump-links__list--Visibility: visible;
9647
+ --pf-c-jump-links__toggle--Display: none;
9648
+ --pf-c-jump-links__toggle--Visibility: hidden;
9649
+ --pf-c-jump-links__label--Display: block;
9650
+ --pf-c-jump-links__label--Visibility: visible;
9651
+ }
9392
9652
  }
9653
+ @media (min-width: 992px) {
9654
+ .pf-c-jump-links.pf-m-expandable-on-lg {
9655
+ --pf-c-jump-links__list--Display: none;
9656
+ --pf-c-jump-links__list--Visibility: hidden;
9657
+ --pf-c-jump-links__toggle--Display: block;
9658
+ --pf-c-jump-links__toggle--Visibility: visible;
9659
+ --pf-c-jump-links__label--Display: none;
9660
+ --pf-c-jump-links__label--Visibility: hidden;
9661
+ }
9393
9662
 
9394
- .pf-c-hint__footer {
9395
- grid-column: 1/-1;
9663
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
9664
+ --pf-c-jump-links__list--Display: flex;
9665
+ --pf-c-jump-links__list--Visibility: visible;
9666
+ --pf-c-jump-links__toggle--Display: none;
9667
+ --pf-c-jump-links__toggle--Visibility: hidden;
9668
+ --pf-c-jump-links__label--Display: block;
9669
+ --pf-c-jump-links__label--Visibility: visible;
9670
+ }
9396
9671
  }
9672
+ @media (min-width: 1200px) {
9673
+ .pf-c-jump-links.pf-m-expandable-on-xl {
9674
+ --pf-c-jump-links__list--Display: none;
9675
+ --pf-c-jump-links__list--Visibility: hidden;
9676
+ --pf-c-jump-links__toggle--Display: block;
9677
+ --pf-c-jump-links__toggle--Visibility: visible;
9678
+ --pf-c-jump-links__label--Display: none;
9679
+ --pf-c-jump-links__label--Visibility: hidden;
9680
+ }
9397
9681
 
9398
- .pf-c-hint__footer > :not(:last-child) {
9399
- margin-right: var(--pf-c-hint__footer--child--MarginRight);
9682
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
9683
+ --pf-c-jump-links__list--Display: flex;
9684
+ --pf-c-jump-links__list--Visibility: visible;
9685
+ --pf-c-jump-links__toggle--Display: none;
9686
+ --pf-c-jump-links__toggle--Visibility: hidden;
9687
+ --pf-c-jump-links__label--Display: block;
9688
+ --pf-c-jump-links__label--Visibility: visible;
9689
+ }
9400
9690
  }
9691
+ @media (min-width: 1450px) {
9692
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
9693
+ --pf-c-jump-links__list--Display: none;
9694
+ --pf-c-jump-links__list--Visibility: hidden;
9695
+ --pf-c-jump-links__toggle--Display: block;
9696
+ --pf-c-jump-links__toggle--Visibility: visible;
9697
+ --pf-c-jump-links__label--Display: none;
9698
+ --pf-c-jump-links__label--Visibility: hidden;
9699
+ }
9401
9700
 
9402
- :where(.pf-theme-dark) .pf-c-hint {
9403
- --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
9404
- --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9701
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9702
+ --pf-c-jump-links__list--Display: flex;
9703
+ --pf-c-jump-links__list--Visibility: visible;
9704
+ --pf-c-jump-links__toggle--Display: none;
9705
+ --pf-c-jump-links__toggle--Visibility: hidden;
9706
+ --pf-c-jump-links__label--Display: block;
9707
+ --pf-c-jump-links__label--Visibility: visible;
9708
+ }
9709
+ }
9710
+ .pf-c-jump-links.pf-m-expanded {
9711
+ --pf-c-jump-links__list--Display: flex;
9712
+ --pf-c-jump-links__list--Visibility: visible;
9713
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9714
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9715
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9405
9716
  }
9406
9717
 
9407
- .pf-c-input-group {
9408
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
9409
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
9410
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9411
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9412
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
9413
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9414
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9718
+ .pf-c-jump-links__list {
9719
+ position: relative;
9720
+ display: var(--pf-c-jump-links__list--Display);
9721
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9722
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
9723
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
9724
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9725
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9726
+ visibility: var(--pf-c-jump-links__list--Visibility);
9415
9727
  }
9416
9728
 
9417
- .pf-c-input-group {
9418
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9419
- --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9420
- --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9421
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9422
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9423
- --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9424
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9425
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9426
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9427
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9428
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9429
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9430
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9431
- --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9432
- --pf-c-input-group--c-form-control--MarginRight: 0;
9433
- color: var(--pf-global--Color--100);
9434
- display: flex;
9435
- width: 100%;
9436
- background-color: var(--pf-c-input-group--BackgroundColor);
9729
+ .pf-c-jump-links__list::before {
9730
+ position: absolute;
9731
+ top: 0;
9732
+ right: 0;
9733
+ bottom: 0;
9734
+ left: 0;
9735
+ pointer-events: none;
9736
+ content: "";
9737
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
9738
+ border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
9437
9739
  }
9438
9740
 
9439
- .pf-c-input-group.pf-m-plain {
9440
- --pf-c-input-group--BackgroundColor: transparent;
9741
+ .pf-c-jump-links__list .pf-c-jump-links__list {
9742
+ --pf-c-jump-links__list--PaddingTop: 0;
9743
+ --pf-c-jump-links__list--PaddingBottom: 0;
9744
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9745
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9746
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9747
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9441
9748
  }
9442
9749
 
9443
- .pf-c-input-group > * + * {
9444
- margin-left: -1px;
9750
+ .pf-c-jump-links__link {
9751
+ position: relative;
9752
+ display: flex;
9753
+ flex: 1;
9754
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
9755
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
9756
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9757
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9758
+ text-decoration: none;
9759
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9445
9760
  }
9446
9761
 
9447
- .pf-c-input-group > :focus,
9448
- .pf-c-input-group > :focus-within {
9449
- z-index: var(--pf-c-input-group--child--ZIndex);
9762
+ .pf-c-jump-links__link:hover {
9763
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9450
9764
  }
9451
9765
 
9452
- .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9453
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9766
+ .pf-c-jump-links__link:focus {
9767
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9454
9768
  }
9455
9769
 
9456
- .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9457
- .pf-c-input-group textarea {
9458
- flex: 2;
9459
- min-width: 0;
9770
+ .pf-c-jump-links__link::before {
9771
+ position: absolute;
9772
+ top: 0;
9773
+ right: 0;
9774
+ bottom: 0;
9775
+ left: 0;
9776
+ pointer-events: none;
9777
+ content: "";
9778
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
9779
+ border-style: solid;
9780
+ border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
9460
9781
  }
9461
9782
 
9462
- .pf-c-input-group textarea {
9463
- min-height: var(--pf-c-input-group__textarea--MinHeight);
9783
+ .pf-c-jump-links__item {
9784
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9464
9785
  }
9465
9786
 
9466
- .pf-c-input-group__text {
9467
- display: flex;
9468
- align-items: center;
9469
- padding-right: var(--pf-c-input-group__text--PaddingRight);
9470
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
9471
- font-size: var(--pf-c-input-group__text--FontSize);
9472
- color: var(--pf-c-input-group__text--Color);
9473
- text-align: center;
9474
- background-color: var(--pf-c-input-group__text--BackgroundColor);
9475
- border: var(--pf-c-input-group__text--BorderWidth) solid;
9476
- border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
9787
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9788
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9789
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9790
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9791
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9477
9792
  }
9478
9793
 
9479
- label.pf-c-input-group__text {
9480
- cursor: pointer;
9794
+ .pf-c-jump-links__link-text {
9795
+ color: var(--pf-c-jump-links__link-text--Color);
9481
9796
  }
9482
9797
 
9483
- .pf-c-input-group__text.pf-m-plain {
9484
- --pf-c-input-group__text--BorderWidth: 0;
9485
- margin-left: 0;
9798
+ .pf-c-jump-links__label {
9799
+ display: var(--pf-c-jump-links__label--Display);
9800
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9801
+ visibility: var(--pf-c-jump-links__label--Visibility);
9486
9802
  }
9487
9803
 
9488
- :where(.pf-theme-dark) .pf-c-input-group {
9489
- --pf-c-input-group--BackgroundColor: transparent;
9490
- --pf-c-input-group__text--BorderTopColor: transparent;
9491
- --pf-c-input-group__text--BorderRightColor: transparent;
9492
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9493
- --pf-c-input-group__text--BorderLeftColor: transparent;
9494
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9804
+ .pf-c-jump-links__main {
9805
+ display: flex;
9806
+ flex-direction: column;
9495
9807
  }
9496
9808
 
9497
- :where(.pf-theme-dark) .pf-c-input-group > * + * {
9498
- margin-left: 0;
9499
- border-left: 1px solid var(--pf-global--palette--black-700);
9809
+ .pf-c-jump-links__toggle {
9810
+ display: var(--pf-c-jump-links__toggle--Display);
9811
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9812
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9813
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9814
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
9500
9815
  }
9501
9816
 
9502
- :where(.pf-theme-dark) .pf-c-input-group__text {
9503
- --pf-c-input-group__text--BorderTopColor: transparent;
9504
- --pf-c-input-group__text--BorderRightColor: transparent;
9505
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9506
- --pf-c-input-group__text--BorderLeftColor: transparent;
9817
+ .pf-c-jump-links__toggle .pf-c-button {
9818
+ display: flex;
9819
+ align-items: center;
9507
9820
  }
9508
9821
 
9509
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9510
- --pf-c-input-group__text--BackgroundColor: transparent;
9822
+ .pf-c-jump-links__toggle-icon {
9823
+ display: inline-block;
9824
+ color: var(--pf-c-jump-links__toggle-icon--Color);
9825
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
9826
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9827
+ }
9828
+
9829
+ .pf-c-jump-links__toggle-text {
9830
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9831
+ color: var(--pf-c-jump-links__toggle-text--Color);
9511
9832
  }
9512
9833
 
9513
9834
  .pf-c-sidebar {
@@ -9672,488 +9993,167 @@ label.pf-c-input-group__text {
9672
9993
  --pf-c-sidebar__panel--FlexBasis: 33%;
9673
9994
  }
9674
9995
 
9675
- .pf-c-sidebar__panel.pf-m-width-50 {
9676
- --pf-c-sidebar__panel--FlexBasis: 50%;
9677
- }
9678
-
9679
- .pf-c-sidebar__panel.pf-m-width-66 {
9680
- --pf-c-sidebar__panel--FlexBasis: 66%;
9681
- }
9682
-
9683
- .pf-c-sidebar__panel.pf-m-width-75 {
9684
- --pf-c-sidebar__panel--FlexBasis: 75%;
9685
- }
9686
-
9687
- .pf-c-sidebar__panel.pf-m-width-100 {
9688
- --pf-c-sidebar__panel--FlexBasis: 100%;
9689
- }
9690
-
9691
- @media (min-width: 576px) {
9692
- .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9693
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9694
- }
9695
-
9696
- .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9697
- --pf-c-sidebar__panel--FlexBasis: 25%;
9698
- }
9699
-
9700
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9701
- --pf-c-sidebar__panel--FlexBasis: 33%;
9702
- }
9703
-
9704
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9705
- --pf-c-sidebar__panel--FlexBasis: 50%;
9706
- }
9707
-
9708
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9709
- --pf-c-sidebar__panel--FlexBasis: 66%;
9710
- }
9711
-
9712
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9713
- --pf-c-sidebar__panel--FlexBasis: 75%;
9714
- }
9715
-
9716
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9717
- --pf-c-sidebar__panel--FlexBasis: 100%;
9718
- }
9719
- }
9720
- @media (min-width: 768px) {
9721
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
9722
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9723
- }
9724
-
9725
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
9726
- --pf-c-sidebar__panel--FlexBasis: 25%;
9727
- }
9728
-
9729
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
9730
- --pf-c-sidebar__panel--FlexBasis: 33%;
9731
- }
9732
-
9733
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
9734
- --pf-c-sidebar__panel--FlexBasis: 50%;
9735
- }
9736
-
9737
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
9738
- --pf-c-sidebar__panel--FlexBasis: 66%;
9739
- }
9740
-
9741
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
9742
- --pf-c-sidebar__panel--FlexBasis: 75%;
9743
- }
9744
-
9745
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
9746
- --pf-c-sidebar__panel--FlexBasis: 100%;
9747
- }
9748
- }
9749
- @media (min-width: 992px) {
9750
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9751
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9752
- }
9753
-
9754
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9755
- --pf-c-sidebar__panel--FlexBasis: 25%;
9756
- }
9757
-
9758
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9759
- --pf-c-sidebar__panel--FlexBasis: 33%;
9760
- }
9761
-
9762
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9763
- --pf-c-sidebar__panel--FlexBasis: 50%;
9764
- }
9765
-
9766
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9767
- --pf-c-sidebar__panel--FlexBasis: 66%;
9768
- }
9769
-
9770
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9771
- --pf-c-sidebar__panel--FlexBasis: 75%;
9772
- }
9773
-
9774
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9775
- --pf-c-sidebar__panel--FlexBasis: 100%;
9776
- }
9777
- }
9778
- @media (min-width: 1200px) {
9779
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9780
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9781
- }
9782
-
9783
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9784
- --pf-c-sidebar__panel--FlexBasis: 25%;
9785
- }
9786
-
9787
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9788
- --pf-c-sidebar__panel--FlexBasis: 33%;
9789
- }
9790
-
9791
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9792
- --pf-c-sidebar__panel--FlexBasis: 50%;
9793
- }
9794
-
9795
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9796
- --pf-c-sidebar__panel--FlexBasis: 66%;
9797
- }
9798
-
9799
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9800
- --pf-c-sidebar__panel--FlexBasis: 75%;
9801
- }
9802
-
9803
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9804
- --pf-c-sidebar__panel--FlexBasis: 100%;
9805
- }
9806
- }
9807
- @media (min-width: 1450px) {
9808
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9809
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9810
- }
9811
-
9812
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9813
- --pf-c-sidebar__panel--FlexBasis: 25%;
9814
- }
9815
-
9816
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
9817
- --pf-c-sidebar__panel--FlexBasis: 33%;
9818
- }
9819
-
9820
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
9821
- --pf-c-sidebar__panel--FlexBasis: 50%;
9822
- }
9823
-
9824
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
9825
- --pf-c-sidebar__panel--FlexBasis: 66%;
9826
- }
9827
-
9828
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
9829
- --pf-c-sidebar__panel--FlexBasis: 75%;
9830
- }
9831
-
9832
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
9833
- --pf-c-sidebar__panel--FlexBasis: 100%;
9834
- }
9835
- }
9836
- .pf-c-jump-links {
9837
- --pf-c-jump-links__list--Display: flex;
9838
- --pf-c-jump-links__list--Visibility: visible;
9839
- --pf-c-jump-links__list--PaddingTop: 0;
9840
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9841
- --pf-c-jump-links__list--PaddingBottom: 0;
9842
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9843
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9844
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9845
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9846
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9847
- --pf-c-jump-links__list--FlexDirection: row;
9848
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9849
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9850
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9851
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
9852
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9853
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9854
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9855
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9856
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9857
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9858
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9859
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9860
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9861
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9862
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9863
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9864
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9865
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
9866
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
9867
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9868
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9869
- --pf-c-jump-links__link--before--BorderColor: transparent;
9870
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9871
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9872
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9873
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9874
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9875
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9876
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9877
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9878
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9879
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9880
- --pf-c-jump-links__label--Display: block;
9881
- --pf-c-jump-links__label--Visibility: visible;
9882
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9883
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9884
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9885
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9886
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9887
- --pf-c-jump-links__toggle--Display: none;
9888
- --pf-c-jump-links__toggle--Visibility: hidden;
9889
- --pf-c-jump-links__toggle-icon--Color: currentcolor;
9890
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9891
- --pf-c-jump-links__toggle-icon--Rotate: 0;
9892
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9893
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9894
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9895
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9896
- display: flex;
9897
- }
9898
-
9899
- .pf-c-jump-links.pf-m-center {
9900
- justify-content: center;
9901
- }
9902
-
9903
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9904
- align-items: center;
9905
- }
9906
-
9907
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9908
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9909
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9910
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9911
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9912
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9913
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9914
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9915
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9916
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9917
- flex-direction: column;
9996
+ .pf-c-sidebar__panel.pf-m-width-50 {
9997
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9918
9998
  }
9919
9999
 
9920
- .pf-c-jump-links.pf-m-expandable {
9921
- --pf-c-jump-links__list--Display: none;
9922
- --pf-c-jump-links__list--Visibility: hidden;
9923
- --pf-c-jump-links__toggle--Display: block;
9924
- --pf-c-jump-links__toggle--Visibility: visible;
9925
- --pf-c-jump-links__label--Display: none;
9926
- --pf-c-jump-links__label--Visibility: hidden;
10000
+ .pf-c-sidebar__panel.pf-m-width-66 {
10001
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9927
10002
  }
9928
10003
 
9929
- .pf-c-jump-links.pf-m-non-expandable {
9930
- --pf-c-jump-links__list--Display: flex;
9931
- --pf-c-jump-links__list--Visibility: visible;
9932
- --pf-c-jump-links__toggle--Display: none;
9933
- --pf-c-jump-links__toggle--Visibility: hidden;
9934
- --pf-c-jump-links__label--Display: block;
9935
- --pf-c-jump-links__label--Visibility: visible;
10004
+ .pf-c-sidebar__panel.pf-m-width-75 {
10005
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10006
+ }
10007
+
10008
+ .pf-c-sidebar__panel.pf-m-width-100 {
10009
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9936
10010
  }
9937
10011
 
9938
10012
  @media (min-width: 576px) {
9939
- .pf-c-jump-links.pf-m-expandable-on-sm {
9940
- --pf-c-jump-links__list--Display: none;
9941
- --pf-c-jump-links__list--Visibility: hidden;
9942
- --pf-c-jump-links__toggle--Display: block;
9943
- --pf-c-jump-links__toggle--Visibility: visible;
9944
- --pf-c-jump-links__label--Display: none;
9945
- --pf-c-jump-links__label--Visibility: hidden;
10013
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
10014
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9946
10015
  }
9947
10016
 
9948
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
9949
- --pf-c-jump-links__list--Display: flex;
9950
- --pf-c-jump-links__list--Visibility: visible;
9951
- --pf-c-jump-links__toggle--Display: none;
9952
- --pf-c-jump-links__toggle--Visibility: hidden;
9953
- --pf-c-jump-links__label--Display: block;
9954
- --pf-c-jump-links__label--Visibility: visible;
10017
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10018
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10019
+ }
10020
+
10021
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10022
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10023
+ }
10024
+
10025
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10026
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10027
+ }
10028
+
10029
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10030
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10031
+ }
10032
+
10033
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10034
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10035
+ }
10036
+
10037
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10038
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9955
10039
  }
9956
10040
  }
9957
10041
  @media (min-width: 768px) {
9958
- .pf-c-jump-links.pf-m-expandable-on-md {
9959
- --pf-c-jump-links__list--Display: none;
9960
- --pf-c-jump-links__list--Visibility: hidden;
9961
- --pf-c-jump-links__toggle--Display: block;
9962
- --pf-c-jump-links__toggle--Visibility: visible;
9963
- --pf-c-jump-links__label--Display: none;
9964
- --pf-c-jump-links__label--Visibility: hidden;
10042
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
10043
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9965
10044
  }
9966
10045
 
9967
- .pf-c-jump-links.pf-m-non-expandable-on-md {
9968
- --pf-c-jump-links__list--Display: flex;
9969
- --pf-c-jump-links__list--Visibility: visible;
9970
- --pf-c-jump-links__toggle--Display: none;
9971
- --pf-c-jump-links__toggle--Visibility: hidden;
9972
- --pf-c-jump-links__label--Display: block;
9973
- --pf-c-jump-links__label--Visibility: visible;
10046
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10047
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9974
10048
  }
9975
- }
9976
- @media (min-width: 992px) {
9977
- .pf-c-jump-links.pf-m-expandable-on-lg {
9978
- --pf-c-jump-links__list--Display: none;
9979
- --pf-c-jump-links__list--Visibility: hidden;
9980
- --pf-c-jump-links__toggle--Display: block;
9981
- --pf-c-jump-links__toggle--Visibility: visible;
9982
- --pf-c-jump-links__label--Display: none;
9983
- --pf-c-jump-links__label--Visibility: hidden;
10049
+
10050
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10051
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9984
10052
  }
9985
10053
 
9986
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
9987
- --pf-c-jump-links__list--Display: flex;
9988
- --pf-c-jump-links__list--Visibility: visible;
9989
- --pf-c-jump-links__toggle--Display: none;
9990
- --pf-c-jump-links__toggle--Visibility: hidden;
9991
- --pf-c-jump-links__label--Display: block;
9992
- --pf-c-jump-links__label--Visibility: visible;
10054
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10055
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9993
10056
  }
9994
- }
9995
- @media (min-width: 1200px) {
9996
- .pf-c-jump-links.pf-m-expandable-on-xl {
9997
- --pf-c-jump-links__list--Display: none;
9998
- --pf-c-jump-links__list--Visibility: hidden;
9999
- --pf-c-jump-links__toggle--Display: block;
10000
- --pf-c-jump-links__toggle--Visibility: visible;
10001
- --pf-c-jump-links__label--Display: none;
10002
- --pf-c-jump-links__label--Visibility: hidden;
10057
+
10058
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10059
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10003
10060
  }
10004
10061
 
10005
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
10006
- --pf-c-jump-links__list--Display: flex;
10007
- --pf-c-jump-links__list--Visibility: visible;
10008
- --pf-c-jump-links__toggle--Display: none;
10009
- --pf-c-jump-links__toggle--Visibility: hidden;
10010
- --pf-c-jump-links__label--Display: block;
10011
- --pf-c-jump-links__label--Visibility: visible;
10062
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10063
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10064
+ }
10065
+
10066
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10067
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10012
10068
  }
10013
10069
  }
10014
- @media (min-width: 1450px) {
10015
- .pf-c-jump-links.pf-m-expandable-on-2xl {
10016
- --pf-c-jump-links__list--Display: none;
10017
- --pf-c-jump-links__list--Visibility: hidden;
10018
- --pf-c-jump-links__toggle--Display: block;
10019
- --pf-c-jump-links__toggle--Visibility: visible;
10020
- --pf-c-jump-links__label--Display: none;
10021
- --pf-c-jump-links__label--Visibility: hidden;
10070
+ @media (min-width: 992px) {
10071
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10072
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10022
10073
  }
10023
10074
 
10024
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
10025
- --pf-c-jump-links__list--Display: flex;
10026
- --pf-c-jump-links__list--Visibility: visible;
10027
- --pf-c-jump-links__toggle--Display: none;
10028
- --pf-c-jump-links__toggle--Visibility: hidden;
10029
- --pf-c-jump-links__label--Display: block;
10030
- --pf-c-jump-links__label--Visibility: visible;
10075
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10076
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10031
10077
  }
10032
- }
10033
- .pf-c-jump-links.pf-m-expanded {
10034
- --pf-c-jump-links__list--Display: flex;
10035
- --pf-c-jump-links__list--Visibility: visible;
10036
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
10037
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
10038
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
10039
- }
10040
10078
 
10041
- .pf-c-jump-links__list {
10042
- position: relative;
10043
- display: var(--pf-c-jump-links__list--Display);
10044
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
10045
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
10046
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
10047
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
10048
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
10049
- visibility: var(--pf-c-jump-links__list--Visibility);
10050
- }
10079
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10080
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10081
+ }
10051
10082
 
10052
- .pf-c-jump-links__list::before {
10053
- position: absolute;
10054
- top: 0;
10055
- right: 0;
10056
- bottom: 0;
10057
- left: 0;
10058
- pointer-events: none;
10059
- content: "";
10060
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
10061
- border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
10062
- }
10083
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10084
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10085
+ }
10063
10086
 
10064
- .pf-c-jump-links__list .pf-c-jump-links__list {
10065
- --pf-c-jump-links__list--PaddingTop: 0;
10066
- --pf-c-jump-links__list--PaddingBottom: 0;
10067
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
10068
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
10069
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
10070
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
10071
- }
10087
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10088
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10089
+ }
10072
10090
 
10073
- .pf-c-jump-links__link {
10074
- position: relative;
10075
- display: flex;
10076
- flex: 1;
10077
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
10078
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
10079
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10080
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10081
- text-decoration: none;
10082
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10083
- }
10091
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10092
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10093
+ }
10084
10094
 
10085
- .pf-c-jump-links__link:hover {
10086
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10095
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10096
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10097
+ }
10087
10098
  }
10099
+ @media (min-width: 1200px) {
10100
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10101
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10102
+ }
10088
10103
 
10089
- .pf-c-jump-links__link:focus {
10090
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10091
- }
10104
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10105
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10106
+ }
10092
10107
 
10093
- .pf-c-jump-links__link::before {
10094
- position: absolute;
10095
- top: 0;
10096
- right: 0;
10097
- bottom: 0;
10098
- left: 0;
10099
- pointer-events: none;
10100
- content: "";
10101
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
10102
- border-style: solid;
10103
- border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
10104
- }
10108
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10109
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10110
+ }
10105
10111
 
10106
- .pf-c-jump-links__item {
10107
- --pf-c-jump-links__list--before--BorderColor: transparent;
10108
- }
10112
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10113
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10114
+ }
10109
10115
 
10110
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10111
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10112
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10113
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10114
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10115
- }
10116
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10117
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10118
+ }
10116
10119
 
10117
- .pf-c-jump-links__link-text {
10118
- color: var(--pf-c-jump-links__link-text--Color);
10119
- }
10120
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10121
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10122
+ }
10120
10123
 
10121
- .pf-c-jump-links__label {
10122
- display: var(--pf-c-jump-links__label--Display);
10123
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10124
- visibility: var(--pf-c-jump-links__label--Visibility);
10124
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10125
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10126
+ }
10125
10127
  }
10128
+ @media (min-width: 1450px) {
10129
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10130
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10131
+ }
10126
10132
 
10127
- .pf-c-jump-links__main {
10128
- display: flex;
10129
- flex-direction: column;
10130
- }
10133
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10134
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10135
+ }
10131
10136
 
10132
- .pf-c-jump-links__toggle {
10133
- display: var(--pf-c-jump-links__toggle--Display);
10134
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10135
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10136
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10137
- visibility: var(--pf-c-jump-links__toggle--Visibility);
10138
- }
10137
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10138
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10139
+ }
10139
10140
 
10140
- .pf-c-jump-links__toggle .pf-c-button {
10141
- display: flex;
10142
- align-items: center;
10143
- }
10141
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10142
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10143
+ }
10144
10144
 
10145
- .pf-c-jump-links__toggle-icon {
10146
- display: inline-block;
10147
- color: var(--pf-c-jump-links__toggle-icon--Color);
10148
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
10149
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10150
- }
10145
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10146
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10147
+ }
10151
10148
 
10152
- .pf-c-jump-links__toggle-text {
10153
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10154
- color: var(--pf-c-jump-links__toggle-text--Color);
10155
- }
10149
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10150
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10151
+ }
10156
10152
 
10153
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10154
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10155
+ }
10156
+ }
10157
10157
  .pf-c-label {
10158
10158
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10159
10159
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -13055,64 +13055,248 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
13055
13055
  width: 100%;
13056
13056
  }
13057
13057
 
13058
- .pf-c-menu-toggle__button {
13059
- --pf-c-menu-toggle__controls--PaddingLeft: 0;
13060
- --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
13061
- --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
13062
- color: inherit;
13063
- border: 0;
13058
+ .pf-c-menu-toggle__button {
13059
+ --pf-c-menu-toggle__controls--PaddingLeft: 0;
13060
+ --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
13061
+ --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
13062
+ color: inherit;
13063
+ border: 0;
13064
+ }
13065
+
13066
+ .pf-c-menu-toggle__icon {
13067
+ display: inline-flex;
13068
+ align-self: center;
13069
+ flex-shrink: 0;
13070
+ margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
13071
+ line-height: 1;
13072
+ }
13073
+
13074
+ .pf-c-menu-toggle__text {
13075
+ overflow: hidden;
13076
+ text-overflow: ellipsis;
13077
+ white-space: nowrap;
13078
+ min-width: 0;
13079
+ }
13080
+
13081
+ .pf-c-menu-toggle__count {
13082
+ display: flex;
13083
+ align-items: center;
13084
+ margin-left: var(--pf-c-menu-toggle__count--MarginLeft);
13085
+ }
13086
+
13087
+ .pf-c-menu-toggle__controls {
13088
+ padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
13089
+ margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
13090
+ margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
13091
+ }
13092
+
13093
+ .pf-c-menu-toggle__toggle-icon {
13094
+ margin-right: var(--pf-c-menu-toggle__toggle-icon--MarginRight);
13095
+ color: var(--pf-c-menu-toggle__toggle-icon--Color, inherit);
13096
+ }
13097
+
13098
+ :where(.pf-theme-dark) .pf-c-menu-toggle {
13099
+ --pf-c-menu-toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
13100
+ --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
13101
+ --pf-c-menu-toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
13102
+ --pf-c-menu-toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
13103
+ --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--400);
13104
+ --pf-c-menu-toggle--before--BorderTopColor: transparent;
13105
+ --pf-c-menu-toggle--before--BorderRightColor: transparent;
13106
+ --pf-c-menu-toggle--before--BorderBottomColor: transparent;
13107
+ --pf-c-menu-toggle--before--BorderLeftColor: transparent;
13108
+ --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-global--BorderColor--400);
13109
+ --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
13110
+ --pf-c-menu-toggle--disabled--Color: var(--pf-global--palette--black-100);
13111
+ --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
13112
+ }
13113
+
13114
+ :where(.pf-theme-dark) .pf-c-menu-toggle.pf-m-plain {
13115
+ background: transparent;
13116
+ }
13117
+
13118
+ .pf-c-multiple-file-upload {
13119
+ --pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
13120
+ --pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
13121
+ --pf-c-multiple-file-upload__main--TextAlign: center;
13122
+ --pf-c-multiple-file-upload__main--GridTemplateColumns: auto;
13123
+ --pf-c-multiple-file-upload__main--GridTemplateRows: auto;
13124
+ --pf-c-multiple-file-upload__main--GridTemplateAreas:
13125
+ "title"
13126
+ "upload"
13127
+ "info";
13128
+ --pf-c-multiple-file-upload__main--Gap: var(--pf-global--spacer--md);
13129
+ --pf-c-multiple-file-upload__main--PaddingTop: var(--pf-global--spacer--lg);
13130
+ --pf-c-multiple-file-upload__main--PaddingRight: var(--pf-global--spacer--lg);
13131
+ --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-global--spacer--xl);
13132
+ --pf-c-multiple-file-upload__main--PaddingLeft: var(--pf-global--spacer--lg);
13133
+ --pf-c-multiple-file-upload__main--BorderWidth: var(--pf-global--BorderWidth--sm);
13134
+ --pf-c-multiple-file-upload__main--BorderStyle: dashed;
13135
+ --pf-c-multiple-file-upload__main--BorderColor: var(--pf-global--BorderColor--100);
13136
+ --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
13137
+ --pf-c-multiple-file-upload__title--Display: grid;
13138
+ --pf-c-multiple-file-upload__title--GridTemplateColumns: auto;
13139
+ --pf-c-multiple-file-upload__title--Gap: var(--pf-global--spacer--sm);
13140
+ --pf-c-multiple-file-upload__title-icon--Color: var(--pf-global--Color--200);
13141
+ --pf-c-multiple-file-upload__title-text-separator--Display: block;
13142
+ --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-global--spacer--sm);
13143
+ --pf-c-multiple-file-upload__info--FontSize: var(--pf-global--FontSize--sm);
13144
+ --pf-c-multiple-file-upload__info--Color: var(--pf-global--Color--200);
13145
+ --pf-c-multiple-file-upload__info--MarginTop: var(--pf-global--spacer--sm);
13146
+ --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
13147
+ --pf-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-global--active-color--100);
13148
+ --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-global--palette--blue-50);
13149
+ --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-global--active-color--100);
13150
+ --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-global--active-color--100);
13151
+ --pf-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-global--active-color--100);
13152
+ --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
13153
+ --pf-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
13154
+ --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
13155
+ --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
13156
+ "title upload"
13157
+ "info upload";
13158
+ --pf-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--2xl);
13159
+ --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-global--spacer--lg);
13160
+ --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
13161
+ --pf-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-global--spacer--xs);
13162
+ --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
13163
+ --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
13164
+ --pf-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
13165
+ --pf-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
13166
+ --pf-c-multiple-file-upload__status-progress--Gap: var(--pf-global--spacer--sm);
13167
+ --pf-c-multiple-file-upload__status-progress-icon--Color: var(--pf-global--Color--200);
13168
+ --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-global--spacer--md);
13169
+ --pf-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-global--spacer--md);
13170
+ --pf-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
13171
+ --pf-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
13172
+ --pf-c-multiple-file-upload__status-item--Gap: var(--pf-global--spacer--sm);
13173
+ --pf-c-multiple-file-upload__status-item--BorderWidth: var(--pf-global--BorderWidth--sm);
13174
+ --pf-c-multiple-file-upload__status-item--BorderColor: var(--pf-global--BorderColor--100);
13175
+ --pf-c-multiple-file-upload__status-item-icon--Color: var(--pf-global--Color--200);
13176
+ --pf-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
13177
+ --pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
13178
+ --pf-c-multiple-file-upload__status-item-progress--Gap: var(--pf-global--spacer--sm);
13179
+ --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
13180
+ --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
13181
+ display: grid;
13182
+ gap: var(--pf-c-multiple-file-upload--Gap);
13183
+ grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
13184
+ }
13185
+
13186
+ .pf-c-multiple-file-upload.pf-m-horizontal {
13187
+ --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
13188
+ --pf-c-multiple-file-upload__main--TextAlign: var(--pf-c-multiple-file-upload--m-horizontal__main--TextAlign);
13189
+ --pf-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
13190
+ --pf-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
13191
+ --pf-c-multiple-file-upload__main--Gap: var(--pf-c-multiple-file-upload--m-horizontal__main--Gap);
13192
+ --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
13193
+ --pf-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
13194
+ --pf-c-multiple-file-upload__title--Gap: var(--pf-c-multiple-file-upload--m-horizontal__title--Gap);
13195
+ --pf-c-multiple-file-upload__title-text-separator--Display: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
13196
+ --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
13197
+ --pf-c-multiple-file-upload__info--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__info--MarginTop);
13198
+ }
13199
+
13200
+ .pf-c-multiple-file-upload.pf-m-drag-over {
13201
+ --pf-c-multiple-file-upload__main--BorderStyle: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle);
13202
+ --pf-c-multiple-file-upload__main--BorderColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderColor);
13203
+ --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
13204
+ --pf-c-multiple-file-upload__title-icon--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
13205
+ --pf-c-multiple-file-upload__title-text--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color);
13206
+ --pf-c-multiple-file-upload__info--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__info--Color);
13207
+ }
13208
+
13209
+ .pf-c-multiple-file-upload__main {
13210
+ display: grid;
13211
+ padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
13212
+ text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
13213
+ background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
13214
+ border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
13215
+ grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
13216
+ grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
13217
+ grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
13218
+ gap: var(--pf-c-multiple-file-upload__main--Gap);
13219
+ }
13220
+
13221
+ .pf-c-multiple-file-upload__title {
13222
+ display: var(--pf-c-multiple-file-upload__title--Display);
13223
+ grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
13224
+ gap: var(--pf-c-multiple-file-upload__title--Gap);
13225
+ grid-area: title;
13226
+ }
13227
+
13228
+ .pf-c-multiple-file-upload__title-icon {
13229
+ color: var(--pf-c-multiple-file-upload__title-icon--Color);
13230
+ }
13231
+
13232
+ .pf-c-multiple-file-upload__title-text {
13233
+ color: var(--pf-c-multiple-file-upload__title-text--Color, inherit);
13234
+ }
13235
+
13236
+ .pf-c-multiple-file-upload__title-text-separator {
13237
+ display: var(--pf-c-multiple-file-upload__title-text-separator--Display);
13238
+ margin-top: var(--pf-c-multiple-file-upload__title-text-separator--MarginTop);
13239
+ }
13240
+
13241
+ .pf-c-multiple-file-upload__upload {
13242
+ grid-area: upload;
13243
+ }
13244
+
13245
+ .pf-c-multiple-file-upload__info {
13246
+ grid-area: info;
13247
+ margin-top: var(--pf-c-multiple-file-upload__info--MarginTop);
13248
+ font-size: var(--pf-c-multiple-file-upload__info--FontSize);
13249
+ color: var(--pf-c-multiple-file-upload__info--Color);
13250
+ }
13251
+
13252
+ .pf-c-multiple-file-upload__status,
13253
+ .pf-c-multiple-file-upload__status-item-main {
13254
+ min-width: 0;
13255
+ }
13256
+
13257
+ .pf-c-multiple-file-upload__status-progress {
13258
+ display: grid;
13259
+ grid-template-columns: var(--pf-c-multiple-file-upload__status-progress--GridTemplateColumns);
13260
+ gap: var(--pf-c-multiple-file-upload__status-progress--Gap);
13261
+ }
13262
+
13263
+ .pf-c-multiple-file-upload__status-progress-icon {
13264
+ color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
13064
13265
  }
13065
13266
 
13066
- .pf-c-menu-toggle__icon {
13067
- display: inline-flex;
13068
- align-self: center;
13069
- flex-shrink: 0;
13070
- margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
13071
- line-height: 1;
13267
+ .pf-c-multiple-file-upload__status-item {
13268
+ display: grid;
13269
+ grid-template-columns: var(--pf-c-multiple-file-upload__status-item--GridTemplateColumns);
13270
+ gap: var(--pf-c-multiple-file-upload__status-item--Gap);
13271
+ padding-top: var(--pf-c-multiple-file-upload__status-item--PaddingTop);
13272
+ padding-bottom: var(--pf-c-multiple-file-upload__status-item--PaddingBottom);
13273
+ border-bottom: var(--pf-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-c-multiple-file-upload__status-item--BorderColor);
13072
13274
  }
13073
13275
 
13074
- .pf-c-menu-toggle__text {
13075
- overflow: hidden;
13076
- text-overflow: ellipsis;
13077
- white-space: nowrap;
13078
- min-width: 0;
13276
+ .pf-c-multiple-file-upload__status-item:first-child {
13277
+ --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-c-multiple-file-upload__status-item--first-child--PaddingTop);
13079
13278
  }
13080
13279
 
13081
- .pf-c-menu-toggle__count {
13082
- display: flex;
13083
- align-items: center;
13084
- margin-left: var(--pf-c-menu-toggle__count--MarginLeft);
13280
+ .pf-c-multiple-file-upload__status-item-icon {
13281
+ color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
13085
13282
  }
13086
13283
 
13087
- .pf-c-menu-toggle__controls {
13088
- padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
13089
- margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
13090
- margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
13284
+ .pf-c-multiple-file-upload__status-item-close {
13285
+ margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
13091
13286
  }
13092
13287
 
13093
- .pf-c-menu-toggle__toggle-icon {
13094
- margin-right: var(--pf-c-menu-toggle__toggle-icon--MarginRight);
13095
- color: var(--pf-c-menu-toggle__toggle-icon--Color, inherit);
13288
+ .pf-c-multiple-file-upload__status-item-progress {
13289
+ display: grid;
13290
+ grid-template-columns: var(--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
13291
+ gap: var(--pf-c-multiple-file-upload__status-item-progress--Gap);
13096
13292
  }
13097
13293
 
13098
- :where(.pf-theme-dark) .pf-c-menu-toggle {
13099
- --pf-c-menu-toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
13100
- --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
13101
- --pf-c-menu-toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
13102
- --pf-c-menu-toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
13103
- --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--400);
13104
- --pf-c-menu-toggle--before--BorderTopColor: transparent;
13105
- --pf-c-menu-toggle--before--BorderRightColor: transparent;
13106
- --pf-c-menu-toggle--before--BorderBottomColor: transparent;
13107
- --pf-c-menu-toggle--before--BorderLeftColor: transparent;
13108
- --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-global--BorderColor--400);
13109
- --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
13110
- --pf-c-menu-toggle--disabled--Color: var(--pf-global--palette--black-100);
13111
- --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
13294
+ .pf-c-multiple-file-upload__status-item-progress-text {
13295
+ color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
13112
13296
  }
13113
13297
 
13114
- :where(.pf-theme-dark) .pf-c-menu-toggle.pf-m-plain {
13115
- background: transparent;
13298
+ .pf-c-multiple-file-upload__status-item-progress-size {
13299
+ color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
13116
13300
  }
13117
13301
 
13118
13302
  .pf-c-modal-box {
@@ -13319,190 +13503,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
13319
13503
  --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--300);
13320
13504
  }
13321
13505
 
13322
- .pf-c-multiple-file-upload {
13323
- --pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
13324
- --pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
13325
- --pf-c-multiple-file-upload__main--TextAlign: center;
13326
- --pf-c-multiple-file-upload__main--GridTemplateColumns: auto;
13327
- --pf-c-multiple-file-upload__main--GridTemplateRows: auto;
13328
- --pf-c-multiple-file-upload__main--GridTemplateAreas:
13329
- "title"
13330
- "upload"
13331
- "info";
13332
- --pf-c-multiple-file-upload__main--Gap: var(--pf-global--spacer--md);
13333
- --pf-c-multiple-file-upload__main--PaddingTop: var(--pf-global--spacer--lg);
13334
- --pf-c-multiple-file-upload__main--PaddingRight: var(--pf-global--spacer--lg);
13335
- --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-global--spacer--xl);
13336
- --pf-c-multiple-file-upload__main--PaddingLeft: var(--pf-global--spacer--lg);
13337
- --pf-c-multiple-file-upload__main--BorderWidth: var(--pf-global--BorderWidth--sm);
13338
- --pf-c-multiple-file-upload__main--BorderStyle: dashed;
13339
- --pf-c-multiple-file-upload__main--BorderColor: var(--pf-global--BorderColor--100);
13340
- --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
13341
- --pf-c-multiple-file-upload__title--Display: grid;
13342
- --pf-c-multiple-file-upload__title--GridTemplateColumns: auto;
13343
- --pf-c-multiple-file-upload__title--Gap: var(--pf-global--spacer--sm);
13344
- --pf-c-multiple-file-upload__title-icon--Color: var(--pf-global--Color--200);
13345
- --pf-c-multiple-file-upload__title-text-separator--Display: block;
13346
- --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-global--spacer--sm);
13347
- --pf-c-multiple-file-upload__info--FontSize: var(--pf-global--FontSize--sm);
13348
- --pf-c-multiple-file-upload__info--Color: var(--pf-global--Color--200);
13349
- --pf-c-multiple-file-upload__info--MarginTop: var(--pf-global--spacer--sm);
13350
- --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
13351
- --pf-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-global--active-color--100);
13352
- --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-global--palette--blue-50);
13353
- --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-global--active-color--100);
13354
- --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-global--active-color--100);
13355
- --pf-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-global--active-color--100);
13356
- --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
13357
- --pf-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
13358
- --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
13359
- --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
13360
- "title upload"
13361
- "info upload";
13362
- --pf-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--2xl);
13363
- --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-global--spacer--lg);
13364
- --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
13365
- --pf-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-global--spacer--xs);
13366
- --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
13367
- --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
13368
- --pf-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
13369
- --pf-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
13370
- --pf-c-multiple-file-upload__status-progress--Gap: var(--pf-global--spacer--sm);
13371
- --pf-c-multiple-file-upload__status-progress-icon--Color: var(--pf-global--Color--200);
13372
- --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-global--spacer--md);
13373
- --pf-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-global--spacer--md);
13374
- --pf-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
13375
- --pf-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
13376
- --pf-c-multiple-file-upload__status-item--Gap: var(--pf-global--spacer--sm);
13377
- --pf-c-multiple-file-upload__status-item--BorderWidth: var(--pf-global--BorderWidth--sm);
13378
- --pf-c-multiple-file-upload__status-item--BorderColor: var(--pf-global--BorderColor--100);
13379
- --pf-c-multiple-file-upload__status-item-icon--Color: var(--pf-global--Color--200);
13380
- --pf-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
13381
- --pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
13382
- --pf-c-multiple-file-upload__status-item-progress--Gap: var(--pf-global--spacer--sm);
13383
- --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
13384
- --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
13385
- display: grid;
13386
- gap: var(--pf-c-multiple-file-upload--Gap);
13387
- grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
13388
- }
13389
-
13390
- .pf-c-multiple-file-upload.pf-m-horizontal {
13391
- --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
13392
- --pf-c-multiple-file-upload__main--TextAlign: var(--pf-c-multiple-file-upload--m-horizontal__main--TextAlign);
13393
- --pf-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
13394
- --pf-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
13395
- --pf-c-multiple-file-upload__main--Gap: var(--pf-c-multiple-file-upload--m-horizontal__main--Gap);
13396
- --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
13397
- --pf-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
13398
- --pf-c-multiple-file-upload__title--Gap: var(--pf-c-multiple-file-upload--m-horizontal__title--Gap);
13399
- --pf-c-multiple-file-upload__title-text-separator--Display: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
13400
- --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
13401
- --pf-c-multiple-file-upload__info--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__info--MarginTop);
13402
- }
13403
-
13404
- .pf-c-multiple-file-upload.pf-m-drag-over {
13405
- --pf-c-multiple-file-upload__main--BorderStyle: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle);
13406
- --pf-c-multiple-file-upload__main--BorderColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderColor);
13407
- --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
13408
- --pf-c-multiple-file-upload__title-icon--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
13409
- --pf-c-multiple-file-upload__title-text--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color);
13410
- --pf-c-multiple-file-upload__info--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__info--Color);
13411
- }
13412
-
13413
- .pf-c-multiple-file-upload__main {
13414
- display: grid;
13415
- padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
13416
- text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
13417
- background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
13418
- border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
13419
- grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
13420
- grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
13421
- grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
13422
- gap: var(--pf-c-multiple-file-upload__main--Gap);
13423
- }
13424
-
13425
- .pf-c-multiple-file-upload__title {
13426
- display: var(--pf-c-multiple-file-upload__title--Display);
13427
- grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
13428
- gap: var(--pf-c-multiple-file-upload__title--Gap);
13429
- grid-area: title;
13430
- }
13431
-
13432
- .pf-c-multiple-file-upload__title-icon {
13433
- color: var(--pf-c-multiple-file-upload__title-icon--Color);
13434
- }
13435
-
13436
- .pf-c-multiple-file-upload__title-text {
13437
- color: var(--pf-c-multiple-file-upload__title-text--Color, inherit);
13438
- }
13439
-
13440
- .pf-c-multiple-file-upload__title-text-separator {
13441
- display: var(--pf-c-multiple-file-upload__title-text-separator--Display);
13442
- margin-top: var(--pf-c-multiple-file-upload__title-text-separator--MarginTop);
13443
- }
13444
-
13445
- .pf-c-multiple-file-upload__upload {
13446
- grid-area: upload;
13447
- }
13448
-
13449
- .pf-c-multiple-file-upload__info {
13450
- grid-area: info;
13451
- margin-top: var(--pf-c-multiple-file-upload__info--MarginTop);
13452
- font-size: var(--pf-c-multiple-file-upload__info--FontSize);
13453
- color: var(--pf-c-multiple-file-upload__info--Color);
13454
- }
13455
-
13456
- .pf-c-multiple-file-upload__status,
13457
- .pf-c-multiple-file-upload__status-item-main {
13458
- min-width: 0;
13459
- }
13460
-
13461
- .pf-c-multiple-file-upload__status-progress {
13462
- display: grid;
13463
- grid-template-columns: var(--pf-c-multiple-file-upload__status-progress--GridTemplateColumns);
13464
- gap: var(--pf-c-multiple-file-upload__status-progress--Gap);
13465
- }
13466
-
13467
- .pf-c-multiple-file-upload__status-progress-icon {
13468
- color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
13469
- }
13470
-
13471
- .pf-c-multiple-file-upload__status-item {
13472
- display: grid;
13473
- grid-template-columns: var(--pf-c-multiple-file-upload__status-item--GridTemplateColumns);
13474
- gap: var(--pf-c-multiple-file-upload__status-item--Gap);
13475
- padding-top: var(--pf-c-multiple-file-upload__status-item--PaddingTop);
13476
- padding-bottom: var(--pf-c-multiple-file-upload__status-item--PaddingBottom);
13477
- border-bottom: var(--pf-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-c-multiple-file-upload__status-item--BorderColor);
13478
- }
13479
-
13480
- .pf-c-multiple-file-upload__status-item:first-child {
13481
- --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-c-multiple-file-upload__status-item--first-child--PaddingTop);
13482
- }
13483
-
13484
- .pf-c-multiple-file-upload__status-item-icon {
13485
- color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
13486
- }
13487
-
13488
- .pf-c-multiple-file-upload__status-item-close {
13489
- margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
13490
- }
13491
-
13492
- .pf-c-multiple-file-upload__status-item-progress {
13493
- display: grid;
13494
- grid-template-columns: var(--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
13495
- gap: var(--pf-c-multiple-file-upload__status-item-progress--Gap);
13496
- }
13497
-
13498
- .pf-c-multiple-file-upload__status-item-progress-text {
13499
- color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
13500
- }
13501
-
13502
- .pf-c-multiple-file-upload__status-item-progress-size {
13503
- color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
13504
- }
13505
-
13506
13506
  .pf-l-bullseye {
13507
13507
  --pf-l-bullseye--Padding: 0;
13508
13508
  display: flex;