feat: add RTL specific styles

vaadin · Apr 14, 2020 · 13fe6bc · 13fe6bc
1 parent 40aa2b8
commit 13fe6bc
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/theme/lumo/vaadin-menu-bar-button-styles.html b/theme/lumo/vaadin-menu-bar-button-styles.html
@@ -96,6 +96,23 @@
         margin-left: 0;
         margin-right: 0;
       }
+
+      /* RTL styles */
+      :host([dir="rtl"]) {
+        margin-left: calc(var(--lumo-space-xs) / 2);
+        margin-right: 0;
+        border-radius: 0;
+      }
+
+      :host([dir="rtl"]:first-of-type) {
+        border-radius: 0 var(--lumo-border-radius-m) var(--lumo-border-radius-m) 0;
+        margin-right: calc(var(--lumo-space-xs) / 2);
+      }
+
+      :host([dir="rtl"]:nth-last-of-type(2)),
+      :host([dir="rtl"][part="overflow-button"]) {
+        border-radius: var(--lumo-border-radius-m) 0 0 var(--lumo-border-radius-m);
+      }
     </style>
   </template>
 </dom-module>
diff --git a/theme/material/vaadin-menu-bar-button-styles.html b/theme/material/vaadin-menu-bar-button-styles.html
@@ -45,7 +45,7 @@
         opacity: 0;
       }
 
-      :host([theme="contained"]) {
+      :host([theme="contained"]:not([dir="rtl"])) {
         margin-right: 1px;
       }
 
@@ -68,19 +68,42 @@
         font-size: 24px;
       }
 
-      :host([theme="outlined"]) {
+      :host([theme="outlined"]:not([dir="rtl"])) {
         margin-right: -1px;
       }
 
-      :host([theme="outlined"]:nth-last-of-type(2)),
-      :host([theme="outlined"][part~="overflow-button"]) {
+      :host([theme="outlined"]:not([dir="rtl"]):nth-last-of-type(2)),
+      :host([theme="outlined"]:not([dir="rtl"])[part~="overflow-button"]) {
         margin-right: 0;
       }
 
       :host([theme="text"]),
       :host(:not([theme])) {
         border-radius: 4px;
       }
+
+      /* RTL styles */
+      :host([dir="rtl"]:first-of-type) {
+        border-radius: 0 0.25em 0.25em 0;
+      }
+
+      :host([dir="rtl"]:nth-last-of-type(2)),
+      :host([dir="rtl"][part="overflow-button"]) {
+        border-radius: 0.25em 0 0 0.25em;
+      }
+
+      :host([dir="rtl"][theme="contained"]) {
+        margin-left: 1px;
+      }
+
+      :host([dir="rtl"][theme="outlined"]) {
+        margin-left: -1px;
+      }
+
+      :host([theme="outlined"][dir="rtl"]:nth-last-of-type(2)),
+      :host([theme="outlined"][dir="rtl"][part~="overflow-button"]) {
+        margin-left: 0;
+      }
     </style>
   </template>
 </dom-module>