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.

178 lines
4.5 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
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*******************************
  2. Card
  3. *******************************/
  4. /*-------------------
  5. View
  6. --------------------*/
  7. /* Shadow */
  8. @shadowDistance: 0.2em;
  9. @shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor;
  10. /* Item */
  11. @background: #FFFFFF;
  12. @borderRadius: 0.325rem;
  13. @display: block;
  14. @margin: 1em 0em;
  15. @minHeight: 0px;
  16. @padding: 0.5em;
  17. @width: 290px;
  18. @borderWidth: 1px;
  19. @borderShadow: 0px 0px 0px @borderWidth @solidBorderColor;
  20. @boxShadow:
  21. @shadowBoxShadow,
  22. @borderShadow
  23. ;
  24. @border: none;
  25. @zIndex: '';
  26. @transition: box-shadow @transitionDuration @transitionEasing;
  27. /* Item Group */
  28. @groupDisplay: block;
  29. @groupFloat: left;
  30. @horizontalSpacing: 0.5em;
  31. @rowSpacing: 1.5em;
  32. @groupCardsMargin: 1em -@horizontalSpacing 0em;
  33. @groupCardMargin: 0em @horizontalSpacing @rowSpacing;
  34. /*-------------------
  35. Content
  36. --------------------*/
  37. /* Image */
  38. @imageBackground: @transparentBlack;
  39. @imagePadding: 0em;
  40. @imageBorder: none;
  41. @imageBorderRadius: @borderRadius @borderRadius 0em 0em;
  42. @imageBoxShadow: none;
  43. @imageBorder: none;
  44. /* Content */
  45. @contentBackground: none;
  46. @contentMargin: 0em;
  47. @contentPadding: 1em 1em;
  48. @contentFontSize: 1em;
  49. @contentBorder: none;
  50. @contentBorderRadius: 0em;
  51. @contentBoxShadow: none;
  52. /* Header */
  53. @headerMargin: 0em;
  54. @headerFontWeight: bold;
  55. @headerFontSize: 1.2em;
  56. @headerColor: @darkTextColor;
  57. /* Metadata */
  58. @metaFontSize: 0.9em;
  59. @metaSpacing: 0.3em;
  60. @metaColor: @lightTextColor;
  61. /* Icons */
  62. @actionOpacity: 0.75;
  63. @actionHoverOpacity: 1;
  64. @actionTransition: color @transitionDuration @transitionEasing;
  65. @starColor: #AC9400;
  66. @starActiveColor: #E9B539;
  67. @likeColor: #FFADAE;
  68. @likeActiveColor: #EF404A;
  69. /* Links */
  70. @contentLinkColor: @linkColor;
  71. @contentLinkTransition: color @transitionDuration @transitionEasing;
  72. @contentLinkHoverColor: @linkHoverColor;
  73. @headerLinkColor: @headerColor;
  74. @headerLinkHoverColor: @linkHoverColor;
  75. @metaLinkColor: @lightTextColor;
  76. @metaLinkHoverColor: @textColor;
  77. /* Description */
  78. @descriptionDistance: 0.5em;
  79. @descriptionColor: rgba(0, 0, 0, 0.5);
  80. /* Content Image */
  81. @contentImageWidth: 2em;
  82. @contentImageVerticalAlign: middle;
  83. /* Avatar Image */
  84. @avatarSize: @contentImageWidth;
  85. @avatarBorderRadius: @circularRadius;
  86. /* Paragraph */
  87. @paragraphDistance: 0.5em;
  88. /* Additional Content */
  89. @extraDivider: 1px solid rgba(0, 0, 0, 0.05);
  90. @extraBackground: none;
  91. @extraPosition: static;
  92. @extraWidth: auto;
  93. @extraTop: 0em;
  94. @extraLeft: 0em;
  95. @extraMargin: 0em 1em;
  96. @extraPadding: 0.75em 0em;
  97. @extraBoxShadow: none;
  98. @extraColor: @lightTextColor;
  99. @extraTransition: color @transitionDuration @transitionEasing;
  100. /* Extra Links */
  101. @extraLinkColor: @unselectedTextColor;
  102. @extraLinkHoverColor: @linkHoverColor;
  103. /*-------------------
  104. Variations
  105. --------------------*/
  106. /* Link */
  107. @linkHoverBackground: '';
  108. @linkHoverBorder: none;
  109. @linkHoverZIndex: 5;
  110. @shadowHoverBoxShadow: 0px @shadowDistance 0px 0px @solidSelectedBorderColor;
  111. @linkHoverBoxShadow:
  112. @shadowHoverBoxShadow,
  113. 0px 0px 0px 1px @selectedBorderColor
  114. ;
  115. /* Card Count */
  116. @wideCardSpacing: 1em;
  117. @cardSpacing: 0.75em;
  118. @smallCardSpacing: 0.5em;
  119. @oneCardSpacing: 0em;
  120. @twoCardSpacing: @wideCardSpacing;
  121. @threeCardSpacing: @wideCardSpacing;
  122. @fourCardSpacing: @cardSpacing;
  123. @fiveCardSpacing: @cardSpacing;
  124. @sixCardSpacing: @cardSpacing;
  125. @sevenCardSpacing: @smallCardSpacing;
  126. @eightCardSpacing: @smallCardSpacing;
  127. @nineCardSpacing: @smallCardSpacing;
  128. @tenCardSpacing: @smallCardSpacing;
  129. @oneCard: @oneColumn;
  130. @oneCardOffset: 0em;
  131. @twoCard: ~"calc("@twoColumn~" - "(@twoCardSpacing * 2)~")";
  132. @twoCardOffset: -@twoCardSpacing;
  133. @threeCard: ~"calc("@threeColumn~" - "(@threeCardSpacing * 2)~")";
  134. @threeCardOffset: -@threeCardSpacing;
  135. @fourCard: ~"calc("@fourColumn~" - "(@fourCardSpacing * 2)~")";
  136. @fourCardOffset: -@fourCardSpacing;
  137. @fiveCard: ~"calc("@fiveColumn~" - "(@fiveCardSpacing * 2)~")";
  138. @fiveCardOffset: -@fiveCardSpacing;
  139. @sixCard: ~"calc("@sixColumn~" - "(@sixCardSpacing * 2)~")";
  140. @sixCardOffset: -@sixCardSpacing;
  141. @sevenCard: ~"calc("@sevenColumn~" - "(@sevenCardSpacing * 2)~")";
  142. @sevenCardOffset: -@sevenCardSpacing;
  143. @eightCard: ~"calc("@eightColumn~" - "(@sevenCardSpacing * 2)~")";
  144. @eightCardOffset: -@sevenCardSpacing;
  145. @nineCard: ~"calc("@nineColumn~" - "(@nineCardSpacing * 2)~")";
  146. @nineCardOffset: -@nineCardSpacing;
  147. @tenCard: ~"calc("@tenColumn~" - "(@tenCardSpacing * 2)~")";
  148. @tenCardOffset: -@tenCardSpacing;
  149. /* Stackable */
  150. @stackableRowSpacing: 1em;
  151. @stackableCardSpacing: 1em;
  152. @stackableMargin: ~"calc("@oneColumn~" - "(@stackableCardSpacing * 2)~")";
  153. /* Sizes */
  154. @medium: 1em;