You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

328 lines
9.1 KiB

  1. /*******************************
  2. Global Variables
  3. *******************************/
  4. /*-------------------
  5. Paths
  6. --------------------*/
  7. @imagePath : "../themes/default/images";
  8. @fontPath : "../themes/default/fonts";
  9. /*-------------------
  10. Page
  11. --------------------*/
  12. @bodyBackground : #FCFCFC;
  13. @fontSize : 14px;
  14. @textColor : rgba(0, 0, 0, 0.7);
  15. @paragraphMargin : 1em 0em;
  16. @linkColor : #009FDA;
  17. @linkUnderline : none;
  18. @linkHoverColor : lighten( @linkColor, 5);
  19. @highlightBackground : #FFFFCC;
  20. @highlightColor : @textColor;
  21. /*-------------------
  22. Breakpoints
  23. --------------------*/
  24. @mobileBreakpoint : 320px;
  25. @tabletBreakpoint : 768px;
  26. @computerBreakpoint : 992px;
  27. @largeMonitorBreakpoint : 1400px;
  28. @widescreenMonitorBreakpoint : 1900px;
  29. /*-------------------
  30. Fonts
  31. --------------------*/
  32. @pageFont : Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  33. /*-------------------
  34. Icons
  35. --------------------*/
  36. /* Width of largest icon */
  37. @iconWidth : 1.23em;
  38. /*******************************
  39. BG Colors
  40. *******************************/
  41. @subtleTransparentBlack : rgba(0, 0, 0, 0.01);
  42. @transparentBlack : rgba(0, 0, 0, 0.05);
  43. @strongTransparentBlack : rgba(0, 0, 0, 0.10);
  44. @subtleTransparentWhite : rgba(255, 255, 255, 0.01);
  45. @transparentWhite : rgba(255, 255, 255, 0.05);
  46. @strongTransparentWhite : rgba(255, 255, 255, 0.01);
  47. /*******************************
  48. Colors
  49. *******************************/
  50. /*-------------------
  51. Background
  52. --------------------*/
  53. /*--- Colors ---*/
  54. @blue : #6ECFF5;
  55. @green : #5BBD72;
  56. @orange : #E96633;
  57. @pink : #D9499A;
  58. @purple : #564F8A;
  59. @red : #D95C5C;
  60. @teal : #00B5AD;
  61. @yellow : #FFCB08;
  62. @primaryColor : @teal;
  63. @secondaryColor : @black;
  64. @tertiaryColor : @orange;
  65. /*--- Emotive ---*/
  66. @positiveColor : @green;
  67. @negativeColor : @red;
  68. @infoColor : #E6F4F9;
  69. @warningColor : #96904D;
  70. @errorColor : #D95C5C;
  71. /*--- Neutrals ---*/
  72. @darkBlack : #232323;
  73. @black : #555555;
  74. @lightBlack : #999999;
  75. @darkGrey : #AAAAAA;
  76. @grey : #CCCCCC;
  77. @lightGrey : #DCDDDE;
  78. @white : #FFFFFF;
  79. @offWhite : #FAFAFA;
  80. @darkWhite : #F0F0F0;
  81. /*-------------------
  82. Text Colors
  83. --------------------*/
  84. @darkTextColor : rgba(0, 0, 0, 0.85);
  85. @lightTextColor : rgba(0, 0, 0, 0.4);
  86. @invertedTextColor : rgba(255, 255, 255, 1);
  87. @invertedLightTextColor : rgba(255, 255, 255, 0.8);
  88. @invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);
  89. @invertedSelectedTextColor : rgba(255, 255, 255, 1);
  90. @invertedDisabledTextColor : rgba(0, 0, 0, 0.2);
  91. @unselectedTextColor : rgba(0, 0, 0, 0.4);
  92. @selectedTextColor : rgba(0, 0, 0, 0.8);
  93. @disabledTextColor : rgba(0, 0, 0, 0.2);
  94. /*-------------------
  95. Brand Colors
  96. --------------------*/
  97. @facebookColor : #3B579D;
  98. @twitterColor : #4092CC;
  99. @googlePlusColor : #D34836;
  100. @linkedInColor : #1F88BE;
  101. @youtubeColor : #CC181E;
  102. @instagramColor : #49769C;
  103. @pinterestColor : #00ACED;
  104. @vkColor : #4D7198;
  105. /*-------------------
  106. Borders
  107. --------------------*/
  108. @circularRadius : 500rem;
  109. @borderColor : rgba(0, 0, 0, 0.1);
  110. @selectedBorderColor : rgba(0, 0, 0, 0.2);
  111. @solidBorderColor : #DDDDDD;
  112. @whiteBorderColor : rgba(255, 255, 255, 0.3);
  113. @selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);
  114. /*-------------------
  115. Sizes
  116. --------------------*/
  117. @mini : 0.7em;
  118. @tiny : 0.8em;
  119. @small : 0.875em;
  120. @medium : 1em;
  121. @large : 1.125em;
  122. @big : 1.25em;
  123. @huge : 1.375em;
  124. @massive : 1.5em;
  125. /*-------------------
  126. Transitions
  127. --------------------*/
  128. @transitionDuration : 0.25s;
  129. @transitionEasing : ease;
  130. /*******************************
  131. States
  132. *******************************/
  133. /*-------------------
  134. Disabled
  135. --------------------*/
  136. @disabledOpacity: 0.3;
  137. /*-------------------
  138. Hover
  139. --------------------*/
  140. /*--- Colors ---*/
  141. @primaryColorHover : lighten( @primaryColor, 5);
  142. @secondaryColorHover : lighten( @secondaryColor, 5);
  143. @tertiaryColorHover : lighten( @tertiaryColor, 5);
  144. @blueHover : lighten( @blue, 5);
  145. @greenHover : lighten( @green, 5);
  146. @orangeHover : lighten( @orange, 5);
  147. @pinkHover : lighten( @pink, 5);
  148. @purpleHover : lighten( @purple, 5);
  149. @redHover : lighten( @red, 5);
  150. @tealHover : lighten( @teal, 5);
  151. @yellowHover : lighten( @yellow, 5);
  152. /*--- Emotive ---*/
  153. @positiveColorHover : lighten( @positiveColor, 5);
  154. @negativeColorHover : lighten( @negativeColor, 5);
  155. @infoColorHover : lighten( @infoColor, 5);
  156. @warningColorHover : lighten( @warningColor, 5);
  157. @errorColorHover : lighten( @errorColor, 5);
  158. /*--- Neutrals ---*/
  159. @darkBlackHover : lighten( @darkBlack, 5);
  160. @blackHover : lighten( @black, 5);
  161. @lightBlackHover : lighten( @lightBlack, 5);
  162. @lightGreyHover : lighten( @lightGrey, 5);
  163. @greyHover : lighten( @grey, 5);
  164. @darkGreyHover : lighten( @darkGrey, 5);
  165. @whiteHover : lighten( @white, 5);
  166. @offWhiteHover : lighten( @offWhite, 5);
  167. @darkWhiteHover : lighten( @darkWhite, 5);
  168. @facebookHoverColor : lighten( @facebookColor, 5);
  169. @twitterHoverColor : lighten( @twitterColor, 5);
  170. @googlePlusHoverColor : lighten( @googlePlusColor, 5);
  171. @linkedInHoverColor : lighten( @linkedInColor, 5);
  172. @youtubeHoverColor : lighten( @youtubeColor, 5);
  173. @instagramHoverColor : lighten( @instagramColor, 5);
  174. @pinterestHoverColor : lighten( @pinterestColor, 5);
  175. @vkHoverColor : lighten( @vkColor, 5);
  176. /*-------------------
  177. Down (:active)
  178. --------------------*/
  179. /*--- Colors ---*/
  180. @primaryColorDown : darken(@primaryColor, 7);
  181. @secondaryColorDown : darken(@secondaryColor, 7);
  182. @tertiaryColorDown : darken(@tertiaryColor, 7);
  183. @blueDown : darken(@blue, 7);
  184. @greenDown : darken(@green, 7);
  185. @orangeDown : darken(@orange, 7);
  186. @pinkDown : darken(@pink, 7);
  187. @purpleDown : darken(@purple, 7);
  188. @redDown : darken(@red, 7);
  189. @tealDown : darken(@teal, 7);
  190. @yellowDown : darken(@yellow, 7);
  191. /*--- Emotive ---*/
  192. @positiveColorDown : darken(@positiveColor, 7);
  193. @negativeColorDown : darken(@negativeColor, 7);
  194. @infoColorDown : darken(@infoColor, 7);
  195. @warningColorDown : darken(@warningColor, 7);
  196. @errorColorDown : darken(@errorColor, 7);
  197. /*--- Neutrals ---*/
  198. @darkBlackDown : darken(@darkBlack, 7);
  199. @blackDown : darken(@black, 7);
  200. @lightBlackDown : darken(@lightBlack, 7);
  201. @lightGreyDown : darken(@lightGrey, 7);
  202. @greyDown : darken(@grey, 7);
  203. @darkGreyDown : darken(@darkGrey, 7);
  204. @whiteDown : darken(@white, 7);
  205. @offWhiteDown : darken(@offWhite, 7);
  206. @darkWhiteDown : darken(@darkWhite, 7);
  207. @facebookDownColor : darken(@facebookColor, 7);
  208. @twitterDownColor : darken(@twitterColor, 7);
  209. @googlePlusDownColor : darken(@googlePlusColor, 7);
  210. @linkedInDownColor : darken(@linkedInColor, 7);
  211. @youtubeDownColor : darken(@youtubeColor, 7);
  212. @instagramDownColor : darken(@instagramColor, 7);
  213. @pinterestDownColor : darken(@pinterestColor, 7);
  214. @vkDownColor : darken(@vkColor, 7);
  215. /*-------------------
  216. Active
  217. --------------------*/
  218. /*--- Standard ---*/
  219. @primaryColorActive : darken(@primaryColor, 5);
  220. @secondaryColorActive : darken(@secondaryColor, 5);
  221. @tertiaryColorActive : darken(@tertiaryColor, 5);
  222. @blueActive : darken(@blue, 5);
  223. @greenActive : darken(@green, 5);
  224. @orangeActive : darken(@orange, 5);
  225. @pinkActive : darken(@pink, 5);
  226. @purpleActive : darken(@purple, 5);
  227. @redActive : darken(@red, 5);
  228. @tealActive : darken(@teal, 5);
  229. @yellowActive : darken(@yellow, 5);
  230. /*--- Emotive ---*/
  231. @positiveColorActive : darken(@positiveColor, 5);
  232. @negativeColorActive : darken(@negativeColor, 5);
  233. @infoColorActive : darken(@infoColor, 5);
  234. @warningColorActive : darken(@warningColor, 5);
  235. @errorColorActive : darken(@errorColor, 5);
  236. /*--- Neutrals ---*/
  237. @darkBlackActive : darken(@darkBlack, 5);
  238. @blackActive : darken(@black, 5);
  239. @lightBlackActive : darken(@lightBlack, 5);
  240. @lightGreyActive : darken(@lightGrey, 5);
  241. @greyActive : darken(@grey, 5);
  242. @darkGreyActive : darken(@darkGrey, 5);
  243. @whiteActive : darken(@white, 5);
  244. @offWhiteActive : darken(@offWhite, 5);
  245. @darkWhiteActive : darken(@darkWhite, 5);
  246. @facebookActiveColor : darken(@facebookColor, 5);
  247. @twitterActiveColor : darken(@twitterColor, 5);
  248. @googlePlusActiveColor : darken(@googlePlusColor, 5);
  249. @linkedInActiveColor : darken(@linkedInColor, 5);
  250. @youtubeActiveColor : darken(@youtubeColor, 5);
  251. @instagramActiveColor : darken(@instagramColor, 5);
  252. @pinterestActiveColor : darken(@pinterestColor, 5);
  253. @vkActiveColor : darken(@vkColor, 5);