2
0

variables.less 3.4 KB

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