toolbar-block.pcss.css

Toolbar block styles.

File

core/modules/navigation/css/components/toolbar-block.pcss.css

View source 
  1. /* cspell:ignore wght */

  2. /**

  3.  * @file

  4.  * Toolbar block styles.

  5.  */

  6. 

  7. .toolbar-block {

  8.   display: grid;

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

  10. 

  11.   .admin-toolbar__content 
  12.     }

  13.   }

  14. }

  15. 

  16. .toolbar-block__list {

  17.   display: grid;

  18.   margin: 0;

  19.   padding: 0;

  20.   list-style-type: none;

  21.   word-wrap: break-word;

  22.   hyphens: auto;

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

  24. }

  25. 

  26. .toolbar-block__list-item {

  27.   display: grid;

  28. }

  29. 

  30. .toolbar-block__title {

  31.   position: relative;

  32.   margin: 0;

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

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

  35.   text-transform: uppercase;

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

  37.   font-family: inherit;

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

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

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

  41. 

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

  43.   html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] 
  44.   }

  45. }