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.

177 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
  1. /*******************************
  2. Card
  3. *******************************/
  4. /*-------------------
  5. View
  6. --------------------*/
  7. /* Shadow */
  8. @shadowDistance: 0em;
  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: 0em;
  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: #FAFAFA @subtleGradient;
  91. @extraPosition: static;
  92. @extraTop: 0em;
  93. @extraLeft: 0em;
  94. @extraWidth: 100%;
  95. @extraPadding: 0.75em 1em;
  96. @extraBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  97. @extraColor: @lightTextColor;
  98. @extraTransition: color @transitionDuration @transitionEasing;
  99. /* Extra Links */
  100. @extraLinkColor: @unselectedTextColor;
  101. @extraLinkHoverColor: @linkHoverColor;
  102. /*-------------------
  103. Variations
  104. --------------------*/
  105. /* Link */
  106. @linkHoverBackground: '';
  107. @linkHoverBorder: none;
  108. @linkHoverZIndex: 5;
  109. @shadowHoverBoxShadow: 0px @shadowDistance 0px 0px @solidSelectedBorderColor;
  110. @linkHoverBoxShadow:
  111. @shadowHoverBoxShadow,
  112. 0px 0px 0px 1px @selectedBorderColor
  113. ;
  114. /* Card Count */
  115. @wideCardSpacing: 1em;
  116. @cardSpacing: 0.75em;
  117. @smallCardSpacing: 0.5em;
  118. @oneCardSpacing: 0em;
  119. @twoCardSpacing: @wideCardSpacing;
  120. @threeCardSpacing: @wideCardSpacing;
  121. @fourCardSpacing: @cardSpacing;
  122. @fiveCardSpacing: @cardSpacing;
  123. @sixCardSpacing: @cardSpacing;
  124. @sevenCardSpacing: @smallCardSpacing;
  125. @eightCardSpacing: @smallCardSpacing;
  126. @nineCardSpacing: @smallCardSpacing;
  127. @tenCardSpacing: @smallCardSpacing;
  128. @oneCard: @oneColumn;
  129. @oneCardOffset: 0em;
  130. @twoCard: ~"calc("@twoColumn~" - "(@twoCardSpacing * 2)~")";
  131. @twoCardOffset: -@twoCardSpacing;
  132. @threeCard: ~"calc("@threeColumn~" - "(@threeCardSpacing * 2)~")";
  133. @threeCardOffset: -@threeCardSpacing;
  134. @fourCard: ~"calc("@fourColumn~" - "(@fourCardSpacing * 2)~")";
  135. @fourCardOffset: -@fourCardSpacing;
  136. @fiveCard: ~"calc("@fiveColumn~" - "(@fiveCardSpacing * 2)~")";
  137. @fiveCardOffset: -@fiveCardSpacing;
  138. @sixCard: ~"calc("@sixColumn~" - "(@sixCardSpacing * 2)~")";
  139. @sixCardOffset: -@sixCardSpacing;
  140. @sevenCard: ~"calc("@sevenColumn~" - "(@sevenCardSpacing * 2)~")";
  141. @sevenCardOffset: -@sevenCardSpacing;
  142. @eightCard: ~"calc("@eightColumn~" - "(@sevenCardSpacing * 2)~")";
  143. @eightCardOffset: -@sevenCardSpacing;
  144. @nineCard: ~"calc("@nineColumn~" - "(@nineCardSpacing * 2)~")";
  145. @nineCardOffset: -@nineCardSpacing;
  146. @tenCard: ~"calc("@tenColumn~" - "(@tenCardSpacing * 2)~")";
  147. @tenCardOffset: -@tenCardSpacing;
  148. /* Stackable */
  149. @stackableRowSpacing: 1em;
  150. @stackableCardSpacing: 1em;
  151. @stackableMargin: ~"calc("@oneColumn~" - "(@stackableCardSpacing * 2)~")";
  152. /* Sizes */
  153. @medium: 1em;