toolbar-popover.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
.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"] [data-toolbar-popover-wrapper] {
  /* Hide the drop-shadow on the right side. */
  clip-path: inset(0 0 0 -10rem);
  transform: translateX(0);
}
@media (min-width: 64rem) {
  [data-toolbar-popover-wrapper] {
    --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 rgba(0, 0, 0, 0.2),
      0 0 8px rgba(0, 0, 0, 0.04),
      0 0 40px rgba(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) {
  [data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
    transform: translateX(var(--admin-toolbar-sidebar-width));
  }

  [dir="rtl"] :is([data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper]) {
    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"] :is([data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper]) {
  transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right, var(--admin-toolbar-space-72))));
}

File

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. .toolbar-popover {

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

  9. }

  10. .toolbar-popover--expanded {

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

  12. }

  13. .toolbar-popover__control {

  14.   inline-size: 100%;

  15. }

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

  17.   position: fixed;

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

  19.   display: grid;

  20.   overflow: auto;

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

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

  23.   transition:

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

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

  26.   transform: translateX(-100%);

  27.   transform-origin: 0;

  28.   opacity: 0;

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

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

  31.   block-size: 100vh;

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

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

  34.   inset-inline-start: 0;

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

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

  37. }

  38. [dir="rtl"] [data-toolbar-popover-wrapper] {

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

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

  41.   transform: translateX(0);

  42. }

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

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

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

  46. 

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

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

  49.     transform: translateX(0);

  50.     box-shadow:

  51.       0 0 72px rgba(0, 0, 0, 0.2),

  52.       0 0 8px rgba(0, 0, 0, 0.04),

  53.       0 0 40px rgba(0, 0, 0, 0.06);

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

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

  56.     inset-inline-start: 1px;

  57.   }

  58. }

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

  60.   transform: translateX(0);

  61.   opacity: 1;

  62. }

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

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

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

  66.   }

  67. 

  68.   [dir="rtl"] :is([data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper]) {

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

  70.   }

  71. }

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

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

  74. }

  75. [dir="rtl"] :is([data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper]) {

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

  77. }