@patternfly/patternfly 6.0.0-alpha.43 → 6.0.0-alpha.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/components/Panel/panel.css +27 -23
  2. package/components/Panel/panel.scss +29 -26
  3. package/components/Spinner/spinner.css +13 -34
  4. package/components/Spinner/spinner.scss +16 -47
  5. package/docs/components/Panel/examples/Panel.md +12 -0
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +40 -61
  8. package/patternfly-theme-dark-unversioned.css +40 -61
  9. package/patternfly.css +40 -61
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/components/Panel/themes/dark/panel.scss +0 -7
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -22699,37 +22699,42 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22699
22699
  }
22700
22700
  }
22701
22701
 
22702
+ :root,
22702
22703
  .pf-v5-c-panel {
22703
22704
  --pf-v5-c-panel--Width: auto;
22704
22705
  --pf-v5-c-panel--MinWidth: auto;
22705
22706
  --pf-v5-c-panel--MaxWidth: none;
22706
22707
  --pf-v5-c-panel--ZIndex: auto;
22707
- --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22708
+ --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22708
22709
  --pf-v5-c-panel--BoxShadow: none;
22709
22710
  --pf-v5-c-panel--before--BorderWidth: 0;
22710
- --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
22711
- --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
22712
- --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
22713
- --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
22714
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22715
- --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
22716
- --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
22717
- --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
22718
- --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
22711
+ --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
22712
+ --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22713
+ --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
22714
+ --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
22715
+ --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
22716
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22717
+ --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
22718
+ --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
22719
+ --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
22720
+ --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
22719
22721
  --pf-v5-c-panel__main--MaxHeight: none;
22720
22722
  --pf-v5-c-panel__main--Overflow: visible;
22721
- --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
22722
- --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
22723
- --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
22724
- --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
22725
- --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
22726
- --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
22727
- --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
22728
- --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
22723
+ --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
22724
+ --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
22725
+ --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
22726
+ --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
22727
+ --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
22728
+ --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
22729
+ --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
22730
+ --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
22729
22731
  --pf-v5-c-panel__footer--BoxShadow: none;
22730
22732
  --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
22731
22733
  --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
22732
- --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
22734
+ --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
22735
+ }
22736
+
22737
+ .pf-v5-c-panel {
22733
22738
  position: relative;
22734
22739
  z-index: var(--pf-v5-c-panel--ZIndex);
22735
22740
  width: var(--pf-v5-c-panel--Width);
@@ -22748,6 +22753,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22748
22753
  .pf-v5-c-panel.pf-m-bordered {
22749
22754
  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
22750
22755
  }
22756
+ .pf-v5-c-panel.pf-m-secondary {
22757
+ --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
22758
+ }
22751
22759
  .pf-v5-c-panel.pf-m-raised {
22752
22760
  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
22753
22761
  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -22786,14 +22794,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22786
22794
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
22787
22795
  }
22788
22796
 
22789
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
22790
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
22791
- }
22792
-
22793
- :where(.pf-theme-dark) .pf-v5-c-panel {
22794
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
22795
- }
22796
-
22797
22797
  .pf-v5-c-popover {
22798
22798
  --pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
22799
22799
  --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
@@ -25254,14 +25254,19 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25254
25254
 
25255
25255
  :root,
25256
25256
  .pf-v5-c-spinner {
25257
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25257
+ --pf-v5-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
25258
25258
  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
25259
25259
  --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
25260
- --pf-v5-c-spinner--Color: var(--pf-v5-global--primary-color--100);
25261
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25262
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25263
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25264
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25260
+ --pf-v5-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
25261
+ --pf-v5-c-spinner--AnimationDuration: 1.4s;
25262
+ --pf-v5-c-spinner--AnimationTimingFunction: linear;
25263
+ --pf-v5-c-spinner--StrokeWidth: 10;
25264
+ --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--StrokeWidth);
25265
+ --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25266
+ --pf-v5-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
25267
+ --pf-v5-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
25268
+ --pf-v5-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
25269
+ --pf-v5-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
25265
25270
  --pf-v5-c-spinner--m-inline--diameter: 1em;
25266
25271
  }
25267
25272
 
@@ -25269,6 +25274,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25269
25274
  width: var(--pf-v5-c-spinner--Width);
25270
25275
  height: var(--pf-v5-c-spinner--Height);
25271
25276
  overflow: hidden;
25277
+ animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25272
25278
  }
25273
25279
  .pf-v5-c-spinner.pf-m-inline {
25274
25280
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
@@ -25286,33 +25292,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25286
25292
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25287
25293
  }
25288
25294
 
25289
- svg.pf-v5-c-spinner {
25290
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25291
- --pf-v5-c-spinner--AnimationDuration: 1.4s;
25292
- --pf-v5-c-spinner--AnimationTimingFunction: linear;
25293
- --pf-v5-c-spinner--stroke-width: 10;
25294
- --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
25295
- --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
25296
- --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25297
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25298
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25299
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25300
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25301
- animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25302
- }
25303
- svg.pf-v5-c-spinner.pf-m-sm {
25304
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
25305
- }
25306
- svg.pf-v5-c-spinner.pf-m-md {
25307
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
25308
- }
25309
- svg.pf-v5-c-spinner.pf-m-lg {
25310
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
25311
- }
25312
- svg.pf-v5-c-spinner.pf-m-xl {
25313
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25314
- }
25315
-
25316
25295
  .pf-v5-c-spinner__path {
25317
25296
  width: 100%;
25318
25297
  height: 100%;
@@ -25320,7 +25299,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25320
25299
  stroke-dasharray: 283;
25321
25300
  stroke-dashoffset: 280;
25322
25301
  stroke-linecap: round;
25323
- stroke-width: var(--pf-v5-c-spinner--stroke-width);
25302
+ stroke-width: var(--pf-v5-c-spinner--StrokeWidth);
25324
25303
  transform-origin: 50% 50%;
25325
25304
  animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
25326
25305
  }
