[5.3] Logical css joomla tabs (#44607)

* [5.3] Logical CSS properties

Use logical CSS properties to avoid having to set different LTR and RTL css

This is a redo of #36034 which could not be merged at the time as browsers didnt support logical css properties for floats. They do now https://caniuse.com/?search=float-inline

The css changed is for the highlighted areas of the screenshot. There is no visual change

As this is a scss change then you will need to either rebuild the css or test with a prebuilt package

Signed-off-by: BrianTeeman <[email protected]>

* position

Signed-off-by: BrianTeeman <[email protected]>

* stylelint

Signed-off-by: BrianTeeman <[email protected]>

---------

Signed-off-by: BrianTeeman <[email protected]>

Author: brianteeman

build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss

@@ -275,12 +275,8 @@ joomla-tab[view=accordion] {
     padding: 0 !important;
 
     @include media-breakpoint-down(lg) {
-      [dir=ltr] & .respTable {
-        text-align: right;
-      }
-
-      [dir=rtl] & .respTable {
-        text-align: left;
+      .respTable {
+        text-align: end;
       }
 
       .respTable, .respTable thead, .respTable tbody, .respTable tr, .respTable th, .respTable td {
@@ -289,26 +285,16 @@ joomla-tab[view=accordion] {
 
       .respTable thead {
         position: absolute;
-        top: -1111px;
-        left: -1111px;
+        inset-block-start: -1111px;
+        inset-inline-start: -1111px;
       }
 
-      /* stylelint-disable */
       .respTable td::before {
+        float: inline-start;
+        padding-inline-end: 2em;
         font-weight: $bold-weight;
         content: attr(data-label) ":";
-
-        [dir=ltr] & {
-          float: left;
-          padding: 0 2em 0 0;
-        }
-
-        [dir=rtl] & {
-          float: right;
-          padding: 0 0 0 2em;
-        }
       }
-      /* stylelint-enable */
 
       .respTable td:nth-child(1) {
         font-weight: $bold-weight;