Made a range of rtl fixes

Mostly around dropdowns and other items that had right/left specific
styling.
For #3702

diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js
index 473db37d43f666660d7276e1790a1bc47d101b20..781f90860f7aa539595d56723a95d8347c1c4060 100644 (file)
--- a/resources/js/components/dropdown.js
+++ b/resources/js/components/dropdown.js
@@ -37,12 +37,8 @@ class DropDown {
         if (this.moveMenu) {
             this.body.appendChild(this.menu);
             this.menu.style.position = 'fixed';
-            if (this.direction === 'right') {
-                this.menu.style.right = `${(menuOriginalRect.right - menuOriginalRect.width)}px`;
-            } else {
-                this.menu.style.left = `${menuOriginalRect.left}px`;
-            }
             this.menu.style.width = `${menuOriginalRect.width}px`;
+            this.menu.style.left = `${menuOriginalRect.left}px`;
             heightOffset = dropUpwards ? (window.innerHeight - menuOriginalRect.top  - toggleHeight / 2) : menuOriginalRect.top;
         }
 
@@ -94,6 +90,7 @@ class DropDown {
             this.menu.style.position = '';
             this.menu.style[this.direction] = '';
             this.menu.style.width = '';
+            this.menu.style.left = '';
             this.container.appendChild(this.menu);
         }
 

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index cbaf1776043d4674db3628e577be339cfef1ba55..c00f57954b0b58ae73eebe2c7f9203a895778e20 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -814,7 +814,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   .template-item-actions {
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     width: 50px;
     height: 100%;
     display: flex;
@@ -828,6 +828,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
     border: 0;
     border-top: 1px solid #DDD;
   }
+  .template-item-actions button svg {
+    margin: 0;
+  }
   .template-item-actions button:first-child {
     border-top: 0;
   }

diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index e39f5414f37f7a4a4307fc995937d242138b1d18..7025aa8984eda05f24188ce80fdcc7629e638fca 100644 (file)
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -210,6 +210,10 @@ select {
   background-size: 12px;
   background-position: calc(100% - 20px) 70%;
   background-repeat: no-repeat;
+
+  @include rtl {
+    background-position: 20px 70%;
+  }
 }
 
 input[type=date] {

diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 5e251f9c7c1faa7d61c4a4054b394c0a3170b042..8926eb7f98308ba5c06078929218a077a7587dbd 100644 (file)
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -197,7 +197,7 @@
   .chapter-contents-toggle {
     display: block;
     width: 100%;
-    text-align: left;
+    text-align: start;
     padding: $-xxs $-s ($-xxs * 2) $-s;
     border-radius: 0 3px 3px 0;
     line-height: 1;
@@ -630,7 +630,7 @@ ul.pagination {
   z-index: 999;
   top: 0;
   list-style: none;
-  right: 0;
+  inset-inline-end: 0;
   margin: $-m 0;
   @include lightDark(background-color, #fff, #333);
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
@@ -715,7 +715,7 @@ ul.pagination {
 // being cut by scrollable container.
 .tri-layout-right .dropdown-menu,
 .tri-layout-left .dropdown-menu {
-  right: $-xs;
+  inset-inline-end: $-xs;
 }
 
 // Books grid view