menu.sass 1.7 KB

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