off-canvas.css

Layout Builder styling for off-canvas UI.

File

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

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

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

  11.  */

  12. 

  13. #drupal-off-canvas-wrapper .layout-selection {

  14.   margin: 0;

  15.   padding: 0;

  16.   list-style: none;

  17. }

  18. 

  19. #drupal-off-canvas-wrapper .layout-selection li {

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

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

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

  23. }

  24. 

  25. #drupal-off-canvas-wrapper .layout-selection li:last-child {

  26.   padding-bottom: 0;

  27.   border-bottom: none;

  28. }

  29. 

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

  31. 

  32. #drupal-off-canvas-wrapper .layout-selection a {

  33.   display: flex;

  34.   flex-wrap: wrap;

  35.   align-items: center;

  36.   gap: 0.625rem;

  37.   padding: 0.625rem;

  38. }

  39. 

  40. /*

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

  42.    */

  43. 

  44. #drupal-off-canvas-wrapper .layout-icon__region {

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

  46.   stroke: transparent;

  47. }

  48. 

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

  50.   #drupal-off-canvas-wrapper .layout-icon__region {

  51.     fill: canvastext;

  52.   }

  53. }

  54. 

  55. #drupal-off-canvas-wrapper .inline-block-create-button {

  56.   --icon-size: 1rem;

  57. 

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

  59.   display: block;

  60.   padding: 1.5rem;

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

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

  63.   font-size: 1rem;

  64. 

  65.   /* Plus icon. */

  66. }

  67. 

  68. #drupal-off-canvas-wrapper .inline-block-create-button::before {

  69.   position: absolute;

  70.   top: 50%;

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

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

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

  74.   content: "";

  75.   transform: translateY(-50%);

  76.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' 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");

  77.   background-repeat: no-repeat;

  78.   background-size: contain;

  79. }

  80. 

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

  82.   #drupal-off-canvas-wrapper .inline-block-create-button::before {

  83.     background: linktext;

  84.     mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' 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");

  85.     mask-repeat: no-repeat;

  86.     mask-size: contain;

  87.   }

  88. }

  89. 

  90. #drupal-off-canvas-wrapper .inline-block-create-button,

  91. #drupal-off-canvas-wrapper .inline-block-list__item {

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

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

  94. }

  95. 

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

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

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

  99. }

  100. 

  101. #drupal-off-canvas-wrapper .inline-block-create-button:focus,

  102. #drupal-off-canvas-wrapper .inline-block-list__item:focus {

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

  104. }

  105. 

  106. #drupal-off-canvas-wrapper .inline-block-list {

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

  108.   padding: 0;

  109.   list-style: none;

  110. }

  111. 

  112. #drupal-off-canvas-wrapper .inline-block-list li {

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

  114.   margin: 0;

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

  116. }

  117. 

  118. #drupal-off-canvas-wrapper .inline-block-list li:last-child {

  119.   padding-bottom: 0;

  120.   border-bottom: none;

  121. }

  122. 

  123. /* This is the  tag. */

  124. 

  125. #drupal-off-canvas-wrapper .inline-block-list__item {

  126.   display: block;

  127.   flex-grow: 1;

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

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

  130. }

  131. 

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

  133. 

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

  135.   padding-left: 1.0625rem;

  136.   border-left: solid 5px;

  137. }