From a38c40c567e874357017745e9c031decf509b71e Mon Sep 17 00:00:00 2001 From: lubber-de Date: Wed, 31 Oct 2018 23:46:57 +0100 Subject: [PATCH 1/8] feat(label): Inverted variant, short less macro, basic group support, bugfixes, !imported removed --- src/definitions/elements/label.less | 718 +++++--------------- src/themes/default/elements/label.variables | 26 + 2 files changed, 192 insertions(+), 552 deletions(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index ce13796375..cbedd35d00 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -224,7 +224,7 @@ a.ui.label { left: -(@tagCircleSize / 2); margin-top: -(@tagCircleSize / 2); - background-color: @tagCircleColor !important; + background-color: @tagCircleColor; width: @tagCircleSize; height: @tagCircleSize; @@ -266,7 +266,7 @@ a.ui.label { width: 0em; height: 0em; - background-color: transparent !important; + background-color: transparent; border-top: 0em solid transparent; border-right: @cornerTriangleSize solid transparent; @@ -332,7 +332,7 @@ a.ui.label { top: 100%; left: 0%; - background-color: transparent !important; + background-color: transparent; border-style: solid; border-width: 0em @ribbonTriangleSize @ribbonTriangleSize 0em; @@ -463,7 +463,7 @@ a.ui.label { Hover --------------------*/ -a.ui.labels .label:hover, +.ui.labels a.label:hover, a.ui.label:hover { background-color: @labelHoverBackgroundColor; border-color: @labelHoverBackgroundColor; @@ -497,7 +497,7 @@ a.ui.label:hover:before { Active Hover --------------------*/ -a.ui.labels .active.label:hover, +.ui.labels a.active.label:hover, a.ui.active.label:hover { background-color: @labelActiveHoverBackgroundColor; border-color: @labelActiveHoverBackgroundColor; @@ -537,555 +537,12 @@ a.ui.active.label:hover:before { *******************************/ -/*------------------- - Colors ---------------------*/ - -/*--- Primary ---*/ -.ui.primary.labels .label, -.ui.primary.label { - background-color: @primaryColor !important; - border-color: @primaryColor !important; - color: @primaryTextColor !important; -} -/* Link */ -.ui.primary.labels .label:hover, -a.ui.primary.label:hover{ - background-color: @primaryColorHover !important; - border-color: @primaryColorHover !important; - color: @primaryTextColor !important; -} -/* Corner */ -.ui.primary.corner.label, -.ui.primary.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.primary.ribbon.label { - border-color: @primaryRibbonShadow !important; -} -/* Basic */ -.ui.basic.primary.label { - background: @basicBackground !important; - color: @primaryColor !important; - border-color: @primaryColor !important; -} -.ui.basic.primary.labels a.label:hover, -a.ui.basic.primary.label:hover { - background-color: @white !important; - color: @primaryColorHover !important; - border-color: @primaryColorHover !important; -} - -/*--- Secondary ---*/ -.ui.secondary.labels .label, -.ui.secondary.label { - background-color: @secondaryColor !important; - border-color: @secondaryColor !important; - color: @secondaryTextColor !important; -} -/* Link */ -.ui.secondary.labels .label:hover, -a.ui.secondary.label:hover{ - background-color: @secondaryColorHover !important; - border-color: @secondaryColorHover !important; - color: @secondaryTextColor !important; -} -/* Corner */ -.ui.secondary.corner.label, -.ui.secondary.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.secondary.ribbon.label { - border-color: @secondaryRibbonShadow !important; -} -/* Basic */ -.ui.basic.secondary.label { - background: @basicBackground !important; - color: @secondaryColor !important; - border-color: @secondaryColor !important; -} -.ui.basic.secondary.labels a.label:hover, -a.ui.basic.secondary.label:hover { - background-color: @white !important; - color: @secondaryColorHover !important; - border-color: @secondaryColorHover !important; -} - -/*--- Red ---*/ -.ui.red.labels .label, -.ui.red.label { - background-color: @red !important; - border-color: @red !important; - color: @redTextColor !important; -} -/* Link */ -.ui.red.labels .label:hover, -a.ui.red.label:hover{ - background-color: @redHover !important; - border-color: @redHover !important; - color: @redHoverTextColor !important; -} -/* Corner */ -.ui.red.corner.label, -.ui.red.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.red.ribbon.label { - border-color: @redRibbonShadow !important; -} -/* Basic */ -.ui.basic.red.label { - background: @basicBackground !important; - color: @red !important; - border-color: @red !important; -} -.ui.basic.red.labels a.label:hover, -a.ui.basic.red.label:hover { - background-color: @white !important; - color: @redHover !important; - border-color: @redHover !important; -} - -/*--- Orange ---*/ -.ui.orange.labels .label, -.ui.orange.label { - background-color: @orange !important; - border-color: @orange !important; - color: @orangeTextColor !important; -} -/* Link */ -.ui.orange.labels .label:hover, -a.ui.orange.label:hover{ - background-color: @orangeHover !important; - border-color: @orangeHover !important; - color: @orangeHoverTextColor !important; -} -/* Corner */ -.ui.orange.corner.label, -.ui.orange.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.orange.ribbon.label { - border-color: @orangeRibbonShadow !important; -} -/* Basic */ -.ui.basic.orange.label { - background: @basicBackground !important; - color: @orange !important; - border-color: @orange !important; -} -.ui.basic.orange.labels a.label:hover, -a.ui.basic.orange.label:hover { - background-color: @white !important; - color: @orangeHover !important; - border-color: @orangeHover !important; -} - -/*--- Yellow ---*/ -.ui.yellow.labels .label, -.ui.yellow.label { - background-color: @yellow !important; - border-color: @yellow !important; - color: @yellowTextColor !important; -} -/* Link */ -.ui.yellow.labels .label:hover, -a.ui.yellow.label:hover{ - background-color: @yellowHover !important; - border-color: @yellowHover !important; - color: @yellowHoverTextColor !important; -} -/* Corner */ -.ui.yellow.corner.label, -.ui.yellow.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.yellow.ribbon.label { - border-color: @yellowRibbonShadow !important; -} -/* Basic */ -.ui.basic.yellow.label { - background: @basicBackground !important; - color: @yellow !important; - border-color: @yellow !important; -} -.ui.basic.yellow.labels a.label:hover, -a.ui.basic.yellow.label:hover { - background-color: @white !important; - color: @yellowHover !important; - border-color: @yellowHover !important; -} - -/*--- Olive ---*/ -.ui.olive.labels .label, -.ui.olive.label { - background-color: @olive !important; - border-color: @olive !important; - color: @oliveTextColor !important; -} -/* Link */ -.ui.olive.labels .label:hover, -a.ui.olive.label:hover{ - background-color: @oliveHover !important; - border-color: @oliveHover !important; - color: @oliveHoverTextColor !important; -} -/* Corner */ -.ui.olive.corner.label, -.ui.olive.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.olive.ribbon.label { - border-color: @oliveRibbonShadow !important; -} -/* Basic */ -.ui.basic.olive.label { - background: @basicBackground !important; - color: @olive !important; - border-color: @olive !important; -} -.ui.basic.olive.labels a.label:hover, -a.ui.basic.olive.label:hover { - background-color: @white !important; - color: @oliveHover !important; - border-color: @oliveHover !important; -} - -/*--- Green ---*/ -.ui.green.labels .label, -.ui.green.label { - background-color: @green !important; - border-color: @green !important; - color: @greenTextColor !important; -} -/* Link */ -.ui.green.labels .label:hover, -a.ui.green.label:hover{ - background-color: @greenHover !important; - border-color: @greenHover !important; - color: @greenHoverTextColor !important; -} -/* Corner */ -.ui.green.corner.label, -.ui.green.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.green.ribbon.label { - border-color: @greenRibbonShadow !important; -} -/* Basic */ -.ui.basic.green.label { - background: @basicBackground !important; - color: @green !important; - border-color: @green !important; -} -.ui.basic.green.labels a.label:hover, -a.ui.basic.green.label:hover { - background-color: @white !important; - color: @greenHover !important; - border-color: @greenHover !important; -} - -/*--- Teal ---*/ -.ui.teal.labels .label, -.ui.teal.label { - background-color: @teal !important; - border-color: @teal !important; - color: @tealTextColor !important; -} -/* Link */ -.ui.teal.labels .label:hover, -a.ui.teal.label:hover{ - background-color: @tealHover !important; - border-color: @tealHover !important; - color: @tealHoverTextColor !important; -} -/* Corner */ -.ui.teal.corner.label, -.ui.teal.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.teal.ribbon.label { - border-color: @tealRibbonShadow !important; -} -/* Basic */ -.ui.basic.teal.label { - background: @basicBackground !important; - color: @teal !important; - border-color: @teal !important; -} -.ui.basic.teal.labels a.label:hover, -a.ui.basic.teal.label:hover { - background-color: @white !important; - color: @tealHover !important; - border-color: @tealHover !important; -} - -/*--- Blue ---*/ -.ui.blue.labels .label, -.ui.blue.label { - background-color: @blue !important; - border-color: @blue !important; - color: @blueTextColor !important; -} -/* Link */ -.ui.blue.labels .label:hover, -a.ui.blue.label:hover{ - background-color: @blueHover !important; - border-color: @blueHover !important; - color: @blueHoverTextColor !important; -} -/* Corner */ -.ui.blue.corner.label, -.ui.blue.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.blue.ribbon.label { - border-color: @blueRibbonShadow !important; -} -/* Basic */ -.ui.basic.blue.label { - background: @basicBackground !important; - color: @blue !important; - border-color: @blue !important; -} -.ui.basic.blue.labels a.label:hover, -a.ui.basic.blue.label:hover { - background-color: @white !important; - color: @blueHover !important; - border-color: @blueHover !important; -} - -/*--- Violet ---*/ -.ui.violet.labels .label, -.ui.violet.label { - background-color: @violet !important; - border-color: @violet !important; - color: @violetTextColor !important; -} -/* Link */ -.ui.violet.labels .label:hover, -a.ui.violet.label:hover{ - background-color: @violetHover !important; - border-color: @violetHover !important; - color: @violetHoverTextColor !important; -} -/* Corner */ -.ui.violet.corner.label, -.ui.violet.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.violet.ribbon.label { - border-color: @violetRibbonShadow !important; -} -/* Basic */ -.ui.basic.violet.label { - background: @basicBackground !important; - color: @violet !important; - border-color: @violet !important; -} -.ui.basic.violet.labels a.label:hover, -a.ui.basic.violet.label:hover { - background-color: @white !important; - color: @violetHover !important; - border-color: @violetHover !important; -} - -/*--- Purple ---*/ -.ui.purple.labels .label, -.ui.purple.label { - background-color: @purple !important; - border-color: @purple !important; - color: @purpleTextColor !important; -} -/* Link */ -.ui.purple.labels .label:hover, -a.ui.purple.label:hover{ - background-color: @purpleHover !important; - border-color: @purpleHover !important; - color: @purpleHoverTextColor !important; -} -/* Corner */ -.ui.purple.corner.label, -.ui.purple.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.purple.ribbon.label { - border-color: @purpleRibbonShadow !important; -} -/* Basic */ -.ui.basic.purple.label { - background: @basicBackground !important; - color: @purple !important; - border-color: @purple !important; -} -.ui.basic.purple.labels a.label:hover, -a.ui.basic.purple.label:hover { - background-color: @white !important; - color: @purpleHover !important; - border-color: @purpleHover !important; -} - -/*--- Pink ---*/ -.ui.pink.labels .label, -.ui.pink.label { - background-color: @pink !important; - border-color: @pink !important; - color: @pinkTextColor !important; -} -/* Link */ -.ui.pink.labels .label:hover, -a.ui.pink.label:hover{ - background-color: @pinkHover !important; - border-color: @pinkHover !important; - color: @pinkHoverTextColor !important; -} -/* Corner */ -.ui.pink.corner.label, -.ui.pink.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.pink.ribbon.label { - border-color: @pinkRibbonShadow !important; -} -/* Basic */ -.ui.basic.pink.label { - background: @basicBackground !important; - color: @pink !important; - border-color: @pink !important; -} -.ui.basic.pink.labels a.label:hover, -a.ui.basic.pink.label:hover { - background-color: @white !important; - color: @pinkHover !important; - border-color: @pinkHover !important; -} - -/*--- Brown ---*/ -.ui.brown.labels .label, -.ui.brown.label { - background-color: @brown !important; - border-color: @brown !important; - color: @brownTextColor !important; -} -/* Link */ -.ui.brown.labels .label:hover, -a.ui.brown.label:hover{ - background-color: @brownHover !important; - border-color: @brownHover !important; - color: @brownHoverTextColor !important; -} -/* Corner */ -.ui.brown.corner.label, -.ui.brown.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.brown.ribbon.label { - border-color: @brownRibbonShadow !important; -} -/* Basic */ -.ui.basic.brown.label { - background: @basicBackground !important; - color: @brown !important; - border-color: @brown !important; -} -.ui.basic.brown.labels a.label:hover, -a.ui.basic.brown.label:hover { - background-color: @white !important; - color: @brownHover !important; - border-color: @brownHover !important; -} - -/*--- Grey ---*/ -.ui.grey.labels .label, -.ui.grey.label { - background-color: @grey !important; - border-color: @grey !important; - color: @greyTextColor !important; -} -/* Link */ -.ui.grey.labels .label:hover, -a.ui.grey.label:hover{ - background-color: @greyHover !important; - border-color: @greyHover !important; - color: @greyHoverTextColor !important; -} -/* Corner */ -.ui.grey.corner.label, -.ui.grey.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.grey.ribbon.label { - border-color: @greyRibbonShadow !important; -} -/* Basic */ -.ui.basic.grey.label { - background: @basicBackground !important; - color: @grey !important; - border-color: @grey !important; -} -.ui.basic.grey.labels a.label:hover, -a.ui.basic.grey.label:hover { - background-color: @white !important; - color: @greyHover !important; - border-color: @greyHover !important; -} - -/*--- Black ---*/ -.ui.black.labels .label, -.ui.black.label { - background-color: @black !important; - border-color: @black !important; - color: @blackTextColor !important; -} -/* Link */ -.ui.black.labels .label:hover, -a.ui.black.label:hover{ - background-color: @blackHover !important; - border-color: @blackHover !important; - color: @blackHoverTextColor !important; -} -/* Corner */ -.ui.black.corner.label, -.ui.black.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.black.ribbon.label { - border-color: @blackRibbonShadow !important; -} -/* Basic */ -.ui.basic.black.label { - background: @basicBackground !important; - color: @black !important; - border-color: @black !important; -} -.ui.basic.black.labels a.label:hover, -a.ui.basic.black.label:hover { - background-color: @white !important; - color: @blackHover !important; - border-color: @blackHover !important; -} - /*------------------- Basic --------------------*/ +.ui.basic.labels .label, .ui.basic.label { background: @basicBackground; border: @basicBorder; @@ -1094,11 +551,11 @@ a.ui.basic.black.label:hover { } /* Link */ +.ui.basic.labels a.label:hover, a.ui.basic.label:hover { text-decoration: none; background: @basicHoverBackground; color: @basicHoverColor; - box-shadow: @basicHoverBorder; box-shadow: @basicHoverBoxShadow; } @@ -1124,8 +581,165 @@ a.ui.basic.label:hover { .ui.inverted.labels .label, .ui.inverted.label { - color: @invertedTextColor !important; + color: @invertedTextColor; + background-color: @invertedBackgroundColor; +} +.ui.inverted.corner.label { + border-color: @invertedBackgroundColor; +} +.ui.inverted.corner.label:hover { + border-color: @backgroundColor; + transition: none; +} +.ui.inverted.basic.labels .label, +.ui.inverted.basic.label, +.ui.inverted.basic.label:hover { + border-color: @basicInvertedBorderColor; + background: @black; } +.ui.inverted.basic.label:hover { + color: @linkColor; +} + + +/*------------------- + Colors +--------------------*/ + + +.labelColor(@colorRaw; @lightColor; @darkInvertedHoverTextColor:false; @blackOrGrey:false;) { + @color: replace(@colorRaw,'Color',''); + @_labelColor: "@{colorRaw}"; + @_labelInvertedColor: "@{lightColor}"; + @_labelTextColor : "@{color}TextColor"; + @_labelHover : "@{colorRaw}Hover"; + @_labelHoverTextColor : "@{color}HoverTextColor"; + @_labelRibbonShadow : "@{color}RibbonShadow"; + @_labelInvertedRibbonShadow : "@{color}InvertedRibbonShadow"; + + .ui.@{color}.labels .label, + .ui.@{color}.label { + background-color: @@_labelColor; + border-color: @@_labelColor; + color: @@_labelTextColor; + } + /* Link */ + .ui.@{color}.labels a.label:hover, + a.ui.@{color}.label:hover{ + background-color: @@_labelHover; + border-color: @@_labelHover; + color: @@_labelHoverTextColor; + } + /* Ribbon */ + .ui.@{color}.ribbon.label { + border-color: @@_labelRibbonShadow; + } + /* Basic */ + .ui.basic.labels:not(.inverted) .@{color}.label, + .ui.basic.@{color}.label:not(.inverted) { + background-color: @basicBackground; + border-color: @@_labelColor; + color: @@_labelColor; + } + .ui.basic.labels a.@{color}.label:hover, + a.ui.basic.@{color}.label:hover { + background-color: @white; + border-color: @@_labelHover; + color: @@_labelHover; + } + /* Inverted */ + .ui.inverted.labels:not(.ribbon):not(.corner):not(.basic) .@{color}.label, + .ui.inverted.@{color}.label:not(.ribbon):not(.corner):not(.basic) { + background-color: transparent; + & when not (@blackOrGrey) { + color: @@_labelInvertedColor; + } + } + .ui.inverted.labels:not(.ribbon):not(.corner):not(.basic):not(.tag) .@{color}.label, + .ui.inverted.@{color}.label:not(.ribbon):not(.corner):not(.basic):not(.tag) { + box-shadow: 0 0 0 @invertedBoxShadowSize @@_labelInvertedColor inset; + } + /* Inverted Link */ + .ui.inverted.labels:not(.ribbon):not(.corner):not(.basic) a.@{color}.label:hover, + a.ui.inverted.@{color}.label:not(.ribbon):not(.corner):not(.basic):hover{ + background-color: @@_labelInvertedColor; + border-color: @@_labelInvertedColor; + & when not (@darkInvertedHoverTextColor) { + color: @@_labelHoverTextColor; + } + & when (@darkInvertedHoverTextColor) { + color: darken(@@_labelColor,20); + } + } + /* Inverted Ribbon */ + .ui.inverted.@{color}.ribbon.label { + background-color: @@_labelInvertedColor; + border-color: @@_labelInvertedRibbonShadow; + color: @invertedBackground; + } + /* Inverted Corner */ + .ui.inverted.@{color}.corner.label { + border-color: @@_labelInvertedColor; + color: @invertedBackground; + } + .ui.inverted.@{color}.corner.label:hover, + .ui.inverted.@{color}.ribbon.label:hover { + border-color: @@_labelInvertedColor; + color: @@_labelHoverTextColor; + } + /* Inverted Basic */ + .ui.inverted.basic.labels .@{color}.label, + .ui.inverted.basic.@{color}.label, + .ui.inverted.basic.pointing.@{color}.label { + background-color: @invertedBackground; + box-shadow: none; + } + .ui.inverted.basic.pointing.@{color}.label { + border-color: @@_labelInvertedColor; + } + .ui.inverted.basic.pointing.@{color}.label { + color: @@_labelInvertedColor; + } + .ui.inverted.basic.labels a.@{color}.label:hover, + a.ui.inverted.basic.@{color}.label:hover, + a.ui.inverted.basic.pointing.@{color}.label:hover { + background-color: @invertedBackground; + border-color: @@_labelInvertedColor; + color: @@_labelInvertedColor; + } + /* Inverted Tags */ + .ui.inverted.tag.labels .@{color}.label, + .ui.inverted.@{color}.tag.label { + border: @invertedBorderSize solid @@_labelInvertedColor; + } + .ui.inverted.tag.labels .@{color}.label:before, + .ui.inverted.@{color}.tag.label:before { + border-color: inherit; + border-width: @invertedBorderSize 0 0 @invertedBorderSize; + border-style: inherit; + background-color: @invertedBackground; + right: calc(100% + @invertedBorderSize); + } + .ui.inverted.tag.labels .@{color}.label:hover:before, + .ui.inverted.@{color}.tag.label:hover:before { + background-color: @@_labelInvertedColor; + } +} +.labelColor(~'primaryColor',~'lightPrimaryColor'); +.labelColor(~'secondaryColor',~'lightSecondaryColor'); +.labelColor(~'red',~'lightRed'); +.labelColor(~'orange',~'lightOrange'); +.labelColor(~'yellow',~'lightYellow',true); +.labelColor(~'olive',~'lightOlive',true); +.labelColor(~'green',~'lightGreen'); +.labelColor(~'teal',~'lightTeal',true); +.labelColor(~'blue',~'lightBlue'); +.labelColor(~'violet',~'lightViolet'); +.labelColor(~'purple',~'lightPurple'); +.labelColor(~'pink',~'lightPink'); +.labelColor(~'brown',~'lightBrown'); +.labelColor(~'grey',~'lightGrey',true); +.labelColor(~'black',~'lightBlack',false,true); /*------------------- Horizontal @@ -1181,7 +795,7 @@ a.ui.basic.label:hover { .ui.pointing.label:before { background-color: inherit; background-image: inherit; - border-width: none; + border-width: 0; border-style: solid; border-color: @pointingBorderColor; } diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables index 673733b783..979bdc61d4 100644 --- a/src/themes/default/elements/label.variables +++ b/src/themes/default/elements/label.variables @@ -143,6 +143,13 @@ @ribbonTableOffset: e(%("calc(%d - %d)", -@ribbonTableMargin, @ribbonTriangleSize)); @rightRibbonTableOffset: e(%("calc(100%% + %d + %d)", @ribbonTableMargin, @ribbonTriangleSize)); +/* Inverted */ +@invertedBackgroundColor: darken(@backgroundColor,20); +@invertedBackground: @black; +@invertedBoxShadowSize: 2px; +@invertedBorderSize: 1px; + +@basicInvertedBorderColor: rgba(255, 255, 255, 0.5); /* Colors */ @redTextColor: @white; @@ -173,6 +180,9 @@ @greyHoverTextColor: @white; @blackHoverTextColor: @white; +@primaryHoverTextColor: @white; +@secondaryHoverTextColor: @white; + @primaryRibbonShadow: darken(@primaryColor, 10); @secondaryRibbonShadow: darken(@secondaryColor, 10); @redRibbonShadow: darken(@red, 10); @@ -189,6 +199,22 @@ @greyRibbonShadow: darken(@grey, 10); @blackRibbonShadow: darken(@black, 10); +@primaryInvertedRibbonShadow: darken(@lightPrimaryColor, 10); +@secondaryInvertedRibbonShadow: darken(@lightSecondaryColor, 10); +@redInvertedRibbonShadow: darken(@lightRed, 10); +@orangeInvertedRibbonShadow: darken(@lightOrange, 10); +@yellowInvertedRibbonShadow: darken(@lightYellow, 10); +@oliveInvertedRibbonShadow: darken(@lightOlive, 10); +@greenInvertedRibbonShadow: darken(@lightGreen, 10); +@tealInvertedRibbonShadow: darken(@lightTeal, 10); +@blueInvertedRibbonShadow: darken(@lightBlue, 10); +@violetInvertedRibbonShadow: darken(@lightViolet, 10); +@purpleInvertedRibbonShadow: darken(@lightPurple, 10); +@pinkInvertedRibbonShadow: darken(@lightPink, 10); +@brownInvertedRibbonShadow: darken(@lightBrown, 10); +@greyInvertedRibbonShadow: lighten(@lightGrey, 5); +@blackInvertedRibbonShadow: lighten(@lightBlack, 5); + @primaryTextColor: @invertedTextColor; @secondaryTextColor: @invertedTextColor; From 6c0c313b8794b4c236832e70d6bb0cd829152629 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 1 Nov 2018 00:37:29 +0100 Subject: [PATCH 2/8] feat(label): Support 'basic tag' --- src/definitions/elements/label.less | 12 +++++++++++- src/themes/default/elements/label.variables | 1 + 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index cbedd35d00..0d61721406 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -231,7 +231,17 @@ a.ui.label { box-shadow: @tagCircleBoxShadow; border-radius: @circularRadius; } - +.ui.basic.tag.labels .label:before, +.ui.basic.tag.label:before { + border-color: inherit; + border-width: @basicBorderWidth 0 0 @basicBorderWidth; + border-style: inherit; + right: calc(100% + @basicBorderWidth); +} +.ui.basic.tag.labels .label:after, +.ui.basic.tag.label:after { + box-shadow: @basicTagCircleBoxShadow; +} /*------------------- Corner Label diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables index 979bdc61d4..88b2069da5 100644 --- a/src/themes/default/elements/label.variables +++ b/src/themes/default/elements/label.variables @@ -119,6 +119,7 @@ @tagCircleSize: 0.5em; @tagHorizontalPadding: 1.5em; @tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); +@basicTagCircleBoxShadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8); @tagTriangleRightOffset: 100%; @tagTriangleTopOffset: 50%; @tagTriangleSize: 1.56em; From 19ae4dc6d261029638022d19a7cfac8756e25bf9 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Fri, 2 Nov 2018 14:44:39 +0100 Subject: [PATCH 3/8] fix(menu): Only set uncolored menu item labels to avoid !important usage --- src/definitions/collections/menu.less | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 3cf91d1046..cbeabe1828 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -313,14 +313,10 @@ ---------------*/ .ui.menu .item > .label { - background: @labelBackground; - color: @labelTextColor; margin-left: @labelTextMargin; padding: @labelVerticalPadding @labelHorizontalPadding; } .ui.vertical.menu .item > .label { - background: @labelBackground; - color: @labelTextColor; margin-top: @labelOffset; margin-bottom: @labelOffset; padding: @labelVerticalPadding @labelHorizontalPadding; @@ -328,7 +324,10 @@ .ui.menu .item > .floating.label { padding: @labelVerticalPadding @labelHorizontalPadding; } - +.ui.menu .item > .label:not(.primary):not(.secondary):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black) { + background: @labelBackground; + color: @labelTextColor; +} /*-------------- Images ---------------*/ From 46216e8e12f4a8c8bebdafe5f199b267b7f1e233 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Sat, 3 Nov 2018 12:16:07 +0100 Subject: [PATCH 4/8] fix(labe): Make sure LESS renders calc() correctly --- src/definitions/elements/label.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index 0d61721406..f06e421315 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -236,7 +236,7 @@ a.ui.label { border-color: inherit; border-width: @basicBorderWidth 0 0 @basicBorderWidth; border-style: inherit; - right: calc(100% + @basicBorderWidth); + right: e(%("calc(100%% + %d)", @basicBorderWidth)); } .ui.basic.tag.labels .label:after, .ui.basic.tag.label:after { @@ -728,7 +728,7 @@ a.ui.basic.label:hover { border-width: @invertedBorderSize 0 0 @invertedBorderSize; border-style: inherit; background-color: @invertedBackground; - right: calc(100% + @invertedBorderSize); + right: e(%("calc(100%% + %d)", @invertedBorderSize)); } .ui.inverted.tag.labels .@{color}.label:hover:before, .ui.inverted.@{color}.tag.label:hover:before { From 733d2ad5df9228165296d397be3a1a8ef9439f09 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Sat, 3 Nov 2018 16:38:02 +0100 Subject: [PATCH 5/8] fix(labe): Use background instead of background-color for basicBackground --- src/definitions/elements/label.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index f06e421315..01517c814f 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -647,13 +647,13 @@ a.ui.basic.label:hover { /* Basic */ .ui.basic.labels:not(.inverted) .@{color}.label, .ui.basic.@{color}.label:not(.inverted) { - background-color: @basicBackground; + background: @basicBackground; border-color: @@_labelColor; color: @@_labelColor; } .ui.basic.labels a.@{color}.label:hover, a.ui.basic.@{color}.label:hover { - background-color: @white; + background: @basicBackground; border-color: @@_labelHover; color: @@_labelHover; } From 48df6453f338b003f69d06721a4ee893be08af0c Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 15 Nov 2018 00:42:30 +0100 Subject: [PATCH 6/8] feat(label): simplify appearance. make normal inverted tags solid, only basic ones having borders --- src/definitions/elements/label.less | 87 ++++++++------------- src/themes/default/elements/label.variables | 2 +- 2 files changed, 35 insertions(+), 54 deletions(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index 01517c814f..1c2b9ed770 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -623,6 +623,7 @@ a.ui.basic.label:hover { @_labelInvertedColor: "@{lightColor}"; @_labelTextColor : "@{color}TextColor"; @_labelHover : "@{colorRaw}Hover"; + @_labelInvertedHover: "@{lightColor}Hover"; @_labelHoverTextColor : "@{color}HoverTextColor"; @_labelRibbonShadow : "@{color}RibbonShadow"; @_labelInvertedRibbonShadow : "@{color}InvertedRibbonShadow"; @@ -645,8 +646,8 @@ a.ui.basic.label:hover { border-color: @@_labelRibbonShadow; } /* Basic */ - .ui.basic.labels:not(.inverted) .@{color}.label, - .ui.basic.@{color}.label:not(.inverted) { + .ui.basic.labels .@{color}.label, + .ui.basic.@{color}.label { background: @basicBackground; border-color: @@_labelColor; color: @@_labelColor; @@ -658,82 +659,62 @@ a.ui.basic.label:hover { color: @@_labelHover; } /* Inverted */ - .ui.inverted.labels:not(.ribbon):not(.corner):not(.basic) .@{color}.label, - .ui.inverted.@{color}.label:not(.ribbon):not(.corner):not(.basic) { - background-color: transparent; - & when not (@blackOrGrey) { - color: @@_labelInvertedColor; - } - } - .ui.inverted.labels:not(.ribbon):not(.corner):not(.basic):not(.tag) .@{color}.label, - .ui.inverted.@{color}.label:not(.ribbon):not(.corner):not(.basic):not(.tag) { - box-shadow: 0 0 0 @invertedBoxShadowSize @@_labelInvertedColor inset; - } - /* Inverted Link */ - .ui.inverted.labels:not(.ribbon):not(.corner):not(.basic) a.@{color}.label:hover, - a.ui.inverted.@{color}.label:not(.ribbon):not(.corner):not(.basic):hover{ + .ui.inverted.labels .@{color}.label, + .ui.inverted.@{color}.label { background-color: @@_labelInvertedColor; border-color: @@_labelInvertedColor; - & when not (@darkInvertedHoverTextColor) { - color: @@_labelHoverTextColor; + color: @black; + } + /* Inverted Link */ + .ui.inverted.labels a.@{color}.label:hover, + a.ui.inverted.@{color}.label:hover{ + background-color: @@_labelInvertedHover; + border-color: @@_labelInvertedHover; + & when not (@blackOrGrey) { + color: @black; } - & when (@darkInvertedHoverTextColor) { - color: darken(@@_labelColor,20); + & when(@blackOrGrey) { + color: @@_labelTextColor; } } /* Inverted Ribbon */ .ui.inverted.@{color}.ribbon.label { - background-color: @@_labelInvertedColor; border-color: @@_labelInvertedRibbonShadow; - color: @invertedBackground; - } - /* Inverted Corner */ - .ui.inverted.@{color}.corner.label { - border-color: @@_labelInvertedColor; - color: @invertedBackground; - } - .ui.inverted.@{color}.corner.label:hover, - .ui.inverted.@{color}.ribbon.label:hover { - border-color: @@_labelInvertedColor; - color: @@_labelHoverTextColor; } /* Inverted Basic */ .ui.inverted.basic.labels .@{color}.label, - .ui.inverted.basic.@{color}.label, - .ui.inverted.basic.pointing.@{color}.label { + .ui.inverted.basic.@{color}.label { background-color: @invertedBackground; - box-shadow: none; - } - .ui.inverted.basic.pointing.@{color}.label { border-color: @@_labelInvertedColor; - } - .ui.inverted.basic.pointing.@{color}.label { - color: @@_labelInvertedColor; + & when not (@blackOrGrey) { + color: @@_labelInvertedColor; + } + & when (@blackOrGrey) { + color: @invertedTextColor; + } } .ui.inverted.basic.labels a.@{color}.label:hover, - a.ui.inverted.basic.@{color}.label:hover, - a.ui.inverted.basic.pointing.@{color}.label:hover { + a.ui.inverted.basic.@{color}.label:hover { + border-color: @@_labelInvertedHover; background-color: @invertedBackground; - border-color: @@_labelInvertedColor; - color: @@_labelInvertedColor; + & when not (@blackOrGrey) { + color: @@_labelInvertedHover; + } } - /* Inverted Tags */ - .ui.inverted.tag.labels .@{color}.label, - .ui.inverted.@{color}.tag.label { + /* Inverted Basic Tags */ + .ui.inverted.basic.tag.labels .@{color}.label, + .ui.inverted.@{color}.basic.tag.label { border: @invertedBorderSize solid @@_labelInvertedColor; } - .ui.inverted.tag.labels .@{color}.label:before, - .ui.inverted.@{color}.tag.label:before { + .ui.inverted.basic.tag.labels .@{color}.label:before, + .ui.inverted.@{color}.basic.tag.label:before { border-color: inherit; border-width: @invertedBorderSize 0 0 @invertedBorderSize; border-style: inherit; background-color: @invertedBackground; right: e(%("calc(100%% + %d)", @invertedBorderSize)); } - .ui.inverted.tag.labels .@{color}.label:hover:before, - .ui.inverted.@{color}.tag.label:hover:before { - background-color: @@_labelInvertedColor; - } + } .labelColor(~'primaryColor',~'lightPrimaryColor'); .labelColor(~'secondaryColor',~'lightSecondaryColor'); diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables index 88b2069da5..0fbafa8268 100644 --- a/src/themes/default/elements/label.variables +++ b/src/themes/default/elements/label.variables @@ -260,7 +260,7 @@ @pointingTriangleSize: 0.6666em; @pointingHorizontalDistance: @pointingTriangleSize; -@pointingTriangleTransition: background @labelTransitionDuration @labelTransitionEasing; +@pointingTriangleTransition: none; /* Avoids error with background: inherit; on animation */ @pointingTriangleZIndex: 2; /* Basic Pointing */ From 40622d90f09def43763191df78e312e0e8f07846 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 15 Nov 2018 08:18:46 +0100 Subject: [PATCH 7/8] fix(label): Remove now unsued macro parameter --- src/definitions/elements/label.less | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index 1c2b9ed770..7b9894a8d9 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -617,7 +617,7 @@ a.ui.basic.label:hover { --------------------*/ -.labelColor(@colorRaw; @lightColor; @darkInvertedHoverTextColor:false; @blackOrGrey:false;) { +.labelColor(@colorRaw; @lightColor; @blackOrGrey:false;) { @color: replace(@colorRaw,'Color',''); @_labelColor: "@{colorRaw}"; @_labelInvertedColor: "@{lightColor}"; @@ -673,7 +673,7 @@ a.ui.basic.label:hover { & when not (@blackOrGrey) { color: @black; } - & when(@blackOrGrey) { + & when (@blackOrGrey) { color: @@_labelTextColor; } } @@ -720,17 +720,17 @@ a.ui.basic.label:hover { .labelColor(~'secondaryColor',~'lightSecondaryColor'); .labelColor(~'red',~'lightRed'); .labelColor(~'orange',~'lightOrange'); -.labelColor(~'yellow',~'lightYellow',true); -.labelColor(~'olive',~'lightOlive',true); +.labelColor(~'yellow',~'lightYellow'); +.labelColor(~'olive',~'lightOlive'); .labelColor(~'green',~'lightGreen'); -.labelColor(~'teal',~'lightTeal',true); +.labelColor(~'teal',~'lightTeal'); .labelColor(~'blue',~'lightBlue'); .labelColor(~'violet',~'lightViolet'); .labelColor(~'purple',~'lightPurple'); .labelColor(~'pink',~'lightPink'); .labelColor(~'brown',~'lightBrown'); -.labelColor(~'grey',~'lightGrey',true); -.labelColor(~'black',~'lightBlack',false,true); +.labelColor(~'grey',~'lightGrey'); +.labelColor(~'black',~'lightBlack',true); /*------------------- Horizontal From e7f96cde9f73bb29dd91b79ad9da5b4a510ebc95 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Tue, 27 Nov 2018 09:52:53 +0100 Subject: [PATCH 8/8] feat(label,header): Slightly increase of lightHover Colors for better inverted hover recognition --- src/themes/default/globals/site.variables | 30 +++++++++++------------ 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index cbc776b387..b86e6d5489 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -741,8 +741,8 @@ /*--- Colors ---*/ @primaryColorHover : saturate(darken(@primaryColor, 5), 10, relative); @secondaryColorHover : saturate(lighten(@secondaryColor, 5), 10, relative); -@lightPrimaryColorHover : saturate(darken(@lightPrimaryColor, 5), 10, relative); -@lightSecondaryColorHover : saturate(lighten(@lightSecondaryColor, 5), 10, relative); +@lightPrimaryColorHover : saturate(darken(@lightPrimaryColor, 10), 10, relative); +@lightSecondaryColorHover : saturate(lighten(@lightSecondaryColor, 10), 10, relative); @redHover : saturate(darken(@red, 5), 10, relative); @orangeHover : saturate(darken(@orange, 5), 10, relative); @@ -756,19 +756,19 @@ @pinkHover : saturate(darken(@pink, 5), 10, relative); @brownHover : saturate(darken(@brown, 5), 10, relative); -@lightRedHover : saturate(darken(@lightRed, 5), 10, relative); -@lightOrangeHover : saturate(darken(@lightOrange, 5), 10, relative); -@lightYellowHover : saturate(darken(@lightYellow, 5), 10, relative); -@lightOliveHover : saturate(darken(@lightOlive, 5), 10, relative); -@lightGreenHover : saturate(darken(@lightGreen, 5), 10, relative); -@lightTealHover : saturate(darken(@lightTeal, 5), 10, relative); -@lightBlueHover : saturate(darken(@lightBlue, 5), 10, relative); -@lightVioletHover : saturate(darken(@lightViolet, 5), 10, relative); -@lightPurpleHover : saturate(darken(@lightPurple, 5), 10, relative); -@lightPinkHover : saturate(darken(@lightPink, 5), 10, relative); -@lightBrownHover : saturate(darken(@lightBrown, 5), 10, relative); -@lightGreyHover : saturate(darken(@lightGrey, 5), 10, relative); -@lightBlackHover : saturate(darken(@fullBlack, 5), 10, relative); +@lightRedHover : saturate(darken(@lightRed, 10), 10, relative); +@lightOrangeHover : saturate(darken(@lightOrange, 10), 10, relative); +@lightYellowHover : saturate(darken(@lightYellow, 10), 10, relative); +@lightOliveHover : saturate(darken(@lightOlive, 10), 10, relative); +@lightGreenHover : saturate(darken(@lightGreen, 10), 10, relative); +@lightTealHover : saturate(darken(@lightTeal, 10), 10, relative); +@lightBlueHover : saturate(darken(@lightBlue, 10), 10, relative); +@lightVioletHover : saturate(darken(@lightViolet, 10), 10, relative); +@lightPurpleHover : saturate(darken(@lightPurple, 10), 10, relative); +@lightPinkHover : saturate(darken(@lightPink, 10), 10, relative); +@lightBrownHover : saturate(darken(@lightBrown, 10), 10, relative); +@lightGreyHover : saturate(darken(@lightGrey, 10), 10, relative); +@lightBlackHover : saturate(darken(@fullBlack, 10), 10, relative); /*--- Emotive ---*/ @positiveColorHover : saturate(darken(@positiveColor, 5), 10, relative);