/*
* # Semantic - Item
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

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

Theme

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

@type : ‘view’; @element : ‘card’;

@import ‘../../theme.config’;

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

Standard

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

/*————–

Cards

—————*/

.ui.cards {

margin: @groupCardsMargin;

}

.ui.cards > .card {

display: @groupDisplay;
margin: @groupCardMargin;
float: @groupFloat;

}

.ui.cards:first-child, .ui.card:first-child {

margin-top: 0em;

} .ui.cards:last-child, .ui.card:last-child {

margin-bottom: 0em;

}

/* Clearing */ .ui.cards:after, .ui.card:after {

display: block;
content: ' ';
height: 0px;
clear: both;
overflow: hidden;
visibility: hidden;

}

/*————–

Card

—————*/

.ui.cards > .card, .ui.card {

max-width: 100%;
position: relative;
display: @display;

width: @width;
min-height: @minHeight;
background: @background;
padding: @padding;

border: @border;
border-radius: @borderRadius;
box-shadow: @boxShadow;
transition: @transition;
z-index: @zIndex;

} .ui.card {

margin: @margin;

}

.ui.cards > .card a, .ui.card a {

cursor: pointer;

}

/*————–

Rounded Edges

—————*/

.ui.cards > .card > :first-child, .ui.card > :first-child {

border-radius: @borderRadius @borderRadius 0em 0em !important;

}

.ui.cards > .card > :last-child, .ui.card > :last-child {

border-radius: 0em 0em @borderRadius @borderRadius !important;

}

/*————–

Images

—————*/

.ui.cards > .card > .image, .ui.card > .image {

display: block;
position: relative;
padding: @imagePadding;
background: @imageBackground;

} .ui.cards > .card > .image > img, .ui.card > .image > img {

display: block;
width: 100%;
height: auto;
border-radius: @imageBorderRadius;
border: @imageBorder;

}

.ui.cards > .card > .image:only-child > img, .ui.card > .image:only-child > img {

border-radius: @borderRadius;

}

/*————–

Content

—————*/

.ui.cards > .card > .content, .ui.card > .content {

} .ui.cards > .card > .content, .ui.card > .content {

background: @contentBackground;
margin: @contentMargin;
padding: @contentPadding;
box-shadow: @contentBoxShadow;
font-size: @contentFontSize;
border: @contentBorder;
border-radius: @contentBorderRadius;

}

.ui.cards > .card > .content:after, .ui.card > .content:after {

display: block;
content: ' ';
height: 0px;
clear: both;
overflow: hidden;
visibility: hidden;

}

.ui.cards > .card > .content > .header, .ui.card > .content > .header {

display: block;
margin: @headerMargin;
font-family: @headerFont;
color: @headerColor;

}

/* Default Header Size */ .ui.cards > .card > .content > .header:not(.ui), .ui.card > .content > .header:not(.ui) {

font-weight: @headerFontWeight;
font-size: @headerFontSize;
margin-top: @headerLineHeightOffset;
line-height: @headerLineHeight;

}

.ui.cards > .card > .content > .meta + .description, .ui.cards > .card > .content > .header + .description, .ui.card > .content > .meta + .description, .ui.card > .content > .header + .description {

margin-top: @descriptionDistance;

}

/*————–

Floated

—————*/

.ui.cards > .card [class*=“left floated”], .ui.card [class*=“left floated”] {

float: left;

} .ui.cards > .card [class*=“right floated”], .ui.card [class*=“right floated”] {

float: right;

}

/*————–

Content Image

—————*/

.ui.cards > .card .content img, .ui.card .content img {

display: inline-block;
vertical-align: @contentImageVerticalAlign;
width: @contentImageWidth;

} .ui.cards > .card img.avatar, .ui.cards > .card .avatar img, .ui.card img.avatar, .ui.card .avatar img {

width: @avatarSize;
height: @avatarSize;
border-radius: @avatarBorderRadius;

}

/*————–

Description

—————*/

