Add variables for zindex and transition for labels

src/definitions/elements/label.less

@@ -43,9 +43,7 @@
 
   border-radius: @borderRadius;
   box-sizing: border-box;
-  transition:
-    background 0.1s linear
-  ;
+  transition: @transition;
 }
 
 .ui.label:first-child {
@@ -66,7 +64,7 @@ a.ui.label {
   cursor: pointer;
   color: inherit;
   opacity: @linkOpacity;
-  transition: @labelTransitionDuration opacity @labelTransitionEasing;
+  transition: @linkTransition;
 }
 .ui.label a:hover {
   opacity: 1;
@@ -97,9 +95,7 @@ a.ui.label {
   margin-right: 0em;
   margin-left: @deleteMargin;
   opacity: @linkOpacity;
-  transition:
-    background 0.1s linear
-  ;
+  transition: @deleteTransition;
 }
 .ui.label .delete.icon:hover {
   opacity: 1;
@@ -178,6 +174,8 @@ a.ui.label {
 .ui.tag.labels .label:before,
 .ui.tag.label:before {
     position: absolute;
+    transform: translateY(-50%) translateX(50%) rotate(-45deg);
+
     top: @tagTriangleTopOffset;
     right: @tagTriangleRightOffset;
     content: '';
@@ -187,11 +185,7 @@ a.ui.label {
 
     width: @tagTriangleSize;
     height: @tagTriangleSize;
-
-    transform: translateY(-50%) translateX(50%) rotate(-45deg);
-    transition:
-      background 0.1s linear
-    ;
+    transition: @tagTransition;
 }
 
 
@@ -220,15 +214,14 @@ a.ui.label {
   position: absolute;
   top: 0em;
   right: 0em;
-  z-index: 10;
   margin: 0em;
+  padding: 0em;
+  text-align: center;
 
   width: @cornerTriangleSize;
   height: @cornerTriangleSize;
-  padding: 0em;
-
-  text-align: center;
-  transition: color @labelTransitionDuration @labelTransitionEasing;
+  z-index: @cornerTriangleZIndex;
+  transition: @cornerTriangleTransition;
 }
 
 /* Icon Label */
@@ -252,7 +245,7 @@ a.ui.label {
   border-left: 0em solid transparent;
 
   border-right-color: inherit;
-  transition: border-color @labelTransitionDuration @labelTransitionEasing;
+  transition: @cornerTriangleTransition;
 }
 
 .ui.corner.label .icon {
@@ -846,17 +839,13 @@ a.ui.yellow.label:hover:before {
 .ui.pointing.label:before {
   position: absolute;
   content: '';
+  transform: rotate(45deg);
+  background-image: none;
 
+  z-index: @pointingTriangleZIndex;
   width: @pointingTriangleSize;
   height: @pointingTriangleSize;
-
-  background-image: none;
-
-  transform: rotate(45deg);
-  z-index: 2;
-  transition:
-    background 0.1s linear
-  ;
+  transition: @pointingTriangleTransition;
 }
 /*--- Above ---*/
 .ui.pointing.label:before {
@@ -865,7 +854,7 @@ a.ui.yellow.label:hover:before {
 }
 .ui.pointing.label,
 .ui.pointing.above.label {
-  margin-top: 1em;
+  margin-top: @pointingVerticalDistance;
 }
 .ui.pointing.label:before,
 .ui.pointing.above.label:before {
@@ -877,7 +866,7 @@ a.ui.yellow.label:hover:before {
 .ui.pointing.bottom.label,
 .ui.pointing.below.label {
   margin-top: 0em;
-  margin-bottom: 1em;
+  margin-bottom: @pointingVerticalDistance;
 }
 .ui.pointing.bottom.label:before,
 .ui.pointing.below.label:before {
@@ -890,7 +879,7 @@ a.ui.yellow.label:hover:before {
 /*--- Left ---*/
 .ui.pointing.left.label {
   margin-top: 0em;
-  margin-left: 1em;
+  margin-left: @pointingHorizontalDistance;
 }
 .ui.pointing.left.label:before {
   margin-top: -@pointingTriangleOffset;
@@ -902,7 +891,7 @@ a.ui.yellow.label:hover:before {
 /*--- Right ---*/
 .ui.pointing.right.label {
   margin-top: 0em;
-  margin-right: 1em;
+  margin-right: @pointingHorizontalDistance;
 }
 .ui.pointing.right.label:before {
   margin-top: -@pointingTriangleOffset;
@@ -918,7 +907,7 @@ a.ui.yellow.label:hover:before {
 
 .ui.floating.label {
   position: absolute;
-  z-index: 100;
+  z-index: @floatingZIndex;
   top: @floatingTopOffset;
   left: 100%;
   margin: 0em 0em 0em @floatingLeftOffset !important;

src/themes/default/elements/label.variables

@@ -22,6 +22,7 @@
 
 @labelTransitionDuration: @transitionDuration;
 @labelTransitionEasing: @transitionEasing;
+@transition: background @labelTransitionDuration @labelTransitionEasing;
 
 /* Group */
 @groupVerticalMargin: 0.75em;
@@ -32,6 +33,8 @@
 --------------------*/
 
 @linkOpacity: 0.8;
+@linkTransition: @labelTransitionDuration opacity @labelTransitionEasing;
+
 @iconDistance: 0.75em;
 
 @detailFontWeight: bold;
@@ -40,6 +43,7 @@
 @detailMargin: 1em;
 
 @deleteMargin: 0.5em;
+@deleteTransition: background @labelTransitionDuration @labelTransitionEasing;
 
 /*-------------------
         Types
@@ -83,6 +87,7 @@
 @tagTriangleRightOffset: 100%;
 @tagTriangleTopOffset: 50%;
 @tagTriangleSize: 1.56em;
+@tagTransition: background @labelTransitionDuration @labelTransitionEasing;
 
 /* Ribbon */
 @ribbonDistance: 2rem;
@@ -107,7 +112,11 @@
 
 /* Corner */
 @cornerSizeRatio: 1;
+@cornerTransition: color @labelTransitionDuration @labelTransitionEasing;
 @cornerTriangleSize: 3.25em;
+@cornerTriangleTransition: border-color @labelTransitionDuration @labelTransitionEasing;
+@cornerTriangleZIndex: 10;
+
 @cornerIconSize: 1em;
 @cornerIconTopOffset: 0.4em;
 @cornerIconLeftOffset: 0.75em;
@@ -128,12 +137,17 @@
 @emptyCircleSize: 0.5em;
 
 /* Pointing */
+@pointingVerticalDistance: 1em;
+@pointingHorizontalDistance: 0em;
 @pointingTriangleSize: 0.6em;
 @pointingTriangleOffset: (@pointingTriangleSize / 2);
+@pointingTriangleTransition: background @labelTransitionDuration @labelTransitionEasing;
+@pointingTriangleZIndex: 2;
 
 /* Floating */
 @floatingTopOffset: -1em;
 @floatingLeftOffset: -1.5em;
+@floatingZIndex: 100;
 
 /*-------------------
         Group