0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00

68 Commits

Author SHA1 Message Date
Mark Otto
deea117293 Add form-validation-states Sass map () 2019-01-11 21:16:50 +02:00
Martijn Cuppens
dd539094ea Custom select validation padding fix and additional custom select feedback icon variables 2018-10-23 05:43:59 +03:00
Martijn Cuppens
d0b7eb1111 Cleanup stylelint comments 2018-10-23 00:21:33 +03:00
Martijn Cuppens
e2014e8ed7 Custom checkboxes and radios retheming () 2018-10-21 10:25:07 +03:00
Mark Otto
0bec1c8897
Add new variables for form feedback tooltips ()
Fixes 
2018-09-18 21:27:02 -07:00
Martijn Cuppens
e3c0b3d3af : fix border focus border color 2018-09-02 16:25:55 -07:00
Mark Otto
0b5a8d9c98 Merge branch 'form-validation-icons' into v4-dev 2018-07-29 14:18:09 -07:00
Mark Otto
4693672cff
Update validation tooltips to use tooltip vars ()
Updates the properties and values for which we have existing variables to match our tooltips. Come 4.2, we'll create new tooltips for these.
2018-07-20 18:21:40 -05:00
Mark Otto
2d8422f5f5 fixes 2018-07-14 21:10:45 -07:00
Mark Otto
5495a19b5a
disable to fix ci 2018-07-08 18:43:40 -07:00
Mark Otto
8d8d3ef82a Restore feedback icons on validated form fields
- Only applies to textual inputs and textareas with `.form-control` and selects with `.custom-select`
- Wrap the feedback icons in a Sass variable option, $enable-validation-icons, so folks who theme can disable
- Update docs to summarize styles, mention the icons, include a textarea demo, and add mention of the Sass variable option to the Theming section
2018-07-08 15:31:18 -07:00
Mark Otto
793698a6a9
add validation styles for .form-control-file () 2018-04-23 21:54:40 -07:00
Jacob Müller
27f553c965 Replace "loose" HEX values with their respective variables () 2018-03-12 19:19:37 +02:00
Jesse Mandel
a05f1d883e add validation feedback/tooltip support to form-check-inputs 2018-01-05 10:55:13 -08:00
Mark Otto
460849ddcd
Validation tooltip example ()
* Add additional form validation examples

Fixes .

This adds .valid-feedback to our custom styles and server side examples; previously we ommitted this to suggest you don't always need valid feedback. In addition, this adds examples of the .{valid|invalid}-tooltip classes with a new subsection in the Validation docs.

* Update validation tooltip styles to remove fixed width; instead should retain itself to the parent element

* update ids

* finish docs paragraph, mention position: relative
2018-01-02 21:57:56 -08:00
Mark Otto
b01e81ed36 Rewrite custom file input
- Changes the wrapping label to a div so we can style the label instead of another element while also supporting form validation.
- Fixes form validation styles for custom file input (closes ).
- Updates docs with validation styles (also adding example feedback text while I was there) and new how it works section.
2017-12-26 16:14:08 -08:00
Mark Otto
16f1417240
Form check markup v2 ()
* match layout behaviors

* ditch the indicator as separate element for psuedo-elements on the label

* move disabled to attribute only on input

* redo default inline check to support new markup

* redo inline forms

* clean up vars

* update validation mixin to new structure

* update checks in docs

* linting for for/id attributes
2017-12-22 16:13:01 -08:00
Mark Otto
13150872c6
Rewrite input group component ()
* Rewrite input group component

* Set the feedback to 100% width for input group

* Move from .row to .form-row for tighter layout

* no need for custom feedback here, we're using browser messaging

* add input group to validation examples

* add note about validating multiple

* migration note added
2017-12-22 15:29:49 -08:00
Mark Otto
4829350a46
Rewrite custom form check backgrounds ()
* Rewrite custom form check backgrounds

Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true.

Fixes 

* restore default vars

* Revamp custom check and radio backgrounds

Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient.

* remove now unused mixin

* mention change in migration docs
2017-11-24 14:26:56 -08:00
Andres Galante
1ee9cb04bd Adds variables for form validation messages () 2017-11-15 03:32:08 +02:00
Mark Otto
bb53b32585
fixes : override border-color on focus of custom select with form validation () 2017-11-06 12:04:56 -08:00
XhmikosR
34d745540d
Minor Sass consistency changes. ()
* use `background-color` instead of the shorthand
* use `outline: 0` consistently
* fix transform order
* remove quotes from `SFMono-Regular`
2017-11-06 02:23:36 +02:00
Mark Otto
af9df8c308 update new focus and shadow properties to use vars 2017-10-25 12:30:29 -07:00
Mark Otto
4bd4ff1130 fix custom file input too 2017-10-22 12:37:45 -07:00
Mark Otto
cd4cd7fbe8 match space after comma, darken invalid/valid bg color on custom checks 2017-10-22 12:35:13 -07:00
Mark Otto
5e4964ccb8 use rgba() so it's not at full opacity 2017-10-22 12:34:47 -07:00
Mark Otto
1083e49bbe really fix indentation, reorder 2017-10-21 20:57:19 -07:00
Mark Otto
7eb8c54858 use vars, fix indentation 2017-10-21 20:55:01 -07:00
Sharrell Porter
809ce6d6ef Sass correction 2017-10-20 07:23:48 -04:00
Sharrell Porter
4f814fabd6 sync-commits erge branch 'v4-dev' into custom-checkboxes-radios-correct-color 2017-10-20 07:12:39 -04:00
Mark Otto
06641ca0b3 Gradients and shadows ()
* Update the form focus mixin to use a manual `$enable-shadows` check so we can always ensure a focus state for accessibility and consistency