.ui.cards > .card > .content > .description, .ui.card > .content > .description {

clear: both;
color: @descriptionColor;

}

/*————–

Paragraph

—————*/

.ui.cards > .card > .content p, .ui.card > .content p {

margin: 0em 0em @paragraphDistance;

} .ui.cards > .card > .content p:last-child, .ui.card > .content p:last-child {

margin-bottom: 0em;

}

/*————–

Meta

—————*/

.ui.cards > .card .meta, .ui.card .meta {

font-size: @metaFontSize;
color: @metaColor;

} .ui.cards > .card .meta *, .ui.card .meta * {

margin-right: @metaSpacing;

} .ui.cards > .card .meta :last-child, .ui.card .meta :last-child {

margin-right: 0em;

}

.ui.cards > .card .meta [class*=“right floated”], .ui.card .meta [class*=“right floated”] {

margin-right: 0em;
margin-left: @metaSpacing;

}

/*————–

Links

—————*/

/* Generic */ .ui.cards > .card > .content a:not(.ui), .ui.card > .content a:not(.ui) {

color: @contentLinkColor;
transition: @contentLinkTransition;

} .ui.cards > .card > .content a:not(.ui):hover, .ui.card > .content a:not(.ui):hover {

color: @contentLinkHoverColor;

}

/* Header */ .ui.cards > .card > .content > a.header, .ui.card > .content > a.header {

color: @headerLinkColor;

} .ui.cards > .card > .content > a.header:hover, .ui.card > .content > a.header:hover {

color: @headerLinkHoverColor;

}

/* Meta */ .ui.cards > .card .meta > a:not(.ui), .ui.card .meta > a:not(.ui) {

color: @metaLinkColor;

} .ui.cards > .card .meta > a:not(.ui):hover, .ui.card .meta > a:not(.ui):hover {

color: @metaLinkHoverColor;

}

/*————–

Buttons

—————*/

.ui.cards > .card > .buttons:last-child, .ui.card > .buttons:last-child, .ui.cards > .card > .button:last-child, .ui.card > .button:last-child {

margin: @buttonMargin;
width: @buttonWidth;

}

/*————–

Labels

—————*/

/*—–Star—– */

/* Icon */ .ui.cards > .card > .content .star.icon, .ui.card > .content .star.icon {

cursor: pointer;
opacity: @actionOpacity;
transition: @actionTransition;

} .ui.cards > .card > .content .star.icon:hover, .ui.card > .content .star.icon:hover {

opacity: @actionHoverOpacity;
color: @starColor;

} .ui.cards > .card > .content .active.star.icon, .ui.card > .content .active.star.icon {

color: @starActiveColor;

}

/*—–Like—– */

/* Icon */ .ui.cards > .card > .content .like.icon, .ui.card > .content .like.icon {

cursor: pointer;
opacity: @actionOpacity;
transition: @actionTransition;

} .ui.cards > .card > .content .like.icon:hover, .ui.card > .content .like.icon:hover {

opacity: @actionHoverOpacity;
color: @likeColor;

} .ui.cards > .card > .content .active.like.icon, .ui.card > .content .active.like.icon {

color: @likeActiveColor;

}

/*—————-

Extra Content

—————–*/

.ui.cards > .card > .extra, .ui.card > .extra {

max-width: 100%;
min-height: 0em !important;
position: @extraPosition;
background: @extraBackground;
width: @extraWidth;
margin: @extraMargin;
padding: @extraPadding;
top: @extraTop;
left: @extraLeft;
color: @extraColor;
box-shadow: @extraBoxShadow;
transition: @extraTransition;
border-top: @extraDivider;

} .ui.cards > .card > .extra a:not(.ui), .ui.card > .extra a:not(.ui) {

color: @extraLinkColor;

} .ui.cards > .card > .extra a:not(.ui):hover, .ui.card > .extra a:not(.ui):hover {

color: @extraLinkHoverColor;

}

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

Variations

*******************************/ /*——————-

Fluid

——————–*/

