@patternfly/react-templates 1.1.0-prerelease.17 → 1.1.0-prerelease.18

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.
@@ -193,6 +193,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
193
193
  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
194
194
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
195
195
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
196
+ --pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-v5-global--spacer--xs);
196
197
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
197
198
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
198
199
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
@@ -550,6 +551,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
550
551
  border: 0;
551
552
  }
552
553
 
554
+ .pf-v5-c-menu-toggle__button.pf-m-text {
555
+ --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
556
+ display: inline-flex;
557
+ align-items: baseline;
558
+ padding-inline-start: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
559
+ }
560
+
553
561
  .pf-v5-c-menu-toggle__icon {
554
562
  flex-shrink: 0;
555
563
  align-self: center;
@@ -2134,112 +2142,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
2134
2142
  max-width: 100%;
2135
2143
  }
2136
2144
 
2137
- .pf-v5-c-breadcrumb {
2138
- --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--sm);
2139
- --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-v5-global--LineHeight--sm);
2140
- --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-v5-global--spacer--sm);
2141
- --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--icon--Color--dark);
2142
- --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-v5-global--spacer--sm);
2143
- --pf-v5-c-breadcrumb__item-divider--FontSize: var(--pf-v5-global--FontSize--sm);
2144
- --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-global--link--Color);
2145
- --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-global--link--TextDecoration);
2146
- --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-v5-global--link--Color--hover);
2147
- --pf-v5-c-breadcrumb__link--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
2148
- --pf-v5-c-breadcrumb__link--m-current--Color: var(--pf-v5-global--Color--100);
2149
- --pf-v5-c-breadcrumb__link--BackgroundColor: transparent;
2150
- --pf-v5-c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--sm);
2151
- --pf-v5-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
2152
- --pf-v5-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v5-c-breadcrumb__item--MarginRight) * -1);
2153
- --pf-v5-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
2154
- --pf-v5-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v5-c-breadcrumb__item-divider--MarginRight) * -1);
2155
- --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-v5-global--LineHeight--sm);
2156
- display: inline-flex;
2157
- }
2158
-
2159
- .pf-v5-c-breadcrumb__list {
2160
- display: flex;
2161
- flex-wrap: wrap;
2162
- align-items: center;
2163
- }
2164
-
2165
- .pf-v5-c-breadcrumb__item {
2166
- display: flex;
2167
- align-items: baseline;
2168
- font-size: var(--pf-v5-c-breadcrumb__item--FontSize);
2169
- font-weight: var(--pf-v5-c-breadcrumb__item--FontWeight);
2170
- line-height: var(--pf-v5-c-breadcrumb__item--LineHeight);
2171
- white-space: nowrap;
2172
- list-style: none;
2173
- }
2174
-
2175
- .pf-v5-c-breadcrumb__item:not(:last-child) {
2176
- margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
2177
- }
2178
-
2179
- .pf-v5-c-breadcrumb__item-divider {
2180
- margin-inline-end: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
2181
- font-size: var(--pf-v5-c-breadcrumb__item-divider--FontSize);
2182
- line-height: 1;
2183
- color: var(--pf-v5-c-breadcrumb__item-divider--Color);
2184
- }
2185
-
2186
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
2187
- scale: -1 1;
2188
- }
2189
-
2190
- .pf-v5-c-breadcrumb__link {
2191
- font-size: inherit;
2192
- font-weight: var(--pf-v5-c-breadcrumb__link--FontWeight);
2193
- line-height: inherit;
2194
- color: var(--pf-v5-c-breadcrumb__link--Color);
2195
- text-decoration: var(--pf-v5-c-breadcrumb__link--TextDecoration);
2196
- word-break: break-word;
2197
- background-color: var(--pf-v5-c-breadcrumb__link--BackgroundColor);
2198
- }
2199
-
2200
- .pf-v5-c-breadcrumb__link:hover {
2201
- --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-c-breadcrumb__link--hover--Color);
2202
- --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-c-breadcrumb__link--hover--TextDecoration);
2203
- }
2204
-
2205
- .pf-v5-c-breadcrumb__link.pf-m-current {
2206
- cursor: default;
2207
- }
2208
-
2209
- .pf-v5-c-breadcrumb__link.pf-m-current, .pf-v5-c-breadcrumb__link.pf-m-current:hover {
2210
- color: var(--pf-v5-c-breadcrumb__link--m-current--Color);
2211
- text-decoration: none;
2212
- }
2213
-
2214
- button.pf-v5-c-breadcrumb__link {
2215
- border: none;
2216
- }
2217
-
2218
- .pf-v5-c-breadcrumb__dropdown {
2219
- margin-block-start: var(--pf-v5-c-breadcrumb__dropdown--MarginTop);
2220
- margin-block-end: var(--pf-v5-c-breadcrumb__dropdown--MarginBottom);
2221
- margin-inline-start: var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
2222
- margin-inline-end: var(--pf-v5-c-breadcrumb__dropdown--MarginRight);
2223
- }
2224
-
2225
- .pf-v5-c-breadcrumb__dropdown .pf-v5-c-dropdown__toggle {
2226
- line-height: var(--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
2227
- }
2228
-
2229
- .pf-v5-c-breadcrumb__heading {
2230
- display: inline;
2231
- font-size: var(--pf-v5-c-breadcrumb__heading--FontSize);
2232
- }
2233
-
2234
- .pf-v5-c-breadcrumb__link,
2235
- .pf-v5-c-breadcrumb__heading {
2236
- white-space: normal;
2237
- }
2238
-
2239
- .pf-v5-c-breadcrumb__list > :first-child .pf-v5-c-breadcrumb__item-divider {
2240
- display: none;
2241
- }
2242
-
2243
2145
  .pf-v5-c-button {
2244
2146
  --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--form-element);
2245
2147
  --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--md);
@@ -2870,6 +2772,112 @@ button.pf-v5-c-breadcrumb__link {
2870
2772
  border-block-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-700);
2871
2773
  }
2872
2774
 
2775
+ .pf-v5-c-breadcrumb {
2776
+ --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--sm);
2777
+ --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-v5-global--LineHeight--sm);
2778
+ --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-v5-global--spacer--sm);
2779
+ --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--icon--Color--dark);
2780
+ --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-v5-global--spacer--sm);
2781
+ --pf-v5-c-breadcrumb__item-divider--FontSize: var(--pf-v5-global--FontSize--sm);
2782
+ --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-global--link--Color);
2783
+ --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-global--link--TextDecoration);
2784
+ --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-v5-global--link--Color--hover);
2785
+ --pf-v5-c-breadcrumb__link--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
2786
+ --pf-v5-c-breadcrumb__link--m-current--Color: var(--pf-v5-global--Color--100);
2787
+ --pf-v5-c-breadcrumb__link--BackgroundColor: transparent;
2788
+ --pf-v5-c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--sm);
2789
+ --pf-v5-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
2790
+ --pf-v5-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v5-c-breadcrumb__item--MarginRight) * -1);
2791
+ --pf-v5-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
2792
+ --pf-v5-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v5-c-breadcrumb__item-divider--MarginRight) * -1);
2793
+ --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-v5-global--LineHeight--sm);
2794
+ display: inline-flex;
2795
+ }
2796
+
2797
+ .pf-v5-c-breadcrumb__list {
2798
+ display: flex;
2799
+ flex-wrap: wrap;
2800
+ align-items: center;
2801
+ }
2802
+
2803
+ .pf-v5-c-breadcrumb__item {
2804
+ display: flex;
2805
+ align-items: baseline;
2806
+ font-size: var(--pf-v5-c-breadcrumb__item--FontSize);
2807
+ font-weight: var(--pf-v5-c-breadcrumb__item--FontWeight);
2808
+ line-height: var(--pf-v5-c-breadcrumb__item--LineHeight);
2809
+ white-space: nowrap;
2810
+ list-style: none;
2811
+ }
2812
+
2813
+ .pf-v5-c-breadcrumb__item:not(:last-child) {
2814
+ margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
2815
+ }
2816
+
2817
+ .pf-v5-c-breadcrumb__item-divider {
2818
+ margin-inline-end: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
2819
+ font-size: var(--pf-v5-c-breadcrumb__item-divider--FontSize);
2820
+ line-height: 1;
2821
+ color: var(--pf-v5-c-breadcrumb__item-divider--Color);
2822
+ }
2823
+
2824
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
2825
+ scale: -1 1;
2826
+ }
2827
+
2828
+ .pf-v5-c-breadcrumb__link {
2829
+ font-size: inherit;
2830
+ font-weight: var(--pf-v5-c-breadcrumb__link--FontWeight);
2831
+ line-height: inherit;
2832
+ color: var(--pf-v5-c-breadcrumb__link--Color);
2833
+ text-decoration: var(--pf-v5-c-breadcrumb__link--TextDecoration);
2834
+ word-break: break-word;
2835
+ background-color: var(--pf-v5-c-breadcrumb__link--BackgroundColor);
2836
+ }
2837
+
2838
+ .pf-v5-c-breadcrumb__link:hover {
2839
+ --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-c-breadcrumb__link--hover--Color);
2840
+ --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-c-breadcrumb__link--hover--TextDecoration);
2841
+ }
2842
+
2843
+ .pf-v5-c-breadcrumb__link.pf-m-current {
2844
+ cursor: default;
2845
+ }
2846
+
2847
+ .pf-v5-c-breadcrumb__link.pf-m-current, .pf-v5-c-breadcrumb__link.pf-m-current:hover {
2848
+ color: var(--pf-v5-c-breadcrumb__link--m-current--Color);
2849
+ text-decoration: none;
2850
+ }
2851
+
2852
+ button.pf-v5-c-breadcrumb__link {
2853
+ border: none;
2854
+ }
2855
+
2856
+ .pf-v5-c-breadcrumb__dropdown {
2857
+ margin-block-start: var(--pf-v5-c-breadcrumb__dropdown--MarginTop);
2858
+ margin-block-end: var(--pf-v5-c-breadcrumb__dropdown--MarginBottom);
2859
+ margin-inline-start: var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
2860
+ margin-inline-end: var(--pf-v5-c-breadcrumb__dropdown--MarginRight);
2861
+ }
2862
+
2863
+ .pf-v5-c-breadcrumb__dropdown .pf-v5-c-dropdown__toggle {
2864
+ line-height: var(--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
2865
+ }
2866
+
2867
+ .pf-v5-c-breadcrumb__heading {
2868
+ display: inline;
2869
+ font-size: var(--pf-v5-c-breadcrumb__heading--FontSize);
2870
+ }
2871
+
2872
+ .pf-v5-c-breadcrumb__link,
2873
+ .pf-v5-c-breadcrumb__heading {
2874
+ white-space: normal;
2875
+ }
2876
+
2877
+ .pf-v5-c-breadcrumb__list > :first-child .pf-v5-c-breadcrumb__item-divider {
2878
+ display: none;
2879
+ }
2880
+
2873
2881
  .pf-v5-c-calendar-month {
2874
2882
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
2875
2883
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
@@ -5287,46 +5295,126 @@ button.pf-v5-c-breadcrumb__link {
5287
5295
  --pf-v5-c-description-list__group--GridTemplateRows: var(--pf-v5-c-description-list--m-vertical__group--GridTemplateRows);
5288
5296
  }
5289
5297
  }
5290
- .pf-v5-c-drawer {
5291
- --pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
5292
- --pf-v5-c-drawer__section--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
5293
- --pf-v5-c-drawer__content--FlexBasis: 100%;
5294
- --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
5295
- --pf-v5-c-drawer__content--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
5296
- --pf-v5-c-drawer__content--ZIndex: var(--pf-v5-global--ZIndex--xs);
5297
- --pf-v5-c-drawer__panel--MinWidth: 50%;
5298
- --pf-v5-c-drawer__panel--MaxHeight: auto;
5299
- --pf-v5-c-drawer__panel--ZIndex: var(--pf-v5-global--ZIndex--sm);
5300
- --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
5301
- --pf-v5-c-drawer__panel--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
5302
- --pf-v5-c-drawer__panel--TransitionDuration: var(--pf-v5-global--TransitionDuration);
5303
- --pf-v5-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
5304
- --pf-v5-c-drawer__panel--FlexBasis: 100%;
5305
- --pf-v5-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5306
- --pf-v5-c-drawer__panel--md--FlexBasis: 50%;
5307
- --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;
5308
- --pf-v5-c-drawer__panel--xl--MinWidth: 28.125rem;
5309
- --pf-v5-c-drawer__panel--xl--FlexBasis: 28.125rem;
5310
- --pf-v5-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
5311
- --pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
5312
- --pf-v5-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
5313
- --pf-v5-c-drawer__panel--m-resizable--FlexDirection: row;
5314
- --pf-v5-c-drawer__panel--m-resizable--md--FlexBasis--min: var(--pf-v5-c-drawer__splitter--m-vertical--Width);
5315
- --pf-v5-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
5316
- --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
5317
- --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
5318
- --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
5319
- --pf-v5-c-drawer--child--PaddingTop: var(--pf-v5-global--spacer--md);
5320
- --pf-v5-c-drawer--child--PaddingRight: var(--pf-v5-global--spacer--md);
5321
- --pf-v5-c-drawer--child--PaddingBottom: var(--pf-v5-global--spacer--md);
5322
- --pf-v5-c-drawer--child--PaddingLeft: var(--pf-v5-global--spacer--md);
5323
- --pf-v5-c-drawer--child--md--PaddingTop: var(--pf-v5-global--spacer--lg);
5324
- --pf-v5-c-drawer--child--md--PaddingRight: var(--pf-v5-global--spacer--lg);
5325
- --pf-v5-c-drawer--child--md--PaddingBottom: var(--pf-v5-global--spacer--lg);
5326
- --pf-v5-c-drawer--child--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
5327
- --pf-v5-c-drawer--child--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
5328
- --pf-v5-c-drawer--child--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
5329
- --pf-v5-c-drawer--child--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
5298
+ .pf-v5-c-draggable {
5299
+ --pf-v5-c-draggable--Cursor: auto;
5300
+ --pf-v5-c-draggable--m-dragging--Cursor: grabbing;
5301
+ --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-v5-global--BoxShadow--md);
5302
+ --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
5303
+ --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
5304
+ --pf-v5-c-draggable--m-drag-outside--Cursor: not-allowed;
5305
+ --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
5306
+ cursor: var(--pf-v5-c-draggable--Cursor);
5307
+ }
5308
+
5309
+ .pf-v5-c-draggable.pf-m-dragging {
5310
+ --pf-v5-c-draggable--Cursor: var(--pf-v5-c-draggable--m-dragging--Cursor);
5311
+ position: relative;
5312
+ background-color: var(--pf-v5-c-draggable--m-dragging--BackgroundColor);
5313
+ box-shadow: var(--pf-v5-c-draggable--m-dragging--BoxShadow);
5314
+ }
5315
+
5316
+ .pf-v5-c-draggable.pf-m-dragging::after {
5317
+ position: absolute;
5318
+ inset-block-start: 0;
5319
+ inset-block-end: 0;
5320
+ inset-inline-start: 0;
5321
+ inset-inline-end: 0;
5322
+ content: "";
5323
+ border: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
5324
+ }
5325
+
5326
+ .pf-v5-c-draggable.pf-m-drag-outside {
5327
+ --pf-v5-c-draggable--m-dragging--Cursor: var(--pf-v5-c-draggable--m-drag-outside--Cursor);
5328
+ --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-c-draggable--m-drag-outside--after--BorderColor);
5329
+ }
5330
+
5331
+ .pf-v5-c-droppable {
5332
+ --pf-v5-c-droppable--before--BackgroundColor: transparent;
5333
+ --pf-v5-c-droppable--before--Opacity: 0;
5334
+ --pf-v5-c-droppable--after--BorderWidth: 0;
5335
+ --pf-v5-c-droppable--after--BorderColor: transparent;
5336
+ --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-v5-global--palette--white);
5337
+ --pf-v5-c-droppable--m-dragging--before--Opacity: .6;
5338
+ --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
5339
+ --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
5340
+ --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
5341
+ }
5342
+
5343
+ .pf-v5-c-droppable::before, .pf-v5-c-droppable::after {
5344
+ position: absolute;
5345
+ inset-block-start: 0;
5346
+ inset-block-end: 0;
5347
+ inset-inline-start: 0;
5348
+ inset-inline-end: 0;
5349
+ pointer-events: none;
5350
+ content: "";
5351
+ }
5352
+
5353
+ .pf-v5-c-droppable::before {
5354
+ background-color: var(--pf-v5-c-droppable--before--BackgroundColor);
5355
+ opacity: var(--pf-v5-c-droppable--before--Opacity);
5356
+ }
5357
+
5358
+ .pf-v5-c-droppable::after {
5359
+ border: var(--pf-v5-c-droppable--after--BorderWidth, 0) solid var(--pf-v5-c-droppable--after--BorderColor, transparent);
5360
+ }
5361
+
5362
+ .pf-v5-c-droppable.pf-m-dragging {
5363
+ --pf-v5-c-droppable--before--BackgroundColor: var(--pf-v5-c-droppable--m-dragging--before--BackgroundColor);
5364
+ --pf-v5-c-droppable--before--Opacity: var(--pf-v5-c-droppable--m-dragging--before--Opacity);
5365
+ --pf-v5-c-droppable--after--BorderWidth: var(--pf-v5-c-droppable--m-dragging--after--BorderWidth);
5366
+ --pf-v5-c-droppable--after--BorderColor: var(--pf-v5-c-droppable--m-dragging--after--BorderColor);
5367
+ position: relative;
5368
+ }
5369
+
5370
+ .pf-v5-c-droppable.pf-m-drag-outside {
5371
+ --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
5372
+ }
5373
+
5374
+ :where(.pf-v5-theme-dark) .pf-v5-c-droppable {
5375
+ --pf-v5-c-droppable--m-dragging--before--Opacity: .2;
5376
+ }
5377
+
5378
+ .pf-v5-c-drawer {
5379
+ --pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
5380
+ --pf-v5-c-drawer__section--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
5381
+ --pf-v5-c-drawer__content--FlexBasis: 100%;
5382
+ --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
5383
+ --pf-v5-c-drawer__content--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
5384
+ --pf-v5-c-drawer__content--ZIndex: var(--pf-v5-global--ZIndex--xs);
5385
+ --pf-v5-c-drawer__panel--MinWidth: 50%;
5386
+ --pf-v5-c-drawer__panel--MaxHeight: auto;
5387
+ --pf-v5-c-drawer__panel--ZIndex: var(--pf-v5-global--ZIndex--sm);
5388
+ --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
5389
+ --pf-v5-c-drawer__panel--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
5390
+ --pf-v5-c-drawer__panel--TransitionDuration: var(--pf-v5-global--TransitionDuration);
5391
+ --pf-v5-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
5392
+ --pf-v5-c-drawer__panel--FlexBasis: 100%;
5393
+ --pf-v5-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5394
+ --pf-v5-c-drawer__panel--md--FlexBasis: 50%;
5395
+ --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;
5396
+ --pf-v5-c-drawer__panel--xl--MinWidth: 28.125rem;
5397
+ --pf-v5-c-drawer__panel--xl--FlexBasis: 28.125rem;
5398
+ --pf-v5-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
5399
+ --pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
5400
+ --pf-v5-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
5401
+ --pf-v5-c-drawer__panel--m-resizable--FlexDirection: row;
5402
+ --pf-v5-c-drawer__panel--m-resizable--md--FlexBasis--min: var(--pf-v5-c-drawer__splitter--m-vertical--Width);
5403
+ --pf-v5-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
5404
+ --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
5405
+ --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
5406
+ --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
5407
+ --pf-v5-c-drawer--child--PaddingTop: var(--pf-v5-global--spacer--md);
5408
+ --pf-v5-c-drawer--child--PaddingRight: var(--pf-v5-global--spacer--md);
5409
+ --pf-v5-c-drawer--child--PaddingBottom: var(--pf-v5-global--spacer--md);
5410
+ --pf-v5-c-drawer--child--PaddingLeft: var(--pf-v5-global--spacer--md);
5411
+ --pf-v5-c-drawer--child--md--PaddingTop: var(--pf-v5-global--spacer--lg);
5412
+ --pf-v5-c-drawer--child--md--PaddingRight: var(--pf-v5-global--spacer--lg);
5413
+ --pf-v5-c-drawer--child--md--PaddingBottom: var(--pf-v5-global--spacer--lg);
5414
+ --pf-v5-c-drawer--child--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
5415
+ --pf-v5-c-drawer--child--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
5416
+ --pf-v5-c-drawer--child--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
5417
+ --pf-v5-c-drawer--child--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
5330
5418
  --pf-v5-c-drawer--child--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
5331
5419
  --pf-v5-c-drawer--child--m-padding--md--PaddingTop: var(--pf-v5-global--spacer--lg);
5332
5420
  --pf-v5-c-drawer--child--m-padding--md--PaddingRight: var(--pf-v5-global--spacer--lg);
@@ -6158,86 +6246,6 @@ button.pf-v5-c-breadcrumb__link {
6158
6246
  --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
6159
6247
  }
6160
6248
 
6161
- .pf-v5-c-draggable {
6162
- --pf-v5-c-draggable--Cursor: auto;
6163
- --pf-v5-c-draggable--m-dragging--Cursor: grabbing;
6164
- --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-v5-global--BoxShadow--md);
6165
- --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
6166
- --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
6167
- --pf-v5-c-draggable--m-drag-outside--Cursor: not-allowed;
6168
- --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
6169
- cursor: var(--pf-v5-c-draggable--Cursor);
6170
- }
6171
-
6172
- .pf-v5-c-draggable.pf-m-dragging {
6173
- --pf-v5-c-draggable--Cursor: var(--pf-v5-c-draggable--m-dragging--Cursor);
6174
- position: relative;
6175
- background-color: var(--pf-v5-c-draggable--m-dragging--BackgroundColor);
6176
- box-shadow: var(--pf-v5-c-draggable--m-dragging--BoxShadow);
6177
- }
6178
-
6179
- .pf-v5-c-draggable.pf-m-dragging::after {
6180
- position: absolute;
6181
- inset-block-start: 0;
6182
- inset-block-end: 0;
6183
- inset-inline-start: 0;
6184
- inset-inline-end: 0;
6185
- content: "";
6186
- border: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
6187
- }
6188
-
6189
- .pf-v5-c-draggable.pf-m-drag-outside {
6190
- --pf-v5-c-draggable--m-dragging--Cursor: var(--pf-v5-c-draggable--m-drag-outside--Cursor);
6191
- --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-c-draggable--m-drag-outside--after--BorderColor);
6192
- }
6193
-
6194
- .pf-v5-c-droppable {
6195
- --pf-v5-c-droppable--before--BackgroundColor: transparent;
6196
- --pf-v5-c-droppable--before--Opacity: 0;
6197
- --pf-v5-c-droppable--after--BorderWidth: 0;
6198
- --pf-v5-c-droppable--after--BorderColor: transparent;
6199
- --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-v5-global--palette--white);
6200
- --pf-v5-c-droppable--m-dragging--before--Opacity: .6;
6201
- --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
6202
- --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
6203
- --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
6204
- }
6205
-
6206
- .pf-v5-c-droppable::before, .pf-v5-c-droppable::after {
6207
- position: absolute;
6208
- inset-block-start: 0;
6209
- inset-block-end: 0;
6210
- inset-inline-start: 0;
6211
- inset-inline-end: 0;
6212
- pointer-events: none;
6213
- content: "";
6214
- }
6215
-
6216
- .pf-v5-c-droppable::before {
6217
- background-color: var(--pf-v5-c-droppable--before--BackgroundColor);
6218
- opacity: var(--pf-v5-c-droppable--before--Opacity);
6219
- }
6220
-
6221
- .pf-v5-c-droppable::after {
6222
- border: var(--pf-v5-c-droppable--after--BorderWidth, 0) solid var(--pf-v5-c-droppable--after--BorderColor, transparent);
6223
- }
6224
-
6225
- .pf-v5-c-droppable.pf-m-dragging {
6226
- --pf-v5-c-droppable--before--BackgroundColor: var(--pf-v5-c-droppable--m-dragging--before--BackgroundColor);
6227
- --pf-v5-c-droppable--before--Opacity: var(--pf-v5-c-droppable--m-dragging--before--Opacity);
6228
- --pf-v5-c-droppable--after--BorderWidth: var(--pf-v5-c-droppable--m-dragging--after--BorderWidth);
6229
- --pf-v5-c-droppable--after--BorderColor: var(--pf-v5-c-droppable--m-dragging--after--BorderColor);
6230
- position: relative;
6231
- }
6232
-
6233
- .pf-v5-c-droppable.pf-m-drag-outside {
6234
- --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
6235
- }
6236
-
6237
- :where(.pf-v5-theme-dark) .pf-v5-c-droppable {
6238
- --pf-v5-c-droppable--m-dragging--before--Opacity: .2;
6239
- }
6240
-
6241
6249
  .pf-v5-c-dual-list-selector {
6242
6250
  --pf-v5-c-dual-list-selector__header--GridArea: pane-header;
6243
6251
  --pf-v5-c-dual-list-selector__tools--GridArea: pane-tools;
@@ -8817,92 +8825,6 @@ label.pf-v5-c-input-group__text {
8817
8825
  --pf-v5-c-sidebar__panel--FlexBasis: 100%;
8818
8826
  }
8819
8827
  }
