Merge pull request #63 from Siumauricio/feat/kbd

feat(kbd): kbd component
Siumauricio · Jan 29, 2023 · 7a7c0a5 · 7a7c0a5 · vercel · Jan 29, 2023
2 parents f052e84 + d25357f
commit 7a7c0a5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/components/components.css b/components/components.css
@@ -22,6 +22,7 @@
 @import "./informational/pagination.css";
 @import "./informational/skeleton.css";
 @import "./informational/stepper.css";
+@import "./informational/kbd.css";
 @import "./informational/progress.css";
 @import "./navigation/navbar.css";
 @import "./navigation/breadcrumb.css";

diff --git a/components/informational/kbd.css b/components/informational/kbd.css
@@ -0,0 +1,23 @@
+.kbd {
+  @apply inline-flex h-fit items-center justify-center whitespace-nowrap rounded-md border  border-gray-500 bg-gray-200 py-1.5 px-2.5 text-xs font-semibold shadow-[0px_1.5px_0px_rgba(0,0,0,0.1)];
+}
+
+.kbd-xs {
+  @apply py-0.5 px-1.5 text-xs;
+}
+
+.kbd-sm {
+  @apply py-1 px-2 text-xs;
+}
+
+.kbd-md {
+  @apply py-1.5 px-2.5 text-xs;
+}
+
+.kbd-lg {
+  @apply py-2 px-3 text-sm;
+}
+
+.kbd-xl {
+  @apply py-2 px-3.5 text-base;
+}