toolbar-block.css

Toolbar block styles.

File

core/modules/navigation/css/components/toolbar-block.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 wght */

  8. /**

  9.  * @file

  10.  * Toolbar block styles.

  11.  */

  12. .toolbar-block {

  13.   display: grid;

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

  15. }

  16. .admin-toolbar__content .toolbar-block:nth-last-child(n + 2)::after {

  17.   margin-top: var(--admin-toolbar-space-8);

  18.   content: "";

  19.   border-top: 1px solid var(--admin-toolbar-color-gray-200);

  20. }

  21. .toolbar-block__list {

  22.   display: grid;

  23.   margin: 0;

  24.   padding: 0;

  25.   list-style-type: none;

  26.   word-wrap: break-word;

  27.   hyphens: auto;

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

  29. }

  30. .toolbar-block__list-item {

  31.   display: grid;

  32. }

  33. .toolbar-block__title {

  34.   position: relative;

  35.   margin: 0;

  36.   padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-8);

  37.   letter-spacing: var(--admin-toolbar-letter-spacing-0-8);

  38.   text-transform: uppercase;

  39.   color: var(--admin-toolbar-color-gray-600);

  40.   font-family: inherit;

  41.   font-size: var(--admin-toolbar-font-size-label-xs);

  42.   line-height: var(--admin-toolbar-line-height-label-xs);

  43.   font-variation-settings: "wght" 500;

  44. }

  45. html:not([data-admin-toolbar="expanded"]) .toolbar-block__title,

  46. html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-block__title {

  47.   display: flex;

  48.   align-items: center;

  49.   justify-content: center;

  50.   padding: 0;

  51.   color: var(--admin-toolbar-color-gray-600);

  52.   font-size: 0;

  53.   block-size: calc(2.5 * var(--admin-toolbar-rem));

  54.   inline-size: calc(2.5 * var(--admin-toolbar-rem));

  55. }

  56. :is(html:not([data-admin-toolbar="expanded"]) .toolbar-block__title, html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-block__title)::before {

  57.   position: absolute;

  58.   display: block;

  59.   width: var(--admin-toolbar-space-4);

  60.   height: var(--admin-toolbar-space-4);

  61.   content: "";

  62.   border-radius: 50%;

  63.   background-color: currentColor;

  64. }