.ui.fluid.card {

width: 100%;
max-width: 9999px;

}

/*——————-

Link

——————–*/

.ui.cards a.card:hover, .ui.link.cards .card:hover, a.ui.card:hover, .ui.link.card:hover {

cursor: pointer;
z-index: @linkHoverZIndex;
background: @linkHoverBackground;
border: @linkHoverBorder;
box-shadow: @linkHoverBoxShadow;

}

/*————–

Card Count

—————*/

.ui.one.cards {

margin-left: @oneCardOffset;
margin-right: @oneCardOffset;

} .ui.one.cards > .card {

width: @oneCard;

}

.ui.two.cards {

margin-left: @twoCardOffset;
margin-right: @twoCardOffset;

} .ui.two.cards > .card {

width: @twoCard;
margin-left: @twoCardSpacing;
margin-right: @twoCardSpacing;

} .ui.two.cards > .card:nth-child(2n+1) {

clear: left;

}

.ui.three.cards {

margin-left: @threeCardOffset;
margin-right: @threeCardOffset;

} .ui.three.cards > .card {

width: @threeCard;
margin-left: @threeCardSpacing;
margin-right: @threeCardSpacing;

} .ui.three.cards > .card:nth-child(3n+1) {

clear: left;

}

.ui.four.cards {

margin-left: @fourCardOffset;
margin-right: @fourCardOffset;

} .ui.four.cards > .card {

width: @fourCard;
margin-left: @fourCardSpacing;
margin-right: @fourCardSpacing;

} .ui.four.cards > .card:nth-child(4n+1) {

clear: left;

}

.ui.five.cards {

margin-left: @fiveCardOffset;
margin-right: @fiveCardOffset;

} .ui.five.cards > .card {

width: @fiveCard;
margin-left: @fiveCardSpacing;
margin-right: @fiveCardSpacing;

} .ui.five.cards > .card:nth-child(5n+1) {

clear: left;

}

.ui.six.cards {

margin-left: @sixCardOffset;
margin-right: @sixCardOffset;

} .ui.six.cards > .card {

width: @sixCard;
margin-left: @sixCardSpacing;
margin-right: @sixCardSpacing;

} .ui.six.cards > .card:nth-child(6n+1) {

clear: left;

}

.ui.seven.cards {

margin-left: @sevenCardOffset;
margin-right: @sevenCardOffset;

} .ui.seven.cards > .card {

width: @sevenCard;
margin-left: @sevenCardSpacing;
margin-right: @sevenCardSpacing;

} .ui.seven.cards > .card:nth-child(7n+1) {

clear: left;

}

.ui.eight.cards {

margin-left: @eightCardOffset;
margin-right: @eightCardOffset;

} .ui.eight.cards > .card {

width: @eightCard;
margin-left: @eightCardSpacing;
margin-right: @eightCardSpacing;
font-size: 11px;

} .ui.eight.cards > .card:nth-child(8n+1) {

clear: left;

}

.ui.nine.cards {

margin-left: @nineCardOffset;
margin-right: @nineCardOffset;

} .ui.nine.cards > .card {

width: @nineCard;
margin-left: @nineCardSpacing;
margin-right: @nineCardSpacing;
font-size: 10px;

} .ui.nine.cards > .card:nth-child(9n+1) {

clear: left;

}

.ui.ten.cards {

margin-left: @tenCardOffset;
margin-right: @tenCardOffset;

} .ui.ten.cards > .card {

width: @tenCard;
margin-left: @tenCardSpacing;
margin-right: @tenCardSpacing;

} .ui.ten.cards > .card:nth-child(10n+1) {

clear: left;

}

/*——————-

Doubling

——————–*/

