@42shadow42/react-editable-title/src/css/index.module.css

An editable title implementation for the react.

.custom-title-input {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
  display: inline-block;
  border-radius: 1em;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
  padding: 0px 5px;
}

.title-wrapper {
  display: -webkit-inline-box;
  border-radius: 1em;
  padding: 0px 5px;
}

.control {
  font-size: inherit !important;
}

.control:not(.edit-control) {
  border-radius: unset !important;
}

.control:focus {
  outline-color: transparent;
}

.control-button {
  vertical-align: unset !important;  /* Bootstrap protection */
  border-color: transparent;
  display: inline-block;
  padding: 0em .2em !important;  /* Bootstrap protection */
  line-height: unset !important; /* Bootstrap protection */
}

.control-icon {
  font-size: .8em;
  vertical-align: unset;
}

.control.cancel-control {
  border-top-right-radius: inherit !important;  /* Bootstrap protection */
  border-bottom-right-radius: inherit !important;  /* Bootstrap protection */
}

.edit-control {
  vertical-align: middle;
  margin-left: .25em;
  border-radius: .5em; 
}

.display-text {
    padding: 2px;
    cursor: pointer;
}

.seamless-input {
  outline: none;
  border: 0;
  width: inherit;
}

.popover.editable-title {
  position: absolute;
  margin-top: -0.15em;
  display: block;
}