variables.less 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. // SITE VARIABLES
  2. // --------------
  3. // Blues
  4. @blue-darker: #003366;
  5. @blue-dark: #005f9b; // Pantone 3015 C
  6. @blue: #009add; // Pantone 2925 C
  7. @blue-light: #b8dcf2;
  8. @blue-lighter: #f0f9ff;
  9. // Greens
  10. @green-darker: #41683b;
  11. @green-dark: #678943;
  12. @green: #95bf52;
  13. @green-light: #ddefbd;
  14. @green-lighter: #f3f9e8;
  15. // Reds
  16. @red-darker: #702222;
  17. @red-dark: #ba4a4a;
  18. @red: #dd7373;
  19. @red-light: #f2adb1;
  20. @red-lighter: #fff0f0;
  21. // Yellows
  22. @yellow-darker: #6f4215;
  23. @yellow-dark: #db8400;
  24. @yellow: #f9e27d;
  25. @yellow-light: #fff5bd;
  26. @yellow-lighter: #fffcee;
  27. // Oranges
  28. @orange-darker: #8c3900;
  29. @orange-dark: #cc5d11;
  30. @orange: #f4914e;
  31. @orange-light: #ffd0a6;
  32. @orange-lighter: #fff4e6;
  33. // Purples
  34. @purple-darker: #4a226d;
  35. @purple-dark: #7457ad;
  36. @purple: #9780d6;
  37. @purple-light: #c3b8f4;
  38. @purple-lighter: #fbf5ff;
  39. @fa-green: #1d9d74;
  40. @fa-green-dark: darken(@fa-green, 10%);
  41. @jumbotron-border: mix(@fa-green, @fa-green-dark, 75%);
  42. @font-family-alt: proxima-nova-sc, "Helvetica Neue", Helvetica, Arial, sans-serif;
  43. // BOOTSTRAP OVERRIDES
  44. // -------------------
  45. // Brand colors
  46. @brand-success: @fa-green;
  47. // Links
  48. @link-color: lighten(@fa-green, 5%);
  49. @link-hover-color: darken(@fa-green, 5%);
  50. // Typography
  51. @font-family-sans-serif: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
  52. @font-family-serif: museo-slab, Georgia, "Times New Roman", Times, serif;
  53. @headings-font-family: @font-family-serif;
  54. // Components
  55. @component-active-bg: @fa-green;
  56. // Navbar
  57. @navbar-height: 40px;
  58. @navbar-inverse-brand-color: #fff;
  59. // Reset inverted navbar basics
  60. @navbar-inverse-color: mix(@fa-green, #fff, 50%);
  61. @navbar-inverse-bg: @fa-green;
  62. @navbar-inverse-border: @jumbotron-border;
  63. // Inverted navbar links
  64. @navbar-inverse-link-color: mix(@fa-green, #fff, 35%);
  65. @navbar-inverse-link-hover-color: #fff;
  66. @navbar-inverse-link-active-bg: @navbar-inverse-border;
  67. // Inverted navbar toggle
  68. @navbar-inverse-toggle-hover-bg: @jumbotron-color;
  69. @navbar-inverse-toggle-border-color: mix(@jumbotron-color, @fa-green, 75%);
  70. // Jumbotron
  71. @jumbotron-color: #fff;
  72. @jumbotron-bg: @fa-green;
  73. // Form states and alerts
  74. @state-success-text: @fa-green;
  75. @state-success-bg: mix(@fa-green, #fff, 6%);
  76. @state-success-border: darken(spin(@state-success-bg, -10), 5%);
  77. @state-info-text: mix(@blue-dark, @blue, 50%);
  78. @state-info-bg: @blue-lighter;
  79. @state-info-border: darken(spin(@state-info-bg, -10), 7%);
  80. @state-danger-text: @brand-danger;
  81. @state-danger-bg: mix(@state-danger-text,#fff,10%);
  82. @state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
  83. // Carousel
  84. @carousel-text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  85. @carousel-control-color: @fa-green-dark;
  86. @carousel-control-font-size: 30px;
  87. // Code
  88. @pre-border-color: #eee;
  89. //== Type
  90. //** Text muted color
  91. @text-muted: mix(@gray-light,@gray-lighter,50%);