layout.css

Same filename in this branch
  1. main core/profiles/demo_umami/themes/umami/css/layout/layout.css
  2. main core/themes/olivero/css/layout/layout.css
  3. main core/themes/claro/css/layout/layout.css
  4. main core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  5. main core/themes/admin/css/layout/layout.css
Same filename and directory in other branches
  1. 8.9.x core/themes/stark/css/layout.css
  2. 10 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  3. 10 core/themes/olivero/css/layout/layout.css
  4. 10 core/themes/claro/css/layout/layout.css
  5. 11.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  6. 11.x core/themes/olivero/css/layout/layout.css
  7. 11.x core/themes/claro/css/layout/layout.css
  8. 11.x core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  9. 10 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  10. 9 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  11. 9 core/themes/olivero/css/layout/layout.css
  12. 9 core/themes/seven/css/layout/layout.css
  13. 9 core/themes/claro/css/layout/layout.css
  14. 9 core/themes/bartik/css/layout.css
  15. 9 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  16. 8.9.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  17. 8.9.x core/themes/seven/css/layout/layout.css
  18. 8.9.x core/themes/claro/css/layout/layout.css
  19. 8.9.x core/themes/bartik/css/layout.css
  20. 7.x themes/stark/layout.css
  21. 7.x themes/bartik/css/layout.css
  22. 11.x core/themes/admin/css/layout/layout.css
  23. 11.x core/themes/default_admin/css/layout/layout.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * Add spacing to top and bottom of pages.
 */

.page-content {
  margin-block: 0 5rem;

  > .help,
  > .region-content,
  > .region-highlighted {
    @media (min-width: 48em) {
      margin-block-start: var(--gin-spacing-l);
    }
  }
}

/**
 * Add color to layout icons.
 */

.layout-icon__region {
  fill: #f5f5f2;
  stroke: #666;
}

.region-sticky {
  position: sticky;
  z-index: 101;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--gin-height-sticky);
  padding: 0;
  background: var(--gin-bg-app);
  inset-block-start: var(--gin-toolbar-y-offset);

  .gin--edit-form & {
    inset-block-start: calc(var(--gin-toolbar-y-offset) - var(--gin-spacing-xxl) - var(--gin-spacing-xxs));
    padding-block-start: var(--gin-spacing-m);

    @media (min-width: 64em) {
      inset-block-start: var(--gin-toolbar-y-offset);
      padding-block-start: var(--gin-spacing-s);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: var(--gin-transition);
  }

  @media (min-width: 64em) {
    height: var(--gin-height-sticky);
    margin-block-end: 0;
    padding: var(--gin-spacing-s) 0;
    inset-block-start: -1px;

    .gin--navigation &,
    .gin--vertical-toolbar &,
    .gin--horizontal-toolbar &,
    .gin--classic-toolbar & {
      inset-block-start: var(--gin-toolbar-y-offset);
    }
  }
}

.region-sticky-watcher {
  position: sticky;
  inset-block-start: -1px;
  height: 0;
}

.region-sticky--is-sticky {
  opacity: 0.95;
  background: var(--gin-bg-app);

  .gin--high-contrast-mode & {
    background: var(--gin-bg-app);
    backdrop-filter: none;
  }

  @supports (backdrop-filter: blur()) {
    opacity: 0.999;
    /* stylelint-disable-next-line color-function-notation */
    background: rgb(from var(--app-bg-color) r g b/ 0.8);
    backdrop-filter: blur(0.75rem);
  }
}

.region-sticky__items {
  display: flex;
  flex-grow: 1;
  align-items: center;
  width: auto;
  min-width: 0;
  height: 100%;

  .block-page-title-block {
    /* @todo add this back after visual regression against Gin 5.x */
    /* display: flex; */
    flex-grow: 1;
    align-self: center;
    min-width: 0;

    .page-title {
      align-self: center;
      margin: 0;
    }
  }

  .gin-sticky-form-actions {
    display: flex;
    width: auto;
    margin-block-start: 0;

    @media (min-width: 64em) {
      padding-inline-start: var(--gin-spacing-l);
    }
  }

  [id*="block-gin-local-actions"] + .gin-sticky-form-actions {
    padding-inline-start: var(--gin-spacing-xs);
  }

  @media (min-width: 48em) {
    .settings-tray-editable {
      flex-shrink: 0;
    }
  }
}