8820
- .pf-v5-c-list {
8821
- --pf-v5-c-list--PaddingLeft: var(--pf-v5-global--spacer--lg);
8822
- --pf-v5-c-list--nested--MarginTop: var(--pf-v5-global--spacer--sm);
8823
- --pf-v5-c-list--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
8824
- --pf-v5-c-list--ul--ListStyle: var(--pf-v5-global--ListStyle);
8825
- --pf-v5-c-list--li--MarginTop: var(--pf-v5-global--spacer--sm);
8826
- --pf-v5-c-list--m-inline--li--MarginRight: var(--pf-v5-global--spacer--lg);
8827
- --pf-v5-c-list--m-bordered--li--PaddingBottom: var(--pf-v5-global--spacer--sm);
8828
- --pf-v5-c-list--m-bordered--li--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
8829
- --pf-v5-c-list--m-bordered--li--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
8830
- --pf-v5-c-list__item-icon--MinWidth: var(--pf-v5-global--icon--FontSize--sm);
8831
- --pf-v5-c-list__item-icon--MarginTop: 0.375rem;
8832
- --pf-v5-c-list__item-icon--MarginRight: var(--pf-v5-global--spacer--sm);
8833
- --pf-v5-c-list__item-icon--Color: var(--pf-v5-global--icon--Color--dark);
8834
- --pf-v5-c-list__item-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
8835
- --pf-v5-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-v5-global--icon--FontSize--lg);
8836
- --pf-v5-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-v5-global--spacer--md);
8837
- --pf-v5-c-list--m-icon-lg__item-icon--FontSize: var(--pf-v5-global--icon--FontSize--lg);
8838
- padding-inline-start: var(--pf-v5-c-list--PaddingLeft);
8839
- }
8840
-
8841
- .pf-v5-c-list ol,
8842
- .pf-v5-c-list ul {
8843
- margin-block-start: var(--pf-v5-c-list--nested--MarginTop);
8844
- margin-inline-start: var(--pf-v5-c-list--nested--MarginLeft);
8845
- }
8846
-
8847
- .pf-v5-c-list li + li {
8848
- margin-block-start: var(--pf-v5-c-list--li--MarginTop);
8849
- }
8850
-
8851
- ul.pf-v5-c-list {
8852
- list-style: var(--pf-v5-c-list--ul--ListStyle);
8853
- }
8854
-
8855
- .pf-v5-c-list .pf-v5-c-list__item {
8856
- display: flex;
8857
- }
8858
-
8859
- .pf-v5-c-list .pf-v5-c-list__item-icon {
8860
- flex-shrink: 0;
8861
- min-width: var(--pf-v5-c-list__item-icon--MinWidth);
8862
- margin-block-start: var(--pf-v5-c-list__item-icon--MarginTop);
8863
- margin-inline-end: var(--pf-v5-c-list__item-icon--MarginRight);
8864
- font-size: var(--pf-v5-c-list__item-icon--FontSize);
8865
- line-height: 1;
8866
- color: var(--pf-v5-c-list__item-icon--Color);
8867
- }
8868
-
8869
- .pf-v5-c-list.pf-m-icon-lg {
8870
- --pf-v5-c-list__item-icon--MinWidth: var(--pf-v5-c-list--m-icon-lg__item-icon--MinWidth);
8871
- --pf-v5-c-list__item-icon--MarginTop: 0;
8872
- --pf-v5-c-list__item-icon--MarginRight: var(--pf-v5-c-list--m-icon-lg__item-icon--MarginRight);
8873
- --pf-v5-c-list__item-icon--FontSize: var(--pf-v5-c-list--m-icon-lg__item-icon--FontSize);
8874
- }
8875
-
8876
- .pf-v5-c-list.pf-m-plain {
8877
- --pf-v5-c-list--PaddingLeft: 0;
8878
- list-style: none;
8879
- }
8880
-
8881
- .pf-v5-c-list.pf-m-inline {
8882
- --pf-v5-c-list--PaddingLeft: 0;
8883
- display: flex;
8884
- flex-wrap: wrap;
8885
- list-style: none;
8886
- }
8887
-
8888
- .pf-v5-c-list.pf-m-inline li {
8889
- --pf-v5-c-list--li--MarginTop: 0;
8890
- }
8891
-
8892
- .pf-v5-c-list.pf-m-inline li:not(:last-child) {
8893
- margin-inline-end: var(--pf-v5-c-list--m-inline--li--MarginRight);
8894
- }
8895
-
8896
- .pf-v5-c-list.pf-m-bordered > * {
8897
- padding-block-end: var(--pf-v5-c-list--m-bordered--li--PaddingBottom);
8898
- border-block-end: var(--pf-v5-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-v5-c-list--m-bordered--li--BorderBottomColor);
8899
- }
8900
-
8901
- .pf-v5-c-list.pf-m-bordered > :last-child {
8902
- --pf-v5-c-list--m-bordered--li--PaddingBottom: 0;
8903
- --pf-v5-c-list--m-bordered--li--BorderBottomWidth: 0;
8904
- }
8905
-
8906
8828
  .pf-v5-c-label {
8907
8829
  --pf-v5-c-label--PaddingTop: var(--pf-v5-global--spacer--xs);
8908
8830
  --pf-v5-c-label--PaddingRight: var(--pf-v5-global--spacer--sm);
@@ -9547,6 +9469,92 @@ button.pf-v5-c-label__content:focus {
9547
9469
  display: none;
9548
9470
  }
9549
9471
 
9472
+ .pf-v5-c-list {
9473
+ --pf-v5-c-list--PaddingLeft: var(--pf-v5-global--spacer--lg);
9474
+ --pf-v5-c-list--nested--MarginTop: var(--pf-v5-global--spacer--sm);
9475
+ --pf-v5-c-list--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
9476
+ --pf-v5-c-list--ul--ListStyle: var(--pf-v5-global--ListStyle);
9477
+ --pf-v5-c-list--li--MarginTop: var(--pf-v5-global--spacer--sm);
9478
+ --pf-v5-c-list--m-inline--li--MarginRight: var(--pf-v5-global--spacer--lg);
9479
+ --pf-v5-c-list--m-bordered--li--PaddingBottom: var(--pf-v5-global--spacer--sm);
9480
+ --pf-v5-c-list--m-bordered--li--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
9481
+ --pf-v5-c-list--m-bordered--li--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
9482
+ --pf-v5-c-list__item-icon--MinWidth: var(--pf-v5-global--icon--FontSize--sm);
9483
+ --pf-v5-c-list__item-icon--MarginTop: 0.375rem;
9484
+ --pf-v5-c-list__item-icon--MarginRight: var(--pf-v5-global--spacer--sm);
9485
+ --pf-v5-c-list__item-icon--Color: var(--pf-v5-global--icon--Color--dark);
9486
+ --pf-v5-c-list__item-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
9487
+ --pf-v5-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-v5-global--icon--FontSize--lg);
9488
+ --pf-v5-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-v5-global--spacer--md);
9489
+ --pf-v5-c-list--m-icon-lg__item-icon--FontSize: var(--pf-v5-global--icon--FontSize--lg);
9490
+ padding-inline-start: var(--pf-v5-c-list--PaddingLeft);
9491
+ }
9492
+
9493
+ .pf-v5-c-list ol,
9494
+ .pf-v5-c-list ul {
9495
+ margin-block-start: var(--pf-v5-c-list--nested--MarginTop);
9496
+ margin-inline-start: var(--pf-v5-c-list--nested--MarginLeft);
9497
+ }
9498
+
9499
+ .pf-v5-c-list li + li {
9500
+ margin-block-start: var(--pf-v5-c-list--li--MarginTop);
9501
+ }
9502
+
9503
+ ul.pf-v5-c-list {
9504
+ list-style: var(--pf-v5-c-list--ul--ListStyle);
9505
+ }
9506
+
9507
+ .pf-v5-c-list .pf-v5-c-list__item {
9508
+ display: flex;
9509
+ }
9510
+
9511
+ .pf-v5-c-list .pf-v5-c-list__item-icon {
9512
+ flex-shrink: 0;
9513
+ min-width: var(--pf-v5-c-list__item-icon--MinWidth);
9514
+ margin-block-start: var(--pf-v5-c-list__item-icon--MarginTop);
9515
+ margin-inline-end: var(--pf-v5-c-list__item-icon--MarginRight);
9516
+ font-size: var(--pf-v5-c-list__item-icon--FontSize);
9517
+ line-height: 1;
9518
+ color: var(--pf-v5-c-list__item-icon--Color);
9519
+ }
9520
+
9521
+ .pf-v5-c-list.pf-m-icon-lg {
9522
+ --pf-v5-c-list__item-icon--MinWidth: var(--pf-v5-c-list--m-icon-lg__item-icon--MinWidth);
9523
+ --pf-v5-c-list__item-icon--MarginTop: 0;
9524
+ --pf-v5-c-list__item-icon--MarginRight: var(--pf-v5-c-list--m-icon-lg__item-icon--MarginRight);
9525
+ --pf-v5-c-list__item-icon--FontSize: var(--pf-v5-c-list--m-icon-lg__item-icon--FontSize);
9526
+ }
9527
+
9528
+ .pf-v5-c-list.pf-m-plain {
9529
+ --pf-v5-c-list--PaddingLeft: 0;
9530
+ list-style: none;
9531
+ }
9532
+
9533
+ .pf-v5-c-list.pf-m-inline {
9534
+ --pf-v5-c-list--PaddingLeft: 0;
9535
+ display: flex;
9536
+ flex-wrap: wrap;
9537
+ list-style: none;
9538
+ }
9539
+
9540
+ .pf-v5-c-list.pf-m-inline li {
9541
+ --pf-v5-c-list--li--MarginTop: 0;
9542
+ }
9543
+
9544
+ .pf-v5-c-list.pf-m-inline li:not(:last-child) {
9545
+ margin-inline-end: var(--pf-v5-c-list--m-inline--li--MarginRight);
9546
+ }
9547
+
9548
+ .pf-v5-c-list.pf-m-bordered > * {
9549
+ padding-block-end: var(--pf-v5-c-list--m-bordered--li--PaddingBottom);
9550
+ border-block-end: var(--pf-v5-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-v5-c-list--m-bordered--li--BorderBottomColor);
9551
+ }
9552
+
9553
+ .pf-v5-c-list.pf-m-bordered > :last-child {
9554
+ --pf-v5-c-list--m-bordered--li--PaddingBottom: 0;
9555
+ --pf-v5-c-list--m-bordered--li--BorderBottomWidth: 0;
9556
+ }
9557
+
9550
9558
  .pf-v5-c-login__footer, .pf-v5-c-login__header {
9551
9559
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
9552
9560
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
@@ -12047,256 +12055,69 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
12047
12055
  background: transparent;
12048
12056
  }
