layout-builder.css

Same filename in this branch
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/components/layout_builder/layout-builder.css
  2. 8.9.x core/themes/stable/css/layout_builder/layout-builder.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/layout_builder/layout-builder.css
  2. 9 core/themes/stable9/css/layout_builder/layout-builder.css
  3. 9 core/themes/stable/css/layout_builder/layout-builder.css
  4. 9 core/modules/layout_builder/css/layout-builder.css
  5. 10 core/profiles/demo_umami/themes/umami/css/components/layout_builder/layout-builder.css
  6. 10 core/themes/stable9/css/layout_builder/layout-builder.css
  7. 10 core/modules/layout_builder/css/layout-builder.css
  8. 11.x core/profiles/demo_umami/themes/umami/css/components/layout_builder/layout-builder.css
  9. 11.x core/themes/stable9/css/layout_builder/layout-builder.css
  10. 11.x core/modules/layout_builder/css/layout-builder.css
  11. 10 core/modules/navigation/css/base/layout-builder.css
  12. 11.x core/modules/navigation/css/base/layout-builder.css
.layout-builder {
  padding: 1.5em 1.5em 0.5em;
  border: 3px solid #2f91da;
  background-color: #fff;
}

.layout-builder__add-section {
  width: 100%;
  margin-bottom: 1.5em;
  padding: 1.5em 0;
  text-align: center;
  outline: 2px dashed #979797;
  background-color: #f7f7f7;
}

.layout-builder__link--add {
  padding-left: 1.3em; /* LTR */
  color: #686868;
  border-bottom: none;
  background: url(../../../misc/icons/787878/plus.svg) transparent center left / 1em no-repeat; /* LTR */
}

[dir="rtl"] .layout-builder__link--add {
  padding-right: 1.3em;
  padding-left: 0;
  background-position-x: right;
}

.layout-builder__link--add:hover,
.layout-builder__link--add:active,
.layout-builder__link--add:focus {
  color: #000;
  border-bottom-style: none;
}

.layout-builder__section {
  margin-bottom: 1.5em;
}

.layout-builder__section .ui-sortable-helper {
  outline: 2px solid #f7f7f7;
  background-color: #fff;
}

.layout-builder__section .ui-state-drop {
  margin: 20px;
  padding: 30px;
  outline: 2px dashed #fedb60;
  background-color: #ffd;
}

.layout-builder__region {
  outline: 2px dashed #2f91da;
}

.layout-builder__add-block {
  padding: 1.5em 0;
  text-align: center;
  background-color: #eff6fc;
}

.layout-builder__link--remove {
  position: relative;
  z-index: 2;
  display: inline-block;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin-right: 6px; /* LTR */
  margin-left: -10px; /* LTR */
  padding: 0;
  white-space: nowrap;
  text-indent: -9999px;
  border: 1px solid #ccc;
  border-radius: 26px;
  background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;
  font-size: 1rem;
}

[dir="rtl"] .layout-builder__link--remove {
  margin-right: -10px;
  margin-left: 6px;
}

.layout-builder__link--remove:hover {
  background-image: url(../../../misc/icons/787878/ex.svg);
}

.layout-builder-block {
  padding: 1.5em;
  cursor: move;
  background-color: #fff;
}

.layout-builder-block [tabindex="-1"] {
  pointer-events: none;
}

.layout-builder__message .messages {
  background-repeat: no-repeat;
}
.layout-builder__message--defaults .messages {
  background-image: url("../../../misc/icons/73b355/globe.svg");
}
.layout-builder__message--overrides .messages {
  background-image: url("../../../misc/icons/73b355/location.svg");
}

.layout-builder-block__content-preview-placeholder-label {
  margin: 0;
  text-align: center;
  font-size: 1.429em;
  line-height: 1.4;
}

.layout-builder--content-preview-disabled .layout-builder-block {
  margin: 0;
  border-bottom: 2px dashed #979797;
}

#drupal-off-canvas .layout-selection li {
  display: block;
  padding-bottom: 1em;
}

#drupal-off-canvas .layout-selection li a {
  display: block;
  padding-top: 0.55em;
}

#drupal-off-canvas .inline-block-create-button {
  display: block;
  padding: 24px;
  padding-left: 44px;
  color: #eee;
  border-bottom: 1px solid #333;
  background: url(../../../misc/icons/bebebe/plus.svg) transparent 16px no-repeat;
  font-size: 16px;
}

#drupal-off-canvas .inline-block-create-button,
#drupal-off-canvas .inline-block-list__item {
  margin: 0 -20px;
  background-color: #444;
}

#drupal-off-canvas .inline-block-create-button:hover,
#drupal-off-canvas .inline-block-list__item:hover {
  background-color: #333;
}

#drupal-off-canvas .inline-block-list {
  margin-bottom: 15px;
}

