breadcrumb.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. @use 'mixins/mixins' as *;
  2. @use 'mixins/utils' as *;
  3. @use 'common/var' as *;
  4. @include b(breadcrumb) {
  5. font-size: 14px;
  6. line-height: 1;
  7. @include utils-clearfix;
  8. @include e(separator) {
  9. margin: 0 9px;
  10. font-weight: bold;
  11. color: getCssVar('text-color', 'placeholder');
  12. &.#{$namespace}-icon {
  13. margin: 0 6px;
  14. font-weight: normal;
  15. svg {
  16. vertical-align: middle;
  17. }
  18. }
  19. }
  20. @include e(item) {
  21. float: left;
  22. display: inline-flex;
  23. align-items: center;
  24. @include e(inner) {
  25. color: getCssVar('text-color', 'regular');
  26. &.is-link,
  27. & a {
  28. font-weight: bold;
  29. text-decoration: none;
  30. transition: getCssVar('transition', 'color');
  31. color: getCssVar('text-color', 'primary');
  32. &:hover {
  33. color: getCssVar('color-primary');
  34. cursor: pointer;
  35. }
  36. }
  37. }
  38. &:last-child {
  39. .#{$namespace}-breadcrumb__inner,
  40. .#{$namespace}-breadcrumb__inner a {
  41. &,
  42. &:hover {
  43. font-weight: normal;
  44. color: getCssVar('text-color', 'regular');
  45. cursor: text;
  46. }
  47. }
  48. .#{$namespace}-breadcrumb__separator {
  49. display: none;
  50. }
  51. }
  52. }
  53. }