semantic-ui-sass 2.0.7.0 → 2.1.3.0

data/app/assets/stylesheets/semantic-ui/elements/_label.scss

@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.0.7 - Label
+ * # Semantic UI 2.1.3 - Label
  * http://github.com/semantic-org/semantic-ui/
  *
  *
@@ -21,12 +21,12 @@
   vertical-align: baseline;
   margin: 0em 0.14285714em;
   background-color: #e8e8e8;
-  border-color: #e8e8e8;
   background-image: none;
   padding: 0.5833em 0.833em;
   color: rgba(0, 0, 0, 0.6);
   text-transform: none;
   font-weight: bold;
+  border: 0px solid transparent;
   border-radius: 0.28571429rem;
   -webkit-transition: background 0.1s ease;
           transition: background 0.1s ease;
@@ -178,6 +178,8 @@ a.ui.label {
   padding-left: 1.5em;
   padding-right: 1.5em;
   border-radius: 0em 0.28571429rem 0.28571429rem 0em;
+  -webkit-transition: none;
+          transition: none;
 }
 .ui.tag.labels .label:before,
 .ui.tag.label:before {
@@ -188,12 +190,12 @@ a.ui.label {
   top: 50%;
   right: 100%;
   content: '';
-  background-color: #e8e8e8;
+  background-color: inherit;
   background-image: none;
   width: 1.56em;
   height: 1.56em;
-  -webkit-transition: background 0.1s ease;
-          transition: background 0.1s ease;
+  -webkit-transition: none;
+          transition: none;
 }
 .ui.tag.labels .label:after,
 .ui.tag.label:after {
@@ -220,6 +222,7 @@ a.ui.label {
   margin: 0em;
   padding: 0em;
   text-align: center;
+  border-color: #e8e8e8;
   width: 4em;
   height: 4em;
   z-index: 1;
@@ -341,7 +344,7 @@ a.ui.label {
   border-top-color: inherit;
 }
 
-/* Inside Image */
+/* Inside Table */
 .ui.image > .ribbon.label,
 .ui.card .image > .ribbon.label {
   position: absolute;
@@ -357,11 +360,20 @@ a.ui.label {
   padding-left: 0.833em;
 }
 
+/* Inside Table */
+.ui.table td > .ui.ribbon.label {
+  left: calc( -0.71428571em  -  1.2em );
+}
+.ui.table td > .ui[class*="right ribbon"].label {
+  left: calc(100% +  0.71428571em  +  1.2em );
+  padding-left: 0.833em;
+}
+
 /*-------------------
       Attached
 --------------------*/
 
-.ui.top.attached.label,
+.ui[class*="top attached"].label,
 .ui.attached.label {
   width: 100%;
   position: absolute;
@@ -371,29 +383,29 @@ a.ui.label {
   padding: 0.75em 1em;
   border-radius: 0.21428571rem 0.21428571rem 0em 0em;
 }
-.ui.bottom.attached.label {
+.ui[class*="bottom attached"].label {
   top: auto;
   bottom: 0em;
   border-radius: 0em 0em 0.21428571rem 0.21428571rem;
 }
-.ui.top.left.attached.label {
+.ui[class*="top left attached"].label {
   width: auto;
   margin-top: 0em !important;
   border-radius: 0.21428571rem 0em 0.28571429rem 0em;
 }
-.ui.top.right.attached.label {
+.ui[class*="top right attached"].label {
   width: auto;
   left: auto;
   right: 0em;
   border-radius: 0em 0.21428571rem 0em 0.28571429rem;
 }
-.ui.bottom.left.attached.label {
+.ui[class*="bottom left attached"].label {
   width: auto;
   top: auto;
   bottom: 0em;
   border-radius: 0em 0.28571429rem 0em 0.21428571rem;
 }
-.ui.bottom.right.attached.label {
+.ui[class*="bottom right attached"].label {
   top: auto;
   bottom: 0em;
   left: auto;
@@ -429,8 +441,6 @@ a.ui.label:hover {
 }
 .ui.labels a.label:hover:before,
 a.ui.label:hover:before {
-  background-color: #e0e0e0;
-  background-image: none;
   color: rgba(0, 0, 0, 0.8);
 }
 
@@ -505,30 +515,39 @@ a.ui.active.label:ActiveHover:before {
   border-color: #db2828 !important;
   color: #ffffff !important;
 }
-.ui.labels .red.label:before,
-.ui.red.labels .label:before,
-.ui.red.label:before {
-  background-color: #db2828 !important;
-}
-.ui.red.corner.label,
-.ui.red.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.red.labels .label:hover,
+
+/* Link */
+.ui.red.labels .label:hover,
 a.ui.red.label:hover {
   background-color: #d01919 !important;
   border-color: #d01919 !important;
   color: #ffffff !important;
 }
-.ui.labels a.red.label:hover:before,
-.ui.red.labels a.label:hover:before,
-a.ui.red.label:hover:before {
-  background-color: #d01919 !important;
+
+/* Corner */
+.ui.red.corner.label,
+.ui.red.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.red.ribbon.label {
   border-color: #b21e1e !important;
 }
 
+/* Basic */
+.ui.basic.red.label {
+  background-color: #ffffff !important;
+  color: #db2828 !important;
+  border-color: #db2828 !important;
+}
+.ui.basic.red.labels a.label:hover,
+a.ui.basic.red.label:hover {
+  background-color: #ffffff !important;
+  color: #d01919 !important;
+  border-color: #d01919 !important;
+}
+
 /*--- Orange ---*/
 
 .ui.orange.labels .label,
@@ -537,30 +556,39 @@ a.ui.red.label:hover:before {
   border-color: #f2711c !important;
   color: #ffffff !important;
 }
-.ui.labels .orange.label:before,
-.ui.orange.labels .label:before,
-.ui.orange.label:before {
-  background-color: #f2711c !important;
-}
-.ui.orange.corner.label,
-.ui.orange.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.orange.labels .label:hover,
+
+/* Link */
+.ui.orange.labels .label:hover,
 a.ui.orange.label:hover {
   background-color: #f26202 !important;
   border-color: #f26202 !important;
   color: #ffffff !important;
 }
-.ui.labels a.orange.label:hover:before,
-.ui.orange.labels a.label:hover:before,
-a.ui.orange.label:hover:before {
-  background-color: #f26202 !important;
+
+/* Corner */
+.ui.orange.corner.label,
+.ui.orange.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.orange.ribbon.label {
   border-color: #cf590c !important;
 }
 
+/* Basic */
+.ui.basic.orange.label {
+  background-color: #ffffff !important;
+  color: #f2711c !important;
+  border-color: #f2711c !important;
+}
+.ui.basic.orange.labels a.label:hover,
+a.ui.basic.orange.label:hover {
+  background-color: #ffffff !important;
+  color: #f26202 !important;
+  border-color: #f26202 !important;
+}
+
 /*--- Yellow ---*/
 
 .ui.yellow.labels .label,
@@ -569,30 +597,39 @@ a.ui.orange.label:hover:before {
   border-color: #fbbd08 !important;
   color: #ffffff !important;
 }
-.ui.labels .yellow.label:before,
-.ui.yellow.labels .label:before,
-.ui.yellow.label:before {
-  background-color: #fbbd08 !important;
-}
-.ui.yellow.corner.label,
-.ui.yellow.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.yellow.labels .label:hover,
+
+/* Link */
+.ui.yellow.labels .label:hover,
 a.ui.yellow.label:hover {
   background-color: #eaae00 !important;
   border-color: #eaae00 !important;
   color: #ffffff !important;
 }
-.ui.labels a.yellow.label:hover:before,
-.ui.yellow.labels a.label:hover:before,
-a.ui.yellow.label:hover:before {
-  background-color: #eaae00 !important;
+
+/* Corner */
+.ui.yellow.corner.label,
+.ui.yellow.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.yellow.ribbon.label {
   border-color: #cd9903 !important;
 }
 
+/* Basic */
+.ui.basic.yellow.label {
+  background-color: #ffffff !important;
+  color: #fbbd08 !important;
+  border-color: #fbbd08 !important;
+}
+.ui.basic.yellow.labels a.label:hover,
+a.ui.basic.yellow.label:hover {
+  background-color: #ffffff !important;
+  color: #eaae00 !important;
+  border-color: #eaae00 !important;
+}
+
 /*--- Olive ---*/
 
 .ui.olive.labels .label,
@@ -601,30 +638,39 @@ a.ui.yellow.label:hover:before {
   border-color: #b5cc18 !important;
   color: #ffffff !important;
 }
-.ui.labels .olive.label:before,
-.ui.olive.labels .label:before,
-.ui.olive.label:before {
-  background-color: #b5cc18 !important;
-}
-.ui.olive.corner.label,
-.ui.olive.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.olive.labels .label:hover,
+
+/* Link */
+.ui.olive.labels .label:hover,
 a.ui.olive.label:hover {
   background-color: #a7bd0d !important;
   border-color: #a7bd0d !important;
   color: #ffffff !important;
 }
-.ui.labels a.olive.label:hover:before,
-.ui.olive.labels a.label:hover:before,
-a.ui.olive.label:hover:before {
-  background-color: #a7bd0d !important;
+
+/* Corner */
+.ui.olive.corner.label,
+.ui.olive.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.olive.ribbon.label {
   border-color: #198f35 !important;
 }
 
+/* Basic */
+.ui.basic.olive.label {
+  background-color: #ffffff !important;
+  color: #b5cc18 !important;
+  border-color: #b5cc18 !important;
+}
+.ui.basic.olive.labels a.label:hover,
+a.ui.basic.olive.label:hover {
+  background-color: #ffffff !important;
+  color: #a7bd0d !important;
+  border-color: #a7bd0d !important;
+}
+
 /*--- Green ---*/
 
 .ui.green.labels .label,
@@ -633,30 +679,39 @@ a.ui.olive.label:hover:before {
   border-color: #21ba45 !important;
   color: #ffffff !important;
 }
-.ui.labels .green.label:before,
-.ui.green.labels .label:before,
-.ui.green.label:before {
-  background-color: #21ba45 !important;
-}
-.ui.green.corner.label,
-.ui.green.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.green.labels .label:hover,
+
+/* Link */
+.ui.green.labels .label:hover,
 a.ui.green.label:hover {
   background-color: #16ab39 !important;
   border-color: #16ab39 !important;
   color: #ffffff !important;
 }
-.ui.labels a.green.label:hover:before,
-.ui.green.labels a.label:hover:before,
-a.ui.green.label:hover:before {
-  background-color: #16ab39 !important;
+
+/* Corner */
+.ui.green.corner.label,
+.ui.green.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.green.ribbon.label {
   border-color: #198f35 !important;
 }
 
+/* Basic */
+.ui.basic.green.label {
+  background-color: #ffffff !important;
+  color: #21ba45 !important;
+  border-color: #21ba45 !important;
+}
+.ui.basic.green.labels a.label:hover,
+a.ui.basic.green.label:hover {
+  background-color: #ffffff !important;
+  color: #16ab39 !important;
+  border-color: #16ab39 !important;
+}
+
 /*--- Teal ---*/
 
 .ui.teal.labels .label,
@@ -665,30 +720,39 @@ a.ui.green.label:hover:before {
   border-color: #00b5ad !important;
   color: #ffffff !important;
 }
-.ui.labels .teal.label:before,
-.ui.teal.labels .label:before,
-.ui.teal.label:before {
-  background-color: #00b5ad !important;
-}
-.ui.teal.corner.label,
-.ui.teal.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.teal.labels .label:hover,
+
+/* Link */
+.ui.teal.labels .label:hover,
 a.ui.teal.label:hover {
   background-color: #009c95 !important;
   border-color: #009c95 !important;
   color: #ffffff !important;
 }
-.ui.labels a.teal.label:hover:before,
-.ui.teal.labels a.label:hover:before,
-a.ui.teal.label:hover:before {
-  background-color: #009c95 !important;
+
+/* Corner */
+.ui.teal.corner.label,
+.ui.teal.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.teal.ribbon.label {
   border-color: #00827c !important;
 }
 
+/* Basic */
+.ui.basic.teal.label {
+  background-color: #ffffff !important;
+  color: #00b5ad !important;
+  border-color: #00b5ad !important;
+}
+.ui.basic.teal.labels a.label:hover,
+a.ui.basic.teal.label:hover {
+  background-color: #ffffff !important;
+  color: #009c95 !important;
+  border-color: #009c95 !important;
+}
+
 /*--- Blue ---*/
 
 .ui.blue.labels .label,
@@ -697,30 +761,39 @@ a.ui.teal.label:hover:before {
   border-color: #2185d0 !important;
   color: #ffffff !important;
 }
-.ui.labels .blue.label:before,
-.ui.blue.labels .label:before,
-.ui.blue.label:before {
-  background-color: #2185d0 !important;
-}
-.ui.blue.corner.label,
-.ui.blue.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.blue.labels .label:hover,
+
+/* Link */
+.ui.blue.labels .label:hover,
 a.ui.blue.label:hover {
   background-color: #1678c2 !important;
   border-color: #1678c2 !important;
   color: #ffffff !important;
 }
-.ui.labels a.blue.label:hover:before,
-.ui.blue.labels a.label:hover:before,
-a.ui.blue.label:hover:before {
-  background-color: #1678c2 !important;
+
+/* Corner */
+.ui.blue.corner.label,
+.ui.blue.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.blue.ribbon.label {
   border-color: #1a69a4 !important;
 }
 
+/* Basic */
+.ui.basic.blue.label {
+  background-color: #ffffff !important;
+  color: #2185d0 !important;
+  border-color: #2185d0 !important;
+}
+.ui.basic.blue.labels a.label:hover,
+a.ui.basic.blue.label:hover {
+  background-color: #ffffff !important;
+  color: #1678c2 !important;
+  border-color: #1678c2 !important;
+}
+
 /*--- Violet ---*/
 
 .ui.violet.labels .label,
@@ -729,30 +802,39 @@ a.ui.blue.label:hover:before {
   border-color: #6435c9 !important;
   color: #ffffff !important;
 }
-.ui.labels .violet.label:before,
-.ui.violet.labels .label:before,
-.ui.violet.label:before {
-  background-color: #6435c9 !important;
-}
-.ui.violet.corner.label,
-.ui.violet.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.violet.labels .label:hover,
+
+/* Link */
+.ui.violet.labels .label:hover,
 a.ui.violet.label:hover {
   background-color: #5829bb !important;
   border-color: #5829bb !important;
   color: #ffffff !important;
 }
-.ui.labels a.violet.label:hover:before,
-.ui.violet.labels a.label:hover:before,
-a.ui.violet.label:hover:before {
-  background-color: #5829bb !important;
+
+/* Corner */
+.ui.violet.corner.label,
+.ui.violet.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.violet.ribbon.label {
   border-color: #502aa1 !important;
 }
 
+/* Basic */
+.ui.basic.violet.label {
+  background-color: #ffffff !important;
+  color: #6435c9 !important;
+  border-color: #6435c9 !important;
+}
+.ui.basic.violet.labels a.label:hover,
+a.ui.basic.violet.label:hover {
+  background-color: #ffffff !important;
+  color: #5829bb !important;
+  border-color: #5829bb !important;
+}
+
 /*--- Purple ---*/
 
 .ui.purple.labels .label,
@@ -761,30 +843,39 @@ a.ui.violet.label:hover:before {
   border-color: #a333c8 !important;
   color: #ffffff !important;
 }
-.ui.labels .purple.label:before,
-.ui.purple.labels .label:before,
-.ui.purple.label:before {
-  background-color: #a333c8 !important;
-}
-.ui.purple.corner.label,
-.ui.purple.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.purple.labels .label:hover,
+
+/* Link */
+.ui.purple.labels .label:hover,
 a.ui.purple.label:hover {
   background-color: #9627ba !important;
   border-color: #9627ba !important;
   color: #ffffff !important;
 }
-.ui.labels a.purple.label:hover:before,
-.ui.purple.labels a.label:hover:before,
-a.ui.purple.label:hover:before {
-  background-color: #9627ba !important;
+
+/* Corner */
+.ui.purple.corner.label,
+.ui.purple.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.purple.ribbon.label {
   border-color: #82299f !important;
 }
 
+/* Basic */
+.ui.basic.purple.label {
+  background-color: #ffffff !important;
+  color: #a333c8 !important;
+  border-color: #a333c8 !important;
+}
+.ui.basic.purple.labels a.label:hover,
+a.ui.basic.purple.label:hover {
+  background-color: #ffffff !important;
+  color: #9627ba !important;
+  border-color: #9627ba !important;
+}
+
 /*--- Pink ---*/
 
 .ui.pink.labels .label,
@@ -793,30 +884,39 @@ a.ui.purple.label:hover:before {
   border-color: #e03997 !important;
   color: #ffffff !important;
 }
-.ui.labels .pink.label:before,
-.ui.pink.labels .label:before,
-.ui.pink.label:before {
-  background-color: #e03997 !important;
-}
-.ui.pink.corner.label,
-.ui.pink.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.pink.labels .label:hover,
+
+/* Link */
+.ui.pink.labels .label:hover,
 a.ui.pink.label:hover {
   background-color: #e61a8d !important;
   border-color: #e61a8d !important;
   color: #ffffff !important;
 }
-.ui.labels a.pink.label:hover:before,
-.ui.pink.labels a.label:hover:before,
-a.ui.pink.label:hover:before {
-  background-color: #e61a8d !important;
+
+/* Corner */
+.ui.pink.corner.label,
+.ui.pink.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.pink.ribbon.label {
   border-color: #c71f7e !important;
 }
 
+/* Basic */
+.ui.basic.pink.label {
+  background-color: #ffffff !important;
+  color: #e03997 !important;
+  border-color: #e03997 !important;
+}
+.ui.basic.pink.labels a.label:hover,
+a.ui.basic.pink.label:hover {
+  background-color: #ffffff !important;
+  color: #e61a8d !important;
+  border-color: #e61a8d !important;
+}
+
 /*--- Brown ---*/
 
 .ui.brown.labels .label,
@@ -825,30 +925,39 @@ a.ui.pink.label:hover:before {
   border-color: #a5673f !important;
   color: #ffffff !important;
 }
-.ui.labels .brown.label:before,
-.ui.brown.labels .label:before,
-.ui.brown.label:before {
-  background-color: #a5673f !important;
-}
-.ui.brown.corner.label,
-.ui.brown.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.brown.labels .label:hover,
+
+/* Link */
+.ui.brown.labels .label:hover,
 a.ui.brown.label:hover {
   background-color: #975b33 !important;
   border-color: #975b33 !important;
   color: #ffffff !important;
 }
-.ui.labels a.brown.label:hover:before,
-.ui.brown.labels a.label:hover:before,
-a.ui.brown.label:hover:before {
-  background-color: #975b33 !important;
+
+/* Corner */
+.ui.brown.corner.label,
+.ui.brown.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.brown.ribbon.label {
   border-color: #805031 !important;
 }
 
+/* Basic */
+.ui.basic.brown.label {
+  background-color: #ffffff !important;
+  color: #a5673f !important;
+  border-color: #a5673f !important;
+}
+.ui.basic.brown.labels a.label:hover,
+a.ui.basic.brown.label:hover {
+  background-color: #ffffff !important;
+  color: #975b33 !important;
+  border-color: #975b33 !important;
+}
+
 /*--- Grey ---*/
 
 .ui.grey.labels .label,
@@ -857,28 +966,37 @@ a.ui.brown.label:hover:before {
   border-color: #767676 !important;
   color: #ffffff !important;
 }
-.ui.labels .grey.label:before,
-.ui.grey.labels .label:before,
-.ui.grey.label:before {
-  background-color: #767676 !important;
-}
-.ui.grey.corner.label,
-.ui.grey.corner.label:hover {
-  background-color: transparent !important;
-}
-a.ui.grey.labels .label:hover,
+
+/* Link */
+.ui.grey.labels .label:hover,
 a.ui.grey.label:hover {
   background-color: #838383 !important;
   border-color: #838383 !important;
   color: #ffffff !important;
 }
-.ui.labels a.grey.label:hover:before,
-.ui.grey.labels a.label:hover:before,
-a.ui.grey.label:hover:before {
-  background-color: #838383 !important;
+
+/* Corner */
+.ui.grey.corner.label,
+.ui.grey.corner.label:hover {
+  background-color: transparent !important;
 }
+
+/* Ribbon */
 .ui.grey.ribbon.label {
-  border-color: #5d5d5d !important;
+  border-color: #805031 !important;
+}
+
+/* Basic */
+.ui.basic.grey.label {
+  background-color: #ffffff !important;
+  color: #767676 !important;
+  border-color: #767676 !important;
+}
+.ui.basic.grey.labels a.label:hover,
+a.ui.basic.grey.label:hover {
+  background-color: #ffffff !important;
+  color: #838383 !important;
+  border-color: #838383 !important;
 }
 
 /*--- Black ---*/
@@ -889,28 +1007,62 @@ a.ui.grey.label:hover:before {
   border-color: #1b1c1d !important;
   color: #ffffff !important;
 }
-.ui.labels .black.label:before,
-.ui.black.labels .label:before,
-.ui.black.label:before {
-  background-color: #1b1c1d !important;
+
+/* Link */
+.ui.black.labels .label:hover,
+a.ui.black.label:hover {
+  background-color: #27292a !important;
+  border-color: #27292a !important;
+  color: #ffffff !important;
 }
+
+/* Corner */
 .ui.black.corner.label,
 .ui.black.corner.label:hover {
   background-color: transparent !important;
 }
-a.ui.black.labels .label:hover,
-a.ui.black.label:hover {
-  background-color: #27292a !important;
+
+/* Ribbon */
+.ui.black.ribbon.label {
+  border-color: #805031 !important;
+}
+
+/* Basic */
+.ui.basic.black.label {
+  background-color: #ffffff !important;
+  color: #1b1c1d !important;
+  border-color: #1b1c1d !important;
+}
+.ui.basic.black.labels a.label:hover,
+a.ui.basic.black.label:hover {
+  background-color: #ffffff !important;
+  color: #27292a !important;
   border-color: #27292a !important;
-  color: #ffffff !important;
 }
-.ui.labels a.black.label:hover:before,
-.ui.black.labels a.label:hover:before,
-a.ui.black.label:hover:before {
-  background-color: #27292a !important;
+
+/*-------------------
+        Basic
+--------------------*/
+
+.ui.basic.label {
+  background: none #ffffff;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: none;
 }
-.ui.black.ribbon.label {
-  border-color: #5d5d5d !important;
+
+/* Link */
+a.ui.basic.label:hover {
+  text-decoration: none;
+  background: none #ffffff;
+  color: #1e70bf;
+  box-shadow: 1px solid rgba(34, 36, 38, 0.15);
+  box-shadow: none;
+}
+
+/* Pointing */
+.ui.basic.pointing.label:before {
+  border-color: inherit;
 }
 
 /*-------------------
@@ -977,6 +1129,15 @@ a.ui.black.label:hover:before {
 .ui.attached.pointing.label {
   position: absolute;
 }
+.ui.pointing.label:before {
+  background-color: inherit;
+  background-image: inherit;
+  border-width: none;
+  border-style: solid;
+  border-color: inherit;
+}
+
+/* Arrow */
 .ui.pointing.label:before {
   position: absolute;
   content: '';
@@ -985,53 +1146,58 @@ a.ui.black.label:hover:before {
           transform: rotate(45deg);
   background-image: none;
   z-index: 2;
-  width: 0.6em;
-  height: 0.6em;
+  width: 0.6666em;
+  height: 0.6666em;
   -webkit-transition: background 0.1s ease;
           transition: background 0.1s ease;
 }
 
 /*--- Above ---*/
 
-.ui.pointing.label:before {
-  background-color: #e8e8e8;
-  background-image: none;
-}
 .ui.pointing.label,
-.ui.pointing.above.label {
+.ui[class*="pointing above"].label {
   margin-top: 1em;
 }
 .ui.pointing.label:before,
-.ui.pointing.above.label:before {
-  margin-left: -0.3em;
-  top: -0.3em;
+.ui[class*="pointing above"].label:before {
+  border-width: 1px 0px 0px 1px;
+  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+      -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+          transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  top: 0%;
   left: 50%;
 }
 
 /*--- Below ---*/
 
-.ui.pointing.bottom.label,
-.ui.pointing.below.label {
+.ui[class*="bottom pointing"].label,
+.ui[class*="pointing below"].label {
   margin-top: 0em;
   margin-bottom: 1em;
 }
-.ui.pointing.bottom.label:before,
-.ui.pointing.below.label:before {
-  margin-left: -0.3em;
+.ui[class*="bottom pointing"].label:before,
+.ui[class*="pointing below"].label:before {
+  border-width: 0px 1px 1px 0px;
   top: auto;
   right: auto;
-  bottom: -0.3em;
+  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+      -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+          transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  top: 100%;
   left: 50%;
 }
 
 /*--- Left ---*/
 
-.ui.pointing.left.label {
+.ui[class*="left pointing"].label {
   margin-top: 0em;
-  margin-left: 0.6em;
+  margin-left: 0.6666em;
 }
-.ui.pointing.left.label:before {
-  margin-top: -0.3em;
+.ui[class*="left pointing"].label:before {
+  border-width: 0px 0px 1px 1px;
+  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+      -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+          transform: translateX(-50%) translateY(-50%) rotate(45deg);
   bottom: auto;
   right: auto;
   top: 50%;
@@ -1040,18 +1206,53 @@ a.ui.black.label:hover:before {
 
 /*--- Right ---*/
 
-.ui.pointing.right.label {
+.ui[class*="right pointing"].label {
   margin-top: 0em;
-  margin-right: 0.6em;
+  margin-right: 0.6666em;
 }
-.ui.pointing.right.label:before {
-  margin-top: -0.3em;
-  right: -0.3em;
+.ui[class*="right pointing"].label:before {
+  border-width: 1px 1px 0px 0px;
+  -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
+      -ms-transform: translateX(50%) translateY(-50%) rotate(45deg);
+          transform: translateX(50%) translateY(-50%) rotate(45deg);
   top: 50%;
+  right: 0%;
   bottom: auto;
   left: auto;
 }
 
+/* Basic Pointing */
+
+/*--- Above ---*/
+
+.ui.basic.pointing.label:before,
+.ui.basic[class*="pointing above"].label:before {
+  margin-top: -1px;
+}
+
+/*--- Below ---*/
+
+.ui.basic[class*="bottom pointing"].label:before,
+.ui.basic[class*="pointing below"].label:before {
+  bottom: auto;
+  top: 100%;
+  margin-top: 1px;
+}
+
+/*--- Left ---*/
+
+.ui.basic[class*="left pointing"].label:before {
+  top: 50%;
+  left: -1px;
+}
+
+/*--- Right ---*/
+
+.ui.basic[class*="right pointing"].label:before {
+  top: 50%;
+  right: -1px;
+}
+
 /*------------------
    Floating Label
 -------------------*/