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.   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: var(--drupal-displace-offset-top, 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-500);

  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-blue-700);

  139.   }

  140. 

  141.   &::before {

  142.     display: block;

  143.     flex-shrink: 0;

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

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

  146.     content: "";

  147.     transition:

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

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

  150.     opacity: 0;

  151.     background-color: currentColor;

  152.     mask-repeat: no-repeat;

  153.     mask-position: center center;

  154.     mask-size: 100% auto;

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

  156. 

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

  159.     [dir="rtl"] 
  160. 

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

  162.       background: canvastext;

  163.     }

  164.   }

  165. 

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

  167.     &::before {

  168.       transform: rotate(180deg);

  169. 

  170.       [dir="rtl"] 
  171.     }

  172.   }

  173. 

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

  175.     display: flex;

  176.   }

  177. }

  178. 

  179. .admin-toolbar__header {

  180.   position: sticky;

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

  182.   inset-block-start: 0;

  183.   display: flex;

  184.   align-items: center;

  185.   justify-content: space-between;

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

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

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

  189. 

  190.   & + .toolbar-block {

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

  192. 

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

  194.       margin-block-start: 0;

  195.     }

  196.   }

  197. 

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

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

  200.       display: none;

  201.     }

  202.   }

  203. 

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

  205.     position: static;

  206.     align-items: start;

  207.     margin-block-start: revert;

  208.     padding-block-start: revert;

  209.     padding-block-end: 0;

  210.   }

  211. }

  212. 

  213. .admin-toolbar__item {

  214.   flex: 1 0 100%;

  215. }

  216. 

  217. .admin-toolbar__logo {

  218.   display: inline-flex;

  219.   overflow: hidden;

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

  221. 

  222.   &:hover {

  223.     background-color: transparent;

  224.   }

  225. 

  226.   & img {

  227.     display: block;

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

  229.   }

  230. }

  231. 

  232. /**

  233.  * Scroll wrapper for Mobile.

  234.  */

  235. .admin-toolbar__scroll-wrapper {

  236.   display: flex;

  237.   overflow-y: auto;

  238.   flex-direction: column;

  239.   height: 100%;

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

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

  242.   background-repeat: no-repeat;

  243.   background-attachment: local, scroll;

  244.   background-position-y: 48px;

  245.   background-size:

  246.     100% 40px,

  247.     100% 16px;

  248. 

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

  250.     display: contents;

  251.     overflow-y: unset;

  252.     background: none;

  253.   }

  254. }

  255. 

  256. /**

  257.  * Content region.

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

  259.  */

  260. .admin-toolbar__content {

  261.   display: grid;

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

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

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

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

  266. 

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

  268.     display: flex;

  269.     overflow-x: hidden;

  270.     overflow-y: auto;

  271.     flex-direction: column;

  272.     flex-grow: 1;

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

  274.     background:

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

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

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

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

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

  280.     background-repeat: no-repeat;

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

  282.     background-size:

  283.       100% 40px,

  284.       100% 40px,

  285.       100% 16px,

  286.       100% 16px;

  287.   }

  288. }

  289. 

  290. /**

  291.  * Sticky bottom region.

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

  293.  */

  294. .admin-toolbar__footer {

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

  296.   display: grid;

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

  298.   margin-block-start: auto;

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

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

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

  302. 

  303.   & > .toolbar-block {

  304.     &:last-of-type {

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

  306.     }

  307.   }

  308. 

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

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

  311. 

  312.     position: sticky;

  313.     bottom: 0;

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

  315.   }

  316. }

  317. 

  318. /**

  319.  * Sidebar toggle.

  320.  */

  321. .admin-toolbar__toggle {

  322.   display: none;

  323. 

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

  325.     display: flex;

  326.   }

  327. }

  328. 

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

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

  331.   [data-admin-toolbar="expanded"] 
  332. }

  333. 

  334. /**

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

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

  337.  */

  338. .admin-toolbar-overlay {

  339.   position: fixed;

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

  341.   inset-block-start: 0;

  342.   inset-inline-start: 0;

  343.   display: none;

  344.   width: 100vw;

  345.   height: 100vh;

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

  347. 

  348.   :where([data-admin-toolbar="expanded"]) 
  349. 

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

  351.     display: none;

  352.   }

  353. }

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