@basis-ng/styles 0.0.1-alpha.195 → 0.0.1-alpha.197

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@basis-ng/styles",
-  "version": "0.0.1-alpha.195",
+  "version": "0.0.1-alpha.197",
   "description": "CSS foundation for @basis-ng/primitives components",
   "main": "src/index.css",
   "exports": {
     ".": "./src/index.css",
     "./alert": "./src/components/alert.css",
+    "./backdrop": "./src/components/backdrop.css",
     "./badge": "./src/components/badge.css",
     "./drawer": "./src/components/drawer.css",
     "./button-group": "./src/components/button-group.css",
@@ -23,6 +24,7 @@
     "./search": "./src/components/search.component.css",
     "./select": "./src/components/select.css",
     "./select-option": "./src/components/select-option.css",
+    "./skeleton": "./src/components/skeleton.css",
     "./spinner": "./src/components/spinner.css",
     "./switch": "./src/components/switch.css",
     "./tabs": "./src/components/tabs.css",

package/src/components/backdrop.css

@@ -0,0 +1,17 @@
+b-backdrop {
+  @apply fixed inset-0 pointer-events-none z-50;
+
+  &.b-open {
+    @apply pointer-events-auto;
+  }
+
+  .b-backdrop-layer {
+    @apply absolute inset-0 bg-black;
+  }
+
+  &.b-animated {
+    .b-backdrop-layer {
+      transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+    }
+  }
+}

package/src/components/drawer.css

@@ -9,40 +9,6 @@ b-drawer {
     @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 absolute z-10 flex items-center justify-center touch-none;
 
@@ -56,6 +22,10 @@ b-drawer {
   }
 
   &.bottom {
+    @apply left-2 right-2 bottom-2 mx-auto min-h-0;
+    max-height: var(--b-drawer-max-height, calc(100dvh - 1rem));
+    height: var(--b-drawer-height, 50%);
+
     .drag-section {
       @apply top-0 left-0 right-0 h-10 cursor-ns-resize;
     }
@@ -70,6 +40,10 @@ b-drawer {
   }
 
   &.top {
+    @apply left-2 right-2 top-2 mx-auto min-h-0;
+    max-height: var(--b-drawer-max-height, calc(100dvh - 1rem));
+    height: var(--b-drawer-height, 50%);
+
     .drag-section {
       @apply bottom-0 left-0 right-0 h-10 cursor-ns-resize;
     }
@@ -84,6 +58,10 @@ b-drawer {
   }
 
   &.left {
+    @apply top-2 bottom-2 left-2;
+    max-width: var(--b-drawer-max-width, calc(100vw - 1rem));
+    width: var(--b-drawer-width, 320px);
+
     .drag-section {
       @apply top-0 right-0 bottom-0 w-5 cursor-ew-resize;
     }
@@ -98,6 +76,10 @@ b-drawer {
   }
 
   &.right {
+    @apply top-2 bottom-2 right-2;
+    max-width: var(--b-drawer-max-width, calc(100vw - 1rem));
+    width: var(--b-drawer-width, 320px);
+
     .drag-section {
       @apply top-0 bottom-0 left-0 w-5 cursor-ew-resize;
     }
@@ -110,8 +92,13 @@ b-drawer {
       @apply pl-5;
     }
   }
+
+  &.dragging {
+    transition: none;
+  }
 }
 
-html:has(b-drawer.open) {
+html:has(b-drawer.open),
+html:has(b-drawer.dragging) {
   overflow: hidden;
 }

package/src/components/skeleton.css

@@ -0,0 +1,37 @@
+.b-skeleton {
+  @apply relative overflow-hidden rounded-[inherit];
+
+  &::after {
+    content: '';
+    @apply pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200;
+    background: color-mix(in srgb, var(--color-ring, #e0e0e0) 22%, transparent);
+  }
+
+  &.b-loading {
+    @apply pointer-events-none select-none;
+    color: transparent !important;
+
+    * {
+      visibility: hidden !important;
+    }
+
+    &::after {
+      @apply opacity-100;
+      animation: b-skeleton-pulse 1.4s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes b-skeleton-pulse {
+  0% {
+    opacity: 0.42;
+  }
+
+  50% {
+    opacity: 0.78;
+  }
+
+  100% {
+    opacity: 0.42;
+  }
+}

package/src/index.css

@@ -51,6 +51,7 @@
 }
 
 @import './components/alert.css';
+@import './components/backdrop.css';
 @import './components/badge.css';
 @import './components/drawer.css';
 @import './components/button-group.css';
@@ -64,6 +65,7 @@
 @import './components/row-item.css';
 @import './components/row.css';
 @import './components/select.css';
+@import './components/skeleton.css';
 @import './components/command.css';
 @import './components/command-options.css';
 @import './components/option.css';