@patternfly/react-core 4.236.0 → 4.236.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
  3. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.js +1 -0
  4. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
  5. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
  6. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.js +1 -0
  7. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
  8. package/dist/umd/react-core.min.css +1422 -1422
  9. package/dist/umd/react-core.min.js +1 -1
  10. package/package.json +5 -5
  11. package/src/components/ApplicationLauncher/ApplicationLauncher.tsx +1 -0
package/dist/umd/react-core.min.css CHANGED
@@ -4,6 +4,23 @@
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
+
7
24
  .pf-c-accordion {
8
25
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
9
26
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -1609,23 +1626,6 @@ textarea.pf-c-form-control {
1609
1626
  display: block;
1610
1627
  }
1611
1628
 
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,583 +2014,344 @@ 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-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);
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);
2025
2191
  }
2026
2192
 
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);
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);
2087
2204
  }
2088
2205
 
2089
- .pf-c-calendar-month__header {
2090
- display: flex;
2091
- margin-bottom: var(--pf-c-calendar-month__header--MarginBottom);
2206
+ .pf-c-button:hover {
2207
+ --pf-c-button--after--BorderWidth: var(--pf-c-button--hover--after--BorderWidth);
2208
+ text-decoration: none;
2092
2209
  }
2093
2210
 
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);
2211
+ .pf-c-button:focus {
2212
+ --pf-c-button--after--BorderWidth: var(--pf-c-button--focus--after--BorderWidth);
2097
2213
  }
2098
2214
 
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);
2215
+ .pf-c-button:active, .pf-c-button.pf-m-active {
2216
+ --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth);
2102
2217
  }
2103
2218
 
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);
2219
+ .pf-c-button.pf-m-block {
2220
+ display: block;
2221
+ width: 100%;
2107
2222
  }
2108
2223
 
2109
- .pf-c-calendar-month__header-month {
2110
- flex-grow: 1;
2224
+ .pf-c-button.pf-m-small {
2225
+ --pf-c-button--FontSize: var(--pf-c-button--m-small--FontSize);
2111
2226
  }
2112
2227
 
2113
- .pf-c-calendar-month__header-year {
2114
- width: var(--pf-c-calendar-month__header-year--Width);
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);
2115
2234
  }
2116
2235
 
2117
- .pf-c-calendar-month__calendar {
2118
- table-layout: fixed;
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);
2119
2239
  }
2120
2240
 
2121
- .pf-c-calendar-month__days {
2122
- border-bottom: var(--pf-c-calendar-month__days--BorderBottomWidth) solid var(--pf-c-calendar-month__days--BorderBottomColor);
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);
2123
2244
  }
2124
2245
 
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;
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);
2129
2249
  }
2130
2250
 
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);
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);
2133
2254
  }
2134
2255
 
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;
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);
2140
2258
  }
2141
2259
 
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);
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);
2150
2264
  }
2151
2265
 
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);
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);
2154
2270
  }
2155
2271
 
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);
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);
2160
2276
  }
2161
2277
 
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);
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);
2164
2282
  }
2165
2283
 
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);
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);
2168
2288
  }
2169
2289
 
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);
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);
2172
2294
  }
2173
2295
 
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);
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);
2181
2300
  }
2182
2301
 
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;
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);
2186
2306
  }
2187
2307
 
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;
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);
2199
2312
  }
2200
2313
 
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);
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);
2209
2317
  }
2210
2318
 
2211
- .pf-c-calendar-month__date, .pf-c-calendar-month__date::after {
2212
- border-radius: var(--pf-c-calendar-month__date--BorderRadius);
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);
2213
2322
  }
2214
2323
 
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);
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);
2217
2327
  }
2218
2328
 
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);
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;
2224
2336
  }
2225
2337
 
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;
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);
2230
2341
  }
2231
2342
 
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;
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);
2243
2345
  }
2244
2346
 
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);
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);
2248
2350
  }
2249
2351
 
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);
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);
2594
2355
  }
2595
2356
 
2596
2357
  .pf-c-button.pf-m-danger:focus {
@@ -2857,9 +2618,248 @@ button.pf-c-breadcrumb__link {
2857
2618
  --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--Color--100);
2858
2619
  }
2859
2620
 
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);
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);
2857
+ }
2858
+
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);
2863
2863
  }
2864
2864
 
