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

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

  25. 

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

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

  28. 

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

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

  31.       }

  32.     }

  33.   }

  34. }

  35. 

  36. /**

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

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

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

  40.  */

  41. .admin-toolbar__displace-placeholder {

  42.   position: absolute;

  43.   inset-block-start: 0;

  44.   inset-inline-start: 0;

  45. 

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

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

  48.   }

  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 (--admin-toolbar-desktop) {

  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 (--admin-toolbar-desktop) {

  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: 300px) {

  87.     min-height: 20rem;

  88.   }

  89. }

  90. 

  91. .admin-toolbar__back-button {

  92.   display: none;

  93.   flex-grow: 0;

  94. }

  95. 

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

  97.   .admin-toolbar__back-button {

  98.     display: flex;

  99. 

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

  101.       display: none;

  102.     }

  103.   }

  104. 

  105.   .admin-toolbar__logo {

  106.     display: none;

  107. 

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

  109.       display: inline-flex;

  110.     }

  111.   }

  112. }

  113. 

  114. .admin-toolbar__close-button {

  115.   flex-grow: 0;

  116.   justify-self: end;

  117.   margin-inline-start: auto;

  118. 

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

  120.     display: none;

  121.   }

  122. }

  123. 

  124. .admin-toolbar__expand-button {

  125.   display: none;

  126.   align-items: center;

  127.   justify-content: center;

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

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

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

  131.   cursor: pointer;

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

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

  134.   border-radius: 50%;

  135.   background-color: transparent;

  136. 

  137.   &:hover {

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

  139.   }

  140. 

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

  142.     display: flex;

  143.   }

  144. }

  145. 

  146. .admin-toolbar__expand-button-chevron {

  147.   flex-shrink: 0;

  148.   fill: currentColor;

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

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

  151.   transition:

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

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

  154.   opacity: 0;

  155. 

  156.   [data-admin-toolbar-transitions] 
  157. 

  158.   [dir="rtl"] 
  159. 

  160.   .admin-toolbar__expand-button[aria-expanded="true"] 
  161.   }

  162. }

  163. 

  164. .admin-toolbar__header {

  165.   position: sticky;

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

  167.   inset-block-start: 0;

  168.   display: flex;

  169.   align-items: center;

  170.   justify-content: space-between;

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

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

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

  174. 

  175.   & + .toolbar-block {

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

  177. 

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

  179.       margin-block-start: 0;

  180.     }

  181.   }

  182. 

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

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

  185.       display: none;

  186.     }

  187.   }

  188. 

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

  190.     position: static;

  191.     align-items: start;

  192.     margin-block-start: revert;

  193.     padding-block-start: revert;

  194.     padding-block-end: 0;

  195.   }

  196. }

  197. 

  198. .admin-toolbar__item {

  199.   flex: 1 0 100%;

  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.  * Element is used to overlay the content when Toolbar is expanded in smaller devices.

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

  322.  */

  323. .admin-toolbar-overlay {

  324.   position: fixed;

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

  326.   inset-block-start: 0;

  327.   inset-inline-start: 0;

  328.   display: none;

  329.   width: 100vw;

  330.   height: 100vh;

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

  332. 

  333.   :where([data-admin-toolbar="expanded"]) 
  334. 

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

  336.     display: none;

  337.   }

  338. }

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