less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

data/assets/stylesheets/semantic_ui/definitions/elements/input.less

@@ -13,7 +13,7 @@
  * http://github.com/semantic-org/semantic-ui/
  *
  *
- * Copyright 2014 Contributors
+ * Copyright 2015 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
@@ -46,7 +46,7 @@
 .ui.input input {
   margin: 0em;
   max-width: 100%;
-  flex: 0 1 auto;
+  flex: 1 0 auto;
   outline: none;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   text-align: @textAlign;
@@ -252,6 +252,7 @@
 .ui.icon.input > i.icon {
   cursor: default;
   position: absolute;
+  line-height: 1;
   text-align: center;
   top: 0px;
   right: 0px;
@@ -263,6 +264,9 @@
   border-radius: 0em @borderRadius @borderRadius 0em;
   transition: @iconTransition;
 }
+.ui.icon.input > i.icon:not(.link) {
+  pointer-events: none;
+}
 .ui.icon.input input {
   padding-right: @iconMargin !important;
 }
@@ -319,7 +323,7 @@
   padding-bottom: @verticalPadding;
 }
 
-/* Label on Left */
+/* Regular Label on Left */
 .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input {
   border-left: none;
   border-top-left-radius: 0px;
@@ -330,7 +334,7 @@
   border-bottom-right-radius: 0px;
 }
 
-/* Label on Right */
+/* Regular Label on Right */
 .ui[class*="right labeled"].input  > input {
   border-right: none;
   border-top-right-radius: 0px !important;
@@ -341,7 +345,6 @@
   border-bottom-left-radius: 0px;
 }
 
-
 /* Corner Label */
 .ui.labeled.input .corner.label {
   top: @labelCornerTop;
@@ -349,11 +352,11 @@
   font-size: @labelCornerSize;
   border-radius: 0em @borderRadius 0em 0em;
 }
-.ui.labeled.input input {
-  padding-right: @labeledMargin !important;
-}
 
 /* Spacing with corner label */
+.ui[class*="corner labeled"]:not(.left).labeled.input input {
+  padding-right: @labeledMargin !important;
+}
 .ui[class*="corner labeled"].icon.input:not(.left) > input {
   padding-right: @labeledIconInputMargin !important;
 }
@@ -361,6 +364,28 @@
   margin-right: @labeledIconMargin;
 }
 
+/* Left Labeled */
+.ui[class*="corner labeled"].left.labeled.input input {
+  padding-left: @labeledMargin !important;
+}
+.ui[class*="corner labeled"].icon.input.left > input {
+  padding-left: @labeledIconInputMargin !important;
+}
+.ui[class*="corner labeled"].icon.input.left > .icon {
+  margin-left: @labeledIconMargin;
+}
+
+/* Corner Label Position  */
+.ui.input > .ui.corner.label {
+  top: @borderWidth;
+  right: @borderWidth;
+}
+.ui.input > .ui.left.corner.label {
+  right: auto;
+  left: @borderWidth;
+}
+
+
 /*--------------------
         Action
 ---------------------*/
@@ -384,19 +409,29 @@
   border-top-right-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
 }
+.ui.action.input:not([class*="left action"]) > .dropdown,
 .ui.action.input:not([class*="left action"]) > .button,
 .ui.action.input:not([class*="left action"]) > .buttons > .button {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
+  border-radius: 0px;
+}
+.ui.action.input:not([class*="left action"]) > .dropdown:last-child,
+.ui.action.input:not([class*="left action"]) > .button:last-child,
+.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
+  border-radius: 0px @borderRadius @borderRadius 0px;
 }
 
 /* Button on Left */
+.ui[class*="left action"].input > .dropdown,
 .ui[class*="left action"].input > .button,
 .ui[class*="left action"].input > .buttons > .button {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
+  border-radius: 0px;
+}
+.ui[class*="left action"].input > .dropdown:first-child,
+.ui[class*="left action"].input > .button:first-child,
+.ui[class*="left action"].input > .buttons:first-child > .button {
+  border-radius: @borderRadius 0px 0px @borderRadius;
 }
