variables.less 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  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%);
  92. @alert-well-bg: @panel-default-heading-bg;
  93. @alert-well-text: @text-color;
  94. @alert-well-border: @panel-default-border;
  95. @alert-default-bg: transparent;
  96. @alert-default-text: @text-color;
  97. @alert-default-border: mix(#fff,@panel-default-border,40%);
  98. //@panel-default-text: @gray-dark;
  99. //@panel-default-border: @panel-default-heading-bg;
  100. //@panel-default-heading-bg: #f5f5f5;
  101. @panel-primary-text: #fff;
  102. @panel-primary-border: mix(#fff,@brand-primary,50%);
  103. @panel-primary-heading-bg: @brand-primary;
  104. @panel-success-text: #fff;
  105. @panel-success-border: mix(#fff,@brand-success,50%);
  106. @panel-success-heading-bg: @brand-success;
  107. @panel-info-text: #fff;
  108. @panel-info-border: mix(#fff,@brand-info,50%);
  109. @panel-info-heading-bg: @brand-info;
  110. @panel-warning-text: #fff;
  111. @panel-warning-border: mix(#fff,@brand-warning,50%);
  112. @panel-warning-heading-bg: @brand-warning;
  113. @panel-danger-text: #fff;
  114. @panel-danger-border: mix(#fff,@brand-danger,50%);
  115. @panel-danger-heading-bg: @brand-danger;