From 8f52ac012da2673d98b54a82eb4ecd63d5762234 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Mon, 26 Nov 2018 20:43:45 +0100 Subject: [PATCH 01/31] feat(colors): Central base mapping, so each component can iterate through and color palette naming is dynamic --- src/theme.less | 11 ++ src/themes/default/globals/colors.less | 126 ++++++++++++++++++++++ src/themes/default/globals/site.variables | 7 +- 3 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 src/themes/default/globals/colors.less diff --git a/src/theme.less b/src/theme.less index ffaf4f8118..940f3195f1 100644 --- a/src/theme.less +++ b/src/theme.less @@ -39,6 +39,17 @@ @import (optional) "@{siteFolder}/@{type}s/@{element}.variables"; +/*------------------------- + Central Color Map +-------------------------*/ + +/* Default */ +@import "@{themesFolder}/default/globals/colors.less"; + +/* Site Theme */ +@import (optional) "@{themesFolder}/@{site}/colors.less"; + + /******************************* Mix-ins *******************************/ diff --git a/src/themes/default/globals/colors.less b/src/themes/default/globals/colors.less new file mode 100644 index 0000000000..3c1e80c08e --- /dev/null +++ b/src/themes/default/globals/colors.less @@ -0,0 +1,126 @@ +/*********************************************************** + Central Color Mapping Base for all components to iterate +***********************************************************/ + +@colors: { + @primary: { + color : @primaryColor; + lightColor : @lightPrimaryColor; + border : @primaryColor; + text : @primaryColor; + hover : @primaryColorHover; + lightHover : @lightPrimaryColorHover; + }; + @secondary: { + color : @secondaryColor; + lightColor : @lightSecondaryColor; + border : @secondaryColor; + text : @secondaryColor; + hover : @secondaryColorHover; + lightHover : @lightSecondaryColorHover; + }; + @red: { + color : @red; + lightColor : @lightRed; + border : @redBorderColor; + text : @redTextColor; + hover : @redHover; + lightHover : @lightRedHover; + }; + @orange: { + color : @orange; + lightColor : @lightOrange; + border : @orangeBorderColor; + text : @orangeTextColor; + hover : @orangeHover; + lightHover : @lightOrangeHover; + }; + @yellow: { + color : @yellow; + lightColor : @lightYellow; + border : @yellowBorderColor; + text : @yellowTextColor; + hover : @yellowHover; + lightHover : @lightYellowHover; + }; + @olive: { + color : @olive; + lightColor : @lightOlive; + border : @oliveBorderColor; + text : @oliveTextColor; + hover : @oliveHover; + lightHover : @lightOliveHover; + }; + @green: { + color : @green; + lightColor : @lightGreen; + border : @greenBorderColor; + text : @greenTextColor; + hover : @greenHover; + lightHover : @lightGreenHover; + }; + @teal: { + color : @teal; + lightColor : @lightTeal; + border : @tealBorderColor; + text : @tealTextColor; + hover : @tealHover; + lightHover : @lightTealHover; + }; + @blue: { + color : @blue; + lightColor : @lightBlue; + border : @blueBorderColor; + text : @blueTextColor; + hover : @blueHover; + lightHover : @lightBlueHover; + }; + @violet: { + color : @violet; + lightColor : @lightViolet; + border : @violetBorderColor; + text : @violetTextColor; + hover : @violetHover; + lightHover : @lightVioletHover; + }; + @purple: { + color : @purple; + lightColor : @lightPurple; + border : @purpleBorderColor; + text : @purpleTextColor; + hover : @purpleHover; + lightHover : @lightPurpleHover; + }; + @pink: { + color : @pink; + lightColor : @lightPink; + border : @pinkBorderColor; + text : @pinkTextColor; + hover : @pinkHover; + lightHover : @lightPinkHover; + }; + @brown: { + color : @brown; + lightColor : @lightBrown; + border : @brownBorderColor; + text : @brownTextColor; + hover : @brownHover; + lightHover : @lightBrownHover; + }; + @grey: { + color : @grey; + lightColor : @lightGrey; + border : @greyBorderColor; + text : @greyTextColor; + hover : @greyHover; + lightHover : @lightGreyHover; + }; + @black: { + color : @black; + lightColor : @lightBlack; + border : @blackBorderColor; + text : @blackTextColor; + hover : @blackHover; + lightHover : @lightBlackHover; + }; +} \ No newline at end of file diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index cbc776b387..20019b06d9 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -296,6 +296,8 @@ @purpleTextColor : @purple; @pinkTextColor : @pink; @brownTextColor : @brown; +@greyTextColor : @grey; +@blackTextColor : @black; /*--- Colored Border ---*/ @redBorderColor : @redTextColor; @@ -309,7 +311,8 @@ @purpleBorderColor : @purpleTextColor; @pinkBorderColor : @pinkTextColor; @brownBorderColor : @brownTextColor; - +@greyBorderColor : @greyTextColor; +@blackBorderColor : @blackTextColor; /*------------------- Alpha Colors --------------------*/ @@ -755,6 +758,8 @@ @purpleHover : saturate(darken(@purple, 5), 10, relative); @pinkHover : saturate(darken(@pink, 5), 10, relative); @brownHover : saturate(darken(@brown, 5), 10, relative); +@greyHover : saturate(darken(@grey, 5), 10, relative); +@blackHover : saturate(darken(@black, 5), 10, relative); @lightRedHover : saturate(darken(@lightRed, 5), 10, relative); @lightOrangeHover : saturate(darken(@lightOrange, 5), 10, relative); From 6f4d1bd334c03cfdf2f7eb2b2af76b50d57ceac4 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Mon, 26 Nov 2018 21:05:44 +0100 Subject: [PATCH 02/31] feat(colors,segment): segment dynamic color creation and removed !important --- src/definitions/elements/segment.less | 127 +++----------------------- 1 file changed, 11 insertions(+), 116 deletions(-) diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index d9c8ee4eae..7ad7826087 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -549,122 +549,17 @@ Colors --------------------*/ -/* Red */ -.ui.red.segment:not(.inverted) { - border-top: @coloredBorderSize solid @red !important; -} -.ui.inverted.red.segment { - background-color: @red !important; - color: @white !important; -} - -/* Orange */ -.ui.orange.segment:not(.inverted) { - border-top: @coloredBorderSize solid @orange !important; -} -.ui.inverted.orange.segment { - background-color: @orange !important; - color: @white !important; -} - -/* Yellow */ -.ui.yellow.segment:not(.inverted) { - border-top: @coloredBorderSize solid @yellow !important; -} -.ui.inverted.yellow.segment { - background-color: @yellow !important; - color: @white !important; -} - -/* Olive */ -.ui.olive.segment:not(.inverted) { - border-top: @coloredBorderSize solid @olive !important; -} -.ui.inverted.olive.segment { - background-color: @olive !important; - color: @white !important; -} - -/* Green */ -.ui.green.segment:not(.inverted) { - border-top: @coloredBorderSize solid @green !important; -} -.ui.inverted.green.segment { - background-color: @green !important; - color: @white !important; -} - -/* Teal */ -.ui.teal.segment:not(.inverted) { - border-top: @coloredBorderSize solid @teal !important; -} -.ui.inverted.teal.segment { - background-color: @teal !important; - color: @white !important; -} - -/* Blue */ -.ui.blue.segment:not(.inverted) { - border-top: @coloredBorderSize solid @blue !important; -} -.ui.inverted.blue.segment { - background-color: @blue !important; - color: @white !important; -} - -/* Violet */ -.ui.violet.segment:not(.inverted) { - border-top: @coloredBorderSize solid @violet !important; -} -.ui.inverted.violet.segment { - background-color: @violet !important; - color: @white !important; -} - -/* Purple */ -.ui.purple.segment:not(.inverted) { - border-top: @coloredBorderSize solid @purple !important; -} -.ui.inverted.purple.segment { - background-color: @purple !important; - color: @white !important; -} - -/* Pink */ -.ui.pink.segment:not(.inverted) { - border-top: @coloredBorderSize solid @pink !important; -} -.ui.inverted.pink.segment { - background-color: @pink !important; - color: @white !important; -} - -/* Brown */ -.ui.brown.segment:not(.inverted) { - border-top: @coloredBorderSize solid @brown !important; -} -.ui.inverted.brown.segment { - background-color: @brown !important; - color: @white !important; -} - -/* Grey */ -.ui.grey.segment:not(.inverted) { - border-top: @coloredBorderSize solid @grey !important; -} -.ui.inverted.grey.segment { - background-color: @grey !important; - color: @white !important; -} - -/* Black */ -.ui.black.segment:not(.inverted) { - border-top: @coloredBorderSize solid @black !important; -} -.ui.inverted.black.segment { - background-color: @black !important; - color: @white !important; -} +each(@colors,{ + @cn: replace(@key,'@',''); + @c: @colors[@@cn][color]; + .ui.@{cn}.segment.segment.segment.segment.segment:not(.inverted) { + border-top: @coloredBorderSize solid @c; + } + .ui.inverted.@{cn}.segment.segment.segment.segment.segment { + background-color: @c; + color: @white; + } +}) /*------------------- Aligned From 1c56055a38fdf241e9293df5075c48edae2f4967 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Tue, 27 Nov 2018 19:45:20 +0100 Subject: [PATCH 03/31] feat(colors,label): label dynamic color creation and centralized variables --- src/definitions/elements/label.less | 94 +++---- src/definitions/elements/segment.less | 8 +- src/themes/default/elements/label.variables | 32 --- src/themes/default/globals/colors.less | 257 +++++++++++++------- src/themes/default/globals/site.variables | 108 ++++++-- 5 files changed, 291 insertions(+), 208 deletions(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index 7b9894a8d9..560c111af2 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -616,95 +616,95 @@ a.ui.basic.label:hover { Colors --------------------*/ - -.labelColor(@colorRaw; @lightColor; @blackOrGrey:false;) { - @color: replace(@colorRaw,'Color',''); - @_labelColor: "@{colorRaw}"; - @_labelInvertedColor: "@{lightColor}"; - @_labelTextColor : "@{color}TextColor"; - @_labelHover : "@{colorRaw}Hover"; - @_labelInvertedHover: "@{lightColor}Hover"; - @_labelHoverTextColor : "@{color}HoverTextColor"; - @_labelRibbonShadow : "@{color}RibbonShadow"; - @_labelInvertedRibbonShadow : "@{color}InvertedRibbonShadow"; +each(@colors,{ + @color : replace(@key,'@',''); + @isDark : @colors[@@color][isDark]; + @_labelColor : @colors[@@color][color]; + @_labelInvertedColor : @colors[@@color][light]; + @_labelTextColor : @colors[@@color][text]; + @_labelHover : @colors[@@color][hover]; + @_labelInvertedHover : @colors[@@color][lightHover]; + @_labelHoverTextColor : @colors[@@color][hoverText]; + @_labelRibbonShadow : @colors[@@color][ribbon]; + @_labelInvertedRibbonShadow : @colors[@@color][invertedRibbon]; .ui.@{color}.labels .label, .ui.@{color}.label { - background-color: @@_labelColor; - border-color: @@_labelColor; - color: @@_labelTextColor; + 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; + background-color: @_labelHover; + border-color: @_labelHover; + color: @_labelHoverTextColor; } /* Ribbon */ .ui.@{color}.ribbon.label { - border-color: @@_labelRibbonShadow; + border-color: @_labelRibbonShadow; } /* Basic */ .ui.basic.labels .@{color}.label, .ui.basic.@{color}.label { background: @basicBackground; - border-color: @@_labelColor; - color: @@_labelColor; + border-color: @_labelColor; + color: @_labelColor; } .ui.basic.labels a.@{color}.label:hover, a.ui.basic.@{color}.label:hover { background: @basicBackground; - border-color: @@_labelHover; - color: @@_labelHover; + border-color: @_labelHover; + color: @_labelHover; } /* Inverted */ .ui.inverted.labels .@{color}.label, .ui.inverted.@{color}.label { - background-color: @@_labelInvertedColor; - border-color: @@_labelInvertedColor; + background-color: @_labelInvertedColor; + border-color: @_labelInvertedColor; 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) { + background-color: @_labelInvertedHover; + border-color: @_labelInvertedHover; + & when not (@isDark) { color: @black; } - & when (@blackOrGrey) { - color: @@_labelTextColor; + & when (@isDark) { + color: @_labelTextColor; } } /* Inverted Ribbon */ .ui.inverted.@{color}.ribbon.label { - border-color: @@_labelInvertedRibbonShadow; + border-color: @_labelInvertedRibbonShadow; } /* Inverted Basic */ .ui.inverted.basic.labels .@{color}.label, .ui.inverted.basic.@{color}.label { background-color: @invertedBackground; - border-color: @@_labelInvertedColor; - & when not (@blackOrGrey) { - color: @@_labelInvertedColor; + border-color: @_labelInvertedColor; + & when not (@isDark) { + color: @_labelInvertedColor; } - & when (@blackOrGrey) { + & when (@isDark) { color: @invertedTextColor; } } .ui.inverted.basic.labels a.@{color}.label:hover, a.ui.inverted.basic.@{color}.label:hover { - border-color: @@_labelInvertedHover; + border-color: @_labelInvertedHover; background-color: @invertedBackground; - & when not (@blackOrGrey) { - color: @@_labelInvertedHover; + & when not (@isDark) { + color: @_labelInvertedHover; } } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .@{color}.label, .ui.inverted.@{color}.basic.tag.label { - border: @invertedBorderSize solid @@_labelInvertedColor; + border: @invertedBorderSize solid @_labelInvertedColor; } .ui.inverted.basic.tag.labels .@{color}.label:before, .ui.inverted.@{color}.basic.tag.label:before { @@ -714,23 +714,7 @@ a.ui.basic.label:hover { background-color: @invertedBackground; right: e(%("calc(100%% + %d)", @invertedBorderSize)); } - -} -.labelColor(~'primaryColor',~'lightPrimaryColor'); -.labelColor(~'secondaryColor',~'lightSecondaryColor'); -.labelColor(~'red',~'lightRed'); -.labelColor(~'orange',~'lightOrange'); -.labelColor(~'yellow',~'lightYellow'); -.labelColor(~'olive',~'lightOlive'); -.labelColor(~'green',~'lightGreen'); -.labelColor(~'teal',~'lightTeal'); -.labelColor(~'blue',~'lightBlue'); -.labelColor(~'violet',~'lightViolet'); -.labelColor(~'purple',~'lightPurple'); -.labelColor(~'pink',~'lightPink'); -.labelColor(~'brown',~'lightBrown'); -.labelColor(~'grey',~'lightGrey'); -.labelColor(~'black',~'lightBlack',true); +}) /*------------------- Horizontal diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 7ad7826087..18f66e3caf 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -550,12 +550,12 @@ --------------------*/ each(@colors,{ - @cn: replace(@key,'@',''); - @c: @colors[@@cn][color]; - .ui.@{cn}.segment.segment.segment.segment.segment:not(.inverted) { + @color: replace(@key,'@',''); + @c: @colors[@@color][color]; + .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) { border-top: @coloredBorderSize solid @c; } - .ui.inverted.@{cn}.segment.segment.segment.segment.segment { + .ui.inverted.@{color}.segment.segment.segment.segment.segment { background-color: @c; color: @white; } diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables index 0fbafa8268..f8638c297c 100644 --- a/src/themes/default/elements/label.variables +++ b/src/themes/default/elements/label.variables @@ -184,38 +184,6 @@ @primaryHoverTextColor: @white; @secondaryHoverTextColor: @white; -@primaryRibbonShadow: darken(@primaryColor, 10); -@secondaryRibbonShadow: darken(@secondaryColor, 10); -@redRibbonShadow: darken(@red, 10); -@orangeRibbonShadow: darken(@orange, 10); -@yellowRibbonShadow: darken(@yellow, 10); -@oliveRibbonShadow: darken(@olive, 10); -@greenRibbonShadow: darken(@green, 10); -@tealRibbonShadow: darken(@teal, 10); -@blueRibbonShadow: darken(@blue, 10); -@violetRibbonShadow: darken(@violet, 10); -@purpleRibbonShadow: darken(@purple, 10); -@pinkRibbonShadow: darken(@pink, 10); -@brownRibbonShadow: darken(@brown, 10); -@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; diff --git a/src/themes/default/globals/colors.less b/src/themes/default/globals/colors.less index 3c1e80c08e..ac63adb55a 100644 --- a/src/themes/default/globals/colors.less +++ b/src/themes/default/globals/colors.less @@ -4,123 +4,198 @@ @colors: { @primary: { - color : @primaryColor; - lightColor : @lightPrimaryColor; - border : @primaryColor; - text : @primaryColor; - hover : @primaryColorHover; - lightHover : @lightPrimaryColorHover; + color : @primaryColor; + light : @lightPrimaryColor; + border : @primaryBorderColor; + text : @primaryTextColor; + hoverText : @primaryHoverTextColor; + hover : @primaryColorHover; + lightHover : @lightPrimaryColorHover; + ribbon : @primaryRibbonShadow; + invertedRibbon : @primaryInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @secondary: { - color : @secondaryColor; - lightColor : @lightSecondaryColor; - border : @secondaryColor; - text : @secondaryColor; - hover : @secondaryColorHover; - lightHover : @lightSecondaryColorHover; + color : @secondaryColor; + light : @lightSecondaryColor; + border : @secondaryBorderColor; + text : @secondaryTextColor; + hoverText : @secondaryHoverTextColor; + hover : @secondaryColorHover; + lightHover : @lightSecondaryColorHover; + ribbon : @secondaryRibbonShadow; + invertedRibbon : @secondaryInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @red: { - color : @red; - lightColor : @lightRed; - border : @redBorderColor; - text : @redTextColor; - hover : @redHover; - lightHover : @lightRedHover; + color : @red; + light : @lightRed; + border : @redBorderColor; + text : @redTextColor; + hoverText : @redHoverTextColor; + hover : @redHover; + lightHover : @lightRedHover; + ribbon : @redRibbonShadow; + invertedRibbon : @redInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @orange: { - color : @orange; - lightColor : @lightOrange; - border : @orangeBorderColor; - text : @orangeTextColor; - hover : @orangeHover; - lightHover : @lightOrangeHover; + color : @orange; + light : @lightOrange; + border : @orangeBorderColor; + text : @orangeTextColor; + hoverText : @orangeHoverTextColor; + hover : @orangeHover; + lightHover : @lightOrangeHover; + ribbon : @orangeRibbonShadow; + invertedRibbon : @orangeInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @yellow: { - color : @yellow; - lightColor : @lightYellow; - border : @yellowBorderColor; - text : @yellowTextColor; - hover : @yellowHover; - lightHover : @lightYellowHover; + color : @yellow; + light : @lightYellow; + border : @yellowBorderColor; + text : @yellowTextColor; + hoverText : @yellowHoverTextColor; + hover : @yellowHover; + lightHover : @lightYellowHover; + ribbon : @yellowRibbonShadow; + invertedRibbon : @yellowInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @olive: { - color : @olive; - lightColor : @lightOlive; - border : @oliveBorderColor; - text : @oliveTextColor; - hover : @oliveHover; - lightHover : @lightOliveHover; + color : @olive; + light : @lightOlive; + border : @oliveBorderColor; + text : @oliveTextColor; + hoverText : @oliveHoverTextColor; + hover : @oliveHover; + lightHover : @lightOliveHover; + ribbon : @oliveRibbonShadow; + invertedRibbon : @oliveInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @green: { - color : @green; - lightColor : @lightGreen; - border : @greenBorderColor; - text : @greenTextColor; - hover : @greenHover; - lightHover : @lightGreenHover; + color : @green; + light : @lightGreen; + border : @greenBorderColor; + text : @greenTextColor; + hoverText : @greenHoverTextColor; + hover : @greenHover; + lightHover : @lightGreenHover; + ribbon : @greenRibbonShadow; + invertedRibbon : @greenInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @teal: { - color : @teal; - lightColor : @lightTeal; - border : @tealBorderColor; - text : @tealTextColor; - hover : @tealHover; - lightHover : @lightTealHover; + color : @teal; + light : @lightTeal; + border : @tealBorderColor; + text : @tealTextColor; + hoverText : @tealHoverTextColor; + hover : @tealHover; + lightHover : @lightTealHover; + ribbon : @tealRibbonShadow; + invertedRibbon : @tealInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @blue: { - color : @blue; - lightColor : @lightBlue; - border : @blueBorderColor; - text : @blueTextColor; - hover : @blueHover; - lightHover : @lightBlueHover; + color : @blue; + light : @lightBlue; + border : @blueBorderColor; + text : @blueTextColor; + hoverText : @blueHoverTextColor; + hover : @blueHover; + lightHover : @lightBlueHover; + ribbon : @blueRibbonShadow; + invertedRibbon : @blueInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @violet: { - color : @violet; - lightColor : @lightViolet; - border : @violetBorderColor; - text : @violetTextColor; - hover : @violetHover; - lightHover : @lightVioletHover; + color : @violet; + light : @lightViolet; + border : @violetBorderColor; + text : @violetTextColor; + hoverText : @violetHoverTextColor; + hover : @violetHover; + lightHover : @lightVioletHover; + ribbon : @violetRibbonShadow; + invertedRibbon : @violetInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @purple: { - color : @purple; - lightColor : @lightPurple; - border : @purpleBorderColor; - text : @purpleTextColor; - hover : @purpleHover; - lightHover : @lightPurpleHover; + color : @purple; + light : @lightPurple; + border : @purpleBorderColor; + text : @purpleTextColor; + hoverText : @purpleHoverTextColor; + hover : @purpleHover; + lightHover : @lightPurpleHover; + ribbon : @purpleRibbonShadow; + invertedRibbon : @purpleInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @pink: { - color : @pink; - lightColor : @lightPink; - border : @pinkBorderColor; - text : @pinkTextColor; - hover : @pinkHover; - lightHover : @lightPinkHover; + color : @pink; + light : @lightPink; + border : @pinkBorderColor; + text : @pinkTextColor; + hoverText : @pinkHoverTextColor; + hover : @pinkHover; + lightHover : @lightPinkHover; + ribbon : @pinkRibbonShadow; + invertedRibbon : @pinkInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @brown: { - color : @brown; - lightColor : @lightBrown; - border : @brownBorderColor; - text : @brownTextColor; - hover : @brownHover; - lightHover : @lightBrownHover; + color : @brown; + light : @lightBrown; + border : @brownBorderColor; + text : @brownTextColor; + hoverText : @brownHoverTextColor; + hover : @brownHover; + lightHover : @lightBrownHover; + ribbon : @brownRibbonShadow; + invertedRibbon : @brownInvertedRibbonShadow; + isDark : false; + isVeryDark : false; }; @grey: { - color : @grey; - lightColor : @lightGrey; - border : @greyBorderColor; - text : @greyTextColor; - hover : @greyHover; - lightHover : @lightGreyHover; + color : @grey; + light : @lightGrey; + border : @greyBorderColor; + text : @greyTextColor; + hoverText : @greyHoverTextColor; + hover : @greyHover; + lightHover : @lightGreyHover; + ribbon : @greyRibbonShadow; + invertedRibbon : @greyInvertedRibbonShadow; + isDark : true; + isVeryDark : false; }; @black: { - color : @black; - lightColor : @lightBlack; - border : @blackBorderColor; - text : @blackTextColor; - hover : @blackHover; - lightHover : @lightBlackHover; + color : @black; + light : @lightBlack; + border : @blackBorderColor; + text : @blackTextColor; + hoverText : @blackHoverTextColor; + hover : @blackHover; + lightHover : @lightBlackHover; + ribbon : @blackRibbonShadow; + invertedRibbon : @blackInvertedRibbonShadow; + isDark : true; + isVeryDark : true; }; -} \ No newline at end of file +} diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 8eb658b204..b18fedd7a2 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -285,34 +285,90 @@ @brownHeaderColor : darken(@brownTextColor, 5); /*--- Colored Text ---*/ -@redTextColor : @red; -@orangeTextColor : @orange; -@yellowTextColor : #B58105; // Yellow text is difficult to read -@oliveTextColor : #8ABC1E; // Olive is difficult to read -@greenTextColor : #1EBC30; // Green is difficult to read -@tealTextColor : #10A3A3; // Teal text is difficult to read -@blueTextColor : @blue; -@violetTextColor : @violet; -@purpleTextColor : @purple; -@pinkTextColor : @pink; -@brownTextColor : @brown; -@greyTextColor : @grey; -@blackTextColor : @black; +@primaryTextColor : @invertedTextColor; +@secondaryTextColor : @invertedTextColor; +@redTextColor : @red; +@orangeTextColor : @orange; +@yellowTextColor : #B58105; // Yellow text is difficult to read +@oliveTextColor : #8ABC1E; // Olive is difficult to read +@greenTextColor : #1EBC30; // Green is difficult to read +@tealTextColor : #10A3A3; // Teal text is difficult to read +@blueTextColor : @blue; +@violetTextColor : @violet; +@purpleTextColor : @purple; +@pinkTextColor : @pink; +@brownTextColor : @brown; +@greyTextColor : @grey; +@blackTextColor : @black; + +/*--- Hovered Colored Text ---*/ +@primaryHoverTextColor : @primaryTextColor; +@secondaryHoverTextColor : @secondaryTextColor; +@redHoverTextColor : @redTextColor; +@orangeHoverTextColor : @orangeTextColor; +@yellowHoverTextColor : @yellowTextColor; +@oliveHoverTextColor : @oliveTextColor; +@greenHoverTextColor : @greenTextColor; +@tealHoverTextColor : @tealTextColor; +@blueHoverTextColor : @blueTextColor; +@violetHoverTextColor : @violetTextColor; +@purpleHoverTextColor : @purpleTextColor; +@pinkHoverTextColor : @pinkTextColor; +@brownHoverTextColor : @brownTextColor; +@greyHoverTextColor : @greyTextColor; +@blackHoverTextColor : @blackTextColor; + /*--- Colored Border ---*/ -@redBorderColor : @redTextColor; -@orangeBorderColor : @orangeTextColor; -@yellowBorderColor : @yellowTextColor; -@oliveBorderColor : @oliveTextColor; -@greenBorderColor : @greenTextColor; -@tealBorderColor : @tealTextColor; -@blueBorderColor : @blueTextColor; -@violetBorderColor : @violetTextColor; -@purpleBorderColor : @purpleTextColor; -@pinkBorderColor : @pinkTextColor; -@brownBorderColor : @brownTextColor; -@greyBorderColor : @greyTextColor; -@blackBorderColor : @blackTextColor; +@primaryBorderColor : @primaryColor; +@secondaryBorderColor : @secondaryColor; +@redBorderColor : @redTextColor; +@orangeBorderColor : @orangeTextColor; +@yellowBorderColor : @yellowTextColor; +@oliveBorderColor : @oliveTextColor; +@greenBorderColor : @greenTextColor; +@tealBorderColor : @tealTextColor; +@blueBorderColor : @blueTextColor; +@violetBorderColor : @violetTextColor; +@purpleBorderColor : @purpleTextColor; +@pinkBorderColor : @pinkTextColor; +@brownBorderColor : @brownTextColor; +@greyBorderColor : @greyTextColor; +@blackBorderColor : @blackTextColor; + +/*--- Shadows ---*/ +@primaryRibbonShadow: darken(@primaryColor, 10); +@secondaryRibbonShadow: darken(@secondaryColor, 10); +@redRibbonShadow: darken(@red, 10); +@orangeRibbonShadow: darken(@orange, 10); +@yellowRibbonShadow: darken(@yellow, 10); +@oliveRibbonShadow: darken(@olive, 10); +@greenRibbonShadow: darken(@green, 10); +@tealRibbonShadow: darken(@teal, 10); +@blueRibbonShadow: darken(@blue, 10); +@violetRibbonShadow: darken(@violet, 10); +@purpleRibbonShadow: darken(@purple, 10); +@pinkRibbonShadow: darken(@pink, 10); +@brownRibbonShadow: darken(@brown, 10); +@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); + /*------------------- Alpha Colors --------------------*/ From 8b80a4fd3bafd7af16f7ed4372a189d519e85e0f Mon Sep 17 00:00:00 2001 From: lubber-de Date: Tue, 27 Nov 2018 23:52:04 +0100 Subject: [PATCH 04/31] feat(colors,range): range dynamic color creation --- src/definitions/modules/range.less | 116 +++-------------------------- 1 file changed, 12 insertions(+), 104 deletions(-) diff --git a/src/definitions/modules/range.less b/src/definitions/modules/range.less index c7380f6b28..9bc859fdae 100644 --- a/src/definitions/modules/range.less +++ b/src/definitions/modules/range.less @@ -86,110 +86,18 @@ Colors ---------------*/ -/* Red */ -.ui.red.range .inner .track-fill { - background-color: @red; -} -.ui.red.inverted.range .inner .track-fill { - background-color: @lightRed; -} - -/* Orange */ -.ui.orange.range .inner .track-fill { - background-color: @orange; -} -.ui.orange.inverted.range .inner .track-fill { - background-color: @lightOrange; -} - -/* Yellow */ -.ui.yellow.range .inner .track-fill { - background-color: @yellow; -} -.ui.yellow.inverted.range .inner .track-fill { - background-color: @lightYellow; -} - -/* Olive */ -.ui.olive.range .inner .track-fill { - background-color: @olive; -} -.ui.olive.inverted.range .inner .track-fill { - background-color: @lightOlive; -} - -/* Green */ -.ui.green.range .inner .track-fill { - background-color: @green; -} -.ui.green.inverted.range .inner .track-fill { - background-color: @lightGreen; -} - -/* Teal */ -.ui.teal.range .inner .track-fill { - background-color: @teal; -} -.ui.teal.inverted.range .inner .track-fill { - background-color: @lightTeal; -} - -/* Blue */ -.ui.blue.range .inner .track-fill { - background-color: @blue; -} -.ui.blue.inverted.range .inner .track-fill { - background-color: @lightBlue; -} - -/* Violet */ -.ui.violet.range .inner .track-fill { - background-color: @violet; -} -.ui.violet.inverted.range .inner .track-fill { - background-color: @lightViolet; -} - -/* Purple */ -.ui.purple.range .inner .track-fill { - background-color: @purple; -} -.ui.purple.inverted.range .inner .track-fill { - background-color: @lightPurple; -} - -/* Pink */ -.ui.pink.range .inner .track-fill { - background-color: @pink; -} -.ui.pink.inverted.range .inner .track-fill { - background-color: @lightPink; -} - -/* Brown */ -.ui.brown.range .inner .track-fill { - background-color: @brown; -} -.ui.brown.inverted.range .inner .track-fill { - background-color: @lightBrown; -} - -/* Grey */ -.ui.grey.range .inner .track-fill { - background-color: @grey; -} -.ui.grey.inverted.range .inner .track-fill { - background-color: @lightGrey; -} - -/* Black */ -.ui.black.range .inner .track-fill { - background-color: @black; -} -.ui.black.inverted.range .inner .track-fill { - background-color: @lightBlack; -} - +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + + .ui.@{color}.range .inner .track-fill { + background-color: @c; + } + .ui.@{color}.inverted.range .inner .track-fill { + background-color: @l; + } +}) /*-------------- Disabled From 05e394d5e9eb68cf590664f6d1eababf0556ca66 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Tue, 27 Nov 2018 23:55:23 +0100 Subject: [PATCH 05/31] feat(colors,progress): progress dynamic color creation --- src/definitions/modules/progress.less | 113 +++----------------------- 1 file changed, 11 insertions(+), 102 deletions(-) diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less index b737ff123b..da90e3ffb0 100755 --- a/src/definitions/modules/progress.less +++ b/src/definitions/modules/progress.less @@ -356,109 +356,18 @@ Colors ---------------*/ -/* Red */ -.ui.red.progress .bar { - background-color: @red; -} -.ui.red.inverted.progress .bar { - background-color: @lightRed; -} - -/* Orange */ -.ui.orange.progress .bar { - background-color: @orange; -} -.ui.orange.inverted.progress .bar { - background-color: @lightOrange; -} - -/* Yellow */ -.ui.yellow.progress .bar { - background-color: @yellow; -} -.ui.yellow.inverted.progress .bar { - background-color: @lightYellow; -} - -/* Olive */ -.ui.olive.progress .bar { - background-color: @olive; -} -.ui.olive.inverted.progress .bar { - background-color: @lightOlive; -} - -/* Green */ -.ui.green.progress .bar { - background-color: @green; -} -.ui.green.inverted.progress .bar { - background-color: @lightGreen; -} - -/* Teal */ -.ui.teal.progress .bar { - background-color: @teal; -} -.ui.teal.inverted.progress .bar { - background-color: @lightTeal; -} - -/* Blue */ -.ui.blue.progress .bar { - background-color: @blue; -} -.ui.blue.inverted.progress .bar { - background-color: @lightBlue; -} +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; -/* Violet */ -.ui.violet.progress .bar { - background-color: @violet; -} -.ui.violet.inverted.progress .bar { - background-color: @lightViolet; -} - -/* Purple */ -.ui.purple.progress .bar { - background-color: @purple; -} -.ui.purple.inverted.progress .bar { - background-color: @lightPurple; -} - -/* Pink */ -.ui.pink.progress .bar { - background-color: @pink; -} -.ui.pink.inverted.progress .bar { - background-color: @lightPink; -} - -/* Brown */ -.ui.brown.progress .bar { - background-color: @brown; -} -.ui.brown.inverted.progress .bar { - background-color: @lightBrown; -} - -/* Grey */ -.ui.grey.progress .bar { - background-color: @grey; -} -.ui.grey.inverted.progress .bar { - background-color: @lightGrey; -} - -/* Black */ -.ui.black.progress .bar { - background-color: @black; -} -.ui.black.inverted.progress .bar { - background-color: @lightBlack; -} + .ui.@{color}.progress .bar { + background-color: @c; + } + .ui.@{color}.inverted.progress .bar { + background-color: @l; + } +}) /*-------------- Sizes From 83c8f46774dbd8cbd6966a2613f0e1a048f5e152 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Wed, 28 Nov 2018 00:38:39 +0100 Subject: [PATCH 06/31] feat(colors,header): header dynamic color creation and removed !important --- src/definitions/elements/header.less | 279 +++------------------------ 1 file changed, 26 insertions(+), 253 deletions(-) diff --git a/src/definitions/elements/header.less b/src/definitions/elements/header.less index a457354d88..6c549ca5b4 100755 --- a/src/definitions/elements/header.less +++ b/src/definitions/elements/header.less @@ -331,260 +331,33 @@ h5.ui.header .sub.header { /*------------------- Colors --------------------*/ -/*--- Primary ---*/ -.ui.primary.header { - color: @primaryColor !important; -} -a.ui.primary.header:hover { - color: @primaryColor !important; -} -.ui.primary.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @primaryColor; -} - -/* Inverted */ -.ui.inverted.primary.header { - color: @lightPrimaryColor !important; -} -a.ui.inverted.primary.header:hover { - color: @lightPrimaryColor !important; -} - -/*--- Secondary ---*/ -.ui.secondary.header { - color: @secondaryColor !important; -} -a.ui.secondary.header:hover { - color: @secondaryColor !important; -} -.ui.secondary.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @secondaryColor; -} - -/* Inverted */ -.ui.inverted.secondary.header { - color: @lightSecondaryColor !important; -} -a.ui.inverted.secondary.header:hover { - color: @lightSecondaryColor !important; -} - -/*--- Red ---*/ -.ui.red.header { - color: @red !important; -} -a.ui.red.header:hover { - color: @redHover !important; -} -.ui.red.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @red; -} -/* Inverted */ -.ui.inverted.red.header { - color: @lightRed !important; -} -a.ui.inverted.red.header:hover { - color: @lightRedHover !important; -} - -/*--- Orange ---*/ -.ui.orange.header { - color: @orange !important; -} -a.ui.orange.header:hover { - color: @orangeHover !important; -} -.ui.orange.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @orange; -} -/* Inverted */ -.ui.inverted.orange.header { - color: @lightOrange !important; -} -a.ui.inverted.orange.header:hover { - color: @lightOrangeHover !important; -} - -/*--- Olive ---*/ -.ui.olive.header { - color: @olive !important; -} -a.ui.olive.header:hover { - color: @oliveHover !important; -} -.ui.olive.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @olive; -} -/* Inverted */ -.ui.inverted.olive.header { - color: @lightOlive !important; -} -a.ui.inverted.olive.header:hover { - color: @lightOliveHover !important; -} - -/*--- Yellow ---*/ -.ui.yellow.header { - color: @yellow !important; -} -a.ui.yellow.header:hover { - color: @yellowHover !important; -} -.ui.yellow.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @yellow; -} -/* Inverted */ -.ui.inverted.yellow.header { - color: @lightYellow !important; -} -a.ui.inverted.yellow.header:hover { - color: @lightYellowHover !important; -} - -/*--- Green ---*/ -.ui.green.header { - color: @green !important; -} -a.ui.green.header:hover { - color: @greenHover !important; -} -.ui.green.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @green; -} -/* Inverted */ -.ui.inverted.green.header { - color: @lightGreen !important; -} -a.ui.inverted.green.header:hover { - color: @lightGreenHover !important; -} - -/*--- Teal ---*/ -.ui.teal.header { - color: @teal !important; -} -a.ui.teal.header:hover { - color: @tealHover !important; -} -.ui.teal.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @teal; -} -/* Inverted */ -.ui.inverted.teal.header { - color: @lightTeal !important; -} -a.ui.inverted.teal.header:hover { - color: @lightTealHover !important; -} - -/*--- Blue ---*/ -.ui.blue.header { - color: @blue !important; -} -a.ui.blue.header:hover { - color: @blueHover !important; -} -.ui.blue.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @blue; -} -/* Inverted */ -.ui.inverted.blue.header { - color: @lightBlue !important; -} -a.ui.inverted.blue.header:hover { - color: @lightBlueHover !important; -} - -/*--- Violet ---*/ -.ui.violet.header { - color: @violet !important; -} -a.ui.violet.header:hover { - color: @violetHover !important; -} -.ui.violet.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @violet; -} -/* Inverted */ -.ui.inverted.violet.header { - color: @lightViolet !important; -} -a.ui.inverted.violet.header:hover { - color: @lightVioletHover !important; -} - -/*--- Purple ---*/ -.ui.purple.header { - color: @purple !important; -} -a.ui.purple.header:hover { - color: @purpleHover !important; -} -.ui.purple.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @purple; -} -/* Inverted */ -.ui.inverted.purple.header { - color: @lightPurple !important; -} -a.ui.inverted.purple.header:hover { - color: @lightPurpleHover !important; -} - -/*--- Pink ---*/ -.ui.pink.header { - color: @pink !important; -} -a.ui.pink.header:hover { - color: @pinkHover !important; -} -.ui.pink.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @pink; -} -/* Inverted */ -.ui.inverted.pink.header { - color: @lightPink !important; -} -a.ui.inverted.pink.header:hover { - color: @lightPinkHover !important; -} - -/*--- Brown ---*/ -.ui.brown.header { - color: @brown !important; -} -a.ui.brown.header:hover { - color: @brownHover !important; -} -.ui.brown.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @brown; -} -/* Inverted */ -.ui.inverted.brown.header { - color: @lightBrown !important; -} -a.ui.inverted.brown.header:hover { - color: @lightBrownHover !important; -} - -/*--- Grey ---*/ -.ui.grey.header { - color: @grey !important; -} -a.ui.grey.header:hover { - color: @greyHover !important; -} -.ui.grey.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @grey; -} -/* Inverted */ -.ui.inverted.grey.header { - color: @lightGrey !important; -} -a.ui.inverted.grey.header:hover { - color: @lightGreyHover !important; -} +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + @h: @colors[@@color][hover]; + @lh: @colors[@@color][lightHover]; + + .ui.@{color}.header { + color: @c; + } + a.ui.@{color}.header:hover { + color: @h; + } + .ui.@{color}.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @c; + } + .ui.inverted.@{color}.header.header.header { + color: @l; + } + a.ui.inverted.@{color}.header.header.header:hover { + color: @lh; + } + .ui.inverted.@{color}.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @l; + } +}) /*------------------- From 511909c1879a8735a3fbfee1741f84f408ea0024 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Wed, 28 Nov 2018 13:43:37 +0100 Subject: [PATCH 07/31] feat(colors,toast): toast dynamic color creation --- src/definitions/modules/toast.less | 28 ++++++++-------------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/src/definitions/modules/toast.less b/src/definitions/modules/toast.less index 342128fb11..e464387ee7 100644 --- a/src/definitions/modules/toast.less +++ b/src/definitions/modules/toast.less @@ -156,31 +156,19 @@ Colors -------------- */ -.toastColor(@color; @lightColor;) { - @_toastColor: "@{color}"; - @_toastInvertedColor: "@{lightColor}"; +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + .@{color}.toast { - background-color: @@_toastColor; + background-color: @c; } .inverted.@{color}.toast, .toast-box .inverted.@{color}.attached.progress .bar { - background-color: @@_toastInvertedColor; + background-color: @l; } -} - -.toastColor(~'red',~'lightRed'); -.toastColor(~'orange',~'lightOrange'); -.toastColor(~'yellow',~'lightYellow'); -.toastColor(~'olive',~'lightOlive'); -.toastColor(~'green',~'lightGreen'); -.toastColor(~'teal',~'lightTeal'); -.toastColor(~'blue',~'lightBlue'); -.toastColor(~'violet',~'lightViolet'); -.toastColor(~'purple',~'lightPurple'); -.toastColor(~'pink',~'lightPink'); -.toastColor(~'brown',~'lightBrown'); -.toastColor(~'grey',~'lightGrey'); -.toastColor(~'black',~'lightBlack'); +}) .inverted.toast { color: @toastInvertedTextColor; From 3e3d8dac8ecc56033073e2d411f287c204f3a7a6 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:20:42 +0100 Subject: [PATCH 08/31] feat(colors,icon): icon dynamic color creation and removed !important and fixes --- src/definitions/elements/icon.less | 219 +++-------------------------- 1 file changed, 21 insertions(+), 198 deletions(-) diff --git a/src/definitions/elements/icon.less b/src/definitions/elements/icon.less index f118eb4592..a29eb13166 100755 --- a/src/definitions/elements/icon.less +++ b/src/definitions/elements/icon.less @@ -38,7 +38,7 @@ i.icon { display: inline-block; opacity: @opacity; - margin: 0em @distanceFromText 0em 0em; + margin: 0 @distanceFromText 0 0; width: @width; height: @height; @@ -114,7 +114,7 @@ i.disabled.icon { i.fitted.icon { width: auto; - margin: 0em !important; + margin: 0 !important; } /*------------------- @@ -238,8 +238,8 @@ i.bordered.inverted.icon { /* Inverted Shapes */ i.inverted.bordered.icon, i.inverted.circular.icon { - background-color: @black !important; - color: @white !important; + background-color: @black; + color: @white; } i.inverted.icon { @@ -251,200 +251,24 @@ i.inverted.icon { Colors --------------------*/ -/* Primary */ -i.primary.icon { - color: @primaryColor !important; -} -i.inverted.primary.icon { - color: @lightPrimaryColor !important; -} -i.inverted.bordered.primary.icon, -i.inverted.circular.primary.icon { - background-color: @primaryColor !important; - color: @white !important; -} - -/* Secondary */ -i.secondary.icon { - color: @secondaryColor !important; -} -i.inverted.secondary.icon { - color: @lightSecondaryColor !important; -} -i.inverted.bordered.secondary.icon, -i.inverted.circular.secondary.icon { - background-color: @secondaryColor !important; - color: @white !important; -} - -/* Red */ -i.red.icon { - color: @red !important; -} -i.inverted.red.icon { - color: @lightRed !important; -} -i.inverted.bordered.red.icon, -i.inverted.circular.red.icon { - background-color: @red !important; - color: @white !important; -} - -/* Orange */ -i.orange.icon { - color: @orange !important; -} -i.inverted.orange.icon { - color: @lightOrange !important; -} -i.inverted.bordered.orange.icon, -i.inverted.circular.orange.icon { - background-color: @orange !important; - color: @white !important; -} - -/* Yellow */ -i.yellow.icon { - color: @yellow !important; -} -i.inverted.yellow.icon { - color: @lightYellow !important; -} -i.inverted.bordered.yellow.icon, -i.inverted.circular.yellow.icon { - background-color: @yellow !important; - color: @white !important; -} +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + + i.@{color}.icon { + color: @c; + } + i.inverted.@{color}.icon { + color: @l; + } + i.inverted.bordered.@{color}.icon, + i.inverted.circular.@{color}.icon { + background-color: @c; + color: @white; + } +}) -/* Olive */ -i.olive.icon { - color: @olive !important; -} -i.inverted.olive.icon { - color: @lightOlive !important; -} -i.inverted.bordered.olive.icon, -i.inverted.circular.olive.icon { - background-color: @olive !important; - color: @white !important; -} - -/* Green */ -i.green.icon { - color: @green !important; -} -i.inverted.green.icon { - color: @lightGreen !important; -} -i.inverted.bordered.green.icon, -i.inverted.circular.green.icon { - background-color: @green !important; - color: @white !important; -} - -/* Teal */ -i.teal.icon { - color: @teal !important; -} -i.inverted.teal.icon { - color: @lightTeal !important; -} -i.inverted.bordered.teal.icon, -i.inverted.circular.teal.icon { - background-color: @teal !important; - color: @white !important; -} - -/* Blue */ -i.blue.icon { - color: @blue !important; -} -i.inverted.blue.icon { - color: @lightBlue !important; -} -i.inverted.bordered.blue.icon, -i.inverted.circular.blue.icon { - background-color: @blue !important; - color: @white !important; -} - -/* Violet */ -i.violet.icon { - color: @violet !important; -} -i.inverted.violet.icon { - color: @lightViolet !important; -} -i.inverted.bordered.violet.icon, -i.inverted.circular.violet.icon { - background-color: @violet !important; - color: @white !important; -} - -/* Purple */ -i.purple.icon { - color: @purple !important; -} -i.inverted.purple.icon { - color: @lightPurple !important; -} -i.inverted.bordered.purple.icon, -i.inverted.circular.purple.icon { - background-color: @purple !important; - color: @white !important; -} - -/* Pink */ -i.pink.icon { - color: @pink !important; -} -i.inverted.pink.icon { - color: @lightPink !important; -} -i.inverted.bordered.pink.icon, -i.inverted.circular.pink.icon { - background-color: @pink !important; - color: @white !important; -} - -/* Brown */ -i.brown.icon { - color: @brown !important; -} -i.inverted.brown.icon { - color: @lightBrown !important; -} -i.inverted.bordered.brown.icon, -i.inverted.circular.brown.icon { - background-color: @brown !important; - color: @white !important; -} - -/* Grey */ -i.grey.icon { - color: @grey !important; -} -i.inverted.grey.icon { - color: @lightGrey !important; -} -i.inverted.bordered.grey.icon, -i.inverted.circular.grey.icon { - background-color: @grey !important; - color: @white !important; -} - -/* Black */ -i.black.icon { - color: @black !important; -} -i.inverted.black.icon { - color: @lightBlack !important; -} -i.inverted.bordered.black.icon, -i.inverted.circular.black.icon { - background-color: @black !important; - color: @white !important; -} /*------------------- Sizes @@ -509,7 +333,6 @@ i.icons .icon { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); - margin: 0em; margin: 0; } From 4bfa491cbfb216b97c0cf110fcf4c0197694ac4a Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:25:22 +0100 Subject: [PATCH 09/31] fix(header): removed 0 metrics --- src/definitions/elements/header.less | 35 +++++++++++++--------------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/src/definitions/elements/header.less b/src/definitions/elements/header.less index 6c549ca5b4..73a044f7e1 100755 --- a/src/definitions/elements/header.less +++ b/src/definitions/elements/header.less @@ -49,7 +49,7 @@ .ui.header .sub.header { display: block; font-weight: @normal; - padding: 0em; + padding: 0; margin: @subHeaderMargin; font-size: @subHeaderFontSize; line-height: @subHeaderLineHeight; @@ -71,7 +71,7 @@ /* With Text Node */ .ui.header .icon:only-child { display: inline-block; - padding: 0em; + padding: 0; margin-right: @iconMargin; } @@ -220,7 +220,7 @@ h5.ui.header .sub.header { ---------------*/ .ui.sub.header { - padding: 0em; + padding: 0; margin-bottom: @subHeadingDistance; font-weight: @subHeadingFontWeight; font-size: @subHeadingFontSize; @@ -247,12 +247,12 @@ h5.ui.header .sub.header { .ui.icon.header { display: inline-block; text-align: center; - margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin; + margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin; } .ui.icon.header:after { content: ''; display: block; - height: 0px; + height: 0; clear: both; visibility: hidden; } @@ -266,9 +266,9 @@ h5.ui.header .sub.header { width: auto; height: auto; line-height: 1; - padding: 0em; + padding: 0; font-size: @iconHeaderSize; - margin: 0em auto @iconHeaderMargin; + margin: 0 auto @iconHeaderMargin; opacity: @iconHeaderOpacity; } .ui.icon.header .corner.icon { @@ -276,7 +276,7 @@ h5.ui.header .sub.header { } .ui.icon.header .content { display: block; - padding: 0em; + padding: 0; } .ui.icon.header .circular.icon { font-size: @circularHeaderIconSize; @@ -285,7 +285,7 @@ h5.ui.header .sub.header { font-size: @squareHeaderIconSize; } .ui.block.icon.header .icon { - margin-bottom: 0em; + margin-bottom: 0; } .ui.icon.header.aligned { margin-left: auto; @@ -390,12 +390,12 @@ each(@colors, { .ui.floated.header, .ui[class*="left floated"].header { float: left; - margin-top: 0em; + margin-top: 0; margin-right: @floatedMargin; } .ui[class*="right floated"].header { float: right; - margin-top: 0em; + margin-top: 0; margin-left: @floatedMargin; } @@ -404,7 +404,7 @@ each(@colors, { --------------------*/ .ui.fitted.header { - padding: 0em; + padding: 0; } @@ -463,13 +463,10 @@ each(@colors, { .ui.attached.header { background: @attachedBackground; padding: @attachedVerticalPadding @attachedHorizontalPadding; - margin-top: 0em; - margin-bottom: 0em; - margin-left: @attachedOffset; - margin-right: @attachedOffset; + margin: 0 @attachedOffset 0 @attachedOffset; box-shadow: @attachedBoxShadow; border: @attachedBorder; - border-radius: 0em; + border-radius: 0; } .ui.attached.block.header { background: @blockBackground; @@ -478,10 +475,10 @@ each(@colors, { border-top: none; } .ui.top.attached.header { - border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em; + border-radius: @attachedBorderRadius @attachedBorderRadius 0 0; } .ui.bottom.attached.header { - border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; + border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius; } /* Attached Sizes */ From 48557bef0b23ed9ece0f0d99b1bc2623a602b3ef Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:30:11 +0100 Subject: [PATCH 10/31] fix(label): removed 0 metrics --- src/definitions/elements/label.less | 118 ++++++++++++++-------------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index 560c111af2..fdc1bfd9ef 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -43,10 +43,10 @@ } .ui.label:first-child { - margin-left: 0em; + margin-left: 0; } .ui.label:last-child { - margin-right: 0em; + margin-right: 0; } /* Link */ @@ -75,7 +75,7 @@ a.ui.label { /* Icon */ .ui.label > .icon { width: auto; - margin: 0em @iconDistance 0em 0em; + margin: 0 @iconDistance 0 0; } /* Detail */ @@ -87,7 +87,7 @@ a.ui.label { opacity: @detailOpacity; } .ui.label > .detail .icon { - margin: 0em @detailIconDistance 0em 0em; + margin: 0 @detailIconDistance 0 0; } @@ -95,7 +95,7 @@ a.ui.label { .ui.label > .close.icon, .ui.label > .delete.icon { cursor: pointer; - margin-right: 0em; + margin-right: 0; margin-left: @deleteMargin; font-size: @deleteSize; opacity: @deleteOpacity; @@ -110,7 +110,7 @@ a.ui.label { --------------------*/ .ui.labels > .label { - margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em; + margin: 0 @groupHorizontalMargin @groupVerticalMargin 0; } @@ -145,7 +145,7 @@ a.ui.label { margin-top: @attachedSegmentPadding !important; } .ui.bottom.attached.label:first-child ~ :last-child:not(.attached) { - margin-top: 0em; + margin-top: 0; margin-bottom: @attachedSegmentPadding !important; } @@ -156,8 +156,8 @@ a.ui.label { .ui.image.label { width: auto !important; - margin-top: 0em; - margin-bottom: 0em; + margin-top: 0; + margin-bottom: 0; max-width: 9999px; vertical-align: baseline; text-transform: none; @@ -181,7 +181,7 @@ a.ui.label { background: @imageLabelDetailBackground; margin: @imageLabelDetailMargin; padding: @imageLabelDetailPadding; - border-radius: 0em @imageLabelBorderRadius @imageLabelBorderRadius 0em; + border-radius: 0 @imageLabelBorderRadius @imageLabelBorderRadius 0; } /*------------------- @@ -195,7 +195,7 @@ a.ui.label { padding-left: @tagHorizontalPadding; padding-right: @tagHorizontalPadding; - border-radius: 0em @borderRadius @borderRadius 0em; + border-radius: 0 @borderRadius @borderRadius 0; transition: @tagTransition; } .ui.tag.labels .label:before, @@ -249,10 +249,10 @@ a.ui.label { .ui.corner.label { position: absolute; - top: 0em; - right: 0em; - margin: 0em; - padding: 0em; + top: 0; + right: 0; + margin: 0; + padding: 0; text-align: center; border-color: @backgroundColor; @@ -270,18 +270,18 @@ a.ui.label { .ui.corner.label:after { position: absolute; content: ""; - right: 0em; - top: 0em; + right: 0; + top: 0; z-index: -1; - width: 0em; - height: 0em; + width: 0; + height: 0; background-color: transparent; - border-top: 0em solid transparent; + border-top: 0 solid transparent; border-right: @cornerTriangleSize solid transparent; border-bottom: @cornerTriangleSize solid transparent; - border-left: 0em solid transparent; + border-left: 0 solid transparent; border-right-color: inherit; transition: @cornerTriangleTransition; @@ -293,20 +293,20 @@ a.ui.label { top: @cornerIconTopOffset; left: @cornerIconLeftOffset; font-size: @cornerIconSize; - margin: 0em; + margin: 0; } /* Left Corner */ .ui.left.corner.label, .ui.left.corner.label:after { right: auto; - left: 0em; + left: 0; } .ui.left.corner.label:after { border-top: @cornerTriangleSize solid transparent; border-right: @cornerTriangleSize solid transparent; - border-bottom: 0em solid transparent; - border-left: 0em solid transparent; + border-bottom: 0 solid transparent; + border-left: 0 solid transparent; border-top-color: inherit; } @@ -330,9 +330,9 @@ a.ui.label { .ui.ribbon.label { position: relative; - margin: 0em; + margin: 0; min-width: max-content; - border-radius: 0em @borderRadius @borderRadius 0em; + border-radius: 0 @borderRadius @borderRadius 0; border-color: @ribbonShadowColor; } @@ -345,12 +345,12 @@ a.ui.label { background-color: transparent; border-style: solid; - border-width: 0em @ribbonTriangleSize @ribbonTriangleSize 0em; + border-width: 0 @ribbonTriangleSize @ribbonTriangleSize 0; border-color: transparent; border-right-color: inherit; - width: 0em; - height: 0em; + width: 0; + height: 0; } /* Positioning */ .ui.ribbon.label { @@ -369,14 +369,14 @@ a.ui.label { .ui[class*="right ribbon"].label { text-align: left; transform: translateX(-100%); - border-radius: @borderRadius 0em 0em @borderRadius; + border-radius: @borderRadius 0 0 @borderRadius; } .ui[class*="right ribbon"].label:after { left: auto; right: 0%; border-style: solid; - border-width: @ribbonTriangleSize @ribbonTriangleSize 0em 0em; + border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0; border-color: transparent; border-top-color: inherit; } @@ -415,45 +415,45 @@ a.ui.label { .ui.attached.label { width: 100%; position: absolute; - margin: 0em; - top: 0em; - left: 0em; + margin: 0; + top: 0; + left: 0; padding: @attachedVerticalPadding @attachedHorizontalPadding; - border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0em 0em; + border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0 0; } .ui[class*="bottom attached"].label { top: auto; - bottom: 0em; - border-radius: 0em 0em @attachedCornerBorderRadius @attachedCornerBorderRadius; + bottom: 0; + border-radius: 0 0 @attachedCornerBorderRadius @attachedCornerBorderRadius; } .ui[class*="top left attached"].label { width: auto; - margin-top: 0em !important; - border-radius: @attachedCornerBorderRadius 0em @attachedBorderRadius 0em; + margin-top: 0 !important; + border-radius: @attachedCornerBorderRadius 0 @attachedBorderRadius 0; } .ui[class*="top right attached"].label { width: auto; left: auto; - right: 0em; - border-radius: 0em @attachedCornerBorderRadius 0em @attachedBorderRadius; + right: 0; + border-radius: 0 @attachedCornerBorderRadius 0 @attachedBorderRadius; } .ui[class*="bottom left attached"].label { width: auto; top: auto; - bottom: 0em; - border-radius: 0em @attachedBorderRadius 0em @attachedCornerBorderRadius; + bottom: 0; + border-radius: 0 @attachedBorderRadius 0 @attachedCornerBorderRadius; } .ui[class*="bottom right attached"].label { top: auto; - bottom: 0em; + bottom: 0; left: auto; - right: 0em; + right: 0; width: auto; - border-radius: @attachedBorderRadius 0em @attachedCornerBorderRadius 0em; + border-radius: @attachedBorderRadius 0 @attachedCornerBorderRadius 0; } @@ -722,7 +722,7 @@ each(@colors,{ .ui.horizontal.labels .label, .ui.horizontal.label { - margin: 0em @horizontalLabelMargin 0em 0em; + margin: 0 @horizontalLabelMargin 0 0; padding: @horizontalLabelVerticalPadding @horizontalPadding; min-width: @horizontalLabelMinWidth; @@ -747,8 +747,8 @@ each(@colors,{ } .ui.empty.circular.labels .label, .ui.empty.circular.label { - min-width: 0em; - min-height: 0em; + min-width: 0; + min-height: 0; overflow: hidden; width: @emptyCircleSize; height: @emptyCircleSize; @@ -794,7 +794,7 @@ each(@colors,{ } .ui.pointing.label:before, .ui[class*="pointing above"].label:before { - border-width: @borderWidth 0px 0px @borderWidth; + border-width: @borderWidth 0 0 @borderWidth; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 0%; left: 50%; @@ -802,12 +802,12 @@ each(@colors,{ /*--- Below ---*/ .ui[class*="bottom pointing"].label, .ui[class*="pointing below"].label { - margin-top: 0em; + margin-top: 0; margin-bottom: @pointingVerticalDistance; } .ui[class*="bottom pointing"].label:before, .ui[class*="pointing below"].label:before { - border-width: 0px @borderWidth @borderWidth 0px; + border-width: 0 @borderWidth @borderWidth 0; top: auto; right: auto; transform: translateX(-50%) translateY(-50%) rotate(45deg); @@ -816,24 +816,24 @@ each(@colors,{ } /*--- Left ---*/ .ui[class*="left pointing"].label { - margin-top: 0em; + margin-top: 0; margin-left: @pointingHorizontalDistance; } .ui[class*="left pointing"].label:before { - border-width: 0px 0px @borderWidth @borderWidth; + border-width: 0 0 @borderWidth @borderWidth; transform: translateX(-50%) translateY(-50%) rotate(45deg); bottom: auto; right: auto; top: 50%; - left: 0em; + left: 0; } /*--- Right ---*/ .ui[class*="right pointing"].label { - margin-top: 0em; + margin-top: 0; margin-right: @pointingHorizontalDistance; } .ui[class*="right pointing"].label:before { - border-width: @borderWidth @borderWidth 0px 0px; + border-width: @borderWidth @borderWidth 0 0; transform: translateX(50%) translateY(-50%) rotate(45deg); top: 50%; right: 0%; @@ -876,7 +876,7 @@ each(@colors,{ z-index: @floatingZIndex; top: @floatingTopOffset; left: 100%; - margin: 0em 0em 0em @floatingLeftOffset !important; + margin: 0 0 0 @floatingLeftOffset !important; } /*------------------- From d40e55439a29f114206b9f683119bd277ea8f3f3 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:31:49 +0100 Subject: [PATCH 11/31] fix(progress): removed 0 metrics --- src/definitions/modules/progress.less | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less index da90e3ffb0..478aecc6d9 100755 --- a/src/definitions/modules/progress.less +++ b/src/definitions/modules/progress.less @@ -237,10 +237,10 @@ opacity: 0; position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; + top: 0; + left: 0; + right: 0; + bottom: 0; background: @activePulseColor; border-radius: @barBorderRadius; @@ -313,28 +313,28 @@ background: @attachedBackground; position: relative; border: none; - margin: 0em; + margin: 0; } .ui.progress.attached, .ui.progress.attached .bar { display: block; height: @attachedHeight; - padding: 0px; + padding: 0; overflow: hidden; - border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; + border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius; } .ui.progress.attached .bar { - border-radius: 0em; + border-radius: 0; } /* top attached */ .ui.progress.top.attached, .ui.progress.top.attached .bar { - top: 0px; - border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em; + top: 0; + border-radius: @attachedBorderRadius @attachedBorderRadius 0 0; } .ui.progress.top.attached .bar { - border-radius: 0em; + border-radius: 0; } /* Coupling */ From 490cb9be57b9f51d2eae41d08482a817abd3f508 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:36:50 +0100 Subject: [PATCH 12/31] fix(segment): removed 0 metrics --- src/definitions/elements/segment.less | 118 +++++++++++++------------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 18f66e3caf..d5bc2e62e0 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -32,21 +32,21 @@ } .ui.segment:first-child { - margin-top: 0em; + margin-top: 0; } .ui.segment:last-child { - margin-bottom: 0em; + margin-bottom: 0; } /* Vertical */ .ui.vertical.segment { - margin: 0em; - padding-left: 0em; - padding-right: 0em; + margin: 0; + padding-left: 0; + padding-right: 0; background: none transparent; - border-radius: 0px; + border-radius: 0; box-shadow: none; border: none; border-bottom: @borderWidth solid @borderColor; @@ -67,20 +67,20 @@ /* Label */ .ui[class*="bottom attached"].segment > [class*="top attached"].label { - border-top-left-radius: 0em; - border-top-right-radius: 0em; + border-top-left-radius: 0; + border-top-right-radius: 0; } .ui[class*="top attached"].segment > [class*="bottom attached"].label { - border-bottom-left-radius: 0em; - border-bottom-right-radius: 0em; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { - border-top-left-radius: 0em; - border-top-right-radius: 0em; + border-top-left-radius: 0; + border-top-right-radius: 0; } .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { - border-bottom-left-radius: 0em; - border-bottom-right-radius: 0em; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } /* Grid */ @@ -164,7 +164,7 @@ margin: @placeholderContentInlineButtonMargin; } .ui.placeholder.segment > .inline > .button:last-child { - margin-right: 0px; + margin-right: 0; } @@ -174,15 +174,15 @@ .ui.piled.segments, .ui.piled.segment { - margin: @piledMargin 0em; + margin: @piledMargin 0; box-shadow: @piledBoxShadow; z-index: @piledZIndex; } .ui.piled.segment:first-child { - margin-top: 0em; + margin-top: 0; } .ui.piled.segment:last-child { - margin-bottom: 0em; + margin-bottom: 0; } .ui.piled.segments:after, .ui.piled.segments:before, @@ -193,7 +193,7 @@ content: ''; display: block; height: 100%; - left: 0px; + left: 0; position: absolute; width: 100%; border: @piledBorder; @@ -215,17 +215,17 @@ /* Piled Attached */ .ui[class*="top attached"].piled.segment { margin-top: @piledMargin; - margin-bottom: 0em; + margin-bottom: 0; } .ui.piled.segment[class*="top attached"]:first-child { - margin-top: 0em; + margin-top: 0; } .ui.piled.segment[class*="bottom attached"] { - margin-top: 0em; + margin-top: 0; margin-bottom: @piledMargin; } .ui.piled.segment[class*="bottom attached"]:last-child { - margin-bottom: 0em; + margin-bottom: 0; } /*------------------- @@ -260,7 +260,7 @@ .ui.tall.stacked.segments:before, .ui.tall.stacked.segment:before { display: block; - bottom: 0px; + bottom: 0; } /* Inverted */ @@ -287,8 +287,8 @@ /* Padded vertical */ .ui.padded.segment.vertical.segment, .ui[class*="very padded"].vertical.segment { - padding-left: 0px; - padding-right: 0px; + padding-left: 0; + padding-right: 0; } /*------------------- @@ -345,18 +345,18 @@ border-radius: @groupedBorderRadius; } .ui.segments:first-child { - margin-top: 0em; + margin-top: 0; } .ui.segments:last-child { - margin-bottom: 0em; + margin-bottom: 0; } /* Nested Segment */ .ui.segments > .segment { - top: 0px; - bottom: 0px; - border-radius: 0px; + top: 0; + bottom: 0; + border-radius: 0; margin: @groupedSegmentMargin; width: @groupedSegmentWidth; box-shadow: @groupedSegmentBoxShadow; @@ -366,21 +366,21 @@ .ui.segments:not(.horizontal) > .segment:first-child { top: @attachedTopOffset; - bottom: 0px; + bottom: 0; border-top: none; - margin-top: 0em; - margin-bottom: 0em; - border-radius: @borderRadius @borderRadius 0em 0em; + margin-top: 0; + margin-bottom: 0; + border-radius: @borderRadius @borderRadius 0 0; } /* Bottom */ .ui.segments:not(.horizontal) > .segment:last-child { top: @attachedBottomOffset; - bottom: 0px; - margin-top: 0em; - margin-bottom: 0em; + bottom: 0; + margin-top: 0; + margin-bottom: 0; box-shadow: @attachedBottomBoxShadow; - border-radius: 0em 0em @borderRadius @borderRadius; + border-radius: 0 0 @borderRadius @borderRadius; } /* Only */ @@ -398,7 +398,7 @@ border-top: none; } .ui.segments > .segment + .segments:not(.horizontal) { - margin-top: 0em; + margin-top: 0; } /* Horizontal Group */ @@ -406,7 +406,7 @@ display: flex; flex-direction: row; background-color: transparent; - padding: 0em; + padding: 0; box-shadow: @boxShadow; margin: @margin; border-radius: @borderRadius; @@ -415,9 +415,9 @@ /* Nested Horizontal Group */ .ui.segments > .horizontal.segments { - margin: 0em; + margin: 0; background-color: transparent; - border-radius: 0px; + border-radius: 0; border: none; box-shadow: none; border-top: @groupedSegmentDivider; @@ -426,11 +426,11 @@ /* Horizontal Segment */ .ui.horizontal.segments > .segment { flex: 1 1 auto; - -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */ - margin: 0em; - min-width: 0px; + -ms-flex: 1 1 0; /* Solves #2550 MS Flex */ + margin: 0; + min-width: 0; background-color: transparent; - border-radius: 0px; + border-radius: 0; border: none; box-shadow: none; border-left: @borderWidth solid @borderColor; @@ -500,7 +500,7 @@ border-style: solid; border-width: @loaderLineWidth; - box-shadow: 0px 0px 0px 1px transparent; + box-shadow: 0 0 0 1px transparent; visibility: visible; z-index: @loaderLineZIndex; } @@ -648,10 +648,10 @@ each(@colors,{ /* Middle */ .ui.attached.segment { - top: 0px; - bottom: 0px; - border-radius: 0px; - margin: 0em @attachedHorizontalOffset; + top: 0; + bottom: 0; + border-radius: 0; + margin: 0 @attachedHorizontalOffset; width: @attachedWidth; max-width: @attachedWidth; box-shadow: @attachedBoxShadow; @@ -663,24 +663,24 @@ each(@colors,{ /* Top */ .ui[class*="top attached"].segment { - bottom: 0px; - margin-bottom: 0em; + bottom: 0; + margin-bottom: 0; top: @attachedTopOffset; margin-top: @verticalMargin; - border-radius: @borderRadius @borderRadius 0em 0em; + border-radius: @borderRadius @borderRadius 0 0; } .ui.segment[class*="top attached"]:first-child { - margin-top: 0em; + margin-top: 0; } /* Bottom */ .ui.segment[class*="bottom attached"] { - bottom: 0px; - margin-top: 0em; + bottom: 0; + margin-top: 0; top: @attachedBottomOffset; margin-bottom: @verticalMargin; box-shadow: @attachedBottomBoxShadow; - border-radius: 0em 0em @borderRadius @borderRadius; + border-radius: 0 0 @borderRadius @borderRadius; } .ui.segment[class*="bottom attached"]:last-child { margin-bottom: @verticalMargin; From 5557a16be1fd6595a56c0a358a923fe00d1c7bc6 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:47:14 +0100 Subject: [PATCH 13/31] feat(colors,card): card dynamic color creation and removed 0 metrics --- src/definitions/views/card.less | 319 ++---------------------- src/themes/default/views/card.variables | 34 +-- 2 files changed, 39 insertions(+), 314 deletions(-) diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less index 68d864700a..258bba4467 100755 --- a/src/definitions/views/card.less +++ b/src/definitions/views/card.less @@ -519,305 +519,30 @@ a.ui.card:hover, Colors --------------------*/ -/* Primary */ -.ui.primary.cards > .card, -.ui.cards > .primary.card, -.ui.primary.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @primaryColor, - @shadowBoxShadow +each(@colors,{ + @color: replace(@key,'@',''); + @c: @colors[@@color][color]; + @h: @colors[@@color][hover]; + + .ui.@{color}.cards > .card, + .ui.cards > .@{color}.card, + .ui.@{color}.card { + box-shadow: + @borderShadow, + 0 @coloredShadowDistance 0 0 @c, + @shadowBoxShadow ; -} -.ui.primary.cards > .card:hover, -.ui.cards > .primary.card:hover, -.ui.primary.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @primaryColorHover, - @shadowHoverBoxShadow - ; -} - -/* Secondary */ -.ui.secondary.cards > .card, -.ui.cards > .secondary.card, -.ui.secondary.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @secondaryColor, - @shadowBoxShadow - ; -} -.ui.secondary.cards > .card:hover, -.ui.cards > .secondary.card:hover, -.ui.secondary.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @secondaryColorHover, - @shadowHoverBoxShadow - ; -} - -/* Red */ -.ui.red.cards > .card, -.ui.cards > .red.card, -.ui.red.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @red, - @shadowBoxShadow - ; -} -.ui.red.cards > .card:hover, -.ui.cards > .red.card:hover, -.ui.red.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @redHover, - @shadowHoverBoxShadow - ; -} - -/* Orange */ -.ui.orange.cards > .card, -.ui.cards > .orange.card, -.ui.orange.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @orange, - @shadowBoxShadow - ; -} -.ui.orange.cards > .card:hover, -.ui.cards > .orange.card:hover, -.ui.orange.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @orangeHover, - @shadowHoverBoxShadow - ; -} - -/* Yellow */ -.ui.yellow.cards > .card, -.ui.cards > .yellow.card, -.ui.yellow.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @yellow, - @shadowBoxShadow - ; -} -.ui.yellow.cards > .card:hover, -.ui.cards > .yellow.card:hover, -.ui.yellow.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @yellowHover, - @shadowHoverBoxShadow - ; -} - -/* Olive */ -.ui.olive.cards > .card, -.ui.cards > .olive.card, -.ui.olive.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @olive, - @shadowBoxShadow - ; -} -.ui.olive.cards > .card:hover, -.ui.cards > .olive.card:hover, -.ui.olive.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @oliveHover, - @shadowHoverBoxShadow - ; -} - -/* Green */ -.ui.green.cards > .card, -.ui.cards > .green.card, -.ui.green.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @green, - @shadowBoxShadow - ; -} -.ui.green.cards > .card:hover, -.ui.cards > .green.card:hover, -.ui.green.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @greenHover, - @shadowHoverBoxShadow - ; -} - -/* Teal */ -.ui.teal.cards > .card, -.ui.cards > .teal.card, -.ui.teal.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @teal, - @shadowBoxShadow - ; -} -.ui.teal.cards > .card:hover, -.ui.cards > .teal.card:hover, -.ui.teal.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @tealHover, - @shadowHoverBoxShadow - ; -} - -/* Blue */ -.ui.blue.cards > .card, -.ui.cards > .blue.card, -.ui.blue.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @blue, - @shadowBoxShadow - ; -} -.ui.blue.cards > .card:hover, -.ui.cards > .blue.card:hover, -.ui.blue.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @blueHover, - @shadowHoverBoxShadow - ; -} - -/* Violet */ -.ui.violet.cards > .card, -.ui.cards > .violet.card, -.ui.violet.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @violet, - @shadowBoxShadow - ; -} -.ui.violet.cards > .card:hover, -.ui.cards > .violet.card:hover, -.ui.violet.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @violetHover, - @shadowHoverBoxShadow - ; -} - -/* Purple */ -.ui.purple.cards > .card, -.ui.cards > .purple.card, -.ui.purple.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @purple, - @shadowBoxShadow - ; -} -.ui.purple.cards > .card:hover, -.ui.cards > .purple.card:hover, -.ui.purple.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @purpleHover, - @shadowHoverBoxShadow - ; -} - -/* Pink */ -.ui.pink.cards > .card, -.ui.cards > .pink.card, -.ui.pink.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @pink, - @shadowBoxShadow - ; -} -.ui.pink.cards > .card:hover, -.ui.cards > .pink.card:hover, -.ui.pink.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @pinkHover, - @shadowHoverBoxShadow - ; -} - -/* Brown */ -.ui.brown.cards > .card, -.ui.cards > .brown.card, -.ui.brown.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @brown, - @shadowBoxShadow - ; -} -.ui.brown.cards > .card:hover, -.ui.cards > .brown.card:hover, -.ui.brown.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @brownHover, - @shadowHoverBoxShadow - ; -} - -/* Grey */ -.ui.grey.cards > .card, -.ui.cards > .grey.card, -.ui.grey.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @grey, - @shadowBoxShadow - ; -} -.ui.grey.cards > .card:hover, -.ui.cards > .grey.card:hover, -.ui.grey.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @greyHover, - @shadowHoverBoxShadow - ; -} - -/* Black */ -.ui.black.cards > .card, -.ui.cards > .black.card, -.ui.black.card { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @black, - @shadowBoxShadow - ; -} -.ui.black.cards > .card:hover, -.ui.cards > .black.card:hover, -.ui.black.card:hover { - box-shadow: - @borderShadow, - 0px @coloredShadowDistance 0px 0px @blackHover, - @shadowHoverBoxShadow + } + .ui.@{color}.cards > .card:hover, + .ui.cards > .@{color}.card:hover, + .ui.@{color}.card:hover { + box-shadow: + @borderShadow, + 0 @coloredShadowDistance 0 0 @h, + @shadowHoverBoxShadow ; -} + } +}) /*-------------- Card Count diff --git a/src/themes/default/views/card.variables b/src/themes/default/views/card.variables index 3aeba864bb..57bae6cd0e 100644 --- a/src/themes/default/views/card.variables +++ b/src/themes/default/views/card.variables @@ -8,19 +8,19 @@ /* Shadow */ @shadowDistance: 1px; -@shadowBoxShadow: 0px @shadowDistance 3px 0px @solidBorderColor; +@shadowBoxShadow: 0 @shadowDistance 3px 0 @solidBorderColor; /* Card */ @fontFamily: @pageFont; @display: flex; @background: @white; @borderRadius: @defaultBorderRadius; -@margin: 1em 0em; -@minHeight: 0px; -@padding: 0em; +@margin: 1em 0; +@minHeight: 0; +@padding: 0; @width: 290px; @borderWidth: 1px; -@borderShadow: 0px 0px 0px @borderWidth @solidBorderColor; +@borderShadow: 0 0 0 @borderWidth @solidBorderColor; @boxShadow: @shadowBoxShadow, @borderShadow @@ -53,18 +53,18 @@ /* Image */ @imageBackground: @transparentBlack; -@imagePadding: 0em; +@imagePadding: 0; @imageBorder: none; @imageBoxShadow: none; @imageBorder: none; /* Content */ @contentDivider: @borderWidth solid @internalBorderColor; -@contentMargin: 0em; +@contentMargin: 0; @contentBackground: none; @contentPadding: 1em 1em; @contentFontSize: 1em; -@contentBorderRadius: 0em; +@contentBorderRadius: 0; @contentBoxShadow: none; @contentBorder: none; @@ -127,9 +127,9 @@ @extraBackground: none; @extraPosition: static; @extraWidth: auto; -@extraTop: 0em; -@extraLeft: 0em; -@extraMargin: 0em 0em; +@extraTop: 0; +@extraLeft: 0; +@extraMargin: 0 0; @extraPadding: 0.75em 1em; @extraBoxShadow: none; @extraColor: @lightTextColor; @@ -140,7 +140,7 @@ @extraLinkHoverColor: @linkHoverColor; /* Buttons */ -@buttonMargin: 0px -@borderWidth; +@buttonMargin: 0 -@borderWidth; @buttonWidth: e(%("calc(100%% + %d)", @borderWidth * 2)); /*------------------- @@ -154,7 +154,7 @@ @linkHoverRaiseDistance: 3px; @linkHoverTransform: translateY(-@linkHoverRaiseDistance); -@shadowHoverBoxShadow: 0px @shadowDistance @linkHoverRaiseDistance 0px @solidSelectedBorderColor; +@shadowHoverBoxShadow: 0 @shadowDistance @linkHoverRaiseDistance 0 @solidSelectedBorderColor; @linkHoverBoxShadow: @shadowHoverBoxShadow, @borderShadow @@ -180,7 +180,7 @@ @cardSpacing: 0.75em; @smallCardSpacing: 0.5em; -@oneCardSpacing: 0em; +@oneCardSpacing: 0; @twoCardSpacing: @wideCardSpacing; @threeCardSpacing: @wideCardSpacing; @fourCardSpacing: @cardSpacing; @@ -192,7 +192,7 @@ @tenCardSpacing: @smallCardSpacing; @oneCard: @oneColumn; -@oneCardOffset: 0em; +@oneCardOffset: 0; @twoCard: e(%("calc(%d - %d)", @twoColumn, @twoCardSpacing * 2)); @twoCardOffset: -@twoCardSpacing; @threeCard: e(%("calc(%d - %d)", @threeColumn, @threeCardSpacing * 2)); @@ -236,6 +236,6 @@ @invertedExtraDivider: 1px solid rgba(255, 255, 255, 0.15); @invertedLinkHoverBackground: @black; @invertedBoxShadow: - 0px @shadowDistance 3px 0px @solidWhiteBorderColor, - 0px 0px 0px @borderWidth @solidWhiteBorderColor + 0 @shadowDistance 3px 0 @solidWhiteBorderColor, + 0 0 0 @borderWidth @solidWhiteBorderColor ; From 3ad66d23cac492cdaf9d850d0669937cb198623a Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:51:02 +0100 Subject: [PATCH 14/31] fix(header): removed 0 metrics --- src/themes/default/elements/header.variables | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/themes/default/elements/header.variables b/src/themes/default/elements/header.variables index 7933ecd63e..6c02c526a8 100644 --- a/src/themes/default/elements/header.variables +++ b/src/themes/default/elements/header.variables @@ -14,12 +14,12 @@ @topMargin: @headerTopMargin; @bottomMargin: @headerBottomMargin; -@margin: @topMargin 0em @bottomMargin; +@margin: @topMargin 0 @bottomMargin; @firstMargin: -@lineHeightOffset; -@lastMargin: 0em; -@horizontalPadding: 0em; -@verticalPadding: 0em; +@lastMargin: 0; +@horizontalPadding: 0; +@verticalPadding: 0; /* Sub Heading */ @subHeadingDistance: @2px; @@ -33,14 +33,14 @@ @hugeSubHeadingSize: @relativeMedium; /* Sub Header */ -@subHeaderMargin: 0em; +@subHeaderMargin: 0; @subHeaderLineHeight: 1.2em; @subHeaderColor: @mutedTextColor; /* Icon */ @iconOpacity: 1; @iconSize: 1.5em; -@iconOffset: 0em; +@iconOffset: 0; @iconMargin: 0.75rem; @iconAlignment: middle; @@ -62,7 +62,7 @@ @contentImageAlignment: middle; /* Paragraph after Header */ -@nextParagraphDistance: 0em; +@nextParagraphDistance: 0; /*------------------- Variations @@ -99,7 +99,7 @@ /* No Line Height Offset */ @iconHeaderTopMargin: 2rem; @iconHeaderBottomMargin: @bottomMargin; -@iconHeaderFirstMargin: 0em; +@iconHeaderFirstMargin: 0; /* Divided */ @dividedBorderWidth: 1px; @@ -108,7 +108,7 @@ @dividedBorderPadding: @3px; @dividedSubHeaderPadding: @3px; -@dividedIconPadding: 0em; +@dividedIconPadding: 0; /* Block */ @blockBackground: @darkWhite; From aab87b68a953e75f06c21c02a3d24eededa97972 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:51:49 +0100 Subject: [PATCH 15/31] fix(progress): removed 0 metrics --- src/themes/default/modules/progress.variables | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/themes/default/modules/progress.variables b/src/themes/default/modules/progress.variables index cb71dcb286..8caf2bb627 100644 --- a/src/themes/default/modules/progress.variables +++ b/src/themes/default/modules/progress.variables @@ -7,14 +7,14 @@ --------------------*/ @verticalSpacing: 1em; -@margin: @verticalSpacing 0em (@labelHeight + @verticalSpacing); -@firstMargin: 0em 0em (@labelHeight + @verticalSpacing); -@lastMargin: 0em 0em (@labelHeight); +@margin: @verticalSpacing 0 (@labelHeight + @verticalSpacing); +@firstMargin: 0 0 (@labelHeight + @verticalSpacing); +@lastMargin: 0 0 (@labelHeight); @background: @strongTransparentBlack; @border: none; @boxShadow: none; -@padding: 0em; +@padding: 0; @borderRadius: @defaultBorderRadius; /* Bar */ From eb55fc26d6c02533aca622aa32e6fd976a9d7c99 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:52:41 +0100 Subject: [PATCH 16/31] fix(label): removed 0 metrics --- src/themes/default/elements/label.variables | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables index f8638c297c..c360149c60 100644 --- a/src/themes/default/elements/label.variables +++ b/src/themes/default/elements/label.variables @@ -7,7 +7,7 @@ --------------------*/ @verticalAlign: baseline; -@verticalMargin: 0em; +@verticalMargin: 0; @horizontalMargin: @relative2px; @backgroundColor: #E8E8E8; @color: @mutedTextColor; @@ -18,7 +18,7 @@ @textTransform: none; @fontWeight: @bold; @borderWidth: 1px; -@border: 0px solid transparent; +@border: 0 solid transparent; @lineHeightOffset: -(@verticalPadding / 2); @@ -71,7 +71,7 @@ @imageLabelPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding @imageLabelVerticalPadding @imageLabelTextDistance; @imageLabelImageMargin: -@verticalPadding @imageLabelTextDistance -@verticalPadding -@imageLabelTextDistance; -@imageLabelImageBorderRadius: @imageLabelBorderRadius 0em 0em @imageLabelBorderRadius; +@imageLabelImageBorderRadius: @imageLabelBorderRadius 0 0 @imageLabelBorderRadius; @imageLabelImageHeight: @imageHeight; @imageLabelDetailBackground: @strongTransparentBlack; From f7150be15917642d2e6aa41dff7a259db281b215 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:53:32 +0100 Subject: [PATCH 17/31] fix(segment): removed 0 metrics --- src/themes/default/elements/segment.variables | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables index 3cff4052c0..569c6e0c6d 100644 --- a/src/themes/default/elements/segment.variables +++ b/src/themes/default/elements/segment.variables @@ -16,7 +16,7 @@ @padding: @verticalPadding @horizontalPadding; @verticalMargin: 1rem; -@horizontalMargin: 0em; +@horizontalMargin: 0; @margin: @verticalMargin @horizontalMargin; @borderRadius: @defaultBorderRadius; @@ -33,7 +33,7 @@ @groupedSegmentBorder: none; @groupedSegmentDivider: @border; -@groupedSegmentMargin: 0em; +@groupedSegmentMargin: 0; @groupedSegmentWidth: auto; @groupedSegmentBoxShadow: none; @@ -52,10 +52,10 @@ @placeholderBackground: @offWhite; @placeholderPadding: @padding; @placeholderBorderColor: @borderColor; -@placeholderBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset; +@placeholderBoxShadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset; @placeholderMinHeight: 18rem; @placeholderContentMaxWidth: 15rem; -@placeholderContentInlineButtonMargin: 0px @5px 0px 0px; +@placeholderContentInlineButtonMargin: 0 @5px 0 0; /* Piled */ @@ -100,8 +100,8 @@ @veryPaddedSegmentPadding: 3em; /* Attached */ -@attachedTopOffset: 0px; -@attachedBottomOffset: 0px; +@attachedTopOffset: 0; +@attachedBottomOffset: 0; @attachedHorizontalOffset: -@borderWidth; @attachedWidth: e(%("calc(100%% + %d)", -@attachedHorizontalOffset * 2)); @attachedBoxShadow: none; @@ -121,7 +121,7 @@ @basicBackground: none transparent; @basicBorder: none; @basicBoxShadow: none; -@basicBorderRadius: 0px; +@basicBorderRadius: 0; /* Colors */ @coloredBorderSize: 2px; From d5b7a893ecfb479dac5ee415725e971e354a0bef Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 13:55:06 +0100 Subject: [PATCH 18/31] fix(icon): removed 0 metrics --- src/themes/default/elements/icon.variables | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/themes/default/elements/icon.variables b/src/themes/default/elements/icon.variables index daffd92379..1284763172 100644 --- a/src/themes/default/elements/icon.variables +++ b/src/themes/default/elements/icon.variables @@ -61,13 +61,13 @@ @loadingDuration: 2s; @circularSize: 2em; -@circularPadding: 0.5em 0em; -@circularShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; +@circularPadding: 0.5em 0; +@circularShadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset; @borderedSize: 2em; @borderedVerticalPadding: ((@borderedSize - @height) / 2); -@borderedHorizontalPadding: 0em; -@borderedShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; +@borderedHorizontalPadding: 0; +@borderedShadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset; @cornerIconSize: 0.45em; @cornerIconStroke: 1px; From 09fc617e12bf50d91889c41e3eeb2a73275b8704 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 14:04:51 +0100 Subject: [PATCH 19/31] feat(colors,statistic): statistic dynamic color creation and removed 0 metrics --- src/definitions/views/statistic.less | 172 ++++--------------- src/themes/default/views/statistic.variables | 14 +- 2 files changed, 41 insertions(+), 145 deletions(-) diff --git a/src/definitions/views/statistic.less b/src/definitions/views/statistic.less index 94b4c5e519..fda839d246 100755 --- a/src/definitions/views/statistic.less +++ b/src/definitions/views/statistic.less @@ -30,14 +30,14 @@ } .ui.statistic + .ui.statistic { - margin: 0em 0em 0em @horizontalSpacing; + margin: 0 0 0 @horizontalSpacing; } .ui.statistic:first-child { - margin-top: 0em; + margin-top: 0; } .ui.statistic:last-child { - margin-bottom: 0em; + margin-bottom: 0; } @@ -68,14 +68,14 @@ .ui.statistics:after { display: block; content: ' '; - height: 0px; + height: 0; clear: both; overflow: hidden; visibility: hidden; } .ui.statistics:first-child { - margin-top: 0em; + margin-top: 0; } @@ -139,7 +139,7 @@ .ui.statistic > .value .icon { opacity: 1; width: auto; - margin: 0em; + margin: 0; } /*-------------- @@ -273,7 +273,7 @@ } .ui.horizontal.statistics { flex-direction: column; - margin: 0em; + margin: 0; max-width: none; } .ui.horizontal.statistics .statistic { @@ -285,7 +285,7 @@ .ui.horizontal.statistic > .text.value, .ui.horizontal.statistics > .statistic > .text.value { - min-height: 0em !important; + min-height: 0 !important; } .ui.horizontal.statistics .statistic > .value .icon, .ui.horizontal.statistic > .value .icon { @@ -301,72 +301,7 @@ .ui.horizontal.statistic > .label { display: inline-block; vertical-align: middle; - margin: 0em 0em 0em @horizontalLabelDistance; -} - -/*-------------- - Colors ----------------*/ - -.ui.red.statistics .statistic > .value, -.ui.statistics .red.statistic > .value, -.ui.red.statistic > .value { - color: @red; -} -.ui.orange.statistics .statistic > .value, -.ui.statistics .orange.statistic > .value, -.ui.orange.statistic > .value { - color: @orange; -} -.ui.yellow.statistics .statistic > .value, -.ui.statistics .yellow.statistic > .value, -.ui.yellow.statistic > .value { - color: @yellow; -} -.ui.olive.statistics .statistic > .value, -.ui.statistics .olive.statistic > .value, -.ui.olive.statistic > .value { - color: @olive; -} -.ui.green.statistics .statistic > .value, -.ui.statistics .green.statistic > .value, -.ui.green.statistic > .value { - color: @green; -} -.ui.teal.statistics .statistic > .value, -.ui.statistics .teal.statistic > .value, -.ui.teal.statistic > .value { - color: @teal; -} -.ui.blue.statistics .statistic > .value, -.ui.statistics .blue.statistic > .value, -.ui.blue.statistic > .value { - color: @blue; -} -.ui.violet.statistics .statistic > .value, -.ui.statistics .violet.statistic > .value, -.ui.violet.statistic > .value { - color: @violet; -} -.ui.purple.statistics .statistic > .value, -.ui.statistics .purple.statistic > .value, -.ui.purple.statistic > .value { - color: @purple; -} -.ui.pink.statistics .statistic > .value, -.ui.statistics .pink.statistic > .value, -.ui.pink.statistic > .value { - color: @pink; -} -.ui.brown.statistics .statistic > .value, -.ui.statistics .brown.statistic > .value, -.ui.brown.statistic > .value { - color: @brown; -} -.ui.grey.statistics .statistic > .value, -.ui.statistics .grey.statistic > .value, -.ui.grey.statistic > .value { - color: @grey; + margin: 0 0 0 @horizontalLabelDistance; } /*-------------- @@ -382,66 +317,27 @@ color: @invertedLabelColor; } -.ui.inverted.red.statistics .statistic > .value, -.ui.statistics .inverted.red.statistic > .value, -.ui.inverted.red.statistic > .value { - color: @lightRed; -} -.ui.inverted.orange.statistics .statistic > .value, -.ui.statistics .inverted.orange.statistic > .value, -.ui.inverted.orange.statistic > .value { - color: @lightOrange; -} -.ui.inverted.yellow.statistics .statistic > .value, -.ui.statistics .inverted.yellow.statistic > .value, -.ui.inverted.yellow.statistic > .value { - color: @lightYellow; -} -.ui.inverted.olive.statistics .statistic > .value, -.ui.statistics .inverted.olive.statistic > .value, -.ui.inverted.olive.statistic > .value { - color: @lightOlive; -} -.ui.inverted.green.statistics .statistic > .value, -.ui.statistics .inverted.green.statistic > .value, -.ui.inverted.green.statistic > .value { - color: @lightGreen; -} -.ui.inverted.teal.statistics .statistic > .value, -.ui.statistics .inverted.teal.statistic > .value, -.ui.inverted.teal.statistic > .value { - color: @lightTeal; -} -.ui.inverted.blue.statistics .statistic > .value, -.ui.statistics .inverted.blue.statistic > .value, -.ui.inverted.blue.statistic > .value { - color: @lightBlue; -} -.ui.inverted.violet.statistics .statistic > .value, -.ui.statistics .inverted.violet.statistic > .value, -.ui.inverted.violet.statistic > .value { - color: @lightViolet; -} -.ui.inverted.purple.statistics .statistic > .value, -.ui.statistics .inverted.purple.statistic > .value, -.ui.inverted.purple.statistic > .value { - color: @lightPurple; -} -.ui.inverted.pink.statistics .statistic > .value, -.ui.statistics .inverted.pink.statistic > .value, -.ui.inverted.pink.statistic > .value { - color: @lightPink; -} -.ui.inverted.brown.statistics .statistic > .value, -.ui.statistics .inverted.brown.statistic > .value, -.ui.inverted.brown.statistic > .value { - color: @lightBrown; -} -.ui.inverted.grey.statistics .statistic > .value, -.ui.statistics .inverted.grey.statistic > .value, -.ui.inverted.grey.statistic > .value { - color: @lightGrey; -} +/*-------------- + Colors +---------------*/ +---------------*/ + +each(@colors,{ + @color: replace(@key,'@',''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + + .ui.@{color}.statistics .statistic > .value, + .ui.statistics .@{color}.statistic > .value, + .ui.@{color}.statistic > .value { + color: @c; + } + .ui.inverted.@{color}.statistics .statistic > .value, + .ui.statistics .inverted.@{color}.statistic > .value, + .ui.inverted.@{color}.statistic > .value { + color: @l; + } +}) /*-------------- Floated @@ -456,7 +352,7 @@ margin: @rightFloatedMargin; } .ui.floated.statistic:last-child { - margin-bottom: 0em; + margin-bottom: 0; } /*-------------- @@ -466,12 +362,12 @@ @media only screen and (max-width: @largestMobileScreen) { .ui.stackable.statistics { width: auto; - margin-left: 0em !important; - margin-right: 0em !important; + margin-left: 0 !important; + margin-right: 0 !important; } .ui.stackable.statistics > .statistic { width: 100% !important; - margin: 0em 0em !important; + margin: 0 0 !important; padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important; } } diff --git a/src/themes/default/views/statistic.variables b/src/themes/default/views/statistic.variables index 01bdc99bac..e69058b771 100644 --- a/src/themes/default/views/statistic.variables +++ b/src/themes/default/views/statistic.variables @@ -7,7 +7,7 @@ --------------------*/ @verticalMargin: 1em; -@margin: @verticalMargin 0em; +@margin: @verticalMargin 0; @textAlign: center; @maxWidth: auto; @@ -17,7 +17,7 @@ @groupMargin: @verticalMargin -@horizontalSpacing -@rowSpacing; /* Group Element */ -@elementMargin: 0em @horizontalSpacing @rowSpacing; +@elementMargin: 0 @horizontalSpacing @rowSpacing; @elementMaxWidth: @maxWidth; /*------------------- @@ -54,7 +54,7 @@ Types --------------------*/ -@horizontalGroupElementMargin: 1em 0em; +@horizontalGroupElementMargin: 1em 0; @horizontalLabelDistance: 0.75em; /*------------------- @@ -62,16 +62,16 @@ --------------------*/ /* Floated */ -@leftFloatedMargin: 0em 2em 1em 0em; -@rightFloatedMargin: 0em 0em 1em 2em; +@leftFloatedMargin: 0 2em 1em 0; +@rightFloatedMargin: 0 0 1em 2em; /* Inverted */ @invertedValueColor: @white; @invertedLabelColor: @invertedTextColor; /* Item Width */ -@itemGroupMargin: 0em 0em -@rowSpacing; -@itemMargin: 0em 0em @rowSpacing; +@itemGroupMargin: 0 0 -@rowSpacing; +@itemMargin: 0 0 @rowSpacing; /* Stackable */ @stackableRowSpacing: 2rem; From 4821cd999303870bab160b9b6881288005e39a16 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 29 Nov 2018 14:17:06 +0100 Subject: [PATCH 20/31] fix(colors, statistic): removed wrongly copied comment --- src/definitions/views/statistic.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/definitions/views/statistic.less b/src/definitions/views/statistic.less index fda839d246..a95e489192 100755 --- a/src/definitions/views/statistic.less +++ b/src/definitions/views/statistic.less @@ -320,7 +320,6 @@ /*-------------- Colors ---------------*/ ----------------*/ each(@colors,{ @color: replace(@key,'@',''); From 626683108763532a9771159845a17c83f631c3fb Mon Sep 17 00:00:00 2001 From: lubber-de Date: Mon, 17 Dec 2018 08:32:48 +0100 Subject: [PATCH 21/31] feat(colors,grid): grid dynamic color creation and removed unnecessary !important --- src/definitions/collections/grid.less | 102 +++----------------------- 1 file changed, 11 insertions(+), 91 deletions(-) diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index b8c30c33cb..fd1db17467 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -1278,97 +1278,17 @@ Colored -----------------------*/ -/* Red */ -.ui.grid > .red.row, -.ui.grid > .red.column, -.ui.grid > .row > .red.column { - background-color: @red !important; - color: @white; -} -/* Orange */ -.ui.grid > .orange.row, -.ui.grid > .orange.column, -.ui.grid > .row > .orange.column { - background-color: @orange !important; - color: @white; -} -/* Yellow */ -.ui.grid > .yellow.row, -.ui.grid > .yellow.column, -.ui.grid > .row > .yellow.column { - background-color: @yellow !important; - color: @white; -} -/* Olive */ -.ui.grid > .olive.row, -.ui.grid > .olive.column, -.ui.grid > .row > .olive.column { - background-color: @olive !important; - color: @white; -} -/* Green */ -.ui.grid > .green.row, -.ui.grid > .green.column, -.ui.grid > .row > .green.column { - background-color: @green !important; - color: @white; -} -/* Teal */ -.ui.grid > .teal.row, -.ui.grid > .teal.column, -.ui.grid > .row > .teal.column { - background-color: @teal !important; - color: @white; -} -/* Blue */ -.ui.grid > .blue.row, -.ui.grid > .blue.column, -.ui.grid > .row > .blue.column { - background-color: @blue !important; - color: @white; -} -/* Violet */ -.ui.grid > .violet.row, -.ui.grid > .violet.column, -.ui.grid > .row > .violet.column { - background-color: @violet !important; - color: @white; -} -/* Purple */ -.ui.grid > .purple.row, -.ui.grid > .purple.column, -.ui.grid > .row > .purple.column { - background-color: @purple !important; - color: @white; -} -/* Pink */ -.ui.grid > .pink.row, -.ui.grid > .pink.column, -.ui.grid > .row > .pink.column { - background-color: @pink !important; - color: @white; -} -/* Brown */ -.ui.grid > .brown.row, -.ui.grid > .brown.column, -.ui.grid > .row > .brown.column { - background-color: @brown !important; - color: @white; -} -/* Grey */ -.ui.grid > .grey.row, -.ui.grid > .grey.column, -.ui.grid > .row > .grey.column { - background-color: @grey !important; - color: @white; -} -/* Black */ -.ui.grid > .black.row, -.ui.grid > .black.column, -.ui.grid > .row > .black.column { - background-color: @black !important; - color: @white; -} +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + + .ui.grid > .@{color}.row, + .ui.grid > .@{color}.column, + .ui.grid > .row > .@{color}.column { + background-color: @c; + color: @white; + } +}) /*---------------------- From 68cbe73fbe1bb20e6295bfe009f4cf86daaee848 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Mon, 17 Dec 2018 21:48:07 +0100 Subject: [PATCH 22/31] feat(colors,rating): rating dynamic color creation --- src/definitions/modules/rating.less | 46 +++++++++++------------------ 1 file changed, 17 insertions(+), 29 deletions(-) diff --git a/src/definitions/modules/rating.less b/src/definitions/modules/rating.less index 4915f014a1..d594c8a4cf 100755 --- a/src/definitions/modules/rating.less +++ b/src/definitions/modules/rating.less @@ -79,42 +79,30 @@ Colors -------------- */ -.ratingColor(@color; @lightColor;) { - @_ratingActiveShadow: "@{color}"; - @_ratingActive: "@{lightColor}"; - @_ratingSelectedShadow: "@{color}Hover"; - @_ratingSelected: "@{lightColor}Hover"; +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + @h: @colors[@@color][hover]; + @lh: @colors[@@color][lightHover]; + .ui.@{color}.rating .active.icon { - color: @@_ratingActive; - text-shadow: 0px -@shadowWidth 0px @@_ratingActiveShadow, - -@shadowWidth 0px 0px @@_ratingActiveShadow, - 0px @shadowWidth 0px @@_ratingActiveShadow, - @shadowWidth 0px 0px @@_ratingActiveShadow; + color: @l; + text-shadow: 0px -@shadowWidth 0px @c, + -@shadowWidth 0px 0px @c, + 0px @shadowWidth 0px @c, + @shadowWidth 0px 0px @c; } .ui.@{color}.rating .icon.selected, .ui.@{color}.rating .icon.selected.active { - color: @@_ratingSelected; - text-shadow: 0px -@shadowWidth 0px @@_ratingSelectedShadow, - -@shadowWidth 0px 0px @@_ratingSelectedShadow, - 0px @shadowWidth 0px @@_ratingSelectedShadow, - @shadowWidth 0px 0px @@_ratingSelectedShadow; + color: @lh; + text-shadow: 0px -@shadowWidth 0px @h, + -@shadowWidth 0px 0px @h, + 0px @shadowWidth 0px @h, + @shadowWidth 0px 0px @h; } } -.ratingColor(~'red',~'lightRed'); -.ratingColor(~'orange',~'lightOrange'); -.ratingColor(~'yellow',~'lightYellow'); -.ratingColor(~'olive',~'lightOlive'); -.ratingColor(~'green',~'lightGreen'); -.ratingColor(~'teal',~'lightTeal'); -.ratingColor(~'blue',~'lightBlue'); -.ratingColor(~'violet',~'lightViolet'); -.ratingColor(~'purple',~'lightPurple'); -.ratingColor(~'pink',~'lightPink'); -.ratingColor(~'brown',~'lightBrown'); -.ratingColor(~'grey',~'lightGrey'); -.ratingColor(~'black',~'lightBlack'); - /******************************* States From 8093acf0f6979c51c11f0dc4b54b90c85b9bbf2c Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 20 Dec 2018 09:45:46 +0100 Subject: [PATCH 23/31] feat(colors,rating): Missing closing parenthesis --- src/definitions/modules/rating.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/definitions/modules/rating.less b/src/definitions/modules/rating.less index d1b8cf45b1..08e6f4b431 100755 --- a/src/definitions/modules/rating.less +++ b/src/definitions/modules/rating.less @@ -101,7 +101,7 @@ each(@colors, { 0px @shadowWidth 0px @h, @shadowWidth 0px 0px @h; } -} +}) /******************************* From 5d3bae0981c9bc69471bbb009f27f9559c9e2fb8 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 20 Dec 2018 12:43:34 +0100 Subject: [PATCH 24/31] feat(colors,table): table dynamic color creation, added support for coloring cells and removed unneeded !important --- src/definitions/collections/table.less | 230 ++++++++-------------- src/themes/default/globals/site.variables | 3 + 2 files changed, 85 insertions(+), 148 deletions(-) diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index a4bd10be13..1b96185a25 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -310,8 +310,8 @@ .ui.table tr.positive, .ui.table td.positive { box-shadow: @positiveBoxShadow; - background: @positiveBackgroundColor !important; - color: @positiveColor !important; + background: @positiveBackgroundColor; + color: @positiveColor; } /*-------------- @@ -321,8 +321,8 @@ .ui.table tr.negative, .ui.table td.negative { box-shadow: @negativeBoxShadow; - background: @negativeBackgroundColor !important; - color: @negativeColor !important; + background: @negativeBackgroundColor; + color: @negativeColor; } /*-------------- @@ -332,8 +332,8 @@ .ui.table tr.error, .ui.table td.error { box-shadow: @errorBoxShadow; - background: @errorBackgroundColor !important; - color: @errorColor !important; + background: @errorBackgroundColor; + color: @errorColor; } /*-------------- @@ -343,8 +343,8 @@ .ui.table tr.warning, .ui.table td.warning { box-shadow: @warningBoxShadow; - background: @warningBackgroundColor !important; - color: @warningColor !important; + background: @warningBackgroundColor; + color: @warningColor; } /*-------------- @@ -354,8 +354,8 @@ .ui.table tr.active, .ui.table td.active { box-shadow: @activeBoxShadow; - background: @activeBackgroundColor !important; - color: @activeColor !important; + background: @activeBackgroundColor; + color: @activeColor; } @@ -369,7 +369,7 @@ .ui.table tr.disabled:hover, .ui.table tr:hover td.disabled { pointer-events: none; - color: @disabledTextColor !important; + color: @disabledTextColor; } /******************************* @@ -484,13 +484,13 @@ .ui.selectable.table tbody tr:hover, .ui.table tbody tr td.selectable:hover { - background: @selectableBackground !important; - color: @selectableTextColor !important; + background: @selectableBackground; + color: @selectableTextColor; } .ui.selectable.inverted.table tbody tr:hover, .ui.inverted.table tbody tr td.selectable:hover { - background: @selectableInvertedBackground !important; - color: @selectableInvertedTextColor !important; + background: @selectableInvertedBackground; + color: @selectableInvertedTextColor; } /* Selectable Cell Link */ @@ -507,32 +507,32 @@ .ui.selectable.table tr.error:hover, .ui.table tr td.selectable.error:hover, .ui.selectable.table tr:hover td.error { - background: @errorBackgroundHover !important; - color: @errorColorHover !important; + background: @errorBackgroundHover; + color: @errorColorHover; } .ui.selectable.table tr.warning:hover, .ui.table tr td.selectable.warning:hover, .ui.selectable.table tr:hover td.warning { - background: @warningBackgroundHover !important; - color: @warningColorHover !important; + background: @warningBackgroundHover; + color: @warningColorHover; } .ui.selectable.table tr.active:hover, .ui.table tr td.selectable.active:hover, .ui.selectable.table tr:hover td.active { - background: @activeBackgroundColor !important; - color: @activeColor !important; + background: @activeBackgroundColor; + color: @activeColor; } .ui.selectable.table tr.positive:hover, .ui.table tr td.selectable.positive:hover, .ui.selectable.table tr:hover td.positive { - background: @positiveBackgroundHover !important; - color: @positiveColorHover !important; + background: @positiveBackgroundHover; + color: @positiveColorHover; } .ui.selectable.table tr.negative:hover, .ui.table tr td.selectable.negative:hover, .ui.selectable.table tr:hover td.negative { - background: @negativeBackgroundHover !important; - color: @negativeColorHover !important; + background: @negativeBackgroundHover; + color: @negativeColorHover; } @@ -599,8 +599,8 @@ /* Allow striped active hover */ .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover { - background: @activeBackgroundHover !important; - color: @activeColorHover !important; + background: @activeBackgroundHover; + color: @activeColorHover; } /*-------------- @@ -616,123 +616,57 @@ Colors --------------------*/ -/* Red */ -.ui.red.table { - border-top: @coloredBorderSize solid @red; -} -.ui.inverted.red.table { - background-color: @red !important; - color: @white !important; -} - -/* Orange */ -.ui.orange.table { - border-top: @coloredBorderSize solid @orange; -} -.ui.inverted.orange.table { - background-color: @orange !important; - color: @white !important; -} - -/* Yellow */ -.ui.yellow.table { - border-top: @coloredBorderSize solid @yellow; -} -.ui.inverted.yellow.table { - background-color: @yellow !important; - color: @white !important; -} - -/* Olive */ -.ui.olive.table { - border-top: @coloredBorderSize solid @olive; -} -.ui.inverted.olive.table { - background-color: @olive !important; - color: @white !important; -} - -/* Green */ -.ui.green.table { - border-top: @coloredBorderSize solid @green; -} -.ui.inverted.green.table { - background-color: @green !important; - color: @white !important; -} - -/* Teal */ -.ui.teal.table { - border-top: @coloredBorderSize solid @teal; -} -.ui.inverted.teal.table { - background-color: @teal !important; - color: @white !important; -} - -/* Blue */ -.ui.blue.table { - border-top: @coloredBorderSize solid @blue; -} -.ui.inverted.blue.table { - background-color: @blue !important; - color: @white !important; -} - -/* Violet */ -.ui.violet.table { - border-top: @coloredBorderSize solid @violet; -} -.ui.inverted.violet.table { - background-color: @violet !important; - color: @white !important; -} - -/* Purple */ -.ui.purple.table { - border-top: @coloredBorderSize solid @purple; -} -.ui.inverted.purple.table { - background-color: @purple !important; - color: @white !important; -} - -/* Pink */ -.ui.pink.table { - border-top: @coloredBorderSize solid @pink; -} -.ui.inverted.pink.table { - background-color: @pink !important; - color: @white !important; -} - -/* Brown */ -.ui.brown.table { - border-top: @coloredBorderSize solid @brown; -} -.ui.inverted.brown.table { - background-color: @brown !important; - color: @white !important; -} - -/* Grey */ -.ui.grey.table { - border-top: @coloredBorderSize solid @grey; -} -.ui.inverted.grey.table { - background-color: @grey !important; - color: @white !important; -} - -/* Black */ -.ui.black.table { - border-top: @coloredBorderSize solid @black; -} -.ui.inverted.black.table { - background-color: @black !important; - color: @white !important; -} - +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @t: @colors[@@color][text]; + @ht: @colors[@@color][hoverText]; + @l: @colors[@@color][light]; + @lh: @colors[@@color][lightHover]; + @r: @colors[@@color][ribbon]; + @isDark: @colors[@@color][isDark]; + @isVeryDark: @colors[@@color][isVeryDark]; + + .ui.@{color}.table { + border-top: @coloredBorderSize solid @c; + } + .ui.inverted.@{color}.table { + background-color: @c; + color: @white; + } + .ui.table tr.@{color}, + .ui.table td.@{color} { + box-shadow: @stateMarkerWidth 0 0 @r inset; + & when (@isDark) { + background: @l; + } + & when not (@isDark) { + background: screen(@l,@blendingBaseColor); + } + & when (@isVeryDark) { + color: @white; + } + & when not (@isVeryDark) { + color: @t; + } + } + .ui.selectable.table tr.@{color}:hover, + .ui.table tr td.selectable.@{color}:hover, + .ui.selectable.table tr:hover td.@{color} { + & when (@isDark) { + background: @lh; + } + & when not (@isDark) { + background: screen(@lh,@blendingBaseColor); + } + & when (@isVeryDark) { + color: @white; + } + & when not (@isVeryDark) { + color: @ht; + } + } +}) /*-------------- Column Count @@ -943,11 +877,11 @@ } .ui.inverted.table th { background-color: @invertedHeaderBackground; - border-color: @invertedHeaderBorderColor !important; - color: @invertedHeaderColor !important; + border-color: @invertedHeaderBorderColor; + color: @invertedHeaderColor; } .ui.inverted.table tr td { - border-color: @invertedCellBorderColor !important; + border-color: @invertedCellBorderColor; } .ui.inverted.table tr.disabled td, @@ -1000,7 +934,7 @@ background: @basicTableCellBackground; } .ui.basic.striped.table tbody tr:nth-child(2n) { - background-color: @basicTableStripedBackground !important; + background-color: @basicTableStripedBackground; } /* Very Basic */ diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 5953587c58..c41bf44b65 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -57,6 +57,9 @@ @lightPrimaryColor : @lightBlue; @lightSecondaryColor : @lightBlack; +/* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ +@blendingBaseColor: #cccccc; + /*-------------- Page Heading ---------------*/ From c639924c9c5af75f56c603e49b6c595c24dbab3c Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 20 Dec 2018 13:18:20 +0100 Subject: [PATCH 25/31] feat(colors,slider): slider dynamic color creation --- src/definitions/modules/slider.less | 64 ++++++----------------------- 1 file changed, 13 insertions(+), 51 deletions(-) diff --git a/src/definitions/modules/slider.less b/src/definitions/modules/slider.less index e4e82e2c4f..aaa34a0da9 100644 --- a/src/definitions/modules/slider.less +++ b/src/definitions/modules/slider.less @@ -254,78 +254,40 @@ Colors ---------------*/ -.addColor(@color, @lightColor, @hoverColor, @lightHoverColor) { - @_color: "@{color}"; - @_lightColor: "@{lightColor}"; - @_hoverColor: "@{hoverColor}"; - @_lightHoverColor: "@{lightHoverColor}"; +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + @h: @colors[@@color][hover]; + @lh: @colors[@@color][lightHover]; /* Standard */ .ui.@{color}.slider .inner .track-fill { - background-color: @@_color; + background-color: @c; } .ui.@{color}.inverted.slider .inner .track-fill { - background-color: @@_lightColor; + background-color: @l; } /* Basic */ .ui.@{color}.slider.basic .inner .thumb { - background-color: @@_color; + background-color: @c; } .ui.@{color}.slider.basic .inner .thumb:hover, .ui.@{color}.slider.basic:focus .inner .thumb { - background-color: @@_hoverColor; + background-color: @h; } /* Basic Inverted */ .ui.@{color}.inverted.slider.basic .inner .thumb { - background-color: @@_lightColor; + background-color: @l; } .ui.@{color}.inverted.slider.basic .inner .thumb:hover, .ui.@{color}.inverted.slider.basic:focus .inner .thumb { - background-color: @@_lightHoverColor; + background-color: @lh; } -} - -/*--- Red ---*/ -.addColor(~"red", ~"lightRed", ~"redHover", ~"lightRedHover"); - -/*--- Orange ---*/ -.addColor(~"orange", ~"lightOrange", ~"orangeHover", ~"lightOrangeHover"); - -/*--- Yellow ---*/ -.addColor(~"yellow", ~"lightYellow", ~"yellowHover", ~"lightYellowHover"); - -/*--- Olive ---*/ -.addColor(~"olive", ~"lightOlive", ~"oliveHover", ~"lightOliveHover"); - -/*--- Green ---*/ -.addColor(~"green", ~"lightGreen", ~"greenHover", ~"lightGreenHover"); - -/*--- Teal ---*/ -.addColor(~"teal", ~"lightTeal", ~"tealHover", ~"lightTealHover"); - -/*--- Blue ---*/ -.addColor(~"blue", ~"lightBlue", ~"blueHover", ~"lightBlueHover"); - -/*--- Violet ---*/ -.addColor(~"violet", ~"lightViolet", ~"violetHover", ~"lightVioletHover"); - -/*--- Purple ---*/ -.addColor(~"purple", ~"lightPurple", ~"purpleHover", ~"lightPurpleHover"); - -/*--- Pink ---*/ -.addColor(~"pink", ~"lightPink", ~"pinkHover", ~"lightPinkHover"); - -/*--- Brown ---*/ -.addColor(~"brown", ~"lightBrown", ~"brownHover", ~"lightBrownHover"); - -/*--- Grey ---*/ -.addColor(~"grey", ~"lightGrey", ~"greyHover", ~"lightGreyHover"); - -/*--- Black ---*/ -.addColor(~"black", ~"lightBlack", ~"blackHover", ~"lightBlackHover"); +}) /*-------------- Basic From 477c9e36bace4fcfd7d2df2e4d09c9492b9af401 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 20 Dec 2018 13:33:32 +0100 Subject: [PATCH 26/31] feat(colors,loader): loader dynamic color creation --- src/definitions/elements/loader.less | 29 +++++++--------------------- 1 file changed, 7 insertions(+), 22 deletions(-) diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less index a582001336..87ef713eef 100755 --- a/src/definitions/elements/loader.less +++ b/src/definitions/elements/loader.less @@ -293,10 +293,10 @@ Colors --------------------*/ -.loaderColor(@colorRaw; @lightColor;) { - @color: replace(@colorRaw,'Color',''); - @_loaderColor: "@{colorRaw}"; - @_loaderInvertedColor: "@{lightColor}"; +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; .ui.@{color}.elastic.loader.loader:before, .ui.@{color}.elastic.loading.loading.loading:not(.segment):before, @@ -305,7 +305,7 @@ .ui.@{color}.loading.loading.loading.loading .input > i.icon:after, .ui.@{color}.loading.loading.loading.loading > i.icon:after, .ui.@{color}.loader.loader.loader:after { - color: @@_loaderColor; + color: @c; } .ui.inverted.@{color}.elastic.loader:before, .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):before, @@ -315,24 +315,9 @@ .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after, .ui.inverted.@{color}.loader.loader.loader:after { - color: @@_loaderInvertedColor; + color: @l; } -} -.loaderColor(~'primaryColor',~'lightPrimaryColor'); -.loaderColor(~'secondaryColor',~'lightSecondaryColor'); -.loaderColor(~'red',~'lightRed'); -.loaderColor(~'orange',~'lightOrange'); -.loaderColor(~'yellow',~'lightYellow'); -.loaderColor(~'olive',~'lightOlive'); -.loaderColor(~'green',~'lightGreen'); -.loaderColor(~'teal',~'lightTeal'); -.loaderColor(~'blue',~'lightBlue'); -.loaderColor(~'violet',~'lightViolet'); -.loaderColor(~'purple',~'lightPurple'); -.loaderColor(~'pink',~'lightPink'); -.loaderColor(~'brown',~'lightBrown'); -.loaderColor(~'grey',~'lightGrey'); -.loaderColor(~'black',~'lightBlack'); +}) .ui.elastic.loader.loader:before, .ui.elastic.loading.loading.loading:before, From 64772700f32ec8ae73da511f292452e63fe9f19b Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 20 Dec 2018 15:27:38 +0100 Subject: [PATCH 27/31] feat(colors,menu): menu dynamic color creation and removed unneeded !important --- src/definitions/collections/menu.less | 277 ++++---------------------- 1 file changed, 34 insertions(+), 243 deletions(-) diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index b4b37c3f17..ddea2a5f8d 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -1142,7 +1142,7 @@ Floated Menu / Item .ui.inverted.text.menu .item, .ui.inverted.text.menu .item:hover, .ui.inverted.text.menu .active.item { - background-color: transparent !important; + background-color: transparent; } /* Fluid */ @@ -1278,68 +1278,16 @@ Floated Menu / Item Colors ---------------*/ -/*--- Standard Colors ---*/ -.ui.menu .red.active.item, -.ui.red.menu .active.item { - border-color: @red !important; - color: @red !important; -} -.ui.menu .orange.active.item, -.ui.orange.menu .active.item { - border-color: @orange !important; - color: @orange !important; -} -.ui.menu .yellow.active.item, -.ui.yellow.menu .active.item { - border-color: @yellow !important; - color: @yellow !important; -} -.ui.menu .olive.active.item, -.ui.olive.menu .active.item { - border-color: @olive !important; - color: @olive !important; -} -.ui.menu .green.active.item, -.ui.green.menu .active.item { - border-color: @green !important; - color: @green !important; -} -.ui.menu .teal.active.item, -.ui.teal.menu .active.item { - border-color: @teal !important; - color: @teal !important; -} -.ui.menu .blue.active.item, -.ui.blue.menu .active.item { - border-color: @blue !important; - color: @blue !important; -} -.ui.menu .violet.active.item, -.ui.violet.menu .active.item { - border-color: @violet !important; - color: @violet !important; -} -.ui.menu .purple.active.item, -.ui.purple.menu .active.item { - border-color: @purple !important; - color: @purple !important; -} -.ui.menu .pink.active.item, -.ui.pink.menu .active.item { - border-color: @pink !important; - color: @pink !important; -} -.ui.menu .brown.active.item, -.ui.brown.menu .active.item { - border-color: @brown !important; - color: @brown !important; -} -.ui.menu .grey.active.item, -.ui.grey.menu .active.item { - border-color: @grey !important; - color: @grey !important; -} +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + .ui.menu .@{color}.active.item, + .ui.@{color}.menu .active.item { + border-color: @c; + color: @c; + } +}) /*-------------- Inverted @@ -1419,7 +1367,7 @@ Floated Menu / Item color: @invertedSubMenuActiveColor; } .ui.inverted.pointing.menu .active.item:after { - background: @invertedArrowActiveColor !important; + background: @invertedArrowActiveColor; margin: 0 !important; box-shadow: none !important; border: none !important; @@ -1431,7 +1379,7 @@ Floated Menu / Item color: @invertedActiveHoverColor !important; } .ui.inverted.pointing.menu .active.item:hover:after { - background: @invertedArrowActiveHoverColor !important; + background: @invertedArrowActiveHoverColor; } @@ -1457,149 +1405,21 @@ Floated Menu / Item Inverted ---------------*/ -/* Red */ -.ui.inverted.menu .red.active.item, -.ui.inverted.red.menu { - background-color: @red; -} -.ui.inverted.red.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.red.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} - -/* Orange */ -.ui.inverted.menu .orange.active.item, -.ui.inverted.orange.menu { - background-color: @orange; -} -.ui.inverted.orange.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.orange.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} - -/* Yellow */ -.ui.inverted.menu .yellow.active.item, -.ui.inverted.yellow.menu { - background-color: @yellow; -} -.ui.inverted.yellow.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.yellow.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} - -/* Olive */ -.ui.inverted.menu .olive.active.item, -.ui.inverted.olive.menu { - background-color: @olive; -} -.ui.inverted.olive.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.olive.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} - -/* Green */ -.ui.inverted.menu .green.active.item, -.ui.inverted.green.menu { - background-color: @green; -} -.ui.inverted.green.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.green.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; -/* Teal */ -.ui.inverted.menu .teal.active.item, -.ui.inverted.teal.menu { - background-color: @teal; -} -.ui.inverted.teal.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.teal.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} - -/* Blue */ -.ui.inverted.menu .blue.active.item, -.ui.inverted.blue.menu { - background-color: @blue; -} -.ui.inverted.blue.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.blue.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} - -/* Violet */ -.ui.inverted.menu .violet.active.item, -.ui.inverted.violet.menu { - background-color: @violet; -} -.ui.inverted.violet.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.violet.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} - -/* Purple */ -.ui.inverted.menu .purple.active.item, -.ui.inverted.purple.menu { - background-color: @purple; -} -.ui.inverted.purple.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.purple.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} - -/* Pink */ -.ui.inverted.menu .pink.active.item, -.ui.inverted.pink.menu { - background-color: @pink; -} -.ui.inverted.pink.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.pink.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} - -/* Brown */ -.ui.inverted.menu .brown.active.item, -.ui.inverted.brown.menu { - background-color: @brown; -} -.ui.inverted.brown.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.brown.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} - -/* Grey */ -.ui.inverted.menu .grey.active.item, -.ui.inverted.grey.menu { - background-color: @grey; -} -.ui.inverted.grey.menu .item:before { - background-color: @invertedColoredDividerBackground; -} -.ui.inverted.grey.menu .active.item { - background-color: @invertedColoredActiveBackground !important; -} + .ui.inverted.menu .@{color}.active.item, + .ui.inverted.@{color}.menu { + background-color: @c; + } + .ui.inverted.@{color}.menu .item:before { + background-color: @invertedColoredDividerBackground; + } + .ui.inverted.@{color}.menu .active.item { + background-color: @invertedColoredActiveBackground; + } +}) /*-------------- @@ -1869,43 +1689,14 @@ Floated Menu / Item background-color: @arrowVerticalSubMenuColor; } -/* Inverted Colors */ -.ui.inverted.pointing.menu .red.active.item:after { - background-color: @red !important; -} -.ui.inverted.pointing.menu .orange.active.item:after { - background-color: @orange !important; -} -.ui.inverted.pointing.menu .yellow.active.item:after { - background-color: @yellow !important; -} -.ui.inverted.pointing.menu .olive.active.item:after { - background-color: @olive !important; -} -.ui.inverted.pointing.menu .green.active.item:after { - background-color: @green !important; -} -.ui.inverted.pointing.menu .teal.active.item:after { - background-color: @teal !important; -} -.ui.inverted.pointing.menu .blue.active.item:after { - background-color: @blue !important; -} -.ui.inverted.pointing.menu .violet.active.item:after { - background-color: @violet !important; -} -.ui.inverted.pointing.menu .purple.active.item:after { - background-color: @purple !important; -} -.ui.inverted.pointing.menu .pink.active.item:after { - background-color: @pink !important; -} -.ui.inverted.pointing.menu .brown.active.item:after { - background-color: @brown !important; -} -.ui.inverted.pointing.menu .grey.active.item:after { - background-color: @grey !important; -} +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + + .ui.inverted.pointing.menu .@{color}.active.item:after { + background-color: @c; + } +}) /*-------------- Attached From 7608ffd202115de25190dd4c2a55a0cb1241f660 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 20 Dec 2018 19:51:02 +0100 Subject: [PATCH 28/31] feat(colors,button): removed color related !important and fixed basic and tertiary accordingly --- src/definitions/elements/button.less | 243 ++++++++++++++------------- 1 file changed, 123 insertions(+), 120 deletions(-) diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index c1474f2e2c..8cc64bd465 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -83,8 +83,8 @@ .ui.button:focus { background-color: @focusBackgroundColor; color: @focusColor; - background-image: @focusBackgroundImage !important; - box-shadow: @focusBoxShadow !important; + background-image: @focusBackgroundImage; + box-shadow: @focusBoxShadow; } .ui.button:focus .icon { @@ -133,7 +133,7 @@ position: relative; cursor: default; text-shadow: none !important; - color: transparent !important; + color: transparent; opacity: @loadingOpacity; pointer-events: @loadingPointerEvents; transition: @loadingTransition; @@ -192,8 +192,8 @@ .ui.disabled.active.button { cursor: default; opacity: @disabledOpacity !important; - background-image: none !important; - box-shadow: none !important; + background-image: none; + box-shadow: none; pointer-events: none !important; } @@ -318,7 +318,7 @@ --------------------*/ .ui.inverted.button { - box-shadow: 0 0 0 @invertedBorderSize @white inset !important; + box-shadow: 0 0 0 @invertedBorderSize @white inset; background: transparent none; color: @white; text-shadow: none !important; @@ -343,7 +343,7 @@ /* Hover */ .ui.inverted.button:hover { background: @white; - box-shadow: 0 0 0 @invertedBorderSize @white inset !important; + box-shadow: 0 0 0 @invertedBorderSize @white inset; color: @hoverColor; } @@ -351,14 +351,14 @@ .ui.inverted.button:focus, .ui.inverted.button.active { background: @white; - box-shadow: 0 0 0 @invertedBorderSize @white inset !important; + box-shadow: 0 0 0 @invertedBorderSize @white inset; color: @focusColor; } /* Active Focus */ .ui.inverted.button.active:focus { background: @midWhite; - box-shadow: 0 0 0 @invertedBorderSize @midWhite inset !important; + box-shadow: 0 0 0 @invertedBorderSize @midWhite inset; color: @focusColor; } @@ -370,10 +370,10 @@ .ui.labeled.button:not(.icon) { display: inline-flex; flex-direction: row; - background: none !important; + background: none; padding: 0 !important; - border: none !important; - box-shadow: none !important; + border: none; + box-shadow: none; } .ui.labeled.button > .button { @@ -768,8 +768,8 @@ .ui.basic.buttons .button, .ui.basic.button { - background: @basicBackground !important; - color: @basicTextColor !important; + background: @basicBackground; + color: @basicTextColor; font-weight: @basicFontWeight; border-radius: @basicBorderRadius; text-transform: @basicTextTransform; @@ -787,27 +787,27 @@ .ui.basic.buttons .button:hover, .ui.basic.button:hover { - background: @basicHoverBackground !important; - color: @basicHoverTextColor !important; + background: @basicHoverBackground; + color: @basicHoverTextColor; box-shadow: @basicHoverBoxShadow; } .ui.basic.buttons .button:focus, .ui.basic.button:focus { - background: @basicFocusBackground !important; - color: @basicFocusTextColor !important; + background: @basicFocusBackground; + color: @basicFocusTextColor; box-shadow: @basicFocusBoxShadow; } .ui.basic.buttons .button:active, .ui.basic.button:active { - background: @basicDownBackground !important; - color: @basicDownTextColor !important; + background: @basicDownBackground; + color: @basicDownTextColor; box-shadow: @basicDownBoxShadow; } .ui.basic.buttons .active.button, .ui.basic.active.button { - background: @basicActiveBackground !important; - box-shadow: @basicActiveBoxShadow !important; - color: @basicActiveTextColor !important; + background: @basicActiveBackground; + box-shadow: @basicActiveBoxShadow; + color: @basicActiveTextColor; } .ui.basic.buttons .active.button:hover, .ui.basic.active.button:hover { @@ -822,31 +822,31 @@ box-shadow: @basicDownBoxShadow inset; } .ui.basic.buttons .active.button { - box-shadow: @basicActiveBoxShadow !important; + box-shadow: @basicActiveBoxShadow; } /* Standard Basic Inverted */ .ui.basic.inverted.buttons .button, .ui.basic.inverted.button { - background-color: transparent !important; - color: @offWhite !important; - box-shadow: @basicInvertedBoxShadow !important; + background-color: transparent; + color: @offWhite; + box-shadow: @basicInvertedBoxShadow; } .ui.basic.inverted.buttons .button:hover, .ui.basic.inverted.button:hover { - color: @white !important; - box-shadow: @basicInvertedHoverBoxShadow !important; + color: @white; + box-shadow: @basicInvertedHoverBoxShadow; } .ui.basic.inverted.buttons .button:focus, .ui.basic.inverted.button:focus { - color: @white !important; - box-shadow: @basicInvertedFocusBoxShadow !important; + color: @white; + box-shadow: @basicInvertedFocusBoxShadow; } .ui.basic.inverted.buttons .button:active, .ui.basic.inverted.button:active { - background-color: @transparentWhite !important; - color: @white !important; - box-shadow: @basicInvertedDownBoxShadow !important; + background-color: @transparentWhite; + color: @white; + box-shadow: @basicInvertedDownBoxShadow; } .ui.basic.inverted.buttons .active.button, .ui.basic.inverted.active.button { @@ -858,7 +858,7 @@ .ui.basic.inverted.buttons .active.button:hover, .ui.basic.inverted.active.button:hover { background-color: @strongTransparentWhite; - box-shadow: @basicInvertedHoverBoxShadow !important; + box-shadow: @basicInvertedHoverBoxShadow; } @@ -883,7 +883,7 @@ /* Overline Mixin */ .ui.tertiary.button { - box-shadow: none !important; + box-shadow: none; transition: color @defaultDuration @defaultEasing !important; border-radius: 0; margin: @@ -895,55 +895,55 @@ padding: @tertiaryLinePadding !important; & when (@tertiaryWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryLineColor !important; + box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryLineColor; } & when (@tertiaryWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryLineColor !important; + box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryLineColor; } - color: @tertiaryTextColor !important; - background: @tertiaryBackgroundColor !important; + color: @tertiaryTextColor; + background: @tertiaryBackgroundColor; } .ui.tertiary.button:hover { - box-shadow: none !important; + box-shadow: none; & when (@tertiaryHoverWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryHoverLineColor !important; + box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryHoverLineColor; } & when (@tertiaryHoverWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryHoverLineColor !important; + box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryHoverLineColor; } - color: @tertiaryHoverColor !important; - background: @tertiaryHoverBackgroundColor !important; + color: @tertiaryHoverColor; + background: @tertiaryHoverBackgroundColor; } .ui.tertiary.button:focus { & when (@tertiaryFocusWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryFocusLineColor !important; + box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryFocusLineColor; } & when (@tertiaryFocusWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryFocusLineColor !important; + box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryFocusLineColor; } - color: @tertiaryFocusColor !important; - background: @tertiaryFocusBackgroundColor !important; + color: @tertiaryFocusColor; + background: @tertiaryFocusBackgroundColor; } .ui.tertiary.button:active { - box-shadow: none !important; + box-shadow: none; & when (@tertiaryActiveWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryActiveLineColor !important; + box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryActiveLineColor; border-radius+: @borderRadius @borderRadius 0 0; } & when (@tertiaryActiveWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryActiveLineColor !important; + box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryActiveLineColor; border-radius+: 0 0 @borderRadius @borderRadius; } - color: @tertiaryActiveColor !important; - background: @tertiaryActiveBackgroundColor !important; + color: @tertiaryActiveColor; + background: @tertiaryActiveBackgroundColor; } /*-------------- @@ -1042,15 +1042,15 @@ .ui.toggle.buttons .active.button, .ui.buttons .button.toggle.active, .ui.button.toggle.active { - background-color: @positiveColor !important; - box-shadow: none !important; + background-color: @positiveColor; + box-shadow: none; text-shadow: @invertedTextShadow; - color: @invertedTextColor !important; + color: @invertedTextColor; } .ui.button.toggle.active:hover { - background-color: @positiveColorHover !important; + background-color: @positiveColorHover; text-shadow: @invertedTextShadow; - color: @invertedTextColor !important; + color: @invertedTextColor; } /*-------------- @@ -1125,7 +1125,7 @@ display: block; margin: 0; border-radius: 0; - box-shadow: @attachedBoxShadow !important; + box-shadow: @attachedBoxShadow; } /* Top / Bottom */ @@ -1418,31 +1418,32 @@ /* Basic */ .ui.basic.@{color}.buttons .button, .ui.basic.@{color}.button { - box-shadow: 0 0 0 @basicBorderSize @@_buttonBackground inset !important; - color: @@_buttonBackground !important; + background: transparent; + box-shadow: 0 0 0 @basicBorderSize @@_buttonBackground inset ; + color: @@_buttonBackground ; } .ui.basic.@{color}.buttons .button:hover, .ui.basic.@{color}.button:hover { - background: transparent !important; - box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundHover inset !important; - color: @@_buttonBackgroundHover !important; + background: transparent ; + box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundHover inset ; + color: @@_buttonBackgroundHover ; } .ui.basic.@{color}.buttons .button:focus, .ui.basic.@{color}.button:focus { - background: transparent !important; - box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundFocus inset !important; - color: @@_buttonBackgroundHover !important; + background: transparent ; + box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundFocus inset ; + color: @@_buttonBackgroundHover ; } .ui.basic.@{color}.buttons .active.button, .ui.basic.@{color}.active.button { - background: transparent !important; - box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundActive inset !important; - color: @@_buttonBackgroundDown !important; + background: transparent ; + box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundActive inset ; + color: @@_buttonBackgroundDown ; } .ui.basic.@{color}.buttons .button:active, .ui.basic.@{color}.button:active { - box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundDown inset !important; - color: @@_buttonBackgroundDown !important; + box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundDown inset ; + color: @@_buttonBackgroundDown ; } .ui.buttons:not(.vertical) > .basic.@{color}.button:not(:first-child) { margin-left: -@basicColoredBorderSize; @@ -1454,12 +1455,12 @@ background-color: transparent; & when (@blackOrGrey) { - box-shadow: 0 0 0 @invertedBorderSize @solidBorderColor inset !important; + box-shadow: 0 0 0 @invertedBorderSize @solidBorderColor inset ; color: @invertedTextColor; } & when not (@blackOrGrey) { - box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackground inset !important; + box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackground inset ; color: @@_buttonLightBackground; } } @@ -1471,7 +1472,7 @@ .ui.inverted.@{color}.button.active, .ui.inverted.@{color}.buttons .button:active, .ui.inverted.@{color}.button:active { - box-shadow: none !important; + box-shadow: none ; color: @@_buttonLightTextColor; } .ui.inverted.@{color}.buttons .button:hover, @@ -1496,52 +1497,52 @@ .ui.inverted.@{color}.buttons .basic.button, .ui.inverted.@{color}.basic.button { background-color: transparent; - box-shadow: @basicInvertedBoxShadow !important; - color: @white !important; + box-shadow: @basicInvertedBoxShadow ; + color: @white ; } .ui.inverted.@{color}.basic.buttons .button:hover, .ui.inverted.@{color}.buttons .basic.button:hover, .ui.inverted.@{color}.basic.button:hover { - box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundHover inset !important; + box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundHover inset ; & when (@blackOrGrey) { - color: @white !important; + color: @white ; } & when not (@blackOrGrey) { - color: @@_buttonLightBackground !important; + color: @@_buttonLightBackground ; } } .ui.inverted.@{color}.basic.buttons .button:focus, .ui.inverted.@{color}.basic.buttons .button:focus, .ui.inverted.@{color}.basic.button:focus { - box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundFocus inset !important; - color: @@_buttonLightBackground !important; + box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundFocus inset ; + color: @@_buttonLightBackground ; } .ui.inverted.@{color}.basic.buttons .active.button, .ui.inverted.@{color}.buttons .basic.active.button, .ui.inverted.@{color}.basic.active.button { - box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundActive inset !important; + box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundActive inset ; & when (@blackOrGrey) { - color: @white !important; + color: @white ; } & when not (@blackOrGrey) { - color: @@_buttonLightBackground !important; + color: @@_buttonLightBackground ; } } .ui.inverted.@{color}.basic.buttons .button:active, .ui.inverted.@{color}.buttons .basic.button:active, .ui.inverted.@{color}.basic.button:active { - box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundDown inset !important; + box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundDown inset ; & when (@blackOrGrey) { - color: @white !important; + color: @white ; } & when not (@blackOrGrey) { - color: @@_buttonLightBackground !important; + color: @@_buttonLightBackground ; } } @@ -1550,7 +1551,8 @@ .ui.tertiary.@{color}.buttons .button, .ui.tertiary.@{color}.buttons .tertiary.button, .ui.tertiary.@{color}.button { - box-shadow: none !important; + background: transparent; + box-shadow: none ; .tertiaryButtonColor() when (@lighten) { @_tertiaryButtonColor: lighten(@@_buttonBackground, 20%); @@ -1561,19 +1563,19 @@ .tertiaryButtonColor(); & when (@tertiaryWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColor !important; + box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColor ; } & when (@tertiaryWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColor !important; + box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColor ; } - color: @@_buttonBackground !important; + color: @@_buttonBackground ; } .ui.tertiary.@{color}.buttons .button:hover, .ui.tertiary.@{color}.buttons button:hover, .ui.tertiary.@{color}.button:hover { - box-shadow: none !important; + box-shadow: none ; .tertiaryButtonColorHover() when (@lighten) { @_tertiaryButtonColorHover: lighten(@@_buttonBackgroundHover, 40%); @@ -1584,26 +1586,26 @@ .tertiaryButtonColorHover(); & when (@tertiaryHoverWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorHover !important; + box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorHover ; } & when (@tertiaryHoverWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorHover !important; + box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorHover ; } & when (@lighten) { - color: lighten(@@_buttonBackgroundHover, 20%) !important; + color: lighten(@@_buttonBackgroundHover, 20%) ; } & when not (@lighten) { - color: @_tertiaryButtonColorHover !important; + color: @_tertiaryButtonColorHover ; } } .ui.tertiary.@{color}.buttons .button:focus, .ui.tertiary.@{color}.buttons .tertiary.button:focus, .ui.tertiary.@{color}.button:focus { - box-shadow: none !important; + box-shadow: none ; .tertiaryButtonColorFocus() when (@lighten) { @_tertiaryButtonColorFocus: lighten(@@_buttonBackgroundFocus, 40%); @@ -1614,19 +1616,19 @@ .tertiaryButtonColorFocus(); & when (@tertiaryFocusWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorFocus !important; + box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorFocus ; } & when (@tertiaryFocusWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorFocus !important; + box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorFocus ; } & when (@lighten) { - color: lighten(@@_buttonBackgroundFocus, 20%) !important; + color: lighten(@@_buttonBackgroundFocus, 20%) ; } & when not (@lighten) { - color: @_tertiaryButtonColorFocus !important; + color: @_tertiaryButtonColorFocus ; } } @@ -1636,7 +1638,7 @@ .ui.tertiary.@{color}.buttons .button:active, .ui.tertiary.@{color}.buttons .tertiary.button:active, .ui.tertiary.@{color}.button:active { - box-shadow: none !important; + box-shadow: none ; .tertiaryButtonColorActive() when (@lighten) { @_tertiaryButtonColorActive: lighten(@@_buttonBackgroundActive, 20%); @@ -1647,14 +1649,14 @@ .tertiaryButtonColorActive(); & when (@tertiaryActiveWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorActive !important; + box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorActive ; } & when (@tertiaryActiveWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorActive !important; + box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorActive ; } - color: @@_buttonBackgroundActive !important; + color: @@_buttonBackgroundActive ; } } @@ -1760,31 +1762,32 @@ /* Basic */ .ui.basic.@{consequence}.buttons .button, .ui.basic.@{consequence}.button { - box-shadow: 0 0 0 @basicBorderSize @@_backgroundColor inset !important; - color: @@_backgroundColor !important; + background: transparent; + box-shadow: 0 0 0 @basicBorderSize @@_backgroundColor inset; + color: @@_backgroundColor; } .ui.basic.@{consequence}.buttons .button:hover, .ui.basic.@{consequence}.button:hover { - background: transparent !important; - box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorHover inset !important; - color: @@_backgroundColorHover !important; + background: transparent; + box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorHover inset; + color: @@_backgroundColorHover; } .ui.basic.@{consequence}.buttons .button:focus, .ui.basic.@{consequence}.button:focus { - background: transparent !important; - box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorFocus inset !important; - color: @@_backgroundColorHover !important; + background: transparent; + box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorFocus inset; + color: @@_backgroundColorHover; } .ui.basic.@{consequence}.buttons .active.button, .ui.basic.@{consequence}.active.button { - background: transparent !important; - box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorActive inset !important; - color: @@_backgroundColorDown !important; + background: transparent; + box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorActive inset; + color: @@_backgroundColorDown; } .ui.basic.@{consequence}.buttons .button:active, .ui.basic.@{consequence}.button:active { - box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset !important; - color: @@_backgroundColorDown !important; + box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset; + color: @@_backgroundColorDown; } .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { margin-left: -@basicColoredBorderSize; From e5aa9827fca131f3a4f8b576558f0932cf8f57b8 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Thu, 20 Dec 2018 23:18:00 +0100 Subject: [PATCH 29/31] feat(colors,button): button dynamic color creation and multiple box-shadow entries fixed. --- src/definitions/elements/button.less | 308 ++++++++++------------ src/themes/default/globals/colors.less | 135 ++++++++++ src/themes/default/globals/site.variables | 54 ++++ 3 files changed, 332 insertions(+), 165 deletions(-) diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 8cc64bd465..e405a9425e 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -883,7 +883,6 @@ /* Overline Mixin */ .ui.tertiary.button { - box-shadow: none; transition: color @defaultDuration @defaultEasing !important; border-radius: 0; margin: @@ -895,25 +894,32 @@ padding: @tertiaryLinePadding !important; & when (@tertiaryWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryLineColor; + box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryLineColor; } & when (@tertiaryWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryLineColor; + box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryLineColor; + } + + & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){ + box-shadow: none; } color: @tertiaryTextColor; background: @tertiaryBackgroundColor; } .ui.tertiary.button:hover { - box-shadow: none; & when (@tertiaryHoverWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryHoverLineColor; + box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryHoverLineColor; } & when (@tertiaryHoverWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryHoverLineColor; + box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryHoverLineColor; + } + + & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) { + box-shadow: none; } color: @tertiaryHoverColor; background: @tertiaryHoverBackgroundColor; @@ -921,26 +927,34 @@ .ui.tertiary.button:focus { & when (@tertiaryFocusWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryFocusLineColor; + box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryFocusLineColor; } & when (@tertiaryFocusWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryFocusLineColor; + box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryFocusLineColor; + } + + & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false){ + box-shadow: none; } color: @tertiaryFocusColor; background: @tertiaryFocusBackgroundColor; } .ui.tertiary.button:active { - box-shadow: none; & when (@tertiaryActiveWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @tertiaryActiveLineColor; - border-radius+: @borderRadius @borderRadius 0 0; + box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryActiveLineColor; + border-radius: @borderRadius @borderRadius 0 0; } & when (@tertiaryActiveWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @tertiaryActiveLineColor; - border-radius+: 0 0 @borderRadius @borderRadius; + box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryActiveLineColor; + border-radius: 0 0 @borderRadius @borderRadius; + } + + & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false){ + box-shadow: none; + border-radius: 0; } color: @tertiaryActiveColor; background: @tertiaryActiveBackgroundColor; @@ -1361,28 +1375,30 @@ Colors --------------------*/ -.addButtonType(@color; @lightColor; @lighten: false; @blackOrGrey: false; @backgroundSuffix: "") { - @_buttonBackground: "@{color}@{backgroundSuffix}"; - @_buttonBackgroundHover: "@{color}@{backgroundSuffix}Hover"; - @_buttonBackgroundFocus: "@{color}@{backgroundSuffix}Focus"; - @_buttonBackgroundDown: "@{color}@{backgroundSuffix}Down"; - @_buttonBackgroundActive: "@{color}@{backgroundSuffix}Active"; - - @_buttonLightTextColor: "@{lightColor}TextColor"; - @_buttonLightBackground: "@{lightColor}@{backgroundSuffix}"; - @_buttonLightBackgroundHover: "@{lightColor}@{backgroundSuffix}Hover"; - @_buttonLightBackgroundFocus: "@{lightColor}@{backgroundSuffix}Focus"; - @_buttonLightBackgroundActive: "@{lightColor}@{backgroundSuffix}Active"; - @_buttonLightBackgroundDown: "@{lightColor}@{backgroundSuffix}Down"; - - @_buttonTextColor: "@{color}TextColor"; - @_buttonTextShadow: "@{color}TextShadow"; +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @h: @colors[@@color][hover]; + @f: @colors[@@color][focus]; + @d: @colors[@@color][down]; + @a: @colors[@@color][active]; + @t: @colors[@@color][text]; + @s: @colors[@@color][shadow]; + @l: @colors[@@color][light]; + @lh: @colors[@@color][lightHover]; + @lf: @colors[@@color][lightFocus]; + @ld: @colors[@@color][lightDown]; + @la: @colors[@@color][lightActive]; + @lt: @colors[@@color][lightText]; + @ls: @colors[@@color][lightShadow]; + @isDark: @colors[@@color][isDark]; + @isVeryDark: @colors[@@color][isVeryDark]; .ui.@{color}.buttons .button, .ui.@{color}.button { - background-color: @@_buttonBackground; - color: @@_buttonTextColor; - text-shadow: @@_buttonTextShadow; + background-color: @c; + color: @t; + text-shadow: @s; background-image: @coloredBackgroundImage; } .ui.@{color}.button { @@ -1390,60 +1406,60 @@ } .ui.@{color}.buttons .button:hover, .ui.@{color}.button:hover { - background-color: @@_buttonBackgroundHover; - color: @@_buttonTextColor; - text-shadow: @@_buttonTextShadow; + background-color: @h; + color: @t; + text-shadow: @s; } .ui.@{color}.buttons .button:focus, .ui.@{color}.button:focus { - background-color: @@_buttonBackgroundFocus; - color: @@_buttonTextColor; - text-shadow: @@_buttonTextShadow; + background-color: @f; + color: @t; + text-shadow: @s; } .ui.@{color}.buttons .button:active, .ui.@{color}.button:active { - background-color: @@_buttonBackgroundDown; - color: @@_buttonTextColor; - text-shadow: @@_buttonTextShadow; + background-color: @d; + color: @t; + text-shadow: @s; } .ui.@{color}.buttons .active.button, .ui.@{color}.buttons .active.button:active, .ui.@{color}.active.button, .ui.@{color}.button .active.button:active { - background-color: @@_buttonBackgroundActive; - color: @@_buttonTextColor; - text-shadow: @@_buttonTextShadow; + background-color: @a; + color: @t; + text-shadow: @s; } /* Basic */ .ui.basic.@{color}.buttons .button, .ui.basic.@{color}.button { background: transparent; - box-shadow: 0 0 0 @basicBorderSize @@_buttonBackground inset ; - color: @@_buttonBackground ; + box-shadow: 0 0 0 @basicBorderSize @c inset ; + color: @c ; } .ui.basic.@{color}.buttons .button:hover, .ui.basic.@{color}.button:hover { background: transparent ; - box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundHover inset ; - color: @@_buttonBackgroundHover ; + box-shadow: 0 0 0 @basicColoredBorderSize @h inset ; + color: @h ; } .ui.basic.@{color}.buttons .button:focus, .ui.basic.@{color}.button:focus { background: transparent ; - box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundFocus inset ; - color: @@_buttonBackgroundHover ; + box-shadow: 0 0 0 @basicColoredBorderSize @f inset ; + color: @h ; } .ui.basic.@{color}.buttons .active.button, .ui.basic.@{color}.active.button { background: transparent ; - box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundActive inset ; - color: @@_buttonBackgroundDown ; + box-shadow: 0 0 0 @basicColoredBorderSize @a inset ; + color: @d ; } .ui.basic.@{color}.buttons .button:active, .ui.basic.@{color}.button:active { - box-shadow: 0 0 0 @basicColoredBorderSize @@_buttonBackgroundDown inset ; - color: @@_buttonBackgroundDown ; + box-shadow: 0 0 0 @basicColoredBorderSize @d inset ; + color: @d ; } .ui.buttons:not(.vertical) > .basic.@{color}.button:not(:first-child) { margin-left: -@basicColoredBorderSize; @@ -1454,14 +1470,14 @@ .ui.inverted.@{color}.button { background-color: transparent; - & when (@blackOrGrey) { + & when (@isDark) { box-shadow: 0 0 0 @invertedBorderSize @solidBorderColor inset ; color: @invertedTextColor; } - & when not (@blackOrGrey) { - box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackground inset ; - color: @@_buttonLightBackground; + & when not (@isDark) { + box-shadow: 0 0 0 @invertedBorderSize @l inset ; + color: @l; } } .ui.inverted.@{color}.buttons .button:hover, @@ -1473,23 +1489,23 @@ .ui.inverted.@{color}.buttons .button:active, .ui.inverted.@{color}.button:active { box-shadow: none ; - color: @@_buttonLightTextColor; + color: @lt; } .ui.inverted.@{color}.buttons .button:hover, .ui.inverted.@{color}.button:hover { - background-color: @@_buttonLightBackgroundHover; + background-color: @lh; } .ui.inverted.@{color}.buttons .button:focus, .ui.inverted.@{color}.button:focus { - background-color: @@_buttonLightBackgroundFocus; + background-color: @lf; } .ui.inverted.@{color}.buttons .active.button, .ui.inverted.@{color}.active.button { - background-color: @@_buttonLightBackgroundActive; + background-color: @la; } .ui.inverted.@{color}.buttons .button:active, .ui.inverted.@{color}.button:active { - background-color: @@_buttonLightBackgroundDown; + background-color: @ld; } /* Inverted Basic */ @@ -1503,46 +1519,46 @@ .ui.inverted.@{color}.basic.buttons .button:hover, .ui.inverted.@{color}.buttons .basic.button:hover, .ui.inverted.@{color}.basic.button:hover { - box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundHover inset ; + box-shadow: 0 0 0 @invertedBorderSize @lh inset ; - & when (@blackOrGrey) { + & when (@isDark) { color: @white ; } - & when not (@blackOrGrey) { - color: @@_buttonLightBackground ; + & when not (@isDark) { + color: @l ; } } .ui.inverted.@{color}.basic.buttons .button:focus, .ui.inverted.@{color}.basic.buttons .button:focus, .ui.inverted.@{color}.basic.button:focus { - box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundFocus inset ; - color: @@_buttonLightBackground ; + box-shadow: 0 0 0 @invertedBorderSize @lf inset ; + color: @l ; } .ui.inverted.@{color}.basic.buttons .active.button, .ui.inverted.@{color}.buttons .basic.active.button, .ui.inverted.@{color}.basic.active.button { - box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundActive inset ; + box-shadow: 0 0 0 @invertedBorderSize @la inset ; - & when (@blackOrGrey) { + & when (@isDark) { color: @white ; } - & when not (@blackOrGrey) { - color: @@_buttonLightBackground ; + & when not (@isDark) { + color: @l ; } } .ui.inverted.@{color}.basic.buttons .button:active, .ui.inverted.@{color}.buttons .basic.button:active, .ui.inverted.@{color}.basic.button:active { - box-shadow: 0 0 0 @invertedBorderSize @@_buttonLightBackgroundDown inset ; + box-shadow: 0 0 0 @invertedBorderSize @ld inset ; - & when (@blackOrGrey) { + & when (@isDark) { color: @white ; } - & when not (@blackOrGrey) { - color: @@_buttonLightBackground ; + & when not (@isDark) { + color: @l ; } } @@ -1552,52 +1568,58 @@ .ui.tertiary.@{color}.buttons .tertiary.button, .ui.tertiary.@{color}.button { background: transparent; - box-shadow: none ; - .tertiaryButtonColor() when (@lighten) { - @_tertiaryButtonColor: lighten(@@_buttonBackground, 20%); + .tertiaryButtonColor() when (@isVeryDark) { + @_tertiaryButtonColor: lighten(@c, 20%); } - .tertiaryButtonColor() when not (@lighten) { - @_tertiaryButtonColor: saturate(@@_buttonBackground, 20%); + .tertiaryButtonColor() when not (@isVeryDark) { + @_tertiaryButtonColor: saturate(@c, 20%); } .tertiaryButtonColor(); & when (@tertiaryWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColor ; + box-shadow: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColor ; } & when (@tertiaryWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColor ; + box-shadow: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColor ; + } + + & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){ + box-shadow: none; } - color: @@_buttonBackground ; + color: @c ; } .ui.tertiary.@{color}.buttons .button:hover, .ui.tertiary.@{color}.buttons button:hover, .ui.tertiary.@{color}.button:hover { - box-shadow: none ; - .tertiaryButtonColorHover() when (@lighten) { - @_tertiaryButtonColorHover: lighten(@@_buttonBackgroundHover, 40%); + .tertiaryButtonColorHover() when (@isVeryDark) { + @_tertiaryButtonColorHover: lighten(@h, 40%); } - .tertiaryButtonColorHover() when not (@lighten) { - @_tertiaryButtonColorHover: desaturate(@@_buttonBackgroundHover, 20%); + .tertiaryButtonColorHover() when not (@isVeryDark) { + @_tertiaryButtonColorHover: desaturate(@h, 20%); } .tertiaryButtonColorHover(); & when (@tertiaryHoverWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorHover ; + box-shadow: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorHover ; } & when (@tertiaryHoverWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorHover ; + box-shadow: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorHover ; + } + + & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) { + box-shadow: none ; } - & when (@lighten) { - color: lighten(@@_buttonBackgroundHover, 20%) ; + & when (@isVeryDark) { + color: lighten(@h, 20%) ; } - & when not (@lighten) { + & when not (@isVeryDark) { color: @_tertiaryButtonColorHover ; } } @@ -1605,29 +1627,33 @@ .ui.tertiary.@{color}.buttons .button:focus, .ui.tertiary.@{color}.buttons .tertiary.button:focus, .ui.tertiary.@{color}.button:focus { - box-shadow: none ; - .tertiaryButtonColorFocus() when (@lighten) { - @_tertiaryButtonColorFocus: lighten(@@_buttonBackgroundFocus, 40%); + + .tertiaryButtonColorFocus() when (@isVeryDark) { + @_tertiaryButtonColorFocus: lighten(@f, 40%); } - .tertiaryButtonColorFocus() when not (@lighten) { - @_tertiaryButtonColorFocus: desaturate(@@_buttonBackgroundFocus, 20%); + .tertiaryButtonColorFocus() when not (@isVeryDark) { + @_tertiaryButtonColorFocus: desaturate(@f, 20%); } .tertiaryButtonColorFocus(); & when (@tertiaryFocusWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorFocus ; + box-shadow: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorFocus ; } & when (@tertiaryFocusWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorFocus ; + box-shadow: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorFocus ; } - & when (@lighten) { - color: lighten(@@_buttonBackgroundFocus, 20%) ; + & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false) { + box-shadow: none; } - & when not (@lighten) { + & when (@isVeryDark) { + color: lighten(@f, 20%) ; + } + + & when not (@isVeryDark) { color: @_tertiaryButtonColorFocus ; } } @@ -1638,78 +1664,30 @@ .ui.tertiary.@{color}.buttons .button:active, .ui.tertiary.@{color}.buttons .tertiary.button:active, .ui.tertiary.@{color}.button:active { - box-shadow: none ; - .tertiaryButtonColorActive() when (@lighten) { - @_tertiaryButtonColorActive: lighten(@@_buttonBackgroundActive, 20%); + .tertiaryButtonColorActive() when (@isVeryDark) { + @_tertiaryButtonColorActive: lighten(@a, 20%); } - .tertiaryButtonColorActive() when not (@lighten) { - @_tertiaryButtonColorActive: saturate(@@_buttonBackgroundActive, 20%); + .tertiaryButtonColorActive() when not (@isVeryDark) { + @_tertiaryButtonColorActive: saturate(@a, 20%); } .tertiaryButtonColorActive(); & when (@tertiaryActiveWithUnderline = true) { - box-shadow+: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorActive ; + box-shadow: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorActive ; } & when (@tertiaryActiveWithOverline = true) { - box-shadow+: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorActive ; + box-shadow: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorActive ; } - color: @@_buttonBackgroundActive ; - } -} - -/*--- Black ---*/ -.addButtonType(~"black", ~"lightBlack", true, true); - -/*--- Grey ---*/ -.addButtonType(~"grey", ~"lightGrey", false, true); - -/*--- Brown ---*/ -.addButtonType(~"brown", ~"lightBrown"); - -/*--- Blue ---*/ -.addButtonType(~"blue", ~"lightBlue"); - -/*--- Green ---*/ -.addButtonType(~"green", ~"lightGreen"); - -/*--- Orange ---*/ -.addButtonType(~"orange", ~"lightOrange"); - -/*--- Pink ---*/ -.addButtonType(~"pink", ~"lightPink"); - -/*--- Violet ---*/ -.addButtonType(~"violet", ~"lightViolet"); - -/*--- Purple ---*/ -.addButtonType(~"purple", ~"lightPurple"); - -/*--- Red ---*/ -.addButtonType(~"red", ~"lightRed"); - -/*--- Teal ---*/ -.addButtonType(~"teal", ~"lightTeal"); - -/*--- Olive ---*/ -.addButtonType(~"olive", ~"lightOlive"); - -/*--- Yellow ---*/ -.addButtonType(~"yellow", ~"lightYellow"); - -/*------------------- - Primary ---------------------*/ - -.addButtonType(~"primary", ~"lightPrimary", false, false, ~"Color"); - -/*------------------- - Secondary ---------------------*/ + & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false) { + box-shadow: none; + } -.addButtonType(~"secondary", ~"lightSecondary", false, false, ~"Color"); + color: @a ; + } +}) .addConsequence(@consequence) { diff --git a/src/themes/default/globals/colors.less b/src/themes/default/globals/colors.less index ac63adb55a..1275d7b6c6 100644 --- a/src/themes/default/globals/colors.less +++ b/src/themes/default/globals/colors.less @@ -8,7 +8,16 @@ light : @lightPrimaryColor; border : @primaryBorderColor; text : @primaryTextColor; + lightText : @lightPrimaryTextColor; hoverText : @primaryHoverTextColor; + focus : @primaryColorFocus; + lightFocus : @lightPrimaryColorFocus; + down : @primaryColorDown; + lightDown : @lightPrimaryColorDown; + active : @primaryColorActive; + lightActive : @lightPrimaryColorActive; + shadow : @primaryTextShadow; + lightShadow : @lightPrimaryTextShadow; hover : @primaryColorHover; lightHover : @lightPrimaryColorHover; ribbon : @primaryRibbonShadow; @@ -21,7 +30,16 @@ light : @lightSecondaryColor; border : @secondaryBorderColor; text : @secondaryTextColor; + lightText : @lightSecondaryTextColor; hoverText : @secondaryHoverTextColor; + focus : @secondaryColorFocus; + lightFocus : @lightSecondaryColorFocus; + down : @secondaryColorDown; + lightDown : @lightSecondaryColorDown; + active : @secondaryColorActive; + lightActive : @lightSecondaryColorActive; + shadow : @secondaryTextShadow; + lightShadow : @lightSecondaryTextShadow; hover : @secondaryColorHover; lightHover : @lightSecondaryColorHover; ribbon : @secondaryRibbonShadow; @@ -34,7 +52,16 @@ light : @lightRed; border : @redBorderColor; text : @redTextColor; + lightText : @lightRedTextColor; hoverText : @redHoverTextColor; + focus : @redFocus; + lightFocus : @lightRedFocus; + down : @redDown; + lightDown : @lightRedDown; + active : @redActive; + lightActive : @lightRedActive; + shadow : @redTextShadow; + lightShadow : @lightRedTextShadow; hover : @redHover; lightHover : @lightRedHover; ribbon : @redRibbonShadow; @@ -47,7 +74,16 @@ light : @lightOrange; border : @orangeBorderColor; text : @orangeTextColor; + lightText : @lightOrangeTextColor; hoverText : @orangeHoverTextColor; + focus : @orangeFocus; + lightFocus : @lightOrangeFocus; + down : @orangeDown; + lightDown : @lightOrangeDown; + active : @orangeActive; + lightActive : @lightOrangeActive; + shadow : @orangeTextShadow; + lightShadow : @lightOrangeTextShadow; hover : @orangeHover; lightHover : @lightOrangeHover; ribbon : @orangeRibbonShadow; @@ -60,7 +96,16 @@ light : @lightYellow; border : @yellowBorderColor; text : @yellowTextColor; + lightText : @lightYellowTextColor; hoverText : @yellowHoverTextColor; + focus : @yellowFocus; + lightFocus : @lightYellowFocus; + down : @yellowDown; + lightDown : @lightYellowDown; + active : @yellowActive; + lightActive : @lightYellowActive; + shadow : @yellowTextShadow; + lightShadow : @lightYellowTextShadow; hover : @yellowHover; lightHover : @lightYellowHover; ribbon : @yellowRibbonShadow; @@ -73,7 +118,16 @@ light : @lightOlive; border : @oliveBorderColor; text : @oliveTextColor; + lightText : @lightOliveTextColor; hoverText : @oliveHoverTextColor; + focus : @oliveFocus; + lightFocus : @lightOliveFocus; + down : @oliveDown; + lightDown : @lightOliveDown; + active : @oliveActive; + lightActive : @lightOliveActive; + shadow : @oliveTextShadow; + lightShadow : @lightOliveTextShadow; hover : @oliveHover; lightHover : @lightOliveHover; ribbon : @oliveRibbonShadow; @@ -86,7 +140,16 @@ light : @lightGreen; border : @greenBorderColor; text : @greenTextColor; + lightText : @lightGreenTextColor; hoverText : @greenHoverTextColor; + focus : @greenFocus; + lightFocus : @lightGreenFocus; + down : @greenDown; + lightDown : @lightGreenDown; + active : @greenActive; + lightActive : @lightGreenActive; + shadow : @greenTextShadow; + lightShadow : @lightGreenTextShadow; hover : @greenHover; lightHover : @lightGreenHover; ribbon : @greenRibbonShadow; @@ -99,7 +162,16 @@ light : @lightTeal; border : @tealBorderColor; text : @tealTextColor; + lightText : @lightTealTextColor; hoverText : @tealHoverTextColor; + focus : @tealFocus; + lightFocus : @lightTealFocus; + down : @tealDown; + lightDown : @lightTealDown; + active : @tealActive; + lightActive : @lightTealActive; + shadow : @tealTextShadow; + lightShadow : @lightTealTextShadow; hover : @tealHover; lightHover : @lightTealHover; ribbon : @tealRibbonShadow; @@ -112,7 +184,16 @@ light : @lightBlue; border : @blueBorderColor; text : @blueTextColor; + lightText : @lightBlueTextColor; hoverText : @blueHoverTextColor; + focus : @blueFocus; + lightFocus : @lightBlueFocus; + down : @blueDown; + lightDown : @lightBlueDown; + active : @blueActive; + lightActive : @lightBlueActive; + shadow : @blueTextShadow; + lightShadow : @lightBlueTextShadow; hover : @blueHover; lightHover : @lightBlueHover; ribbon : @blueRibbonShadow; @@ -125,7 +206,16 @@ light : @lightViolet; border : @violetBorderColor; text : @violetTextColor; + lightText : @lightVioletTextColor; hoverText : @violetHoverTextColor; + focus : @violetFocus; + lightFocus : @lightVioletFocus; + down : @violetDown; + lightDown : @lightVioletDown; + active : @violetActive; + lightActive : @lightVioletActive; + shadow : @violetTextShadow; + lightShadow : @lightVioletTextShadow; hover : @violetHover; lightHover : @lightVioletHover; ribbon : @violetRibbonShadow; @@ -138,7 +228,16 @@ light : @lightPurple; border : @purpleBorderColor; text : @purpleTextColor; + lightText : @lightPurpleTextColor; hoverText : @purpleHoverTextColor; + focus : @purpleFocus; + lightFocus : @lightPurpleFocus; + down : @purpleDown; + lightDown : @lightPurpleDown; + active : @purpleActive; + lightActive : @lightPurpleActive; + shadow : @purpleTextShadow; + lightShadow : @lightPurpleTextShadow; hover : @purpleHover; lightHover : @lightPurpleHover; ribbon : @purpleRibbonShadow; @@ -151,7 +250,16 @@ light : @lightPink; border : @pinkBorderColor; text : @pinkTextColor; + lightText : @lightPinkTextColor; hoverText : @pinkHoverTextColor; + focus : @pinkFocus; + lightFocus : @lightPinkFocus; + down : @pinkDown; + lightDown : @lightPinkDown; + active : @pinkActive; + lightActive : @lightPinkActive; + shadow : @pinkTextShadow; + lightShadow : @lightPinkTextShadow; hover : @pinkHover; lightHover : @lightPinkHover; ribbon : @pinkRibbonShadow; @@ -164,7 +272,16 @@ light : @lightBrown; border : @brownBorderColor; text : @brownTextColor; + lightText : @lightBrownTextColor; hoverText : @brownHoverTextColor; + focus : @brownFocus; + lightFocus : @lightBrownFocus; + down : @brownDown; + lightDown : @lightBrownDown; + active : @brownActive; + lightActive : @lightBrownActive; + shadow : @brownTextShadow; + lightShadow : @lightBrownTextShadow; hover : @brownHover; lightHover : @lightBrownHover; ribbon : @brownRibbonShadow; @@ -177,7 +294,16 @@ light : @lightGrey; border : @greyBorderColor; text : @greyTextColor; + lightText : @lightGreyTextColor; hoverText : @greyHoverTextColor; + focus : @greyFocus; + lightFocus : @lightGreyFocus; + down : @greyDown; + lightDown : @lightGreyDown; + active : @greyActive; + lightActive : @lightGreyActive; + shadow : @greyTextShadow; + lightShadow : @lightGreyTextShadow; hover : @greyHover; lightHover : @lightGreyHover; ribbon : @greyRibbonShadow; @@ -190,7 +316,16 @@ light : @lightBlack; border : @blackBorderColor; text : @blackTextColor; + lightText : @lightBlackTextColor; hoverText : @blackHoverTextColor; + focus : @blackFocus; + lightFocus : @lightBlackFocus; + down : @blackDown; + lightDown : @lightBlackDown; + active : @blackActive; + lightActive : @lightBlackActive; + shadow : @blackTextShadow; + lightShadow : @lightBlackTextShadow; hover : @blackHover; lightHover : @lightBlackHover; ribbon : @blackRibbonShadow; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index c41bf44b65..a94da6cc42 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -304,6 +304,24 @@ @greyTextColor : @grey; @blackTextColor : @black; +/*--- Light Colored Text ---*/ +@lightPrimaryTextColor : @invertedTextColor; +@lightSecondaryTextColor : @invertedTextColor; +@lightRedTextColor : @lightRed; +@lightOrangeTextColor : @lightOrange; +@lightYellowTextColor : #B58105; // Yellow text is difficult to read +@lightOliveTextColor : #8ABC1E; // Olive is difficult to read +@lightGreenTextColor : #1EBC30; // Green is difficult to read +@lightTealTextColor : #10A3A3; // Teal text is difficult to read +@lightBlueTextColor : @lightBlue; +@lightVioletTextColor : @lightViolet; +@lightPurpleTextColor : @lightPurple; +@lightPinkTextColor : @lightPink; +@lightBrownTextColor : @lightBrown; +@lightGreyTextColor : @lightGrey; +@lightBlackTextColor : @lightBlack; + + /*--- Hovered Colored Text ---*/ @primaryHoverTextColor : @primaryTextColor; @secondaryHoverTextColor : @secondaryTextColor; @@ -372,6 +390,42 @@ @greyInvertedRibbonShadow: lighten(@lightGrey, 5); @blackInvertedRibbonShadow: lighten(@lightBlack, 5); +@textShadow: none; +@invertedTextShadow: @textShadow; + +@primaryTextShadow: @invertedTextShadow; +@secondaryTextShadow: @invertedTextShadow; +@redTextShadow: @invertedTextShadow; +@orangeTextShadow: @invertedTextShadow; +@yellowTextShadow: @invertedTextShadow; +@oliveTextShadow: @invertedTextShadow; +@greenTextShadow: @invertedTextShadow; +@tealTextShadow: @invertedTextShadow; +@blueTextShadow: @invertedTextShadow; +@violetTextShadow: @invertedTextShadow; +@purpleTextShadow: @invertedTextShadow; +@pinkTextShadow: @invertedTextShadow; +@brownTextShadow: @invertedTextShadow; +@greyTextShadow: @invertedTextShadow; +@blackTextShadow: @invertedTextShadow; + +/* Inverted */ +@lightPrimaryTextShadow: @invertedTextShadow; +@lightSecondaryTextShadow: @invertedTextShadow; +@lightRedTextShadow: @invertedTextShadow; +@lightOrangeTextShadow: @invertedTextShadow; +@lightYellowTextShadow: @textShadow; +@lightOliveTextShadow: @textShadow; +@lightGreenTextShadow: @invertedTextShadow; +@lightTealTextShadow: @textShadow; +@lightBlueTextShadow: @invertedTextShadow; +@lightVioletTextShadow: @invertedTextShadow; +@lightPurpleTextShadow: @invertedTextShadow; +@lightPinkTextShadow: @invertedTextShadow; +@lightBrownTextShadow: @invertedTextShadow; +@lightGreyTextShadow: @textShadow; +@lightBlackTextShadow: @invertedTextShadow; + /*------------------- Alpha Colors --------------------*/ From d704d3fe18664a1a4c3ae1a74de377e5e4ed5e61 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Fri, 21 Dec 2018 00:52:07 +0100 Subject: [PATCH 30/31] feat(colors,message): message dynamic color creation --- src/definitions/collections/message.less | 144 +++++++++++++++------- src/themes/default/globals/colors.less | 60 +++++++++ src/themes/default/globals/site.variables | 134 ++++++++++++++++++++ 3 files changed, 294 insertions(+), 44 deletions(-) diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less index 730de2c537..b3348e3db2 100755 --- a/src/definitions/collections/message.less +++ b/src/definitions/collections/message.less @@ -256,74 +256,130 @@ Colors ---------------*/ -.ui.black.message { - background-color: @black; - color: @invertedTextColor; -} - /*-------------- Types ---------------*/ -.addMessageType(@color; @backgroundSuffix: "") { - @_messageBackground: "@{color}Background@{backgroundSuffix}"; - @_messageTextColor: "@{color}TextColor"; - @_messageHeaderColor: "@{color}HeaderColor"; - @_messageShadow: "@{color}BoxShadow"; - @_messageFloatingShadow: "@{color}BoxFloatingShadow"; + +@consequences: { + @positive: { + background : @positiveBackgroundColor; + header : @positiveHeaderColor; + boxShadow : @positiveBoxShadow; + boxFloatShadow : @positiveBoxFloatingShadow; + text : @positiveTextColor; + }; + @negative: { + background : @negativeBackgroundColor; + header : @negativeHeaderColor; + boxShadow : @negativeBoxShadow; + boxFloatShadow : @negativeBoxFloatingShadow; + text : @negativeTextColor; + }; + @info: { + background : @infoBackgroundColor; + header : @infoHeaderColor; + boxShadow : @infoBoxShadow; + boxFloatShadow : @infoBoxFloatingShadow; + text : @infoTextColor; + }; + @warning: { + background : @warningBackgroundColor; + header : @warningHeaderColor; + boxShadow : @warningBoxShadow; + boxFloatShadow : @warningBoxFloatingShadow; + text : @warningTextColor; + }; + @error: { + background : @errorBackgroundColor; + header : @errorHeaderColor; + boxShadow : @errorBoxShadow; + boxFloatShadow : @errorBoxFloatingShadow; + text : @errorTextColor; + }; + @success: { + background : @successBackgroundColor; + header : @successHeaderColor; + boxShadow : @successBoxShadow; + boxFloatShadow : @successBoxFloatingShadow; + text : @successTextColor; + }; +} + +/* Colors */ + +each(@consequences, { + @color: replace(@key, '@', ''); + @bg: @consequences[@@color][background]; + @hd: @consequences[@@color][header]; + @bs: @consequences[@@color][boxShadow]; + @bfs: @consequences[@@color][boxFloatShadow]; + @t: @consequences[@@color][text]; .ui.@{color}.message { - background-color: @@_messageBackground; - color: @@_messageTextColor; + background-color: @bg; + color: @t; } .ui.@{color}.message, .ui.attached.@{color}.message { - box-shadow: @@_messageShadow; + box-shadow: @bs; } .ui.floating.@{color}.message { - box-shadow: @@_messageFloatingShadow; + box-shadow: @bfs; } .ui.@{color}.message .header { - color: @@_messageHeaderColor; + color: @hd; } -} +}) -/* Positive */ -.addMessageType(positive, ~"Color"); +each(@colors, { + @color: replace(@key, '@', ''); + @bg: @colors[@@color][background]; + @hd: @colors[@@color][header]; + @bs: @colors[@@color][boxShadow]; + @bfs: @colors[@@color][boxFloatShadow]; + @t: @colors[@@color][text]; + @isVeryDark: @colors[@@color][isVeryDark]; -/* Negative */ -.addMessageType(negative, ~"Color"); + .ui.@{color}.message { + & when not (@isVeryDark) { + background-color: @bg; + color: @t; + } + & when (@isVeryDark) { + background-color: @black; + color: @invertedTextColor; + } + } -/* Info */ -.addMessageType(info, ~"Color"); + .ui.@{color}.message, + .ui.attached.@{color}.message { + & when not (@isVeryDark) { + box-shadow: @bs; + } + } -/* Warning */ -.addMessageType(warning, ~"Color"); + .ui.floating.@{color}.message { + & when not (@isVeryDark) { + box-shadow: @bfs; + } + } -/* Error */ -.addMessageType(error, ~"Color"); + .ui.@{color}.message .header { + & when not (@isVeryDark) { + color: @hd; + } + & when (@isVeryDark) { + color: @invertedTextColor; + } + } +}) -/* Success */ -.addMessageType(success, ~"Color"); -/* Colors */ -.addMessageType(red); -.addMessageType(orange); -.addMessageType(yellow); -.addMessageType(olive); -.addMessageType(green); -.addMessageType(teal); -.addMessageType(blue); -.addMessageType(violet); -.addMessageType(purple); -.addMessageType(pink); -.addMessageType(brown); - -.ui.inverted.message, -.ui.black.message { +.ui.inverted.message { background-color: @black; color: @invertedTextColor; } diff --git a/src/themes/default/globals/colors.less b/src/themes/default/globals/colors.less index 1275d7b6c6..e67fb36cae 100644 --- a/src/themes/default/globals/colors.less +++ b/src/themes/default/globals/colors.less @@ -7,6 +7,10 @@ color : @primaryColor; light : @lightPrimaryColor; border : @primaryBorderColor; + background : @primaryBackground; + header : @primaryHeaderColor; + boxShadow : @primaryBoxShadow; + boxFloatShadow : @primaryBoxFloatingShadow; text : @primaryTextColor; lightText : @lightPrimaryTextColor; hoverText : @primaryHoverTextColor; @@ -29,6 +33,10 @@ color : @secondaryColor; light : @lightSecondaryColor; border : @secondaryBorderColor; + background : @secondaryBackground; + header : @secondaryHeaderColor; + boxShadow : @secondaryBoxShadow; + boxFloatShadow : @secondaryBoxFloatingShadow; text : @secondaryTextColor; lightText : @lightSecondaryTextColor; hoverText : @secondaryHoverTextColor; @@ -51,6 +59,10 @@ color : @red; light : @lightRed; border : @redBorderColor; + background : @redBackground; + header : @redHeaderColor; + boxShadow : @redBoxShadow; + boxFloatShadow : @redBoxFloatingShadow; text : @redTextColor; lightText : @lightRedTextColor; hoverText : @redHoverTextColor; @@ -73,6 +85,10 @@ color : @orange; light : @lightOrange; border : @orangeBorderColor; + background : @orangeBackground; + header : @orangeHeaderColor; + boxShadow : @orangeBoxShadow; + boxFloatShadow : @orangeBoxFloatingShadow; text : @orangeTextColor; lightText : @lightOrangeTextColor; hoverText : @orangeHoverTextColor; @@ -95,6 +111,10 @@ color : @yellow; light : @lightYellow; border : @yellowBorderColor; + background : @yellowBackground; + header : @yellowHeaderColor; + boxShadow : @yellowBoxShadow; + boxFloatShadow : @yellowBoxFloatingShadow; text : @yellowTextColor; lightText : @lightYellowTextColor; hoverText : @yellowHoverTextColor; @@ -117,6 +137,10 @@ color : @olive; light : @lightOlive; border : @oliveBorderColor; + background : @oliveBackground; + header : @oliveHeaderColor; + boxShadow : @oliveBoxShadow; + boxFloatShadow : @oliveBoxFloatingShadow; text : @oliveTextColor; lightText : @lightOliveTextColor; hoverText : @oliveHoverTextColor; @@ -139,6 +163,10 @@ color : @green; light : @lightGreen; border : @greenBorderColor; + background : @greenBackground; + header : @greenHeaderColor; + boxShadow : @greenBoxShadow; + boxFloatShadow : @greenBoxFloatingShadow; text : @greenTextColor; lightText : @lightGreenTextColor; hoverText : @greenHoverTextColor; @@ -161,6 +189,10 @@ color : @teal; light : @lightTeal; border : @tealBorderColor; + background : @tealBackground; + header : @tealHeaderColor; + boxShadow : @tealBoxShadow; + boxFloatShadow : @tealBoxFloatingShadow; text : @tealTextColor; lightText : @lightTealTextColor; hoverText : @tealHoverTextColor; @@ -183,6 +215,10 @@ color : @blue; light : @lightBlue; border : @blueBorderColor; + background : @blueBackground; + header : @blueHeaderColor; + boxShadow : @blueBoxShadow; + boxFloatShadow : @blueBoxFloatingShadow; text : @blueTextColor; lightText : @lightBlueTextColor; hoverText : @blueHoverTextColor; @@ -205,6 +241,10 @@ color : @violet; light : @lightViolet; border : @violetBorderColor; + background : @violetBackground; + header : @violetHeaderColor; + boxShadow : @violetBoxShadow; + boxFloatShadow : @violetBoxFloatingShadow; text : @violetTextColor; lightText : @lightVioletTextColor; hoverText : @violetHoverTextColor; @@ -227,6 +267,10 @@ color : @purple; light : @lightPurple; border : @purpleBorderColor; + background : @purpleBackground; + header : @purpleHeaderColor; + boxShadow : @purpleBoxShadow; + boxFloatShadow : @purpleBoxFloatingShadow; text : @purpleTextColor; lightText : @lightPurpleTextColor; hoverText : @purpleHoverTextColor; @@ -249,6 +293,10 @@ color : @pink; light : @lightPink; border : @pinkBorderColor; + background : @pinkBackground; + header : @pinkHeaderColor; + boxShadow : @pinkBoxShadow; + boxFloatShadow : @pinkBoxFloatingShadow; text : @pinkTextColor; lightText : @lightPinkTextColor; hoverText : @pinkHoverTextColor; @@ -271,6 +319,10 @@ color : @brown; light : @lightBrown; border : @brownBorderColor; + background : @brownBackground; + header : @brownHeaderColor; + boxShadow : @brownBoxShadow; + boxFloatShadow : @brownBoxFloatingShadow; text : @brownTextColor; lightText : @lightBrownTextColor; hoverText : @brownHoverTextColor; @@ -293,6 +345,10 @@ color : @grey; light : @lightGrey; border : @greyBorderColor; + background : @greyBackground; + header : @greyHeaderColor; + boxShadow : @greyBoxShadow; + boxFloatShadow : @greyBoxFloatingShadow; text : @greyTextColor; lightText : @lightGreyTextColor; hoverText : @greyHoverTextColor; @@ -315,6 +371,10 @@ color : @black; light : @lightBlack; border : @blackBorderColor; + background : @blackBackground; + header : @blackHeaderColor; + boxShadow : @blackBoxShadow; + boxFloatShadow : @blackBoxFloatingShadow; text : @blackTextColor; lightText : @lightBlackTextColor; hoverText : @blackHoverTextColor; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index a94da6cc42..5bc8d9492e 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -262,6 +262,8 @@ @white : #FFFFFF; /*--- Colored Backgrounds ---*/ +@primaryBackground : #DFF0FF; +@secondaryBackground : #F4F4F4; @redBackground : #FFE8E6; @orangeBackground : #FFEDDE; @yellowBackground : #FFF8DB; @@ -273,8 +275,12 @@ @purpleBackground : #F6E7FF; @pinkBackground : #FFE3FB; @brownBackground : #F1E2D3; +@greyBackground : #F4F4F4; +@blackBackground : #F4F4F4; /*--- Colored Headers ---*/ +@primaryHeaderColor : darken(@primaryTextColor, 5); +@secondaryHeaderColor : darken(@secondaryTextColor, 5); @redHeaderColor : darken(@redTextColor, 5); @oliveHeaderColor : darken(@oliveTextColor, 5); @greenHeaderColor : darken(@greenTextColor, 5); @@ -286,6 +292,8 @@ @purpleHeaderColor : darken(@purpleTextColor, 5); @orangeHeaderColor : darken(@orangeTextColor, 5); @brownHeaderColor : darken(@brownTextColor, 5); +@greyHeaderColor : darken(@greyTextColor, 5); +@blackHeaderColor : darken(@blackTextColor, 5); /*--- Colored Text ---*/ @primaryTextColor : @invertedTextColor; @@ -426,6 +434,132 @@ @lightGreyTextShadow: @textShadow; @lightBlackTextShadow: @invertedTextShadow; +/* Box Shadows */ + +@shadowShadow: 0 0 0 0 rgba(0, 0, 0, 0); +@borderWidth: 1px; + +@primaryBoxShadow: + 0 0 0 @borderWidth @primaryBorderColor inset, + @shadowShadow +; +@primaryBoxFloatingShadow: + 0 0 0 @borderWidth @primaryBorderColor inset, + @floatingShadow +; +@secondaryBoxShadow: + 0 0 0 @borderWidth @secondaryBorderColor inset, + @shadowShadow +; +@secondaryBoxFloatingShadow: + 0 0 0 @borderWidth @secondaryBorderColor inset, + @floatingShadow +; +@redBoxShadow: + 0 0 0 @borderWidth @redBorderColor inset, + @shadowShadow +; +@redBoxFloatingShadow: + 0 0 0 @borderWidth @redBorderColor inset, + @floatingShadow +; +@orangeBoxShadow: + 0 0 0 @borderWidth @orangeBorderColor inset, + @shadowShadow +; +@orangeBoxFloatingShadow: + 0 0 0 @borderWidth @orangeBorderColor inset, + @floatingShadow +; +@yellowBoxShadow: + 0 0 0 @borderWidth @yellowBorderColor inset, + @shadowShadow +; +@yellowBoxFloatingShadow: + 0 0 0 @borderWidth @yellowBorderColor inset, + @floatingShadow +; +@oliveBoxShadow: + 0 0 0 @borderWidth @oliveBorderColor inset, + @shadowShadow +; +@oliveBoxFloatingShadow: + 0 0 0 @borderWidth @oliveBorderColor inset, + @floatingShadow +; +@greenBoxShadow: + 0 0 0 @borderWidth @greenBorderColor inset, + @shadowShadow +; +@greenBoxFloatingShadow: + 0 0 0 @borderWidth @greenBorderColor inset, + @floatingShadow +; +@tealBoxShadow: + 0 0 0 @borderWidth @tealBorderColor inset, + @shadowShadow +; +@tealBoxFloatingShadow: + 0 0 0 @borderWidth @tealBorderColor inset, + @floatingShadow +; +@blueBoxShadow: + 0 0 0 @borderWidth @blueBorderColor inset, + @shadowShadow +; +@blueBoxFloatingShadow: + 0 0 0 @borderWidth @blueBorderColor inset, + @floatingShadow +; +@violetBoxShadow: + 0 0 0 @borderWidth @violetBorderColor inset, + @shadowShadow +; +@violetBoxFloatingShadow: + 0 0 0 @borderWidth @violetBorderColor inset, + @floatingShadow +; +@purpleBoxShadow: + 0 0 0 @borderWidth @purpleBorderColor inset, + @shadowShadow +; +@purpleBoxFloatingShadow: + 0 0 0 @borderWidth @purpleBorderColor inset, + @floatingShadow +; +@pinkBoxShadow: + 0 0 0 @borderWidth @pinkBorderColor inset, + @shadowShadow +; +@pinkBoxFloatingShadow: + 0 0 0 @borderWidth @pinkBorderColor inset, + @floatingShadow +; +@brownBoxShadow: + 0 0 0 @borderWidth @brownBorderColor inset, + @shadowShadow +; +@brownBoxFloatingShadow: + 0 0 0 @borderWidth @brownBorderColor inset, + @floatingShadow +; +@greyBoxShadow: + 0 0 0 @borderWidth @greyBorderColor inset, + @shadowShadow +; +@greyBoxFloatingShadow: + 0 0 0 @borderWidth @greyBorderColor inset, + @floatingShadow +; +@blackBoxShadow: + 0 0 0 @borderWidth @blackBorderColor inset, + @shadowShadow +; +@blackBoxFloatingShadow: + 0 0 0 @borderWidth @blackBorderColor inset, + @floatingShadow +; + /*------------------- Alpha Colors --------------------*/ From ba4532967321ea66a5417d20195ea74357232de1 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Fri, 21 Dec 2018 08:39:50 +0100 Subject: [PATCH 31/31] feat(colors,text): new text element #289 --- src/definitions/elements/text.less | 43 ++++++++++++++++++++++ src/semantic.less | 1 + src/theme.config.example | 1 + src/themes/default/elements/text.overrides | 3 ++ src/themes/default/elements/text.variables | 7 ++++ 5 files changed, 55 insertions(+) create mode 100644 src/definitions/elements/text.less create mode 100644 src/themes/default/elements/text.overrides create mode 100644 src/themes/default/elements/text.variables diff --git a/src/definitions/elements/text.less b/src/definitions/elements/text.less new file mode 100644 index 0000000000..287de7175c --- /dev/null +++ b/src/definitions/elements/text.less @@ -0,0 +1,43 @@ +/*! + * # Fomantic UI - Text + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'text'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Text +*******************************/ + +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + + span.ui.@{color}.text { + color: @c; + } + span.ui.inverted.@{color}.text { + color: @l; + } +}) + +span.ui.disabled.text { + opacity: @disabledOpacity; +} + +.loadUIOverrides(); diff --git a/src/semantic.less b/src/semantic.less index aebcde5bb4..d0716ccc52 100644 --- a/src/semantic.less +++ b/src/semantic.less @@ -31,6 +31,7 @@ & { @import "definitions/elements/reveal"; } & { @import "definitions/elements/segment"; } & { @import "definitions/elements/step"; } +& { @import "definitions/elements/text"; } /* Collections */ & { @import "definitions/collections/breadcrumb"; } diff --git a/src/theme.config.example b/src/theme.config.example index 96c8bbeaaa..656995559e 100644 --- a/src/theme.config.example +++ b/src/theme.config.example @@ -38,6 +38,7 @@ @reveal : 'default'; @segment : 'default'; @step : 'default'; +@text : 'default'; /* Collections */ @breadcrumb : 'default'; diff --git a/src/themes/default/elements/text.overrides b/src/themes/default/elements/text.overrides new file mode 100644 index 0000000000..14fb0da124 --- /dev/null +++ b/src/themes/default/elements/text.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/themes/default/elements/text.variables b/src/themes/default/elements/text.variables new file mode 100644 index 0000000000..6c15d9a7b4 --- /dev/null +++ b/src/themes/default/elements/text.variables @@ -0,0 +1,7 @@ +/******************************* + Text +*******************************/ + +/*------------------- + Element +--------------------*/