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.

202 lines
4.9 KiB

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