@kelvininc/ui-components/dist/collection/components/inline-editable-field/inline-editable-field.css

Kelvin UI Components

@charset "UTF-8";
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

.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.
  * @prop --inline-editable-field-background-color-hover: Background color of the editable field on hover.
  * @prop --inline-editable-field-outline-color-hover: Outline color of the editable field on hover.
  * @prop --inline-editable-field-outline-color-focus: Outline color of the editable field on focus.
  * @prop --inline-editable-field-placeholder-color: Text color used to render the placeholder when the field is empty.
  * @prop --inline-editable-field-min-width: Minimum width applied to the field in visualization mode. Unset by default — consumers opt in for layout stability.
  * @prop --inline-editable-field-editing-min-width: Minimum width applied while editing. Takes priority over `--inline-editable-field-min-width` in edit mode. Unset by default.
  */
  --margin-top-bottom: var(--spacing-xs);
  --margin-left-right: var(--spacing-md);
  --inline-editable-field-background-color-hover: var(--input-background-default);
  --inline-editable-field-outline-color-hover: var(--input-border-color-default);
  --inline-editable-field-outline-color-focus: var(--input-border-color-selected);
  --inline-editable-field-placeholder-color: var(--input-text-text-input-default);
  --inline-editable-field-min-width: unset;
  --inline-editable-field-editing-min-width: unset;
}
.inline-editable-field-container__hover .inline-editable-field-slot {
  border-radius: var(--radius-md);
  background: var(--inline-editable-field-background-color-hover);
  outline-color: var(--inline-editable-field-outline-color-hover);
}
.inline-editable-field-container:not(.inline-editable-field-container__editing) .inline-editable-field-slot[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--inline-editable-field-placeholder-color);
  pointer-events: none;
}
.inline-editable-field-container__editing .inline-editable-field-slot[contenteditable] {
  min-width: var(--inline-editable-field-editing-min-width);
}

.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);
  min-width: var(--inline-editable-field-min-width);
  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: var(--radius-md);
  background: var(--inline-editable-field-background-color-hover);
  outline-color: var(--inline-editable-field-outline-color-hover);
}
.inline-editable-field-slot[contenteditable]:focus {
  outline-color: var(--inline-editable-field-outline-color-focus);
  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(--spacing-xs);
  flex: 0;
  margin-left: calc(var(--margin-left-right) + var(--spacing-md));
}
.inline-editable-field-actions__focus {
  width: 64px;
  align-self: flex-end;
  margin-bottom: calc(var(--margin-top-bottom) * -1);
}