layout-builder.css

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

/**
 * @file
 * Layout Builder UI styling.
 */

.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-inline-start: 1.3em;
  color: #686868;
  border-bottom: none;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23787878' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e") transparent center left / 1em no-repeat; /* LTR */
}

.layout-builder__link--add:dir(rtl) {
  background-position-x: right;
}

.layout-builder__link--add:hover,
.layout-builder__link--add:active {
  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: 1.25rem;
  padding: 1.875rem;
  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: 1.625rem;
  height: 1.625rem;
  margin-inline: -0.625rem 0.375rem;
  padding: 0;
  white-space: nowrap;
  text-indent: -624.9375rem;
  border: 1px solid #ccc;
  border-radius: 1.625rem;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e") #fff center center / 1rem 1rem no-repeat;
  font-size: 1rem;
}

.layout-builder__link--remove:hover {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
}

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

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

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

/*
 * Layout Builder messages.
 */

.layout-builder__message .messages {
  background-repeat: no-repeat;
}

.layout-builder__message--defaults .messages {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M8,0.0309333333 C12.4181818,0.0309333333 16,3.5328 16,7.85315556 C16,12.1731556 12.4181818,15.6750222 8,15.6750222 C3.58181818,15.6750222 0,12.1731556 0,7.85315556 C0,3.5328 3.58181818,0.0309333333 8,0.0309333333 Z M12.7236364,4.69653333 C12.5116364,4.95288889 12.1872727,4.50133333 11.9,4.3552 C11.6130909,4.20871111 11.5505455,4.69653333 11.2138182,5.25795556 C10.8767273,5.81937778 10.6770909,5.56302222 10.3774545,5.25795556 C10.0781818,4.95288889 10.2650909,4.68444444 10.5774545,4.56248889 C10.8890909,4.44053333 10.9141818,4.39182222 10.6894545,4.14755556 C10.4650909,3.90364444 10.3650909,4.00106667 10.5898182,3.80586667 C10.8141818,3.61066667 10.9516364,3.6352 11.4385455,3.34222222 C11.9250909,3.04924444 11.3636364,2.7808 11.0389091,2.99484444 C10.7145455,3.20853333 10.3025455,2.56142222 10.2152727,2.01671111 C10.128,1.47164444 10.3901818,1.64622222 10.6894545,1.45066667 C10.7610909,1.40444444 10.7192727,1.29386667 10.6170909,1.15377778 C9.80363636,0.849066667 8.92181818,0.680177778 8,0.680177778 C7.08945455,0.680177778 6.21745455,0.8448 5.41236364,1.14275556 C5.26763636,1.33795556 5.23709091,1.49475556 5.53527273,1.4752 C6.284,1.42648889 6.29672727,1.26791111 6.55890909,1.6096 C6.82072727,1.95128889 6.696,2.65884444 6.22181818,2.46364444 C5.74763636,2.26844444 4.96145455,1.93884444 4.76181818,2.3296 C4.56181818,2.72 4.84909091,2.81742222 5.236,2.5856 C5.62254545,2.35377778 5.93490909,2.46364444 6.00945455,2.84195556 C6.08436364,3.22026667 6.05963636,3.95235556 5.63527273,3.81831111 C5.21090909,3.68391111 5.07345455,3.8912 5.32327273,4.09884444 C5.57272727,4.30613333 5.29818182,4.42844444 4.91127273,4.26951111 C4.52436364,4.11093333 4.53709091,4.59911111 4.01272727,4.57457778 C3.48872727,4.5504 3.45127273,5.11146667 3.28909091,5.31911111 C3.12690909,5.5264 3.10181818,6.19768889 3.06436364,6.35626667 C3.02690909,6.51484444 2.86472727,6.6368 2.77745455,6.13653333 C2.68981818,5.63626667 2.80218182,5.41653333 2.34072727,5.38026667 C1.87890909,5.34328889 1.41709091,6.29191111 1.65418182,6.49493333 C1.89127273,6.69795556 2.21563636,6.30755556 2.19090909,6.60017778 C2.16581818,6.89315556 2.00363636,8.22328889 2.49018182,8.28408889 C2.97709091,8.34524444 3.30145455,8.29653333 3.70072727,8.55288889 C4.1,8.80888889 4.84909091,8.83342222 5.38545455,9.66328889 C5.92218182,10.4928 6.54618182,10.5905778 7.14545455,10.7249778 C7.74436364,10.8590222 7.68181818,11.1886222 7.36981818,11.6277333 C7.05781818,12.0672 7.23272727,12.5184 6.18436364,12.8600889 C5.136,13.2017778 5.06109091,14.0561778 5.09854545,14.2147556 C5.10618182,14.2471111 5.092,14.3239111 5.06545455,14.4248889 C5.96472727,14.8103111 6.95709091,15.0257778 8,15.0257778 C10.0716364,15.0257778 11.944,14.1802667 13.2792727,12.8256 C13.1043636,12.2965333 12.9294545,11.6920889 12.9236364,11.3713778 C12.9109091,10.7249778 13.0981818,10.6759111 12.8610909,10.2488889 C12.624,9.82186667 12.1370909,10.2368 11.1887273,10.1144889 C10.2403636,9.99253333 10.3901818,9.40693333 9.72872727,8.6016 C9.06727273,7.79626667 10.34,7.13706667 10.6894545,6.30755556 C11.0389091,5.47768889 12.5614545,5.79484444 12.8985455,5.856 C13.2352727,5.91715556 13.1105455,5.69742222 13.8221818,5.18471111 C14.5334545,4.67235556 13.4727273,4.66026667 13.1854545,4.46506667 C12.8985455,4.26951111 12.936,4.44053333 12.7236364,4.69653333 Z M3.53854545,12.4088889 C3.47636364,11.8108444 3.02690909,11.4812444 2.50290909,10.3708444 C1.97854545,9.26044444 2.328,9.13848889 2.41527273,9.05315556 C2.50290909,8.96746667 1.82872727,8.61368889 1.85381818,7.75964444 C1.87890909,6.90524444 1.14254545,7.1008 1.27963636,6.19768889 C1.39745455,5.42328889 1.55018182,4.88426667 1.47381818,4.58417778 C0.957818182,5.56515556 0.664363636,6.67591111 0.664363636,7.85315556 C0.664363636,10.4938667 2.13272727,12.8046222 4.31236364,14.0494222 L4.27490909,13.8851556 C4.27490909,13.8851556 3.60109091,13.0065778 3.53854545,12.4088889 Z M8.48072727,1.69493333 C8.28109091,2.31715556 8.26109091,2.13333333 8.03127273,2.26844444 C7.78254545,2.41457778 7.65709091,2.51235556 7.44472727,2.80533333 C7.23272727,3.09831111 6.74581818,3.03715556 7.01381818,2.72 C7.28145455,2.40248889 7.18290909,1.54844444 7.03309091,1.31662222 C7.03309091,1.31662222 6.83345455,1.13351111 7.28254545,1.06026667 C7.732,0.987022222 8.68036364,1.07271111 8.48072727,1.69493333 Z'%3e%3c/path%3e%3c/svg%3e");
}

.layout-builder__message--overrides .messages {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M5.4749999,0 C2.43935876,0 0,2.45021982 0,5.50153207 C0,8.5518841 5.4749999,16.0038459 5.4749999,16.0038459 C5.4749999,16.0038459 10.9499998,8.5518841 10.9499998,5.50153207 C10.9499998,2.45021982 8.51064105,0 5.4749999,0 Z M5.89615374,8.00192294 C4.48158136,8.00192294 3.36923071,6.89054251 3.36923071,5.4749999 C3.36923071,4.06042752 4.48061114,2.94807687 5.89615374,2.94807687 C7.31072613,2.94807687 8.42307678,4.0594573 8.42307678,5.4749999 C8.42307678,6.89051825 7.31075039,8.00192294 5.89615374,8.00192294 Z'%3e%3c/path%3e%3c/svg%3e");
}

/* Label when "content preview" is disabled. */

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

.layout-builder__add-section.is-layout-builder-highlighted {
  margin-bottom: calc(1.5em - 0.5rem);
  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: -0.25rem -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;
}

.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;
}