-.ui[class*="left action"].input  > input {
+.ui[class*="left action"].input > input {
   border-left: none;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -419,7 +454,7 @@
   display: flex;
 }
 .ui.fluid.input > input {
-  width: 100% !important;
+  width: 0px !important;
 }
 
 /*--------------------

data/assets/stylesheets/semantic_ui/definitions/elements/label.less

@@ -13,7 +13,7 @@
  * http://github.com/semantic-org/semantic-ui/
  *
  *
- * Copyright 2014 Contributors
+ * Copyright 2015 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
@@ -35,8 +35,9 @@
 
 .ui.label {
   display: inline-block;
-  vertical-align: @verticalAlign;
+  white-space: nowrap;
   line-height: 1;
+  vertical-align: @verticalAlign;
 
   margin: @verticalMargin @horizontalMargin;
 
@@ -52,7 +53,6 @@
   font-weight: @fontWeight;
 
   border-radius: @borderRadius;
-  box-sizing: border-box;
   transition: @transition;
 }
 
@@ -63,51 +63,59 @@
   margin-right: 0em;
 }
 
-
 /* Link */
 a.ui.label {
   cursor: pointer;
 }
 
 /* Inside Link */
-.ui.label a {
+.ui.label > a {
   cursor: pointer;
   color: inherit;
   opacity: @linkOpacity;
   transition: @linkTransition;
 }
-.ui.label a:hover {
+.ui.label > a:hover {
   opacity: 1;
 }
 
+/* Image */
+.ui.label > img {
+  width: auto !important;
+  vertical-align: middle;
+  height: @imageHeight !important;
+}
+
 /* Icon */
-.ui.label .icon {
+.ui.label > .icon {
   width: auto;
   margin: 0em @iconDistance 0em 0em;
 }
+
 /* Detail */
-.ui.label .detail {
+.ui.label > .detail {
   display: inline-block;
   vertical-align: top;
   font-weight: @detailFontWeight;
   margin-left: @detailMargin;
   opacity: @detailOpacity;
 }
-.ui.label .detail .icon {
+.ui.label > .detail .icon {
   margin: 0em @detailIconDistance 0em 0em;
 }
 
 
 /* Removable label */
-.ui.label .close.icon,
-.ui.label .delete.icon {
+.ui.label > .close.icon,
+.ui.label > .delete.icon {
   cursor: pointer;
   margin-right: 0em;
   margin-left: @deleteMargin;
-  opacity: @linkOpacity;
+  font-size: @deleteSize;
+  opacity: @deleteOpacity;
   transition: @deleteTransition;
 }
-.ui.label .delete.icon:hover {
+.ui.label > .delete.icon:hover {
   opacity: 1;
 }
 
@@ -115,7 +123,7 @@ a.ui.label {
        Group
 --------------------*/
 
-.ui.labels .label {
+.ui.labels > .label {
   margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em;
 }
 
@@ -124,6 +132,10 @@ a.ui.label {
        Coupling
 --------------------*/
 
+.ui.header > .ui.label {
+  margin-top: @lineHeightOffset;
+}
+
 /* Remove border radius on attached segment */
 .ui.attached.segment > .ui.top.left.attached.label,
 .ui.bottom.attached.segment > .ui.top.left.attached.label  {
@@ -174,7 +186,7 @@ a.ui.label {
 
   height: @imageLabelImageHeight;
   margin: @imageLabelImageMargin;
-  border-radius: @imageLabelBorderRadius;
+  border-radius: @imageLabelImageBorderRadius;
 }
 
 .ui.image.label .detail {
@@ -275,6 +287,7 @@ a.ui.label {
 }
 
 .ui.corner.label .icon {
+  cursor: default;
   position: relative;
   top: @cornerIconTopOffset;
   left: @cornerIconLeftOffset;
@@ -310,17 +323,6 @@ a.ui.label {
   left: -1px;
 }
 
-/* Input */
-.ui.input > .ui.corner.label {
-  top: 1px;
-  right: 1px;
-}
-.ui.input > .ui.right.corner.label {
-  right: auto;
-  left: 1px;
-}
-
-
 /*-------------------
        Ribbon
 --------------------*/
@@ -349,13 +351,24 @@ a.ui.label {
   width: 0em;
   height: 0em;
 }
+/* Positioning */
+.ui.ribbon.label {
+  left: @ribbonOffset;
+  margin-right: -@ribbonTriangleSize;
+  padding-left: @ribbonDistance;
+  padding-right: @ribbonTriangleSize;
+}
+.ui[class*="right ribbon"].label {
+  left: @rightRibbonOffset;
+  padding-left: @ribbonTriangleSize;
+  padding-right: @ribbonDistance;
+}
 
 /* Right Ribbon */
 .ui[class*="right ribbon"].label {
   text-align: left;
   transform: translateX(-100%);
   border-radius: @borderRadius 0em 0em @borderRadius;
-  padding-left: @horizontalPadding;
 }
 .ui[class*="right ribbon"].label:after {
   left: auto;
@@ -367,16 +380,6 @@ a.ui.label {
   border-top-color: inherit;
 }
 
-/* Positioning */
-.ui.ribbon.label {
-  left: @ribbonOffset;
-  margin-right: -@ribbonTriangleSize;
-  padding-left: @ribbonDistance;
-}
-.ui[class*="right ribbon"].label {
-  left: @rightRibbonOffset;
-  padding-right: @ribbonDistance;
-}
 
 
 /* Inside Image */
@@ -388,13 +391,11 @@ a.ui.label {
 .ui.card .image > .ui.ribbon.label,
 .ui.image > .ui.ribbon.label {
   left: @ribbonImageOffset;
-  padding-left: @ribbonImageDistance;
 }
 .ui.card .image > .ui[class*="right ribbon"].label,
 .ui.image > .ui[class*="right ribbon"].label {
   left: @rightRibbonImageOffset;
   padding-left: @horizontalPadding;
-  padding-right: @ribbonImageDistance;
 }
 
 
@@ -479,6 +480,43 @@ a.ui.label:hover:before {
   color: @labelHoverTextColor;
 }
 
+/*-------------------
+        Active
+--------------------*/
+
+.ui.active.label {
+  background-color: @labelActiveBackgroundColor;
+  border-color: @labelActiveBackgroundColor;
+
+  background-image: @labelActiveBackgroundImage;
+  color: @labelActiveTextColor;
+}
+.ui.active.label:before {
+  background-color: @labelActiveBackgroundColor;
+  background-image: @labelActiveBackgroundImage;
+  color: @labelActiveTextColor;
+}
+
+/*-------------------
+     Active Hover
+--------------------*/
+
+a.ui.labels .active.label:hover,
+a.ui.active.label:hover {
+  background-color: @labelActiveHoverBackgroundColor;
+  border-color: @labelActiveHoverBackgroundColor;
+
+  background-image: @labelActiveHoverBackgroundImage;
+  color: @labelActiveHoverTextColor;
+}
+.ui.labels a.active.label:ActiveHover:before,
+a.ui.active.label:ActiveHover:before {
+  background-color: @labelActiveHoverBackgroundColor;
+  background-image: @labelActiveHoverBackgroundImage;
+  color: @labelActiveHoverTextColor;
+}
+
+
 /*-------------------
       Visible
 --------------------*/
@@ -507,66 +545,132 @@ a.ui.label:hover:before {
        Colors
 --------------------*/
 
-/*--- Black ---*/
-.ui.black.labels .label,
-.ui.black.label {
-  background-color: @black !important;
-  border-color: @black !important;
-  color: @invertedTextColor !important;
+/*--- Red ---*/
+.ui.red.labels .label,
+.ui.red.label {
+  background-color: @red !important;
+  border-color: @red !important;
+  color: @redTextColor !important;
 }
-.ui.labels .black.label:before,
-.ui.black.labels .label:before,
-.ui.black.label:before {
-  background-color: @black !important;
+.ui.labels .red.label:before,
+.ui.red.labels .label:before,
+.ui.red.label:before {
+  background-color: @red !important;
 }
-a.ui.black.labels .label:hover,
-a.ui.black.label:hover {
-  background-color: @blackHover !important;
-  border-color: @blackHover !important;
+.ui.red.corner.label,
+.ui.red.corner.label:hover {
+  background-color: transparent !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;
+
+a.ui.red.labels .label:hover,
+a.ui.red.label:hover{
+  background-color: @redHover !important;
+  border-color: @redHover !important;
+  color: @redHoverTextColor !important;
 }
-.ui.black.corner.label,
-.ui.black.corner.label:hover {
+.ui.labels a.red.label:hover:before,
+.ui.red.labels a.label:hover:before,
+a.ui.red.label:hover:before {
+  background-color: @redHover !important;
+}
+.ui.red.ribbon.label {
+  border-color: @redRibbonShadow !important;
+}
+
+/*--- Orange ---*/
+.ui.orange.labels .label,
+.ui.orange.label {
+  background-color: @orange !important;
+  border-color: @orange !important;
+  color: @orangeTextColor !important;
+}
+.ui.labels .orange.label:before,
+.ui.orange.labels .label:before,
+.ui.orange.label:before {
+  background-color: @orange !important;
+}
+.ui.orange.corner.label,
+.ui.orange.corner.label:hover {
   background-color: transparent !important;
 }
-.ui.black.ribbon.label {
-  border-color: @blackRibbonShadow !important;
+
+a.ui.orange.labels .label:hover,
+a.ui.orange.label:hover{
+  background-color: @orangeHover !important;
+  border-color: @orangeHover !important;
+  color: @orangeHoverTextColor !important;
+}
+.ui.labels a.orange.label:hover:before,
+.ui.orange.labels a.label:hover:before,
+a.ui.orange.label:hover:before {
+  background-color: @orangeHover !important;
+}
+.ui.orange.ribbon.label {
+  border-color: @orangeRibbonShadow !important;
 }
 
-/*--- Blue ---*/
-.ui.blue.labels .label,
-.ui.blue.label {
-  background-color: @blue !important;
-  border-color: @blue !important;
-  color: @invertedTextColor !important;
+/*--- Yellow ---*/
+.ui.yellow.labels .label,
+.ui.yellow.label {
+  background-color: @yellow !important;
+  border-color: @yellow !important;
+  color: @yellowTextColor !important;
 }
-.ui.labels .blue.label:before,
-.ui.blue.labels .label:before,
-.ui.blue.label:before {
-  background-color: @blue !important;
+.ui.labels .yellow.label:before,
+.ui.yellow.labels .label:before,
+.ui.yellow.label:before {
+  background-color: @yellow !important;
 }
-a.ui.blue.labels .label:hover,
-.ui.blue.labels a.label:hover,
-a.ui.blue.label:hover {
-  background-color: @blueHover !important;
-  border-color: @blueHover !important;
-  color: @invertedTextColor !important;
+.ui.yellow.corner.label,
+.ui.yellow.corner.label:hover {
+  background-color: transparent !important;
 }
-.ui.labels a.blue.label:hover:before,
-.ui.blue.labels a.label:hover:before,
-a.ui.blue.label:hover:before {
-  background-color: @blueHover !important;
+
+a.ui.yellow.labels .label:hover,
+a.ui.yellow.label:hover{
+  background-color: @yellowHover !important;
+  border-color: @yellowHover !important;
+  color: @yellowHoverTextColor !important;
 }
-.ui.blue.corner.label,
-.ui.blue.corner.label:hover {
+.ui.labels a.yellow.label:hover:before,
+.ui.yellow.labels a.label:hover:before,
+a.ui.yellow.label:hover:before {
+  background-color: @yellowHover !important;
+}
+.ui.yellow.ribbon.label {
+  border-color: @yellowRibbonShadow !important;
+}
+
+/*--- Olive ---*/
+.ui.olive.labels .label,
+.ui.olive.label {
+  background-color: @olive !important;
+  border-color: @olive !important;
+  color: @oliveTextColor !important;
+}
+.ui.labels .olive.label:before,
+.ui.olive.labels .label:before,
+.ui.olive.label:before {
+  background-color: @olive !important;
+}
+.ui.olive.corner.label,
+.ui.olive.corner.label:hover {
   background-color: transparent !important;
 }
-.ui.blue.ribbon.label {
-  border-color: @blueRibbonShadow !important;
+
+a.ui.olive.labels .label:hover,
+a.ui.olive.label:hover{
+  background-color: @oliveHover !important;
+  border-color: @oliveHover !important;
+  color: @oliveHoverTextColor !important;
+}
+.ui.labels a.olive.label:hover:before,
+.ui.olive.labels a.label:hover:before,
+a.ui.olive.label:hover:before {
+  background-color: @oliveHover !important;
+}
+.ui.olive.ribbon.label {
+  border-color: @greenRibbonShadow !important;
 }
 
 /*--- Green ---*/
@@ -574,95 +678,127 @@ a.ui.blue.label:hover:before {
 .ui.green.label {
   background-color: @green !important;
   border-color: @green !important;
-  color: @invertedTextColor !important;
+  color: @greenTextColor !important;
 }
 .ui.labels .green.label:before,
 .ui.green.labels .label:before,
 .ui.green.label:before {
   background-color: @green !important;
 }
+.ui.green.corner.label,
+.ui.green.corner.label:hover {
+  background-color: transparent !important;
+}
 
 a.ui.green.labels .label:hover,
-a.ui.green.label:hover {
+a.ui.green.label:hover{
   background-color: @greenHover !important;
   border-color: @greenHover !important;
+  color: @greenHoverTextColor !important;
 }
 .ui.labels a.green.label:hover:before,
 .ui.green.labels a.label:hover:before,
 a.ui.green.label:hover:before {
   background-color: @greenHover !important;
 }
-
-.ui.green.corner.label,
-.ui.green.corner.label:hover {
-  background-color: transparent !important;
-}
 .ui.green.ribbon.label {
   border-color: @greenRibbonShadow !important;
 }
 
-/*--- Orange ---*/
-.ui.orange.labels .label,
-.ui.orange.label {
-  background-color: @orange !important;
-  border-color: @orange !important;
-  color: @invertedTextColor !important;
+/*--- Teal ---*/
+.ui.teal.labels .label,
+.ui.teal.label {
+  background-color: @teal !important;
+  border-color: @teal !important;
+  color: @tealTextColor !important;
 }
-.ui.labels .orange.label:before,
-.ui.orange.labels .label:before,
-.ui.orange.label:before {
-  background-color: @orange !important;
+.ui.labels .teal.label:before,
+.ui.teal.labels .label:before,
+.ui.teal.label:before {
+  background-color: @teal !important;
 }
-a.ui.orange.labels .label:hover,
-.ui.orange.labels a.label:hover,
-a.ui.orange.label:hover {
-  background-color: @orangeHover !important;
-  border-color: @orangeHover !important;
-  color: @invertedTextColor !important;
+.ui.teal.corner.label,
+.ui.teal.corner.label:hover {
+  background-color: transparent !important;
 }
-.ui.labels a.orange.label:hover:before,
-.ui.orange.labels a.label:hover:before,
-a.ui.orange.label:hover:before {
-  background-color: @orangeHover !important;
+
+a.ui.teal.labels .label:hover,
+a.ui.teal.label:hover{
+  background-color: @tealHover !important;
+  border-color: @tealHover !important;
+  color: @tealHoverTextColor !important;
 }
-.ui.orange.corner.label,
-.ui.orange.corner.label:hover {
-  background-color: transparent !important;
+.ui.labels a.teal.label:hover:before,
+.ui.teal.labels a.label:hover:before,
+a.ui.teal.label:hover:before {
+  background-color: @tealHover !important;
 }
-.ui.orange.ribbon.label {
-  border-color: @orangeRibbonShadow !important;
+.ui.teal.ribbon.label {
+  border-color: @tealRibbonShadow !important;
 }
 
-/*--- Pink ---*/
-.ui.pink.labels .label,
-.ui.pink.label {
-  background-color: @pink !important;
-  border-color: @pink !important;
-  color: @invertedTextColor !important;
+/*--- Blue ---*/
+.ui.blue.labels .label,
+.ui.blue.label {
+  background-color: @blue !important;
+  border-color: @blue !important;
+  color: @blueTextColor !important;
 }
-.ui.labels .pink.label:before,
-.ui.pink.labels .label:before,
-.ui.pink.label:before {
-  background-color: @pink !important;
+.ui.labels .blue.label:before,
+.ui.blue.labels .label:before,
+.ui.blue.label:before {
+  background-color: @blue !important;
 }
-a.ui.pink.labels .label:hover,
-.ui.pink.labels a.label:hover,
-a.ui.pink.label:hover {
-  background-color: @pinkHover !important;
-  border-color: @pinkHover !important;
-  color: @invertedTextColor !important;
+.ui.blue.corner.label,
+.ui.blue.corner.label:hover {
+  background-color: transparent !important;
 }
-.ui.labels a.pink.label:hover:before,
-.ui.pink.labels a.label:hover:before,
-a.ui.pink.label:hover:before {
-  background-color: @pinkHover !important;
+
+a.ui.blue.labels .label:hover,
+a.ui.blue.label:hover{
+  background-color: @blueHover !important;
+  border-color: @blueHover !important;
+  color: @blueHoverTextColor !important;
 }
-.ui.pink.corner.label,
-.ui.pink.corner.label:hover {
+.ui.labels a.blue.label:hover:before,
+.ui.blue.labels a.label:hover:before,
+a.ui.blue.label:hover:before {
+  background-color: @blueHover !important;
+}
+.ui.blue.ribbon.label {
+  border-color: @blueRibbonShadow !important;
+}
+
+/*--- Violet ---*/
+.ui.violet.labels .label,
+.ui.violet.label {
+  background-color: @violet !important;
+  border-color: @violet !important;
+  color: @violetTextColor !important;
+}
+.ui.labels .violet.label:before,
+.ui.violet.labels .label:before,
+.ui.violet.label:before {
+  background-color: @violet !important;
+}
+.ui.violet.corner.label,
+.ui.violet.corner.label:hover {
   background-color: transparent !important;
 }
-.ui.pink.ribbon.label {
-  border-color: @pinkRibbonShadow !important;
+
+a.ui.violet.labels .label:hover,
+a.ui.violet.label:hover{
+  background-color: @violetHover !important;
+  border-color: @violetHover !important;
+  color: @violetHoverTextColor !important;
+}
+.ui.labels a.violet.label:hover:before,
+.ui.violet.labels a.label:hover:before,
+a.ui.violet.label:hover:before {
+  background-color: @violetHover !important;
+}
+.ui.violet.ribbon.label {
+  border-color: @violetRibbonShadow !important;
 }
 
 /*--- Purple ---*/
@@ -670,128 +806,162 @@ a.ui.pink.label:hover:before {
 .ui.purple.label {
   background-color: @purple !important;
   border-color: @purple !important;
-  color: @invertedTextColor !important;
+  color: @purpleTextColor !important;
 }
 .ui.labels .purple.label:before,
 .ui.purple.labels .label:before,
 .ui.purple.label:before {
   background-color: @purple !important;
 }
+.ui.purple.corner.label,
+.ui.purple.corner.label:hover {
+  background-color: transparent !important;
+}
+
 a.ui.purple.labels .label:hover,
-.ui.purple.labels a.label:hover,
-a.ui.purple.label:hover {
+a.ui.purple.label:hover{
   background-color: @purpleHover !important;
   border-color: @purpleHover !important;
-  color: @invertedTextColor !important;
+  color: @purpleHoverTextColor !important;
 }
 .ui.labels a.purple.label:hover:before,
 .ui.purple.labels a.label:hover:before,
 a.ui.purple.label:hover:before {
   background-color: @purpleHover !important;
 }
-.ui.purple.corner.label,
-.ui.purple.corner.label:hover {
-  background-color: transparent !important;
-}
 .ui.purple.ribbon.label {
   border-color: @purpleRibbonShadow !important;
 }
 
-/*--- Red ---*/
-.ui.red.labels .label,
-.ui.red.label {
-  background-color: @red !important;
-  border-color: @red !important;
-  color: @invertedTextColor !important;
+/*--- Pink ---*/
+.ui.pink.labels .label,
+.ui.pink.label {
+  background-color: @pink !important;
+  border-color: @pink !important;
+  color: @pinkTextColor !important;
 }
-.ui.labels .red.label:before,
-.ui.red.labels .label:before,
-.ui.red.label:before {
-  background-color: @red !important;
+.ui.labels .pink.label:before,
+.ui.pink.labels .label:before,
+.ui.pink.label:before {
+  background-color: @pink !important;
 }
-.ui.red.corner.label,
-.ui.red.corner.label:hover {
+.ui.pink.corner.label,
+.ui.pink.corner.label:hover {
   background-color: transparent !important;
 }
 
-a.ui.red.labels .label:hover,
-a.ui.red.label:hover{
-  background-color: @redHover !important;
-  border-color: @redHover !important;
-  color: @invertedTextColor !important;
+a.ui.pink.labels .label:hover,
+a.ui.pink.label:hover{
+  background-color: @pinkHover !important;
+  border-color: @pinkHover !important;
+  color: @pinkHoverTextColor !important;
 }
-.ui.labels a.red.label:hover:before,
-.ui.red.labels a.label:hover:before,
-a.ui.red.label:hover:before {
-  background-color: @redHover !important;
+.ui.labels a.pink.label:hover:before,
+.ui.pink.labels a.label:hover:before,
+a.ui.pink.label:hover:before {
+  background-color: @pinkHover !important;
 }
-.ui.red.ribbon.label {
-  border-color: @redRibbonShadow !important;
+.ui.pink.ribbon.label {
+  border-color: @pinkRibbonShadow !important;
 }
 
-/*--- Teal ---*/
-.ui.teal.labels .label,
-.ui.teal.label {
-  background-color: @teal !important;
-  border-color: @teal !important;
-  color: @invertedTextColor !important;
+/*--- Brown ---*/
+.ui.brown.labels .label,
+.ui.brown.label {
+  background-color: @brown !important;
+  border-color: @brown !important;
+  color: @brownTextColor !important;
 }
-.ui.labels .teal.label:before,
-.ui.teal.labels .label:before,
-.ui.teal.label:before {
-  background-color: @teal !important;
+.ui.labels .brown.label:before,
+.ui.brown.labels .label:before,
+.ui.brown.label:before {
+  background-color: @brown !important;
 }
-a.ui.teal.labels .label:hover,
-.ui.teal.labels a.label:hover,
-a.ui.teal.label:hover {
-  background-color: @tealHover !important;
-  border-color: @tealHover !important;
-  color: @invertedTextColor !important;
+.ui.brown.corner.label,
+.ui.brown.corner.label:hover {
+  background-color: transparent !important;
 }
-.ui.labels a.teal.label:hover:before,
-.ui.teal.labels a.label:hover:before,
-a.ui.teal.label:hover:before {
-  background-color: @tealHover !important;
+
+a.ui.brown.labels .label:hover,
+a.ui.brown.label:hover{
+  background-color: @brownHover !important;
+  border-color: @brownHover !important;
+  color: @brownHoverTextColor !important;
 }
-.ui.teal.corner.label,
-.ui.teal.corner.label:hover {
-  background-color: transparent !important;
+.ui.labels a.brown.label:hover:before,
+.ui.brown.labels a.label:hover:before,
+a.ui.brown.label:hover:before {
+  background-color: @brownHover !important;
 }
-.ui.teal.ribbon.label {
-  border-color: @tealRibbonShadow !important;
+.ui.brown.ribbon.label {
+  border-color: @brownRibbonShadow !important;
 }
 
-/*--- Yellow ---*/
-.ui.yellow.labels .label,
-.ui.yellow.label {
-  background-color: @yellow !important;
-  border-color: @yellow !important;
-  color: @invertedTextColor !important;
+/*--- Grey ---*/
+.ui.grey.labels .label,
+.ui.grey.label {
+  background-color: @grey !important;
+  border-color: @grey !important;
+  color: @greyTextColor !important;
 }
-.ui.labels .yellow.label:before,
-.ui.yellow.labels .label:before,
-.ui.yellow.label:before {
-  background-color: @yellow !important;
+.ui.labels .grey.label:before,
+.ui.grey.labels .label:before,
+.ui.grey.label:before {
+  background-color: @grey !important;
 }
-a.ui.yellow.labels .label:hover,
-.ui.yellow.labels a.label:hover,
-a.ui.yellow.label:hover {
-  background-color: @yellowHover !important;
-  border-color: @yellowHover !important;
-  color: @invertedTextColor !important;
+.ui.grey.corner.label,
+.ui.grey.corner.label:hover {
+  background-color: transparent !important;
 }
-.ui.labels a.yellow.label:hover:before,
-.ui.yellow.labels a.label:hover:before,
-a.ui.yellow.label:hover:before {
-  background-color: @yellowHover !important;
+
+a.ui.grey.labels .label:hover,
+a.ui.grey.label:hover{
+  background-color: @greyHover !important;
+  border-color: @greyHover !important;
+  color: @greyHoverTextColor !important;
 }
-.ui.yellow.corner.label,
-.ui.yellow.corner.label:hover {
+.ui.labels a.grey.label:hover:before,
+.ui.grey.labels a.label:hover:before,
+a.ui.grey.label:hover:before {
+  background-color: @greyHover !important;
+}
+.ui.grey.ribbon.label {
+  border-color: @greyRibbonShadow !important;
+}
+
+/*--- Black ---*/
+.ui.black.labels .label,
+.ui.black.label {
+  background-color: @black !important;
+  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;
 }
-.ui.yellow.ribbon.label {
-  border-color: @yellowRibbonShadow !important;
+
+a.ui.black.labels .label: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;
+}
+.ui.black.ribbon.label {
+  border-color: @greyRibbonShadow !important;
+}
+
+
 
 /*-------------------
        Fluid