#drupal-off-canvas .inline-block-list__item {
  display: block;
  padding: 15px 0 15px 25px;
}

.layout-builder__add-section.is-layout-builder-highlighted {
  margin-bottom: calc(1.5em - 8px);
  outline: none;
}
.layout-builder__layout.is-layout-builder-highlighted,
.layout-builder-block.is-layout-builder-highlighted,
.layout-builder__add-block.is-layout-builder-highlighted {
  position: relative;
  z-index: 1;
  margin: -4px -2px;
}
.layout-builder__add-block.is-layout-builder-highlighted,
.layout-builder__add-section.is-layout-builder-highlighted,
.layout-builder__layout.is-layout-builder-highlighted:before,
.layout-builder__layout.is-layout-builder-highlighted,
.layout-builder-block.is-layout-builder-highlighted {
  border: 4px solid #000;
}

/* Highlight the active block in the Move Block dialog. */
#drupal-off-canvas .layout-builder-components-table__block-label--current {
  padding-left: 17px;
  border-left: solid 5px;
}

/**
 * @todo remove in https://www.drupal.org/project/drupal/issues/3042127
 *   This rule ensures the row weight dropdowns in the Move Block dialog
 *   maintain the background color of their container when they are hovered
 *   over or are inside the active row.
 */
#drupal-off-canvas .layout-builder-components-table__row .form-item {
  background-color: transparent;
}

.layout-builder__region-label,
.layout-builder__section-label {
  display: none;
}

.layout-builder--move-blocks-active .layout-builder__region-label {
  display: block;
}

.layout-builder--move-blocks-active .layout-builder__section-label {
  display: inline;
}

.layout__region-info {
  padding: 0.5em;
  text-align: center;
  border-bottom: 2px dashed #979797;
}

/**
 * Remove "You have unsaved changes" warning because Layout Builder always has
 * unsaved changes until "Save layout" is submitted.
 * @todo create issue for todo.
 */
.layout-builder-components-table .tabledrag-changed-warning {
  display: none !important;
}

File

core/modules/layout_builder/css/layout-builder.css

