breadcrumb.sass 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. $breadcrumb-item-color: $link !default
  2. $breadcrumb-item-hover-color: $link-hover !default
  3. $breadcrumb-item-active-color: $text-strong !default
  4. $breadcrumb-item-padding-vertical: 0 !default
  5. $breadcrumb-item-padding-horizontal: 0.75em !default
  6. $breadcrumb-item-separator-color: $grey-light !default
  7. .breadcrumb
  8. @extend %block
  9. @extend %unselectable
  10. font-size: $size-normal
  11. white-space: nowrap
  12. a
  13. align-items: center
  14. color: $breadcrumb-item-color
  15. display: flex
  16. justify-content: center
  17. padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
  18. &:hover
  19. color: $breadcrumb-item-hover-color
  20. li
  21. align-items: center
  22. display: flex
  23. &:first-child a
  24. padding-left: 0
  25. &.is-active
  26. a
  27. color: $breadcrumb-item-active-color
  28. cursor: default
  29. pointer-events: none
  30. & + li::before
  31. color: $breadcrumb-item-separator-color
  32. content: "\0002f"
  33. ul,
  34. ol
  35. align-items: flex-start
  36. display: flex
  37. flex-wrap: wrap
  38. justify-content: flex-start
  39. .icon
  40. &:first-child
  41. margin-right: 0.5em
  42. &:last-child
  43. margin-left: 0.5em
  44. // Alignment
  45. &.is-centered
  46. ol,
  47. ul
  48. justify-content: center
  49. &.is-right
  50. ol,
  51. ul
  52. justify-content: flex-end
  53. // Sizes
  54. &.is-small
  55. font-size: $size-small
  56. &.is-medium
  57. font-size: $size-medium
  58. &.is-large
  59. font-size: $size-large
  60. // Styles
  61. &.has-arrow-separator
  62. li + li::before
  63. content: "\02192"
  64. &.has-bullet-separator
  65. li + li::before
  66. content: "\02022"
  67. &.has-dot-separator
  68. li + li::before
  69. content: "\000b7"
  70. &.has-succeeds-separator
  71. li + li::before
  72. content: "\0227B"