From 4694c181860e505d3ae0cd408792dcb7cf0975d1 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 29 May 2015 16:59:32 -0400 Subject: [PATCH] Fixed content border radius when only-child. Added border between repeated contents --- src/definitions/views/card.less | 84 +++++-------------------- src/themes/default/views/card.variables | 6 +- 2 files changed, 20 insertions(+), 70 deletions(-) diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less index b5a09cd5d..022279cc0 100755 --- a/src/definitions/views/card.less +++ b/src/definitions/views/card.less @@ -108,6 +108,11 @@ border-radius: 0em 0em @borderRadius @borderRadius !important; } +.ui.cards > .card > :only-child, +.ui.card > :only-child { + border-radius: @borderRadius !important; +} + /*-------------- Images ---------------*/ @@ -128,12 +133,6 @@ border-radius: inherit; border: @imageBorder; } -.ui.cards > .card > :first-child { - border-radius: @borderRadius @borderRadius 0em 0em; -} -.ui.cards > .card > :last-child { - border-radius: 0em 0em @borderRadius @borderRadius; -} /*-------------- Content @@ -150,6 +149,10 @@ border: @contentBorder; border-radius: @contentBorderRadius; } +.ui.cards > .card > .content ~ .content, +.ui.card > .content ~ .content { + border-top: @repeatedContentBorder; +} .ui.cards > .card > .content:after, .ui.card > .content:after { @@ -185,9 +188,9 @@ margin-top: @descriptionDistance; } -/*-------------- - Floated ----------------*/ +/*---------------- + Floated Content +-----------------*/ .ui.cards > .card [class*="left floated"], .ui.card [class*="left floated"] { @@ -322,10 +325,10 @@ Buttons ---------------*/ -.ui.cards > .card > .buttons:last-child, -.ui.card > .buttons:last-child, -.ui.cards > .card > .button:last-child, -.ui.card > .button:last-child { +.ui.cards > .card > .buttons, +.ui.card > .buttons, +.ui.cards > .card > .button, +.ui.card > .button { margin: @buttonMargin; width: @buttonWidth; } @@ -723,7 +726,6 @@ a.ui.card:hover, margin-right: @oneCardOffset; } .ui.one.cards > .card { - flex-basis: @oneCard; width: @oneCard; } @@ -732,128 +734,92 @@ a.ui.card:hover, margin-right: @twoCardOffset; } .ui.two.cards > .card { - flex-basis: @twoCard; 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 { - flex-basis: @threeCard; 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 { - flex-basis: @fourCard; 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 { - flex-basis: @fiveCard; 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 { - flex-basis: @sixCard; 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 { - flex-basis: @sevenCard; 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 { - flex-basis: @eightCard; 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 { - flex-basis: @nineCard; 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 { - flex-basis: @tenCard; width: @tenCard; margin-left: @tenCardSpacing; margin-right: @tenCardSpacing; } -.ui.ten.cards > .card:nth-child(10n+1) { - clear: left; -} /*------------------- @@ -867,7 +833,6 @@ a.ui.card:hover, margin-right: @oneCardOffset; } .ui.two.doubling.cards .card { - flex-basis: @oneCard; width: @oneCard; margin-left: @oneCardSpacing; margin-right: @oneCardSpacing; @@ -877,7 +842,6 @@ a.ui.card:hover, margin-right: @twoCardOffset; } .ui.three.doubling.cards .card { - flex-basis: @twoCard; width: @twoCard; margin-left: @twoCardSpacing; margin-right: @twoCardSpacing; @@ -887,7 +851,6 @@ a.ui.card:hover, margin-right: @twoCardOffset; } .ui.four.doubling.cards .card { - flex-basis: @twoCard; width: @twoCard; margin-left: @twoCardSpacing; margin-right: @twoCardSpacing; @@ -897,7 +860,6 @@ a.ui.card:hover, margin-right: @twoCardOffset; } .ui.five.doubling.cards .card { - flex-basis: @twoCard; width: @twoCard; margin-left: @twoCardSpacing; margin-right: @twoCardSpacing; @@ -907,7 +869,6 @@ a.ui.card:hover, margin-right: @twoCardOffset; } .ui.six.doubling.cards .card { - flex-basis: @twoCard; width: @twoCard; margin-left: @twoCardSpacing; margin-right: @twoCardSpacing; @@ -917,7 +878,6 @@ a.ui.card:hover, margin-right: @threeCardOffset; } .ui.seven.doubling.cards .card { - flex-basis: @threeCard; width: @threeCard; margin-left: @threeCardSpacing; margin-right: @threeCardSpacing; @@ -927,7 +887,6 @@ a.ui.card:hover, margin-right: @threeCardOffset; } .ui.eight.doubling.cards .card { - flex-basis: @threeCard; width: @threeCard; margin-left: @threeCardSpacing; margin-right: @threeCardSpacing; @@ -937,7 +896,6 @@ a.ui.card:hover, margin-right: @threeCardOffset; } .ui.nine.doubling.cards .card { - flex-basis: @threeCard; width: @threeCard; margin-left: @threeCardSpacing; margin-right: @threeCardSpacing; @@ -947,7 +905,6 @@ a.ui.card:hover, margin-right: @threeCardOffset; } .ui.ten.doubling.cards .card { - flex-basis: @threeCard; width: @threeCard; margin-left: @threeCardSpacing; margin-right: @threeCardSpacing; @@ -961,7 +918,6 @@ a.ui.card:hover, margin-right: @oneCardOffset; } .ui.two.doubling.cards .card { - flex-basis: @oneCard; width: @oneCard; margin-left: @oneCardSpacing; margin-right: @oneCardSpacing; @@ -971,7 +927,6 @@ a.ui.card:hover, margin-right: @twoCardOffset; } .ui.three.doubling.cards .card { - flex-basis: @twoCard; width: @twoCard; margin-left: @twoCardSpacing; margin-right: @twoCardSpacing; @@ -981,7 +936,6 @@ a.ui.card:hover, margin-right: @twoCardOffset; } .ui.four.doubling.cards .card { - flex-basis: @twoCard; width: @twoCard; margin-left: @twoCardSpacing; margin-right: @twoCardSpacing; @@ -991,7 +945,6 @@ a.ui.card:hover, margin-right: @threeCardOffset; } .ui.five.doubling.cards .card { - flex-basis: @threeCard; width: @threeCard; margin-left: @threeCardSpacing; margin-right: @threeCardSpacing; @@ -1001,7 +954,6 @@ a.ui.card:hover, margin-right: @threeCardOffset; } .ui.six.doubling.cards .card { - flex-basis: @threeCard; width: @threeCard; margin-left: @threeCardSpacing; margin-right: @threeCardSpacing; @@ -1011,7 +963,6 @@ a.ui.card:hover, margin-right: @threeCardOffset; } .ui.eight.doubling.cards .card { - flex-basis: @threeCard; width: @threeCard; margin-left: @threeCardSpacing; margin-right: @threeCardSpacing; @@ -1021,7 +972,6 @@ a.ui.card:hover, margin-right: @fourCardOffset; } .ui.eight.doubling.cards .card { - flex-basis: @fourCard; width: @fourCard; margin-left: @fourCardSpacing; margin-right: @fourCardSpacing; @@ -1031,7 +981,6 @@ a.ui.card:hover, margin-right: @fourCardOffset; } .ui.nine.doubling.cards .card { - flex-basis: @fourCard; width: @fourCard; margin-left: @fourCardSpacing; margin-right: @fourCardSpacing; @@ -1041,7 +990,6 @@ a.ui.card:hover, margin-right: @fiveCardOffset; } .ui.ten.doubling.cards .card { - flex-basis: @fiveCard; width: @fiveCard; margin-left: @fiveCardSpacing; margin-right: @fiveCardSpacing; diff --git a/src/themes/default/views/card.variables b/src/themes/default/views/card.variables index c7f0b61bf..11ac50028 100644 --- a/src/themes/default/views/card.variables +++ b/src/themes/default/views/card.variables @@ -66,6 +66,8 @@ @contentBorderRadius: 0em; @contentBoxShadow: none; +@repeatedContentBorder: 1px solid @borderColor; + /* Header */ @headerMargin: 0em; @headerFontWeight: bold; @@ -137,8 +139,8 @@ @extraLinkHoverColor: @linkHoverColor; /* Buttons */ -@buttonMargin: 0em 0em -1px; -@buttonWidth: 100%; +@buttonMargin: 0px -@borderWidth; +@buttonWidth: ~"calc(100% + "(@borderWidth * 2)~")"; /*------------------- Variations