* - Add new `$input-btn-focus-width` and `$input-btn-focus-color` variables.

- Replace separate `$btn-focus-box-shadow` and `$input-focus-box-shadow`
variables with unified `$input-btn-focus-box-shadow` to match our
combined variables approach elsewhere.

* Put new focus width var to use in buttons mixins

* use new button input-box shadow var

* Add a new mixin for quickly adding linear gradient to components when $enable-gradients is set to true

* use correct var

* fix focus shadows in button mixins

* Add opt-in gradients to alerts, buttons, carousel, custom radios and checkboxes, custom file input, and dropdown items

* Generate .bg-gradient- utilities

* add headings to colors page and document bg-gradient utils

* update the button color for active status, check with yiq as it's done for basic state and hover state
2017-10-19 09:03:33 -07:00
Sharrell Porter
e9c6656004 correcting color 2017-10-16 16:57:13 -04:00
Patrick Yeo
728f579286 Form Validation .valid-feedback and .valid-tooltip are unstyled () 2017-10-02 20:37:28 -07:00
Andrew Luca
dfc946b777 Update comment for forms mixins ()
Check `form-control-focus` mixin, variable name is `$input-focus-border-color`
2017-09-26 18:14:52 +03:00
Mark Otto
bde9c64ca9 Apply the invalid/valid state to the class name 2017-08-12 18:24:49 -07:00
Mark Otto
21b874d19d Merge branch 'v4-dev' into form-tweaks 2017-06-13 20:15:42 -07:00
Patrick Yeo
4cc21bbf74 () Rename for consistency $input-bg-disabled, $input-bg-focus, $input-border-color-focus, $input-box-shadow-focus, $input-color-focus, $input-color-placeholder to $input-disabled-bg, $input-focus-bg, $input-focus-border-color, $input-focus-box-shadow, $input-focus-color, $input-placeholder-color, respectively 2017-06-13 08:45:50 -07:00
Mark Otto
94ed0d901b move to mixin so we can repeat it easier and allow folks to extend to custom states 2017-06-10 16:30:26 -07:00
Mark Otto
6c214ad4c2 drop the old validation styles and docs 2017-06-06 11:27:29 -07:00
Mark Otto
4a554e5ff5 trying out new validation styles 2017-06-01 08:06:17 -07:00
Mark Otto
5463d8436b Merge branch 'v4-dev' into form-tweaks 2017-04-21 23:36:24 -07:00
Mark Otto
7efe4ddee4 Match validation mixin focus state to normal focus state 2017-04-21 23:30:06 -07:00
Patrick Yeo
dd0ce3e4b2 Rename variable $input-border-focus to $input-border-color-focus ()
* Rename variable $input-border-focus to $input-border-color-focus
* Rename variables $pagination-hover-border, $pagination-active-border, $pagination-disabled-border to $pagination-hover-border-color, $pagination-active-border-color, $pagination-disabled-border-color, respectively
* Rename variables $state-*-border to $state-*-border-color, respectively
* Rename variables $alert-*-border to $alert-*-border-color
* Rename $list-group-active-border to $list-group-active-border-color
* Rename $table-inverse-border to $table-inverse-border-color
* Rename $btn-*-border to $btn-*-border-color
* Rename $navbar-*-toggler-border to $navbar-*-toggler-border-color
2017-04-16 15:45:10 -07:00
naicko
890c6041f3 Update scss mixins to comply with scss-linting rules ()
* Fixed some linting issues

* Run npm tasks after scss cleanup

* Revert "Run npm tasks after scss cleanup"

This reverts commit 1103a0da68d1846ad592eb4a105046a939557830.

* Property sort order for grid

* Let's respest the property order in the mixins

* Respect property sort order in reboot file

* ::-ms-expand is a vendor-prefix, add it to the scss-lint disable

* Revert hover mixin comment

* Fixed missing mixin hover-focus
2017-03-18 13:06:05 -07:00
Pierre Vanduynslager
3173a72083 Remove unused input-size mixin () 2017-02-11 21:16:16 -08:00
Mark Otto
d79b556373 Fixes . Also accounts for custom file inputs. 2017-02-04 17:03:42 -08:00
Brad Kent
8250bd1b21 Fix make inline checkbox/radio markup same as stacked ()
*  make inline checkbox/radio markup same as stacked

* tweak language and remove extra blank line in snippet
2016-11-28 20:56:49 -08:00
Mark Otto
cfd6e92ff6 include .col-form-label in the form validation field mixin 2016-10-28 16:35:47 -07:00
Pierre-Denis Vanduynslager
6eb2e54a91 Use box-shadow mixin 2016-10-20 16:35:45 -04:00
Pierre-Denis Vanduynslager
7a21517a48 Set box-shadow on input if enable-shadows rather than enable-rounded 2016-10-20 14:29:20 -04:00