@esri/calcite-components/dist/collection/components/calcite-inline-editable/calcite-inline-editable.css

Web Components for Esri's Calcite Design System.

/* mixins & extensions */

@keyframes in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes in-down {
  0% {
    opacity: 0;
    transform: translate3D(0, -5px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3D(0, 0, 0);
  }
}

@keyframes in-up {
  0% {
    opacity: 0;
    transform: translate3D(0, 5px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3D(0, 0, 0);
  }
}

@keyframes in-scale {
  0% {
    opacity: 0;
    transform: scale3D(0.95, 0.95, 1);
  }

  100% {
    opacity: 1;
    transform: scale3D(1, 1, 1);
  }
}

/**
* Currently only used in Checkbox.
*/

:root {
  --calcite-popper-transition: 150ms ease-in-out;
}

:host([hidden]) {
  display: none;
}

:host([scale=s]) .calcite-inline-editable-controls-wrapper {
  height: 32px;
}

:host([scale=m]) .calcite-inline-editable-controls-wrapper {
  height: 44px;
}

:host([scale=l]) .calcite-inline-editable-controls-wrapper {
  height: 56px;
}

:host(:not([editing-enabled])) .calcite-inline-editable-wrapper:hover {
  background: var(--calcite-ui-foreground-2);
}

.calcite-inline-editable-wrapper {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  transition: 150ms ease-in-out;
  background: var(--calcite-ui-foreground-1);
}

.calcite-inline-editable-wrapper .calcite-inline-editable-input-wrapper {
  flex: 1;
}

.calcite-inline-editable-controls-wrapper {
  display: flex;
}

.calcite-inline-editable-cancel-editing-button-wrapper {
  border: 1px solid var(--calcite-ui-border-1);
  border-left: none;
  border-right: none;
}

:host([disabled]) .calcite-inline-editable-cancel-editing-button-wrapper {
  border-color: var(--calcite-ui-border-2);
}

:host::slotted(*) .calcite-input-element-wrapper textarea,
:host::slotted(*) .calcite-input-element-wrapper input {
  transition: 150ms ease-in-out;
}

:host(:not([editing-enabled]))::slotted(*) .calcite-input-element-wrapper {
  background: transparent;
}

:host(:not([editing-enabled]))::slotted(*) .sc-calcite-input {
  display: none;
}

:host(:not([editing-enabled]))::slotted(*) .calcite-input-element-wrapper {
  display: flex;
  cursor: pointer;
}

:host(:not([editing-enabled]))::slotted(*) .calcite-input-element-wrapper textarea,
:host(:not([editing-enabled]))::slotted(*) .calcite-input-element-wrapper input {
  border-color: transparent;
  padding-left: 0;
  cursor: pointer;
  display: flex;
}

:host(:not([editing-enabled])):hover::slotted(*) textarea,
:host(:not([editing-enabled])):hover::slotted(*) input {
  background: var(--calcite-ui-foreground-2);
}

:host([dir=rtl]):not([editing-enabled])::slotted(*) .calcite-input-element-wrapper textarea,
:host([dir=rtl]):not([editing-enabled])::slotted(*) .calcite-input-element-wrapper input {
  padding-right: 0;
  padding-left: unset;
}

[dir=rtl] :host:not([editing-enabled])::slotted(*) .calcite-input-element-wrapper textarea,
[dir=rtl] :host:not([editing-enabled])::slotted(*) .calcite-input-element-wrapper input {
  padding-right: 0;
  padding-left: unset;
}