toolbar-popover.css

Same filename and directory in other branches
  1. 10 core/modules/navigation/css/components/toolbar-popover.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  .toolbar-popover__wrapper {
    border: solid 1px transparent;
  }

  .toolbar-popover {
    border-radius: var(--admin-toolbar-space-8);
  }

  .toolbar-popover--expanded {
    background-color: var(--admin-toolbar-color-expanded);
  }

  .toolbar-popover__control {
    inline-size: 100%;
  }

  [data-toolbar-popover-wrapper] {
    position: fixed;
    z-index: var(--admin-toolbar-z-index-popover);
    display: grid;
    overflow: auto;
    grid-auto-rows: max-content;
    padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
    transition:
      transform var(--admin-toolbar-transition),
      opacity var(--admin-toolbar-transition);
    transform: translateX(-100%);
    transform-origin: 0;
    opacity: 0;
    background-color: var(--admin-toolbar-color-white);
    inline-size: var(--admin-toolbar-sidebar-width);
    block-size: 100vh;
    gap: var(--admin-toolbar-space-8);
    inset-block-start: var(--admin-toolbar-sidebar-header);
    inset-inline-start: 0;
    /* Hide the drop-shadow on the left side. */
    clip-path: inset(0 -10rem 0 0);

    &:dir(rtl) {
      /* Hide the drop-shadow on the right side. */
      clip-path: inset(0 0 0 -10rem);
      transform: translateX(0);
    }

    @media (min-width: 64rem) {
      --admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, -1);

      block-size: calc(100vh - var(--drupal-displace-offset-top, 0px));
      padding-block-start: var(--admin-toolbar-space-16);
      transform: translateX(0);
      box-shadow:
        0 0 72px rgb(0, 0, 0, 0.2),
        0 0 8px rgb(0, 0, 0, 0.04),
        0 0 40px rgb(0, 0, 0, 0.06);
      inline-size: var(--admin-toolbar-popover-width);
      inset-block-start: var(--drupal-displace-offset-top, 0);
      inset-inline-start: 1px;
    }
  }

  [data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
    transform: translateX(0);
    opacity: 1;

    @media (min-width: 64rem) {
      transform: translateX(var(--admin-toolbar-sidebar-width));

      &:dir(rtl) {
        transform: translateX(calc(var(--admin-toolbar-sidebar-width) * -1));
      }
    }
  }

  [data-admin-toolbar="collapsed"] & [data-toolbar-popover-wrapper] {
    transform: translateX(calc((16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left, var(--admin-toolbar-space-72))));

    &:dir(rtl) {
      transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right, var(--admin-toolbar-space-72))));
    }
  }
}

File

View on git.drupalcode.org

core/modules/navigation/css/components/toolbar-popover.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. :is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  8.   .toolbar-popover__wrapper {

  9.     border: solid 1px transparent;

  10.   }

  11. 

  12.   .toolbar-popover {

  13.     border-radius: var(--admin-toolbar-space-8);

  14.   }

  15. 

  16.   .toolbar-popover--expanded {

  17.     background-color: var(--admin-toolbar-color-expanded);

  18.   }

  19. 

  20.   .toolbar-popover__control {

  21.     inline-size: 100%;

  22.   }

  23. 

  24.   [data-toolbar-popover-wrapper] {

  25.     position: fixed;

  26.     z-index: var(--admin-toolbar-z-index-popover);

  27.     display: grid;

  28.     overflow: auto;

  29.     grid-auto-rows: max-content;

  30.     padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);

  31.     transition:

  32.       transform var(--admin-toolbar-transition),

  33.       opacity var(--admin-toolbar-transition);

  34.     transform: translateX(-100%);

  35.     transform-origin: 0;

  36.     opacity: 0;

  37.     background-color: var(--admin-toolbar-color-white);

  38.     inline-size: var(--admin-toolbar-sidebar-width);

  39.     block-size: 100vh;

  40.     gap: var(--admin-toolbar-space-8);

  41.     inset-block-start: var(--admin-toolbar-sidebar-header);

  42.     inset-inline-start: 0;

  43.     /* Hide the drop-shadow on the left side. */

  44.     clip-path: inset(0 -10rem 0 0);

  45. 

  46.     &:dir(rtl) {

  47.       /* Hide the drop-shadow on the right side. */

  48.       clip-path: inset(0 0 0 -10rem);

  49.       transform: translateX(0);

  50.     }

  51. 

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

  53.       --admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, -1);

  54. 

  55.       block-size: calc(100vh - var(--drupal-displace-offset-top, 0px));

  56.       padding-block-start: var(--admin-toolbar-space-16);

  57.       transform: translateX(0);

  58.       box-shadow:

  59.         0 0 72px rgb(0, 0, 0, 0.2),

  60.         0 0 8px rgb(0, 0, 0, 0.04),

  61.         0 0 40px rgb(0, 0, 0, 0.06);

  62.       inline-size: var(--admin-toolbar-popover-width);

  63.       inset-block-start: var(--drupal-displace-offset-top, 0);

  64.       inset-inline-start: 1px;

  65.     }

  66.   }

  67. 

  68.   [data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {

  69.     transform: translateX(0);

  70.     opacity: 1;

  71. 

  72.     @media (min-width: 64rem) {

  73.       transform: translateX(var(--admin-toolbar-sidebar-width));

  74. 

  75.       &:dir(rtl) {

  76.         transform: translateX(calc(var(--admin-toolbar-sidebar-width) * -1));

  77.       }

  78.     }

  79.   }

  80. 

  81.   [data-admin-toolbar="collapsed"] & [data-toolbar-popover-wrapper] {

  82.     transform: translateX(calc((16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left, var(--admin-toolbar-space-72))));

  83. 

  84.     &:dir(rtl) {

  85.       transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right, var(--admin-toolbar-space-72))));

  86.     }

  87.   }

  88. }

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