From a05a38892b8839e5822f37f4e974ad727e74eb0e Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 14 May 2015 18:24:49 -0400 Subject: [PATCH] Adjust ribbon label padding to be more spacious --- src/definitions/elements/label.less | 25 ++++++++++----------- src/definitions/elements/step.less | 1 + src/themes/default/elements/label.variables | 1 - src/themes/default/globals/site.variables | 21 ++++++++--------- 4 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index 8a14f26f9..01340b333 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -351,13 +351,24 @@ a.ui.label { width: 0em; height: 0em; } +/* Positioning */ +.ui.ribbon.label { + left: @ribbonOffset; + margin-right: -@ribbonTriangleSize; + padding-left: @ribbonDistance; + padding-right: @ribbonTriangleSize; +} +.ui[class*="right ribbon"].label { + left: @rightRibbonOffset; + padding-left: @ribbonTriangleSize; + padding-right: @ribbonDistance; +} /* Right Ribbon */ .ui[class*="right ribbon"].label { text-align: left; transform: translateX(-100%); border-radius: @borderRadius 0em 0em @borderRadius; - padding-left: @horizontalPadding; } .ui[class*="right ribbon"].label:after { left: auto; @@ -369,16 +380,6 @@ a.ui.label { border-top-color: inherit; } -/* Positioning */ -.ui.ribbon.label { - left: @ribbonOffset; - margin-right: -@ribbonTriangleSize; - padding-left: @ribbonDistance; -} -.ui[class*="right ribbon"].label { - left: @rightRibbonOffset; - padding-right: @ribbonDistance; -} /* Inside Image */ @@ -390,13 +391,11 @@ a.ui.label { .ui.card .image > .ui.ribbon.label, .ui.image > .ui.ribbon.label { left: @ribbonImageOffset; - padding-left: @ribbonImageDistance; } .ui.card .image > .ui[class*="right ribbon"].label, .ui.image > .ui[class*="right ribbon"].label { left: @rightRibbonImageOffset; padding-left: @horizontalPadding; - padding-right: @ribbonImageDistance; } diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less index 0da196db1..a7826a490 100755 --- a/src/definitions/elements/step.less +++ b/src/definitions/elements/step.less @@ -132,6 +132,7 @@ /* Icon */ .ui.steps .step > .icon { + line-height: 1; font-size: @iconSize; margin: 0em @iconDistance 0em 0em; } diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables index c05cfc534..136a84255 100644 --- a/src/themes/default/elements/label.variables +++ b/src/themes/default/elements/label.variables @@ -119,7 +119,6 @@ @ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */ @ribbonImageOffset: ~"calc("-@ribbonImageMargin~" - "@ribbonTriangleSize~")"; -@ribbonImageDistance: ~"calc("@ribbonImageMargin~" + "@ribbonTriangleSize~")"; @rightRibbonImageOffset: ~"calc(100% + "@ribbonImageMargin~" + "@ribbonTriangleSize~")"; /* Colors */ diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 35be89c1e..c6dd2920b 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -70,7 +70,7 @@ @darkGrey : #AAAAAA; @lightGrey : #DCDDDE; @offWhite : #FAFAFA; -@darkWhite : #F0F0F0; +@darkWhite : #F4F4F4; @white : #FFFFFF; /*------------------- @@ -293,31 +293,31 @@ /* Positive */ @positiveColor : @green; -@positiveBackgroundColor : #F3FFEC; -@positiveBorderColor : #B4D3A4; +@positiveBackgroundColor : #FCFFF5; +@positiveBorderColor : #A3C293; @positiveHeaderColor : #1A531B; -@positiveTextColor : #255F26; +@positiveTextColor : #1D571E; /* Negative */ @negativeColor : @red; -@negativeBackgroundColor : #FFF0F0; +@negativeBackgroundColor : #FFF6F6; @negativeBorderColor : #E0B4B4; @negativeHeaderColor : #912D2B; -@negativeTextColor : #973230; +@negativeTextColor : #922D2B; /* Info */ @infoColor : #31CCEC; -@infoBackgroundColor : #F1FCFC; +@infoBackgroundColor : #FAFEFE; @infoBorderColor : #A3CFD8; @infoHeaderColor : #0E566C; -@infoTextColor : #196178; +@infoTextColor : #0E566D; /* Warning */ @warningColor : #F2C037; @warningBorderColor : #C9BA9B; -@warningBackgroundColor : #FFF8E2; +@warningBackgroundColor : #FFFCED; @warningHeaderColor : #794B02; -@warningTextColor : #715422; +@warningTextColor : #664917; /*------------------- @@ -361,6 +361,7 @@ @circularRadius : 500rem; @borderColor : rgba(34, 36, 38, 0.15); +@strongBorderColor : rgba(34, 36, 38, 0.22); @internalBorderColor : rgba(34, 36, 38, 0.1); @selectedBorderColor : rgba(34, 36, 38, 0.3); @disabledBorderColor : rgba(34, 36, 38, 0.5);