Ticket #4876 - Artifcier Padding/Margin Spacing issue in RTL Language Mods.

modules/boonex/artificer/data/template/system/css/forms.css

@@ -145,6 +145,10 @@ import url(../../../../../../../template/css/forms.css);
 
     margin: 0 0.5rem;
 }
+.bx-dir-rtl.bx-artificer .bx-form-input-wrapper-password > a {
+    left: 0;
+    right: auto;
+}
 .bx-artificer .bx-form-input-password {
     position: relative;
 
@@ -168,6 +172,7 @@ import url(../../../../../../../template/css/forms.css);
     box-shadow: none;
 }
 
+
 /*-- Form field: Slider/Doublerange --*/
 .bx-form-input-wrapper-slider,
 .bx-form-input-wrapper-doublerange {
@@ -237,6 +242,11 @@ import url(../../../../../../../template/css/forms.css);
     margin-left: 0.5rem;
     vertical-align: text-bottom;
 }
+.bx-dir-rtl .bx-form-input-wrapper-checkbox_set label,
+.bx-dir-rtl.bx-artificer .bx-form-input-wrapper-radio_set label {
+    margin-left: 0;
+    margin-right: 0.5rem;
+}
 
 
 /*--- Form field: File ---*/

modules/boonex/artificer/data/template/system/css/menu-sidebar.css

@@ -26,20 +26,34 @@
     -moz-transition: -moz-transform 0.5s 0s;
     transition: transform 0.5s 0s;
 }
