/* * # 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();