admin-toolbar.css

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

  96.   }

  97. }

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

  99.   .admin-toolbar {

  100.     min-height: 20rem;

  101.   }

  102. }

  103. .admin-toolbar__back-button {

  104.   display: none;

  105.   flex-grow: 0;

  106. }

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

  108.   display: flex;

  109. }

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

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

  112.     display: none;

  113.   }

  114. }

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

  116.   display: none;

  117. }

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

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

  120.     display: inline-flex;

  121.   }

  122. }

  123. .admin-toolbar__close-button {

  124.   flex-grow: 0;

  125.   justify-self: end;

  126.   margin-inline-start: auto;

  127. }

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

  129.   .admin-toolbar__close-button {

  130.     display: none;

  131.   }

  132. }

  133. .admin-toolbar__expand-button {

  134.   display: none;

  135.   align-items: center;

  136.   justify-content: center;

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

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

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

  140.   cursor: pointer;

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

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

  143.   border-radius: 50%;

  144.   background-color: transparent;

  145. }

  146. .admin-toolbar__expand-button:hover {

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

  148. }

  149. .admin-toolbar__expand-button::before {

  150.   display: block;

  151.   flex-shrink: 0;

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

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

  154.   content: "";

  155.   transition:

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

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

  158.   opacity: 0;

  159.   background-color: currentColor;

  160.   -webkit-mask-repeat: no-repeat;

  161.   mask-repeat: no-repeat;

  162.   -webkit-mask-position: center center;

  163.   mask-position: center center;

  164.   -webkit-mask-size: 100% auto;

  165.   mask-size: 100% auto;

  166.   -webkit-mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");

  167.   mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");

  168. }

  169. [data-admin-toolbar-transitions] .admin-toolbar__expand-button::before {

  170.   opacity: 1;

  171. }

  172. [dir="rtl"] .admin-toolbar__expand-button::before {

  173.   transform: rotate(180deg);

  174. }

  175. @media (forced-colors: active) {

  176.   .admin-toolbar__expand-button::before {

  177.     background: canvastext;

  178.   }

  179. }

  180. .admin-toolbar__expand-button[aria-expanded="true"]::before {

  181.   transform: rotate(180deg);

  182. }

  183. [dir="rtl"] .admin-toolbar__expand-button[aria-expanded="true"]::before {

  184.   transform: none;

  185. }

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

  187.   .admin-toolbar__expand-button {

  188.     display: flex;

  189.   }

  190. }

  191. .admin-toolbar__header {

  192.   position: sticky;

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

  194.   inset-block-start: 0;

  195.   display: flex;

  196.   align-items: center;

  197.   justify-content: space-between;

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

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

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

  201. }

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

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

  204. }

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

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

  207.     margin-block-start: 0;

  208.   }

  209. }

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

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

  212.     display: none;

  213.   }

  214. }

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

  216.   .admin-toolbar__header {

  217.     position: static;

  218.     align-items: start;

  219.     margin-block-start: revert;

  220.     padding-block-start: revert;

  221.     padding-block-end: 0;

  222.   }

  223. }

  224. .admin-toolbar__item {

  225.   flex: 1 0 100%;

  226. }

  227. .admin-toolbar__logo {

  228.   display: inline-flex;

  229.   overflow: hidden;

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

  231. }

  232. .admin-toolbar__logo:hover {

  233.   background-color: transparent;

  234. }

  235. .admin-toolbar__logo img {

  236.   display: block;

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

  238. }

  239. /**

  240.  * Scroll wrapper for Mobile.

  241.  */

  242. .admin-toolbar__scroll-wrapper {

  243.   display: flex;

  244.   overflow-y: auto;

  245.   flex-direction: column;

  246.   height: 100%;

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

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

  249.   background-repeat: no-repeat;

  250.   background-attachment: local, scroll;

  251.   background-position-y: 3rem;

  252.   background-size:

  253.     100% 2.5rem,

  254.     100% 1rem;

  255. }

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

  257.   .admin-toolbar__scroll-wrapper {

  258.     display: contents;

  259.     overflow-y: unset;

  260.     background: none;

  261.   }

  262. }

  263. /**

  264.  * Content region.

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

  266.  */

  267. .admin-toolbar__content {

  268.   display: grid;

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

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

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

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

  273. }

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

  275.   .admin-toolbar__content {

  276.     display: flex;

  277.     overflow-x: hidden;

  278.     overflow-y: auto;

  279.     flex-direction: column;

  280.     flex-grow: 1;

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

  282.     background:

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

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

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

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

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

  288.     background-repeat: no-repeat;

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

  290.     background-size:

  291.       100% 2.5rem,

  292.       100% 2.5rem,

  293.       100% 1rem,

  294.       100% 1rem;

  295.   }

  296. }

  297. /**

  298.  * Sticky bottom region.

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

  300.  */

  301. .admin-toolbar__footer {

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

  303.   display: grid;

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

  305.   margin-block-start: auto;

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

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

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

  309. }

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

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

  312. }

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

  314.   .admin-toolbar__footer {

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

  316. 

  317.     position: sticky;

  318.     bottom: 0;

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

  320.   }

  321. }

  322. /**

  323.  * Sidebar toggle.

  324.  */

  325. .admin-toolbar__toggle {

  326.   display: none;

  327. }

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

  329.   .admin-toolbar__toggle {

  330.     display: flex;

  331.   }

  332. }

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

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

  335.   display: none;

  336. }

  337. /**

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

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

  340.  */

  341. .admin-toolbar-overlay {

  342.   position: fixed;

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

  344.   inset-block-start: 0;

  345.   inset-inline-start: 0;

  346.   display: none;

  347.   width: 100vw;

  348.   height: 100vh;

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

  350. }

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

  352.   display: block;

  353. }

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

  355.   .admin-toolbar-overlay {

  356.     display: none;

  357.   }

  358. }

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