-.bx-sidebar.bx-sidebar-site .bx-sidebar-cnt {
+.bx-dir-ltr .bx-sidebar.bx-sidebar-site .bx-sidebar-cnt {
     -webkit-transform: translateX(-100%);
     -moz-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
     -o-transform: translateX(-100%);
     transform: translateX(-100%);
 }
-.bx-sidebar.bx-sidebar-account .bx-sidebar-cnt {
+.bx-dir-rtl .bx-sidebar.bx-sidebar-site .bx-sidebar-cnt {
     -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
     -ms-transform: translateX(100%);
     -o-transform: translateX(100%);
     transform: translateX(100%);
 }
+.bx-dir-ltr .bx-sidebar.bx-sidebar-account .bx-sidebar-cnt {
+    -webkit-transform: translateX(100%);
+    -moz-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    -o-transform: translateX(100%);
+    transform: translateX(100%);
+}
+.bx-dir-rtl .bx-sidebar.bx-sidebar-account .bx-sidebar-cnt {
+    -webkit-transform: translateX(-100%);
+    -moz-transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    -o-transform: translateX(-100%);
+    transform: translateX(-100%);
+}
 .bx-sidebar.bx-sidebar-site.bx-sidebar-active,
 .bx-sidebar.bx-sidebar-account.bx-sidebar-active {
     opacity: 1;

modules/boonex/artificer/data/template/system/menu_floating_blocks_dash.html

@@ -3,7 +3,7 @@
         <li class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
             <div class="bx-menu-floating-blocks-dash-item bx-def-box group bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 p-2 mx-2 rounded-md box-border __class_add__">
                 <a class="group flex items-center" href="__link__" <bx_if:onclick>onclick="__onclick__"</bx_if:onclick> __attrs__>
-                    <div class="bx-menu-floating-blocks-icon flex items-center justify-center w-10 h-10 ml-2 mr-4 my-2 bg-gray-100 group-hover:bg-gray-200 dark:bg-gray-700 dark:group-hover:bg-gray-600 rounded-full text-gray-800 group-hover:text-gray-600 dark:group-hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+                    <div class="bx-menu-floating-blocks-icon flex items-center justify-center w-10 h-10 ltr:ml-2 ltr:mr-4 rtl:ml-4 rtl:mr-2 my-2 bg-gray-100 group-hover:bg-gray-200 dark:bg-gray-700 dark:group-hover:bg-gray-600 rounded-full text-gray-800 group-hover:text-gray-600 dark:group-hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                         <bx_include_auto:menu_icon.html />
                     </div>
                     <div class="bx-menu-floating-blocks-dash-title">

modules/boonex/artificer/data/template/system/sidebar_account.html

@@ -1,9 +1,9 @@
-<div class="bx-sidebar bx-sidebar-account bx-def-z-index-modal fixed flex justify-end inset-0" role="dialog" aria-modal="true">
+<div class="bx-sidebar bx-sidebar-account bx-def-z-index-modal fixed flex flex-row justify-end inset-0" role="dialog" aria-modal="true">
     <div class="bx-sidebar-account-bg fixed inset-0 bg-gray-600 opacity-75" aria-hidden="true"></div>
-    <div class="flex-shrink-0 w-14" aria-hidden="true"></div>
+    <div class="flex-shrink-0 w-12" aria-hidden="true"></div>
     <div class="bx-sidebar-cnt relative flex max-w-xs w-full py-4 bg-white dark:bg-gray-900">
-        <div class="absolute top-0 left-0 -ml-12 pt-2">
-            <button type="button" class="bx-sidebar-account-close ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+        <div class="absolute top-0 ltr:left-0 rtl:right-0 ltr:-ml-12 rtl:-mr-12 pt-2">
+            <button type="button" class="bx-sidebar-account-close ltr:ml-1 rtl:mr-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                 <span class="sr-only"><bx_text:_bx_artificer_txt_close_sidebar /></span>
                 <div class="bx-icon bx-icon-close text-white">
                     <bx_image_auto:times />

modules/boonex/artificer/data/template/system/sidebar_site.html

@@ -1,7 +1,7 @@
 <div class="bx-sidebar bx-sidebar-site bx-def-z-index-modal fixed flex lg:hidden inset-0" role="dialog" aria-modal="true">
     <div class="bx-sidebar-site-bg fixed inset-0 bg-gray-600 opacity-75" aria-hidden="true"></div>
     <div class="bx-sidebar-cnt relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white dark:bg-gray-900">
-        <div class="absolute top-0 right-0 -mr-12 pt-2">
+        <div class="absolute top-0 ltr:right-0 rtl:left-0 ltr:-mr-12 rtl:-ml-12 pt-2">
             <button type="button" class="bx-sidebar-site-close ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                 <span class="sr-only"><bx_text:_bx_artificer_txt_close_sidebar /></span>
                 <div class="bx-icon bx-icon-close text-white">

template/css/tailwind.css

@@ -842,6 +842,9 @@
         @apply block w-full pl-3 py-2 pr-8;
         @apply rounded-md;
     }
+    .bx-artificer .bx-form-input-wrapper-password .bx-form-input-password {
+        @apply ltr:pl-3 rtl:pl-8 ltr:pr-8 rtl:pr-3;
+    }
 
     /* Common elements: Forms: Checkbox/Radio Set Input */
     .bx-artificer .bx-form-input-wrapper-checkbox_set,

template/form_field_section_title.html

@@ -3,15 +3,15 @@
 </bx_if:show_view>
 <bx_if:show_default>
     <div class="bx-form-section-title group relative flex justify-between align-center flex-nowrap w-full">
-        <div class="flex-1 max-w-full pr-12">
-            <a class="block w-full pl-6 py-5 text-inherit hover:text-gray-800 dark:hover:text-gray-200 font-semibold" href="javascript:void(0);">
+        <div class="flex-1 max-w-full ltr:pr-12 rtl:pl-12">
+            <a class="block w-full ltr:pl-6 rtl:pr-6 py-5 text-inherit hover:text-gray-800 dark:hover:text-gray-200 font-semibold" href="javascript:void(0);">
                 __caption__
                 <bx_if:show_default_info>
                     <br /><span class="bx-def-font-grayed block w-full truncate">__info__</span>
                 </bx_if:show_default_info>
             </a>
         </div>
-        <div class="absolute right-0 py-5 pr-6">
+        <div class="absolute ltr:right-0 rtl:left-0 py-5 ltr:pr-6 rtl:pl-6">
             <u class="bx-form-section-toggler"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></u>
         </div>
     </div>