mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-14 14:08:18 +00:00
Adding kbd and draft command
This commit is contained in:
Ronan Berder
+214
-122
@@ -251,9 +251,6 @@
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
@@ -523,6 +520,9 @@
|
||||
.max-w-\[300px\] {
|
||||
max-width: 300px;
|
||||
}
|
||||
.max-w-\[450px\] {
|
||||
max-width: 450px;
|
||||
}
|
||||
.max-w-lg {
|
||||
max-width: var(--container-lg);
|
||||
}
|
||||
@@ -808,6 +808,9 @@
|
||||
.bg-sidebar-primary {
|
||||
background-color: var(--color-sidebar-primary);
|
||||
}
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
@@ -835,9 +838,6 @@
|
||||
.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);
|
||||
}
|
||||
@@ -853,9 +853,6 @@
|
||||
.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);
|
||||
}
|
||||
@@ -1017,6 +1014,10 @@
|
||||
.opacity-100 {
|
||||
opacity: 100%;
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
|
||||
}
|
||||
.shadow-none {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
@@ -2371,7 +2372,7 @@
|
||||
}
|
||||
}
|
||||
@layer components {
|
||||
.command {
|
||||
.command-dialog {
|
||||
inset-block: calc(var(--spacing) * 0);
|
||||
opacity: 0%;
|
||||
transition-property: all;
|
||||
@@ -2444,141 +2445,226 @@
|
||||
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 {
|
||||
> button, > form[method='dialog'] {
|
||||
position: absolute;
|
||||
top: calc(var(--spacing) * 4);
|
||||
right: calc(var(--spacing) * 4);
|
||||
}
|
||||
> button, > form[method='dialog'] > button {
|
||||
border-radius: var(--radius-xs);
|
||||
opacity: 70%;
|
||||
--tw-ring-offset-color: var(--color-background);
|
||||
transition-property: opacity;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
&:focus {
|
||||
--tw-ring-color: var(--color-ring);
|
||||
}
|
||||
&:focus {
|
||||
--tw-ring-offset-width: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
}
|
||||
&:focus {
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
@media (forced-colors: active) {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
&[data-state="open"] {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
&[data-state="open"] {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
& svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
& svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
& svg:not([class*='size-']) {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.command {
|
||||
> header input {
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
[role='listbox'] {
|
||||
max-height: 300px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: calc(var(--spacing) * 1);
|
||||
padding-inline: calc(var(--spacing) * 2);
|
||||
[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;
|
||||
}
|
||||
padding-block: calc(var(--spacing) * 3);
|
||||
& 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);
|
||||
width: calc(var(--spacing) * 5);
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
}
|
||||
[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']))) {
|
||||
}
|
||||
}
|
||||
}
|
||||
.command {
|
||||
> 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;
|
||||
}
|
||||
[role='separator'] {
|
||||
margin-inline: calc(var(--spacing) * -1);
|
||||
border-color: var(--color-border);
|
||||
& svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
&: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));
|
||||
& svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
&[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
|
||||
--tw-content: attr(data-empty);
|
||||
content: var(--tw-content);
|
||||
& svg:not([class*='size-']) {
|
||||
width: calc(var(--spacing) * 4);
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
&:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
|
||||
--tw-content: 'No results found';
|
||||
content: var(--tw-content);
|
||||
& svg:not([class*='text-']) {
|
||||
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);
|
||||
margin-block: 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'] {
|
||||
@@ -2593,6 +2679,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&:has(> header input:not(:placeholder-shown)) [role='separator'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer components {
|
||||
@@ -3553,6 +3642,9 @@
|
||||
content: var(--tw-content);
|
||||
}
|
||||
}
|
||||
[data-popover]:has(> header input:not(:placeholder-shown)) [role='separator'] {
|
||||
display: none;
|
||||
}
|
||||
&:not([data-select-initialized]) [data-popover] [role='option'] {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
|
||||
Reference in New Issue
Block a user