gin-regions.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-regions.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
.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;
    margin: 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;

    .block-page-title-block {
      margin: 0;
    }
  }
}
.content-header {
  overflow: initial;
  background-color: transparent;
  padding-block: 0;

  /* Normalize whitespace if empty. */
  @media (min-width: 48em) {
    &:not(:has(.layout-container *)) {
      margin-block-start: calc(var(--gin-spacing-m) * -1);
    }
  }
}
.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; */
  }
}
.toolbar-tray-open:not(.toolbar-vertical) .layout-container,
body:not(.toolbar-tray-open) .layout-container {
  margin-inline: var(--gin-spacing-m);

  @media (min-width: 48em) {
    margin-inline: var(--gin-spacing-xl);
  }

  @media (min-width: 61em) {
    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 (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/migration/css/base/gin-regions.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. .region-sticky {

  8.   position: sticky;

  9.   z-index: 101;

  10.   display: flex;

  11.   align-items: center;

  12.   box-sizing: border-box;

  13.   width: 100%;

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

  15.   padding: 0;

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

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

  18. 

  19.   .gin--edit-form 
  20.   }

  21. 

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

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

  24.   }

  25. 

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

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

  28.     margin-block-end: 0;

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

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

  31. 

  32.     .gin--navigation &,

  33.     .gin--vertical-toolbar &,

  34.     .gin--horizontal-toolbar &,

  35.     .gin--classic-toolbar 
  36.   }

  37. }

  38. .region-sticky-watcher {

  39.   position: sticky;

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

  41.   height: 0;

  42. }

  43. .region-sticky--is-sticky {

  44.   opacity: 0.95;

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

  46. 

  47.   .gin--high-contrast-mode 
  48. 

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

  50.     opacity: 0.999;

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

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

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

  54.   }

  55. }

  56. .region-sticky__items {

  57.   display: flex;

  58.   flex-grow: 1;

  59.   align-items: center;

  60.   width: auto;

  61.   min-width: 0;

  62.   height: 100%;

  63. 

  64.   .block-page-title-block {

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

  66.     /* display: flex; */

  67.     flex-grow: 1;

  68.     align-self: center;

  69.     min-width: 0;

  70.     margin: 0;

  71. 

  72.     .page-title {

  73.       align-self: center;

  74.       margin: 0;

  75.     }

  76.   }

  77. 

  78.   .gin-sticky-form-actions {

  79.     display: flex;

  80.     width: auto;

  81.     margin-block-start: 0;

  82. 

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

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

  85.     }

  86.   }

  87. 

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

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

  90.   }

  91. 

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

  93.     .settings-tray-editable {

  94.       flex-shrink: 0;

  95.     }

  96.   }

  97. }

  98. .region-sticky__items__inner {

  99.   display: flex;

  100.   flex-wrap: wrap;

  101.   width: 100%;

  102. 

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

  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. .content-header {

  114.   overflow: initial;

  115.   background-color: transparent;

  116.   padding-block: 0;

  117. 

  118.   /* Normalize whitespace if empty. */

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

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

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

  122.     }

  123.   }

  124. }

  125. .sticky-shadow {

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

  127.     position: relative;

  128.     z-index: 98;

  129.     height: 2.5rem;

  130.     pointer-events: none;

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

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

  133.     margin-inline: auto;

  134. 

  135.     .gin--dark-mode 
  136.   }

  137. 

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

  139.     position: sticky;

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

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

  142. 

  143.     .gin--edit-form 
  144.   }

  145. }

  146. .page-wrapper {

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

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

  149.   }

  150. }

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

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

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

  154. 

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

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

  157.   }

  158. 

  159.   @media (min-width: 61em) {

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

  161. 

  162.     .layout-container {

  163.       margin-inline: 0;

  164.     }

  165.   }

  166. }

  167. .gin-sticky-form-actions {

  168.   display: flex;

  169.   flex-wrap: wrap;

  170.   flex-shrink: 0;

  171.   align-items: center;

  172.   justify-content: space-between;

  173.   width: 100%;

  174. 

  175.   .form-actions {

  176.     flex-grow: 1;

  177.     align-items: center;

  178.     justify-content: flex-end;

  179.     margin: 0;

  180.   }

  181. 

  182.   .field--name-status {

  183.     display: flex;

  184.     align-items: center;

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

  186. 

  187.     .form-item__label {

  188.       font-size: 0.8125rem;

  189. 

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

  191.         display: none;

  192.       }

  193.     }

  194. 

  195.     .form-type--checkbox {

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

  197.     }

  198.   }

  199. 

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

  201.     flex-wrap: nowrap;

  202.     width: max-content;

  203.   }

  204. }

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