Adds focused input border styles, changes dropdown selection label valign

RELEASE-NOTES.md

@@ -10,6 +10,7 @@
 - **API** Added new setting `hideError`, defaults to `auto` (will automatically hide error for elements that are not forms). #2586
 - **Build Tools** - Packaged `.overrides` file are now an optional include
 - **Button** - Added `labeled button` variation for display a count next to a button.
+- **Button** - `colored basic` button are now colored before `:hover` in the default theme, this is more in line with common usage across other websites.
 - **Checkbox** - Added 4 new callbacks `beforeChecked`, `beforeUnchecked`, `beforeDeterminate`, `beforeIndeterminate`. You can now cancel a state change by returning false from these callbacks.
 - **Cards** - Added documentation for `stackable` cards which was available but undocumented in previous versions.
 - **Divider** - Vertical divider can now be used multiple times in a single column row (not just 50/50 split). #2808
@@ -21,10 +22,12 @@
 - **Grid** - Added new responsive [`reversed`](http://www.semantic-ui.com/collections/grid.html#responsive-order) variations for reversing column order, these are also compatible with other grid types like `divided` and `celled` by device #2685
 - **Icon** - Added `fitted` icon variation, and new small sizes `tiny` and `mini`
 - **Input** - Added `disabled` state for inputs #2694
+- **Input** - Added ability for labeled input to be attached to both sides #2922 **Thanks @maturano**
 - **Label** - Added a new  `basic label` style, works symbiotically with other label types to provide a more lightweight style label
 - **Menu** - Added new `tabular` menu types, `right tabular`, `bottom tabular`, added many new `tabular` menu variables for customizing
 - **Menu** - Appearance of `labeled icon menu` has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before.
 - **Search** - Search now can use any server response mapping, use the `fields` parameter to pass in a mapping of server response to content **thanks @anibalmf1** #2645
+- **Site** - Added global variable `@focusedFormBorderColor` for controlling form focus border color
 - **Table** - New `fixed` table variation added for use with `table-layout: fixed;`. This also supports "..." ellipsis when used with `single line` content
 
 **[Enhancements](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)**\

src/definitions/elements/button.less

@@ -1268,8 +1268,8 @@
 /* Basic */
 .ui.basic.black.buttons .button,
 .ui.basic.black.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @black inset !important;
+  color: @black !important;
 }
 .ui.basic.black.buttons .button:hover,
 .ui.basic.black.button:hover {
@@ -1407,8 +1407,8 @@
 /* Basic */
 .ui.basic.grey.buttons .button,
 .ui.basic.grey.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @grey inset !important;
+  color: @grey !important;
 }
 .ui.basic.grey.buttons .button:hover,
 .ui.basic.grey.button:hover {
@@ -1547,8 +1547,8 @@
 /* Basic */
 .ui.basic.brown.buttons .button,
 .ui.basic.brown.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @brown inset !important;
+  color: @brown !important;
 }
 .ui.basic.brown.buttons .button:hover,
 .ui.basic.brown.button:hover {
@@ -1686,8 +1686,8 @@
 /* Basic */
 .ui.basic.blue.buttons .button,
 .ui.basic.blue.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @blue inset !important;
+  color: @blue !important;
 }
 .ui.basic.blue.buttons .button:hover,
 .ui.basic.blue.button:hover {
@@ -1826,8 +1826,8 @@
 /* Basic */
 .ui.basic.green.buttons .button,
 .ui.basic.green.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @green inset !important;
+  color: @green !important;
 }
 .ui.basic.green.buttons .button:hover,
 .ui.basic.green.button:hover {
@@ -1965,8 +1965,8 @@
 /* Basic */
 .ui.basic.orange.buttons .button,
 .ui.basic.orange.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @orange inset !important;
+  color: @orange !important;
 }
 .ui.basic.orange.buttons .button:hover,
 .ui.basic.orange.button:hover {
@@ -2104,8 +2104,8 @@
 /* Basic */
 .ui.basic.pink.buttons .button,
 .ui.basic.pink.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @pink inset !important;
+  color: @pink !important;
 }
 .ui.basic.pink.buttons .button:hover,
 .ui.basic.pink.button:hover {
@@ -2244,8 +2244,8 @@
 /* Basic */
 .ui.basic.violet.buttons .button,
 .ui.basic.violet.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @violet inset !important;
+  color: @violet !important;
 }
 .ui.basic.violet.buttons .button:hover,
 .ui.basic.violet.button:hover {
@@ -2383,8 +2383,8 @@
 /* Basic */
 .ui.basic.purple.buttons .button,
 .ui.basic.purple.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @purple inset !important;
+  color: @purple !important;
 }
 .ui.basic.purple.buttons .button:hover,
 .ui.basic.purple.button:hover {
@@ -2522,8 +2522,8 @@
 /* Basic */
 .ui.basic.red.buttons .button,
 .ui.basic.red.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @red inset !important;
+  color: @red !important;
 }
 .ui.basic.red.buttons .button:hover,
 .ui.basic.red.button:hover {
@@ -2662,8 +2662,8 @@
 /* Basic */
 .ui.basic.teal.buttons .button,
 .ui.basic.teal.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @teal inset !important;
+  color: @teal !important;
 }
 .ui.basic.teal.buttons .button:hover,
 .ui.basic.teal.button:hover {
@@ -2802,8 +2802,8 @@
 /* Basic */
 .ui.basic.olive.buttons .button,
 .ui.basic.olive.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @olive inset !important;
+  color: @olive !important;
 }
 .ui.basic.olive.buttons .button:hover,
 .ui.basic.olive.button:hover {
@@ -2941,8 +2941,8 @@
 /* Basic */
 .ui.basic.yellow.buttons .button,
 .ui.basic.yellow.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @yellow inset !important;
+  color: @yellow !important;
 }
 .ui.basic.yellow.buttons .button:hover,
 .ui.basic.yellow.button:hover {

src/definitions/elements/input.less

@@ -329,25 +329,34 @@
 }
 
 /* Regular Label on Left */
