hlfcoding/hlf-dom-extensions

/*
HLF Editable Extension
======================
[Source](../js/jquery.hlf.editable.html) | [Tests](../../tests/css/editable.html)
*/

/*
skin
*/
.js-editable-inline {
  --edit-hover-bg-color: rgba(0, 0, 0, 0.1);
  --edit-inline-width: 10rem;
  --edit-stroke-color: #000;
}
.js-editable-inline .js-text,
.js-editable-inline .js-input input {
  border-color: transparent;
  background-color: transparent;
}
.js-editable-inline .js-text:focus,
.js-editable-inline .js-input input:focus {
  outline-style: none;
}
.js-editable-inline .js-text {
  cursor: text;
}
.js-editable-inline .js-text:hover {
  background-color: var(--edit-hover-bg-color);
}
.js-editable-inline .js-input input {
  border-bottom-color: var(--edit-stroke-color);
}

/*
layout
*/
.js-editable-inline .js-text,
.js-editable-inline .js-input input {
  border-width: 1px;
  margin: 0;
  padding: 0;
  width: var(--edit-inline-width);
}
.js-editable-inline .js-text {
  overflow-x: hidden;
  white-space: nowrap;
}
.js-editable-inline .js-input input {
  margin: -1px;
}