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.

207 lines
5.0 KiB

10 years ago
  1. /*-------------------
  2. Globals Used
  3. --------------------*/
  4. // (Color Variables)
  5. // @transitionDuration
  6. // @transitionEasing
  7. // @iconWidth
  8. // @borderColor
  9. // @textColor, @invertedTextColor
  10. /*-------------------
  11. List
  12. --------------------*/
  13. /* List */
  14. @listStyleType: none;
  15. @listStylePosition: outside;
  16. @margin: 0em;
  17. @verticalPadding: 0em;
  18. @horizontalPadding: 0em;
  19. /* Sub List */
  20. @childListDistance: 0.5em;
  21. @childListPadding: @childListDistance 0em 0em 0em;
  22. @childListIndent: 1em;
  23. /* List Item */
  24. @itemVerticalPadding: 0.3em;
  25. @itemHorizontalPadding: 0em;
  26. @itemLineHeight: 1.2;
  27. /*-------------------
  28. Elements
  29. --------------------*/
  30. /* Icon */
  31. @iconDistance: 0.3em;
  32. @iconAlign: middle;
  33. @iconOffset: ((@itemLineHeight - 1rem) / 2);
  34. @iconTransition: color 0.2s ease;
  35. /* Image */
  36. @imageDistance: 0.5em;
  37. @imageAlign: middle;
  38. /* Content */
  39. @contentDistance: 0.5em;
  40. @contentLineHeight: 1.2em;
  41. @contentAlign: middle;
  42. /* Link */
  43. @itemLinkColor: @textColor;
  44. @itemLinkHoverColor: @linkHoverColor;
  45. /* Linked Icon */
  46. @itemLinkIconColor: @lightTextColor;
  47. @itemLinkIconHoverColor: @textColor;
  48. @invertedIconLinkColor: @invertedLightTextColor;
  49. /* Header */
  50. @itemHeaderFontFamily: @headerFont;
  51. @itemHeaderFontWeight: bold;
  52. @itemHeaderColor: @textColor;
  53. /* Description */
  54. @itemDescriptionColor: @textColor;
  55. /*-------------------
  56. Variations
  57. --------------------*/
  58. /* Float */
  59. @floatMargin: 1em;
  60. /* Horizontal */
  61. @horizontalSpacing: 1em;
  62. @horizontalIconDistance: 0.25em;
  63. /* Inverted */
  64. @invertedListIconColor: @invertedLightTextColor;
  65. @invertedHeaderColor: @invertedTextColor;
  66. @invertedDescriptionColor: @invertedLightTextColor;
  67. /* Link List */
  68. @linkListItemColor: @unselectedTextColor;
  69. @linkListItemHoverColor: @selectedTextColor;
  70. @linkListItemDownColor: @selectedTextColor;
  71. @linkListItemActiveColor: @selectedTextColor;
  72. /* Inverted Link List */
  73. @invertedLinkListItemColor: @invertedUnselectedTextColor;
  74. @invertedLinkListItemHoverColor: @invertedUnselectedTextColor;
  75. @invertedLinkListItemDownColor: @invertedTextColor;
  76. @invertedLinkListItemActiveColor: @invertedSelectedTextColor;
  77. /* Selection List */
  78. @selectionListItemVerticalPadding: 0.5em;
  79. @selectionListItemHorizontalPadding: 0.5em;
  80. @selectionListTransition:
  81. 0.2s color ease,
  82. 0.2s padding-left ease,
  83. 0.2s background-color ease
  84. ;
  85. /* Selection List States */
  86. @selectionListBackground: transparent;
  87. @selectionListColor: @unselectedTextColor;
  88. @selectionListHoverBackground: @subtleTransparentBlack;
  89. @selectionListHoverColor: @selectedTextColor;
  90. @selectionListDownBackground: @transparentBlack;
  91. @selectionListDownColor: @selectedTextColor;
  92. @selectionListActiveBackground: @transparentBlack;
  93. @selectionListActiveColor: @selectedTextColor;
  94. /* Inverted Selection List */
  95. @invertedSelectionListBackground: transparent;
  96. @invertedSelectionListColor: @invertedUnselectedTextColor;
  97. @invertedSelectionListHoverBackground: @subtleTransparentWhite;
  98. @invertedSelectionListHoverColor: @invertedSelectedTextColor;
  99. @invertedSelectionListDownBackground: @transparentWhite;
  100. @invertedSelectionListDownColor: @invertedSelectedTextColor;
  101. @invertedSelectionListActiveBackground: @transparentWhite;
  102. @invertedSelectionListActiveColor: @invertedSelectedTextColor;
  103. /* Animated List */
  104. @animatedListTransition:
  105. 0.2s color ease,
  106. 0.2s padding-left ease,
  107. 0.2s background-color ease
  108. ;
  109. @animatedListIndent: 1em;
  110. @animatedListChildIndent: 0.5em;
  111. /* Bulleted */
  112. @bulletDistance: 1rem;
  113. @bulletOffset: -1rem;
  114. @bulletOpacity: 1;
  115. @bulletCharacter: '•';
  116. @bulletVerticalAlign: top;
  117. @bulletChildDistance: @bulletDistance;
  118. /* Horizontal Bullets */
  119. @horizontalBulletSpacing: 1.5rem;
  120. @horizontalBulletOffset: -0.9rem;
  121. /* Ordered List */
  122. @orderedCountName: ordered;
  123. @orderedCountContent: counters(ordered, ".") " ";
  124. @orderedCountDistance: 1.25rem;
  125. @orderedCountOpacity: 0.6;
  126. @orderedCountTextAlign: right;
  127. @orderedCountVerticalAlign: top;
  128. @orderedChildCountDistance: 2em;
  129. @orderedChildCountOffset: -2em;
  130. /* Horizontal Ordereded */
  131. @horizontalOrderedCountDistance: 0.5em;
  132. /* Divided */
  133. @dividedBorderWidth: 1px;
  134. @dividedBorder: @dividedBorderWidth solid @borderColor;
  135. @dividedInvertedBorderColor: @whiteBorderColor;
  136. @dividedChildListBorder: none;
  137. @dividedChildItemBorder: none;
  138. /* Divided Horizontal */
  139. @horizontalDividedSpacing: (@horizontalSpacing / 2);
  140. @horizontalDividedLineHeight: 0.6;
  141. /* Divided */
  142. @celledBorderWidth: 1px;
  143. @celledBorder: @celledBorderWidth solid @borderColor;
  144. @celledInvertedBorder: @dividedBorderWidth solid @whiteBorderColor;
  145. @celledHorizontalPadding: 0.5em;
  146. @celledChildListBorder: none;
  147. @celledChildItemBorder: none;
  148. /* Divided Horizontal */
  149. @horizontalCelledSpacing: (@horizontalSpacing / 2);
  150. @horizontalCelledLineHeight: 0.6;
  151. /* Relaxed */
  152. @relaxedVerticalPadding: 0.5rem;
  153. @relaxedHeaderMargin: 0.25rem;
  154. @relaxedHorizontalPadding: 1.25rem;
  155. /* Very Relaxed */
  156. @veryRelaxedVerticalPadding: 1rem;
  157. @veryRelaxedHeaderMargin: 0.5rem;
  158. @veryRelaxedHorizontalPadding: 2rem;
  159. /* Sizes */
  160. @mini: 0.7rem;
  161. @tiny: 0.8rem;
  162. @small: 0.9rem;
  163. @medium: 1rem;
  164. @large: 1.1rem;
  165. @big: 1.2rem;
  166. @huge: 1.3rem;
  167. @massive: 1.5rem;