menus-and-lists.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/menus-and-lists.pcss.css
  2. 8.9.x core/themes/claro/css/components/menus-and-lists.pcss.css
  3. 11.x core/themes/claro/css/components/menus-and-lists.pcss.css
/**
 * Menus and lists.
 *
 * These classes are used in claro-toolbar-menu and any list items.
 */

.item-list,
.menu-item {
  --item-list-spacing-l: var(--space-l);
  --item-list-spacing-m: var(--space-m);
}

.item-list ul {
  margin-block: 4px;
  margin-inline: var(--item-list-spacing-l) 0;
  list-style: disc;
}

.item-list ul li,
.menu-item {
  list-style: disc;
}

.menu-item {
  margin: 0;
}

.item-list ul li.collapsed,
.menu-item--collapsed {
  list-style: disc;
}

.item-list ul li.expanded,
.menu-item--expanded {
  list-style: circle;
}

ul {
  &.links li,
  &.inline li {
    padding-inline-end: var(--item-list-spacing-m);
  }

  &.inline li {
    display: inline;
  }
}

File

core/themes/claro/css/components/menus-and-lists.pcss.css

View source 
  1. /**

  2.  * Menus and lists.

  3.  *

  4.  * These classes are used in claro-toolbar-menu and any list items.

  5.  */

  6. 

  7. .item-list,

  8. .menu-item {

  9.   --item-list-spacing-l: var(--space-l);

  10.   --item-list-spacing-m: var(--space-m);

  11. }

  12. 

  13. .item-list ul {

  14.   margin-block: 4px;

  15.   margin-inline: var(--item-list-spacing-l) 0;

  16.   list-style: disc;

  17. }

  18. 

  19. .item-list ul li,

  20. .menu-item {

  21.   list-style: disc;

  22. }

  23. 

  24. .menu-item {

  25.   margin: 0;

  26. }

  27. 

  28. .item-list ul li.collapsed,

  29. .menu-item--collapsed {

  30.   list-style: disc;

  31. }

  32. 

  33. .item-list ul li.expanded,

  34. .menu-item--expanded {

  35.   list-style: circle;

  36. }

  37. 

  38. ul {

  39.   &.links li,

  40.   &.inline li {

  41.     padding-inline-end: var(--item-list-spacing-m);

  42.   }

  43. 

  44.   &.inline li {

  45.     display: inline;

  46.   }

  47. }

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