admin-toolbar.css

Admin Toolbar styles.

File

View on git.drupalcode.org

core/modules/navigation/css/components/admin-toolbar.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. /* cspell:ignore csvg cpath */

  8. /**

  9.  * @file

  10.  * Admin Toolbar styles.

  11.  */

  12. /**

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

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

  15.  */

  16. body {

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

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

  19. 

  20.   [data-admin-toolbar="expanded"] 
  21.   }

  22. }

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

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

  25.   .admin-toolbar {

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

  27. 

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

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

  30. 

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

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

  33.       }

  34.     }

  35.   }

  36. }

  37. /**

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

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

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

  41.  */

  42. .admin-toolbar__displace-placeholder {

  43.   position: absolute;

  44.   inset-block-start: 0;

  45.   inset-inline-start: 0;

  46. 

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

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

  49.   }

  50. }

  51. /**

  52.  * The Admin toolbar component.

  53.  */

  54. .admin-toolbar {

  55.   position: fixed;

  56.   inset-block-start: 0;

  57.   inset-inline-start: 0;

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

  59.   display: flex;

  60.   flex-direction: column;

  61.   block-size: 100vh;

  62.   transform: translateX(-100%);

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

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

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

  66. 

  67.   [dir="rtl"] 
  68.   }

  69. 

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

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

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

  73. 

  74.       [dir="rtl"] 
  75.     }

  76.   }

  77. 

  78.   [data-admin-toolbar="expanded"] 
  79. 

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

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

  82.     transform: none;

  83.     inset-block-start: 0;

  84.   }

  85. 

  86.   @media only screen and (max-height: 18.75rem) {

  87.     min-height: 20rem;

  88.   }

  89. }

  90. .admin-toolbar__back-button {

  91.   display: none;

  92.   flex-grow: 0;

  93. }

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

  95.   .admin-toolbar__back-button {

  96.     display: flex;

  97. 

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

  99.       display: none;

  100.     }

  101.   }

  102. 

  103.   .admin-toolbar__logo {

  104.     display: none;

  105. 

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

  107.       display: inline-flex;

  108.     }

  109.   }

  110. }

  111. .admin-toolbar__close-button {

  112.   flex-grow: 0;

  113.   justify-self: end;

  114.   margin-inline-start: auto;

  115. 

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

  117.     display: none;

  118.   }

  119. }

  120. .admin-toolbar__expand-button {

  121.   display: none;

  122.   align-items: center;

  123.   justify-content: center;

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

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

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

  127.   cursor: pointer;

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

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

  130.   border-radius: 50%;

  131.   background-color: transparent;

  132. 

  133.   &:hover {

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

  135.   }

  136. 

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

  138.     display: flex;

  139.   }

  140. }

  141. .admin-toolbar__expand-button-chevron {

  142.   flex-shrink: 0;

  143.   fill: currentColor;

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

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

  146.   transition:

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

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

  149.   opacity: 0;

  150. 

  151.   [data-admin-toolbar-transitions] 
  152. 

  153.   [dir="rtl"] 
  154. 

  155.   .admin-toolbar__expand-button[aria-expanded="true"] 
  156.   }

  157. }

  158. .admin-toolbar__header {

  159.   position: sticky;

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

  161.   inset-block-start: 0;

  162.   display: flex;

  163.   align-items: center;

  164.   justify-content: space-between;

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

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

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

  168. 

  169.   & + .toolbar-block {

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

  171. 

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

  173.       margin-block-start: 0;

  174.     }

  175.   }

  176. 

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

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

  179.       display: none;

  180.     }

  181.   }

  182. 

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

  184.     position: static;

  185.     align-items: start;

  186.     margin-block-start: revert;

  187.     padding-block-start: revert;

  188.     padding-block-end: 0;

  189.   }

  190. }

  191. .admin-toolbar__logo {

  192.   display: inline-flex;

  193.   overflow: hidden;

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

  195. 

  196.   &:hover {

  197.     background-color: transparent;

  198.   }

  199. 

  200.   & img {

  201.     display: block;

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

  203.   }

  204. }

  205. /**

  206.  * Scroll wrapper for Mobile.

  207.  */

  208. .admin-toolbar__scroll-wrapper {

  209.   display: flex;

  210.   overflow-y: auto;

  211.   flex-direction: column;

  212.   height: 100%;

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

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

  215.   background-repeat: no-repeat;

  216.   background-attachment: local, scroll;

  217.   background-position-y: 3rem;

  218.   background-size:

  219.     100% 2.5rem,

  220.     100% 1rem;

  221. 

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

  223.     display: contents;

  224.     overflow-y: unset;

  225.     background: none;

  226.   }

  227. }

  228. /**

  229.  * Content region.

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

  231.  */

  232. .admin-toolbar__content {

  233.   display: grid;

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

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

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

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

  238. 

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

  240.     display: flex;

  241.     overflow-x: hidden;

  242.     overflow-y: auto;

  243.     flex-direction: column;

  244.     flex-grow: 1;

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

  246.     background:

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

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

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

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

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

  252.     background-repeat: no-repeat;

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

  254.     background-size:

  255.       100% 2.5rem,

  256.       100% 2.5rem,

  257.       100% 1rem,

  258.       100% 1rem;

  259.   }

  260. }

  261. /**

  262.  * Sticky bottom region.

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

  264.  */

  265. .admin-toolbar__footer {

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

  267.   display: grid;

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

  269.   margin-block-start: auto;

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

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

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

  273. 

  274.   & > .toolbar-block {

  275.     &:last-of-type {

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

  277.     }

  278.   }

  279. 

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

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

  282. 

  283.     position: sticky;

  284.     bottom: 0;

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

  286.   }

  287. }

  288. /**

  289.  * Sidebar toggle.

  290.  */

  291. .admin-toolbar__toggle {

  292.   display: none;

  293. 

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

  295.     display: flex;

  296.   }

  297. }

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

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

  300.   [data-admin-toolbar="expanded"] 
  301. }

  302. /**

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

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

  305.  */

  306. .admin-toolbar-overlay {

  307.   position: fixed;

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

  309.   inset-block-start: 0;

  310.   inset-inline-start: 0;

  311.   display: none;

  312.   width: 100vw;

  313.   height: 100vh;

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

  315. 

  316.   :where([data-admin-toolbar="expanded"]) 
  317. 

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

  319.     display: none;

  320.   }

  321. }

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