aleph1.co.uk Git - yaffs-website/blob - web/core/themes/seven/css/components/quickedit.css

   1 /**
   2  * @file
   3  * Override Quick Edit's entity toolbar style on the Drupal front-end.
   4  *
   5  * I.e. loaded by Quick Edit on the front-end, despite this being a back-end theme.
   6  */
   7
   8 /**
   9  * The Seven style guide prescribes softer corners.
  10  */
  11 .quickedit-toolbar-container > .quickedit-toolbar-content,
  12 .quickedit-toolbar-container > .quickedit-toolbar-lining {
  13   border-radius: 4px;
  14 }
  15 .quickedit-button {
  16   border-radius: 3px;
  17 }
  18
  19 /**
  20  * Entity toolbar's "save" button must be styled like a Seven primary button.
  21  */
  22 .quickedit-button.action-save,
  23 .quickedit-button.action-saving {
  24   border-color: #1e5c90;
  25   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
  26   background-image:   linear-gradient(to bottom, #007bc6, #0071b8);
  27   color: #fff;
  28   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  29   font-weight: 700;
  30   -webkit-font-smoothing: antialiased;
  31   margin-top: 2px;
  32 }
  33 .quickedit-button.action-save:hover,
  34 .quickedit-button.action-save:focus,
  35 .quickedit-button.action-saving:hover,
  36 .quickedit-button.action-saving:focus {
  37   background-color: #2369a6;
  38   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
  39   background-image:   linear-gradient(to bottom, #0c97ed, #1f86c7);
  40   border-color: #1e5c90;
  41   color: #fff;
  42 }
  43 .quickedit-button.action-save:hover,
  44 .quickedit-button.action-save:focus,
  45 .quickedit-button.action-saving:hover,
  46 .quickedit-button.action-saving:focus {
  47   box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
  48 }
  49 .quickedit-button.action-save:active,
  50 .quickedit-button.action-saving:active {
  51   background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
  52   background-image:   linear-gradient(to bottom, #08639b, #0071b8);
  53   border-color: #144b78;
  54   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
  55 }
  56
  57 /**
  58  * The entity toolbar's "save" button's top margin shifts both buttons 2px down,
  59  * so we must compensate for that to achieve vertically centered positioning.
  60  */
  61 .quickedit .icon-close:before {
  62   top: 8px;
  63 }