View source 
  1. .layout-builder {

  2.   padding: 1.5em 1.5em 0.5em;

  3.   border: 3px solid #2f91da;

  4.   background-color: #fff;

  5. }

  6. 

  7. .layout-builder__add-section {

  8.   width: 100%;

  9.   margin-bottom: 1.5em;

  10.   padding: 1.5em 0;

  11.   text-align: center;

  12.   outline: 2px dashed #979797;

  13.   background-color: #f7f7f7;

  14. }

  15. 

  16. .layout-builder__link--add {

  17.   padding-left: 1.3em; /* LTR */

  18.   color: #686868;

  19.   border-bottom: none;

  20.   background: url(../../../misc/icons/787878/plus.svg) transparent center left / 1em no-repeat; /* LTR */

  21. }

  22. 

  23. [dir="rtl"] .layout-builder__link--add {

  24.   padding-right: 1.3em;

  25.   padding-left: 0;

  26.   background-position-x: right;

  27. }

  28. 

  29. .layout-builder__link--add:hover,

  30. .layout-builder__link--add:active,

  31. .layout-builder__link--add:focus {

  32.   color: #000;

  33.   border-bottom-style: none;

  34. }

  35. 

  36. .layout-builder__section {

  37.   margin-bottom: 1.5em;

  38. }

  39. 

  40. .layout-builder__section .ui-sortable-helper {

  41.   outline: 2px solid #f7f7f7;

  42.   background-color: #fff;

  43. }

  44. 

  45. .layout-builder__section .ui-state-drop {

  46.   margin: 20px;

  47.   padding: 30px;

  48.   outline: 2px dashed #fedb60;

  49.   background-color: #ffd;

  50. }

  51. 

  52. .layout-builder__region {

  53.   outline: 2px dashed #2f91da;

  54. }

  55. 

  56. .layout-builder__add-block {

  57.   padding: 1.5em 0;

  58.   text-align: center;

  59.   background-color: #eff6fc;

  60. }

  61. 

  62. .layout-builder__link--remove {

  63.   position: relative;

  64.   z-index: 2;

  65.   display: inline-block;

  66.   box-sizing: border-box;

  67.   width: 26px;

  68.   height: 26px;

  69.   margin-right: 6px; /* LTR */

  70.   margin-left: -10px; /* LTR */

  71.   padding: 0;

  72.   white-space: nowrap;

  73.   text-indent: -9999px;

  74.   border: 1px solid #ccc;

  75.   border-radius: 26px;

  76.   background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;

  77.   font-size: 1rem;

  78. }

  79. 

  80. [dir="rtl"] .layout-builder__link--remove {

  81.   margin-right: -10px;

  82.   margin-left: 6px;

  83. }

  84. 

  85. .layout-builder__link--remove:hover {

  86.   background-image: url(../../../misc/icons/787878/ex.svg);

  87. }

  88. 

  89. .layout-builder-block {

  90.   padding: 1.5em;

  91.   cursor: move;

  92.   background-color: #fff;

  93. }

  94. 

  95. .layout-builder-block [tabindex="-1"] {

  96.   pointer-events: none;

  97. }

  98. 

  99. .layout-builder__message .messages {

  100.   background-repeat: no-repeat;

  101. }

  102. .layout-builder__message--defaults .messages {

  103.   background-image: url("../../../misc/icons/73b355/globe.svg");

  104. }

  105. .layout-builder__message--overrides .messages {

  106.   background-image: url("../../../misc/icons/73b355/location.svg");

  107. }

  108. 

  109. .layout-builder-block__content-preview-placeholder-label {

  110.   margin: 0;

  111.   text-align: center;

  112.   font-size: 1.429em;

  113.   line-height: 1.4;

  114. }

  115. 

  116. .layout-builder--content-preview-disabled .layout-builder-block {

  117.   margin: 0;

  118.   border-bottom: 2px dashed #979797;

  119. }

  120. 

  121. #drupal-off-canvas .layout-selection li {

  122.   display: block;

  123.   padding-bottom: 1em;

  124. }

  125. 

  126. #drupal-off-canvas .layout-selection li a {

  127.   display: block;

  128.   padding-top: 0.55em;

  129. }

  130. 

  131. #drupal-off-canvas .inline-block-create-button {

  132.   display: block;

  133.   padding: 24px;

  134.   padding-left: 44px;

  135.   color: #eee;

  136.   border-bottom: 1px solid #333;

  137.   background: url(../../../misc/icons/bebebe/plus.svg) transparent 16px no-repeat;

  138.   font-size: 16px;

  139. }

  140. 

  141. #drupal-off-canvas .inline-block-create-button,

  142. #drupal-off-canvas .inline-block-list__item {

  143.   margin: 0 -20px;

  144.   background-color: #444;

  145. }

  146. 

  147. #drupal-off-canvas .inline-block-create-button:hover,

  148. #drupal-off-canvas .inline-block-list__item:hover {

  149.   background-color: #333;

  150. }

  151. 

  152. #drupal-off-canvas .inline-block-list {

  153.   margin-bottom: 15px;

  154. }

  155. 

  156. #drupal-off-canvas .inline-block-list__item {

  157.   display: block;

  158.   padding: 15px 0 15px 25px;

  159. }

  160. 

  161. .layout-builder__add-section.is-layout-builder-highlighted {

  162.   margin-bottom: calc(1.5em - 8px);

  163.   outline: none;

  164. }

  165. .layout-builder__layout.is-layout-builder-highlighted,

  166. .layout-builder-block.is-layout-builder-highlighted,

  167. .layout-builder__add-block.is-layout-builder-highlighted {

  168.   position: relative;

  169.   z-index: 1;

  170.   margin: -4px -2px;

  171. }

  172. .layout-builder__add-block.is-layout-builder-highlighted,

  173. .layout-builder__add-section.is-layout-builder-highlighted,

  174. .layout-builder__layout.is-layout-builder-highlighted:before,

  175. .layout-builder__layout.is-layout-builder-highlighted,

  176. .layout-builder-block.is-layout-builder-highlighted {

  177.   border: 4px solid #000;

  178. }

  179. 

  180. /* Highlight the active block in the Move Block dialog. */

  181. #drupal-off-canvas .layout-builder-components-table__block-label--current {

  182.   padding-left: 17px;

  183.   border-left: solid 5px;

  184. }

  185. 

  186. /**

  187.  * @todo remove in https://www.drupal.org/project/drupal/issues/3042127

  188.  *   This rule ensures the row weight dropdowns in the Move Block dialog

  189.  *   maintain the background color of their container when they are hovered

  190.  *   over or are inside the active row.

  191.  */

  192. #drupal-off-canvas .layout-builder-components-table__row .form-item {

  193.   background-color: transparent;

  194. }

  195. 

  196. .layout-builder__region-label,

  197. .layout-builder__section-label {

  198.   display: none;

  199. }

  200. 

  201. .layout-builder--move-blocks-active .layout-builder__region-label {

  202.   display: block;

  203. }

  204. 

  205. .layout-builder--move-blocks-active .layout-builder__section-label {

  206.   display: inline;

  207. }

  208. 

  209. .layout__region-info {

  210.   padding: 0.5em;

  211.   text-align: center;

  212.   border-bottom: 2px dashed #979797;

  213. }

  214. 

  215. /**

  216.  * Remove "You have unsaved changes" warning because Layout Builder always has

  217.  * unsaved changes until "Save layout" is submitted.

  218.  * @todo create issue for todo.

  219.  */

  220. .layout-builder-components-table .tabledrag-changed-warning {

  221.   display: none !important;

  222. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.