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.

282 lines
5.9 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /*-------------------
  2. Globals Used
  3. --------------------*/
  4. // @textColor
  5. // @borderColor
  6. // @invertedUnselectedTextColor
  7. /*-------------------
  8. Collection
  9. --------------------*/
  10. @margin: 1rem 0rem;
  11. @verticalPadding: 0.83em;
  12. @horizontalPadding: 0.95em;
  13. @background: #FFFFFF;
  14. @itemBackground: none;
  15. @fontWeight: normal;
  16. @boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  17. @borderSize: 0em;
  18. @transition:
  19. opacity 0.2s ease,
  20. background 0.2s ease,
  21. box-shadow 0.2s ease
  22. ;
  23. @borderRadius: 0.1875rem;
  24. @dividerSize: 1px;
  25. @dividerBackground: linear-gradient(
  26. rgba(0, 0, 0, 0.05) 0%,
  27. rgba(0, 0, 0, 0.1) 50%,
  28. rgba(0, 0, 0, 0.05) 100%)
  29. ;
  30. @headerBackground: rgba(0, 0, 0, 0.04);
  31. @headerWeight: bold;
  32. @textLineHeight: 1.3;
  33. @transition:
  34. opacity 0.2s ease,
  35. background 0.2s ease,
  36. box-shadow 0.2s ease
  37. ;
  38. @menuTextColor: @textColor;
  39. /* Sub Menu */
  40. @subMenuMargin: 0.5em;
  41. @subMenuFontSize: 0.875rem;
  42. @subMenuTextColor: @textColor;
  43. @subMenuHorizontalPadding: 0.5rem;
  44. @subMenuVerticalPadding: 1.5rem;
  45. /*--------------
  46. Elements
  47. ---------------*/
  48. /* Icon */
  49. @iconMargin: 0.5em;
  50. @iconLabelMargin: 0.25em;
  51. /* Header */
  52. @headerBackground: rgba(0, 0, 0, 0.04);
  53. @headerWeight: bold;
  54. @headerTextTransform: normal;
  55. @headerFontSize: 1rem;
  56. /*--------------
  57. Couplings
  58. ---------------*/
  59. /* Button */
  60. @buttonOffset: -0.05em;
  61. @buttonVerticalPadding: 0.55em;
  62. @buttonSize: 0.875em;
  63. @actionButtonHorizontalPadding: 0.8em;
  64. @labeledButtonPadding: 0.6em;
  65. /* Input */
  66. @inputSize: 0.875em;
  67. @inputVerticalMargin: -0.8em;
  68. @inputOffset: -0.05em;
  69. @inputVerticalPadding: 0.5em;
  70. @inputIconOffset: -0.3em;
  71. @smallInputOffset: 0em;
  72. @smallInputVerticalPadding: 0.4em;
  73. @largeInputOffset: -0.125em;
  74. @largeInputVerticalPadding: 0.6em;
  75. /* Label */
  76. @labelOffset: -0.15em;
  77. @labelBackground: rgba(0, 0, 0, 0.35);
  78. @labelTextColor: #FFFFFF;
  79. @labelTextMargin: 0.5em;
  80. @labelVerticalPadding: 0.3em;
  81. @labelHorizontalPadding: 0.8em;
  82. /* Dropdown */
  83. @dropdownBackground: #FFFFFF;
  84. @dropdownMenuOffset: 1px;
  85. @dropdownPointingDistance: 0.75em;
  86. @dropdownTextColor: @textColor;
  87. @dropdownBoxShadow: 0 1px 1px 1px @solidBorderColor;
  88. @dropdownVerticalBoxShadow: 0 0px 1px 1px @solidBorderColor;
  89. /* Pointing Arrow */
  90. @arrowSize: 0.6em;
  91. @arrowOffset: -(@arrowSize / 2);
  92. @arrowBorder: 1px solid rgba(0, 0, 0, 0.1);
  93. @arrowHoverColor: #FAFAFA;
  94. @arrowActiveColor: #FCFCFC;
  95. @arrowVerticalHoverColor: #FAFAFA;
  96. @arrowVerticalActiveColor: #FCFCFC;
  97. /*--------------
  98. States
  99. ---------------*/
  100. @hoverBackground: @subtleTransparentBlack;
  101. @hoverColor: @textColor;
  102. @downBackground: @subtleTransparentBlack;
  103. @activeBackground: @subtleTransparentBlack;
  104. @activeColor: @darkTextColor;
  105. @activeBorderSize: 0.2em;
  106. @activeFontWeight: normal;
  107. @activeHoverBackground: @hoverBackground;
  108. @subMenuActiveColor: rgba(0, 0, 0, 0.03);
  109. @loadingBackgroundColor: rgba(255, 255, 255, 0.8);
  110. @loadingImage: "@{imagePath}/loader-large.gif";
  111. @loadingPosition: 50% 50%;
  112. /*--------------
  113. Types
  114. ---------------*/
  115. /* Vertical */
  116. @verticalBackground: #FFFFFF;
  117. @verticalItemBackground: none;
  118. @verticalDividerBackground: linear-gradient(to right,
  119. rgba(0, 0, 0, 0.03) 0%,
  120. rgba(0, 0, 0, 0.1) 1.5em,
  121. rgba(0, 0, 0, 0.03) 100%)
  122. ;
  123. /* Secondary */
  124. @secondaryBackground: none;
  125. @secondaryTransition: color 0.2s ease;
  126. @secondaryBorderRadius: 0.3125em;
  127. @secondaryMargin: 0.25em;
  128. @secondaryVerticalMargin: 0.3em;
  129. @secondaryVerticalPadding: 0.5em;
  130. @secondaryHorizontalPadding: 1em;
  131. @secondaryLinkOpacity: 0.8;
  132. @secondaryHeaderBackground: none transparent;
  133. @secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1);
  134. @secondaryActiveBackground: @transparentBlack;
  135. @secondaryInvertedActiveBackground: @transparentWhite;
  136. /* Pointing */
  137. @secondaryPointingBorderWidth: 3px;
  138. @secondaryPointingVerticalPadding: 0.6em;
  139. @secondaryPointingHorizontalPadding: 0.95em;
  140. @secondaryPointingBorderColor: rgba(0, 0, 0, 0.2);
  141. @secondaryPointingHoverTextColor: @textColor;
  142. @secondaryPointingActiveBorderColor: rgba(0, 0, 0, 0.4);
  143. @secondaryPointingActiveTextColor: @selectedTextColor;
  144. @secondaryPointingHeaderColor: @selectedTextColor;
  145. /* Tiered */
  146. @tieredActiveItemBackground: #FCFCFC;
  147. @tieredActiveMenuBackground: #FCFCFC;
  148. @tieredSubMenuTextTransform: normal;
  149. @tieredSubMenuFontWeight: normal;
  150. @tieredSubMenuColor: @lightTextColor;
  151. @tieredSubMenuHoverBackground: none transparent;
  152. @tieredSubMenuHoverColor: @selectedTextColor;
  153. @tieredSubMenuActiveBackground: none transparent;
  154. @tieredSubMenuActiveColor: @selectedTextColor;
  155. @tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2);
  156. /* Tabular */
  157. @tabularBorderColor: #DCDDDE;
  158. @tabularBackgroundColor: #FFFFFF;
  159. @tabularBorderWidth: 1px;
  160. @tabularHorizontalPadding: 1.4em;
  161. @tabularMenuTextColor: @menuTextColor;
  162. @tabularActiveColor: @selectedTextColor;
  163. @tabularMenuActiveBackground: #FFFFFF;
  164. @tabularActiveWeight: bold;
  165. @tabularBorderRadius: 5px;
  166. /* Pagination */
  167. @paginationMinWidth: 3em;
  168. @paginationActiveBackground: rgba(0, 0, 0, 0.03);
  169. /* Labeled Icon */
  170. @labeledIconSize: 1.5em;
  171. @labeledIconMinWidth: 6em;
  172. @labeledIconTextMargin: 0.3em;
  173. /* Text */
  174. @textMenuTransition: opacity 0.2s ease;
  175. /*--------------
  176. Variations
  177. ---------------*/
  178. /* Inverted */
  179. @invertedBackground: none #333333;
  180. @invertedBoxShadow: none;
  181. @invertedHeaderBackground: rgba(0, 0, 0, 0.3);
  182. @invertedSubMenuColor: @invertedLightTextColor;
  183. /* Inverted Secondary */
  184. @secondaryInvertedColor: @invertedLightTextColor;
  185. @secondaryInvertedHoverColor: @invertedSelectedTextColor;
  186. /* Inverted Menu Divider */
  187. @invertedDividerBackground: linear-gradient(
  188. rgba(255, 255, 255, 0.03) 0%,
  189. rgba(255, 255, 255, 0.1) 50%,
  190. rgba(255, 255, 255, 0.03) 100%)
  191. ;
  192. @invertedVerticalDividerBackground: linear-gradient(to right,
  193. rgba(255, 255, 255, 0.03) 0%,
  194. rgba(255, 255, 255, 0.1) 50%,
  195. rgba(255, 255, 255, 0.03) 100%)
  196. ;
  197. /* Fixed */
  198. @fixedGridMargin: 2.75rem;
  199. /* Attached */
  200. @attachedBoxShadow: 0px 0px 0px 1px #DDDDDD;
  201. /* Sizes */
  202. @small: 0.875rem;
  203. @smallSubMenu: 0.875rem;
  204. @smallWidth: 13rem;
  205. @medium: 1rem;
  206. @mediumWidth: 15rem;
  207. @large: 1.125rem;
  208. @largeSubMenu: 0.875rem;
  209. @largeDropdown: 1rem;
  210. @largeWidth: 18rem;