list.sass 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. $list-background-color: $white !default
  2. $list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
  3. $list-radius: $radius !default
  4. $list-item-border: 1px solid $border !default
  5. $list-item-color: $text !default
  6. $list-item-active-background-color: $link !default
  7. $list-item-active-color: $link-invert !default
  8. $list-item-hover-background-color: $background !default
  9. .list
  10. @extend %block
  11. background-color: $list-background-color
  12. border-radius: $list-radius
  13. box-shadow: $list-shadow
  14. // &.is-hoverable > .list-item:hover:not(.is-active)
  15. // background-color: $list-item-hover-background-color
  16. // cursor: pointer
  17. .list-item
  18. display: block
  19. padding: 0.5em 1em
  20. &:not(a)
  21. color: $list-item-color
  22. &:first-child
  23. border-top-left-radius: $list-radius
  24. border-top-right-radius: $list-radius
  25. &:last-child
  26. border-bottom-left-radius: $list-radius
  27. border-bottom-right-radius: $list-radius
  28. &:not(:last-child)
  29. border-bottom: $list-item-border
  30. &.is-active
  31. background-color: $list-item-active-background-color
  32. color: $list-item-active-color
  33. a.list-item
  34. background-color: $list-item-hover-background-color
  35. cursor: pointer