Browse Source

Add placeholder input text global variables, fix dropdown placeholder consistency

pull/3975/head
Jack Lukic 9 years ago
parent
commit
c0ef556e95
5 changed files with 11 additions and 10 deletions
  1. 2
      RELEASE-NOTES.md
  2. 6
      src/definitions/modules/dropdown.less
  3. 6
      src/themes/default/collections/form.variables
  4. 2
      src/themes/default/elements/input.variables
  5. 5
      src/themes/default/globals/site.variables

2
RELEASE-NOTES.md

@ -67,6 +67,7 @@
- **Table** - `striped selectable` table would not correctly show hover color on striped rows - **Table** - `striped selectable` table would not correctly show hover color on striped rows
**Enhancements** **Enhancements**
- **Button** - Added variables for configuring `disabled` background image and box shadow.
- **Site** - Added colored box shadow defaults. `ui message` now includes individual colored border shadows based on new site defaults. - **Site** - Added colored box shadow defaults. `ui message` now includes individual colored border shadows based on new site defaults.
- **Dropdown** - Adds new setting `minCharacters` which sets the minimum number of characters required to start filtering results #3886 - **Dropdown** - Adds new setting `minCharacters` which sets the minimum number of characters required to start filtering results #3886
- **Dropdown** - Added `1px` offset for current text so that the text position cursor does not overlap first pixel of text. - **Dropdown** - Added `1px` offset for current text so that the text position cursor does not overlap first pixel of text.
@ -76,6 +77,7 @@
- **Tabs** - Added new option `deactivate`, defaults to `siblings` which will only deactivate tab activators that are DOM siblings elements to the activating element. Setting it to <code>'all'</code> will deactivate any other tab element initialized at the same time. - **Tabs** - Added new option `deactivate`, defaults to `siblings` which will only deactivate tab activators that are DOM siblings elements to the activating element. Setting it to <code>'all'</code> will deactivate any other tab element initialized at the same time.
- **Progress** - Added progress `is complete` for returning whether success, warning, or error conditions are met - **Progress** - Added progress `is complete` for returning whether success, warning, or error conditions are met
- **Progress** - Added `onLabelUpdate` callback, this can be used to specify the exact text that should appear on the actual progress update, perhaps based on some external conditions - **Progress** - Added `onLabelUpdate` callback, this can be used to specify the exact text that should appear on the actual progress update, perhaps based on some external conditions
- **Site** - Added new `@inputColor` and `@inputPlaceholderColor` global variables that now control placeholder text styles across all components.
- **Table** - `definition table` now supports `ignored` variation to force a `first-child` to ignore its default definition stylings - **Table** - `definition table` now supports `ignored` variation to force a `first-child` to ignore its default definition stylings
- **Table-- `definition table` now supports `definition` variation to specify definition styles on an element that is not `:first-child` - **Table-- `definition table` now supports `definition` variation to specify definition styles on an element that is not `:first-child`
-**Table** - More granular variables for controlling style on first column in a `definition table` -**Table** - More granular variables for controlling style on first column in a `definition table`

6
src/definitions/modules/dropdown.less

@ -840,9 +840,9 @@ select.ui.dropdown {
.ui.default.dropdown:not(.button) > .text { .ui.default.dropdown:not(.button) > .text {
color: @defaultTextColor; color: @defaultTextColor;
} }
.ui.dropdown:not(.button):hover > .default.text,
.ui.default.dropdown:not(.button):hover > .text {
color: @defaultTextHoverColor;
.ui.dropdown:not(.button) > input:focus + .default.text,
.ui.default.dropdown:not(.button) > input:focus + .text {
color: @defaultTextFocusColor;
} }
/*-------------------- /*--------------------
Loading Loading

6
src/themes/default/collections/form.variables

@ -127,10 +127,6 @@
@inputErrorFocusBorder: @negativeBorderColor; @inputErrorFocusBorder: @negativeBorderColor;
@inputErrorFocusBoxShadow: none; @inputErrorFocusBoxShadow: none;
/* Placeholder */
@inputPlaceholderColor: lighten(@inputColor, 55);
@inputPlaceholderFocusColor: lighten(@inputColor, 35);
/* Placeholder Error */ /* Placeholder Error */
@inputErrorPlaceholderColor: lighten(@formErrorColor, 40); @inputErrorPlaceholderColor: lighten(@formErrorColor, 40);
@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 30); @inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 30);
@ -193,4 +189,4 @@
Groups Groups
--------------------*/ --------------------*/
@inlineFieldsMargin: 0em 1em 0em 0em;
@inlineFieldsMargin: 0em 1em 0em 0em;

2
src/themes/default/elements/input.variables

@ -27,8 +27,6 @@
border-color @defaultDuration @defaultEasing border-color @defaultDuration @defaultEasing
; ;
@inputColor: @textColor;
/*------------------- /*-------------------
Types Types
--------------------*/ --------------------*/

5
src/themes/default/globals/site.variables

@ -76,6 +76,11 @@
@inputHorizontalPadding : @relative14px; @inputHorizontalPadding : @relative14px;
@inputPadding : @inputVerticalPadding @inputHorizontalPadding; @inputPadding : @inputVerticalPadding @inputHorizontalPadding;
/* Input Text Color */
@inputColor: @textColor;
@inputPlaceholderColor: lighten(@inputColor, 75);
@inputPlaceholderFocusColor: lighten(@inputColor, 55);
/* Line Height Default For Inputs in Browser */ /* Line Height Default For Inputs in Browser */
@inputLineHeight: 1.2142em; @inputLineHeight: 1.2142em;

Loading…
Cancel
Save