Adds colored basic labels

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;
 }