admin-toolbar.pcss.css

Same filename and directory in other branches
  1. 10 core/modules/navigation/css/components/admin-toolbar.pcss.css
  2. 11.x core/modules/navigation/css/components/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: 80vw;

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

  16. 

  17.   @media (--admin-toolbar-tablet) {

  18.     --admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));

  19.   }

  20. 

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

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

  23. 

  24.     [data-admin-toolbar="expanded"] 
  25.   }

  26. }

  27. 

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

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

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

  31.     &.admin-toolbar {

  32.       transition:

  33.         visibility var(--admin-toolbar-transition),

  34.         transform var(--admin-toolbar-transition);

  35. 

  36.       @media not (--admin-toolbar-desktop) {

  37.         visibility: hidden;

  38.       }

  39. 

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

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

  42. 

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

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

  45.         }

  46.       }

  47.     }

  48.   }

  49. }

  50. 

  51. /**

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

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

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

  55.  */

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

  57.   .admin-toolbar__displace-placeholder {

  58.     position: absolute;

  59.     inset-block-start: 0;

  60.     inset-inline-start: 0;

  61. 

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

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

  64.     }

  65.   }

  66. }

  67. 

  68. /**

  69.  * The Admin toolbar component.

  70.  */

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

  72.   &.admin-toolbar {

  73.     position: fixed;

  74.     inset-block-start: 0;

  75.     inset-inline-start: 0;

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

  77.     display: flex;

  78.     flex-direction: column;

  79.     block-size: 100vh;

  80.     transform: translateX(-100%);

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

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

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

  84. 

  85.     [dir="rtl"] 
  86.     }

  87. 

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

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

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

  91. 

  92.         [dir="rtl"] 
  93.       }

  94.     }

  95. 

  96.     [data-admin-toolbar="expanded"] 
  97. 

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

  99.       transform: none;

  100.       inset-block-start: 0;

  101.     }

  102. 

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

  104.       min-height: 20rem;

  105.     }

  106.   }

  107. 

  108.   .admin-toolbar__back-button {

  109.     display: none;

  110.     flex-grow: 0;

  111.   }

  112. 

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

  114.     .admin-toolbar__back-button {

  115.       display: flex;

  116. 

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

  118.         display: none;

  119.       }

  120.     }

  121. 

  122.     .admin-toolbar__logo {

  123.       display: none;

  124. 

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

  126.         display: inline-flex;

  127.       }

  128.     }

  129.   }

  130. 

  131.   .admin-toolbar__close-button {

  132.     flex-grow: 0;

  133.     justify-self: end;

  134.     margin-inline-start: auto;

  135. 

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

  137.       display: none;

  138.     }

  139.   }

  140. 

  141.   .admin-toolbar__expand-button {

  142.     display: none;

  143.     align-items: center;

  144.     justify-content: center;

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

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

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

  148.     cursor: pointer;

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

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

  151.     border-radius: 50%;

  152.     background-color: transparent;

  153. 

  154.     &:hover {

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

  156.     }

  157. 

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

  159.       display: flex;

  160.     }

  161.   }

  162. 

  163.   .admin-toolbar__expand-button-chevron {

  164.     flex-shrink: 0;

  165.     fill: currentColor;

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

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

  168.     transition:

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

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

  171.     opacity: 0;

  172. 

  173.     [data-admin-toolbar-transitions] 
  174. 

  175.     [dir="rtl"] 
  176. 

  177.     .admin-toolbar__expand-button[aria-expanded="true"] 
  178.     }

  179.   }

  180. 

  181.   .admin-toolbar__header {

  182.     position: sticky;

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

  184.     inset-block-start: 0;

  185.     display: flex;

  186.     align-items: center;

  187.     justify-content: space-between;

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

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

  190.     padding-block-end: var(--admin-toolbar-space-4);

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

  192. 

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

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

  195.         display: none;

  196.       }

  197.     }

  198. 

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

  200.       position: static;

  201.       align-items: start;

  202.       margin-block-start: revert;

  203.       padding-block-start: revert;

  204.     }

  205.   }

  206. 

  207.   .admin-toolbar__logo {

  208.     display: inline-flex;

  209.     overflow: hidden;

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

  211. 

  212.     &:hover {

  213.       background-color: transparent;

  214.     }

  215. 

  216.     & img {

  217.       display: block;

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

  219.     }

  220.   }

  221. 

  222.   /**

  223.   * Scroll wrapper for Mobile.

  224.   */

  225.   .admin-toolbar__scroll-wrapper {

  226.     display: flex;

  227.     overflow-y: auto;

  228.     flex-direction: column;

  229.     height: 100%;

  230.     border-inline-end: solid 1px transparent;

  231.     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));

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

  233.     background-repeat: no-repeat;

  234.     background-attachment: local, scroll;

  235.     background-position-y: 48px;

  236.     background-size:

  237.       100% 40px,

  238.       100% 16px;

  239. 

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

  241.       display: contents;

  242.       overflow-y: unset;

  243.       background: none;

  244.     }

  245.   }

  246. 

  247.   /**

  248.   * Content region.

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

  250.   */

  251.   .admin-toolbar__content {

  252.     display: grid;

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

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

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

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

  257. 

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

  259.       display: flex;

  260.       overflow-x: hidden;

  261.       overflow-y: auto;

  262.       flex-direction: column;

  263.       flex-grow: 1;

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

  265.       background:

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

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

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

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

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

  271.       background-repeat: no-repeat;

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

  273.       background-size:

  274.         100% 40px,

  275.         100% 40px,

  276.         100% 16px,

  277.         100% 16px;

  278.     }

  279.   }

  280. 

  281.   /**

  282.   * Sticky bottom region.

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

  284.   */

  285.   .admin-toolbar__footer {

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

  287.     display: grid;

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

  289.     margin-block-start: auto;

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

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

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

  293. 

  294.     & > .toolbar-block {

  295.       &:last-of-type {

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

  297.       }

  298.     }

  299. 

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

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

  302. 

  303.       position: sticky;

  304.       bottom: 0;

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

  306.     }

  307.   }

  308. 

  309.   /**

  310.   * Sidebar toggle.

  311.   */

  312.   .admin-toolbar__toggle {

  313.     display: none;

  314. 

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

  316.       display: flex;

  317.     }

  318.   }

  319. 

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

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

  322.     [data-admin-toolbar="expanded"] 
  323.   }

  324. }

  325. 

  326. /**

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

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

  329.  */

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

  331.   &.admin-toolbar-overlay {

  332.     position: fixed;

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

  334.     inset-block-start: 0;

  335.     inset-inline-start: 0;

  336.     display: none;

  337.     width: 100vw;

  338.     height: 100vh;

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

  340. 

  341.     :where([data-admin-toolbar="expanded"]) 
  342. 

  343.     @media (forced-colors: active) {

  344.       opacity: 0.14;

  345.       background-color: canvasText;

  346.     }

  347. 

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

  349.       display: none;

  350.     }

  351.   }

  352. }

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