package/patternfly.css CHANGED
@@ -22699,37 +22699,42 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22699
22699
  }
22700
22700
  }
22701
22701
 
22702
+ :root,
22702
22703
  .pf-v5-c-panel {
22703
22704
  --pf-v5-c-panel--Width: auto;
22704
22705
  --pf-v5-c-panel--MinWidth: auto;
22705
22706
  --pf-v5-c-panel--MaxWidth: none;
22706
22707
  --pf-v5-c-panel--ZIndex: auto;
22707
- --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22708
+ --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22708
22709
  --pf-v5-c-panel--BoxShadow: none;
22709
22710
  --pf-v5-c-panel--before--BorderWidth: 0;
22710
- --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
22711
- --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
22712
- --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
22713
- --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
22714
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22715
- --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
22716
- --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
22717
- --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
22718
- --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
22711
+ --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
22712
+ --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22713
+ --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
22714
+ --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
22715
+ --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
22716
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22717
+ --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
22718
+ --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
22719
+ --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
22720
+ --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
22719
22721
  --pf-v5-c-panel__main--MaxHeight: none;
22720
22722
  --pf-v5-c-panel__main--Overflow: visible;
22721
- --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
22722
- --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
22723
- --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
22724
- --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
22725
- --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
22726
- --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
22727
- --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
22728
- --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
22723
+ --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
22724
+ --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
22725
+ --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
22726
+ --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
22727
+ --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
22728
+ --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
22729
+ --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
22730
+ --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
22729
22731
  --pf-v5-c-panel__footer--BoxShadow: none;
22730
22732
  --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
22731
22733
  --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
22732
- --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
22734
+ --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
22735
+ }
22736
+
22737
+ .pf-v5-c-panel {
22733
22738
  position: relative;
22734
22739
  z-index: var(--pf-v5-c-panel--ZIndex);
22735
22740
  width: var(--pf-v5-c-panel--Width);
@@ -22748,6 +22753,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22748
22753
  .pf-v5-c-panel.pf-m-bordered {
22749
22754
  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
22750
22755
  }
22756
+ .pf-v5-c-panel.pf-m-secondary {
22757
+ --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
22758
+ }
22751
22759
  .pf-v5-c-panel.pf-m-raised {
22752
22760
  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
22753
22761
  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -22786,14 +22794,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22786
22794
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
22787
22795
  }
22788
22796
 
22789
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
22790
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
22791
- }
22792
-
22793
- :where(.pf-v5-theme-dark) .pf-v5-c-panel {
22794
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
22795
- }
22796
-
22797
22797
  .pf-v5-c-popover {
22798
22798
  --pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
22799
22799
  --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
@@ -25254,14 +25254,19 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25254
25254
 
25255
25255
  :root,
25256
25256
  .pf-v5-c-spinner {
25257
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25257
+ --pf-v5-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
25258
25258
  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
25259
25259
  --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
25260
- --pf-v5-c-spinner--Color: var(--pf-v5-global--primary-color--100);
25261
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25262
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25263
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25264
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25260
+ --pf-v5-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
25261
+ --pf-v5-c-spinner--AnimationDuration: 1.4s;
25262
+ --pf-v5-c-spinner--AnimationTimingFunction: linear;
25263
+ --pf-v5-c-spinner--StrokeWidth: 10;
25264
+ --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--StrokeWidth);
25265
+ --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25266
+ --pf-v5-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
25267
+ --pf-v5-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
25268
+ --pf-v5-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
25269
+ --pf-v5-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
25265
25270
  --pf-v5-c-spinner--m-inline--diameter: 1em;
25266
25271
  }
25267
25272
 
@@ -25269,6 +25274,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25269
25274
  width: var(--pf-v5-c-spinner--Width);
25270
25275
  height: var(--pf-v5-c-spinner--Height);
25271
25276
  overflow: hidden;
25277
+ animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25272
25278
  }
25273
25279
  .pf-v5-c-spinner.pf-m-inline {
25274
25280
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
@@ -25286,33 +25292,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25286
25292
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25287
25293
  }
25288
25294
 
25289
- svg.pf-v5-c-spinner {
25290
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25291
- --pf-v5-c-spinner--AnimationDuration: 1.4s;
25292
- --pf-v5-c-spinner--AnimationTimingFunction: linear;
25293
- --pf-v5-c-spinner--stroke-width: 10;
25294
- --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
25295
- --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
25296
- --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25297
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25298
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25299
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25300
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25301
- animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25302
- }
25303
- svg.pf-v5-c-spinner.pf-m-sm {
25304
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
25305
- }
25306
- svg.pf-v5-c-spinner.pf-m-md {
25307
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
25308
- }
25309
- svg.pf-v5-c-spinner.pf-m-lg {
25310
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
25311
- }
25312
- svg.pf-v5-c-spinner.pf-m-xl {
25313
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25314
- }
25315
-
25316
25295
  .pf-v5-c-spinner__path {
25317
25296
  width: 100%;
25318
25297
  height: 100%;
@@ -25320,7 +25299,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25320
25299
  stroke-dasharray: 283;
25321
25300
  stroke-dashoffset: 280;
25322
25301
  stroke-linecap: round;
25323
- stroke-width: var(--pf-v5-c-spinner--stroke-width);
25302
+ stroke-width: var(--pf-v5-c-spinner--StrokeWidth);
25324
25303
  transform-origin: 50% 50%;
25325
25304
  animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
25326
25305
  }