12049
12057
 
12050
- .pf-v5-c-multiple-file-upload {
12051
- --pf-v5-c-multiple-file-upload--GridTemplateColumns: 1fr;
12052
- --pf-v5-c-multiple-file-upload--Gap: var(--pf-v5-global--spacer--lg);
12053
- --pf-v5-c-multiple-file-upload__main--TextAlign: center;
12054
- --pf-v5-c-multiple-file-upload__main--GridTemplateColumns: auto;
12055
- --pf-v5-c-multiple-file-upload__main--GridTemplateRows: auto;
12056
- --pf-v5-c-multiple-file-upload__main--GridTemplateAreas:
12057
- "title"
12058
- "upload"
12059
- "info";
12060
- --pf-v5-c-multiple-file-upload__main--Gap: var(--pf-v5-global--spacer--md);
12061
- --pf-v5-c-multiple-file-upload__main--PaddingTop: var(--pf-v5-global--spacer--lg);
12062
- --pf-v5-c-multiple-file-upload__main--PaddingRight: var(--pf-v5-global--spacer--lg);
12063
- --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-global--spacer--xl);
12064
- --pf-v5-c-multiple-file-upload__main--PaddingLeft: var(--pf-v5-global--spacer--lg);
12065
- --pf-v5-c-multiple-file-upload__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
12066
- --pf-v5-c-multiple-file-upload__main--BorderStyle: dashed;
12067
- --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-global--BorderColor--100);
12068
- --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
12069
- --pf-v5-c-multiple-file-upload__title--Display: grid;
12070
- --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: auto;
12071
- --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-global--spacer--sm);
12072
- --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-global--icon--Color--dark);
12073
- --pf-v5-c-multiple-file-upload__title-text-separator--Display: block;
12074
- --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-global--spacer--sm);
12075
- --pf-v5-c-multiple-file-upload__info--FontSize: var(--pf-v5-global--FontSize--sm);
12076
- --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-global--Color--200);
12077
- --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-global--spacer--sm);
12078
- --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
12079
- --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-v5-global--active-color--100);
12080
- --pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-v5-global--palette--blue-50);
12081
- --pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-v5-global--active-color--100);
12082
- --pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-v5-global--active-color--100);
12083
- --pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-v5-global--active-color--100);
12084
- --pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
12085
- --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
12086
- --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
12087
- --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
12088
- "title upload"
12089
- "info upload";
12090
- --pf-v5-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--2xl);
12091
- --pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-v5-global--spacer--lg);
12092
- --pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
12093
- --pf-v5-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-v5-global--spacer--xs);
12094
- --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
12095
- --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
12096
- --pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
12097
- --pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
12098
- --pf-v5-c-multiple-file-upload__status-progress--Gap: var(--pf-v5-global--spacer--sm);
12099
- --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-v5-global--icon--Color--dark);
12100
- --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-global--spacer--md);
12101
- --pf-v5-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-v5-global--spacer--md);
12102
- --pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
12103
- --pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
12104
- --pf-v5-c-multiple-file-upload__status-item--Gap: var(--pf-v5-global--spacer--sm);
12105
- --pf-v5-c-multiple-file-upload__status-item--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
12106
- --pf-v5-c-multiple-file-upload__status-item--BorderColor: var(--pf-v5-global--BorderColor--100);
12107
- --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-v5-global--icon--Color--dark);
12108
- --pf-v5-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
12109
- --pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
12110
- --pf-v5-c-multiple-file-upload__status-item-progress--Gap: var(--pf-v5-global--spacer--sm);
12111
- --pf-v5-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-v5-global--primary-color--100);
12112
- --pf-v5-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-v5-global--Color--200);
12113
- display: grid;
12114
- grid-template-columns: var(--pf-v5-c-multiple-file-upload--GridTemplateColumns);
12115
- gap: var(--pf-v5-c-multiple-file-upload--Gap);
12058
+ .pf-v5-c-modal-box {
12059
+ --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
12060
+ --pf-v5-c-modal-box--BoxShadow: var(--pf-v5-global--BoxShadow--xl);
12061
+ --pf-v5-c-modal-box--ZIndex: var(--pf-v5-global--ZIndex--xl);
12062
+ --pf-v5-c-modal-box--Width: 100%;
12063
+ --pf-v5-c-modal-box--MaxWidth: calc(100% - var(--pf-v5-global--spacer--xl));
12064
+ --pf-v5-c-modal-box--m-sm--sm--MaxWidth: 35rem;
12065
+ --pf-v5-c-modal-box--m-md--Width: 52.5rem;
12066
+ --pf-v5-c-modal-box--m-lg--lg--MaxWidth: 70rem;
12067
+ --pf-v5-c-modal-box--MaxHeight: calc(100% - var(--pf-v5-global--spacer--2xl));
12068
+ --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-global--spacer--sm);
12069
+ --pf-v5-c-modal-box--m-align-top--xl--spacer: var(--pf-v5-global--spacer--xl);
12070
+ --pf-v5-c-modal-box--m-align-top--MarginTop: var(--pf-v5-c-modal-box--m-align-top--spacer);
12071
+ --pf-v5-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer), var(--pf-v5-global--spacer--2xl)) - var(--pf-v5-c-modal-box--m-align-top--spacer));
12072
+ --pf-v5-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer) * 2, var(--pf-v5-global--spacer--xl)));
12073
+ --pf-v5-c-modal-box--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
12074
+ --pf-v5-c-modal-box--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
12075
+ --pf-v5-c-modal-box--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
12076
+ --pf-v5-c-modal-box--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
12077
+ --pf-v5-c-modal-box--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
12078
+ --pf-v5-c-modal-box__header--PaddingTop: var(--pf-v5-global--spacer--lg);
12079
+ --pf-v5-c-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--lg);
12080
+ --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-v5-global--spacer--lg);
12081
+ --pf-v5-c-modal-box__header--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
12082
+ --pf-v5-c-modal-box__title--LineHeight: var(--pf-v5-global--LineHeight--sm);
12083
+ --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading);
12084
+ --pf-v5-c-modal-box__title--FontSize: var(--pf-v5-global--FontSize--2xl);
12085
+ --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
12086
+ --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-global--Color--100);
12087
+ --pf-v5-c-modal-box__description--PaddingTop: var(--pf-v5-global--spacer--xs);
12088
+ --pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
12089
+ --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-global--spacer--lg);
12090
+ --pf-v5-c-modal-box__body--PaddingRight: var(--pf-v5-global--spacer--lg);
12091
+ --pf-v5-c-modal-box__body--PaddingLeft: var(--pf-v5-global--spacer--lg);
12092
+ --pf-v5-c-modal-box__body--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
12093
+ --pf-v5-c-modal-box__header--body--PaddingTop: var(--pf-v5-global--spacer--md);
12094
+ --pf-v5-c-modal-box__close--Top: calc(var(--pf-v5-global--spacer--lg));
12095
+ --pf-v5-c-modal-box__close--Right: var(--pf-v5-global--spacer--md);
12096
+ --pf-v5-c-modal-box__close--sibling--MarginRight: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-global--spacer--sm));
12097
+ --pf-v5-c-modal-box__footer--PaddingTop: var(--pf-v5-global--spacer--lg);
12098
+ --pf-v5-c-modal-box__footer--PaddingRight: var(--pf-v5-global--spacer--lg);
12099
+ --pf-v5-c-modal-box__footer--PaddingBottom: var(--pf-v5-global--spacer--lg);
12100
+ --pf-v5-c-modal-box__footer--PaddingLeft: var(--pf-v5-global--spacer--lg);
12101
+ --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-global--spacer--md);
12102
+ --pf-v5-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v5-c-modal-box__footer--c-button--MarginRight) / 2);
12103
+ position: relative;
12104
+ z-index: var(--pf-v5-c-modal-box--ZIndex);
12105
+ display: flex;
12106
+ flex-direction: column;
12107
+ width: var(--pf-v5-c-modal-box--Width);
12108
+ max-width: var(--pf-v5-c-modal-box--MaxWidth);
12109
+ max-height: var(--pf-v5-c-modal-box--MaxHeight);
12110
+ background-color: var(--pf-v5-c-modal-box--BackgroundColor);
12111
+ box-shadow: var(--pf-v5-c-modal-box--BoxShadow);
12116
12112
  }
12117
12113
 
