layout.pcss.css

Same filename in this branch
  1. main core/themes/olivero/css/layout/layout.pcss.css
  2. main core/themes/claro/css/layout/layout.pcss.css
  3. main core/themes/admin/css/layout/layout.pcss.css
Same filename and directory in other branches
  1. 10 core/themes/olivero/css/layout/layout.pcss.css
  2. 10 core/themes/claro/css/layout/layout.pcss.css
  3. 11.x core/themes/olivero/css/layout/layout.pcss.css
  4. 11.x core/themes/claro/css/layout/layout.pcss.css
  5. 9 core/themes/olivero/css/layout/layout.pcss.css
  6. 9 core/themes/claro/css/layout/layout.pcss.css
  7. 8.9.x core/themes/claro/css/layout/layout.pcss.css
  8. 11.x core/themes/admin/css/layout/layout.pcss.css
  9. 11.x core/themes/default_admin/css/layout/layout.pcss.css
/**
 * Add spacing to top and bottom of pages.
 */

@import "../base/media-queries.pcss.css";

.page-content {
  margin-block: 0 80px;

  > .help,
  > .region-content,
  > .region-highlighted {
    @media (--admin-small) {
      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 (--admin-large) {
      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 (--admin-large) {
    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(12px);
  }
}

.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 (--admin-large) {
      padding-inline-start: var(--gin-spacing-l);
    }
  }

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

  @media (--admin-small) {
    .settings-tray-editable {
      flex-shrink: 0;
    }
  }
}

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

  @media (--admin-large) {
    flex-wrap: nowrap;
    align-items: center;
    margin-block-end: 0;
  }
}

.sticky-shadow {
  @media (--admin-large) {
    position: relative;
    z-index: 98;
    height: 40px;
    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 (--admin-large) {
    position: sticky;
    inset-block-start: calc(var(--gin-toolbar-y-offset) + (var(--gin-height-sticky) - 40px));
    width: calc(100% - min(10vw, 96px) + var(--gin-spacing-l));

    .gin--edit-form & {
      max-width: 1300px;
    }
  }
}

.page-wrapper {
  @media (--admin-large) {
    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 (--admin-to-tiny) {
        display: none;
      }
    }

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

  @media (--admin-large) {
    flex-wrap: nowrap;
    width: max-content;
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/css/layout/layout.pcss.css

View source 
  1. /**

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

  3.  */

  4. 

  5. @import "../base/media-queries.pcss.css";

  6. 

  7. .page-content {

  8.   margin-block: 0 80px;

  9. 

  10.   > .help,

  11.   > .region-content,

  12.   > .region-highlighted {

  13.     @media (--admin-small) {

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

  15.     }

  16.   }

  17. }

  18. 

  19. /**

  20.  * Add color to layout icons.

  21.  */

  22. .layout-icon__region {

  23.   fill: #f5f5f2;

  24.   stroke: #666;

  25. }

  26. 

  27. .region-sticky {

  28.   position: sticky;

  29.   z-index: 101;

  30.   display: flex;

  31.   align-items: center;

  32.   box-sizing: border-box;

  33.   width: 100%;

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

  35.   padding: 0;

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

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

  38. 

  39.   .gin--edit-form 
  40.   }

  41. 

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

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

  44.   }

  45. 

  46.   @media (--admin-large) {

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

  48.     margin-block-end: 0;

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

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

  51. 

  52.     .gin--navigation &,

  53.     .gin--vertical-toolbar &,

  54.     .gin--horizontal-toolbar &,

  55.     .gin--classic-toolbar 
  56.   }

  57. }

  58. 

  59. .region-sticky-watcher {

  60.   position: sticky;

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

  62.   height: 0;

  63. }

  64. 

  65. .region-sticky--is-sticky {

  66.   opacity: 0.95;

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

  68. 

  69.   .gin--high-contrast-mode 
  70. 

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

  72.     opacity: 0.999;

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

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

  75.     backdrop-filter: blur(12px);

  76.   }

  77. }

  78. 

  79. .region-sticky__items {

  80.   display: flex;

  81.   flex-grow: 1;

  82.   align-items: center;

  83.   width: auto;

  84.   min-width: 0;

  85.   height: 100%;

  86. 

  87.   .block-page-title-block {

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

  89.     /* display: flex; */

  90.     flex-grow: 1;

  91.     align-self: center;

  92.     min-width: 0;

  93. 

  94.     .page-title {

  95.       align-self: center;

  96.       margin: 0;

  97.     }

  98.   }

  99. 

  100.   .gin-sticky-form-actions {

  101.     display: flex;

  102.     width: auto;

  103.     margin-block-start: 0;

  104. 

  105.     @media (--admin-large) {

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

  107.     }

  108.   }

  109. 

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

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

  112.   }

  113. 

  114.   @media (--admin-small) {

  115.     .settings-tray-editable {

  116.       flex-shrink: 0;

  117.     }

  118.   }

  119. }

  120. 

  121. .region-sticky__items__inner {

  122.   display: flex;

  123.   flex-wrap: wrap;

  124.   width: 100%;

  125. 

  126.   @media (--admin-large) {

  127.     flex-wrap: nowrap;

  128.     align-items: center;

  129.     margin-block-end: 0;

  130.   }

  131. }

  132. 

  133. .sticky-shadow {

  134.   @media (--admin-large) {

  135.     position: relative;

  136.     z-index: 98;

  137.     height: 40px;

  138.     pointer-events: none;

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

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

  141.     margin-inline: auto;

  142. 

  143.     .gin--dark-mode 
  144.   }

  145. 

  146.   @media (--admin-large) {

  147.     position: sticky;

  148.     inset-block-start: calc(var(--gin-toolbar-y-offset) + (var(--gin-height-sticky) - 40px));

  149.     width: calc(100% - min(10vw, 96px) + var(--gin-spacing-l));

  150. 

  151.     .gin--edit-form 
  152.   }

  153. }

  154. 

  155. .page-wrapper {

  156.   @media (--admin-large) {

  157.     margin-block-start: 1px;

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

  159.   }

  160. }

  161. 

  162. .gin-sticky-form-actions {

  163.   display: flex;

  164.   flex-wrap: wrap;

  165.   flex-shrink: 0;

  166.   align-items: center;

  167.   justify-content: space-between;

  168.   width: 100%;

  169. 

  170.   .form-actions {

  171.     flex-grow: 1;

  172.     align-items: center;

  173.     justify-content: flex-end;

  174.     margin: 0;

  175.   }

  176. 

  177.   .field--name-status {

  178.     display: flex;

  179.     align-items: center;

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

  181. 

  182.     .form-item__label {

  183.       font-size: 0.8125rem;

  184. 

  185.       @media (--admin-to-tiny) {

  186.         display: none;

  187.       }

  188.     }

  189. 

  190.     .form-type--checkbox {

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

  192.     }

  193.   }

  194. 

  195.   @media (--admin-large) {

  196.     flex-wrap: nowrap;

  197.     width: max-content;

  198.   }

  199. }

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