diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 7b0c727b2..203ac8588 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -27,11 +27,13 @@ - **Build Tools** - Adjusting `site.variables` will now rebuild all UI, instead of just `site.less` - **Divider** - `vertical divider` inside `ui grid` now accounts for column padding - **Dropdown** - Dropdowns now automatically observe changes in `menu` and will update selector cache with new additions +- **Form** - Added placeholder color rules for IE, `ms-input-placeholder` - **Form Validation** - Form validation now has `minCount`, `maxCount`, and `exactCount` for validating multiple selections - **Grid** - `celled grid` now removes internal cells on mobile and tablet when used with `doubling` grid responsive variation - **Grid** - `equal width` now works without `row` wrappers - **Grid** - rows can now be `stretched` as well as `middle aligned`, `bottom aligned` and `top aligned`! +- **Input** - Added placeholder color rules for IE, `ms-input-placeholder` - **Label** - Labels now have `active` and `active hover` states - **Menu** - Added `stackable` menu variation for simple responsive menus - **Menu** - Added many new variables to menu diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 9f5bee600..53e0ccbb4 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -266,12 +266,19 @@ .ui.form ::-webkit-input-placeholder { color: @inputPlaceholderColor; } +.ui.form ::-ms-input-placeholder { + color: @inputPlaceholderColor; +} .ui.form ::-moz-placeholder { color: @inputPlaceholderColor; } + .ui.form :focus::-webkit-input-placeholder { color: @inputPlaceholderFocusColor; } +.ui.form :focus::-ms-input-placeholder { + color: @inputPlaceholderFocusColor; +} .ui.form :focus::-moz-placeholder { color: @inputPlaceholderFocusColor; } @@ -280,12 +287,19 @@ .ui.form .error ::-webkit-input-placeholder { color: @inputErrorPlaceholderColor; } +.ui.form .error ::-ms-input-placeholder { + color: @inputErrorPlaceholderColor; +} .ui.form .error ::-moz-placeholder { color: @inputErrorPlaceholderColor; } + .ui.form .error :focus::-webkit-input-placeholder { color: @inputErrorPlaceholderFocusColor; } +.ui.form .error :focus::-ms-input-placeholder { + color: @inputErrorPlaceholderFocusColor; +} .ui.form .error :focus::-moz-placeholder { color: @inputErrorPlaceholderFocusColor; } diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index 5e88ea408..9da4ba53a 100755 --- a/src/definitions/elements/input.less +++ b/src/definitions/elements/input.less @@ -60,12 +60,16 @@ ---------------------*/ /* browsers require these rules separate */ -.ui.input input::-webkit-input-placeholder { + +.ui.input input::input-placeholder { color: @placeholderColor; } .ui.input input::-moz-placeholder { color: @placeholderColor; } +.ui.input input::-ms-input-placeholder { + color: @placeholderColor; +} /******************************* @@ -143,6 +147,11 @@ .ui.input input:focus input::-moz-placeholder { color: @placeholderFocusColor; } +.ui.input.focus input::-ms-input-placeholder, +.ui.input input:focus input::-ms-input-placeholder { + color: @placeholderFocusColor; +} + /*-------------------- @@ -163,6 +172,9 @@ .ui.input.error input ::-moz-placeholder { color: @placeholderErrorColor; } +.ui.input.error input ::-ms-input-placeholder { + color: @placeholderErrorColor; +} /* Focused Error Placeholder */ .ui.input.error input :focus::-webkit-input-placeholder { @@ -171,6 +183,9 @@ .ui.input.error input :focus::-moz-placeholder { color: @placeholderErrorFocusColor; } +.ui.input.error input :focus::-ms-input-placeholder { + color: @placeholderErrorFocusColor; +} /******************************* Variations @@ -202,9 +217,6 @@ } /* Transparent Inverted */ -.ui.transparent.inverted.input input::-moz-placeholder { - color: @transparentInvertedPlaceholderColor; -} .ui.transparent.inverted.input { color: @transparentInvertedColor; } @@ -212,6 +224,16 @@ color: inherit; } +.ui.transparent.inverted.input input::-webkit-input-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input input::-moz-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input input::-ms-input-placeholder { + color: @transparentInvertedPlaceholderColor; +} + /*-------------------- Icon