hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-13 13:48:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added kbd and command

Browse Source
This commit is contained in:
Ronan Berder
2025-10-30 10:03:34 +07:00
parent d644cb9efd
commit 045d13cd49
10 changed files with 1208 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/assets/styles.css
+270
View File
@@ -251,6 +251,9 @@
.invisible {
visibility: hidden;
}
.visible {
visibility: visible;
}
.sr-only {
position: absolute;
width: 1px;
@@ -268,6 +271,9 @@
.relative {
position: relative;
}
.static {
position: static;
}
.sticky {
position: sticky;
}
@@ -686,6 +692,9 @@
.gap-x-2 {
column-gap: calc(var(--spacing) * 2);
}
.gap-x-4 {
column-gap: calc(var(--spacing) * 4);
}
.gap-x-10 {
column-gap: calc(var(--spacing) * 10);
}
@@ -826,6 +835,9 @@
.px-1 {
padding-inline: calc(var(--spacing) * 1);
}
.px-1\.5 {
padding-inline: calc(var(--spacing) * 1.5);
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
@@ -841,6 +853,9 @@
.px-\[0\.3rem\] {
padding-inline: 0.3rem;
}
.py-0\.5 {
padding-block: calc(var(--spacing) * 0.5);
}
.py-1\.5 {
padding-block: calc(var(--spacing) * 1.5);
}
@@ -859,6 +874,9 @@
.pt-2 {
padding-top: calc(var(--spacing) * 2);
}
.pr-2 {
padding-right: calc(var(--spacing) * 2);
}
.pb-4 {
padding-bottom: calc(var(--spacing) * 4);
}
@@ -2352,6 +2370,231 @@
display: none;
}
}
@layer components {
.command {
inset-block: calc(var(--spacing) * 0);
opacity: 0%;
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
transition-behavior: allow-discrete;
&:is([open],:popover-open) {
opacity: 100%;
&::backdrop {
opacity: 100%;
}
> article {
--tw-scale-x: 100%;
--tw-scale-y: 100%;
--tw-scale-z: 100%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
@starting-style {
opacity: 0%;
&::backdrop {
opacity: 0%;
}
> article {
--tw-scale-x: 95%;
--tw-scale-y: 95%;
--tw-scale-z: 95%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
}
&::backdrop {
background-color: color-mix(in srgb, #000 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
}
opacity: 0%;
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
transition-behavior: allow-discrete;
}
> article {
position: fixed;
top: 50%;
left: 50%;
z-index: 50;
display: flex;
max-height: min(640px, calc(100% - 2rem));
width: 100%;
max-width: calc(100% - 2rem);
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
flex-direction: column;
overflow: hidden;
border-radius: var(--radius-lg);
border-style: var(--tw-border-style);
border-width: 1px;
background-color: var(--color-background);
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@media (width >= 40rem) {
max-width: var(--container-lg);
}
--tw-scale-x: 95%;
--tw-scale-y: 95%;
--tw-scale-z: 95%;
scale: var(--tw-scale-x) var(--tw-scale-y);
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
> header {
display: flex;
align-items: center;
gap: calc(var(--spacing) * 2);
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
padding-inline: calc(var(--spacing) * 3);
svg {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
flex-shrink: 0;
opacity: 50%;
}
input {
display: flex;
height: calc(var(--spacing) * 10);
width: 100%;
border-radius: var(--radius-md);
background-color: transparent;
padding-block: calc(var(--spacing) * 3);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
&::placeholder {
color: var(--color-muted-foreground);
}
&:disabled {
cursor: not-allowed;
}
&:disabled {
opacity: 50%;
}
}
}
[role='listbox'] {
max-height: 300px;
overflow-x: hidden;
overflow-y: auto;
padding: calc(var(--spacing) * 1);
[role='option'] {
position: relative;
display: flex;
width: 100%;
cursor: default;
align-items: center;
gap: calc(var(--spacing) * 2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: var(--radius-sm);
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 1.5);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
-webkit-user-select: none;
user-select: none;
&:disabled {
pointer-events: none;
}
&:disabled {
opacity: 50%;
}
&[aria-disabled="true"] {
pointer-events: none;
}
&[aria-disabled="true"] {
opacity: 50%;
}
&[aria-hidden="true"] {
display: none;
}
& svg {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
& svg {
flex-shrink: 0;
}
& svg {
color: var(--color-muted-foreground);
}
&.active {
background-color: var(--color-accent);
color: var(--color-accent-foreground);
}
}
[role='heading'] {
display: flex;
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 1.5);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
color: var(--color-muted-foreground);
}
[role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
display: none;
}
[role='separator'] {
margin-inline: calc(var(--spacing) * -1);
border-color: var(--color-border);
}
&:not(:has([data-value]:not([aria-hidden='true'])))::before {
margin: calc(var(--spacing) * -1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-inline: calc(var(--spacing) * 3);
padding-block: calc(var(--spacing) * 6);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
&[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
--tw-content: attr(data-empty);
content: var(--tw-content);
}
&:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
--tw-content: 'No results found';
content: var(--tw-content);
}
}
}
&:not([data-command-initialized]) [role='option'] {
&:hover {
@media (hover: hover) {
background-color: var(--color-accent);
}
}
&:hover {
@media (hover: hover) {
color: var(--color-accent-foreground);
}
}
}
}
}
@layer components {
.dialog {
inset-block: calc(var(--spacing) * 0);
@@ -2736,6 +2979,33 @@
}
}
}
@layer components {
kbd {
pointer-events: none;
display: inline-flex;
height: calc(var(--spacing) * 5);
width: fit-content;
min-width: calc(var(--spacing) * 5);
align-items: center;
justify-content: center;
gap: calc(var(--spacing) * 1);
border-radius: var(--radius-sm);
background-color: var(--color-muted);
padding-inline: calc(var(--spacing) * 1);
font-family: var(--font-sans);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
color: var(--color-muted-foreground);
-webkit-user-select: none;
user-select: none;
& svg:not([class*='size-']) {
width: calc(var(--spacing) * 3);
height: calc(var(--spacing) * 3);
}
}
}
@layer components {
.form label, .label {
display: flex;