2865
2865
  .pf-c-card {
@@ -9208,627 +9208,306 @@ label.pf-c-check, .pf-c-check__label,
9208
9208
  padding-bottom: var(--pf-c-form__field-group-header--PaddingBottom);
9209
9209
  }
9210
9210
 
9211
- .pf-c-form__field-group-header-main {
9212
- display: flex;
9213
- flex-direction: column;
9214
- flex-grow: 1;
9215
- }
9216
-
9217
- .pf-c-form__field-group-header-title {
9218
- display: flex;
9219
- }
9220
-
9221
- .pf-c-form__field-group-header-title-text {
9222
- flex-grow: 1;
9223
- }
9224
-
9225
- .pf-c-form__field-group-header-description {
9226
- margin-top: var(--pf-c-form__field-group-header-description--MarginTop);
9227
- color: var(--pf-c-form__field-group-header-description--Color);
9228
- }
9229
-
9230
- .pf-c-form__field-group-header-actions {
9231
- margin-top: var(--pf-c-form__field-group-header-actions--MarginTop);
9232
- margin-bottom: var(--pf-c-form__field-group-header-actions--MarginBottom);
9233
- margin-left: var(--pf-c-form__field-group-header-actions--MarginLeft);
9234
- white-space: nowrap;
9235
- }
9236
-
9237
- .pf-c-form__field-group-body {
9238
- grid-column: var(--pf-c-form__field-group-body--GridColumn);
9239
- display: grid;
9240
- gap: var(--pf-c-form__field-group-body--Gap);
9241
- padding-top: var(--pf-c-form__field-group-body--PaddingTop);
9242
- padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);
9243
- }
9244
-
9245
- .pf-c-form__field-group-body > .pf-c-form__field-group:first-child {
9246
- --pf-c-form__field-group-toggle--PaddingTop: 0;
9247
- --pf-c-form__field-group-header--PaddingTop: 0;
9248
- }
9249
-
9250
- .pf-c-form__field-group-body > .pf-c-form__field-group:last-child {
9251
- margin-bottom: var(--pf-c-form__field-group-body__field-group--last-child--MarginBottom);
9252
- }
9253
-
9254
- :where(.pf-theme-dark) .pf-c-form {
9255
- --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9256
- }
9257
-
9258
- .pf-c-helper-text {
9259
- --pf-c-helper-text--Gap: var(--pf-global--spacer--xs);
9260
- --pf-c-helper-text--FontSize: var(--pf-global--FontSize--sm);
9261
- --pf-c-helper-text__item-icon--Color: var(--pf-global--Color--100);
9262
- --pf-c-helper-text__item-text--Color: var(--pf-global--Color--100);
9263
- --pf-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-global--Color--200);
9264
- --pf-c-helper-text__item-text--m-indeterminate--Color: var(--pf-global--Color--200);
9265
- --pf-c-helper-text__item-icon--m-warning--Color: var(--pf-global--warning-color--100);
9266
- --pf-c-helper-text__item-text--m-warning--Color: var(--pf-global--warning-color--200);
9267
- --pf-c-helper-text__item-icon--m-success--Color: var(--pf-global--success-color--100);
9268
- --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--200);
9269
- --pf-c-helper-text__item-icon--m-error--Color: var(--pf-global--danger-color--100);
9270
- --pf-c-helper-text__item-text--m-error--Color: var(--pf-global--danger-color--200);
9271
- --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-global--Color--100);
9272
- --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-global--Color--100);
9273
- --pf-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-global--Color--200);
9274
- --pf-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-global--Color--200);
9275
- --pf-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-global--warning-color--100);
9276
- --pf-c-helper-text--m-dynamic--m-warning__item-text--Color: var(--pf-global--Color--200);
9277
- --pf-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-global--success-color--100);
9278
- --pf-c-helper-text--m-dynamic--m-success__item-text--Color: var(--pf-global--Color--200);
9279
- --pf-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-global--danger-color--100);
9280
- --pf-c-helper-text--m-dynamic--m-error__item-text--Color: var(--pf-global--Color--100);
9281
- --pf-c-helper-text__item-icon--MarginRight: var(--pf-global--spacer--xs);
9282
- display: grid;
9283
- gap: var(--pf-c-helper-text--Gap);
9284
- font-size: var(--pf-c-helper-text--FontSize);
9285
- }
9286
-
9287
- .pf-c-helper-text__item {
9288
- display: flex;
9289
- }
9290
-
9291
- .pf-c-helper-text__item.pf-m-indeterminate {
9292
- --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-indeterminate--Color);
9293
- --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-indeterminate--Color);
9294
- --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color);
9295
- --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-indeterminate__item-text--Color);
9296
- }
9297
-
9298
- .pf-c-helper-text__item.pf-m-warning {
9299
- --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-warning--Color);
9300
- --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-warning--Color);
9301
- --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-warning__item-icon--Color);
9302
- --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-warning__item-text--Color);
9303
- }
9304
-
9305
- .pf-c-helper-text__item.pf-m-success {
9306
- --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-success--Color);
9307
- --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-success--Color);
9308
- --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-success__item-icon--Color);
9309
- --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-success__item-text--Color);
9310
- }
9311
-
9312
- .pf-c-helper-text__item.pf-m-error {
9313
- --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-error--Color);
9314
- --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-error--Color);
9315
- --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-error__item-icon--Color);
9316
- --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-error__item-text--Color);
9317
- }
9318
-
9319
- .pf-c-helper-text__item.pf-m-dynamic {
9320
- --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text--m-dynamic__item-text--Color);
9321
- --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text--m-dynamic__item-icon--Color);
9322
- }
9323
-
9324
- .pf-c-helper-text__item-icon {
9325
- margin-right: var(--pf-c-helper-text__item-icon--MarginRight);
9326
- color: var(--pf-c-helper-text__item-icon--Color);
9327
- }
9328
-
9329
- .pf-c-helper-text__item-text {
9330
- color: var(--pf-c-helper-text__item-text--Color);
9331
- }
9332
-
9333
- :where(.pf-theme-dark) .pf-c-helper-text {
9334
- --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
9335
- }
9336
-
9337
- .pf-c-hint {
9338
- --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
9339
- --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
9340
- --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
9341
- --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
9342
- --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
9343
- --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
9344
- --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
9345
- --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
9346
- --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
9347
- --pf-c-hint--Color: var(--pf-global--Color--100);
9348
- --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
9349
- --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
9350
- --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
9351
- --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
9352
- --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9353
- display: grid;
9354
- grid-template-columns: 1fr auto;
9355
- grid-row-gap: var(--pf-c-hint--GridRowGap);
9356
- padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
9357
- color: var(--pf-c-hint--Color);
9358
- background-color: var(--pf-c-hint--BackgroundColor);
9359
- border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
9360
- box-shadow: var(--pf-c-hint--BoxShadow);
9361
- }
9362
-
9363
- .pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
9364
- text-align: left;
9365
- white-space: normal;
9366
- }
9367
-
9368
- .pf-c-hint__actions {
9369
- display: inline-grid;
9370
- grid-auto-flow: column;
9371
- margin-left: var(--pf-c-hint__actions--MarginLeft);
9372
- text-align: right;
9373
- grid-column: 2;
9374
- grid-row: 1;
9375
- }
9376
-
9377
- .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
9378
- margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
9379
- }
9380
-
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;
9211
+ .pf-c-form__field-group-header-main {
9212
+ display: flex;
9213
+ flex-direction: column;
9214
+ flex-grow: 1;
9441
9215
  }
