You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
7.9 KiB
255 lines
7.9 KiB
[data-editable] {
|
|
--_editable-gap: var(--editable-gap-md);
|
|
--_editable-control-height: var(--editable-control-height-md);
|
|
--_editable-control-px: var(--editable-control-px-md);
|
|
--_editable-font-size: var(--editable-font-size-md);
|
|
/* `--_editable-accent-*` is TSC-emitted from `lib/recipes/base.ts > editable._accent-*`. */
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--_editable-gap);
|
|
max-inline-size: 100%;
|
|
min-inline-size: 0;
|
|
font-family: var(--editable-font-family);
|
|
font-size: var(--_editable-font-size);
|
|
line-height: var(--editable-line-height);
|
|
color: var(--editable-color);
|
|
}
|
|
|
|
[data-editable][data-editing] {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
[data-editable][data-size='xs'] {
|
|
--_editable-gap: var(--editable-gap-xs);
|
|
--_editable-control-height: var(--editable-control-height-xs);
|
|
--_editable-control-px: var(--editable-control-px-xs);
|
|
--_editable-font-size: var(--editable-font-size-xs);
|
|
}
|
|
|
|
[data-editable][data-size='sm'] {
|
|
--_editable-gap: var(--editable-gap-sm);
|
|
--_editable-control-height: var(--editable-control-height-sm);
|
|
--_editable-control-px: var(--editable-control-px-sm);
|
|
--_editable-font-size: var(--editable-font-size-sm);
|
|
}
|
|
|
|
[data-editable][data-size='lg'] {
|
|
--_editable-gap: var(--editable-gap-lg);
|
|
--_editable-control-height: var(--editable-control-height-lg);
|
|
--_editable-control-px: var(--editable-control-px-lg);
|
|
--_editable-font-size: var(--editable-font-size-lg);
|
|
}
|
|
|
|
[data-editable][data-size='xl'] {
|
|
--_editable-gap: var(--editable-gap-xl);
|
|
--_editable-control-height: var(--editable-control-height-xl);
|
|
--_editable-control-px: var(--editable-control-px-xl);
|
|
--_editable-font-size: var(--editable-font-size-xl);
|
|
}
|
|
|
|
[data-editable-area] {
|
|
display: grid;
|
|
align-items: center;
|
|
min-inline-size: var(--editable-area-min-inline-size);
|
|
max-inline-size: 100%;
|
|
}
|
|
|
|
[data-editable-control] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--editable-trigger-gap);
|
|
}
|
|
|
|
[data-editable-preview],
|
|
[data-editable-input] {
|
|
grid-area: 1 / 1;
|
|
box-sizing: border-box;
|
|
min-inline-size: 0;
|
|
min-block-size: var(--_editable-control-height);
|
|
padding-inline: var(--_editable-control-px);
|
|
border: var(--editable-control-border-width) solid transparent;
|
|
border-radius: var(--editable-control-radius);
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
outline: none;
|
|
transition:
|
|
background var(--editable-transition-duration) var(--editable-transition-ease),
|
|
border-color var(--editable-transition-duration) var(--editable-transition-ease),
|
|
box-shadow var(--editable-transition-duration) var(--editable-transition-ease);
|
|
}
|
|
|
|
[data-editable-preview] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
inline-size: fit-content;
|
|
max-inline-size: 100%;
|
|
cursor: text;
|
|
}
|
|
|
|
[data-editable-input] {
|
|
inline-size: 100%;
|
|
border-color: var(--_editable-accent-border);
|
|
background: var(--editable-control-bg);
|
|
box-shadow: var(--editable-control-shadow);
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
[data-editable][data-variant='outline'] [data-editable-input] {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-editable][data-variant='ghost'] [data-editable-preview] {
|
|
padding-inline: 0;
|
|
border-color: transparent;
|
|
}
|
|
|
|
[data-editable][data-variant='ghost'] [data-editable-input] {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-editable-preview]:hover:not([data-disabled]):not([data-readonly]) {
|
|
border-color: var(--editable-control-border-hover);
|
|
background: var(--editable-control-bg);
|
|
}
|
|
|
|
[data-editable][data-variant='ghost']
|
|
[data-editable-preview]:hover:not([data-disabled]):not([data-readonly]) {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-editable-input]:hover:not([data-disabled]):not([data-readonly]) {
|
|
border-color: var(--_editable-accent-border);
|
|
}
|
|
|
|
[data-editable-preview]:focus-visible,
|
|
[data-editable-input]:focus-visible {
|
|
border-color: var(--_editable-accent-border);
|
|
/* Focus ring as a flush outline (no offset → no gap) — survives forced-colors. */
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
/* Invalid state: mirror field.css risk-border treatment on Input + Control. */
|
|
[data-editable][data-invalid] [data-editable-input],
|
|
[data-editable-input][data-invalid] {
|
|
border-color: var(--editable-risk-border);
|
|
}
|
|
|
|
[data-editable][data-invalid] [data-editable-control],
|
|
[data-editable-control][data-invalid] {
|
|
border-color: var(--editable-risk-border);
|
|
}
|
|
|
|
[data-editable][data-invalid] [data-editable-preview]:focus-visible,
|
|
[data-editable][data-invalid] [data-editable-input]:focus-visible {
|
|
border-color: var(--editable-risk-border);
|
|
}
|
|
|
|
[data-editable-preview][data-placeholder-shown],
|
|
[data-editable-input]::placeholder {
|
|
color: var(--editable-placeholder-color);
|
|
}
|
|
|
|
[data-editable-edit-trigger],
|
|
[data-editable-submit-trigger],
|
|
[data-editable-cancel-trigger] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--editable-trigger-gap);
|
|
block-size: var(--_editable-control-height);
|
|
padding-inline: var(--editable-trigger-px);
|
|
border: var(--editable-trigger-border-width) solid var(--editable-trigger-border);
|
|
border-radius: var(--editable-trigger-radius);
|
|
background: var(--editable-trigger-bg);
|
|
color: var(--editable-trigger-color);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition:
|
|
background var(--editable-transition-duration) var(--editable-transition-ease),
|
|
border-color var(--editable-transition-duration) var(--editable-transition-ease),
|
|
color var(--editable-transition-duration) var(--editable-transition-ease),
|
|
box-shadow var(--editable-transition-duration) var(--editable-transition-ease);
|
|
}
|
|
|
|
[data-editable-submit-trigger] {
|
|
border-color: var(--_editable-accent-border);
|
|
background: var(--_editable-accent-solid);
|
|
color: var(--editable-submit-color);
|
|
}
|
|
|
|
[data-editable-edit-trigger]:hover:not(:disabled),
|
|
[data-editable-cancel-trigger]:hover:not(:disabled) {
|
|
border-color: var(--editable-trigger-border-hover);
|
|
background: var(--editable-trigger-bg-hover);
|
|
color: var(--editable-trigger-color-hover);
|
|
}
|
|
|
|
[data-editable-submit-trigger]:hover:not(:disabled) {
|
|
background: var(--_editable-accent-solid-hover);
|
|
border-color: var(--_editable-accent-solid-hover);
|
|
}
|
|
|
|
[data-editable-edit-trigger]:focus-visible,
|
|
[data-editable-submit-trigger]:focus-visible,
|
|
[data-editable-cancel-trigger]:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
[data-editable-preview][hidden],
|
|
[data-editable-input][hidden],
|
|
[data-editable-edit-trigger][hidden],
|
|
[data-editable-submit-trigger][hidden],
|
|
[data-editable-cancel-trigger][hidden] {
|
|
display: none;
|
|
}
|
|
|
|
[data-editable][data-editing] [data-editable-edit-trigger],
|
|
[data-editable]:not([data-editing]) [data-editable-submit-trigger],
|
|
[data-editable]:not([data-editing]) [data-editable-cancel-trigger] {
|
|
display: none;
|
|
}
|
|
|
|
[data-editable][data-disabled],
|
|
[data-editable-preview][data-disabled],
|
|
[data-editable-input][data-disabled],
|
|
[data-editable-control][data-disabled],
|
|
[data-editable-edit-trigger][data-disabled],
|
|
[data-editable-submit-trigger][data-disabled],
|
|
[data-editable-cancel-trigger][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--editable-disabled-opacity);
|
|
}
|
|
|
|
[data-editable][data-disabled] [data-editable-preview],
|
|
[data-editable][data-disabled] [data-editable-input],
|
|
[data-editable][data-disabled] [data-editable-edit-trigger],
|
|
[data-editable][data-disabled] [data-editable-submit-trigger],
|
|
[data-editable][data-disabled] [data-editable-cancel-trigger],
|
|
[data-editable-preview][data-disabled],
|
|
[data-editable-input][data-disabled],
|
|
[data-editable-edit-trigger][data-disabled],
|
|
[data-editable-submit-trigger][data-disabled],
|
|
[data-editable-cancel-trigger][data-disabled] {
|
|
color: var(--color-content-disabled, var(--color-content-muted));
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-editable-preview],
|
|
[data-editable-input],
|
|
[data-editable-edit-trigger],
|
|
[data-editable-submit-trigger],
|
|
[data-editable-cancel-trigger] {
|
|
transition: none;
|
|
}
|
|
}
|