admin-toolbar.pcss.css

Admin Toolbar styles.

File

View on git.drupalcode.org

core/modules/navigation/css/components/admin-toolbar.pcss.css

View source 
  1. /* cspell:ignore csvg cpath */

  2. /**

  3.  * @file

  4.  * Admin Toolbar styles.

  5.  */

  6. 

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

  8. 

  9. /**

  10.  * Sidebar width is attached to the  element because it's used as a

  11.  * fallback value to the margin-inline-start property of the layout container.

  12.  */

  13. body {

  14.   --admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));

  15.   --admin-toolbar-sidebar-header: calc(3.5 * var(--admin-toolbar-rem));

  16. 

  17.   [data-admin-toolbar="expanded"] 
  18.   }

  19. }

  20. 

  21. /* We apply transitions after page load to avoid shifts. */

  22. [data-admin-toolbar-transitions] {

  23.   :is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  24.     &.admin-toolbar {

  25.       transition: transform var(--admin-toolbar-transition);

  26. 

  27.       @media (--admin-toolbar-desktop) {

  28.         transition: width var(--admin-toolbar-transition);

  29. 

  30.         ~ .dialog-off-canvas-main-canvas {

  31.           transition: margin-inline-start var(--admin-toolbar-transition);

  32.         }

  33.       }

  34.     }

  35.   }

  36. }

  37. 

  38. /**

  39.  * This zero height div has the [data-offset-left] attribute for

  40.  * Drupal.displace() to measure. It purposefully does not have any transitions

  41.  * because we want Drupal.displace() to measure the width immediately

  42.  */

  43. :is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  44.   .admin-toolbar__displace-placeholder {

  45.     position: absolute;

  46.     inset-block-start: 0;

  47.     inset-inline-start: 0;

  48. 

  49.     @media (--admin-toolbar-desktop) {

  50.       width: var(--admin-toolbar-sidebar-width);

  51.     }

  52.   }

  53. }

  54. 

  55. /**

  56.  * The Admin toolbar component.

  57.  */

  58. :is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  59.   &.admin-toolbar {

  60.     position: fixed;

  61.     inset-block-start: 0;

  62.     inset-inline-start: 0;

  63.     z-index: var(--admin-toolbar-z-index);

  64.     display: flex;

  65.     flex-direction: column;

  66.     block-size: 100vh;

  67.     transform: translateX(-100%);

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

  69.     font-family: var(--admin-toolbar-font-family);

  70.     inline-size: calc(var(--admin-toolbar-sidebar-width) + 1px);

  71. 

  72.     [dir="rtl"] 
  73.     }

  74. 

  75.     & ~ .dialog-off-canvas-main-canvas {

  76.       @media (--admin-toolbar-desktop) {

  77.         margin-inline-start: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width));

  78. 

  79.         [dir="rtl"] 
  80.       }

  81.     }

  82. 

  83.     [data-admin-toolbar="expanded"] 
  84. 

  85.     @media (--admin-toolbar-desktop) {

  86.       transform: none;

  87.       inset-block-start: 0;

  88.     }

  89. 

  90.     @media only screen and (max-height: 300px) {

  91.       min-height: 20rem;

  92.     }

  93.   }

  94. 

  95.   .admin-toolbar__back-button {

  96.     display: none;

  97.     flex-grow: 0;

  98.   }

  99. 

  100.   &.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) {

  101.     .admin-toolbar__back-button {

  102.       display: flex;

  103. 

  104.       @media (--admin-toolbar-desktop) {

  105.         display: none;

  106.       }

  107.     }

  108. 

  109.     .admin-toolbar__logo {

  110.       display: none;

  111. 

  112.       @media (--admin-toolbar-desktop) {

  113.         display: inline-flex;

  114.       }

  115.     }

  116.   }

  117. 

  118.   .admin-toolbar__close-button {

  119.     flex-grow: 0;

  120.     justify-self: end;

  121.     margin-inline-start: auto;

  122. 

  123.     @media (--admin-toolbar-desktop) {

  124.       display: none;

  125.     }

  126.   }

  127. 

  128.   .admin-toolbar__expand-button {

  129.     display: none;

  130.     align-items: center;

  131.     justify-content: center;

  132.     width: calc(2.25 * var(--admin-toolbar-rem));

  133.     height: calc(2.25 * var(--admin-toolbar-rem));

  134.     margin-inline-start: calc(0.125 * var(--admin-toolbar-rem));

  135.     cursor: pointer;

  136.     color: var(--admin-toolbar-color-gray-800);

  137.     border: 1px solid var(--admin-toolbar-color-gray-300);

  138.     border-radius: 50%;

  139.     background-color: transparent;

  140. 

  141.     &:hover {

  142.       color: var(--admin-toolbar-color-gray-990);

  143.     }

  144. 

  145.     @media (--admin-toolbar-desktop) {

  146.       display: flex;

  147.     }

  148.   }

  149. 

  150.   .admin-toolbar__expand-button-chevron {

  151.     flex-shrink: 0;

  152.     fill: currentColor;

  153.     width: calc(1 * var(--admin-toolbar-rem));

  154.     height: calc(1 * var(--admin-toolbar-rem));

  155.     transition:

  156.       opacity var(--admin-toolbar-transition),

  157.       rotate var(--admin-toolbar-transition);

  158.     opacity: 0;

  159. 

  160.     [data-admin-toolbar-transitions] 
  161. 

  162.     [dir="rtl"] 
  163. 

  164.     .admin-toolbar__expand-button[aria-expanded="true"] 
  165.     }

  166.   }

  167. 

  168.   .admin-toolbar__header {

  169.     position: sticky;

  170.     z-index: var(--admin-toolbar-z-index-header);

  171.     inset-block-start: 0;

  172.     display: flex;

  173.     align-items: center;

  174.     justify-content: space-between;

  175.     margin-block-start: calc(var(--admin-toolbar-sidebar-header) * -1);

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

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

  178. 

  179.     & + .toolbar-block {

  180.       margin-block-start: calc(var(--admin-toolbar-space-10) * -1);

  181. 

  182.       @media (--admin-toolbar-desktop) {

  183.         margin-block-start: 0;

  184.       }

  185.     }

  186. 

  187.     &:not(:has(.admin-toolbar__logo)) {

  188.       @media (--admin-toolbar-desktop) {

  189.         display: none;

  190.       }

  191.     }

  192. 

  193.     @media (--admin-toolbar-desktop) {

  194.       position: static;

  195.       align-items: start;

  196.       margin-block-start: revert;

  197.       padding-block-start: revert;

  198.       padding-block-end: 0;

  199.     }

  200.   }

  201. 

  202.   .admin-toolbar__logo {

  203.     display: inline-flex;

  204.     overflow: hidden;

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

  206. 

  207.     &:hover {

  208.       background-color: transparent;

  209.     }

  210. 

  211.     & img {

  212.       display: block;

  213.       max-width: var(--admin-toolbar-space-40);

  214.     }

  215.   }

  216. 

  217.   /**

  218.   * Scroll wrapper for Mobile.

  219.   */

  220.   .admin-toolbar__scroll-wrapper {

  221.     display: flex;

  222.     overflow-y: auto;

  223.     flex-direction: column;

  224.     height: 100%;

  225.     background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0));

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

  227.     background-repeat: no-repeat;

  228.     background-attachment: local, scroll;

  229.     background-position-y: 48px;

  230.     background-size:

  231.       100% 40px,

  232.       100% 16px;

  233. 

  234.     @media (--admin-toolbar-desktop) {

  235.       display: contents;

  236.       overflow-y: unset;

  237.       background: none;

  238.     }

  239.   }

  240. 

  241.   /**

  242.   * Content region.

  243.   * Region where most of the content will be printed.

  244.   */

  245.   .admin-toolbar__content {

  246.     display: grid;

  247.     gap: var(--admin-toolbar-space-12);

  248.     padding-block: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16);

  249.     padding-inline: var(--admin-toolbar-space-16);

  250.     border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);

  251. 

  252.     @media (--admin-toolbar-desktop) {

  253.       display: flex;

  254.       overflow-x: hidden;

  255.       overflow-y: auto;

  256.       flex-direction: column;

  257.       flex-grow: 1;

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

  259.       background:

  260.         linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),

  261.         linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,

  262.         radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),

  263.         radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;

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

  265.       background-repeat: no-repeat;

  266.       background-attachment: local, local, scroll, scroll;

  267.       background-size:

  268.         100% 40px,

  269.         100% 40px,

  270.         100% 16px,

  271.         100% 16px;

  272.     }

  273.   }

  274. 

  275.   /**

  276.   * Sticky bottom region.

  277.   * Region with less used items and button for collapse.

  278.   */

  279.   .admin-toolbar__footer {

  280.     z-index: var(--admin-toolbar-z-index-footer);

  281.     display: grid;

  282.     gap: var(--admin-toolbar-space-4);

  283.     margin-block-start: auto;

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

  285.     border-block-start: 1px solid var(--admin-toolbar-color-gray-200);

  286.     border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);

  287. 

  288.     & > .toolbar-block {

  289.       &:last-of-type {

  290.         margin-block-end: var(--admin-toolbar-space-12);

  291.       }

  292.     }

  293. 

  294.     @media (--admin-toolbar-desktop) {

  295.       --admin-toolbar-z-index-footer: -1;

  296. 

  297.       position: sticky;

  298.       bottom: 0;

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

  300.     }

  301.   }

  302. 

  303.   /**

  304.   * Sidebar toggle.

  305.   */

  306.   .admin-toolbar__toggle {

  307.     display: none;

  308. 

  309.     @media (--admin-toolbar-desktop) {

  310.       display: flex;

  311.     }

  312.   }

  313. 

  314.   [data-drupal-tooltip]:hover + .admin-toolbar__tooltip,

  315.   [data-drupal-tooltip]:focus + .admin-toolbar__tooltip {

  316.     [data-admin-toolbar="expanded"] 
  317.   }

  318. }

  319. 

  320. /**

  321.  * Element is used to overlay the content when Toolbar is expanded in smaller devices.

  322.  * It is created in the template templates/navigation.html.twig.

  323.  */

  324. :is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  325.   &.admin-toolbar-overlay {

  326.     position: fixed;

  327.     z-index: var(--admin-toolbar-z-index-overlay);

  328.     inset-block-start: 0;

  329.     inset-inline-start: 0;

  330.     display: none;

  331.     width: 100vw;

  332.     height: 100vh;

  333.     background-color: rgb(0, 0, 0, 0.14);

  334. 

  335.     :where([data-admin-toolbar="expanded"]) 
  336. 

  337.     @media (--admin-toolbar-desktop) {

  338.       display: none;

  339.     }

  340.   }

  341. }

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