breadcrumb.pcss.css

Same filename in this branch
  1. 10 core/themes/olivero/css/components/breadcrumb.pcss.css
  2. 10 core/themes/claro/css/layout/breadcrumb.pcss.css
Same filename in other branches
  1. 9 core/themes/olivero/css/components/breadcrumb.pcss.css
  2. 9 core/themes/claro/css/components/breadcrumb.pcss.css
  3. 9 core/themes/claro/css/layout/breadcrumb.pcss.css
  4. 8.9.x core/themes/claro/css/components/breadcrumb.pcss.css
  5. 8.9.x core/themes/claro/css/layout/breadcrumb.pcss.css
  6. 11.x core/themes/olivero/css/components/breadcrumb.pcss.css
  7. 11.x core/themes/claro/css/components/breadcrumb.pcss.css
  8. 11.x core/themes/claro/css/layout/breadcrumb.pcss.css

Breadcrumbs.

File

core/themes/claro/css/components/breadcrumb.pcss.css

View source
  1. /**
  2. * @file
  3. * Breadcrumbs.
  4. */
  5. .breadcrumb {
  6. padding: 0;
  7. color: var(--color-text);
  8. font-size: 0.79rem;
  9. }
  10. .breadcrumb__list,
  11. [dir="rtl"] .breadcrumb__list {
  12. margin: 0;
  13. padding: 0;
  14. list-style-type: none;
  15. }
  16. .breadcrumb__item,
  17. .breadcrumb__link {
  18. display: inline;
  19. text-decoration: none;
  20. color: var(--color-text);
  21. font-weight: bold;
  22. }
  23. .breadcrumb__item + .breadcrumb__item::before {
  24. display: inline-block;
  25. padding: 0 0.75rem;
  26. content: url(../../images/icons/currentColor/arrow-breadcrumb.svg);
  27. @nest [dir="rtl"]
  28. @media (forced-colors: active) {
  29. width: 5px; /* Width and height of the SVG. */
  30. height: 8px;
  31. content: "";
  32. background-color: canvastext;
  33. mask-image: url(../../images/icons/currentColor/arrow-breadcrumb.svg);
  34. mask-size: contain;
  35. mask-repeat: no-repeat;
  36. mask-position: center;
  37. }
  38. }
  39. .breadcrumb__link:hover,
  40. .breadcrumb__link:focus {
  41. text-decoration: none;
  42. }

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