@kelvininc/ui-components
Version:
Kelvin UI Components
66 lines (64 loc) • 1.79 kB
CSS
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to {
--rotation: 360deg;
}
}
.inline-editable-field-container {
display: inline-flex;
align-items: center;
width: 100%;
/**
* @prop --margin-top-bottom: Margin top and bottom of the editable container.
* @prop --margin-left-right: Margin left and right of the editable container.
*/
--margin-top-bottom: var(--kv-spacing, 4px);
--margin-left-right: var(--kv-spacing-2x, 8px);
}
.inline-editable-field-container__hover .inline-editable-field-slot {
border-radius: 4px;
background: var(--kv-neutral-8, #202020);
}
.inline-editable-field-slot[contenteditable] {
padding: var(--margin-top-bottom) var(--margin-left-right);
margin: calc(var(--margin-top-bottom) * -1) calc(var(--margin-left-right) * -1);
white-space: nowrap;
overflow: hidden;
outline: 1px solid transparent;
transition: all 0.25s ease-in-out;
}
.inline-editable-field-slot[contenteditable]:hover, .inline-editable-field-slot[contenteditable]:focus {
border-radius: 4px;
background: var(--kv-neutral-8, #202020);
}
.inline-editable-field-slot[contenteditable]:focus {
outline-color: var(--kv-neutral-2, #e5e5e5);
text-overflow: unset;
}
.inline-editable-field-slot br {
display: none;
}
.inline-editable-field-slot * {
display: inline;
white-space: nowrap;
}
.inline-editable-field-actions {
display: inline-flex;
gap: var(--kv-spacing, 4px);
flex: 0;
margin-left: calc(var(--margin-left-right) + var(--kv-spacing-2x, 8px));
}
.inline-editable-field-actions__focus {
width: 64px;
align-self: flex-end;
margin-bottom: calc(var(--margin-left-right) * -1);
}