9442
9216
 
9443
- .pf-c-input-group > * + * {
9444
- margin-left: -1px;
9217
+ .pf-c-form__field-group-header-title {
9218
+ display: flex;
9445
9219
  }
9446
9220
 
9447
- .pf-c-input-group > :focus,
9448
- .pf-c-input-group > :focus-within {
9449
- z-index: var(--pf-c-input-group--child--ZIndex);
9221
+ .pf-c-form__field-group-header-title-text {
9222
+ flex-grow: 1;
9450
9223
  }
9451
9224
 
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);
9225
+ .pf-c-form__field-group-header-description {
9226
+ margin-top: var(--pf-c-form__field-group-header-description--MarginTop);
9227
+ color: var(--pf-c-form__field-group-header-description--Color);
9454
9228
  }
9455
9229
 
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;
9230
+ .pf-c-form__field-group-header-actions {
9231
+ margin-top: var(--pf-c-form__field-group-header-actions--MarginTop);
9232
+ margin-bottom: var(--pf-c-form__field-group-header-actions--MarginBottom);
9233
+ margin-left: var(--pf-c-form__field-group-header-actions--MarginLeft);
9234
+ white-space: nowrap;
9460
9235
  }
9461
9236
 
9462
- .pf-c-input-group textarea {
9463
- min-height: var(--pf-c-input-group__textarea--MinHeight);
9237
+ .pf-c-form__field-group-body {
9238
+ grid-column: var(--pf-c-form__field-group-body--GridColumn);
9239
+ display: grid;
9240
+ gap: var(--pf-c-form__field-group-body--Gap);
9241
+ padding-top: var(--pf-c-form__field-group-body--PaddingTop);
9242
+ padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);
9464
9243
  }
9465
9244
 
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);
9245
+ .pf-c-form__field-group-body > .pf-c-form__field-group:first-child {
9246
+ --pf-c-form__field-group-toggle--PaddingTop: 0;
9247
+ --pf-c-form__field-group-header--PaddingTop: 0;
9477
9248
  }
