Add labeled button variation, basic label variation

RELEASE-NOTES.md

@@ -3,13 +3,19 @@
 ### Version 2.x.x - July 23, 2015
 
 **[Enhancements](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)**
-
 - **Breadcrumb** - Breadcrumb no longer receives vertical spacing by default. This may often cause vertical alignment issues when displayed next to other `inline-block` content.
 - **Menu** - Appearance of `labeled icon menu` has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before.
 - **Menu** - Added new `tabular` menu types, `right tabular`, `bottom tabular`, added many new `tabular` menu variables for customizing
-- **Dropdown** - Dropdown `@arrowSize` will now automatically reposition itself if size is changed with variable
+- **Label** - Added `basic` label variation, useful for item counts
+- **Button** - Added `labeled button` variation for display a count next to a button.
+
+
+**Additional Enhancements**
 - **Menu** - `text menu` now uses padding for hitboxes to make target area for links larger
 - **List** - Lists can now be `right floated` or `left floated`
+- **Dropdown** - Dropdown arrow now has a variable `@dropdownArrowSize`, and is slightly smaller than previously
+- **Dropdown** - Dropdown `@arrowSize` will now automatically reposition itself if size is changed with variable
+
 
 **[Reported Bugs](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)**
 - **Container** - Fix issue with `fluid container` being `100% + gutter` at mobile resolution (causing overflow)

src/definitions/elements/button.less

@@ -363,6 +363,32 @@
   color: @focusColor;
 }
 
+/*-------------------
+    Labeled Button
+--------------------*/
+
+.ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  flex-direction: row;
+  background: none !important;
+  padding: 0px !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.ui.labeled.button > .button {
+  margin: 0px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.ui.labeled.button > .label {
+  margin: 0px 0px 0px -@borderBoxShadowWidth;
+  padding: @labeledLabelPadding;
+  font-size: @labeledLabelFontSize;
+  border-color: @labeledLabelBorderColor;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
 
 /*-------------------
        Social

src/definitions/elements/label.less

@@ -32,12 +32,12 @@
   margin: @verticalMargin @horizontalMargin;
 
   background-color: @backgroundColor;
-  border-color: @backgroundColor;
+  border-color: @borderColor;
 
   background-image: @backgroundImage;
 
   padding: @verticalPadding @horizontalPadding;
-  color: @labelTextColor;
+  color: @color;
 
   text-transform: @textTransform;
   font-weight: @fontWeight;
@@ -952,6 +952,23 @@ a.ui.black.label:hover:before {
 }
 
 
+/*-------------------
+        Basic
+--------------------*/
+
+.ui.basic.label {
+  background: @basicBackground;
+  border: @basicBorder;
+  color: @basicColor;
+  box-shadow: @basicBoxShadow;
+}
+.ui.basic.label:hover {
+  text-decoration: none;
+  background: @basicHoverBackground;
+  color: @basicHoverColor;
+  box-shadow: @basicHoverBorder;
+  box-shadow: @basicHoverBoxShadow;
+}
 
 /*-------------------
        Fluid

src/themes/default/elements/button.variables

@@ -18,7 +18,6 @@
 @verticalPadding: @inputVerticalPadding;
 @horizontalPadding: 1.5em;
 
-
 /* Text */
 @textTransform: none;
 @tapColor: transparent;
@@ -45,7 +44,7 @@
 ;
 
 /* Icon */
-@iconHeight: @relativeSmall;
+@iconHeight: @relativeTiny;
 @iconOpacity: 0.8;
 @iconDistance: @relative6px;
 @iconColor: '';
@@ -160,6 +159,11 @@
 /* Icon */
 @iconButtonOpacity: 0.9;
 
+/* Labeled */
+@labeledLabelPadding: @verticalPadding @horizontalPadding;
+@labeledLabelFontSize: @relativeMedium;
+@labeledLabelBorderColor: @borderColor;
+
 /* Labeled Icon */
 @labeledIconWidth: 1em + (@verticalPadding * 2);
 @labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
@@ -170,6 +174,7 @@
 @labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset;
 @labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;
 
+
 /* Inverted */
 @invertedBorderSize: 2px;
 @invertedTextColor: @white;

src/themes/default/elements/label.variables

@@ -10,8 +10,9 @@
 @verticalMargin: 0em;
 @horizontalMargin: @relative2px;
 @backgroundColor: #E8E8E8;
+@color: @mutedTextColor;
+@borderColor: @backgroundColor;
 @backgroundImage: none;
-@labelTextColor: rgba(0, 0, 0, 0.6);
 @verticalPadding: 0.5833em;
 @horizontalPadding: 0.833em;
 @borderRadius: @absoluteBorderRadius;
@@ -100,6 +101,17 @@
       Variations
 --------------------*/
 
+/* Basic */
+@basicBackground: none @white;
+@basicBorder: 1px solid @borderColor;
+@basicColor: @textColor;
+@basicBoxShadow: none;
+
+@basicHoverBackground: @basicBackground;
+@basicHoverColor: @linkHoverColor;
+@basicHoverBorder: @basicBorder;
+@basicHoverBoxShadow: @basicBoxShadow;
+
 /* Tag */
 @tagCircleColor: @white;
 @tagCircleSize: 0.5em;