_variables.sass 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. // Variables
  2. // -----------
  3. // Use the same color all over the place? Need to do some math with height and
  4. // width and text size? Sass supports variables as well as basic math operations
  5. // and many useful functions.
  6. // For complete documentation:
  7. // http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variables_
  8. // Margin/Padding
  9. $margin: $gutter
  10. $padding: $gutter
  11. // Typography
  12. $base-font-family: $helvetica
  13. $heading-font-family: $base-font-family
  14. // Font Sizes
  15. $base-font-size: $font-size
  16. // Line height
  17. $base-line-height: 1.5
  18. $heading-line-height: 1.3
  19. // Letter spacing
  20. $base-letter-spacing: 0.03em
  21. // Other Sizes
  22. $base-border-radius: 2px
  23. $base-spacing: $base-line-height * 1em
  24. $small-spacing: $base-spacing / 2
  25. $base-z-index: 0
  26. // Colors
  27. $dark-gray: #333
  28. $medium-gray: #999
  29. $light-gray: #ddd
  30. // Brand Colors
  31. $primary-color: #555
  32. // Action Colors
  33. $status-color: #8dbe51
  34. $warning-color: #ddc44f
  35. $error-color: #cd4533
  36. // Font Colors
  37. $base-font-color: $dark-gray
  38. $action-color: $primary-color
  39. // Border
  40. $base-border-color: $light-gray
  41. $base-border: 1px solid $base-border-color
  42. // Background Colors
  43. $base-background-color: #fff
  44. $secondary-background-color: tint($base-border-color, 75%)
  45. // Forms
  46. $form-box-shadow: inset 0 1px 3px rgba(#000, 0.06)
  47. $form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3)
  48. // Animations
  49. $base-duration: 150ms
  50. $base-timing: ease