menu.sass 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. $menu-item-color: $text !default
  2. $menu-item-radius: $radius-small !default
  3. $menu-item-hover-color: $text-strong !default
  4. $menu-item-hover-background-color: $background !default
  5. $menu-item-active-color: $link-invert !default
  6. $menu-item-active-background-color: $link !default
  7. $menu-list-border-left: 1px solid $border !default
  8. $menu-list-line-height: 1.25 !default
  9. $menu-list-link-padding: 0.5em 0.75em !default
  10. $menu-nested-list-margin: 0.75em !default
  11. $menu-nested-list-padding-left: 0.75em !default
  12. $menu-label-color: $text-light !default
  13. $menu-label-font-size: 0.75em !default
  14. $menu-label-letter-spacing: 0.1em !default
  15. $menu-label-spacing: 1em !default
  16. .menu
  17. font-size: $size-normal
  18. // Sizes
  19. &.is-small
  20. font-size: $size-small
  21. &.is-medium
  22. font-size: $size-medium
  23. &.is-large
  24. font-size: $size-large
  25. .menu-list
  26. line-height: $menu-list-line-height
  27. a
  28. border-radius: $menu-item-radius
  29. color: $menu-item-color
  30. display: block
  31. padding: $menu-list-link-padding
  32. &:hover
  33. background-color: $menu-item-hover-background-color
  34. color: $menu-item-hover-color
  35. // Modifiers
  36. &.is-active
  37. background-color: $menu-item-active-background-color
  38. color: $menu-item-active-color
  39. li
  40. ul
  41. border-left: $menu-list-border-left
  42. margin: $menu-nested-list-margin
  43. padding-left: $menu-nested-list-padding-left
  44. .menu-label
  45. color: $menu-label-color
  46. font-size: $menu-label-font-size
  47. letter-spacing: $menu-label-letter-spacing
  48. text-transform: uppercase
  49. &:not(:first-child)
  50. margin-top: $menu-label-spacing
  51. &:not(:last-child)
  52. margin-bottom: $menu-label-spacing