style(libs/ui): add c-backdrop component

sveltevietnam · Apr 10, 2024 · 59f78c7 · 59f78c7
1 parent 1f61fbc
commit 59f78c7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/.changeset/orange-beers-carry.md b/.changeset/orange-beers-carry.md
@@ -0,0 +1,5 @@
+---
+'@sveltevietnam/ui': minor
+---
+
+add `c-backdrop` CSS component
diff --git a/libs/ui/src/css/core/components/c-backdrop.css b/libs/ui/src/css/core/components/c-backdrop.css
@@ -0,0 +1,23 @@
+.c-backdrop {
+	position: relative;
+	backdrop-filter: blur(8px);
+
+	&::before {
+		content: '';
+
+		position: absolute;
+		inset: 0;
+
+		width: 100%;
+		height: 100%;
+
+		opacity: 0.9;
+		background: theme('colors.bg.100');
+	}
+
+	&:not(.c-backdrop--static) {
+		position: absolute;
+		z-index: -1;
+		inset: 0;
+	}
+}
diff --git a/libs/ui/src/css/core/components/index.js b/libs/ui/src/css/core/components/index.js
@@ -7,6 +7,7 @@ export default [
 	require('./c-splash.css'),
 	require('./__wireframe__.css'),
 	require('./c-avatar.css'),
+	require('./c-backdrop.css'),
 	require('./c-btn.css'),
 	require('./c-callout.css'),
 	require('./c-input.css'),