|
|
/******************************* Card *******************************/
/*------------------- View --------------------*/
/* Shadow */ @shadowDistance: 0em; @shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor;
/* Item */ @background: #FFFFFF; @borderRadius: 0.325rem; @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 */ @contentBackground: none; @contentMargin: 0em; @contentPadding: 1em 1em; @contentFontSize: 1em; @contentBorder: none; @contentBorderRadius: 0em; @contentBoxShadow: none;
/* Header */ @headerMargin: 0em; @headerFontWeight: bold; @headerFontSize: 1.2em; @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: @linkColor; @contentLinkTransition: color @transitionDuration @transitionEasing; @contentLinkHoverColor: @linkHoverColor; @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: #FAFAFA @subtleGradient; @extraPosition: static; @extraTop: 0em; @extraLeft: 0em; @extraWidth: 100%; @extraPadding: 0.75em 1em; @extraBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.15); @extraColor: @lightTextColor; @extraTransition: color @transitionDuration @transitionEasing;
/* Extra Links */ @extraLinkColor: @unselectedTextColor; @extraLinkHoverColor: @linkHoverColor;
/*------------------- 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;
|