/* Mobily Only */ @media only screen and (max-width : @largestMobileScreen) {

.ui.two.doubling.cards {
  margin-left: @oneCardOffset;
  margin-right: @oneCardOffset;
}
.ui.two.doubling.cards .card {
  width: @oneCard;
  margin-left: @oneCardSpacing;
  margin-right: @oneCardSpacing;
}
.ui.three.doubling.cards {
  margin-left: @twoCardOffset;
  margin-right: @twoCardOffset;
}
.ui.three.doubling.cards .card {
  width: @twoCard;
  margin-left: @twoCardSpacing;
  margin-right: @twoCardSpacing;
}
.ui.four.doubling.cards {
  margin-left: @twoCardOffset;
  margin-right: @twoCardOffset;
}
.ui.four.doubling.cards .card {
  width: @twoCard;
  margin-left: @twoCardSpacing;
  margin-right: @twoCardSpacing;
}
.ui.five.doubling.cards {
  margin-left: @twoCardOffset;
  margin-right: @twoCardOffset;
}
.ui.five.doubling.cards .card {
  width: @twoCard;
  margin-left: @twoCardSpacing;
  margin-right: @twoCardSpacing;
}
.ui.six.doubling.cards {
  margin-left: @twoCardOffset;
  margin-right: @twoCardOffset;
}
.ui.six.doubling.cards .card {
  width: @twoCard;
  margin-left: @twoCardSpacing;
  margin-right: @twoCardSpacing;
}
.ui.seven.doubling.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.seven.doubling.cards .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}
.ui.eight.doubling.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.eight.doubling.cards .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}
.ui.nine.doubling.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.nine.doubling.cards .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}
.ui.ten.doubling.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.ten.doubling.cards .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}

}

/* Tablet Only */ @media only screen and (min-width : @tabletBreakpoint) and (max-width : @largestTabletScreen) {

.ui.two.doubling.cards {
  margin-left: @oneCardOffset;
  margin-right: @oneCardOffset;
}
.ui.two.doubling.cards .card {
  width: @oneCard;
  margin-left: @oneCardSpacing;
  margin-right: @oneCardSpacing;
}
.ui.three.doubling.cards {
  margin-left: @twoCardOffset;
  margin-right: @twoCardOffset;
}
.ui.three.doubling.cards .card {
  width: @twoCard;
  margin-left: @twoCardSpacing;
  margin-right: @twoCardSpacing;
}
.ui.four.doubling.cards {
  margin-left: @twoCardOffset;
  margin-right: @twoCardOffset;
}
.ui.four.doubling.cards .card {
  width: @twoCard;
  margin-left: @twoCardSpacing;
  margin-right: @twoCardSpacing;
}
.ui.five.doubling.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.five.doubling.cards .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}
.ui.six.doubling.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.six.doubling.cards .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}
.ui.eight.doubling.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.eight.doubling.cards .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}
.ui.eight.doubling.cards {
  margin-left: @fourCardOffset;
  margin-right: @fourCardOffset;
}
.ui.eight.doubling.cards .card {
  width: @fourCard;
  margin-left: @fourCardSpacing;
  margin-right: @fourCardSpacing;
}
.ui.nine.doubling.cards {
  margin-left: @fourCardOffset;
  margin-right: @fourCardOffset;
}
.ui.nine.doubling.cards .card {
  width: @fourCard;
  margin-left: @fourCardSpacing;
  margin-right: @fourCardSpacing;
}
.ui.ten.doubling.cards {
  margin-left: @fiveCardOffset;
  margin-right: @fiveCardOffset;
}
.ui.ten.doubling.cards .card {
  width: @fiveCard;
  margin-left: @fiveCardSpacing;
  margin-right: @fiveCardSpacing;
}

}

/*——————-

Stackable

——————–*/

@media only screen and (max-width : @largestMobileScreen) {

.ui.stackable.cards {
  display: block !important;
}
.ui.stackable.cards .card:first-child {
  margin-top: 0em !important;
}
.ui.stackable.cards > .card {
  display: block !important;
  height: auto !important;
  margin: @stackableRowSpacing @stackableCardSpacing;
  padding: 0 !important;
  width: @stackableMargin !important;
}

}

/*————–

Size

—————*/

.ui.cards > .card {

font-size: @medium;

}

.loadUIOverrides();