layout-builder.css

Same filename in this branch
  1. 11.x core/profiles/demo_umami/themes/umami/css/components/layout_builder/layout-builder.css
  2. 11.x core/modules/layout_builder/css/layout-builder.css
  3. 11.x core/modules/navigation/css/base/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. 8.9.x core/profiles/demo_umami/themes/umami/css/components/layout_builder/layout-builder.css
  6. 8.9.x core/themes/stable/css/layout_builder/layout-builder.css
  7. 8.9.x core/modules/layout_builder/css/layout-builder.css
  8. 10 core/profiles/demo_umami/themes/umami/css/components/layout_builder/layout-builder.css
  9. 10 core/themes/stable9/css/layout_builder/layout-builder.css
  10. 10 core/modules/layout_builder/css/layout-builder.css
  11. 10 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,
#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/themes/stable9/css/layout_builder/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. #drupal-off-canvas .inline-block-list__item {

  133.   margin: 0 -20px;

  134.   background-color: #444;

  135. }

  136. 

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

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

  139.   background-color: #333;

  140. }

  141. 

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

  143.   margin-bottom: 15px;

  144. }

  145. 

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

  147.   display: block;

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

  149. }

  150. 

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

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

  153.   outline: none;

  154. }

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

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

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

  158.   position: relative;

  159.   z-index: 1;

  160.   margin: -4px -2px;

  161. }

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

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

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

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

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

  167.   border: 4px solid #000;

  168. }

  169. 

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

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

  172.   padding-left: 17px;

  173.   border-left: solid 5px;

  174. }

  175. 

  176. /**

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

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

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

  180.  *   over or are inside the active row.

  181.  */

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

  183.   background-color: transparent;

  184. }

  185. 

  186. .layout-builder__region-label,

  187. .layout-builder__section-label {

  188.   display: none;

  189. }

  190. 

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

  192.   display: block;

  193. }

  194. 

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

  196.   display: inline;

  197. }

  198. 

  199. .layout__region-info {

  200.   padding: 0.5em;

  201.   text-align: center;

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

  203. }

  204. 

  205. /**

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

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

  208.  * @todo create issue for todo.

  209.  */

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

  211.   display: none !important;

  212. }

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