12118
- .pf-v5-c-multiple-file-upload.pf-m-horizontal {
12119
- --pf-v5-c-multiple-file-upload--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
12120
- --pf-v5-c-multiple-file-upload__main--TextAlign: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign);
12121
- --pf-v5-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
12122
- --pf-v5-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
12123
- --pf-v5-c-multiple-file-upload__main--Gap: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--Gap);
12124
- --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
12125
- --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
12126
- --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--Gap);
12127
- --pf-v5-c-multiple-file-upload__title-text-separator--Display: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
12128
- --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
12129
- --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop);
12130
- }
12131
-
12132
- .pf-v5-c-multiple-file-upload.pf-m-drag-over {
12133
- --pf-v5-c-multiple-file-upload__main--BorderStyle: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle);
12134
- --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor);
12135
- --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
12136
- --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
12137
- --pf-v5-c-multiple-file-upload__title-text--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color);
12138
- --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color);
12139
- }
12140
-
12141
- .pf-v5-c-multiple-file-upload__main {
12142
- display: grid;
12143
- grid-template-areas: var(--pf-v5-c-multiple-file-upload__main--GridTemplateAreas);
12144
- grid-template-rows: var(--pf-v5-c-multiple-file-upload__main--GridTemplateRows);
12145
- grid-template-columns: var(--pf-v5-c-multiple-file-upload__main--GridTemplateColumns);
12146
- gap: var(--pf-v5-c-multiple-file-upload__main--Gap);
12147
- padding-block-start: var(--pf-v5-c-multiple-file-upload__main--PaddingTop);
12148
- padding-block-end: var(--pf-v5-c-multiple-file-upload__main--PaddingBottom);
12149
- padding-inline-start: var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
12150
- padding-inline-end: var(--pf-v5-c-multiple-file-upload__main--PaddingRight);
12151
- text-align: var(--pf-v5-c-multiple-file-upload__main--TextAlign);
12152
- background-color: var(--pf-v5-c-multiple-file-upload__main--BackgroundColor);
12153
- border: var(--pf-v5-c-multiple-file-upload__main--BorderWidth) var(--pf-v5-c-multiple-file-upload__main--BorderStyle) var(--pf-v5-c-multiple-file-upload__main--BorderColor);
12154
- }
12155
-
12156
- .pf-v5-c-multiple-file-upload__title {
12157
- display: var(--pf-v5-c-multiple-file-upload__title--Display);
12158
- grid-area: title;
12159
- grid-template-columns: var(--pf-v5-c-multiple-file-upload__title--GridTemplateColumns);
12160
- gap: var(--pf-v5-c-multiple-file-upload__title--Gap);
12161
- }
12162
-
12163
- .pf-v5-c-multiple-file-upload__title-icon {
12164
- color: var(--pf-v5-c-multiple-file-upload__title-icon--Color);
12165
- }
12166
-
12167
- .pf-v5-c-multiple-file-upload__title-text {
12168
- color: var(--pf-v5-c-multiple-file-upload__title-text--Color, inherit);
12169
- }
12170
-
12171
- .pf-v5-c-multiple-file-upload__title-text-separator {
12172
- display: var(--pf-v5-c-multiple-file-upload__title-text-separator--Display);
12173
- margin-block-start: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
12174
- }
12175
-
12176
- .pf-v5-c-multiple-file-upload__upload {
12177
- grid-area: upload;
12178
- }
12179
-
12180
- .pf-v5-c-multiple-file-upload__info {
12181
- grid-area: info;
12182
- margin-block-start: var(--pf-v5-c-multiple-file-upload__info--MarginTop);
12183
- font-size: var(--pf-v5-c-multiple-file-upload__info--FontSize);
12184
- color: var(--pf-v5-c-multiple-file-upload__info--Color);
12185
- }
12186
-
12187
- .pf-v5-c-multiple-file-upload__status,
12188
- .pf-v5-c-multiple-file-upload__status-item-main {
12189
- min-width: 0;
12190
- }
12191
-
12192
- .pf-v5-c-multiple-file-upload__status-progress {
12193
- display: grid;
12194
- grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns);
12195
- gap: var(--pf-v5-c-multiple-file-upload__status-progress--Gap);
12196
- }
12197
-
12198
- .pf-v5-c-multiple-file-upload__status-progress-icon {
12199
- color: var(--pf-v5-c-multiple-file-upload__status-progress-icon--Color);
12200
- }
12201
-
12202
- .pf-v5-c-multiple-file-upload__status-item {
12203
- display: grid;
12204
- grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns);
12205
- gap: var(--pf-v5-c-multiple-file-upload__status-item--Gap);
12206
- padding-block-start: var(--pf-v5-c-multiple-file-upload__status-item--PaddingTop);
12207
- padding-block-end: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
12208
- border-block-end: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
12209
- }
12210
-
12211
- .pf-v5-c-multiple-file-upload__status-item:first-child {
12212
- --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop);
12213
- }
12214
-
12215
- .pf-v5-c-multiple-file-upload__status-item-icon {
12216
- color: var(--pf-v5-c-multiple-file-upload__status-item-icon--Color);
12217
- }
12218
-
12219
- .pf-v5-c-multiple-file-upload__status-item-close {
12220
- margin-block-start: var(--pf-v5-c-multiple-file-upload__status-item-close--MarginTop);
12221
- }
12222
-
12223
- .pf-v5-c-multiple-file-upload__status-item-progress {
12224
- display: grid;
12225
- grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
12226
- gap: var(--pf-v5-c-multiple-file-upload__status-item-progress--Gap);
12227
- }
12228
-
12229
- .pf-v5-c-multiple-file-upload__status-item-progress-text {
12230
- color: var(--pf-v5-c-multiple-file-upload__status-item-progress-text--Color);
12231
- }
12232
-
12233
- .pf-v5-c-multiple-file-upload__status-item-progress-size {
12234
- color: var(--pf-v5-c-multiple-file-upload__status-item-progress-size--Color);
12235
- }
12236
-
12237
- .pf-v5-c-modal-box {
12238
- --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
12239
- --pf-v5-c-modal-box--BoxShadow: var(--pf-v5-global--BoxShadow--xl);
12240
- --pf-v5-c-modal-box--ZIndex: var(--pf-v5-global--ZIndex--xl);
12241
- --pf-v5-c-modal-box--Width: 100%;
12242
- --pf-v5-c-modal-box--MaxWidth: calc(100% - var(--pf-v5-global--spacer--xl));
12243
- --pf-v5-c-modal-box--m-sm--sm--MaxWidth: 35rem;
12244
- --pf-v5-c-modal-box--m-md--Width: 52.5rem;
12245
- --pf-v5-c-modal-box--m-lg--lg--MaxWidth: 70rem;
12246
- --pf-v5-c-modal-box--MaxHeight: calc(100% - var(--pf-v5-global--spacer--2xl));
12247
- --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-global--spacer--sm);
12248
- --pf-v5-c-modal-box--m-align-top--xl--spacer: var(--pf-v5-global--spacer--xl);
12249
- --pf-v5-c-modal-box--m-align-top--MarginTop: var(--pf-v5-c-modal-box--m-align-top--spacer);
12250
- --pf-v5-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer), var(--pf-v5-global--spacer--2xl)) - var(--pf-v5-c-modal-box--m-align-top--spacer));
12251
- --pf-v5-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer) * 2, var(--pf-v5-global--spacer--xl)));
12252
- --pf-v5-c-modal-box--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
12253
- --pf-v5-c-modal-box--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
12254
- --pf-v5-c-modal-box--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
12255
- --pf-v5-c-modal-box--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
12256
- --pf-v5-c-modal-box--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
12257
- --pf-v5-c-modal-box__header--PaddingTop: var(--pf-v5-global--spacer--lg);
12258
- --pf-v5-c-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--lg);
12259
- --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-v5-global--spacer--lg);
12260
- --pf-v5-c-modal-box__header--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
12261
- --pf-v5-c-modal-box__title--LineHeight: var(--pf-v5-global--LineHeight--sm);
12262
- --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading);
12263
- --pf-v5-c-modal-box__title--FontSize: var(--pf-v5-global--FontSize--2xl);
12264
- --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
12265
- --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-global--Color--100);
12266
- --pf-v5-c-modal-box__description--PaddingTop: var(--pf-v5-global--spacer--xs);
12267
- --pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
12268
- --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-global--spacer--lg);
12269
- --pf-v5-c-modal-box__body--PaddingRight: var(--pf-v5-global--spacer--lg);
12270
- --pf-v5-c-modal-box__body--PaddingLeft: var(--pf-v5-global--spacer--lg);
12271
- --pf-v5-c-modal-box__body--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
12272
- --pf-v5-c-modal-box__header--body--PaddingTop: var(--pf-v5-global--spacer--md);
12273
- --pf-v5-c-modal-box__close--Top: calc(var(--pf-v5-global--spacer--lg));
12274
- --pf-v5-c-modal-box__close--Right: var(--pf-v5-global--spacer--md);
12275
- --pf-v5-c-modal-box__close--sibling--MarginRight: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-global--spacer--sm));
12276
- --pf-v5-c-modal-box__footer--PaddingTop: var(--pf-v5-global--spacer--lg);
12277
- --pf-v5-c-modal-box__footer--PaddingRight: var(--pf-v5-global--spacer--lg);
12278
- --pf-v5-c-modal-box__footer--PaddingBottom: var(--pf-v5-global--spacer--lg);
12279
- --pf-v5-c-modal-box__footer--PaddingLeft: var(--pf-v5-global--spacer--lg);
12280
- --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-global--spacer--md);
12281
- --pf-v5-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v5-c-modal-box__footer--c-button--MarginRight) / 2);
12282
- position: relative;
12283
- z-index: var(--pf-v5-c-modal-box--ZIndex);
12284
- display: flex;
12285
- flex-direction: column;
12286
- width: var(--pf-v5-c-modal-box--Width);
12287
- max-width: var(--pf-v5-c-modal-box--MaxWidth);
12288
- max-height: var(--pf-v5-c-modal-box--MaxHeight);
12289
- background-color: var(--pf-v5-c-modal-box--BackgroundColor);
12290
- box-shadow: var(--pf-v5-c-modal-box--BoxShadow);
12291
- }
12292
-
12293
- @media (min-width: 1200px) {
12294
- .pf-v5-c-modal-box {
12295
- --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-c-modal-box--m-align-top--xl--spacer);
12296
- }
12297
- }
12298
- .pf-v5-c-modal-box.pf-m-sm {
12299
- --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-sm--sm--MaxWidth);
12114
+ @media (min-width: 1200px) {
12115
+ .pf-v5-c-modal-box {
12116
+ --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-c-modal-box--m-align-top--xl--spacer);
12117
+ }
12118
+ }
12119
+ .pf-v5-c-modal-box.pf-m-sm {
12120
+ --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-sm--sm--MaxWidth);
12300
12121
  }
12301
12122
 
12302
12123
  .pf-v5-c-modal-box.pf-m-md {
@@ -12385,57 +12206,244 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
12385
12206
  line-height: var(--pf-v5-c-modal-box__title--LineHeight);
12386
12207
  }
12387
12208
 
12388
- .pf-v5-c-modal-box__title.pf-m-icon {
12389
- display: flex;
12209
+ .pf-v5-c-modal-box__title.pf-m-icon {
12210
+ display: flex;
12211
+ }
12212
+
12213
+ .pf-v5-c-modal-box__title-icon {
12214
+ margin-inline-end: var(--pf-v5-c-modal-box__title-icon--MarginRight);
12215
+ color: var(--pf-v5-c-modal-box__title-icon--Color);
12216
+ }
12217
+
12218
+ .pf-v5-c-modal-box__description {
12219
+ padding-block-start: var(--pf-v5-c-modal-box__description--PaddingTop);
12220
+ }
12221
+
12222
+ .pf-v5-c-modal-box__body {
12223
+ flex: 1 1 auto;
12224
+ min-height: var(--pf-v5-c-modal-box__body--MinHeight);
12225
+ padding-block-start: var(--pf-v5-c-modal-box__body--PaddingTop);
12226
+ padding-inline-start: var(--pf-v5-c-modal-box__body--PaddingLeft);
12227
+ padding-inline-end: var(--pf-v5-c-modal-box__body--PaddingRight);
12228
+ overflow-x: hidden;
12229
+ overflow-y: auto;
12230
+ overscroll-behavior: contain;
12231
+ word-break: break-word;
12232
+ -webkit-overflow-scrolling: touch;
12233
+ }
12234
+
12235
+ .pf-v5-c-modal-box__body:last-child {
12236
+ padding-block-end: var(--pf-v5-c-modal-box__body--last-child--PaddingBottom);
12237
+ }
12238
+
12239
+ .pf-v5-c-modal-box__footer {
12240
+ display: flex;
12241
+ flex: 0 0 auto;
12242
+ align-items: center;
12243
+ padding-block-start: var(--pf-v5-c-modal-box__footer--PaddingTop);
12244
+ padding-block-end: var(--pf-v5-c-modal-box__footer--PaddingBottom);
12245
+ padding-inline-start: var(--pf-v5-c-modal-box__footer--PaddingLeft);
12246
+ padding-inline-end: var(--pf-v5-c-modal-box__footer--PaddingRight);
12247
+ }
12248
+
12249
+ .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
12250
+ margin-inline-end: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
12251
+ }
12252
+
12253
+ @media screen and (min-width: 576px) {
12254
+ .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
12255
+ --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-c-modal-box__footer--c-button--sm--MarginRight);
12256
+ }
12257
+ }
12258
+ :where(.pf-v5-theme-dark) .pf-v5-c-modal-box {
12259
+ --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
12260
+ }
12261
+
12262
+ .pf-v5-c-multiple-file-upload {
12263
+ --pf-v5-c-multiple-file-upload--GridTemplateColumns: 1fr;
12264
+ --pf-v5-c-multiple-file-upload--Gap: var(--pf-v5-global--spacer--lg);
12265
+ --pf-v5-c-multiple-file-upload__main--TextAlign: center;
12266
+ --pf-v5-c-multiple-file-upload__main--GridTemplateColumns: auto;
12267
+ --pf-v5-c-multiple-file-upload__main--GridTemplateRows: auto;
12268
+ --pf-v5-c-multiple-file-upload__main--GridTemplateAreas:
12269
+ "title"
12270
+ "upload"
12271
+ "info";
12272
+ --pf-v5-c-multiple-file-upload__main--Gap: var(--pf-v5-global--spacer--md);
12273
+ --pf-v5-c-multiple-file-upload__main--PaddingTop: var(--pf-v5-global--spacer--lg);
12274
+ --pf-v5-c-multiple-file-upload__main--PaddingRight: var(--pf-v5-global--spacer--lg);
12275
+ --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-global--spacer--xl);
12276
+ --pf-v5-c-multiple-file-upload__main--PaddingLeft: var(--pf-v5-global--spacer--lg);
12277
+ --pf-v5-c-multiple-file-upload__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
12278
+ --pf-v5-c-multiple-file-upload__main--BorderStyle: dashed;
12279
+ --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-global--BorderColor--100);
12280
+ --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
12281
+ --pf-v5-c-multiple-file-upload__title--Display: grid;
12282
+ --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: auto;
12283
+ --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-global--spacer--sm);
12284
+ --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-global--icon--Color--dark);
12285
+ --pf-v5-c-multiple-file-upload__title-text-separator--Display: block;
12286
+ --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-global--spacer--sm);
12287
+ --pf-v5-c-multiple-file-upload__info--FontSize: var(--pf-v5-global--FontSize--sm);
12288
+ --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-global--Color--200);
12289
+ --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-global--spacer--sm);
12290
+ --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
12291
+ --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-v5-global--active-color--100);
12292
+ --pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-v5-global--palette--blue-50);
12293
+ --pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-v5-global--active-color--100);
12294
+ --pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-v5-global--active-color--100);
12295
+ --pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-v5-global--active-color--100);
12296
+ --pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
12297
+ --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
12298
+ --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
12299
+ --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
12300
+ "title upload"
12301
+ "info upload";
12302
+ --pf-v5-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--2xl);
12303
+ --pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-v5-global--spacer--lg);
12304
+ --pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
12305
+ --pf-v5-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-v5-global--spacer--xs);
12306
+ --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
12307
+ --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
12308
+ --pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
12309
+ --pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
12310
+ --pf-v5-c-multiple-file-upload__status-progress--Gap: var(--pf-v5-global--spacer--sm);
12311
+ --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-v5-global--icon--Color--dark);
12312
+ --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-global--spacer--md);
12313
+ --pf-v5-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-v5-global--spacer--md);
12314
+ --pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
12315
+ --pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
12316
+ --pf-v5-c-multiple-file-upload__status-item--Gap: var(--pf-v5-global--spacer--sm);
12317
+ --pf-v5-c-multiple-file-upload__status-item--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
12318
+ --pf-v5-c-multiple-file-upload__status-item--BorderColor: var(--pf-v5-global--BorderColor--100);
12319
+ --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-v5-global--icon--Color--dark);
12320
+ --pf-v5-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
12321
+ --pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
12322
+ --pf-v5-c-multiple-file-upload__status-item-progress--Gap: var(--pf-v5-global--spacer--sm);
12323
+ --pf-v5-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-v5-global--primary-color--100);
12324
+ --pf-v5-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-v5-global--Color--200);
12325
+ display: grid;
12326
+ grid-template-columns: var(--pf-v5-c-multiple-file-upload--GridTemplateColumns);
12327
+ gap: var(--pf-v5-c-multiple-file-upload--Gap);
12328
+ }
12329
+
12330
+ .pf-v5-c-multiple-file-upload.pf-m-horizontal {
12331
+ --pf-v5-c-multiple-file-upload--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
12332
+ --pf-v5-c-multiple-file-upload__main--TextAlign: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign);
12333
+ --pf-v5-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
12334
+ --pf-v5-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
12335
+ --pf-v5-c-multiple-file-upload__main--Gap: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--Gap);
12336
+ --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
12337
+ --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
12338
+ --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--Gap);
12339
+ --pf-v5-c-multiple-file-upload__title-text-separator--Display: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
12340
+ --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
12341
+ --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop);
12342
+ }
12343
+
12344
+ .pf-v5-c-multiple-file-upload.pf-m-drag-over {
12345
+ --pf-v5-c-multiple-file-upload__main--BorderStyle: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle);
12346
+ --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor);
12347
+ --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
12348
+ --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
12349
+ --pf-v5-c-multiple-file-upload__title-text--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color);
12350
+ --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color);
12351
+ }
12352
+
12353
+ .pf-v5-c-multiple-file-upload__main {
12354
+ display: grid;
12355
+ grid-template-areas: var(--pf-v5-c-multiple-file-upload__main--GridTemplateAreas);
12356
+ grid-template-rows: var(--pf-v5-c-multiple-file-upload__main--GridTemplateRows);
12357
+ grid-template-columns: var(--pf-v5-c-multiple-file-upload__main--GridTemplateColumns);
12358
+ gap: var(--pf-v5-c-multiple-file-upload__main--Gap);
12359
+ padding-block-start: var(--pf-v5-c-multiple-file-upload__main--PaddingTop);
12360
+ padding-block-end: var(--pf-v5-c-multiple-file-upload__main--PaddingBottom);
12361
+ padding-inline-start: var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
12362
+ padding-inline-end: var(--pf-v5-c-multiple-file-upload__main--PaddingRight);
12363
+ text-align: var(--pf-v5-c-multiple-file-upload__main--TextAlign);
12364
+ background-color: var(--pf-v5-c-multiple-file-upload__main--BackgroundColor);
12365
+ border: var(--pf-v5-c-multiple-file-upload__main--BorderWidth) var(--pf-v5-c-multiple-file-upload__main--BorderStyle) var(--pf-v5-c-multiple-file-upload__main--BorderColor);
12366
+ }
12367
+
12368
+ .pf-v5-c-multiple-file-upload__title {
12369
+ display: var(--pf-v5-c-multiple-file-upload__title--Display);
12370
+ grid-area: title;
12371
+ grid-template-columns: var(--pf-v5-c-multiple-file-upload__title--GridTemplateColumns);
12372
+ gap: var(--pf-v5-c-multiple-file-upload__title--Gap);
12373
+ }
12374
+
12375
+ .pf-v5-c-multiple-file-upload__title-icon {
12376
+ color: var(--pf-v5-c-multiple-file-upload__title-icon--Color);
12377
+ }
12378
+
12379
+ .pf-v5-c-multiple-file-upload__title-text {
12380
+ color: var(--pf-v5-c-multiple-file-upload__title-text--Color, inherit);
12381
+ }
12382
+
12383
+ .pf-v5-c-multiple-file-upload__title-text-separator {
12384
+ display: var(--pf-v5-c-multiple-file-upload__title-text-separator--Display);
12385
+ margin-block-start: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
12386
+ }
12387
+
12388
+ .pf-v5-c-multiple-file-upload__upload {
12389
+ grid-area: upload;
12390
+ }
12391
+
12392
+ .pf-v5-c-multiple-file-upload__info {
12393
+ grid-area: info;
12394
+ margin-block-start: var(--pf-v5-c-multiple-file-upload__info--MarginTop);
12395
+ font-size: var(--pf-v5-c-multiple-file-upload__info--FontSize);
12396
+ color: var(--pf-v5-c-multiple-file-upload__info--Color);
12397
+ }
12398
+
12399
+ .pf-v5-c-multiple-file-upload__status,
12400
+ .pf-v5-c-multiple-file-upload__status-item-main {
12401
+ min-width: 0;
12402
+ }
12403
+
12404
+ .pf-v5-c-multiple-file-upload__status-progress {
12405
+ display: grid;
12406
+ grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns);
12407
+ gap: var(--pf-v5-c-multiple-file-upload__status-progress--Gap);
12408
+ }
12409
+
12410
+ .pf-v5-c-multiple-file-upload__status-progress-icon {
12411
+ color: var(--pf-v5-c-multiple-file-upload__status-progress-icon--Color);
12390
12412
  }
