www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/layout_builder/css/layout-builder.css

   1 .new-section {
   2   background-color: #f7f7f7;
   3   width: 100%;
   4   outline: 2px dashed #979797;
   5   padding: 1.5em 0;
   6   text-align: center;
   7   margin-bottom: 1.5em;
   8   transition: visually-hidden 2s ease-out, height 2s ease-in;
   9 }
  10
  11 .new-section__link,
  12 .new-block__link {
  13   color: #787878;
  14   border-bottom: none;
  15   padding-left: 24px;
  16   background: url(../../../misc/icons/787878/plus.svg) transparent top left / 16px 16px no-repeat;
  17 }
  18
  19 .new-section__link:hover,
  20 .new-section__link:active,
  21 .new-section__link:focus,
  22 .new-block__link:hover,
  23 .new-block__link:active,
  24 .new-block__link:focus {
  25   border-bottom-style: none;
  26   color: #000;
  27 }
  28
  29 .layout-section {
  30   margin-bottom: 1.5em;
  31 }
  32
  33 .layout-section .ui-sortable-helper {
  34   background-color: #fff;
  35   outline: 2px solid #f7f7f7;
  36 }
  37
  38 .layout-section .ui-state-drop {
  39   background-color: #ffd;
  40   outline: 2px dashed #fedb60;
  41   margin: 20px;
  42   padding: 30px;
  43 }
  44
  45 .layout-section .layout-builder--layout__region {
  46   outline: 2px dashed #2f91da;
  47 }
  48
  49 .layout-section .layout-builder--layout__region .new-block {
  50   background-color: #eff6fc;
  51   padding: 1.5em 0;
  52   text-align: center;
  53 }
  54
  55 .layout-section .layout-builder--layout__region .block {
  56   padding: 1.5em;
  57 }
  58
  59 .layout-section .remove-section {
  60   position: relative;
  61   background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;
  62   border: 1px solid #ccc;
  63   box-sizing: border-box;
  64   font-size: 1rem;
  65   padding: 0;
  66   height: 26px;
  67   width: 26px;
  68   white-space: nowrap;
  69   text-indent: -9999px;
  70   display: inline-block;
  71   border-radius: 26px;
  72   margin-left: -10px;
  73 }
  74
  75 .layout-section .remove-section:hover {
  76   background-image: url(../../../misc/icons/787878/ex.svg);
  77 }
  78
  79 #drupal-off-canvas .layout-selection li {
  80   display: block;
  81   padding-bottom: 1em;
  82 }
  83
  84 #drupal-off-canvas .layout-selection li a {
  85   display: block;
  86   padding-top: 0.55em;
  87 }
  88
  89 #drupal-off-canvas .inline-block-create-button {
  90   display: block;
  91   padding: 24px;
  92   padding-left: 44px;
  93   font-size: 16px;
  94   color: #eee;
  95   background: url(../../../misc/icons/bebebe/plus.svg) transparent 16px no-repeat;
  96 }
  97
  98 #drupal-off-canvas .inline-block-create-button,
  99 #drupal-off-canvas .inline-block-list__item {
 100   margin: 0 -20px;
 101   background-color: #444;
 102 }
 103
 104 #drupal-off-canvas .inline-block-create-button:hover,
 105 #drupal-off-canvas .inline-block-list__item:hover {
 106   background-color: #333;
 107 }
 108
 109 #drupal-off-canvas .inline-block-list {
 110   margin-bottom: 15px;
 111 }
 112
 113 #drupal-off-canvas .inline-block-list__item {
 114   display: block;
 115   padding: 15px 0 15px 25px;
 116 }