9478
9249
 
9479
- label.pf-c-input-group__text {
9480
- cursor: pointer;
9250
+ .pf-c-form__field-group-body > .pf-c-form__field-group:last-child {
9251
+ margin-bottom: var(--pf-c-form__field-group-body__field-group--last-child--MarginBottom);
9481
9252
  }
9482
9253
 
9483
- .pf-c-input-group__text.pf-m-plain {
9484
- --pf-c-input-group__text--BorderWidth: 0;
9485
- margin-left: 0;
9254
+ :where(.pf-theme-dark) .pf-c-form {
9255
+ --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9486
9256
  }
9487
9257
 
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);
9258
+ .pf-c-helper-text {
9259
+ --pf-c-helper-text--Gap: var(--pf-global--spacer--xs);
9260
+ --pf-c-helper-text--FontSize: var(--pf-global--FontSize--sm);
9261
+ --pf-c-helper-text__item-icon--Color: var(--pf-global--Color--100);
9262
+ --pf-c-helper-text__item-text--Color: var(--pf-global--Color--100);
9263
+ --pf-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-global--Color--200);
9264
+ --pf-c-helper-text__item-text--m-indeterminate--Color: var(--pf-global--Color--200);
9265
+ --pf-c-helper-text__item-icon--m-warning--Color: var(--pf-global--warning-color--100);
9266
+ --pf-c-helper-text__item-text--m-warning--Color: var(--pf-global--warning-color--200);
9267
+ --pf-c-helper-text__item-icon--m-success--Color: var(--pf-global--success-color--100);
9268
+ --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--200);
9269
+ --pf-c-helper-text__item-icon--m-error--Color: var(--pf-global--danger-color--100);
9270
+ --pf-c-helper-text__item-text--m-error--Color: var(--pf-global--danger-color--200);
9271
+ --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-global--Color--100);
9272
+ --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-global--Color--100);
9273
+ --pf-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-global--Color--200);
9274
+ --pf-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-global--Color--200);
9275
+ --pf-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-global--warning-color--100);
9276
+ --pf-c-helper-text--m-dynamic--m-warning__item-text--Color: var(--pf-global--Color--200);
9277
+ --pf-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-global--success-color--100);
9278
+ --pf-c-helper-text--m-dynamic--m-success__item-text--Color: var(--pf-global--Color--200);
9279
+ --pf-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-global--danger-color--100);
9280
+ --pf-c-helper-text--m-dynamic--m-error__item-text--Color: var(--pf-global--Color--100);
9281
+ --pf-c-helper-text__item-icon--MarginRight: var(--pf-global--spacer--xs);
9282
+ display: grid;
9283
+ gap: var(--pf-c-helper-text--Gap);
9284
+ font-size: var(--pf-c-helper-text--FontSize);
9495
9285
  }
9496
9286
 
9497
- :where(.pf-theme-dark) .pf-c-input-group > * + * {
9498
- margin-left: 0;
9499
- border-left: 1px solid var(--pf-global--palette--black-700);
9287
+ .pf-c-helper-text__item {
9288
+ display: flex;
9500
9289
  }
9501
9290
 
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;
9291
+ .pf-c-helper-text__item.pf-m-indeterminate {
9292
+ --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-indeterminate--Color);
9293
+ --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-indeterminate--Color);
9294
+ --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color);
9295
+ --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-indeterminate__item-text--Color);
9507
9296
  }
9508
9297
 