12391
12413
 
12392
- .pf-v5-c-modal-box__title-icon {
12393
- margin-inline-end: var(--pf-v5-c-modal-box__title-icon--MarginRight);
12394
- color: var(--pf-v5-c-modal-box__title-icon--Color);
12414
+ .pf-v5-c-multiple-file-upload__status-item {
12415
+ display: grid;
12416
+ grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns);
12417
+ gap: var(--pf-v5-c-multiple-file-upload__status-item--Gap);
12418
+ padding-block-start: var(--pf-v5-c-multiple-file-upload__status-item--PaddingTop);
12419
+ padding-block-end: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
12420
+ border-block-end: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
12395
12421
  }
12396
12422
 
12397
- .pf-v5-c-modal-box__description {
12398
- padding-block-start: var(--pf-v5-c-modal-box__description--PaddingTop);
12423
+ .pf-v5-c-multiple-file-upload__status-item:first-child {
12424
+ --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop);
12399
12425
  }
12400
12426
 
12401
- .pf-v5-c-modal-box__body {
12402
- flex: 1 1 auto;
12403
- min-height: var(--pf-v5-c-modal-box__body--MinHeight);
12404
- padding-block-start: var(--pf-v5-c-modal-box__body--PaddingTop);
12405
- padding-inline-start: var(--pf-v5-c-modal-box__body--PaddingLeft);
12406
- padding-inline-end: var(--pf-v5-c-modal-box__body--PaddingRight);
12407
- overflow-x: hidden;
12408
- overflow-y: auto;
12409
- overscroll-behavior: contain;
12410
- word-break: break-word;
12411
- -webkit-overflow-scrolling: touch;
12427
+ .pf-v5-c-multiple-file-upload__status-item-icon {
12428
+ color: var(--pf-v5-c-multiple-file-upload__status-item-icon--Color);
12412
12429
  }
12413
12430
 
12414
- .pf-v5-c-modal-box__body:last-child {
12415
- padding-block-end: var(--pf-v5-c-modal-box__body--last-child--PaddingBottom);
12431
+ .pf-v5-c-multiple-file-upload__status-item-close {
12432
+ margin-block-start: var(--pf-v5-c-multiple-file-upload__status-item-close--MarginTop);
12416
12433
  }
12417
12434
 
12418
- .pf-v5-c-modal-box__footer {
12419
- display: flex;
12420
- flex: 0 0 auto;
12421
- align-items: center;
12422
- padding-block-start: var(--pf-v5-c-modal-box__footer--PaddingTop);
12423
- padding-block-end: var(--pf-v5-c-modal-box__footer--PaddingBottom);
12424
- padding-inline-start: var(--pf-v5-c-modal-box__footer--PaddingLeft);
12425
- padding-inline-end: var(--pf-v5-c-modal-box__footer--PaddingRight);
12435
+ .pf-v5-c-multiple-file-upload__status-item-progress {
12436
+ display: grid;
12437
+ grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
12438
+ gap: var(--pf-v5-c-multiple-file-upload__status-item-progress--Gap);
12426
12439
  }
12427
12440
 
12428
- .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
12429
- margin-inline-end: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
12441
+ .pf-v5-c-multiple-file-upload__status-item-progress-text {
12442
+ color: var(--pf-v5-c-multiple-file-upload__status-item-progress-text--Color);
12430
12443
  }
12431
12444
 
12432
- @media screen and (min-width: 576px) {
12433
- .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
12434
- --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-c-modal-box__footer--c-button--sm--MarginRight);
12435
- }
12436
- }
12437
- :where(.pf-v5-theme-dark) .pf-v5-c-modal-box {
12438
- --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
12445
+ .pf-v5-c-multiple-file-upload__status-item-progress-size {
12446
+ color: var(--pf-v5-c-multiple-file-upload__status-item-progress-size--Color);
12439
12447
  }
12440
12448
 
12441
12449
  .pf-v5-l-bullseye {
@@ -15795,247 +15803,51 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
15795
15803
  top: var(--pf-v5-c-popover__arrow--Top, auto);
15796
15804
  right: var(--pf-v5-c-popover__arrow--Right, auto);
15797
15805
  bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
15798
- left: var(--pf-v5-c-popover__arrow--Left, auto);
15799
- width: var(--pf-v5-c-popover__arrow--Width);
15800
- height: var(--pf-v5-c-popover__arrow--Height);
15801
- pointer-events: none;
15802
- background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
15803
- box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
15804
- transform: translateX(var(--pf-v5-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-popover__arrow--Rotate, 0));
15805
- }
15806
-
15807
- .pf-v5-c-popover__header {
15808
- margin-block-end: var(--pf-v5-c-popover__header--MarginBottom);
15809
- }
15810
-
15811
- .pf-v5-c-popover__title {
15812
- display: flex;
15813
- flex: 0 0 auto;
15814
- }
15815
-
15816
- .pf-v5-c-popover__title-icon {
15817
- margin-inline-end: var(--pf-v5-c-popover__title-icon--MarginRight);
15818
- font-size: var(--pf-v5-c-popover__title-icon--FontSize);
15819
- color: var(--pf-v5-c-popover__title-icon--Color);
15820
- }
15821
-
15822
- .pf-v5-c-popover__title-text {
15823
- font-family: var(--pf-v5-c-popover__title-text--FontFamily);
15824
- font-size: var(--pf-v5-c-popover__title-text--FontSize);
15825
- line-height: var(--pf-v5-c-popover__title-text--LineHeight);
15826
- color: var(--pf-v5-c-popover__title-text--Color, inherit);
15827
- }
15828
-
15829
- .pf-v5-c-popover__body {
15830
- word-wrap: break-word;
15831
- }
15832
-
15833
- .pf-v5-c-popover__footer {
15834
- margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
15835
- }
15836
-
15837
- :where(.pf-v5-theme-dark) .pf-v5-c-popover {
15838
- --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
15839
- --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
15840
- --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
15841
- --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
15842
- --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
15843
- }
15844
-
15845
- .pf-v5-c-progress {
15846
- --pf-v5-c-progress--GridGap: var(--pf-v5-global--spacer--md);
15847
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-global--primary-color--100);
15848
- --pf-v5-c-progress__bar--Height: var(--pf-v5-global--spacer--md);
15849
- --pf-v5-c-progress__bar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
15850
- --pf-v5-c-progress__measure--m-static-width--MinWidth: 4.5ch;
15851
- --pf-v5-c-progress__status--Gap: var(--pf-v5-global--spacer--sm);
15852
- --pf-v5-c-progress__status-icon--Color: var(--pf-v5-global--Color--100);
15853
- --pf-v5-c-progress__bar--before--Opacity: .2;
15854
- --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height);
15855
- --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress__bar--before--BackgroundColor);
15856
- --pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-v5-global--spacer--xs) - var(--pf-v5-c-progress--GridGap));
15857
- --pf-v5-c-progress--m-success__bar--BackgroundColor: var(--pf-v5-global--success-color--100);
15858
- --pf-v5-c-progress--m-warning__bar--BackgroundColor: var(--pf-v5-global--warning-color--100);
15859
- --pf-v5-c-progress--m-danger__bar--BackgroundColor: var(--pf-v5-global--danger-color--100);
15860
- --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
15861
- --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
15862
- --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
15863
- --pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-v5-global--spacer--xl);
15864
- --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
15865
- --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
15866
- --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--Color--dark-100);
15867
- --pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
15868
- --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
15869
- --pf-v5-c-progress--m-sm__bar--Height: var(--pf-v5-global--spacer--sm);
15870
- --pf-v5-c-progress--m-sm__description--FontSize: var(--pf-v5-global--FontSize--sm);
15871
- --pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-v5-global--FontSize--sm);
15872
- --pf-v5-c-progress--m-lg__bar--Height: var(--pf-v5-global--spacer--lg);
15873
- display: grid;
15874
- grid-template-rows: 1fr auto;
15875
- grid-template-columns: auto auto;
15876
- grid-gap: var(--pf-v5-c-progress--GridGap);
15877
- align-items: end;
15878
- }
15879
-
15880
- .pf-v5-c-progress.pf-m-sm {
15881
- --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
15882
- }
15883
-
15884
- .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__description {
15885
- font-size: var(--pf-v5-c-progress--m-sm__description--FontSize);
15886
- }
15887
-
15888
- .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__measure {
15889
- font-size: var(--pf-v5-c-progress--m-sm__measure--FontSize);
15890
- }
15891
-
15892
- .pf-v5-c-progress.pf-m-lg {
15893
- --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-lg__bar--Height);
15894
- }
15895
-
15896
- .pf-v5-c-progress.pf-m-inside .pf-v5-c-progress__indicator {
15897
- display: flex;
15898
- align-items: center;
15899
- justify-content: center;
15900
- min-width: var(--pf-v5-c-progress--m-inside__indicator--MinWidth);
15901
- }
15902
-
15903
- .pf-v5-c-progress.pf-m-inside .pf-v5-c-progress__measure {
15904
- font-size: var(--pf-v5-c-progress--m-inside__measure--FontSize);
15905
- color: var(--pf-v5-c-progress--m-inside__measure--Color);
15906
- text-align: center;
15907
- }
15908
-
15909
- .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__description {
15910
- grid-column: 1/3;
15911
- }
15912
-
15913
- .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__status {
15914
- grid-row: 2/3;
15915
- grid-column: 2/3;
15916
- align-self: center;
15917
- }
15918
-
15919
- .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__measure {
15920
- display: inline-block;
15921
- font-size: var(--pf-v5-c-progress--m-outside__measure--FontSize);
15922
- }
15923
-
15924
- .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__measure.pf-m-static-width {
15925
- min-width: var(--pf-v5-c-progress__measure--m-static-width--MinWidth);
15926
- text-align: start;
15927
- }
15928
-
15929
- .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__bar,
15930
- .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__indicator {
15931
- grid-column: 1/2;
15932
- }
15933
-
15934
- .pf-v5-c-progress.pf-m-singleline {
15935
- grid-template-rows: 1fr;
15936
- }
15937
-
15938
- .pf-v5-c-progress.pf-m-singleline .pf-v5-c-progress__description {
15939
- display: none;
15940
- }
15941
-
15942
- .pf-v5-c-progress.pf-m-singleline .pf-v5-c-progress__bar {
15943
- grid-row: 1/2;
15944
- grid-column: 1/2;
15945
- }
15946
-
15947
- .pf-v5-c-progress.pf-m-singleline .pf-v5-c-progress__status {
15948
- grid-row: 1/2;
15949
- grid-column: 2/3;
15950
- }
15951
-
15952
- .pf-v5-c-progress.pf-m-outside, .pf-v5-c-progress.pf-m-singleline {
15953
- grid-template-columns: 1fr fit-content(50%);
15954
- }
15955
-
15956
- .pf-v5-c-progress.pf-m-success {
15957
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-success__bar--BackgroundColor);
15958
- --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color);
15959
- --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color);
15960
- }
15961
-
15962
- .pf-v5-c-progress.pf-m-warning {
15963
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-warning__bar--BackgroundColor);
15964
- --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color);
15965
- --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-warning--m-inside__measure--Color);
15966
- }
15967
-
15968
- .pf-v5-c-progress.pf-m-danger {
15969
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-danger__bar--BackgroundColor);
15970
- --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color);
15971
- }
15972
-
15973
- .pf-v5-c-progress__description {
15974
- grid-column: 1/2;
15975
- word-break: break-word;
15976
- }
15977
-
15978
- .pf-v5-c-progress__description.pf-m-truncate {
15979
- overflow: hidden;
15980
- text-overflow: ellipsis;
15981
- white-space: nowrap;
15982
- }
15983
-
15984
- .pf-v5-c-progress__status {
15985
- display: flex;
15986
- grid-row: 1/2;
15987
- grid-column: 2/3;
15988
- gap: var(--pf-v5-c-progress__status--Gap);
15989
- align-items: flex-start;
15990
- justify-content: flex-end;
15991
- text-align: end;
15992
- word-break: break-word;
15806
+ left: var(--pf-v5-c-popover__arrow--Left, auto);
15807
+ width: var(--pf-v5-c-popover__arrow--Width);
15808
+ height: var(--pf-v5-c-popover__arrow--Height);
15809
+ pointer-events: none;
15810
+ background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
15811
+ box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
15812
+ transform: translateX(var(--pf-v5-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-popover__arrow--Rotate, 0));
15993
15813
  }
15994
15814
 
