diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index a62e57b59..542ffe4a0 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -352,110 +352,111 @@ Colors --------------------*/ -.ui.black.segment:not(.inverted) { - border-top: @coloredBorderSize solid @black; -} -.ui.blue.segment:not(.inverted) { - border-top: @coloredBorderSize solid @blue; +/* Red */ +.ui.red.segment:not(.inverted) { + border-top: @coloredBorderSize solid @red; } -.ui.green.segment:not(.inverted) { - border-top: @coloredBorderSize solid @green; +.ui.inverted.red.segment { + background-color: @red !important; + color: @white !important; } + +/* Orange */ .ui.orange.segment:not(.inverted) { border-top: @coloredBorderSize solid @orange; } -.ui.pink.segment:not(.inverted) { - border-top: @coloredBorderSize solid @pink; -} -.ui.purple.segment:not(.inverted) { - border-top: @coloredBorderSize solid @purple; -} -.ui.red.segment:not(.inverted) { - border-top: @coloredBorderSize solid @red; -} -.ui.teal.segment:not(.inverted) { - border-top: @coloredBorderSize solid @teal; +.ui.inverted.orange.segment { + background-color: @orange !important; + color: @white !important; } + +/* Yellow */ .ui.yellow.segment:not(.inverted) { border-top: @coloredBorderSize solid @yellow; } - -.ui.black.segment:not(.inverted):not(.attached) { - border-top-left-radius: @coloredBorderRadius !important; - border-top-right-radius: @coloredBorderRadius !important; -} -.ui.blue.segment:not(.inverted):not(.attached) { - border-top-left-radius: @coloredBorderRadius !important; - border-top-right-radius: @coloredBorderRadius !important; -} -.ui.green.segment:not(.inverted):not(.attached) { - border-top-left-radius: @coloredBorderRadius !important; - border-top-right-radius: @coloredBorderRadius !important; -} -.ui.orange.segment:not(.inverted):not(.attached) { - border-top-left-radius: @coloredBorderRadius !important; - border-top-right-radius: @coloredBorderRadius !important; -} -.ui.pink.segment:not(.inverted):not(.attached) { - border-top-left-radius: @coloredBorderRadius !important; - border-top-right-radius: @coloredBorderRadius !important; +.ui.inverted.yellow.segment { + background-color: @yellow !important; + color: @white !important; } -.ui.purple.segment:not(.inverted):not(.attached) { - border-top-left-radius: @coloredBorderRadius !important; - border-top-right-radius: @coloredBorderRadius !important; + +/* Green */ +.ui.green.segment:not(.inverted) { + border-top: @coloredBorderSize solid @green; } -.ui.red.segment:not(.inverted):not(.attached) { - border-top-left-radius: @coloredBorderRadius !important; - border-top-right-radius: @coloredBorderRadius !important; +.ui.inverted.green.segment { + background-color: @green !important; + color: @white !important; } -.ui.teal.segment:not(.inverted):not(.attached) { - border-top-left-radius: @coloredBorderRadius !important; - border-top-right-radius: @coloredBorderRadius !important; + +/* Teal */ +.ui.teal.segment:not(.inverted) { + border-top: @coloredBorderSize solid @teal; } -.ui.yellow.segment:not(.inverted):not(.attached) { - border-top-left-radius: @coloredBorderRadius !important; - border-top-right-radius: @coloredBorderRadius !important; +.ui.inverted.teal.segment { + background-color: @teal !important; + color: @white !important; } -/*------------------- - Inverted Colors ---------------------*/ - -.ui.inverted.segment, -.ui.inverted.black.segment { - background-color: @black !important; - color: @white !important; +/* Blue */ +.ui.blue.segment:not(.inverted) { + border-top: @coloredBorderSize solid @blue; } .ui.inverted.blue.segment { background-color: @blue !important; color: @white !important; } -.ui.inverted.green.segment { - background-color: @green !important; + +/* Violet */ +.ui.violet.segment:not(.inverted) { + border-top: @coloredBorderSize solid @violet; +} +.ui.inverted.violet.segment { + background-color: @violet !important; color: @white !important; } -.ui.inverted.orange.segment { - background-color: @orange !important; + +/* Purple */ +.ui.purple.segment:not(.inverted) { + border-top: @coloredBorderSize solid @purple; +} +.ui.inverted.purple.segment { + background-color: @purple !important; color: @white !important; } + +/* Pink */ +.ui.pink.segment:not(.inverted) { + border-top: @coloredBorderSize solid @pink; +} .ui.inverted.pink.segment { background-color: @pink !important; color: @white !important; } -.ui.inverted.purple.segment { - background-color: @purple !important; - color: @white !important; + +/* Brown */ +.ui.brown.segment:not(.inverted) { + border-top: @coloredBorderSize solid @brown; } -.ui.inverted.red.segment { - background-color: @red !important; +.ui.inverted.brown.segment { + background-color: @brown !important; color: @white !important; } -.ui.inverted.teal.segment { - background-color: @teal !important; + +/* Grey */ +.ui.grey.segment:not(.inverted) { + border-top: @coloredBorderSize solid @grey; +} +.ui.inverted.grey.segment { + background-color: @grey !important; color: @white !important; } -.ui.inverted.yellow.segment { - background-color: @yellow !important; + +/* Black */ +.ui.black.segment:not(.inverted) { + border-top: @coloredBorderSize solid @black; +} +.ui.inverted.black.segment { + background-color: @black !important; color: @white !important; } diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables index 829ad2e5f..6454edd1b 100644 --- a/src/themes/default/elements/segment.variables +++ b/src/themes/default/elements/segment.variables @@ -87,7 +87,6 @@ /* Colors */ @coloredBorderSize: 2px; -@coloredBorderRadius: @borderRadius; /* Ordinality */ @secondaryBackground: #FAF9FA;