.region-sticky__items__inner {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  @media (min-width: 64em) {
    flex-wrap: nowrap;
    align-items: center;
    margin-block-end: 0;
  }
}

.sticky-shadow {
  @media (min-width: 64em) {
    position: relative;
    z-index: 98;
    height: 2.5rem;
    pointer-events: none;
    box-shadow: 0 10px 20px -16px rgb(0, 0, 0, 0.4);
    margin-block: calc(var(--gin-spacing-xxxl) * -1) var(--gin-spacing-l);
    margin-inline: auto;

    .gin--dark-mode & {
      box-shadow: none;
    }
  }

  @media (min-width: 64em) {
    position: sticky;
    inset-block-start: calc(var(--gin-toolbar-y-offset) + (var(--gin-height-sticky) - 2.5rem));
    width: calc(100% - min(10vw, 6rem) + var(--gin-spacing-l));

    .gin--edit-form & {
      max-width: 81.25rem;
    }
  }
}

.page-wrapper {
  @media (min-width: 64em) {
    margin-block-start: 1px;
    /* fix for inset-block-start: auto; */
  }
}

.gin-sticky-form-actions {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .form-actions {
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
  }

  .field--name-status {
    display: flex;
    align-items: center;
    margin-inline-end: var(--gin-spacing-xs);

    .form-item__label {
      font-size: 0.8125rem;

      @media (max-width: 26.24em) {
        display: none;
      }
    }

    .form-type--checkbox {
      margin-block: var(--gin-spacing-xs);
    }
  }

  @media (min-width: 64em) {
    flex-wrap: nowrap;
    width: max-content;
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/css/layout/layout.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.  * Add spacing to top and bottom of pages.

  10.  */

  11. 

  12. .page-content {

  13.   margin-block: 0 5rem;

  14. 

  15.   > .help,

  16.   > .region-content,

  17.   > .region-highlighted {

  18.     @media (min-width: 48em) {

  19.       margin-block-start: var(--gin-spacing-l);

  20.     }

  21.   }

  22. }

  23. 

  24. /**

  25.  * Add color to layout icons.

  26.  */

  27. 

  28. .layout-icon__region {

  29.   fill: #f5f5f2;

  30.   stroke: #666;

  31. }

  32. 

  33. .region-sticky {

  34.   position: sticky;

  35.   z-index: 101;

  36.   display: flex;

  37.   align-items: center;

  38.   box-sizing: border-box;

  39.   width: 100%;

  40.   min-height: var(--gin-height-sticky);

  41.   padding: 0;

  42.   background: var(--gin-bg-app);

  43.   inset-block-start: var(--gin-toolbar-y-offset);

  44. 

  45.   .gin--edit-form 
  46.   }

  47. 

  48.   @media (prefers-reduced-motion: no-preference) {

  49.     transition: var(--gin-transition);

  50.   }

  51. 

  52.   @media (min-width: 64em) {

  53.     height: var(--gin-height-sticky);

  54.     margin-block-end: 0;

  55.     padding: var(--gin-spacing-s) 0;

  56.     inset-block-start: -1px;

  57. 

  58.     .gin--navigation &,

  59.     .gin--vertical-toolbar &,

  60.     .gin--horizontal-toolbar &,

  61.     .gin--classic-toolbar 
  62.   }

  63. }

  64. 

  65. .region-sticky-watcher {

  66.   position: sticky;

  67.   inset-block-start: -1px;

  68.   height: 0;

  69. }

  70. 

  71. .region-sticky--is-sticky {

  72.   opacity: 0.95;

  73.   background: var(--gin-bg-app);

  74. 

  75.   .gin--high-contrast-mode 
  76. 

  77.   @supports (backdrop-filter: blur()) {

  78.     opacity: 0.999;

  79.     /* stylelint-disable-next-line color-function-notation */

  80.     background: rgb(from var(--app-bg-color) r g b/ 0.8);

  81.     backdrop-filter: blur(0.75rem);

  82.   }

  83. }

  84. 

  85. .region-sticky__items {

  86.   display: flex;

  87.   flex-grow: 1;

  88.   align-items: center;

  89.   width: auto;

  90.   min-width: 0;

  91.   height: 100%;

  92. 

  93.   .block-page-title-block {

  94.     /* @todo add this back after visual regression against Gin 5.x */

  95.     /* display: flex; */

  96.     flex-grow: 1;

  97.     align-self: center;

  98.     min-width: 0;

  99. 

  100.     .page-title {

  101.       align-self: center;

  102.       margin: 0;

  103.     }

  104.   }

  105. 

  106.   .gin-sticky-form-actions {

  107.     display: flex;

  108.     width: auto;

  109.     margin-block-start: 0;

  110. 

  111.     @media (min-width: 64em) {

  112.       padding-inline-start: var(--gin-spacing-l);

  113.     }

  114.   }

  115. 

  116.   [id*="block-gin-local-actions"] + .gin-sticky-form-actions {

  117.     padding-inline-start: var(--gin-spacing-xs);

  118.   }

  119. 

  120.   @media (min-width: 48em) {

  121.     .settings-tray-editable {

  122.       flex-shrink: 0;

  123.     }

  124.   }

  125. }

  126. 

  127. .region-sticky__items__inner {

  128.   display: flex;

  129.   flex-wrap: wrap;

  130.   width: 100%;

  131. 

  132.   @media (min-width: 64em) {

  133.     flex-wrap: nowrap;

  134.     align-items: center;

  135.     margin-block-end: 0;

  136.   }

  137. }

  138. 

  139. .sticky-shadow {

  140.   @media (min-width: 64em) {

  141.     position: relative;

  142.     z-index: 98;

  143.     height: 2.5rem;

  144.     pointer-events: none;

  145.     box-shadow: 0 10px 20px -16px rgb(0, 0, 0, 0.4);

  146.     margin-block: calc(var(--gin-spacing-xxxl) * -1) var(--gin-spacing-l);

  147.     margin-inline: auto;

  148. 

  149.     .gin--dark-mode 
  150.   }

  151. 

  152.   @media (min-width: 64em) {

  153.     position: sticky;

  154.     inset-block-start: calc(var(--gin-toolbar-y-offset) + (var(--gin-height-sticky) - 2.5rem));

  155.     width: calc(100% - min(10vw, 6rem) + var(--gin-spacing-l));

  156. 

  157.     .gin--edit-form 
  158.   }

  159. }

  160. 

  161. .page-wrapper {

  162.   @media (min-width: 64em) {

  163.     margin-block-start: 1px;

  164.     /* fix for inset-block-start: auto; */

  165.   }

  166. }

  167. 

  168. .gin-sticky-form-actions {

  169.   display: flex;

  170.   flex-wrap: wrap;

  171.   flex-shrink: 0;

  172.   align-items: center;

  173.   justify-content: space-between;

  174.   width: 100%;

  175. 

  176.   .form-actions {

  177.     flex-grow: 1;

  178.     align-items: center;

  179.     justify-content: flex-end;

  180.     margin: 0;

  181.   }

  182. 

  183.   .field--name-status {

  184.     display: flex;

  185.     align-items: center;

  186.     margin-inline-end: var(--gin-spacing-xs);

  187. 

  188.     .form-item__label {

  189.       font-size: 0.8125rem;

  190. 

  191.       @media (max-width: 26.24em) {

  192.         display: none;

  193.       }

  194.     }

  195. 

  196.     .form-type--checkbox {

  197.       margin-block: var(--gin-spacing-xs);

  198.     }

  199.   }

  200. 

  201.   @media (min-width: 64em) {

  202.     flex-wrap: nowrap;

  203.     width: max-content;

  204.   }

  205. }

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