breadcrumb.sass 1.7 KB

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