refactor(Side menu): use CSS logical properties instead of physical v…

…alues (#1157)
Endava · Jul 23, 2024 · 398d92f · 398d92f
1 parent 0c032a0
commit 398d92f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/packages/beeq/src/components/side-menu/bq-side-menu.tsx b/packages/beeq/src/components/side-menu/bq-side-menu.tsx
@@ -166,7 +166,7 @@ export class BqSideMenu {
         </nav>
         {/* Footer */}
         <div
-          class="bq-side-menu--footer sticky bottom-0 mt-auto flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs"
+          class="bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]"
           part="footer"
         >
           <slot name="footer"></slot>

diff --git a/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss b/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss
@@ -13,14 +13,14 @@
 /* -------------------------------------------------------------------------- */
 
 .bq-side-menu {
-  @apply fixed left-0 top-0 flex h-dynamic-vh w-[--bq-side-menu--width] grow flex-col bg-[--bq-side-menu--bg-color];
+  @apply fixed flex h-dynamic-vh grow flex-col bg-[--bq-side-menu--bg-color] is-[--bq-side-menu--width] inset-bs-0 inset-is-0;
   @apply border-0 border-e-s border-solid border-[color:--bq-side-menu--border-color];
   @apply transition-[background-color,width] duration-150;
   @include hide-scrollbar;
 }
 
 .bq-side-menu.is-collapsed {
-  @apply w-[--bq-side-menu--width-collapse];
+  @apply is-[--bq-side-menu--width-collapse];
 }
 
 /* -------------------------------------------------------------------------- */

diff --git a/packages/beeq/src/global/styles/utils/_utility.scss b/packages/beeq/src/global/styles/utils/_utility.scss
@@ -1,6 +1,6 @@
 /*
  * This file contains utility classes that cannot be included within a component.
- * These classes must be used in the light DOM and not directly targeted by any rules in the stylesheet.
+ * These classes must be used in the light DOM and not directly targeted by any rules in the stylesheets.
  * In order to reduce the likelihood of conflicts, all classes within the file must begin with ".bq-".
  */
 
@@ -15,15 +15,15 @@
  */
 
 .bq-body--side-menu {
-  @apply relative transition-[padding-left] duration-300;
+  @apply relative transition-[padding-inline-start] duration-300;
 }
 
 .bq-body--side-menu__collapse {
-  @apply pl-[var(--bq-side-menu--width-collapse)] #{!important};
+  @apply ps-[var(--bq-side-menu--width-collapse)] #{!important};
 }
 
 .bq-body--side-menu__expand {
-  @apply pl-[var(--bq-side-menu--width)] #{!important};
+  @apply ps-[var(--bq-side-menu--width)] #{!important};
 }
 
 /**