admin-toolbar.pcss.css

Same filename in other branches
  1. 10 core/modules/navigation/css/components/admin-toolbar.pcss.css

Admin Toolbar styles.

File

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.   height: 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.     transform: none;

  82.   }

  83. 

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

  85.     min-height: 20rem;

  86.   }

  87. }

  88. 

  89. .admin-toolbar__back-button {

  90.   display: none;

  91.   flex-grow: 0;

  92. }

  93. 

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

  95.   .admin-toolbar__back-button {

  96.     display: flex;

  97. 

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

  99.       display: none;

  100.     }

  101.   }

  102. 

  103.   .admin-toolbar__logo {

  104.     display: none;

  105. 

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

  107.       display: inline-flex;

  108.     }

  109.   }

  110. }

  111. 

  112. .admin-toolbar__close-button {

  113.   flex-grow: 0;

  114.   justify-self: end;

  115.   margin-inline-start: auto;

  116. 

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

  118.     display: none;

  119.   }

  120. }

  121. 

  122. .admin-toolbar__expand-button {

  123.   display: none;

  124.   align-items: center;

  125.   justify-content: center;

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

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

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

  129.   cursor: pointer;

  130.   color: var(--admin-toolbar-color-gray-500);

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

  132.   border-radius: 50%;

  133.   background-color: transparent;

  134. 

  135.   &:hover {

  136.     color: var(--admin-toolbar-color-blue-700);

  137.   }

  138. 

  139.   &::before {

  140.     display: block;

  141.     flex-shrink: 0;

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

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

  144.     content: "";

  145.     transition:

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

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

  148.     opacity: 0;

  149.     background-color: currentColor;

  150.     mask-repeat: no-repeat;

  151.     mask-position: center center;

  152.     mask-size: 100% auto;

  153.     mask-image: url(../../assets/icons/chevron.svg);

  154. 

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

  157.     [dir="rtl"] 
  158. 

  159.     @media (--forced-colors) {

  160.       background: canvastext;

  161.     }

  162.   }

  163. 

  164.   &[aria-expanded="true"] {

  165.     &::before {

  166.       transform: rotate(180deg);

  167. 

  168.       [dir="rtl"] 
  169.     }

  170.   }

  171. 

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

  173.     display: flex;

  174.   }

  175. }

  176. 

  177. .admin-toolbar__header {

  178.   position: sticky;

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

  180.   inset-block-start: 0;

  181.   display: flex;

  182.   align-items: center;

  183.   justify-content: space-between;

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

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

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

  187. 

  188.   & + .toolbar-block {

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

  190. 

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

  192.       margin-block-start: 0;

  193.     }

  194.   }

  195. 

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

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

  198.       display: none;

  199.     }

  200.   }

  201. 

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

  203.     position: static;

  204.     align-items: start;

  205.     margin-block-start: revert;

  206.     padding-block-start: revert;

  207.     padding-block-end: 0;

  208.   }

  209. }

  210. 

  211. .admin-toolbar__item {

  212.   flex: 1 0 100%;

  213. }

  214. 

  215. .admin-toolbar__logo {

  216.   display: inline-flex;

  217.   overflow: hidden;

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

  219. 

  220.   &:hover {

  221.     background-color: transparent;

  222.   }

  223. 

  224.   & img {

  225.     display: block;

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

  227.   }

  228. }

  229. 

  230. /**

  231.  * Scroll wrapper for Mobile.

  232.  */

  233. .admin-toolbar__scroll-wrapper {

  234.   display: flex;

  235.   overflow-y: auto;

  236.   flex-direction: column;

  237.   height: 100%;

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

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

  240.   background-repeat: no-repeat;

  241.   background-attachment: local, scroll;

  242.   background-position-y: 48px;

  243.   background-size:

  244.     100% 40px,

  245.     100% 16px;

  246. 

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

  248.     display: contents;

  249.     overflow-y: unset;

  250.     background: none;

  251.   }

  252. }

  253. 

  254. /**

  255.  * Content region.

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

  257.  */

  258. .admin-toolbar__content {

  259.   display: grid;

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

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

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

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

  264. 

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

  266.     display: flex;

  267.     overflow-x: hidden;

  268.     overflow-y: auto;

  269.     flex-direction: column;

  270.     flex-grow: 1;

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

  272.     background:

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

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

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

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

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

  278.     background-repeat: no-repeat;

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

  280.     background-size:

  281.       100% 40px,

  282.       100% 40px,

  283.       100% 16px,

  284.       100% 16px;

  285.   }

  286. }

  287. 

  288. /**

  289.  * Sticky bottom region.

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

  291.  */

  292. .admin-toolbar__footer {

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

  294.   display: grid;

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

  296.   margin-block-start: auto;

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

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

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

  300. 

  301.   & > .toolbar-block {

  302.     &:last-of-type {

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

  304.     }

  305.   }

  306. 

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

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

  309. 

  310.     position: sticky;

  311.     bottom: 0;

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

  313.   }

  314. }

  315. 

  316. /**

  317.  * Sidebar toggle.

  318.  */

  319. .admin-toolbar__toggle {

  320.   display: none;

  321. 

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

  323.     display: flex;

  324.   }

  325. }

  326. 

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

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

  329.   [data-admin-toolbar="expanded"] 
  330. }

  331. 

  332. /**

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

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

  335.  */

  336. .admin-toolbar-overlay {

  337.   position: fixed;

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

  339.   inset-block-start: 0;

  340.   inset-inline-start: 0;

  341.   display: none;

  342.   width: 100vw;

  343.   height: 100vh;

  344.   background-color: rgba(0, 0, 0, 0.14);

  345. 

  346.   :where([data-admin-toolbar="expanded"]) 
  347. 

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

  349.     display: none;

  350.   }

  351. }

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