perf(Alert): update to logical CSS properties

Endava · Jun 11, 2024 · f3c42e4 · f3c42e4
1 parent 1d837d5
commit f3c42e4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/packages/beeq/src/components/alert/bq-alert.tsx b/packages/beeq/src/components/alert/bq-alert.tsx
@@ -247,7 +247,7 @@ export class BqAlert {
           {/* CLOSE BUTTON */}
           {!this.disableClose && (
             <bq-button
-              class="bq-alert__close absolute right-5 focus-visible:focus"
+              class="bq-alert__close absolute end-5 focus-visible:focus"
               appearance="text"
               size="small"
               onClick={() => this.hide()}
@@ -259,7 +259,7 @@ export class BqAlert {
           {/* ICON */}
           <div
             class={{
-              [`bq-alert__icon--${this.type} mr-s flex text-left align-top`]: true,
+              [`bq-alert__icon--${this.type} flex text-left align-top [margin-inline-end:--bq-spacing-s]`]: true,
               '!hidden': this.hideIcon,
             }}
             part="icon-outline"
@@ -269,8 +269,8 @@ export class BqAlert {
             </slot>
           </div>
           {/* MAIN */}
-          <div class="flex flex-col items-start gap-[var(--bq-alert--content-footer-gap)]" part="main">
-            <div class="flex flex-col gap-[var(--bq-alert--title-body-gap)]" part="content">
+          <div class="flex flex-col items-start gap-[--bq-alert--content-footer-gap]" part="main">
+            <div class="flex flex-col gap-[--bq-alert--title-body-gap]" part="content">
               {/* TITLE */}
               <div
                 class={{

diff --git a/packages/beeq/src/components/alert/scss/bq-alert.scss b/packages/beeq/src/components/alert/scss/bq-alert.scss
@@ -13,15 +13,15 @@
 }
 
 :host(.is-sticky) {
-  @apply fixed inset-0 top-0 z-[var(--bq-alert--z-index)] w-full;
+  @apply fixed inset-0 z-[var(--bq-alert--z-index)] [inline-size:100%] [inset-block-start:0];
 
   .bq-alert {
     @apply items-center justify-center rounded-none;
   }
 }
 
 .bq-alert {
-  @apply relative flex min-w-[var(--bq-alert--min-width)] p-[var(--bq-alert--padding)] transition-all;
+  @apply relative flex transition-all [min-inline-size:--bq-alert--min-width] [padding-block:--bq-alert--padding] [padding-inline:--bq-alert--padding];
   @apply rounded-[var(--bq-alert--border-radius)] border-[length:--bq-alert--border-width];
 
   border-style: var(--bq-alert--border-style);