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.

213 lines
5.2 KiB

10 years ago
10 years ago
10 years ago
10 years ago
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. States
  51. --------------------*/
  52. @disabledColor: @disabledTextColor;
  53. @invertedDisabledColor: @invertedDisabledTextColor;
  54. /*-------------------
  55. Variations
  56. --------------------*/
  57. /* Float */
  58. @floatMargin: 1em;
  59. /* Horizontal */
  60. @horizontalSpacing: 1em;
  61. @horizontalIconDistance: 0.25em;
  62. /* Inverted */
  63. @invertedListIconColor: @invertedLightTextColor;
  64. @invertedHeaderColor: @invertedTextColor;
  65. @invertedDescriptionColor: @invertedLightTextColor;
  66. /* Link List */
  67. @linkListItemColor: @unselectedTextColor;
  68. @linkListItemHoverColor: @hoveredTextColor;
  69. @linkListItemDownColor: @pressedTextColor;
  70. @linkListItemActiveColor: @selectedTextColor;
  71. @linkListTransition:
  72. 0.2s color @defaultEasing
  73. ;
  74. /* Inverted Link List */
  75. @invertedLinkListItemColor: @invertedUnselectedTextColor;
  76. @invertedLinkListItemHoverColor: @invertedHoveredTextColor;
  77. @invertedLinkListItemDownColor: @invertedPressedTextColor;
  78. @invertedLinkListItemActiveColor: @invertedSelectedTextColor;
  79. /* Selection List */
  80. @selectionListItemMargin: 0em 0em 0.3em 0em;
  81. @selectionListItemBorderRadius: 0.5em;
  82. @selectionListItemVerticalPadding: 0.5em;
  83. @selectionListItemHorizontalPadding: 0.5em;
  84. @selectionListTransition:
  85. 0.2s color @defaultEasing,
  86. 0.2s padding-left @defaultEasing,
  87. 0.2s background-color @defaultEasing
  88. ;
  89. /* Selection List States */
  90. @selectionListBackground: transparent;
  91. @selectionListColor: @unselectedTextColor;
  92. @selectionListHoverBackground: @subtleTransparentBlack;
  93. @selectionListHoverColor: @hoveredTextColor;
  94. @selectionListDownBackground: @transparentBlack;
  95. @selectionListDownColor: @pressedTextColor;
  96. @selectionListActiveBackground: @transparentBlack;
  97. @selectionListActiveColor: @selectedTextColor;
  98. /* Inverted Selection List */
  99. @invertedSelectionListBackground: transparent;
  100. @invertedSelectionListColor: @invertedUnselectedTextColor;
  101. @invertedSelectionListHoverBackground: @subtleTransparentWhite;
  102. @invertedSelectionListHoverColor: @invertedHoveredTextColor;
  103. @invertedSelectionListDownBackground: @transparentWhite;
  104. @invertedSelectionListDownColor: @invertedPressedTextColor;
  105. @invertedSelectionListActiveBackground: @transparentWhite;
  106. @invertedSelectionListActiveColor: @invertedSelectedTextColor;
  107. /* Animated List */
  108. @animatedListTransition:
  109. 0.2s color ease,
  110. 0.2s padding-left ease,
  111. 0.2s background-color ease
  112. ;
  113. @animatedListIndent: 1em;
  114. @animatedListChildIndent: 0.5em;
  115. /* Bulleted */
  116. @bulletDistance: 1rem;
  117. @bulletOffset: -1rem;
  118. @bulletOpacity: 1;
  119. @bulletCharacter: '•';
  120. @bulletColor: @textColor;
  121. @bulletVerticalAlign: top;
  122. @bulletChildDistance: @bulletDistance;
  123. /* Horizontal Bullets */
  124. @horizontalBulletSpacing: 1.5rem;
  125. @horizontalBulletOffset: -1.1rem;
  126. /* Ordered List */
  127. @orderedCountName: ordered;
  128. @orderedCountContent: counters(ordered, ".") " ";
  129. @orderedCountColor: @textColor;
  130. @orderedCountDistance: 1.25rem;
  131. @orderedCountOpacity: 0.8;
  132. @orderedCountTextAlign: right;
  133. @orderedCountVerticalAlign: middle;
  134. @orderedChildCountDistance: 2em;
  135. @orderedChildCountOffset: -2em;
  136. /* Horizontal Ordereded */
  137. @horizontalOrderedCountDistance: 0.5em;
  138. /* Divided */
  139. @dividedBorderWidth: 1px;
  140. @dividedBorder: @dividedBorderWidth solid @borderColor;
  141. @dividedInvertedBorderColor: @whiteBorderColor;
  142. @dividedChildListBorder: none;
  143. @dividedChildItemBorder: none;
  144. /* Divided Horizontal */
  145. @horizontalDividedSpacing: (@horizontalSpacing / 2);
  146. @horizontalDividedLineHeight: 0.6;
  147. /* Divided */
  148. @celledBorderWidth: 1px;
  149. @celledBorder: @celledBorderWidth solid @borderColor;
  150. @celledInvertedBorder: @dividedBorderWidth solid @whiteBorderColor;
  151. @celledHorizontalPadding: 0.5em;
  152. @celledChildListBorder: none;
  153. @celledChildItemBorder: none;
  154. /* Divided Horizontal */
  155. @horizontalCelledSpacing: (@horizontalSpacing / 2);
  156. @horizontalCelledLineHeight: 0.6;
  157. /* Relaxed */
  158. @relaxedVerticalPadding: 0.5rem;
  159. @relaxedHeaderMargin: 0.25rem;
  160. @relaxedHorizontalPadding: 1.25rem;
  161. /* Very Relaxed */
  162. @veryRelaxedVerticalPadding: 1rem;
  163. @veryRelaxedHeaderMargin: 0.5rem;
  164. @veryRelaxedHorizontalPadding: 2rem;
  165. /* Sizes */
  166. @mini: 0.7rem;
  167. @tiny: 0.8rem;
  168. @small: 0.9rem;
  169. @medium: 1rem;
  170. @large: 1.1rem;
  171. @big: 1.2rem;
  172. @huge: 1.3rem;
  173. @massive: 1.5rem;