fix(layout): avoid shared CSS classes between layouts with scoped (em…

…pathyco#1605)
diegopf · Aug 30, 2024 · b3cc3f5 · b3cc3f5
1 parent fe6fffb
commit b3cc3f5
Show file tree

Hide file tree

Showing 13 changed files with 398 additions and 428 deletions.
diff --git a/packages/x-components/src/components/animations/cross-fade.vue b/packages/x-components/src/components/animations/cross-fade.vue
@@ -41,7 +41,7 @@
 
   .x-cross-fade--leave-to,
   .x-cross-fade--enter-from {
-    opacity: 0;
+    opacity: 0 !important;
   }
 </style>
 

diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -107,7 +107,8 @@
       return {
         name,
         onEnter,
-        onAfterEnter
+        onAfterEnter,
+        transitionDurationInMs: `${transitionDuration}ms`
       };
     }
   });
@@ -117,12 +118,12 @@
   /* 1. Declare transitions */
   .x-staggered-fade-and-slide-enter-active,
   .x-staggered-fade-and-slide-leave-active {
-    transition: 250ms ease-out;
+    transition: v-bind(transitionDurationInMs) ease-out;
     transition-property: opacity, transform;
   }
 
   .x-staggered-fade-and-slide-move {
-    transition: transform 250ms ease-out;
+    transition: transform v-bind(transitionDurationInMs) ease-out;
   }
 
   /* 2. Declare enter, from and leave to state */

diff --git a/packages/x-components/src/components/auto-progress-bar.vue b/packages/x-components/src/components/auto-progress-bar.vue
@@ -54,7 +54,7 @@
   });
 </script>
 
-<style lang="css">
+<style lang="css" scoped>
   .x-progress-bar {
     display: inline-block;
     overflow: hidden;

diff --git a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
@@ -135,8 +135,8 @@
   });
 </script>
 
-<style lang="scss">
-  @import '../../design-system-deprecated/utilities/dev-mode';
+<style lang="css" scoped>
+  @import url('../../design-system-deprecated/utilities/dev-mode.css');
 
   .x-layout {
     /* custom properties */
@@ -171,114 +171,110 @@
       [max-width-end]
       var(--x-size-margin-layout)
       [page-end];
+  }
 
-    &__header {
-      /* layout */
-      position: sticky;
-      top: -0.5px;
-      z-index: 2;
-      grid-row: header;
-      grid-column: page;
-      max-height: var(--x-size-max-height-layout-header, auto);
-      padding: 0 var(--x-size-margin-layout);
-
-      /* color */
-      background: var(--x-color-background-layout-header, transparent);
-      border-color: var(--x-size-border-color-layout-header, transparent);
-
-      /* border */
-      border-width: var(--x-size-border-width-layout-header, 0);
-      border-style: solid;
-    }
-
-    &__sub-header {
-      /* layout */
-      grid-row: sub-header;
-      grid-column: page;
-      padding: 0 var(--x-size-margin-layout);
+  .x-layout__header {
+    /* layout */
+    position: sticky;
+    top: -0.5px;
+    z-index: 2;
+    grid-row: header;
+    grid-column: page;
+    max-height: var(--x-size-max-height-layout-header, auto);
+    padding: 0 var(--x-size-margin-layout);
+
+    /* color */
+    background: var(--x-color-background-layout-header, transparent);
+    border-color: var(--x-size-border-color-layout-header, transparent);
+
+    /* border */
+    border-width: var(--x-size-border-width-layout-header, 0);
+    border-style: solid;
+  }
 
-      /* color */
-      background: var(--x-color-background-layout-sub-header, transparent);
-      border-color: var(--x-size-border-color-layout-sub-header, transparent);
+  .x-layout__sub-header {
+    /* layout */
+    grid-row: sub-header;
+    grid-column: page;
+    padding: 0 var(--x-size-margin-layout);
 
-      /* border */
-      border-width: var(--x-size-border-width-layout-sub-header, 0);
-      border-style: solid;
-    }
+    /* color */
+    background: var(--x-color-background-layout-sub-header, transparent);
+    border-color: var(--x-size-border-color-layout-sub-header, transparent);
 
-    &__toolbar {
-      /* layout */
-      grid-row: toolbar;
-      grid-column: max-width;
-    }
-
-    &__main {
-      /* layout */
-      grid-row: main;
-      grid-column: max-width;
-    }
+    /* border */
+    border-width: var(--x-size-border-width-layout-sub-header, 0);
+    border-style: solid;
+  }
 
+  .x-layout__toolbar {
     /* layout */
-    :deep(.x-layout__aside.x-modal) {
-      z-index: 3;
-      flex-flow: row nowrap;
-    }
+    grid-row: toolbar;
+    grid-column: max-width;
+  }
 
+  .x-layout__main {
     /* layout */
-    :deep(.x-layout__aside--right.x-modal) {
-      justify-content: flex-end;
-    }
+    grid-row: main;
+    grid-column: max-width;
+  }
 
-    /* others */
-    :deep(.x-layout__aside) {
-      pointer-events: none;
+  /* layout */
+  .x-layout :deep(.x-layout__aside.x-modal) {
+    z-index: 3;
+    flex-flow: row nowrap;
+  }
 
-      > *:not(.slot-helper) {
-        pointer-events: all;
-      }
-    }
+  /* layout */
+  .x-layout :deep(.x-layout__aside--right.x-modal) {
+    justify-content: flex-end;
+  }
 
-    &__scroll-to-top {
-      position: fixed;
-      z-index: 1;
-      bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);
-      right: var(--x-size-margin-right-layout-scroll-to-top, 16px);
-    }
+  /* others */
+  .x-layout :deep(.x-layout__aside) {
+    pointer-events: none;
+  }
+  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {
+    pointer-events: all;
+  }
 
-    &__header-backdrop {
-      /* layout */
-      grid-row: page;
-      grid-column: page;
-      position: sticky;
-      top: -0.5px;
-      z-index: 1;
-      height: var(--x-size-height-layout-backdrop, 40vh);
-      width: 100%;
-      pointer-events: none;
-
-      /* color */
-      background-color: var(
-        --x-color-background-layout-header-backdrop,
-        var(--x-color-base-neutral-100, white)
-      );
-      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
-
-      /* transition */
-      opacity: 0;
-      transition: opacity 0.2s ease-out;
-
-      &--is-visible {
-        opacity: 1;
-      }
-    }
+  .x-layout__scroll-to-top {
+    position: fixed;
+    z-index: 1;
+    bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);
+    right: var(--x-size-margin-right-layout-scroll-to-top, 16px);
   }
 
-  :deep(.x-layout__aside) {
-    .x-modal__content {
-      background-color: transparent;
-      height: 100%;
-      width: var(--x-size-width-layout-aside, 300px);
-    }
+  .x-layout__header-backdrop {
+    /* layout */
+    grid-row: page;
+    grid-column: page;
+    position: sticky;
+    top: -0.5px;
+    z-index: 1;
+    height: var(--x-size-height-layout-backdrop, 40vh);
+    width: 100%;
+    pointer-events: none;
+
+    /* color */
+    background-color: var(
+      --x-color-background-layout-header-backdrop,
+      var(--x-color-base-neutral-100, white)
+    );
+    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
+
+    /* transition */
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+  }
+  .x-layout__header-backdrop--is-visible {
+    opacity: 1;
+  }
+
+  .x-layout :deep(.x-layout__aside .x-modal__content) {
+    background-color: transparent;
+    height: 100%;
+    width: var(--x-size-width-layout-aside, 300px);
   }
 </style>