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

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@basis-ng/styles",
-  "version": "0.0.1-alpha.196",
+  "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

@@ -1,28 +1,12 @@
 b-drawer {
-  @apply fixed inset-0 z-999 pointer-events-none;
+  @apply fixed z-999 flex box-border overflow-hidden rounded-2xl bg-surface text-font shadow-lg inset-ring-1 inset-ring-ring will-change-transform opacity-0 pointer-events-none dark:bg-surface-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 pointer-events-auto;
-  }
-
-  .drawer-backdrop {
-    @apply absolute inset-0 bg-black;
-    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-  }
-
-  .drawer-panel {
-    @apply absolute flex box-border overflow-hidden rounded-2xl bg-surface text-font shadow-lg inset-ring-1 inset-ring-ring will-change-transform opacity-0 dark:bg-surface-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 {
-    .drawer-panel {
-      @apply opacity-100;
-    }
+    @apply opacity-100 pointer-events-auto;
   }
 
   .drag-section {
@@ -38,9 +22,9 @@ b-drawer {
   }
 
   &.bottom {
-    .drawer-panel {
-      @apply left-2 right-2 bottom-2 mx-auto max-h-[calc(100dvh-1rem)] min-h-0 h-1/2;
-    }
+    @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;
@@ -56,9 +40,9 @@ b-drawer {
   }
 
   &.top {
-    .drawer-panel {
-      @apply left-2 right-2 top-2 mx-auto max-h-[calc(100dvh-1rem)] min-h-0 h-1/2;
-    }
+    @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;
@@ -74,9 +58,9 @@ b-drawer {
   }
 
   &.left {
-    .drawer-panel {
-      @apply top-2 bottom-2 left-2 max-w-[calc(100vw-1rem)] w-[320px];
-    }
+    @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;
@@ -92,9 +76,9 @@ b-drawer {
   }
 
   &.right {
-    .drawer-panel {
-      @apply top-2 bottom-2 right-2 max-w-[calc(100vw-1rem)] w-[320px];
-    }
+    @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,10 +94,7 @@ b-drawer {
   }
 
   &.dragging {
-    .drawer-backdrop,
-    .drawer-panel {
-      transition: none;
-    }
+    transition: none;
   }
 }
 

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';