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

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

@@ -99,11 +99,15 @@ import url(../../../../../../../template/css/common.css);
     max-width: 65%;
 }
 
+/*-- START FROM HERE --*/
 .bx-db-menu-tab {
     margin-left: 5px;
     text-align: right;
     overflow-x: auto;
 }
+.bx-dir-rtl .bx-db-menu-tab {
+    text-align: left;
+}
 .bx-db-menu-tab.bx-db-menu-tab-more-auto {
     overflow-x: visible;
 }

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

@@ -198,14 +198,25 @@ import url(../../../../../../../template/css/forms.css);
     align-items: center;
 
     width: auto;
+}
+.bx-dir-ltr .bx-form-element .bx-form-value .bx-form-input-wrapper-price span {
     border-right-width: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
-.bx-form-element .bx-form-value .bx-form-input-price:not(:first-child) {
+.bx-dir-rtl .bx-form-element .bx-form-value .bx-form-input-wrapper-price span {
+    border-left-width: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+.bx-dir-ltr .bx-form-element .bx-form-value .bx-form-input-price:not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
+.bx-dir-rtl .bx-form-element .bx-form-value .bx-form-input-price:not(:first-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
 
 
 /*-- Form field: Date/Time Pickers --*/
@@ -275,7 +286,12 @@ import url(../../../../../../../template/css/forms.css);
 .bx-form-element .bx-form-input-location-cont:not(.minimized) .bx-form-input-location-country {
     margin-left: 0.25rem;
 }
-
+.bx-dir-rtl .bx-form-element .bx-form-input-location-cont:not(.minimized) .bx-form-input-location-street,
+.bx-dir-rtl .bx-form-element .bx-form-input-location-cont:not(.minimized) .bx-form-input-location-state,
+.bx-dir-rtl .bx-form-element .bx-form-input-location-cont:not(.minimized) .bx-form-input-location-country {
+    margin-left: 0;
+    margin-right: 0.25rem;
+}
 .bx-form-element .bx-form-input-location-cont .bx-form-input-location-status-cont {
     float:none;
     width:98%;
@@ -326,6 +342,10 @@ import url(../../../../../../../template/css/forms.css);
     font-weight: normal;    
     cursor: pointer;
 }
+.bx-dir-rtl .bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) b {
+    padding-left: 1.5rem;
+    padding-right: 0;
+}
 .bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) b.val-wo-icon {
     padding-left: 1.5rem;
 }
@@ -337,10 +357,14 @@ import url(../../../../../../../template/css/forms.css);
     content: "\f00d";    
     position:absolute;    
     padding:0 0.5em;
-    margin-left: 0.5em;
+    margin-left: 0.125em;
     font-size:0.7em;
     font-weight:bold;
 }
+.bx-dir-rtl .bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) b:after {
+    margin-left: 0;
+    margin-right: 0.125em;
+}
 .bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels).bx-form-input-disabled b {
     cursor: default;
 }
@@ -362,9 +386,12 @@ import url(../../../../../../../template/css/forms.css);
 
     margin-right: 0.5rem;
 }
-.sys-labels .bx-form-input-text.bx-form-input-autotoken b:first-child {
-    margin-left: 2px !important;
+.bx-dir-rtl .bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) .bx-account-unit-wo-info,
+.bx-dir-rtl .bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) .bx-base-pofile-unit-wo-info {
+    margin-left: 0.5rem;
+    margin-right: 0;
 }
+
 .sys-labels .bx-form-input-text.bx-form-input-autotoken.bx-form-input-disabled b {
     height: 2rem;
     line-height: 2rem;

modules/boonex/notifications/template/event.html

@@ -3,12 +3,12 @@
         <div class="__style_prefix__-event-gap p-4">
             <div class="__style_prefix__-event-cnt relative flex items-center">
                 <div class="__style_prefix__-owner-avatar bx-def-thumb-size">__author_unit__</div>
-                <div class="__style_prefix__-body bx-def-thumb-size-min-height flex flex-col ml-4">
+                <div class="__style_prefix__-body bx-def-thumb-size-min-height flex flex-col ltr:ml-4 rtl:mr-4">
                     <div class="__style_prefix__-content">__content__</div>
                     <div class="__style_prefix__-date">__date__</div>
                 </div>
                 <bx_if:show_clicked_indicator>
-                    <div class="absolute h-2 w-2 right-0 bg-blue-500 rounded-full"></div>
+                    <div class="absolute h-2 w-2 ltr:right-0 rtl:left-0 bg-blue-500 rounded-full"></div>
                 </bx_if:show_clicked_indicator>
             </div>
         </div>

template/_page_toolbar.html

@@ -4,7 +4,7 @@
         <div class="bx-toolbar-content-wrapper">
             <div id="bx-toolbar-content" class="bx-toolbar-content relative flex items-center justify-start h-16">
                 <!-- Mobile: Hamburger -->
-                <div class="bx-toolbar-item bx-ti-hamburger flex-none items-center lg:hidden mr-4">
+                <div class="bx-toolbar-item bx-ti-hamburger flex-none items-center lg:hidden ltr:mr-4 rtl:ml-4">
                     <bx_menu:sys_toolbar_site />
                 </div>
 

template/_page_toolbar_search.html

@@ -1,4 +1,4 @@
-<div class="bx-ti-search-box flex-auto flex items-start md:min-w-88 mr-2 bg-white/95 dark:bg-gray-800/95 rounded-md shadow-md hidden">
+<div class="bx-ti-search-box flex-auto flex items-start md:min-w-88 ltr:mr-2 rtl:ml-2 bg-white/95 dark:bg-gray-800/95 rounded-md shadow-md hidden">
     <div class="relative w-full">__sys_site_search__</div>
 </div>
 <div class="bx-ti-search-button group relative inline-flex items-center mx-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full">

template/css/grid.css

@@ -111,6 +111,11 @@
     padding-right:5px;
     text-align:left;
 }
