/*******************************

Card

*******************************/

/*——————-

View

——————–*/

/* Shadow */ @shadowDistance: 0.2em; @shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor;

/* Item */ @background: FFFFFF; @borderRadius: @defaultBorderRadius; @display: block; @margin: 1em 0em; @minHeight: 0px; @padding: 0em; @width: 290px; @borderWidth: 1px; @borderShadow: 0px 0px 0px @borderWidth @solidBorderColor; @boxShadow:

@shadowBoxShadow,
@borderShadow

; @border: none; @zIndex: ”; @transition: box-shadow @transitionDuration @transitionEasing;

/* Item Group */ @groupDisplay: block; @groupFloat: left; @horizontalSpacing: 0.5em; @rowSpacing: 1.5em; @groupCardsMargin: 1em -@horizontalSpacing 0em; @groupCardMargin: 0em @horizontalSpacing @rowSpacing;

/*——————-

Content

——————–*/

/* Image */ @imageBackground: @transparentBlack; @imagePadding: 0em; @imageBorder: none; @imageBorderRadius: @borderRadius @borderRadius 0em 0em; @imageBoxShadow: none; @imageBorder: none;

/* Content */ @contentMargin: 0em; @contentBackground: none; @contentPadding: 1em 1em; @contentFontSize: 1em; @contentBorder: none; @contentBorderRadius: 0em; @contentBoxShadow: none;

/* Header */ @headerMargin: 0em; @headerFontWeight: bold; @headerFontSize: 1.2em; @headerLineHeight: 1.33em; @headerLineHeightOffset: -(@lineHeight - 1em) / 2; @headerColor: @darkTextColor;

/* Metadata */ @metaFontSize: 0.9em; @metaSpacing: 0.3em; @metaColor: @lightTextColor;

/* Icons */ @actionOpacity: 0.75; @actionHoverOpacity: 1; @actionTransition: color @transitionDuration @transitionEasing; @starColor: AC9400; @starActiveColor: E9B539; @likeColor: FFADAE; @likeActiveColor: EF404A;

/* Links */ @contentLinkColor: ”; @contentLinkHoverColor: ”; @contentLinkTransition: color @transitionDuration @transitionEasing;

@headerLinkColor: @headerColor; @headerLinkHoverColor: @linkHoverColor;

@metaLinkColor: @lightTextColor; @metaLinkHoverColor: @textColor;

/* Description */ @descriptionDistance: 0.5em; @descriptionColor: rgba(0, 0, 0, 0.5);

/* Content Image */ @contentImageWidth: 2em; @contentImageVerticalAlign: middle;

/* Avatar Image */ @avatarSize: @contentImageWidth; @avatarBorderRadius: @circularRadius;

/* Paragraph */ @paragraphDistance: 0.5em;

/* Additional Content */ @extraDivider: 1px solid rgba(0, 0, 0, 0.05); @extraBackground: none; @extraPosition: static; @extraWidth: auto; @extraTop: 0em; @extraLeft: 0em; @extraMargin: 0em 0em; @extraPadding: 0.75em 1em; @extraBoxShadow: none; @extraColor: @lightTextColor; @extraTransition: color @transitionDuration @transitionEasing;

/* Extra Links */ @extraLinkColor: @unselectedTextColor; @extraLinkHoverColor: @linkHoverColor;

/* Buttons */ @buttonMargin: 0em -@borderWidth -@shadowDistance; @buttonWidth: ~“calc(100% + ”(@borderWidth * 2)~“)”;

/*——————-

Variations

——————–*/

/* Link */ @linkHoverBackground: ”; @linkHoverBorder: none; @linkHoverZIndex: 5;

@shadowHoverBoxShadow: 0px @shadowDistance 0px 0px @solidSelectedBorderColor; @linkHoverBoxShadow:

@shadowHoverBoxShadow,
0px 0px 0px 1px @selectedBorderColor

;

/* Card Count */ @wideCardSpacing: 1em; @cardSpacing: 0.75em; @smallCardSpacing: 0.5em;

@oneCardSpacing: 0em; @twoCardSpacing: @wideCardSpacing; @threeCardSpacing: @wideCardSpacing; @fourCardSpacing: @cardSpacing; @fiveCardSpacing: @cardSpacing; @sixCardSpacing: @cardSpacing; @sevenCardSpacing: @smallCardSpacing; @eightCardSpacing: @smallCardSpacing; @nineCardSpacing: @smallCardSpacing; @tenCardSpacing: @smallCardSpacing;

@oneCard: @oneColumn; @oneCardOffset: 0em; @twoCard: ~“calc(”@twoColumn~“ - ”(@twoCardSpacing * 2)~“)”; @twoCardOffset: -@twoCardSpacing; @threeCard: ~“calc(”@threeColumn~“ - ”(@threeCardSpacing * 2)~“)”; @threeCardOffset: -@threeCardSpacing; @fourCard: ~“calc(”@fourColumn~“ - ”(@fourCardSpacing * 2)~“)”; @fourCardOffset: -@fourCardSpacing; @fiveCard: ~“calc(”@fiveColumn~“ - ”(@fiveCardSpacing * 2)~“)”; @fiveCardOffset: -@fiveCardSpacing; @sixCard: ~“calc(”@sixColumn~“ - ”(@sixCardSpacing * 2)~“)”; @sixCardOffset: -@sixCardSpacing; @sevenCard: ~“calc(”@sevenColumn~“ - ”(@sevenCardSpacing * 2)~“)”; @sevenCardOffset: -@sevenCardSpacing; @eightCard: ~“calc(”@eightColumn~“ - ”(@sevenCardSpacing * 2)~“)”; @eightCardOffset: -@sevenCardSpacing; @nineCard: ~“calc(”@nineColumn~“ - ”(@nineCardSpacing * 2)~“)”; @nineCardOffset: -@nineCardSpacing; @tenCard: ~“calc(”@tenColumn~“ - ”(@tenCardSpacing * 2)~“)”; @tenCardOffset: -@tenCardSpacing;

/* Stackable */ @stackableRowSpacing: 1em; @stackableCardSpacing: 1em; @stackableMargin: ~“calc(”@oneColumn~“ - ”(@stackableCardSpacing * 2)~“)”;

/* Sizes */ @medium: 1em;