@patternfly/patternfly 5.1.0-prerelease.8 → 5.1.0-prerelease.9

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 (27) hide show
  1. package/README.md +10 -0
  2. package/base/_common.scss +20 -0
  3. package/base/_variables.scss +3 -0
  4. package/base/patternfly-common.css +21 -0
  5. package/base/patternfly-variables.css +1 -0
  6. package/components/DualListSelector/dual-list-selector.css +5 -1
  7. package/components/DualListSelector/dual-list-selector.scss +7 -3
  8. package/components/Pagination/pagination.css +4 -0
  9. package/components/Pagination/pagination.scss +2 -0
  10. package/components/Switch/switch.css +1 -1
  11. package/components/Switch/switch.scss +1 -1
  12. package/components/Wizard/wizard.css +7 -1
  13. package/components/Wizard/wizard.scss +7 -3
  14. package/docs/components/Chip/examples/Chip.md +1 -1
  15. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  16. package/docs/components/Label/examples/Label.md +1 -1
  17. package/package.json +2 -2
  18. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -0
  19. package/patternfly-base-no-globals.css +22 -0
  20. package/patternfly-base-theme-dark-unversioned.css +22 -0
  21. package/patternfly-base.css +22 -0
  22. package/patternfly-no-globals.css +39 -3
  23. package/patternfly-theme-dark-unversioned.css +39 -3
  24. package/patternfly.css +39 -3
  25. package/patternfly.min.css +1 -1
  26. package/patternfly.min.css.map +1 -1
  27. package/sass-utilities/mixins.scss +25 -0
package/patternfly.css CHANGED
@@ -317,6 +317,7 @@
317
317
  --pf-v5-global--arrow--width-lg: 1.5625rem;
318
318
  --pf-v5-global--target-size--MinWidth: 44px;
319
319
  --pf-v5-global--target-size--MinHeight: 44px;
320
+ --pf-v5-global--rtl--transform--flip: 1;
320
321
  }
321
322
 
322
323
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
@@ -555,6 +556,27 @@
555
556
  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
556
557
  }
557
558
 
559
+ .pf-v5-m-dir-rtl {
560
+ direction: rtl;
561
+ }
562
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
563
+ --pf-v5-global--rtl--transform--flip: -1;
564
+ }
565
+
566
+ .pf-v5-m-dir-ltr,
567
+ .ws-dir-ltr {
568
+ --pf-v5-global--rtl--transform--flip: 1;
569
+ direction: ltr;
570
+ }
571
+
572
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
573
+ scale: -1 1;
574
+ }
575
+
576
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
577
+ --pf-v5-global--rtl--transform--flip: -1;
578
+ }
579
+
558
580
  :where(html,
559
581
  body,
560
582
  p,
@@ -10826,7 +10848,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10826
10848
  position: absolute;
10827
10849
  inset-block-start: 0;
10828
10850
  inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
10829
- transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
10851
+ transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
10830
10852
  }
10831
10853
  .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
10832
10854
  overflow-anchor: none;
@@ -10926,6 +10948,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10926
10948
  padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
10927
10949
  }
10928
10950
 
10951
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) :is(.pf-v5-c-dual-list-selector__controls-item, .pf-v5-c-dual-list-selector__item-toggle-icon) {
10952
+ scale: -1 1;
10953
+ }
10954
+
10929
10955
  .pf-v5-c-dual-list-selector__item-main {
10930
10956
  display: flex;
10931
10957
  min-width: 0;
@@ -22083,6 +22109,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22083
22109
  justify-content: flex-end;
22084
22110
  }
22085
22111
 
22112
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
22113
+ scale: -1 1;
22114
+ }
22115
+
22086
22116
  .pf-v5-c-pagination__nav-control .pf-v5-c-button {
22087
22117
  padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
22088
22118
  padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
@@ -25014,7 +25044,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25014
25044
  background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
25015
25045
  }
25016
25046
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
25017
- transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
25047
+ transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
25018
25048
  }
25019
25049
  .pf-v5-c-switch__input:checked ~ .pf-m-off {
25020
25050
  display: none;
@@ -31035,6 +31065,9 @@ label.pf-v5-c-tree-view__node-text {
31035
31065
  margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
31036
31066
  color: var(--pf-v5-c-wizard__toggle-separator--Color);
31037
31067
  }
31068
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
31069
+ scale: -1 1;
31070
+ }
31038
31071
 
31039
31072
  .pf-v5-c-wizard__toggle-icon {
31040
31073
  line-height: var(--pf-v5-c-wizard__toggle-icon--LineHeight);
@@ -31152,7 +31185,7 @@ label.pf-v5-c-tree-view__node-text {
31152
31185
  color: var(--pf-v5-c-wizard__nav-link--before--Color);
31153
31186
  background-color: var(--pf-v5-c-wizard__nav-link--before--BackgroundColor);
31154
31187
  border-radius: var(--pf-v5-c-wizard__nav-link--before--BorderRadius);
31155
- transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
31188
+ transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
31156
31189
  }
31157
31190
 
31158
31191
  .pf-v5-c-wizard__nav-link::before {
@@ -31201,6 +31234,9 @@ label.pf-v5-c-tree-view__node-text {
31201
31234
  transition: var(--pf-v5-c-wizard__nav-link-toggle-icon--Transition);
31202
31235
  transform: rotate(var(--pf-v5-c-wizard__nav-link-toggle-icon--Rotate));
31203
31236
  }
31237
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
31238
+ scale: -1 1;
31239
+ }
31204
31240
 
31205
31241
  .pf-v5-c-wizard__main {
31206
31242
  z-index: var(--pf-v5-c-wizard__main--ZIndex);