gin-regions.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-regions.pcss.css
@import "media-queries.pcss.css";

.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;
    margin: 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;

    .block-page-title-block {
      margin: 0;
    }
  }
}

.content-header {
  overflow: initial;
  background-color: transparent;
  padding-block: 0;

  /* Normalize whitespace if empty. */
  @media (--admin-small) {
    &:not(:has(.layout-container *)) {
      margin-block-start: calc(var(--gin-spacing-m) * -1);
    }
  }
}

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

.toolbar-tray-open:not(.toolbar-vertical) .layout-container,
body:not(.toolbar-tray-open) .layout-container {
  margin-inline: var(--gin-spacing-m);

  @media (--admin-small) {
    margin-inline: var(--gin-spacing-xl);
  }

  @media (--admin-medium) {
    margin-inline: min(5vw, var(--gin-spacing-xxl));

    .layout-container {
      margin-inline: 0;
    }
  }
}

.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/migration/css/base/gin-regions.pcss.css

View source 
  1. @import "media-queries.pcss.css";

  2. 

  3. .region-sticky {

  4.   position: sticky;

  5.   z-index: 101;

  6.   display: flex;

  7.   align-items: center;

  8.   box-sizing: border-box;

  9.   width: 100%;

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

  11.   padding: 0;

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

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

  14. 

  15.   .gin--edit-form 
  16.   }

  17. 

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

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

  20.   }

  21. 

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

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

  24.     margin-block-end: 0;

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

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

  27. 

  28.     .gin--navigation &,

  29.     .gin--vertical-toolbar &,

  30.     .gin--horizontal-toolbar &,

  31.     .gin--classic-toolbar 
  32.   }

  33. }

  34. 

  35. .region-sticky-watcher {

  36.   position: sticky;

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

  38.   height: 0;

  39. }

  40. 

  41. .region-sticky--is-sticky {

  42.   opacity: 0.95;

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

  44. 

  45.   .gin--high-contrast-mode 
  46. 

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

  48.     opacity: 0.999;

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

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

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

  52.   }

  53. }

  54. 

  55. .region-sticky__items {

  56.   display: flex;

  57.   flex-grow: 1;

  58.   align-items: center;

  59.   width: auto;

  60.   min-width: 0;

  61.   height: 100%;

  62. 

  63.   .block-page-title-block {

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

  65.     /* display: flex; */

  66.     flex-grow: 1;

  67.     align-self: center;

  68.     min-width: 0;

  69.     margin: 0;

  70. 

  71.     .page-title {

  72.       align-self: center;

  73.       margin: 0;

  74.     }

  75.   }

  76. 

  77.   .gin-sticky-form-actions {

  78.     display: flex;

  79.     width: auto;

  80.     margin-block-start: 0;

  81. 

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

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

  84.     }

  85.   }

  86. 

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

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

  89.   }

  90. 

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

  92.     .settings-tray-editable {

  93.       flex-shrink: 0;

  94.     }

  95.   }

  96. }

  97. 

  98. .region-sticky__items__inner {

  99.   display: flex;

  100.   flex-wrap: wrap;

  101.   width: 100%;

  102. 

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

  104.     flex-wrap: nowrap;

  105.     align-items: center;

  106.     margin-block-end: 0;

  107. 

  108.     .block-page-title-block {

  109.       margin: 0;

  110.     }

  111.   }

  112. }

  113. 

  114. .content-header {

  115.   overflow: initial;

  116.   background-color: transparent;

  117.   padding-block: 0;

  118. 

  119.   /* Normalize whitespace if empty. */

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

  121.     &:not(:has(.layout-container *)) {

  122.       margin-block-start: calc(var(--gin-spacing-m) * -1);

  123.     }

  124.   }

  125. }

  126. 

  127. .sticky-shadow {

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

  129.     position: relative;

  130.     z-index: 98;

  131.     height: 40px;

  132.     pointer-events: none;

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

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

  135.     margin-inline: auto;

  136. 

  137.     .gin--dark-mode 
  138.   }

  139. 

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

  141.     position: sticky;

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

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

  144. 

  145.     .gin--edit-form 
  146.   }

  147. }

  148. 

  149. .page-wrapper {

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

  151.     margin-block-start: 1px; /* fix for inset-block-start: auto; */

  152.   }

  153. }

  154. 

  155. .toolbar-tray-open:not(.toolbar-vertical) .layout-container,

  156. body:not(.toolbar-tray-open) .layout-container {

  157.   margin-inline: var(--gin-spacing-m);

  158. 

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

  160.     margin-inline: var(--gin-spacing-xl);

  161.   }

  162. 

  163.   @media (--admin-medium) {

  164.     margin-inline: min(5vw, var(--gin-spacing-xxl));

  165. 

  166.     .layout-container {

  167.       margin-inline: 0;

  168.     }

  169.   }

  170. }

  171. 

  172. .gin-sticky-form-actions {

  173.   display: flex;

  174.   flex-wrap: wrap;

  175.   flex-shrink: 0;

  176.   align-items: center;

  177.   justify-content: space-between;

  178.   width: 100%;

  179. 

  180.   .form-actions {

  181.     flex-grow: 1;

  182.     align-items: center;

  183.     justify-content: flex-end;

  184.     margin: 0;

  185.   }

  186. 

  187.   .field--name-status {

  188.     display: flex;

  189.     align-items: center;

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

  191. 

  192.     .form-item__label {

  193.       font-size: 0.8125rem;

  194. 

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

  196.         display: none;

  197.       }

  198.     }

  199. 

  200.     .form-type--checkbox {

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

  202.     }

  203.   }

  204. 

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

  206.     flex-wrap: nowrap;

  207.     width: max-content;

  208.   }

  209. }

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