15995
- .pf-v5-c-progress__status-icon {
15996
- color: var(--pf-v5-c-progress__status-icon--Color);
15815
+ .pf-v5-c-popover__header {
15816
+ margin-block-end: var(--pf-v5-c-popover__header--MarginBottom);
15997
15817
  }
15998
15818
 
15999
- .pf-v5-c-progress__bar::before,
16000
- .pf-v5-c-progress__indicator {
16001
- top: 0;
16002
- left: 0;
15819
+ .pf-v5-c-popover__title {
15820
+ display: flex;
15821
+ flex: 0 0 auto;
16003
15822
  }
16004
15823
 
16005
- .pf-v5-c-progress__bar {
16006
- position: relative;
16007
- grid-row: 2/3;
16008
- grid-column: 1/3;
16009
- align-self: center;
16010
- height: var(--pf-v5-c-progress__bar--Height);
16011
- background-color: var(--pf-v5-c-progress__bar--BackgroundColor);
15824
+ .pf-v5-c-popover__title-icon {
15825
+ margin-inline-end: var(--pf-v5-c-popover__title-icon--MarginRight);
15826
+ font-size: var(--pf-v5-c-popover__title-icon--FontSize);
15827
+ color: var(--pf-v5-c-popover__title-icon--Color);
16012
15828
  }
16013
15829
 
16014
- .pf-v5-c-progress__bar::before {
16015
- position: absolute;
16016
- width: 100%;
16017
- height: 100%;
16018
- content: "";
16019
- background-color: var(--pf-v5-c-progress__bar--before--BackgroundColor);
16020
- opacity: var(--pf-v5-c-progress__bar--before--Opacity);
15830
+ .pf-v5-c-popover__title-text {
15831
+ font-family: var(--pf-v5-c-popover__title-text--FontFamily);
15832
+ font-size: var(--pf-v5-c-popover__title-text--FontSize);
15833
+ line-height: var(--pf-v5-c-popover__title-text--LineHeight);
15834
+ color: var(--pf-v5-c-popover__title-text--Color, inherit);
16021
15835
  }
16022
15836
 
16023
- .pf-v5-c-progress__indicator {
16024
- position: absolute;
16025
- height: var(--pf-v5-c-progress__indicator--Height);
16026
- background-color: var(--pf-v5-c-progress__indicator--BackgroundColor);
15837
+ .pf-v5-c-popover__body {
15838
+ word-wrap: break-word;
16027
15839
  }
16028
15840
 
16029
- .pf-v5-c-progress__helper-text {
16030
- grid-row: 3/4;
16031
- grid-column: 1/3;
16032
- margin-block-start: var(--pf-v5-c-progress__helper-text--MarginTop);
15841
+ .pf-v5-c-popover__footer {
15842
+ margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
16033
15843
  }
16034
15844
 
16035
- :where(.pf-v5-theme-dark) .pf-v5-c-progress {
16036
- --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
16037
- --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
16038
- --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
15845
+ :where(.pf-v5-theme-dark) .pf-v5-c-popover {
15846
+ --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
15847
+ --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
15848
+ --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
15849
+ --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
15850
+ --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
16039
15851
  }
16040
15852
 
16041
15853
  .pf-v5-c-progress-stepper {
@@ -16371,6 +16183,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
16371
16183
  }
16372
16184
 
16373
16185
  .pf-v5-c-progress-stepper__step-title.pf-m-help-text {
16186
+ padding: 0;
16374
16187
  text-decoration: underline;
16375
16188
  text-decoration-thickness: var(--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
16376
16189
  text-decoration-style: dashed;
@@ -16672,6 +16485,202 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
16672
16485
  --pf-v5-c-progress-stepper--m-center__step-main--before--Content: "";
16673
16486
  }
16674
16487
  }
16488
+ .pf-v5-c-progress {
16489
+ --pf-v5-c-progress--GridGap: var(--pf-v5-global--spacer--md);
16490
+ --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-global--primary-color--100);
16491
+ --pf-v5-c-progress__bar--Height: var(--pf-v5-global--spacer--md);
16492
+ --pf-v5-c-progress__bar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
16493
+ --pf-v5-c-progress__measure--m-static-width--MinWidth: 4.5ch;
16494
+ --pf-v5-c-progress__status--Gap: var(--pf-v5-global--spacer--sm);
16495
+ --pf-v5-c-progress__status-icon--Color: var(--pf-v5-global--Color--100);
16496
+ --pf-v5-c-progress__bar--before--Opacity: .2;
16497
+ --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height);
16498
+ --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress__bar--before--BackgroundColor);
16499
+ --pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-v5-global--spacer--xs) - var(--pf-v5-c-progress--GridGap));
16500
+ --pf-v5-c-progress--m-success__bar--BackgroundColor: var(--pf-v5-global--success-color--100);
16501
+ --pf-v5-c-progress--m-warning__bar--BackgroundColor: var(--pf-v5-global--warning-color--100);
16502
+ --pf-v5-c-progress--m-danger__bar--BackgroundColor: var(--pf-v5-global--danger-color--100);
16503
+ --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
16504
+ --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
16505
+ --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
16506
+ --pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-v5-global--spacer--xl);
16507
+ --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
16508
+ --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
16509
+ --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--Color--dark-100);
16510
+ --pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
16511
+ --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
16512
+ --pf-v5-c-progress--m-sm__bar--Height: var(--pf-v5-global--spacer--sm);
16513
+ --pf-v5-c-progress--m-sm__description--FontSize: var(--pf-v5-global--FontSize--sm);
16514
+ --pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-v5-global--FontSize--sm);
16515
+ --pf-v5-c-progress--m-lg__bar--Height: var(--pf-v5-global--spacer--lg);
16516
+ display: grid;
16517
+ grid-template-rows: 1fr auto;
16518
+ grid-template-columns: auto auto;
16519
+ grid-gap: var(--pf-v5-c-progress--GridGap);
16520
+ align-items: end;
16521
+ }
16522
+
16523
+ .pf-v5-c-progress.pf-m-sm {
16524
+ --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
16525
+ }
16526
+
16527
+ .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__description {
16528
+ font-size: var(--pf-v5-c-progress--m-sm__description--FontSize);
16529
+ }
16530
+
16531
+ .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__measure {
16532
+ font-size: var(--pf-v5-c-progress--m-sm__measure--FontSize);
16533
+ }
16534
+
16535
+ .pf-v5-c-progress.pf-m-lg {
16536
+ --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-lg__bar--Height);
16537
+ }
16538
+
16539
+ .pf-v5-c-progress.pf-m-inside .pf-v5-c-progress__indicator {
16540
+ display: flex;
16541
+ align-items: center;
16542
+ justify-content: center;
16543
+ min-width: var(--pf-v5-c-progress--m-inside__indicator--MinWidth);
16544
+ }
16545
+
16546
+ .pf-v5-c-progress.pf-m-inside .pf-v5-c-progress__measure {
16547
+ font-size: var(--pf-v5-c-progress--m-inside__measure--FontSize);
16548
+ color: var(--pf-v5-c-progress--m-inside__measure--Color);
16549
+ text-align: center;
16550
+ }
16551
+
16552
+ .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__description {
16553
+ grid-column: 1/3;
16554
+ }
16555
+
16556
+ .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__status {
16557
+ grid-row: 2/3;
16558
+ grid-column: 2/3;
16559
+ align-self: center;
16560
+ }
16561
+
16562
+ .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__measure {
16563
+ display: inline-block;
16564
+ font-size: var(--pf-v5-c-progress--m-outside__measure--FontSize);
16565
+ }
16566
+
16567
+ .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__measure.pf-m-static-width {
16568
+ min-width: var(--pf-v5-c-progress__measure--m-static-width--MinWidth);
16569
+ text-align: start;
16570
+ }
16571
+
16572
+ .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__bar,
16573
+ .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__indicator {
16574
+ grid-column: 1/2;
16575
+ }
16576
+
16577
+ .pf-v5-c-progress.pf-m-singleline {
16578
+ grid-template-rows: 1fr;
16579
+ }
16580
+
16581
+ .pf-v5-c-progress.pf-m-singleline .pf-v5-c-progress__description {
16582
+ display: none;
16583
+ }
16584
+
16585
+ .pf-v5-c-progress.pf-m-singleline .pf-v5-c-progress__bar {
16586
+ grid-row: 1/2;
16587
+ grid-column: 1/2;
16588
+ }
16589
+
16590
+ .pf-v5-c-progress.pf-m-singleline .pf-v5-c-progress__status {
16591
+ grid-row: 1/2;
16592
+ grid-column: 2/3;
16593
+ }
16594
+
16595
+ .pf-v5-c-progress.pf-m-outside, .pf-v5-c-progress.pf-m-singleline {
16596
+ grid-template-columns: 1fr fit-content(50%);
16597
+ }
16598
+
16599
+ .pf-v5-c-progress.pf-m-success {
16600
+ --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-success__bar--BackgroundColor);
16601
+ --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color);
16602
+ --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color);
16603
+ }
16604
+
16605
+ .pf-v5-c-progress.pf-m-warning {
16606
+ --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-warning__bar--BackgroundColor);
16607
+ --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color);
16608
+ --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-warning--m-inside__measure--Color);
16609
+ }
16610
+
16611
+ .pf-v5-c-progress.pf-m-danger {
16612
+ --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-danger__bar--BackgroundColor);
16613
+ --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color);
16614
+ }
16615
+
16616
+ .pf-v5-c-progress__description {
16617
+ grid-column: 1/2;
16618
+ word-break: break-word;
16619
+ }
16620
+
16621
+ .pf-v5-c-progress__description.pf-m-truncate {
16622
+ overflow: hidden;
16623
+ text-overflow: ellipsis;
16624
+ white-space: nowrap;
16625
+ }
16626
+
16627
+ .pf-v5-c-progress__status {
16628
+ display: flex;
16629
+ grid-row: 1/2;
16630
+ grid-column: 2/3;
16631
+ gap: var(--pf-v5-c-progress__status--Gap);
16632
+ align-items: flex-start;
16633
+ justify-content: flex-end;
16634
+ text-align: end;
16635
+ word-break: break-word;
16636
+ }
16637
+
16638
+ .pf-v5-c-progress__status-icon {
16639
+ color: var(--pf-v5-c-progress__status-icon--Color);
16640
+ }
16641
+
16642
+ .pf-v5-c-progress__bar::before,
16643
+ .pf-v5-c-progress__indicator {
16644
+ top: 0;
16645
+ left: 0;
16646
+ }
16647
+
16648
+ .pf-v5-c-progress__bar {
16649
+ position: relative;
16650
+ grid-row: 2/3;
16651
+ grid-column: 1/3;
16652
+ align-self: center;
16653
+ height: var(--pf-v5-c-progress__bar--Height);
16654
+ background-color: var(--pf-v5-c-progress__bar--BackgroundColor);
16655
+ }
16656
+
16657
+ .pf-v5-c-progress__bar::before {
16658
+ position: absolute;
16659
+ width: 100%;
16660
+ height: 100%;
16661
+ content: "";
16662
+ background-color: var(--pf-v5-c-progress__bar--before--BackgroundColor);
16663
+ opacity: var(--pf-v5-c-progress__bar--before--Opacity);
16664
+ }
16665
+
16666
+ .pf-v5-c-progress__indicator {
16667
+ position: absolute;
16668
+ height: var(--pf-v5-c-progress__indicator--Height);
16669
+ background-color: var(--pf-v5-c-progress__indicator--BackgroundColor);
16670
+ }
16671
+
16672
+ .pf-v5-c-progress__helper-text {
16673
+ grid-row: 3/4;
16674
+ grid-column: 1/3;
16675
+ margin-block-start: var(--pf-v5-c-progress__helper-text--MarginTop);
16676
+ }
16677
+
16678
+ :where(.pf-v5-theme-dark) .pf-v5-c-progress {
16679
+ --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
16680
+ --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
16681
+ --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
16682
+ }
16683
+
16675
16684
  .pf-v5-c-radio {
16676
16685
  --pf-v5-c-radio--GridGap: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--sm);
16677
16686
  --pf-v5-c-radio__label--disabled--Color: var(--pf-v5-global--disabled-color--100);
@@ -17190,274 +17199,40 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
17190
17199
  --pf-v5-c-skeleton--Height: var(--pf-v5-c-skeleton--m-text-md--Height);
17191
17200
  }
17192
17201
 