9509
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9510
- --pf-c-input-group__text--BackgroundColor: transparent;
9298
+ .pf-c-helper-text__item.pf-m-warning {
9299
+ --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-warning--Color);
9300
+ --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-warning--Color);
9301
+ --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-warning__item-icon--Color);
9302
+ --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-warning__item-text--Color);
9511
9303
  }
9512
9304
 
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;
9305
+ .pf-c-helper-text__item.pf-m-success {
9306
+ --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-success--Color);
9307
+ --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-success--Color);
9308
+ --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-success__item-icon--Color);
9309
+ --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-success__item-text--Color);
9574
9310
  }
9575
9311
 
9576
- .pf-c-jump-links.pf-m-center {
9577
- justify-content: center;
9312
+ .pf-c-helper-text__item.pf-m-error {
9313
+ --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-error--Color);
9314
+ --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-error--Color);
9315
+ --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-error__item-icon--Color);
9316
+ --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-error__item-text--Color);
9578
9317
  }
9579
9318
 
9580
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9581
- align-items: center;
9319
+ .pf-c-helper-text__item.pf-m-dynamic {
9320
+ --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text--m-dynamic__item-text--Color);
9321
+ --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text--m-dynamic__item-icon--Color);
9582
9322
  }
9583
9323
 
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;
9324
+ .pf-c-helper-text__item-icon {
9325
+ margin-right: var(--pf-c-helper-text__item-icon--MarginRight);
9326
+ color: var(--pf-c-helper-text__item-icon--Color);
9595
9327
  }
9596
9328
 
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;
9329
+ .pf-c-helper-text__item-text {
9330
+ color: var(--pf-c-helper-text__item-text--Color);
9604
9331
  }
9605
9332
 
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;
9333
+ :where(.pf-theme-dark) .pf-c-helper-text {
9334
+ --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
9613
9335
  }
9614
9336
 
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
- }
9337
+ .pf-c-hint {
9338
+ --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
9339
+ --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
9340
+ --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
9341
+ --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
9342
+ --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
9343
+ --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
9344
+ --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
9345
+ --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
9346
+ --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
9347
+ --pf-c-hint--Color: var(--pf-global--Color--100);
9348
+ --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
9349
+ --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
9350
+ --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
9351
+ --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
9352
+ --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9353
+ display: grid;
9354
+ grid-template-columns: 1fr auto;
9355
+ grid-row-gap: var(--pf-c-hint--GridRowGap);
9356
+ padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
9357
+ color: var(--pf-c-hint--Color);
9358
+ background-color: var(--pf-c-hint--BackgroundColor);
9359
+ border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
9360
+ box-shadow: var(--pf-c-hint--BoxShadow);
9361
+ }
9624
9362
 
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
- }
9363
+ .pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
9364
+ text-align: left;
9365
+ white-space: normal;
9633
9366
  }
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
- }
9643
9367
 
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
- }
9368
+ .pf-c-hint__actions {
9369
+ display: inline-grid;
9370
+ grid-auto-flow: column;
9371
+ margin-left: var(--pf-c-hint__actions--MarginLeft);
9372
+ text-align: right;
9373
+ grid-column: 2;
9374
+ grid-row: 1;
9652
9375
  }
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
- }
9662
9376
 
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
- }
9377
+ .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
9378
+ margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
9671
9379
  }
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
- }
9681
9380
 
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
- }
9381
+ .pf-c-hint__actions + .pf-c-hint__body {
9382
+ grid-column: 1;
9690
9383
  }
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
- }
9700
9384
 
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
- }
9385
+ .pf-c-hint__title {
9386
+ font-size: var(--pf-c-hint__title--FontSize);
9709
9387
  }
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);
9388
+
9389
+ .pf-c-hint__body {
9390
+ grid-column: 1/-1;
9391
+ font-size: var(--pf-c-hint__body--FontSize);
9716
9392
  }
9717
9393
 
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);
9394
+ .pf-c-hint__footer {
9395
+ grid-column: 1/-1;
9727
9396
  }
9728
9397
 
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);
9398
+ .pf-c-hint__footer > :not(:last-child) {
9399
+ margin-right: var(--pf-c-hint__footer--child--MarginRight);
9739
9400
  }
9740
9401
 
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);
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);
9748
9405
  }
9749
9406
 
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);
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);
9760
9415
  }
9761
9416
 
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);
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);
9764
9437
  }
