You are here

breadcrumb.pcss.css in Drupal 10

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. transform: scaleX(-1);
  29. }
  30. @media (forced-colors: active) {
  31. width: 5px; /* Width and height of the SVG. */
  32. height: 8px;
  33. content: "";
  34. background-color: canvastext;
  35. mask-image: url(../../images/icons/currentColor/arrow-breadcrumb.svg);
  36. mask-size: contain;
  37. mask-repeat: no-repeat;
  38. mask-position: center;
  39. }
  40. }
  41. .breadcrumb__link:hover,
  42. .breadcrumb__link:focus {
  43. text-decoration: none;
  44. }