admin-toolbar.css

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

Admin Toolbar styles.

File

core/modules/navigation/css/components/admin-toolbar.css

View on git.drupalcode.org
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"] body {

  21.   --admin-toolbar-sidebar-width: 80vw;

  22. }

  23. @media (min-width: 35rem) {

  24.   [data-admin-toolbar="expanded"] body {

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

  26.   }

  27. }

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

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

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

  31. }

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

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

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

  35.   }

  36. 

  37.   :is([data-admin-toolbar-transitions] .admin-toolbar) ~ .dialog-off-canvas-main-canvas {

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

  39.   }

  40. }

  41. /**

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

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

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

  45.  */

  46. .admin-toolbar__displace-placeholder {

  47.   position: absolute;

  48.   inset-block-start: 0;

  49.   inset-inline-start: 0;

  50. }

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

  52.   .admin-toolbar__displace-placeholder {

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

  54.   }

  55. }

  56. /**

  57.  * The Admin toolbar component.

  58.  */

  59. .admin-toolbar {

  60.   position: fixed;

  61.   inset-block-start: 0;

  62.   inset-inline-start: 0;

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

  64.   display: flex;

  65.   flex-direction: column;

  66.   block-size: 100vh;

  67.   transform: translateX(-100%);

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

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

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

  71. }

  72. [dir="rtl"] .admin-toolbar {

  73.   right: 0;

  74.   transform: translateX(100%);

  75. }

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

  77.   [dir="rtl"] .admin-toolbar {

  78.     transform: none;

  79.   }

  80. }

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

  82.   .admin-toolbar ~ .dialog-off-canvas-main-canvas {

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

  84.   }

  85. 

  86.   [dir="rtl"] :is(.admin-toolbar ~ .dialog-off-canvas-main-canvas) {

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

  88.   }

  89. }

  90. [data-admin-toolbar="expanded"] .admin-toolbar {

  91.   transform: none;

  92. }

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

  94.   .admin-toolbar {

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

  96.     transform: none;

  97.     inset-block-start: 0;

  98.   }

  99. }

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

  101.   .admin-toolbar {

  102.     min-height: 20rem;

  103.   }

  104. }

  105. .admin-toolbar__back-button {

  106.   display: none;

  107.   flex-grow: 0;

  108. }

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

  110.   display: flex;

  111. }

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

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

  114.     display: none;

  115.   }

  116. }

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

  118.   display: none;

  119. }

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

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

  122.     display: inline-flex;

  123.   }

  124. }

  125. .admin-toolbar__close-button {

  126.   flex-grow: 0;

  127.   justify-self: end;

  128.   margin-inline-start: auto;

  129. }

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

  131.   .admin-toolbar__close-button {

  132.     display: none;

  133.   }

  134. }

  135. .admin-toolbar__expand-button {

  136.   display: none;

  137.   align-items: center;

  138.   justify-content: center;

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

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

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

  142.   cursor: pointer;

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

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

  145.   border-radius: 50%;

  146.   background-color: transparent;

  147. }

  148. .admin-toolbar__expand-button:hover {

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

  150. }

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

  152.   .admin-toolbar__expand-button {

  153.     display: flex;

  154.   }

  155. }

  156. .admin-toolbar__expand-button-chevron {

  157.   flex-shrink: 0;

  158.   fill: currentColor;

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

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

  161.   transition:

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

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

  164.   opacity: 0;

  165. }

  166. [data-admin-toolbar-transitions] .admin-toolbar__expand-button-chevron {

  167.   opacity: 1;

  168. }

  169. [dir="rtl"] .admin-toolbar__expand-button-chevron {

  170.   rotate: 180deg;

  171. }

  172. .admin-toolbar__expand-button[aria-expanded="true"] .admin-toolbar__expand-button-chevron {

  173.   rotate: 180deg;

  174. }

  175. [dir="rtl"] :is(.admin-toolbar__expand-button[aria-expanded="true"] .admin-toolbar__expand-button-chevron) {

  176.   rotate: 0deg;

  177. }

  178. .admin-toolbar__header {

  179.   position: sticky;

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

  181.   inset-block-start: 0;

  182.   display: flex;

  183.   align-items: center;

  184.   justify-content: space-between;

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

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

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

  188. }

  189. .admin-toolbar__header + .toolbar-block {

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

  191. }

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

  193.   .admin-toolbar__header + .toolbar-block {

  194.     margin-block-start: 0;

  195.   }

  196. }

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

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

  199.     display: none;

  200.   }

  201. }

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

  203.   .admin-toolbar__header {

  204.     position: static;

  205.     align-items: start;

  206.     margin-block-start: revert;

  207.     padding-block-start: revert;

  208.     padding-block-end: 0;

  209.   }

  210. }

  211. .admin-toolbar__item {

  212.   flex: 1 0 100%;

  213. }

  214. .admin-toolbar__logo {

  215.   display: inline-flex;

  216.   overflow: hidden;

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

  218. }

  219. .admin-toolbar__logo:hover {

  220.   background-color: transparent;

  221. }

  222. .admin-toolbar__logo img {

  223.   display: block;

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

  225. }

  226. /**

  227.  * Scroll wrapper for Mobile.

  228.  */

  229. .admin-toolbar__scroll-wrapper {

  230.   display: flex;

  231.   overflow-y: auto;

  232.   flex-direction: column;

  233.   height: 100%;

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

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

  236.   background-repeat: no-repeat;

  237.   background-attachment: local, scroll;

  238.   background-position-y: 3rem;

  239.   background-size:

  240.     100% 2.5rem,

  241.     100% 1rem;

  242. }

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

  244.   .admin-toolbar__scroll-wrapper {

  245.     display: contents;

  246.     overflow-y: unset;

  247.     background: none;

  248.   }

  249. }

  250. /**

  251.  * Content region.

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

  253.  */

  254. .admin-toolbar__content {

  255.   display: grid;

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

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

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

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

  260. }

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

  262.   .admin-toolbar__content {

  263.     display: flex;

  264.     overflow-x: hidden;

  265.     overflow-y: auto;

  266.     flex-direction: column;

  267.     flex-grow: 1;

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

  269.     background:

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

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

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

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

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

  275.     background-repeat: no-repeat;

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

  277.     background-size:

  278.       100% 2.5rem,

  279.       100% 2.5rem,

  280.       100% 1rem,

  281.       100% 1rem;

  282.   }

  283. }

  284. /**

  285.  * Sticky bottom region.

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

  287.  */

  288. .admin-toolbar__footer {

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

  290.   display: grid;

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

  292.   margin-block-start: auto;

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

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

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

  296. }

  297. .admin-toolbar__footer > .toolbar-block:last-of-type {

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

  299. }

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

  301.   .admin-toolbar__footer {

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

  303. 

  304.     position: sticky;

  305.     bottom: 0;

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

  307.   }

  308. }

  309. /**

  310.  * Sidebar toggle.

  311.  */

  312. .admin-toolbar__toggle {

  313.   display: none;

  314. }

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

  316.   .admin-toolbar__toggle {

  317.     display: flex;

  318.   }

  319. }

  320. [data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:hover + .admin-toolbar__tooltip),

  321. [data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:focus + .admin-toolbar__tooltip) {

  322.   display: none;

  323. }

  324. /**

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

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

  327.  */

  328. .admin-toolbar-overlay {

  329.   position: fixed;

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

  331.   inset-block-start: 0;

  332.   inset-inline-start: 0;

  333.   display: none;

  334.   width: 100vw;

  335.   height: 100vh;

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

  337. }

  338. :where([data-admin-toolbar="expanded"]) .admin-toolbar-overlay {

  339.   display: block;

  340. }

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

  342.   .admin-toolbar-overlay {

  343.     display: none;

  344.   }

  345. }

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