9765
9438
 
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);
9439
+ .pf-c-input-group.pf-m-plain {
9440
+ --pf-c-input-group--BackgroundColor: transparent;
9768
9441
  }
9769
9442
 
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);
9443
+ .pf-c-input-group > * + * {
9444
+ margin-left: -1px;
9781
9445
  }
9782
9446
 
9783
- .pf-c-jump-links__item {
9784
- --pf-c-jump-links__list--before--BorderColor: transparent;
9447
+ .pf-c-input-group > :focus,
9448
+ .pf-c-input-group > :focus-within {
9449
+ z-index: var(--pf-c-input-group--child--ZIndex);
9785
9450
  }
9786
9451
 
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);
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);
9792
9454
  }
9793
9455
 
9794
- .pf-c-jump-links__link-text {
9795
- color: var(--pf-c-jump-links__link-text--Color);
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;
9796
9460
  }
9797
9461
 
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);
9462
+ .pf-c-input-group textarea {
9463
+ min-height: var(--pf-c-input-group__textarea--MinHeight);
9802
9464
  }
9803
9465
 
9804
- .pf-c-jump-links__main {
9466
+ .pf-c-input-group__text {
9805
9467
  display: flex;
9806
- flex-direction: column;
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);
9807
9477
  }
9808
9478
 
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);
9479
+ label.pf-c-input-group__text {
9480
+ cursor: pointer;
9815
9481
  }
9816
9482
 
9817
- .pf-c-jump-links__toggle .pf-c-button {
9818
- display: flex;
9819
- align-items: center;
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);
9820
9500
  }
9821
9501
 
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));
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;
9827
9507
  }
9828
9508
 
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);
9509
+ :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9510
+ --pf-c-input-group__text--BackgroundColor: transparent;
9832
9511
  }
9833
9512
 
9834
9513
  .pf-c-sidebar {
@@ -10005,155 +9684,476 @@ label.pf-c-input-group__text {
10005
9684
  --pf-c-sidebar__panel--FlexBasis: 75%;
10006
9685
  }
10007
9686
 
10008
- .pf-c-sidebar__panel.pf-m-width-100 {
10009
- --pf-c-sidebar__panel--FlexBasis: 100%;
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;
9918
+ }
9919
+
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;
9927
+ }
9928
+
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;
10010
9936
  }
10011
9937
 
10012
9938
  @media (min-width: 576px) {
10013
- .pf-c-sidebar__panel.pf-m-width-default-on-sm {
10014
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10015
- }
10016
-
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%;
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;
10035
9946
  }
10036
9947
 
10037
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10038
- --pf-c-sidebar__panel--FlexBasis: 100%;
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;
10039
9955
  }
10040
9956
  }
10041
9957
  @media (min-width: 768px) {
10042
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
10043
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10044
- }
10045
-
10046
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
10047
- --pf-c-sidebar__panel--FlexBasis: 25%;
10048
- }
10049
-
10050
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
10051
- --pf-c-sidebar__panel--FlexBasis: 33%;
10052
- }
10053
-
10054
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
10055
- --pf-c-sidebar__panel--FlexBasis: 50%;
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;
10056
9965
  }
10057
9966
 
10058
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
10059
- --pf-c-sidebar__panel--FlexBasis: 66%;
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;
10060
9974
  }
10061
-
10062
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
10063
- --pf-c-sidebar__panel--FlexBasis: 75%;
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;
10064
9984
  }
10065
9985
 
10066
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
10067
- --pf-c-sidebar__panel--FlexBasis: 100%;
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;
10068
9993
  }
10069
9994
  }
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);
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;
10073
10003
  }
10074
10004
 
10075
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10076
- --pf-c-sidebar__panel--FlexBasis: 25%;
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;
10077
10012
  }
10078
-
10079
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10080
- --pf-c-sidebar__panel--FlexBasis: 33%;
10013
+ }
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;
10081
10022
  }
10082
10023
 
10083
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10084
- --pf-c-sidebar__panel--FlexBasis: 50%;
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;
10085
10031
  }
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
+ }
10086
10040
 
10087
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10088
- --pf-c-sidebar__panel--FlexBasis: 66%;
10089
- }
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
+ }
10090
10051
 
10091
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10092
- --pf-c-sidebar__panel--FlexBasis: 75%;
10093
- }
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
+ }
10094
10063
 
