Issue #3436129: Fix drawer popovers for RTL

css/components/admin-toolbar.css

@@ -94,6 +94,10 @@ body {
   .admin-toolbar ~ .dialog-off-canvas-main-canvas {
     margin-inline-start: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width));
   }
+
+  [dir="rtl"] :is(.admin-toolbar ~ .dialog-off-canvas-main-canvas) {
+    margin-inline-start: var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width));
+  }
 }
 
 [data-admin-toolbar="expanded"] .admin-toolbar {

css/components/admin-toolbar.pcss.css

@@ -79,6 +79,10 @@ body {
   & ~ .dialog-off-canvas-main-canvas {
     @media (--admin-toolbar-desktop) {
       margin-inline-start: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width));
+
+      [dir="rtl"] & {
+        margin-inline-start: var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width));
+      }
     }
   }
 

css/components/toolbar-button.css

@@ -172,17 +172,21 @@
   }
 }
 
-.toolbar-button--expand--down::after {
+[dir="rtl"] [class*="toolbar-button--expand"]::after {
+  transform: rotate(180deg);
+}
+
+:is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down)::after {
   transform: rotate(90deg);
 }
 
 @media (forced-colors: active) {
-  .toolbar-button--expand--down::after {
+  :is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down)::after {
     background: canvastext;
   }
 }
 
-.toolbar-button--expand--down[aria-expanded="true"]::after {
+[aria-expanded="true"]:is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down)::after {
   transform: rotate(-90deg);
 }
 

css/components/toolbar-button.pcss.css

@@ -153,10 +153,15 @@
     @media (--forced-colors) {
       background: canvastext;
     }
+
+    [dir="rtl"] & {
+      transform: rotate(180deg);
+    }
   }
 }
 
-.toolbar-button--expand--down {
+.toolbar-button--expand--down,
+[dir="rtl"] .toolbar-button--expand--down {
   &::after {
     transform: rotate(90deg);
 

css/components/toolbar-popover.css

@@ -32,9 +32,7 @@
   grid-auto-rows: max-content;
   padding: var(--admin-toolbar-space-16);
   transition: transform var(--admin-toolbar-transiton), visibility var(--admin-toolbar-transiton);
-  /* Use values literally instead of the --admin-toolbar-popover-width variable,
-  since CSS has trouble with nested calc() functions from a variable. */
-  transform: translateX(calc(max(1rem, 1rem) * 16 * -1));
+  transform: translateX(-100%);
   transform-origin: 0;
   filter: drop-shadow(0 0 4.5rem rgba(0, 0, 0, 0.2)) drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.04)) drop-shadow(0 0 2.5rem rgba(0, 0, 0, 0.06));
   background-color: var(--admin-toolbar-color-white);
@@ -51,6 +49,7 @@
   /* Hide the drop-shadow on the right side. */
   -webkit-clip-path: inset(0 0 0 -10rem);
   clip-path: inset(0 0 0 -10rem);
+  transform: translateX(0);
 }
 @media (min-width: 64rem) {
   [data-toolbar-popover-wrapper] {
@@ -70,11 +69,6 @@
   -webkit-clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
   clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
 }
-/* debug code */
-/* [data-toolbar-popover-safe-triangle] {
-  opacity: 0.5;
-  background: green;
-} */
 [data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
   visibility: visible;
   transform: translateX(0);
@@ -84,9 +78,14 @@
   [data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
     transform: translateX(var(--admin-toolbar-sidebar-width));
   }
+
+  [dir="rtl"] :is([data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper]) {
+    transform: translateX(calc(var(--admin-toolbar-sidebar-width) * -1));
+  }
 }
 [data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper] {
-  /* Use values literally instead of the --admin-toolbar-popover-width variable,
-  since CSS has trouble with nested calc() functions from a variable. */
   transform: translateX(calc((16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left)));
 }
+[dir="rtl"] :is([data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper]) {
+  transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right)));
+}

css/components/toolbar-popover.pcss.css

@@ -33,11 +33,8 @@
   visibility: hidden;
   grid-auto-rows: max-content;
   padding: var(--admin-toolbar-space-16);
-  transition: transform var(--admin-toolbar-transiton),
-    visibility var(--admin-toolbar-transiton);
-  /* Use values literally instead of the --admin-toolbar-popover-width variable,
-  since CSS has trouble with nested calc() functions from a variable. */
-  transform: translateX(calc(max(1rem, 16px) * 16 * -1));
+  transition: transform var(--admin-toolbar-transiton), visibility var(--admin-toolbar-transiton);
+  transform: translateX(-100%);
   transform-origin: 0;
   filter: drop-shadow(0 0 72px rgba(0, 0, 0, 0.2))
     drop-shadow(0 0 8px rgba(0, 0, 0, 0.04))
@@ -56,6 +53,7 @@
   [dir='rtl'] & {
     /* Hide the drop-shadow on the right side. */
     clip-path: inset(0 0 0 -10rem);
+    transform: translateX(0);
   }
 
   @media (--admin-toolbar-desktop) {
@@ -80,12 +78,6 @@
   );
 }
 
-/* debug code */
-/* [data-toolbar-popover-safe-triangle] {
-  opacity: 0.5;
-  background: green;
-} */
-
 [data-toolbar-popover-control][aria-expanded='true']
   + [data-toolbar-popover-wrapper] {
   visibility: visible;
@@ -94,15 +86,21 @@
 
   @media (--admin-toolbar-desktop) {
     transform: translateX(var(--admin-toolbar-sidebar-width));
+
+    [dir="rtl"] & {
+      transform: translateX(calc(var(--admin-toolbar-sidebar-width) * -1));
+    }
   }
 }
 
 [data-admin-toolbar='collapsed'] [data-toolbar-popover-wrapper] {
-  /* Use values literally instead of the --admin-toolbar-popover-width variable,
-  since CSS has trouble with nested calc() functions from a variable. */
   transform: translateX(
     calc(
       (16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left)
     )
   );
+
+  [dir="rtl"] & {
+    transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right)));
+  }
 }

css/components/top-bar.css

@@ -27,6 +27,10 @@
     padding-inline: calc(var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
     box-shadow: 0 0 40px 0 var(--admin-toolbar-color-shadow-6), 0 4px 4px 0 var(--admin-toolbar-color-shadow-8);
   }
+
+  [dir="rtl"] .top-bar {
+    padding-inline: calc(var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
+  }
 }
 /* When only one burger button hide top bar on desktop. */
 @media (min-width: 64rem) {

css/components/top-bar.pcss.css

@@ -22,6 +22,10 @@
     padding-block: var(--admin-toolbar-space-12);
     padding-inline: calc(var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
     box-shadow: 0 0 40px 0 var(--admin-toolbar-color-shadow-6), 0 4px 4px 0 var(--admin-toolbar-color-shadow-8);
+
+    [dir="rtl"] & {
+      padding-inline: calc(var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
+    }
   }
 }