From c2945b608f2277ed20aecbeda8fce277f3ce3ef1 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 1 Sep 2015 15:57:36 -0400 Subject: [PATCH] Adds focused input border styles, changes dropdown selection label valign --- RELEASE-NOTES.md | 3 ++ src/definitions/elements/button.less | 52 +++++++++---------- src/definitions/elements/input.less | 17 ++++-- src/definitions/modules/dropdown.less | 2 +- src/themes/default/collections/form.variables | 2 +- src/themes/default/elements/button.variables | 2 +- src/themes/default/elements/input.variables | 2 +- src/themes/default/globals/site.variables | 13 ++++- src/themes/default/modules/checkbox.variables | 8 +-- src/themes/default/modules/dropdown.variables | 6 +-- 10 files changed, 64 insertions(+), 43 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 7ab875b46..4de2622de 100644 --- a/RELEASE-NOTES.md +++ b/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)**\ diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index e32f5a8bc..e7607570a 100755 --- a/src/definitions/elements/button.less +++ b/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 { diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index 45420c067..a877c06a7 100755 --- a/src/definitions/elements/input.less +++ b/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; diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index d750497e3..abcec9b7e 100755 --- a/src/definitions/modules/dropdown.less +++ b/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; diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables index a54f59833..14423e30d 100644 --- a/src/themes/default/collections/form.variables +++ b/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; diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables index 13703d4f4..411bbc93f 100644 --- a/src/themes/default/elements/button.variables +++ b/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; diff --git a/src/themes/default/elements/input.variables b/src/themes/default/elements/input.variables index 67f1a9338..1f97e1ea0 100644 --- a/src/themes/default/elements/input.variables +++ b/src/themes/default/elements/input.variables @@ -76,7 +76,7 @@ @downBoxShadow: none; /* Focus */ -@focusBorderColor: @selectedBorderColor; +@focusBorderColor: @focusedFormBorderColor; @focusBackground: @background; @focusColor: @hoveredTextColor; @focusBoxShadow: none; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 3e0ce7c54..ca38cf114 100644 --- a/src/themes/default/globals/site.variables +++ b/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 --------------------*/ diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables index 3c539ee6d..1363bbe35 100644 --- a/src/themes/default/modules/checkbox.variables +++ b/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 */ diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index 66e854316..0a1e1ff2a 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/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;