-.ui.labeled.input:not([class*="corner labeled"]) .label:nth-child(1) {
+.ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-.ui.labeled.input:not([class*="corner labeled"]) .label:nth-child(1) + input {
+.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
+  border-left-color: transparent;
+}
+.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
+  border-left-color: @focusBorderColor;
 }
 
 /* Regular Label on Right */
-.ui.right.labeled.input input {
+.ui[class*="right labeled"].input input {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
+  border-right-color: transparent;
 }
-.ui.right.labeled.input input + .label {
+.ui[class*="right labeled"].input input + .label {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
 
+.ui[class*="right labeled"].input input:focus {
+  border-right-color: @focusBorderColor;
+}
+
 /* Corner Label */
 .ui.labeled.input .corner.label {
   top: @labelCornerTop;

src/definitions/modules/dropdown.less

@@ -626,7 +626,7 @@ select.ui.dropdown {
 .ui.multiple.dropdown > .label {
   user-select: none;
   display: inline-block;
-  vertical-align: baseline;
+  vertical-align: top;
   white-space: normal;
   font-size: @labelSize;
   padding: @labelPadding;

src/themes/default/collections/form.variables

@@ -85,7 +85,7 @@
 
 /* Input Focus */
 @inputFocusBackground: @inputBackground;
-@inputFocusBorderColor: @selectedBorderColor;
+@inputFocusBorderColor: @focusedFormBorderColor;
 @inputFocusColor: @selectedTextColor;
 @inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset;
 @inputFocusBorderRadius: @inputBorderRadius;

src/themes/default/elements/button.variables

@@ -189,7 +189,7 @@
 @basicBorderRadius: @borderRadius;
 @basicBorderSize: 1px;
 @basicTextColor: @textColor;
-@basicColoredBorderSize: 2px;
+@basicColoredBorderSize: 1px;
 
 @basicBackground: transparent none;
 @basicFontWeight: normal;

src/themes/default/elements/input.variables

@@ -76,7 +76,7 @@
 @downBoxShadow: none;
 
 /* Focus */
-@focusBorderColor: @selectedBorderColor;
+@focusBorderColor: @focusedFormBorderColor;
 @focusBackground: @background;
 @focusColor: @hoveredTextColor;
 @focusBoxShadow: none;

src/themes/default/globals/site.variables

@@ -30,6 +30,7 @@
 /* The size of page text  */
 @fontSize : 14px;
 
+
 /*-------------------
     Border Radius
 --------------------*/
@@ -78,6 +79,16 @@
 /* Line Height Default For Inputs in Browser */
 @inputLineHeight: 1.2142em;
 
+/*-------------------
+    Focused Input
+--------------------*/
+
+/* Used on inputs, textarea etc */
+@focusedFormBorderColor: #85B7D9;
+
+/* Used on dropdowns, other larger blocks */
+@focusedFormMutedBorderColor: #96C8DA;
+
 /*-------------------
         Sizes
 --------------------*/
@@ -250,8 +261,6 @@
 @pinkTextColor   : @pink;
 @brownTextColor  : @brown;
 
-
-
 /*-------------------
      Alpha Colors
 --------------------*/

src/themes/default/modules/checkbox.variables

@@ -48,8 +48,8 @@
 @labelPressedColor: @selectedTextColor;
 
 /* Focus */
-@checkboxFocusBackground: @offWhite;
-@checkboxFocusBorderColor: @selectedBorderColor;
+@checkboxFocusBackground: @white;
+@checkboxFocusBorderColor: @focusedFormMutedBorderColor;
 @checkboxFocusCheckColor: @selectedTextColor;
 @labelFocusColor: @selectedTextColor;
 
@@ -61,8 +61,8 @@
 @checkboxActiveCheckOpacity: 1;
 
 /* Active Focus */
-@checkboxActiveFocusBackground: @offWhite;
-@checkboxActiveFocusBorderColor: @strongSelectedBorderColor;
+@checkboxActiveFocusBackground: @white;
+@checkboxActiveFocusBorderColor: @checkboxFocusBorderColor;
 @checkboxActiveFocusCheckColor: @selectedTextColor;
 
 /* Indeterminate */

src/themes/default/modules/dropdown.variables

@@ -191,7 +191,7 @@
 @selectionHoverBoxShadow: none;
 
 /* Focus */
-@selectionFocusBorderColor: @selectedBorderColor;
+@selectionFocusBorderColor: @focusedFormMutedBorderColor;
 @selectionFocusBoxShadow: none;
 @selectionFocusMenuBoxShadow: @raisedShadow;
 
@@ -199,12 +199,12 @@
 @selectionVisibleTextFontWeight: normal;
 @selectionVisibleTextColor: @hoveredTextColor;
 
-@selectionVisibleBorderColor: @selectedBorderColor;
+@selectionVisibleBorderColor: @focusedFormMutedBorderColor;
 @selectionVisibleBoxShadow: @raisedShadow;
 @selectionVisibleMenuBoxShadow: @raisedShadow;
 
 /* Visible Hover */
-@selectionActiveHoverBorderColor: @selectedBorderColor;
+@selectionActiveHoverBorderColor: @focusedFormMutedBorderColor;
 @selectionActiveHoverBoxShadow: @selectionVisibleBoxShadow;
 @selectionActiveHoverMenuBoxShadow: @selectionVisibleMenuBoxShadow;