menus-and-lists.css

Same filename in other branches
  1. 9 core/themes/seven/css/components/menus-and-lists.css
  2. 9 core/themes/claro/css/components/menus-and-lists.css
  3. 8.9.x core/themes/seven/css/components/menus-and-lists.css
  4. 8.9.x core/themes/claro/css/components/menus-and-lists.css
  5. 11.x core/themes/claro/css/components/menus-and-lists.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * 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: 0.25rem;
  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,
ul.inline li {
  padding-inline-end: var(--item-list-spacing-m);
}

ul.inline li {
  display: inline;
}

File

core/themes/claro/css/components/menus-and-lists.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. /**
  8. * Menus and lists.
  9. *
  10. * These classes are used in claro-toolbar-menu and any list items.
  11. */
  12. .item-list,
  13. .menu-item {
  14. --item-list-spacing-l: var(--space-l);
  15. --item-list-spacing-m: var(--space-m);
  16. }
  17. .item-list ul {
  18. margin-block: 0.25rem;
  19. margin-inline: var(--item-list-spacing-l) 0;
  20. list-style: disc;
  21. }
  22. .item-list ul li,
  23. .menu-item {
  24. list-style: disc;
  25. }
  26. .menu-item {
  27. margin: 0;
  28. }
  29. .item-list ul li.collapsed,
  30. .menu-item--collapsed {
  31. list-style: disc;
  32. }
  33. .item-list ul li.expanded,
  34. .menu-item--expanded {
  35. list-style: circle;
  36. }
  37. ul.links li,
  38. ul.inline li {
  39. padding-inline-end: var(--item-list-spacing-m);
  40. }
  41. ul.inline li {
  42. display: inline;
  43. }

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