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

package/sass-utilities/mixins.scss

@@ -151,8 +151,8 @@
 
 @mixin pf-v5-u-screen-reader {
   position: fixed;
-  top: 0;
-  left: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -309,3 +309,28 @@
     }
   }
 }
+
+// Applies custom styles to support RTL
+@mixin pf-v5-rtl($transform: null) {
+  // resets property used to inverse transform values calc()s in RTL
+  @if $transform == "transform-flip-revert" {
+    --#{$pf-global}--rtl--transform--flip: 1;
+  } @else {
+    // establishes the selectors used to target RTL
+    // remove .ws-dir-rtl before releasing RTL
+    @at-root :where(.ws-dir-rtl, .#{$pf-prefix}m-dir-rtl, [dir="rtl"]) #{&} {
+      // sets property used in calcs to inverse transform values
+      @if $transform == "transform-flip" {
+        --#{$pf-global}--rtl--transform--flip: -1;
+      }
+
+      // flips something horizontally/inline. relies upon scale/scale() not already being used for the element
+      @if $transform == 'flip-inline' {
+        scale: -1 1;
+      }
+
+      // any custom CSS to apply within the selectors that target RTL
+      @content
+    }
+  }
+}

package/sass-utilities/scss-variables.scss

@@ -294,17 +294,17 @@ $pf-v5-global--height-breakpoint-name-map: (
 // Spacer properties
 $pf-v5-global--spacer-properties-map: (
   "m":  "margin",
-  "mt": "margin-top",
-  "mr": "margin-right",
-  "mb": "margin-bottom",
-  "ml": "margin-left",
+  "mt": "margin-block-start",
+  "mr": "margin-inline-end",
+  "mb": "margin-block-end",
+  "ml": "margin-inline-start",
   "mx": null,
   "my": null,
   "p":  "padding",
-  "pt": "padding-top",
-  "pr": "padding-right",
-  "pb": "padding-bottom",
-  "pl": "padding-left",
+  "pt": "padding-block-start",
+  "pr": "padding-inline-end",
+  "pb": "padding-block-end",
+  "pl": "padding-inline-start",
   "px": null,
   "py": null
 );

package/utilities/Accessibility/accessibility.css

@@ -1,7 +1,7 @@
 .pf-v5-u-screen-reader {
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -23,8 +23,8 @@
 @media screen and (min-width: 576px) {
   .pf-v5-u-screen-reader-on-sm {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -51,8 +51,8 @@
 @media screen and (min-width: 768px) {
   .pf-v5-u-screen-reader-on-md {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -79,8 +79,8 @@
 @media screen and (min-width: 992px) {
   .pf-v5-u-screen-reader-on-lg {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -107,8 +107,8 @@
 @media screen and (min-width: 1200px) {
   .pf-v5-u-screen-reader-on-xl {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -135,8 +135,8 @@
 @media screen and (min-width: 1450px) {
   .pf-v5-u-screen-reader-on-2xl {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;