@bcc-code/component-library-vue 0.8.6 → 0.8.7

package/dist/theme.css

@@ -1917,57 +1917,19 @@
 /* from ./BccAppNavigation/BccAppNavigation.css */
 @layer components {
 	.bcc-app-nav {
-		@apply pb-inset-bottom-2 absolute inset-x-0 bottom-0 z-20 flex w-full items-center justify-center overflow-visible;
+		@apply sticky inset-x-0 bottom-0 z-20 overflow-visible bg-elevation-surface-default shadow-md sm:rounded-t-xl;
 	}
 	.bcc-app-nav .bcc-app-nav-container {
-		@apply dark:border-default mx-auto flex items-center justify-center border border-white p-0.5;
-
-		border-radius: 20px;
-		background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(243, 244, 246, 0.4) 100%);
-		backdrop-filter: blur(12px) saturate(160%);
-		-webkit-backdrop-filter: blur(12px) saturate(160%);
-
-		max-width: min(96%, var(--container-lg));
-		box-shadow:
-            /* inner bevel (top-left highlight, bottom-right shade) */
-			inset 0 0 32px white,
-			inset 1px 0 4px -1px rgba(0, 0, 0, 0.3),
-			inset 1px -2px 0 -1px white,
-			inset -1px 2px 0 -1px white,
-			0px -1px 1px -2px rgba(16, 24, 40, 0.05),
-			0px 4px 6px -2px rgba(16, 24, 40, 0.05),
-			0px 12px 16px -4px rgba(16, 24, 40, 0.1);
-	}
-	.dark .bcc-app-nav {
-		@apply backdrop-blur-sm;
-		background: transparent;
-		box-shadow: none;
+		@apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
 	}
 
 	.bcc-app-nav .bcc-app-nav-item {
-		@apply col text-text-subtlest relative h-12 min-w-16 cursor-pointer rounded-xl border border-transparent px-2 opacity-90 transition-all select-none focus:outline-none;
+		@apply flex flex-col items-center justify-center relative h-12 flex-1 gap-1 ctx-gray-subtlest transition-colors focus:outline-none focus:ring-0 text-ctx;
+		@apply opacity-50;
 	}
 
 	.bcc-app-nav .bcc-app-nav-item--active {
-		@apply text-brand-default bg-dark-neutral-alpha-500-a border-white opacity-100;
-		box-shadow:
-            /* inner bevel (top-left highlight, bottom-right shade) */
-			inset 1px 0 4px -1px rgba(0, 100, 50, 0.3),
-			inset 1px 2px 0 -1px white,
-			inset -1px -2px 0 -1px white,
-			inset 0 0 1px 0 rgba(0, 100, 50, 0.1),
-			inset 0 -3px 2px 0 rgba(0, 100, 50, 0.1);
-	}
-
-	.dark .bcc-app-nav .bcc-app-nav-item--active {
-		@apply bg-neutral-alpha-500-a text-brand-bold border-transparent;
-		box-shadow:
-            /* inner bevel (top-left highlight, bottom-right shade) */
-			inset 1px 0 4px -1px var(--blue-500),
-			inset 1px 2px 0 -1px var(--blue-900),
-			inset -1px -2px 0 -1px var(--blue-900),
-			inset 0 0 1px 0 var(--blue-300),
-			inset 0 -3px 2px 0 var(--blue-300);
+		@apply text-selected opacity-100;
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bcc-code/component-library-vue",
-	"version": "0.8.6",
+	"version": "0.8.7",
 	"type": "module",
 	"description": "Extended Vue component library based on PrimeVue and BCC design tokens",
 	"repository": "https://github.com/bcc-code/bcc-design.git",