0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Commit Graph

65 Commits

Author SHA1 Message Date
Martijn Cuppens
e2014e8ed7 Custom checkboxes and radios retheming (#27064) 2018-10-21 10:25:07 +03:00
Mark Otto
0bec1c8897
Add new variables for form feedback tooltips (#26959)
Fixes #26886
2018-09-18 21:27:02 -07:00
Martijn Cuppens
e3c0b3d3af #27112: 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 (#26887)
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 #26579 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 (#26181) 2018-04-23 21:54:40 -07:00
Jacob Müller
27f553c965 Replace "loose" HEX values with their respective variables (#25672) 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 (#25143)
* Add additional form validation examples

Fixes #24811.

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 #24831).
- 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 (#25050)
* 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 (#25020)
* 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 (#24697)
* 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 #24598

* 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 (#24767) 2017-11-15 03:32:08 +02:00
Mark Otto
bb53b32585
fixes #24553: override border-color on focus of custom select with form validation (#24695) 2017-11-06 12:04:56 -08:00
XhmikosR
34d745540d
Minor Sass consistency changes. (#24677)
* 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 (#24429)
* 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 (#23527) 2017-10-02 20:37:28 -07:00
Andrew Luca
dfc946b777 Update comment for forms mixins (#24050)
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 (#22414) 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 (#22413)
* 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 (#22151)
* Fixed some linting issues

* Run npm tasks after scss cleanup

* Revert "Run npm tasks after scss cleanup"

This reverts commit 1103a0da68.

* 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 (#21971) 2017-02-11 21:16:16 -08:00
Mark Otto
d79b556373 Fixes #21814. Also accounts for custom file inputs. 2017-02-04 17:03:42 -08:00
Brad Kent
8250bd1b21 Fix #20936 make inline checkbox/radio markup same as stacked (#20995)
* #20936 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
Mark Otto
8273e0cf82 linting 2016-10-09 16:46:47 -07:00
Mark Otto
b77b874265 fix focus shadows, if enabled 2016-10-09 16:44:04 -07:00
Mark Otto
8750b5f81c The color is already covered in the first ruleset here 2016-10-09 16:39:02 -07:00