_button.sass 896 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. // *************************************
  2. //
  3. // Button
  4. // -> Button Styles
  5. //
  6. // *************************************
  7. // ----- btn ----- //
  8. .btn, %btn
  9. display: inline-block
  10. background: $c-highlight
  11. padding: $btn-space/2 $btn-space
  12. border: none
  13. color: $c-background-invert
  14. border-radius: $b-borderRadius
  15. font-size: $b-fontSize-m
  16. &:hover,
  17. &:focus
  18. color: $c-background-invert
  19. background: lighten($c-highlight, 5%)
  20. // -------------------------------------
  21. // Modifiers
  22. // -------------------------------------
  23. // ----- Sizes ----- //
  24. .btn--s
  25. line-height: 2.5
  26. padding-left: $b-space
  27. padding-right: $b-space
  28. // ----- Theme ----- //
  29. .btn-b
  30. @extend %btn
  31. float: right
  32. .btn--c
  33. background: none
  34. // border: $b-borderWidth--lrg $b-borderStyle $c-highlight
  35. color: $c-highlight
  36. &:hover,
  37. &:focus
  38. background: $c-highlight
  39. color: $c-text-invert