quickedit.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Override Quick Edit's entity toolbar style on the Drupal front-end.
 *
 * I.e. loaded by Quick Edit on the front-end, despite this being a back-end theme.
 */

/**
 * The Claro style guide prescribes softer corners.
 */

.quickedit-toolbar-container > .quickedit-toolbar-content,
.quickedit-toolbar-container > .quickedit-toolbar-lining {
  border-radius: 0.25rem;
}

.quickedit-button {
  border-radius: 0.1875rem;
}

/**
 * Entity toolbar's "save" button must be styled like a Claro primary button.
 */

.quickedit-button.action-save,
.quickedit-button.action-saving {
  margin-top: 2px;
  color: #fff;
  border-color: #1e5c90;
  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}

.quickedit-button.action-save:hover,
.quickedit-button.action-save:focus,
.quickedit-button.action-saving:hover,
.quickedit-button.action-saving:focus {
  color: #fff;
  border-color: #1e5c90;
  background-color: #2369a6;
  background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
}

.quickedit-button.action-save:hover,
.quickedit-button.action-save:focus,
.quickedit-button.action-saving:hover,
.quickedit-button.action-saving:focus {
  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
}

.quickedit-button.action-save:active,
.quickedit-button.action-saving:active {
  border-color: #144b78;
  background-image: linear-gradient(to bottom, #08639b, #0071b8);
  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
}

/**
 * The entity toolbar's "save" button's top margin shifts both buttons 2px down,
 * so we must compensate for that to achieve vertically centered positioning.
 */

.quickedit .icon-close:before {
  top: 0.5rem;
}