From 8d6939084b3f51035e042df29b62e6b50ddd215d Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 12 Aug 2015 12:55:19 -0400 Subject: [PATCH] Adds colored basic labels --- src/definitions/elements/label.less | 380 +++++++++++++++++++--------- 1 file changed, 260 insertions(+), 120 deletions(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index f166cfb77..c01473549 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -538,22 +538,34 @@ a.ui.active.label:ActiveHover:before { border-color: @red !important; color: @redTextColor !important; } - -.ui.red.corner.label, -.ui.red.corner.label:hover { - background-color: transparent !important; -} - -a.ui.red.labels .label:hover, +/* Link */ +.ui.red.labels .laabel:hover, a.ui.red.label:hover{ background-color: @redHover !important; border-color: @redHover !important; color: @redHoverTextColor !important; } - +/* Corner */ +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.red.ribbon.label { border-color: @redRibbonShadow !important; } +/* Basic */ +.ui.basic.red.label { + background-color: @white !important; + color: @red !important; + border-color: @red !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.red.label:hover { + background-color: @white !important; + color: @redHover !important; + border-color: @redHover !important; +} /*--- Orange ---*/ .ui.orange.labels .label, @@ -562,22 +574,34 @@ a.ui.red.label:hover{ border-color: @orange !important; color: @orangeTextColor !important; } - -.ui.orange.corner.label, -.ui.orange.corner.label:hover { - background-color: transparent !important; -} - -a.ui.orange.labels .label:hover, +/* Link */ +.ui.orange.labels a.label:hover, a.ui.orange.label:hover{ background-color: @orangeHover !important; border-color: @orangeHover !important; color: @orangeHoverTextColor !important; } - +/* Corner */ +.ui.orange.corner.label, +.ui.orange.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.orange.ribbon.label { border-color: @orangeRibbonShadow !important; } +/* Basic */ +.ui.basic.orange.label { + background-color: @white !important; + color: @orange !important; + border-color: @orange !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.orange.label:hover { + background-color: @white !important; + color: @orangeHover !important; + border-color: @orangeHover !important; +} /*--- Yellow ---*/ .ui.yellow.labels .label, @@ -586,22 +610,34 @@ a.ui.orange.label:hover{ border-color: @yellow !important; color: @yellowTextColor !important; } - -.ui.yellow.corner.label, -.ui.yellow.corner.label:hover { - background-color: transparent !important; -} - -a.ui.yellow.labels .label:hover, +/* Link */ +.ui.yellow.labels a.label:hover, a.ui.yellow.label:hover{ background-color: @yellowHover !important; border-color: @yellowHover !important; color: @yellowHoverTextColor !important; } - +/* Corner */ +.ui.yellow.corner.label, +.ui.yellow.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.yellow.ribbon.label { border-color: @yellowRibbonShadow !important; } +/* Basic */ +.ui.basic.yellow.label { + background-color: @white !important; + color: @yellow !important; + border-color: @yellow !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.yellow.label:hover { + background-color: @white !important; + color: @yellowHover !important; + border-color: @yellowHover !important; +} /*--- Olive ---*/ .ui.olive.labels .label, @@ -610,22 +646,34 @@ a.ui.yellow.label:hover{ border-color: @olive !important; color: @oliveTextColor !important; } - -.ui.olive.corner.label, -.ui.olive.corner.label:hover { - background-color: transparent !important; -} - -a.ui.olive.labels .label:hover, +/* Link */ +.ui.olive.labels .alabel:hover, a.ui.olive.label:hover{ background-color: @oliveHover !important; border-color: @oliveHover !important; color: @oliveHoverTextColor !important; } - +/* Corner */ +.ui.olive.corner.label, +.ui.olive.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.olive.ribbon.label { border-color: @greenRibbonShadow !important; } +/* Basic */ +.ui.basic.olive.label { + background-color: @white !important; + color: @olive !important; + border-color: @olive !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.olive.label:hover { + background-color: @white !important; + color: @oliveHover !important; + border-color: @oliveHover !important; +} /*--- Green ---*/ .ui.green.labels .label, @@ -634,22 +682,34 @@ a.ui.olive.label:hover{ border-color: @green !important; color: @greenTextColor !important; } - -.ui.green.corner.label, -.ui.green.corner.label:hover { - background-color: transparent !important; -} - -a.ui.green.labels .label:hover, +/* Link */ +.ui.green.labels .alabel:hover, a.ui.green.label:hover{ background-color: @greenHover !important; border-color: @greenHover !important; color: @greenHoverTextColor !important; } - +/* Corner */ +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.green.ribbon.label { border-color: @greenRibbonShadow !important; } +/* Basic */ +.ui.basic.green.label { + background-color: @white !important; + color: @green !important; + border-color: @green !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.green.label:hover { + background-color: @white !important; + color: @greenHover !important; + border-color: @greenHover !important; +} /*--- Teal ---*/ .ui.teal.labels .label, @@ -658,22 +718,34 @@ a.ui.green.label:hover{ border-color: @teal !important; color: @tealTextColor !important; } - -.ui.teal.corner.label, -.ui.teal.corner.label:hover { - background-color: transparent !important; -} - -a.ui.teal.labels .label:hover, +/* Link */ +.ui.teal.labels .laabel:hover, a.ui.teal.label:hover{ background-color: @tealHover !important; border-color: @tealHover !important; color: @tealHoverTextColor !important; } - +/* Corner */ +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.teal.ribbon.label { border-color: @tealRibbonShadow !important; } +/* Basic */ +.ui.basic.teal.label { + background-color: @white !important; + color: @teal !important; + border-color: @teal !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.teal.label:hover { + background-color: @white !important; + color: @tealHover !important; + border-color: @tealHover !important; +} /*--- Blue ---*/ .ui.blue.labels .label, @@ -682,22 +754,34 @@ a.ui.teal.label:hover{ border-color: @blue !important; color: @blueTextColor !important; } - -.ui.blue.corner.label, -.ui.blue.corner.label:hover { - background-color: transparent !important; -} - -a.ui.blue.labels .label:hover, +/* Link */ +.ui.blue.labels .laabel:hover, a.ui.blue.label:hover{ background-color: @blueHover !important; border-color: @blueHover !important; color: @blueHoverTextColor !important; } - +/* Corner */ +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.blue.ribbon.label { border-color: @blueRibbonShadow !important; } +/* Basic */ +.ui.basic.blue.label { + background-color: @white !important; + color: @blue !important; + border-color: @blue !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.blue.label:hover { + background-color: @white !important; + color: @blueHover !important; + border-color: @blueHover !important; +} /*--- Violet ---*/ .ui.violet.labels .label, @@ -706,22 +790,34 @@ a.ui.blue.label:hover{ border-color: @violet !important; color: @violetTextColor !important; } - -.ui.violet.corner.label, -.ui.violet.corner.label:hover { - background-color: transparent !important; -} - -a.ui.violet.labels .label:hover, +/* Link */ +.ui.violet.labels a.label:hover, a.ui.violet.label:hover{ background-color: @violetHover !important; border-color: @violetHover !important; color: @violetHoverTextColor !important; } - +/* Corner */ +.ui.violet.corner.label, +.ui.violet.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.violet.ribbon.label { border-color: @violetRibbonShadow !important; } +/* Basic */ +.ui.basic.violet.label { + background-color: @white !important; + color: @violet !important; + border-color: @violet !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.violet.label:hover { + background-color: @white !important; + color: @violetHover !important; + border-color: @violetHover !important; +} /*--- Purple ---*/ .ui.purple.labels .label, @@ -730,22 +826,34 @@ a.ui.violet.label:hover{ border-color: @purple !important; color: @purpleTextColor !important; } - -.ui.purple.corner.label, -.ui.purple.corner.label:hover { - background-color: transparent !important; -} - -a.ui.purple.labels .label:hover, +/* Link */ +.ui.purple.labels a.label:hover, a.ui.purple.label:hover{ background-color: @purpleHover !important; border-color: @purpleHover !important; color: @purpleHoverTextColor !important; } - +/* Corner */ +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.purple.ribbon.label { border-color: @purpleRibbonShadow !important; } +/* Basic */ +.ui.basic.purple.label { + background-color: @white !important; + color: @purple !important; + border-color: @purple !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.purple.label:hover { + background-color: @white !important; + color: @purpleHover !important; + border-color: @purpleHover !important; +} /*--- Pink ---*/ .ui.pink.labels .label, @@ -754,22 +862,34 @@ a.ui.purple.label:hover{ border-color: @pink !important; color: @pinkTextColor !important; } - -.ui.pink.corner.label, -.ui.pink.corner.label:hover { - background-color: transparent !important; -} - -a.ui.pink.labels .label:hover, +/* Link */ +.ui.pink.labels .laabel:hover, a.ui.pink.label:hover{ background-color: @pinkHover !important; border-color: @pinkHover !important; color: @pinkHoverTextColor !important; } - +/* Corner */ +.ui.pink.corner.label, +.ui.pink.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.pink.ribbon.label { border-color: @pinkRibbonShadow !important; } +/* Basic */ +.ui.basic.pink.label { + background-color: @white !important; + color: @pink !important; + border-color: @pink !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.pink.label:hover { + background-color: @white !important; + color: @pinkHover !important; + border-color: @pinkHover !important; +} /*--- Brown ---*/ .ui.brown.labels .label, @@ -778,22 +898,34 @@ a.ui.pink.label:hover{ border-color: @brown !important; color: @brownTextColor !important; } - -.ui.brown.corner.label, -.ui.brown.corner.label:hover { - background-color: transparent !important; -} - -a.ui.brown.labels .label:hover, +/* Link */ +.ui.brown.labels .alabel:hover, a.ui.brown.label:hover{ background-color: @brownHover !important; border-color: @brownHover !important; color: @brownHoverTextColor !important; } - +/* Corner */ +.ui.brown.corner.label, +.ui.brown.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ .ui.brown.ribbon.label { border-color: @brownRibbonShadow !important; } +/* Basic */ +.ui.basic.brown.label { + background-color: @white !important; + color: @brown !important; + border-color: @brown !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.brown.label:hover { + background-color: @white !important; + color: @brownHover !important; + border-color: @brownHover !important; +} /*--- Grey ---*/ .ui.grey.labels .label, @@ -802,29 +934,33 @@ a.ui.brown.label:hover{ border-color: @grey !important; color: @greyTextColor !important; } -.ui.labels .grey.label:before, -.ui.grey.labels .label:before, -.ui.grey.label:before { - background-color: @grey !important; -} -.ui.grey.corner.label, -.ui.grey.corner.label:hover { - background-color: transparent !important; -} - -a.ui.grey.labels .label:hover, +/* Link */ +.ui.grey.labels .laabel:hover, a.ui.grey.label:hover{ background-color: @greyHover !important; border-color: @greyHover !important; color: @greyHoverTextColor !important; } -.ui.labels a.grey.label:hover:before, -.ui.grey.labels a.label:hover:before, -a.ui.grey.label:hover:before { - background-color: @greyHover !important; +/* Corner */ +.ui.grey.corner.label, +.ui.grey.corner.label:hover { + background-color: transparent !important; } +/* Ribbon */ .ui.grey.ribbon.label { - border-color: @greyRibbonShadow !important; + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.grey.label { + background-color: @white !important; + color: @grey !important; + border-color: @grey !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.grey.label:hover { + background-color: @white !important; + color: @greyHover !important; + border-color: @greyHover !important; } /*--- Black ---*/ @@ -834,29 +970,33 @@ a.ui.grey.label:hover:before { border-color: @black !important; color: @blackTextColor !important; } -.ui.labels .black.label:before, -.ui.black.labels .label:before, -.ui.black.label:before { - background-color: @black !important; -} -.ui.black.corner.label, -.ui.black.corner.label:hover { - background-color: transparent !important; -} - -a.ui.black.labels .label:hover, +/* Link */ +.ui.black.labels .alabel:hover, a.ui.black.label:hover{ background-color: @blackHover !important; border-color: @blackHover !important; color: @blackHoverTextColor !important; } -.ui.labels a.black.label:hover:before, -.ui.black.labels a.label:hover:before, -a.ui.black.label:hover:before { - background-color: @blackHover !important; +/* Corner */ +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; } +/* Ribbon */ .ui.black.ribbon.label { - border-color: @greyRibbonShadow !important; + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.black.label { + background-color: @white !important; + color: @black !important; + border-color: @black !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.black.label:hover { + background-color: @white !important; + color: @blackHover !important; + border-color: @blackHover !important; }