+.bx-dir-rtl .bx-grid-table th,
+.bx-dir-rtl .bx-grid-table td {
+    text-align:right;
+}
+
 .bx-grid-table th:first-child,
 .bx-grid-table td:first-child {
     padding-left:10px;
@@ -140,7 +145,6 @@ div.bx-grid-drag-handle {
 
 
 .bx-grid-gragging-row {    
-
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -160,10 +164,12 @@ div.bx-grid-drag-handle {
     padding-left:0;
 }
 
-
 td:last-child .bx-grid-cell-single-actions-wrapper {
     float:right;
 }
+.bx-dir-rtl td:last-child .bx-grid-cell-single-actions-wrapper {
+    float:left;
+}
 
 .bx-grid-table-wrapper td .bx-def-unit {
     margin-bottom:0;

template/css/label.css

@@ -20,7 +20,8 @@
     line-height: 1.625rem;
 }
 .sys-labels .bx-form-input-text.bx-form-input-autotoken b {
-    padding-left: 0.5rem;
+    margin: 0 0 0 0.125rem;
+    padding: 0 0.5rem;
     
     border-radius: 1.25rem;
 
@@ -28,6 +29,9 @@
     white-space: nowrap;
     cursor: pointer;
 }
+.bx-dir-rtl .sys-labels .bx-form-input-text.bx-form-input-autotoken b {
+    margin: 0 0.125rem 0 0;
+}
 
 .sys-labels .bx-form-input-text.bx-form-input-autotoken b:after {
     top: -1px;
@@ -35,17 +39,17 @@
     margin: 0;
     padding: 0 0.5rem;
 }
-.sys-labels .bx-form-input-text.bx-form-input-autotoken.bx-form-input-disabled b {
-    padding-left: 0.5rem;
+.sys-labels .bx-form-input-text.bx-form-input-autotoken b.val-placeholder {
+    padding-left: 1.5rem;
     padding-right: 0.5rem;
     height: 2rem;
-    line-height: 2rem;
-    margin-right: 0.125rem;
+    line-height: 2rem;    
 }
-.sys-labels .bx-form-input-text.bx-form-input-autotoken b.val-placeholder{
-    padding-left: 1.5rem !important;
+.bx-dir-rtl .sys-labels .bx-form-input-text.bx-form-input-autotoken b.val-placeholder {
+    padding-left: 0.5rem;
+    padding-right: 1.5rem;
 }
-.sys-labels .bx-form-input-text.bx-form-input-autotoken b.val-placeholder::before{
+.sys-labels .bx-form-input-text.bx-form-input-autotoken b.val-placeholder::before {
     font-family: 'sys-user', 'sys-user-fal';
     content: "\f067";
     position: absolute;
@@ -53,7 +57,10 @@
     font-size: 0.7em;
     font-weight: bold;
 }
-
+.bx-dir-rtl .sys-labels .bx-form-input-text.bx-form-input-autotoken b.val-placeholder::before {
+    margin-left: 0;
+    margin-right: -1.5em;
+}
 
 .sys-labels .bx-form-input-text.bx-form-input-autotoken input:not([type = 'hidden']) {
     width: auto !important;
@@ -144,7 +151,4 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-}
-.sys-labels .bx-form-input-text.bx-form-input-autotoken b:first-child{
-    margin-left: 0.125rem;
 }

template/css/tailwind.css

@@ -907,7 +907,7 @@
         @apply bg-white dark:bg-gray-800;
     }
     .bx-switcher-cont.on button span {
-        @apply bg-green-500 dark:bg-green-500 translate-x-5;
+        @apply bg-green-500 dark:bg-green-500 ltr:translate-x-5 rtl:-translate-x-5;
     }
     .bx-switcher-cont.off button {
         @apply bg-gray-200 dark:bg-gray-900;

template/scripts/BxBaseFormView.php

@@ -1056,7 +1056,7 @@ BLAH;
         $sClassOneLineCaption = '';
         $sClassOneLineValue = '';
         if ($isOneLine) {
-            $sClassOneLineCaption = ' bx-form-caption-oneline bx-form-caption-oneline-' . $aInput['type'] . ' bx-def-margin-left';
+            $sClassOneLineCaption = ' bx-form-caption-oneline bx-form-caption-oneline-' . $aInput['type'] . ' ltr:ml-4 rtl:mr-4';
             $sClassOneLineValue = ' bx-form-value-oneline bx-form-value-oneline-' . $aInput['type'];
             if (!isset($aInput['attrs']) || !is_array($aInput['attrs']))
                 $aInput['attrs'] = [];

template/scripts/BxBaseFunctions.php

@@ -351,7 +351,7 @@ class BxBaseFunctions extends BxDolFactory implements iBxDolSingleton
         // add button width popup
         $sId = 'bx-str-limit-' . rand(1, PHP_INT_MAX);
         $sPopup = '<span class="bx-str-limit" onclick="$(\'#' . $sId . '\').dolPopup({pointer:{el:$(this), offset:\'10 1\'}})"/><i class="sys-icon ellipsis-h"></i></span>';
-        $sPopup .= '<div id="' . $sId . '" style="display:none;">' . BxTemplFunctions::getInstance()->transBox('', '<div class="bx-def-padding bx-def-color-bg-block">'.$sString.'</div>') . '</div>';
+        $sPopup .= '<div id="' . $sId . '" style="display:none;">' . BxTemplFunctions::getInstance()->transBox('', '<div class="bx-def-padding">'.$sString.'</div>') . '</div>';
 
         return $bReturnString ? $sResult . $sPopup : array($sResult, $sPopup);
     }