@basis-ng/styles 0.0.1-alpha.191 → 0.0.1-alpha.193

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basis-ng/styles",
-  "version": "0.0.1-alpha.191",
+  "version": "0.0.1-alpha.193",
   "description": "CSS foundation for @basis-ng/primitives components",
   "main": "src/index.css",
   "exports": {
@@ -23,7 +23,6 @@
     "./search": "./src/components/search.component.css",
     "./select": "./src/components/select.css",
     "./select-option": "./src/components/select-option.css",
-    "./sheet": "./src/components/sheet.css",
     "./spinner": "./src/components/spinner.css",
     "./switch": "./src/components/switch.css",
     "./tabs": "./src/components/tabs.css",

package/src/components/drawer.css

@@ -1,34 +1,117 @@
 b-drawer {
-  @apply fixed bottom-0 left-0 right-0 mx-auto bg-background dark:bg-background-dark rounded-t-lg border border-secondary dark:border-secondary-dark border-b-0 flex flex-col z-[999] will-change-transform shadow-2xl touch-none select-none pt-10 box-border overflow-hidden h-1/2;
-  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-  transform: translateY(100%);
+  @apply fixed z-999 flex box-border overflow-hidden rounded-2xl bg-background text-font shadow-lg inset-ring-1 inset-ring-ring will-change-transform opacity-0 pointer-events-none dark:bg-background-dark dark:text-font-dark dark:inset-ring-ring-dark;
+  transition:
+    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
+    opacity 0.2s ease;
+
+  &.open,
+  &.dragging {
+    @apply opacity-100 pointer-events-auto;
+  }
+
+  &.bottom,
+  &.top {
+    @apply left-2 right-2 mx-auto max-h-[calc(100dvh-1rem)] min-h-0 h-1/2;
+  }
+
+  &.bottom {
+    @apply bottom-2;
+    transform: translateY(100%);
+  }
+
+  &.top {
+    @apply top-2;
+    transform: translateY(-100%);
+  }
+
+  &.left,
+  &.right {
+    @apply top-2 bottom-2 max-w-[calc(100vw-1rem)] w-[320px];
+  }
+
+  &.left {
+    @apply left-2;
+    transform: translateX(-100%);
+  }
+
+  &.right {
+    @apply right-2;
+    transform: translateX(100%);
+  }
 
   &.dragging {
     transition: none;
   }
 
   .drag-section {
-    @apply w-full h-10 flex items-center justify-center cursor-grab touch-none absolute top-0;
+    @apply absolute z-10 flex items-center justify-center touch-none;
 
     .drag-indicator {
-      @apply w-1/5 h-1 bg-secondary dark:bg-secondary-dark rounded;
+      @apply rounded-full bg-ring dark:bg-ring-dark;
     }
   }
 
   .drawer-content {
-    @apply flex-1 overflow-auto;
+    @apply flex-1 overflow-auto min-h-0;
   }
-}
 
-html:has(b-drawer.open) {
-  overflow: hidden;
-}
+  &.bottom {
+    .drag-section {
+      @apply top-0 left-0 right-0 h-10 cursor-ns-resize;
+    }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
+    .drag-indicator {
+      @apply h-1 w-1/5;
+    }
+
+    .drawer-content {
+      @apply pt-10;
+    }
   }
-  to {
-    opacity: 1;
+
+  &.top {
+    .drag-section {
+      @apply bottom-0 left-0 right-0 h-10 cursor-ns-resize;
+    }
+
+    .drag-indicator {
+      @apply h-1 w-1/5;
+    }
+
+    .drawer-content {
+      @apply pb-10;
+    }
+  }
+
+  &.left {
+    .drag-section {
+      @apply top-0 right-0 bottom-0 w-5 cursor-ew-resize;
+    }
+
+    .drag-indicator {
+      @apply h-1/5 w-1;
+    }
+
+    .drawer-content {
+      @apply pr-5;
+    }
   }
+
+  &.right {
+    .drag-section {
+      @apply top-0 bottom-0 left-0 w-5 cursor-ew-resize;
+    }
+
+    .drag-indicator {
+      @apply h-1/5 w-1;
+    }
+
+    .drawer-content {
+      @apply pl-5;
+    }
+  }
+}
+
+html:has(b-drawer.open) {
+  overflow: hidden;
 }

package/src/components/tabs.css

@@ -20,7 +20,7 @@ b-tabs {
     /* Hover state (not selected) */
     &:hover:not([aria-selected='true']) {
       @apply bg-secondary/50 text-neutral-700 border-ring/80;
-      @apply dark:bg-white/[0.03] dark:text-neutral-200 dark:border-white/10;
+      @apply dark:bg-white/3 dark:text-neutral-200 dark:border-white/10;
     }
 
     /* Selected state */

package/src/index.css

@@ -65,7 +65,6 @@
 @import './components/command.css';
 @import './components/command-options.css';
 @import './components/option.css';
-@import './components/sheet.css';
 @import './components/spinner.css';
 @import './components/switch.css';
 @import './components/tabs.css';

package/src/components/sheet.css

@@ -1,34 +0,0 @@
-b-sheet {
-  @apply fixed top-0 h-screen z-50 shadow-md opacity-0 w-[300px] p-5 pt-10 bg-background dark:bg-background-dark box-border;
-  transition:
-    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
-    opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1);
-
-  &.right {
-    @apply right-0 border-l border-secondary dark:border-secondary-dark;
-    transform: translateX(100%);
-
-    &.open {
-      @apply opacity-100;
-      transform: translateX(0);
-    }
-  }
-
-  &.left {
-    @apply left-0 border-r border-secondary dark:border-secondary-dark;
-    transform: translateX(-100%);
-
-    &.open {
-      @apply opacity-100;
-      transform: translateX(0);
-    }
-  }
-
-  .close-button {
-    @apply absolute top-0 right-0 w-10 h-10 cursor-pointer flex items-center justify-center;
-  }
-}
-
-html:has(b-sheet.open) {
-  overflow: hidden;
-}