17193
- .pf-v5-c-skeleton.pf-m-text-sm {
17194
- --pf-v5-c-skeleton--Height: var(--pf-v5-c-skeleton--m-text-sm--Height);
17195
- }
17196
-
17197
- @keyframes pf-v5-c-skeleton-loading {
17198
- 0% {
17199
- transform: translateX(-100%);
17200
- }
17201
- 60% {
17202
- transform: translateX(100%);
17203
- }
17204
- 100% {
17205
- transform: translateX(100%);
17206
- }
17207
- }
17208
- :where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
17209
- --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-600);
17210
- --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-600);
17211
- --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-v5-global--palette--black-500);
17212
- --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-v5-global--palette--black-600);
17213
- }
17214
-
17215
- .pf-v5-c-skip-to-content {
17216
- --pf-v5-c-skip-to-content--Top: var(--pf-v5-global--spacer--md);
17217
- --pf-v5-c-skip-to-content--ZIndex: var(--pf-v5-global--ZIndex--2xl);
17218
- --pf-v5-c-skip-to-content--focus--Left: var(--pf-v5-global--spacer--md);
17219
- position: absolute;
17220
- inset-block-start: var(--pf-v5-c-skip-to-content--Top);
17221
- inset-inline-start: -300%;
17222
- z-index: var(--pf-v5-c-skip-to-content--ZIndex);
17223
- }
17224
-
17225
- .pf-v5-c-skip-to-content:focus-within {
17226
- inset-inline-start: var(--pf-v5-c-skip-to-content--focus--Left);
17227
- }
17228
-
17229
- .pf-v5-c-slider {
17230
- --pf-v5-c-slider--value: 0;
17231
- --pf-v5-c-slider__step--Left: 0;
17232
- --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
17233
- --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
17234
- --pf-v5-c-slider__rail-track--Height: 0.25rem;
17235
- --pf-v5-c-slider__rail-track--before--base--BackgroundColor: var(--pf-v5-global--BorderColor--100);
17236
- --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
17237
- --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
17238
- --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
17239
- --pf-v5-c-slider__rail-track--before--fill--direction: right;
17240
- --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
17241
- --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
17242
- --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
17243
- --pf-v5-c-slider__step-tick--Width: 0.25rem;
17244
- --pf-v5-c-slider__step-tick--Height: 0.25rem;
17245
- --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-v5-global--BorderColor--200);
17246
- --pf-v5-c-slider__step-tick--TranslateX: -50%;
17247
- --pf-v5-c-slider__step-tick--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
17248
- --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--primary-color--100);
17249
- --pf-v5-c-slider__step--first-child__step-tick--TranslateX: 0;
17250
- --pf-v5-c-slider__step--last-child__step-tick--TranslateX: -100%;
17251
- --pf-v5-c-slider__step-label--TranslateX: -50%;
17252
- --pf-v5-c-slider__step-label--Top: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-c-slider__rail-track--Height));
17253
- --pf-v5-c-slider__step--first-child__step-label--TranslateX: 0;
17254
- --pf-v5-c-slider__step--last-child__step-label--TranslateX: -100%;
17255
- --pf-v5-c-slider__thumb--Top: calc(var(--pf-v5-c-slider__rail-track--Height) / 2 + var(--pf-v5-global--spacer--md));
17256
- --pf-v5-c-slider__thumb--Width: 1rem;
17257
- --pf-v5-c-slider__thumb--Height: 1rem;
17258
- --pf-v5-c-slider__thumb--Left: var(--pf-v5-c-slider--value);
17259
- --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-v5-global--primary-color--100);
17260
- --pf-v5-c-slider__thumb--TranslateX: -50%;
17261
- --pf-v5-c-slider__thumb--TranslateY: -50%;
17262
- --pf-v5-c-slider__thumb--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
17263
- --pf-v5-c-slider__thumb--BoxShadow--base:
17264
- 0 0 0 2px var(--pf-v5-global--BackgroundColor--100),
17265
- 0 0 0 3px var(--pf-v5-global--primary-color--100);
17266
- --pf-v5-c-slider__thumb--hover--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
17267
- --pf-v5-c-slider__thumb--focus--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
17268
- --pf-v5-c-slider__thumb--active--BoxShadow:
17269
- var(--pf-v5-c-slider__thumb--BoxShadow--base),
17270
- 0 0 2px 5px var(--pf-v5-global--active-color--200);
17271
- --pf-v5-c-slider__thumb--before--Width: var(--pf-v5-global--target-size--MinWidth);
17272
- --pf-v5-c-slider__thumb--before--Height: var(--pf-v5-global--target-size--MinHeight);
17273
- --pf-v5-c-slider__thumb--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
17274
- --pf-v5-c-slider__thumb--before--TranslateX: -50%;
17275
- --pf-v5-c-slider__thumb--before--TranslateY: -50%;
17276
- --pf-v5-c-slider__value--MarginLeft: var(--pf-v5-global--spacer--md);
17277
- --pf-v5-c-slider__value--c-form-control--width-base: 3.5ch;
17278
- --pf-v5-c-slider__value--c-form-control--width-chars: 3;
17279
- --pf-v5-c-slider__value--c-form-control--Width: calc(var(--pf-v5-c-slider__value--c-form-control--width-base) + (var(--pf-v5-c-slider__value--c-form-control--width-chars) * 1ch));
17280
- --pf-v5-c-slider__value--m-floating--TranslateX: -50%;
17281
- --pf-v5-c-slider__value--m-floating--TranslateY: -100%;
17282
- --pf-v5-c-slider__value--m-floating--Left: var(--pf-v5-c-slider--value);
17283
- --pf-v5-c-slider__value--m-floating--ZIndex: var(--pf-v5-global--ZIndex--sm);
17284
- --pf-v5-c-slider__actions--MarginRight: var(--pf-v5-global--spacer--sm);
17285
- --pf-v5-c-slider__main--actions--MarginLeft: var(--pf-v5-global--spacer--sm);
17286
- --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--palette--black-500);
17287
- --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--palette--black-700);
17288
- --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
17289
- display: flex;
17290
- }
17291
-
17292
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
17293
- --pf-v5-c-slider__rail-track--before--fill--direction: left;
17294
- }
17295
-
17296
- .pf-v5-c-slider.pf-m-disabled {
17297
- --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
17298
- --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
17299
- --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-v5-c-slider--m-disabled__thumb--BackgroundColor);
17300
- }
17301
-
17302
- .pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__rail,
17303
- .pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb {
17304
- cursor: not-allowed;
17305
- }
17306
-
17307
- .pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb {
17308
- --pf-v5-c-slider__thumb--BoxShadow: none;
17309
- }
17310
-
17311
- .pf-v5-c-slider__main {
17312
- position: relative;
17313
- flex-grow: 1;
17314
- }
17315
-
17316
- .pf-v5-c-slider__rail {
17317
- padding-block-start: var(--pf-v5-c-slider__rail--PaddingTop);
17318
- padding-block-end: var(--pf-v5-c-slider__rail--PaddingBottom);
17319
- }
17320
-
17321
- .pf-v5-c-slider__rail-track {
17322
- position: relative;
17323
- height: var(--pf-v5-c-slider__rail-track--Height);
17324
- }
17325
-
17326
- .pf-v5-c-slider__rail-track::before {
17327
- position: absolute;
17328
- inset: 0;
17329
- content: "";
17330
- background: linear-gradient(to var(--pf-v5-c-slider__rail-track--before--fill--direction), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
17331
- border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
17332
- }
17333
-
17334
- .pf-v5-c-slider__steps {
17335
- height: var(--pf-v5-c-slider__steps--Height);
17336
- font-size: var(--pf-v5-c-slider__steps--FontSize);
17337
- line-height: 1;
17338
- }
17339
-
17340
- .pf-v5-c-slider__step {
17341
- position: absolute;
17342
- inset-block-start: 0;
17343
- inset-inline-start: var(--pf-v5-c-slider__step--Left);
17344
- content: "";
17345
- }
17346
-
17347
- .pf-v5-c-slider__step.pf-m-active {
17348
- --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor);
17349
- }
17350
-
17351
- .pf-v5-c-slider__step:first-child {
17352
- --pf-v5-c-slider__step-tick--TranslateX: var(--pf-v5-c-slider__step--first-child__step-tick--TranslateX);
17353
- --pf-v5-c-slider__step-label--TranslateX: var(--pf-v5-c-slider__step--first-child__step-label--TranslateX);
17354
- }
17355
-
17356
- .pf-v5-c-slider__step:last-child {
17357
- --pf-v5-c-slider__step-tick--TranslateX: var(--pf-v5-c-slider__step--last-child__step-tick--TranslateX);
17358
- --pf-v5-c-slider__step-label--TranslateX: var(--pf-v5-c-slider__step--last-child__step-label--TranslateX);
17359
- }
17360
-
17361
- .pf-v5-c-slider__step-tick {
17362
- transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
17363
- position: absolute;
17364
- inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
17365
- inset-inline-start: 0;
17366
- width: var(--pf-v5-c-slider__step-tick--Width);
17367
- height: var(--pf-v5-c-slider__step-tick--Height);
17368
- background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
17369
- border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
17370
- }
17371
-
17372
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-tick {
17373
- transform: translateX(calc(var(--pf-v5-c-slider__step-tick--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
17374
- }
17375
-
17376
- .pf-v5-c-slider__step-label {
17377
- transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
17378
- position: absolute;
17379
- inset-block-start: var(--pf-v5-c-slider__step-label--Top);
17380
- word-break: normal;
17381
- }
17382
-
17383
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-label {
17384
- transform: translateX(calc(var(--pf-v5-c-slider__step-label--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
17385
- }
17386
-
17387
- .pf-v5-c-slider__thumb {
17388
- transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
17389
- position: absolute;
17390
- inset-block-start: var(--pf-v5-c-slider__thumb--Top);
17391
- inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
17392
- width: var(--pf-v5-c-slider__thumb--Width);
17393
- height: var(--pf-v5-c-slider__thumb--Height);
17394
- cursor: pointer;
17395
- background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
17396
- border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
17397
- box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
17398
- }
17399
-
17400
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb {
17401
- transform: translate(calc(var(--pf-v5-c-slider__thumb--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--TranslateY));
17402
- }
17403
-
17404
- .pf-v5-c-slider__thumb::before {
17405
- transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
17406
- position: absolute;
17407
- inset-block-start: 50%;
17408
- inset-inline-start: 50%;
17409
- width: var(--pf-v5-c-slider__thumb--before--Width);
17410
- height: var(--pf-v5-c-slider__thumb--before--Height);
17411
- content: "";
17412
- border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
17413
- }
17414
-
17415
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb::before {
17416
- transform: translate(calc(var(--pf-v5-c-slider__thumb--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--before--TranslateY));
17417
- }
17418
-
17419
- .pf-v5-c-slider__thumb:hover {
17420
- --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
17421
- }
17422
-
17423
- .pf-v5-c-slider__thumb:focus {
17424
- --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--focus--BoxShadow);
17425
- outline: 0;
17426
- }
17427
-
17428
- .pf-v5-c-slider__thumb:active {
17429
- --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--active--BoxShadow);
17430
- }
17431
-
17432
- .pf-v5-c-slider__value {
17433
- margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
17434
- }
17435
-
17436
- .pf-v5-c-slider__value.pf-m-floating {
17437
- transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
17438
- --pf-v5-c-slider__value--MarginLeft: 0;
17439
- position: absolute;
17440
- inset-block-start: 0;
17441
- inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
17442
- z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
17443
- }
17444
-
17445
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__value.pf-m-floating {
17446
- transform: translate(calc(var(--pf-v5-c-slider__value--m-floating--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__value--m-floating--TranslateY));
17202
+ .pf-v5-c-skeleton.pf-m-text-sm {
17203
+ --pf-v5-c-skeleton--Height: var(--pf-v5-c-skeleton--m-text-sm--Height);
17447
17204
  }
17448
17205
 
17449
- .pf-v5-c-slider__value .pf-v5-c-form-control {
17450
- width: var(--pf-v5-c-slider__value--c-form-control--Width);
17206
+ @keyframes pf-v5-c-skeleton-loading {
17207
+ 0% {
17208
+ transform: translateX(-100%);
17209
+ }
17210
+ 60% {
17211
+ transform: translateX(100%);
17212
+ }
17213
+ 100% {
17214
+ transform: translateX(100%);
17215
+ }
17216
+ }
17217
+ :where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
17218
+ --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-600);
17219
+ --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-600);
17220
+ --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-v5-global--palette--black-500);
17221
+ --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-v5-global--palette--black-600);
17451
17222
  }
17452
17223
 
17453
- .pf-v5-c-slider__actions {
17454
- display: flex;
17455
- margin-inline-end: var(--pf-v5-c-slider__actions--MarginRight);
17224
+ .pf-v5-c-skip-to-content {
17225
+ --pf-v5-c-skip-to-content--Top: var(--pf-v5-global--spacer--md);
17226
+ --pf-v5-c-skip-to-content--ZIndex: var(--pf-v5-global--ZIndex--2xl);
17227
+ --pf-v5-c-skip-to-content--focus--Left: var(--pf-v5-global--spacer--md);
17228
+ position: absolute;
17229
+ inset-block-start: var(--pf-v5-c-skip-to-content--Top);
17230
+ inset-inline-start: -300%;
17231
+ z-index: var(--pf-v5-c-skip-to-content--ZIndex);
17456
17232
  }
17457
17233
 
17458
- .pf-v5-c-slider__main ~ .pf-v5-c-slider__actions {
17459
- --pf-v5-c-slider__actions--MarginRight: 0;
17460
- margin-inline-start: var(--pf-v5-c-slider__main--actions--MarginLeft);
17234
+ .pf-v5-c-skip-to-content:focus-within {
17235
+ inset-inline-start: var(--pf-v5-c-skip-to-content--focus--Left);
17461
17236
  }
17462
17237
 
17463
17238
  .pf-v5-c-spinner {
@@ -17618,115 +17393,349 @@ svg.pf-v5-c-spinner.pf-m-xl {
17618
17393
  grid-column: 1;
17619
17394
  }
17620
17395
 
17621
- .pf-v5-c-switch__input {
17396
+ .pf-v5-c-switch__input {
17397
+ position: absolute;
17398
+ cursor: pointer;
17399
+ opacity: 0;
17400
+ }
17401
+
17402
+ .pf-v5-c-switch__input:focus-visible ~ .pf-v5-c-switch__toggle {
17403
+ outline: var(--pf-v5-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-v5-c-switch__input--focus__toggle--OutlineColor);
17404
+ outline-offset: var(--pf-v5-c-switch__input--focus__toggle--OutlineOffset);
17405
+ }
17406
+
17407
+ .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__label {
17408
+ color: var(--pf-v5-c-switch__input--checked__label--Color);
17409
+ }
17410
+
17411
+ .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
17412
+ background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
17413
+ }
17414
+
17415
+ .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
17416
+ transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
17417
+ }
17418
+
17419
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
17420
+ transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
17421
+ }
17422
+
17423
+ .pf-v5-c-switch__input:checked ~ .pf-m-off {
17424
+ display: none;
17425
+ }
17426
+
17427
+ .pf-v5-c-switch__input:not(:checked) ~ .pf-v5-c-switch__label {
17428
+ color: var(--pf-v5-c-switch__input--not-checked__label--Color);
17429
+ }
17430
+
17431
+ .pf-v5-c-switch__input:not(:checked) ~ .pf-v5-c-switch__toggle .pf-v5-c-switch__toggle-icon {
17432
+ display: none;
17433
+ }
17434
+
17435
+ .pf-v5-c-switch__input:not(:checked) ~ .pf-m-on {
17436
+ display: none;
17437
+ }
17438
+
17439
+ .pf-v5-c-switch__input:disabled {
17440
+ cursor: not-allowed;
17441
+ }
17442
+
17443
+ .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__label {
17444
+ color: var(--pf-v5-c-switch__input--disabled__label--Color);
17445
+ cursor: not-allowed;
17446
+ }
17447
+
17448
+ .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
17449
+ --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
17450
+ cursor: not-allowed;
17451
+ background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
17452
+ }
17453
+
17454
+ .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle::before {
17455
+ background-color: var(--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor);
17456
+ }
17457
+
17458
+ .pf-v5-c-switch__toggle {
17459
+ position: relative;
17460
+ display: inline-block;
17461
+ width: var(--pf-v5-c-switch__toggle--Width);
17462
+ height: var(--pf-v5-c-switch__toggle--Height);
17463
+ background-color: var(--pf-v5-c-switch__toggle--BackgroundColor);
17464
+ border-radius: var(--pf-v5-c-switch__toggle--BorderRadius);
17465
+ }
17466
+
17467
+ .pf-v5-c-switch__toggle::before {
17468
+ position: absolute;
17469
+ inset-block-start: var(--pf-v5-c-switch__toggle--before--Top);
17470
+ inset-inline-start: var(--pf-v5-c-switch__toggle--before--Left);
17471
+ display: block;
17472
+ width: var(--pf-v5-c-switch__toggle--before--Width);
17473
+ height: var(--pf-v5-c-switch__toggle--before--Height);
17474
+ content: "";
17475
+ background-color: var(--pf-v5-c-switch__toggle--before--BackgroundColor);
17476
+ border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius);
17477
+ box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow);
17478
+ transition: var(--pf-v5-c-switch__toggle--before--Transition);
17479
+ }
17480
+
17481
+ .pf-v5-c-switch__toggle-icon {
17482
+ position: absolute;
17483
+ inset-block-start: 0;
17484
+ inset-block-end: 0;
17485
+ inset-inline-start: var(--pf-v5-c-switch__toggle-icon--Left);
17486
+ display: flex;
17487
+ align-items: center;
17488
+ font-size: var(--pf-v5-c-switch__toggle-icon--FontSize);
17489
+ color: var(--pf-v5-c-switch__toggle-icon--Color);
17490
+ }
17491
+
17492
+ .pf-v5-c-switch__label {
17493
+ display: inline-block;
17494
+ grid-column: 2;
17495
+ color: var(--pf-v5-c-switch__label--Color);
17496
+ vertical-align: top;
17497
+ }
17498
+
17499
+ :where(.pf-v5-theme-dark) .pf-v5-c-switch {
17500
+ --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
17501
+ --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
17502
+ --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
17503
+ --pf-v5-c-switch__toggle--before--BoxShadow: none;
17504
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
17505
+ }
17506
+
17507
+ .pf-v5-c-slider {
17508
+ --pf-v5-c-slider--value: 0;
17509
+ --pf-v5-c-slider__step--Left: 0;
17510
+ --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
17511
+ --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
17512
+ --pf-v5-c-slider__rail-track--Height: 0.25rem;
17513
+ --pf-v5-c-slider__rail-track--before--base--BackgroundColor: var(--pf-v5-global--BorderColor--100);
17514
+ --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
17515
+ --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
17516
+ --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
17517
+ --pf-v5-c-slider__rail-track--before--fill--direction: right;
17518
+ --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
17519
+ --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
17520
+ --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
17521
+ --pf-v5-c-slider__step-tick--Width: 0.25rem;
17522
+ --pf-v5-c-slider__step-tick--Height: 0.25rem;
17523
+ --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-v5-global--BorderColor--200);
17524
+ --pf-v5-c-slider__step-tick--TranslateX: -50%;
17525
+ --pf-v5-c-slider__step-tick--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
17526
+ --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--primary-color--100);
17527
+ --pf-v5-c-slider__step--first-child__step-tick--TranslateX: 0;
17528
+ --pf-v5-c-slider__step--last-child__step-tick--TranslateX: -100%;
17529
+ --pf-v5-c-slider__step-label--TranslateX: -50%;
17530
+ --pf-v5-c-slider__step-label--Top: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-c-slider__rail-track--Height));
17531
+ --pf-v5-c-slider__step--first-child__step-label--TranslateX: 0;
17532
+ --pf-v5-c-slider__step--last-child__step-label--TranslateX: -100%;
17533
+ --pf-v5-c-slider__thumb--Top: calc(var(--pf-v5-c-slider__rail-track--Height) / 2 + var(--pf-v5-global--spacer--md));
17534
+ --pf-v5-c-slider__thumb--Width: 1rem;
17535
+ --pf-v5-c-slider__thumb--Height: 1rem;
17536
+ --pf-v5-c-slider__thumb--Left: var(--pf-v5-c-slider--value);
17537
+ --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-v5-global--primary-color--100);
17538
+ --pf-v5-c-slider__thumb--TranslateX: -50%;
17539
+ --pf-v5-c-slider__thumb--TranslateY: -50%;
17540
+ --pf-v5-c-slider__thumb--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
17541
+ --pf-v5-c-slider__thumb--BoxShadow--base:
17542
+ 0 0 0 2px var(--pf-v5-global--BackgroundColor--100),
17543
+ 0 0 0 3px var(--pf-v5-global--primary-color--100);
17544
+ --pf-v5-c-slider__thumb--hover--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
17545
+ --pf-v5-c-slider__thumb--focus--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
17546
+ --pf-v5-c-slider__thumb--active--BoxShadow:
17547
+ var(--pf-v5-c-slider__thumb--BoxShadow--base),
17548
+ 0 0 2px 5px var(--pf-v5-global--active-color--200);
17549
+ --pf-v5-c-slider__thumb--before--Width: var(--pf-v5-global--target-size--MinWidth);
17550
+ --pf-v5-c-slider__thumb--before--Height: var(--pf-v5-global--target-size--MinHeight);
17551
+ --pf-v5-c-slider__thumb--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
17552
+ --pf-v5-c-slider__thumb--before--TranslateX: -50%;
17553
+ --pf-v5-c-slider__thumb--before--TranslateY: -50%;
17554
+ --pf-v5-c-slider__value--MarginLeft: var(--pf-v5-global--spacer--md);
17555
+ --pf-v5-c-slider__value--c-form-control--width-base: 3.5ch;
17556
+ --pf-v5-c-slider__value--c-form-control--width-chars: 3;
17557
+ --pf-v5-c-slider__value--c-form-control--Width: calc(var(--pf-v5-c-slider__value--c-form-control--width-base) + (var(--pf-v5-c-slider__value--c-form-control--width-chars) * 1ch));
17558
+ --pf-v5-c-slider__value--m-floating--TranslateX: -50%;
17559
+ --pf-v5-c-slider__value--m-floating--TranslateY: -100%;
17560
+ --pf-v5-c-slider__value--m-floating--Left: var(--pf-v5-c-slider--value);
17561
+ --pf-v5-c-slider__value--m-floating--ZIndex: var(--pf-v5-global--ZIndex--sm);
17562
+ --pf-v5-c-slider__actions--MarginRight: var(--pf-v5-global--spacer--sm);
17563
+ --pf-v5-c-slider__main--actions--MarginLeft: var(--pf-v5-global--spacer--sm);
17564
+ --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--palette--black-500);
17565
+ --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--palette--black-700);
17566
+ --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
17567
+ display: flex;
17568
+ }
17569
+
17570
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
17571
+ --pf-v5-c-slider__rail-track--before--fill--direction: left;
17572
+ }
17573
+
17574
+ .pf-v5-c-slider.pf-m-disabled {
17575
+ --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
17576
+ --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
17577
+ --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-v5-c-slider--m-disabled__thumb--BackgroundColor);
17578
+ }
17579
+
17580
+ .pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__rail,
17581
+ .pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb {
17582
+ cursor: not-allowed;
17583
+ }
17584
+
17585
+ .pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb {
17586
+ --pf-v5-c-slider__thumb--BoxShadow: none;
17587
+ }
17588
+
17589
+ .pf-v5-c-slider__main {
17590
+ position: relative;
17591
+ flex-grow: 1;
17592
+ }
17593
+
17594
+ .pf-v5-c-slider__rail {
17595
+ padding-block-start: var(--pf-v5-c-slider__rail--PaddingTop);
17596
+ padding-block-end: var(--pf-v5-c-slider__rail--PaddingBottom);
17597
+ }
17598
+
17599
+ .pf-v5-c-slider__rail-track {
17600
+ position: relative;
17601
+ height: var(--pf-v5-c-slider__rail-track--Height);
17602
+ }
17603
+
17604
+ .pf-v5-c-slider__rail-track::before {
17605
+ position: absolute;
17606
+ inset: 0;
17607
+ content: "";
17608
+ background: linear-gradient(to var(--pf-v5-c-slider__rail-track--before--fill--direction), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
17609
+ border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
17610
+ }
17611
+
17612
+ .pf-v5-c-slider__steps {
17613
+ height: var(--pf-v5-c-slider__steps--Height);
17614
+ font-size: var(--pf-v5-c-slider__steps--FontSize);
17615
+ line-height: 1;
17616
+ }
17617
+
17618
+ .pf-v5-c-slider__step {
17622
17619
  position: absolute;
17623
- cursor: pointer;
17624
- opacity: 0;
17620
+ inset-block-start: 0;
17621
+ inset-inline-start: var(--pf-v5-c-slider__step--Left);
17622
+ content: "";
17625
17623
  }
17626
17624
 
17627
- .pf-v5-c-switch__input:focus-visible ~ .pf-v5-c-switch__toggle {
17628
- outline: var(--pf-v5-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-v5-c-switch__input--focus__toggle--OutlineColor);
17629
- outline-offset: var(--pf-v5-c-switch__input--focus__toggle--OutlineOffset);
17625
+ .pf-v5-c-slider__step.pf-m-active {
17626
+ --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor);
17630
17627
  }
17631
17628
 
17632
- .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__label {
17633
- color: var(--pf-v5-c-switch__input--checked__label--Color);
17629
+ .pf-v5-c-slider__step:first-child {
17630
+ --pf-v5-c-slider__step-tick--TranslateX: var(--pf-v5-c-slider__step--first-child__step-tick--TranslateX);
17631
+ --pf-v5-c-slider__step-label--TranslateX: var(--pf-v5-c-slider__step--first-child__step-label--TranslateX);
17634
17632
  }
17635
17633
 
17636
- .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
17637
- background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
17634
+ .pf-v5-c-slider__step:last-child {
17635
+ --pf-v5-c-slider__step-tick--TranslateX: var(--pf-v5-c-slider__step--last-child__step-tick--TranslateX);
17636
+ --pf-v5-c-slider__step-label--TranslateX: var(--pf-v5-c-slider__step--last-child__step-label--TranslateX);
17638
17637
  }
17639
17638
 
17640
- .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
17641
- transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
17639
+ .pf-v5-c-slider__step-tick {
17640
+ transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
17641
+ position: absolute;
17642
+ inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
17643
+ inset-inline-start: 0;
17644
+ width: var(--pf-v5-c-slider__step-tick--Width);
17645
+ height: var(--pf-v5-c-slider__step-tick--Height);
17646
+ background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
17647
+ border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
17642
17648
  }
17643
17649
 
17644
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
17645
- transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
17650
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-tick {
17651
+ transform: translateX(calc(var(--pf-v5-c-slider__step-tick--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
17646
17652
  }
17647
17653
 
17648
- .pf-v5-c-switch__input:checked ~ .pf-m-off {
17649
- display: none;
17654
+ .pf-v5-c-slider__step-label {
17655
+ transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
17656
+ position: absolute;
17657
+ inset-block-start: var(--pf-v5-c-slider__step-label--Top);
17658
+ word-break: normal;
17650
17659
  }
17651
17660
 
17652
- .pf-v5-c-switch__input:not(:checked) ~ .pf-v5-c-switch__label {
17653
- color: var(--pf-v5-c-switch__input--not-checked__label--Color);
17661
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-label {
17662
+ transform: translateX(calc(var(--pf-v5-c-slider__step-label--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
17654
17663
  }
17655
17664
 
17656
- .pf-v5-c-switch__input:not(:checked) ~ .pf-v5-c-switch__toggle .pf-v5-c-switch__toggle-icon {
17657
- display: none;
17665
+ .pf-v5-c-slider__thumb {
17666
+ transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
17667
+ position: absolute;
17668
+ inset-block-start: var(--pf-v5-c-slider__thumb--Top);
17669
+ inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
17670
+ width: var(--pf-v5-c-slider__thumb--Width);
17671
+ height: var(--pf-v5-c-slider__thumb--Height);
17672
+ cursor: pointer;
17673
+ background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
17674
+ border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
17675
+ box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
17658
17676
  }
17659
17677
 
17660
- .pf-v5-c-switch__input:not(:checked) ~ .pf-m-on {
17661
- display: none;
17678
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb {
17679
+ transform: translate(calc(var(--pf-v5-c-slider__thumb--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--TranslateY));
17662
17680
  }
17663
17681
 
17664
- .pf-v5-c-switch__input:disabled {
17665
- cursor: not-allowed;
17682
+ .pf-v5-c-slider__thumb::before {
17683
+ transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
17684
+ position: absolute;
17685
+ inset-block-start: 50%;
17686
+ inset-inline-start: 50%;
17687
+ width: var(--pf-v5-c-slider__thumb--before--Width);
17688
+ height: var(--pf-v5-c-slider__thumb--before--Height);
17689
+ content: "";
17690
+ border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
17666
17691
  }
17667
17692
 
17668
- .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__label {
17669
- color: var(--pf-v5-c-switch__input--disabled__label--Color);
17670
- cursor: not-allowed;
17693
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb::before {
17694
+ transform: translate(calc(var(--pf-v5-c-slider__thumb--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--before--TranslateY));
17671
17695
  }
17672
17696
 
17673
- .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
17674
- --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
17675
- cursor: not-allowed;
17676
- background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
17697
+ .pf-v5-c-slider__thumb:hover {
17698
+ --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
17677
17699
  }
17678
17700
 
17679
- .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle::before {
17680
- background-color: var(--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor);
17701
+ .pf-v5-c-slider__thumb:focus {
17702
+ --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--focus--BoxShadow);
17703
+ outline: 0;
17681
17704
  }
17682
17705
 
17683
- .pf-v5-c-switch__toggle {
17684
- position: relative;
17685
- display: inline-block;
17686
- width: var(--pf-v5-c-switch__toggle--Width);
17687
- height: var(--pf-v5-c-switch__toggle--Height);
17688
- background-color: var(--pf-v5-c-switch__toggle--BackgroundColor);
17689
- border-radius: var(--pf-v5-c-switch__toggle--BorderRadius);
17706
+ .pf-v5-c-slider__thumb:active {
17707
+ --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--active--BoxShadow);
17690
17708
  }
17691
17709
 
17692
- .pf-v5-c-switch__toggle::before {
17693
- position: absolute;
17694
- inset-block-start: var(--pf-v5-c-switch__toggle--before--Top);
17695
- inset-inline-start: var(--pf-v5-c-switch__toggle--before--Left);
17696
- display: block;
17697
- width: var(--pf-v5-c-switch__toggle--before--Width);
17698
- height: var(--pf-v5-c-switch__toggle--before--Height);
17699
- content: "";
17700
- background-color: var(--pf-v5-c-switch__toggle--before--BackgroundColor);
17701
- border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius);
17702
- box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow);
17703
- transition: var(--pf-v5-c-switch__toggle--before--Transition);
17710
+ .pf-v5-c-slider__value {
17711
+ margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
17704
17712
  }
17705
17713
 
17706
- .pf-v5-c-switch__toggle-icon {
17714
+ .pf-v5-c-slider__value.pf-m-floating {
17715
+ transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
17716
+ --pf-v5-c-slider__value--MarginLeft: 0;
17707
17717
  position: absolute;
17708
17718
  inset-block-start: 0;
17709
- inset-block-end: 0;
17710
- inset-inline-start: var(--pf-v5-c-switch__toggle-icon--Left);
17711
- display: flex;
17712
- align-items: center;
17713
- font-size: var(--pf-v5-c-switch__toggle-icon--FontSize);
17714
- color: var(--pf-v5-c-switch__toggle-icon--Color);
17719
+ inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
17720
+ z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
17715
17721
  }
17716
17722
 
17717
- .pf-v5-c-switch__label {
17718
- display: inline-block;
17719
- grid-column: 2;
17720
- color: var(--pf-v5-c-switch__label--Color);
17721
- vertical-align: top;
17723
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__value.pf-m-floating {
17724
+ transform: translate(calc(var(--pf-v5-c-slider__value--m-floating--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__value--m-floating--TranslateY));
17722
17725
  }
17723
17726
 
17724
- :where(.pf-v5-theme-dark) .pf-v5-c-switch {
17725
- --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
17726
- --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
17727
- --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
17728
- --pf-v5-c-switch__toggle--before--BoxShadow: none;
17729
- --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
17727
+ .pf-v5-c-slider__value .pf-v5-c-form-control {
17728
+ width: var(--pf-v5-c-slider__value--c-form-control--Width);
17729
+ }
17730
+
17731
+ .pf-v5-c-slider__actions {
17732
+ display: flex;
17733
+ margin-inline-end: var(--pf-v5-c-slider__actions--MarginRight);
17734
+ }
17735
+
17736
+ .pf-v5-c-slider__main ~ .pf-v5-c-slider__actions {
17737
+ --pf-v5-c-slider__actions--MarginRight: 0;
17738
+ margin-inline-start: var(--pf-v5-c-slider__main--actions--MarginLeft);
17730
17739
  }
17731
17740
 
17732
17741
  .pf-v5-c-tabs {
@@ -19156,44 +19165,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
19156
19165
  --pf-v5-c-tile--m-disabled__body--Color: var(--pf-v5-global--disabled-color--300);
19157
19166
  }
19158
19167
 
19159
- .pf-v5-c-timestamp {
19160
- --pf-v5-c-timestamp--FontSize: var(--pf-v5-global--FontSize--sm);
19161
- --pf-v5-c-timestamp--Color: var(--pf-v5-global--Color--200);
19162
- --pf-v5-c-timestamp--OutlineOffset: 0.1875rem;
19163
- --pf-v5-c-timestamp--m-help-text--TextDecorationLine: underline;
19164
- --pf-v5-c-timestamp--m-help-text--TextDecorationStyle: dashed;
19165
- --pf-v5-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
19166
- --pf-v5-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
19167
- --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-global--BorderColor--200);
19168
- --pf-v5-c-timestamp--m-help-text--hover--Color: var(--pf-v5-global--Color--100);
19169
- --pf-v5-c-timestamp--m-help-text--focus--Color: var(--pf-v5-global--Color--100);
19170
- --pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--Color--100);
19171
- --pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
19172
- display: inline-block;
19173
- font-size: var(--pf-v5-c-timestamp--FontSize);
19174
- color: var(--pf-v5-c-timestamp--Color);
19175
- outline-offset: var(--pf-v5-c-timestamp--OutlineOffset);
19176
- }
19177
-
19178
- .pf-v5-c-timestamp.pf-m-help-text {
19179
- text-decoration-line: var(--pf-v5-c-timestamp--m-help-text--TextDecorationLine);
19180
- text-decoration-thickness: var(--pf-v5-c-timestamp--m-help-text--TextDecorationThickness);
19181
- text-decoration-style: var(--pf-v5-c-timestamp--m-help-text--TextDecorationStyle);
19182
- text-decoration-color: var(--pf-v5-c-timestamp--m-help-text--TextDecorationColor);
19183
- text-underline-offset: var(--pf-v5-c-timestamp--m-help-text--TextUnderlineOffset);
19184
- cursor: pointer;
19185
- }
19186
-
19187
- .pf-v5-c-timestamp.pf-m-help-text:hover {
19188
- --pf-v5-c-timestamp--Color: var(--pf-v5-c-timestamp--m-help-text--hover--Color);
19189
- --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor);
19190
- }
19191
-
19192
- .pf-v5-c-timestamp.pf-m-help-text:focus {
19193
- --pf-v5-c-timestamp--Color: var(--pf-v5-c-timestamp--m-help-text--focus--Color);
19194
- --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor);
19195
- }
19196
-
19197
19168
  .pf-v5-c-title {
19198
19169
  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
19199
19170
  --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
@@ -19254,6 +19225,44 @@ svg.pf-v5-c-spinner.pf-m-xl {
19254
19225
  line-height: var(--pf-v5-c-title--m-md--LineHeight);
19255
19226
  }
19256
19227
 
19228
+ .pf-v5-c-timestamp {
19229
+ --pf-v5-c-timestamp--FontSize: var(--pf-v5-global--FontSize--sm);
19230
+ --pf-v5-c-timestamp--Color: var(--pf-v5-global--Color--200);
19231
+ --pf-v5-c-timestamp--OutlineOffset: 0.1875rem;
19232
+ --pf-v5-c-timestamp--m-help-text--TextDecorationLine: underline;
19233
+ --pf-v5-c-timestamp--m-help-text--TextDecorationStyle: dashed;
19234
+ --pf-v5-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
19235
+ --pf-v5-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
19236
+ --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-global--BorderColor--200);
19237
+ --pf-v5-c-timestamp--m-help-text--hover--Color: var(--pf-v5-global--Color--100);
19238
+ --pf-v5-c-timestamp--m-help-text--focus--Color: var(--pf-v5-global--Color--100);
19239
+ --pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--Color--100);
19240
+ --pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
19241
+ display: inline-block;
19242
+ font-size: var(--pf-v5-c-timestamp--FontSize);
19243
+ color: var(--pf-v5-c-timestamp--Color);
19244
+ outline-offset: var(--pf-v5-c-timestamp--OutlineOffset);
19245
+ }
19246
+
19247
+ .pf-v5-c-timestamp.pf-m-help-text {
19248
+ text-decoration-line: var(--pf-v5-c-timestamp--m-help-text--TextDecorationLine);
19249
+ text-decoration-thickness: var(--pf-v5-c-timestamp--m-help-text--TextDecorationThickness);
19250
+ text-decoration-style: var(--pf-v5-c-timestamp--m-help-text--TextDecorationStyle);
19251
+ text-decoration-color: var(--pf-v5-c-timestamp--m-help-text--TextDecorationColor);
19252
+ text-underline-offset: var(--pf-v5-c-timestamp--m-help-text--TextUnderlineOffset);
19253
+ cursor: pointer;
19254
+ }
19255
+
19256
+ .pf-v5-c-timestamp.pf-m-help-text:hover {
19257
+ --pf-v5-c-timestamp--Color: var(--pf-v5-c-timestamp--m-help-text--hover--Color);
19258
+ --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor);
19259
+ }
19260
+
19261
+ .pf-v5-c-timestamp.pf-m-help-text:focus {
19262
+ --pf-v5-c-timestamp--Color: var(--pf-v5-c-timestamp--m-help-text--focus--Color);
19263
+ --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor);
19264
+ }
19265
+
19257
19266
  .pf-v5-c-toggle-group {
19258
19267
  --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-v5-global--spacer--form-element);
19259
19268
  --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-v5-global--spacer--md);
@@ -25953,6 +25962,18 @@ label.pf-v5-c-tree-view__node-text {
25953
25962
  grid-gap: var(--pf-v5-l-grid--m-gutter--GridGap);
25954
25963
  }
25955
25964
 
25965
+ .pf-v5-l-level {
25966
+ --pf-v5-l-level--m-gutter--Gap: var(--pf-v5-global--gutter);
25967
+ display: flex;
25968
+ flex-wrap: wrap;
25969
+ align-items: center;
25970
+ justify-content: space-between;
25971
+ }
25972
+
25973
+ .pf-v5-l-level.pf-m-gutter {
25974
+ gap: var(--pf-v5-l-level--m-gutter--Gap);
25975
+ }
25976
+
25956
25977
  .pf-v5-l-split {
25957
25978
  --pf-v5-l-stack--m-gutter--Gap: var(--pf-v5-global--gutter);
25958
25979
  display: flex;
@@ -25972,18 +25993,6 @@ label.pf-v5-c-tree-view__node-text {
25972
25993
  gap: var(--pf-v5-l-stack--m-gutter--Gap);
25973
25994
  }
25974
25995
 
25975
- .pf-v5-l-level {
25976
- --pf-v5-l-level--m-gutter--Gap: var(--pf-v5-global--gutter);
25977
- display: flex;
25978
- flex-wrap: wrap;
25979
- align-items: center;
25980
- justify-content: space-between;
25981
- }
25982
-
25983
- .pf-v5-l-level.pf-m-gutter {
25984
- gap: var(--pf-v5-l-level--m-gutter--Gap);
25985
- }
25986
-
25987
25996
  .pf-v5-l-stack {
25988
25997
  --pf-v5-l-stack--m-gutter--Gap: var(--pf-v5-global--gutter);
25989
25998
  display: flex;