breadcrumb.pcss.css

Same filename in this branch
  1. 8.9.x 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. 10 core/themes/olivero/css/components/breadcrumb.pcss.css
  5. 10 core/themes/claro/css/components/breadcrumb.pcss.css
  6. 10 core/themes/claro/css/layout/breadcrumb.pcss.css
  7. 11.x core/themes/olivero/css/components/breadcrumb.pcss.css
  8. 11.x core/themes/claro/css/components/breadcrumb.pcss.css
  9. 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. @import "../base/variables.pcss.css";
  6. .breadcrumb {
  7. padding: 0;
  8. color: var(--color-text);
  9. font-size: 0.79rem;
  10. }
  11. .breadcrumb__list,
  12. [dir="rtl"] .breadcrumb__list {
  13. margin: 0;
  14. padding: 0;
  15. list-style-type: none;
  16. }
  17. .breadcrumb__item,
  18. .breadcrumb__link {
  19. display: inline;
  20. text-decoration: none;
  21. color: var(--color-text);
  22. font-weight: bold;
  23. }
  24. .breadcrumb__item + .breadcrumb__item::before {
  25. padding: 0 0.75rem;
  26. content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8' height='8' width='5'%3E%3Cpath d='M1.2070312,0.64696878 0.5,1.354 3.1464844,4.0004844 0.5,6.6469688 1.2070312,7.354 4.5605468,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
  27. }
  28. [dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
  29. content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M3.7929688,0.64696878 4.5,1.354 1.8535156,4.0004844 4.5,6.6469688 3.7929688,7.354 0.4394532,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
  30. }
  31. .breadcrumb__link:hover,
  32. .breadcrumb__link:focus {
  33. text-decoration: none;
  34. }

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