application.css in coveragebook_components-0.8.0.beta.1

- old
+ new
@@ -1,9 +1,109 @@
 @layer components {
-  [data-coco][data-component="app-application-layout"] {
-    @apply grid grid-rows-[min-content_1fr] h-screen w-screen overflow-hidden;
+  [data-coco][data-component="application-layout"] {
+    @apply grid overflow-hidden absolute inset-0 w-screen;
+    height: var(--app-height);
 
-    .app-main {
-      @apply overflow-auto;
+    grid-template-areas: "body";
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+
+    &.with-header {
+      grid-template-areas: "header" "body";
+      grid-template-rows: min-content 1fr;
+
+      &.with-banner {
+        grid-template-areas: "header" "body" "banner";
+        grid-template-rows: min-content 1fr min-content;
+
+        &.with-sidebar-nav {
+          grid-template-areas: "header" "body" "banner" "sidebar";
+          grid-template-rows: min-content 1fr min-content min-content;
+        }
+      }
+
+      &:not(.with-banner) {
+        &.with-sidebar-nav {
+          grid-template-areas: "header" "body" "sidebar";
+          grid-template-rows: min-content 1fr min-content;
+        }
+      }
+    }
+
+    &.with-sidebar-nav {
+      --snackbar-bottom-offset: theme(spacing.16);
+    }
+
+    &:not(.with-header).with-banner {
+      grid-template-areas: "body" "banner";
+      grid-template-rows: 1fr min-content;
+    }
+
+    .layout-banner {
+      @apply w-screen z-10;
+      grid-area: banner;
+      height: min-content;
+    }
+
+    .layout-header {
+      @apply w-screen z-10;
+      grid-area: header;
+      height: min-content;
+    }
+
+    .layout-body {
+      @apply relative z-0 h-full overflow-y-auto scroll-smooth;
+      grid-area: body;
+    }
+
+    .layout-sidebar-nav {
+      @apply scroll-smooth;
+      scrollbar-width: none;
+      grid-area: sidebar;
+      height: min-content;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    @media screen(sm) {
+      .layout-sidebar-nav {
+        @apply h-full overflow-auto;
+        width: min-content;
+
+        > * {
+          @apply h-full;
+        }
+      }
+
+      grid-template-areas: "body";
+      grid-template-rows: 1fr;
+
+      &.with-sidebar-nav {
+        --snackbar-bottom-offset: theme(spacing.10);
+      }
+
+      &.with-header {
+        &.with-banner {
+          grid-template-areas: "banner" "header" "body";
+          grid-template-rows: min-content min-content 1fr;
+          grid-template-columns: 1fr;
+
+          &.with-sidebar-nav {
+            grid-template-areas: "banner banner" "header header" "sidebar body";
+            grid-template-rows: min-content min-content 1fr;
+            grid-template-columns: min-content 1fr;
+          }
+        }
+
+        &:not(.with-banner) {
+          &.with-sidebar-nav {
+            grid-template-areas: "header header" "sidebar body";
+            grid-template-rows: min-content 1fr;
+            grid-template-columns: min-content 1fr;
+          }
+        }
+      }
     }
   }
 }