From f5f8d0dbe12fe265384d7f469d7f6e5a4f126589 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 30 Mar 2015 18:30:31 -0400 Subject: [PATCH] Card styles adjusted to be remove solid border shadow --- src/definitions/views/card.less | 81 ++++++++++++++----------- src/themes/default/views/card.variables | 23 ++++--- 2 files changed, 60 insertions(+), 44 deletions(-) diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less index 4bfdc8a7d..a330d4502 100755 --- a/src/definitions/views/card.less +++ b/src/definitions/views/card.less @@ -435,6 +435,14 @@ Link --------------------*/ +.ui.cards a.card, +.ui.link.cards .card, +a.ui.card, +.ui.link.card { + transform: none; +} + + .ui.cards a.card:hover, .ui.link.cards .card:hover, a.ui.card:hover, @@ -444,6 +452,7 @@ a.ui.card:hover, background: @linkHoverBackground; border: @linkHoverBorder; box-shadow: @linkHoverBoxShadow; + transform: @linkHoverTransform; } /*------------------- @@ -454,72 +463,72 @@ a.ui.card:hover, .ui.cards > .black.card, .ui.black.card { box-shadow: - 0px @shadowDistance 0px 0px @black, - @borderShadow + 0px @coloredShadowDistance 0px 0px @black, + @shadowBoxShadow ; } .ui.blue.cards > .card, .ui.cards > .blue.card, .ui.blue.card { box-shadow: - 0px @shadowDistance 0px 0px @blue, - @borderShadow + 0px @coloredShadowDistance 0px 0px @blue, + @shadowBoxShadow ; } .ui.green.cards > .card, .ui.cards > .green.card, .ui.green.card { box-shadow: - 0px @shadowDistance 0px 0px @green, - @borderShadow + 0px @coloredShadowDistance 0px 0px @green, + @shadowBoxShadow ; } .ui.orange.cards > .card, .ui.cards > .orange.card, .ui.orange.card { box-shadow: - 0px @shadowDistance 0px 0px @orange, - @borderShadow + 0px @coloredShadowDistance 0px 0px @orange, + @shadowBoxShadow ; } .ui.pink.cards > .card, .ui.cards > .pink.card, .ui.pink.card { box-shadow: - 0px @shadowDistance 0px 0px @pink, - @borderShadow + 0px @coloredShadowDistance 0px 0px @pink, + @shadowBoxShadow ; } .ui.purple.cards > .card, .ui.cards > .purple.card, .ui.purple.card { box-shadow: - 0px @shadowDistance 0px 0px @purple, - @borderShadow + 0px @coloredShadowDistance 0px 0px @purple, + @shadowBoxShadow ; } .ui.red.cards > .card, .ui.cards > .red.card, .ui.red.card { box-shadow: - 0px @shadowDistance 0px 0px @red, - @borderShadow + 0px @coloredShadowDistance 0px 0px @red, + @shadowBoxShadow ; } .ui.teal.cards > .card, .ui.cards > .teal.card, .ui.teal.card { box-shadow: - 0px @shadowDistance 0px 0px @teal, - @borderShadow + 0px @coloredShadowDistance 0px 0px @teal, + @shadowBoxShadow ; } .ui.yellow.cards > .card, .ui.cards > .yellow.card, .ui.yellow.card { box-shadow: - 0px @shadowDistance 0px 0px @yellow, - @borderShadow + 0px @coloredShadowDistance 0px 0px @yellow, + @shadowBoxShadow ; } @@ -528,72 +537,72 @@ a.ui.card:hover, .ui.cards > .black.card:hover, .ui.black.card:hover { box-shadow: - 0px @shadowDistance 0px 0px @blackHover, - @borderShadow + 0px @coloredShadowDistance 0px 0px @blackHover, + @shadowHoverBoxShadow ; } .ui.blue.cards > .card:hover, .ui.cards > .blue.card:hover, .ui.blue.card:hover { box-shadow: - 0px @shadowDistance 0px 0px @blueHover, - @borderShadow + 0px @coloredShadowDistance 0px 0px @blueHover, + @shadowHoverBoxShadow ; } .ui.green.cards > .card:hover, .ui.cards > .green.card:hover, .ui.green.card:hover { box-shadow: - 0px @shadowDistance 0px 0px @greenHover, - @borderShadow + 0px @coloredShadowDistance 0px 0px @greenHover, + @shadowHoverBoxShadow ; } .ui.orange.cards > .card:hover, .ui.cards > .orange.card:hover, .ui.orange.card:hover { box-shadow: - 0px @shadowDistance 0px 0px @orangeHover, - @borderShadow + 0px @coloredShadowDistance 0px 0px @orangeHover, + @shadowHoverBoxShadow ; } .ui.pink.cards > .card:hover, .ui.cards > .pink.card:hover, .ui.pink.card:hover { box-shadow: - 0px @shadowDistance 0px 0px @pinkHover, - @borderShadow + 0px @coloredShadowDistance 0px 0px @pinkHover, + @shadowHoverBoxShadow ; } .ui.purple.cards > .card:hover, .ui.cards > .purple.card:hover, .ui.purple.card:hover { box-shadow: - 0px @shadowDistance 0px 0px @purpleHover, - @borderShadow + 0px @coloredShadowDistance 0px 0px @purpleHover, + @shadowHoverBoxShadow ; } .ui.red.cards > .card:hover, .ui.cards > .red.card:hover, .ui.red.card:hover { box-shadow: - 0px @shadowDistance 0px 0px @redHover, - @borderShadow + 0px @coloredShadowDistance 0px 0px @redHover, + @shadowHoverBoxShadow ; } .ui.teal.cards > .card:hover, .ui.cards > .teal.card:hover, .ui.teal.card:hover { box-shadow: - 0px @shadowDistance 0px 0px @tealHover, - @borderShadow + 0px @coloredShadowDistance 0px 0px @tealHover, + @shadowHoverBoxShadow ; } .ui.yellow.cards > .card:hover, .ui.cards > .yellow.card:hover, .ui.yellow.card:hover { box-shadow: - 0px @shadowDistance 0px 0px @yellowHover, - @borderShadow + 0px @coloredShadowDistance 0px 0px @yellowHover, + @shadowHoverBoxShadow ; } diff --git a/src/themes/default/views/card.variables b/src/themes/default/views/card.variables index f4df07e7b..12f4118c8 100644 --- a/src/themes/default/views/card.variables +++ b/src/themes/default/views/card.variables @@ -7,8 +7,8 @@ --------------------*/ /* Shadow */ -@shadowDistance: 3px; -@shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor; +@shadowDistance: 1px; +@shadowBoxShadow: 0px @shadowDistance 3px 0px @solidBorderColor; /* Card */ @display: flex; @@ -26,7 +26,10 @@ ; @border: none; @zIndex: ''; -@transition: box-shadow @transitionDuration @transitionEasing; +@transition: + box-shadow @transitionDuration @transitionEasing, + transform @transitionDuration @transitionEasing +; /* Card Group */ @horizontalSpacing: 1em; @@ -66,8 +69,7 @@ /* Header */ @headerMargin: 0em; @headerFontWeight: bold; -@headerFontSize: 1.2em; -@headerLineHeight: 1.33em; +@headerFontSize: @relativeBig; @headerLineHeightOffset: -(@lineHeight - 1em) / 2; @headerColor: @darkTextColor; @@ -146,11 +148,13 @@ @linkHoverBackground: ''; @linkHoverBorder: none; @linkHoverZIndex: 5; +@linkHoverRaiseDistance: 3px; +@linkHoverTransform: translateY(-@linkHoverRaiseDistance); -@shadowHoverBoxShadow: 0px @shadowDistance 0px 0px @solidSelectedBorderColor; +@shadowHoverBoxShadow: 0px @shadowDistance @linkHoverRaiseDistance 0px @solidSelectedBorderColor; @linkHoverBoxShadow: @shadowHoverBoxShadow, - 0px 0px 0px 1px @selectedBorderColor + 0px 0px 0px @borderWidth @borderColor ; /* Card Count */ @@ -196,4 +200,7 @@ @stackableMargin: ~"calc("@oneColumn~" - "(@stackableCardSpacing * 2)~")"; /* Sizes */ -@medium: 1em; \ No newline at end of file +@medium: 1em; + +/* Colored */ +@coloredShadowDistance: 2px;