10095
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10096
- --pf-c-sidebar__panel--FlexBasis: 100%;
10097
- }
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);
10098
10071
  }
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
- }
10103
10072
 
10104
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10105
- --pf-c-sidebar__panel--FlexBasis: 25%;
10106
- }
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
+ }
10107
10084
 
10108
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10109
- --pf-c-sidebar__panel--FlexBasis: 33%;
10110
- }
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);
10087
+ }
10111
10088
 
10112
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10113
- --pf-c-sidebar__panel--FlexBasis: 50%;
10114
- }
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
+ }
10115
10092
 
10116
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10117
- --pf-c-sidebar__panel--FlexBasis: 66%;
10118
- }
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
+ }
10119
10105
 
10120
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10121
- --pf-c-sidebar__panel--FlexBasis: 75%;
10122
- }
10106
+ .pf-c-jump-links__item {
10107
+ --pf-c-jump-links__list--before--BorderColor: transparent;
10108
+ }
10123
10109
 
10124
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10125
- --pf-c-sidebar__panel--FlexBasis: 100%;
10126
- }
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);
10127
10115
  }
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
- }
10132
10116
 
10133
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10134
- --pf-c-sidebar__panel--FlexBasis: 25%;
10135
- }
10117
+ .pf-c-jump-links__link-text {
10118
+ color: var(--pf-c-jump-links__link-text--Color);
10119
+ }
10136
10120
 
10137
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10138
- --pf-c-sidebar__panel--FlexBasis: 33%;
10139
- }
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);
10125
+ }
10140
10126
 
10141
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10142
- --pf-c-sidebar__panel--FlexBasis: 50%;
10143
- }
10127
+ .pf-c-jump-links__main {
10128
+ display: flex;
10129
+ flex-direction: column;
10130
+ }
10144
10131
 
10145
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10146
- --pf-c-sidebar__panel--FlexBasis: 66%;
10147
- }
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
+ }
10148
10139
 
10149
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10150
- --pf-c-sidebar__panel--FlexBasis: 75%;
10151
- }
10140
+ .pf-c-jump-links__toggle .pf-c-button {
10141
+ display: flex;
10142
+ align-items: center;
10143
+ }
10152
10144
 
10153
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10154
- --pf-c-sidebar__panel--FlexBasis: 100%;
10155
- }
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));
10156
10150
  }
10151
+
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
+ }
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);
@@ -13048,255 +13048,71 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
13048
13048
  }
13049
13049
 
13050
13050
  .pf-c-menu-toggle.pf-m-typeahead, .pf-c-menu-toggle.pf-m-split-button {
13051
- --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
13052
- }
13053
-
13054
- .pf-c-menu-toggle.pf-m-full-width {
13055
- width: 100%;
13056
- }
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;
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);
13051
+ --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
13261
13052
  }
13262
13053
 
13263
- .pf-c-multiple-file-upload__status-progress-icon {
13264
- color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
13054
+ .pf-c-menu-toggle.pf-m-full-width {
13055
+ width: 100%;
13265
13056
  }
13266
13057
 
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);
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;
13274
13064
  }
13275
13065
 
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);
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;
13278
13072
  }
13279
13073
 
13280
- .pf-c-multiple-file-upload__status-item-icon {
13281
- color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
13074
+ .pf-c-menu-toggle__text {
13075
+ overflow: hidden;
13076
+ text-overflow: ellipsis;
13077
+ white-space: nowrap;
13078
+ min-width: 0;
13282
13079
  }
13283
13080
 
13284
- .pf-c-multiple-file-upload__status-item-close {
13285
- margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
13081
+ .pf-c-menu-toggle__count {
13082
+ display: flex;
13083
+ align-items: center;
13084
+ margin-left: var(--pf-c-menu-toggle__count--MarginLeft);
13286
13085
  }
13287
13086
 
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);
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);
13292
13091
  }
13293
13092
 
13294
- .pf-c-multiple-file-upload__status-item-progress-text {
13295
- color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
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);
13296
13096
  }
13297
13097
 
13298
- .pf-c-multiple-file-upload__status-item-progress-size {
13299
- color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
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;
13300
13116
  }
13301
13117
 
13302
13118
  .pf-c-modal-box {
@@ -13503,6 +13319,190 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
13503
13319
  --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--300);
13504
13320
  }
13505
13321
 
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;