off-canvas.pcss.css

Layout Builder styling for off-canvas UI.

File

core/modules/layout_builder/css/off-canvas.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Layout Builder styling for off-canvas UI.

  4.  */

  5. 

  6. #drupal-off-canvas-wrapper {

  7.   & .layout-selection {

  8.     margin: 0;

  9.     padding: 0;

  10.     list-style: none;

  11. 

  12.     & li {

  13.       position: relative; /* Anchor throbber. */

  14.       padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit));

  15.       border-bottom: 1px solid var(--off-canvas-border-color);

  16. 

  17.       &:last-child {

  18.         padding-bottom: 0;

  19.         border-bottom: none;

  20.       }

  21.     }

  22. 

  23.     /* Horizontally align icon and text. */

  24.     & a {

  25.       display: flex;

  26.       flex-wrap: wrap;

  27.       align-items: center;

  28.       gap: 10px;

  29.       padding: 10px;

  30.     }

  31.   }

  32. 

  33.   /*

  34.    * This is the styling of the SVG within the layout selection list.

  35.    */

  36.   & .layout-icon__region {

  37.     fill: var(--off-canvas-text-color);

  38.     stroke: transparent;

  39. 

  40.     @media (forced-colors: active) {

  41.       fill: canvastext;

  42.     }

  43.   }

  44. 

  45.   & .inline-block-create-button {

  46.     --icon-size: 16px;

  47. 

  48.     position: relative; /* Anchor pseudo-element. */

  49.     display: block;

  50.     padding: 24px;

  51.     padding-inline-start: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2); /* Room for icon */

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

  53.     font-size: 16px;

  54. 

  55.     /* Plus icon. */

  56.     &::before {

  57.       position: absolute;

  58.       top: 50%;

  59.       left: var(--off-canvas-padding);

  60.       width: var(--icon-size);

  61.       height: var(--icon-size);

  62.       content: "";

  63.       transform: translateY(-50%);

  64.       background-image: url(../../../misc/icons/bebebe/plus.svg);

  65.       background-repeat: no-repeat;

  66.       background-size: contain;

  67. 

  68.       @media (forced-colors: active) {

  69.         background: linktext;

  70.         mask-image: url(../../../misc/icons/bebebe/plus.svg);

  71.         mask-repeat: no-repeat;

  72.         mask-size: contain;

  73.       }

  74.     }

  75.   }

  76. 

  77.   & .inline-block-create-button,

  78.   & .inline-block-list__item {

  79.     margin: 0 calc(-1 * var(--off-canvas-padding));

  80.     color: var(--off-canvas-text-color);

  81. 

  82.     &:hover {

  83.       background-color: rgba(255, 255, 255, 0.05);

  84.     }

  85. 

  86.     &:focus {

  87.       outline-offset: -4px; /* Prevent outline from being cut off. */

  88.     }

  89.   }

  90. 

  91.   & .inline-block-list {

  92.     margin: 0 0 calc(2 * var(--off-canvas-vertical-spacing-unit));

  93.     padding: 0;

  94.     list-style: none;

  95. 

  96.     & li {

  97.       position: relative; /* Anchor throbber. */

  98.       margin: 0;

  99.       padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit)) 0;

  100. 

  101.       &:last-child {

  102.         padding-bottom: 0;

  103.         border-bottom: none;

  104.       }

  105.     }

  106.   }

  107. 

  108.   /* This is the  tag. */

  109.   & .inline-block-list__item {

  110.     display: block;

  111.     flex-grow: 1;

  112.     padding: calc(2 * var(--off-canvas-vertical-spacing-unit)) var(--off-canvas-padding);

  113.     border-bottom: 1px solid var(--off-canvas-border-color);

  114.   }

  115. 

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

  117.   & .layout-builder-components-table__block-label--current {

  118.     padding-left: 17px;

  119.     border-left: solid 5px;

  120.   }

  121. }