Commit Graph

138 Commits

Author SHA1 Message Date
Mark Otto
0622a59897 fixes #22908 2017-06-26 07:59:20 -07:00
Patrick H. Lauke
ff5c75510d Rename .form-control-static to .form-control-readonly-plain 2017-06-14 19:51:50 -07:00
Mark Otto
7e5085b407 move from .gutters-sm to .form-row to be super explicit about intended use case 2017-06-13 22:11:29 -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
d6b0334a4e remove icons for now 2017-06-06 22:45:37 -07:00
Mark Otto
58b7239c6c add valid state 2017-06-06 21:53:23 -07:00
Mark Otto
6c214ad4c2 drop the old validation styles and docs 2017-06-06 11:27:29 -07:00
Mark Otto
d2c9f3f00a flesh out invalid styles on .was-validated 2017-06-05 23:00:14 -07:00
Mark Otto
4a554e5ff5 trying out new validation styles 2017-06-01 08:06:17 -07:00
Mark Otto
dc3af6711d Change how input and select height is computed
— Previously we weren't including the border-width on the computed height, leading to alignment issues.

— New system utilizes three variables (not ideal, but straightforward) for computing these heights. One for the vertical border, one for the line-height/font-size/padding dance, and one to add those together.

— Updates CSS across forms and custom forms to use new sizing. Special note here: form validation icon sizing uses the inner variables because background-image doesn't bleed into borders unless explicit background-clip.
2017-04-22 11:56:01 -07:00
Patrick H. Lauke
7056f70240 Remove cursor: not-allowed styles 2017-04-10 22:10:20 +01:00
Mark Otto
296c99020c Revamp button and input vars while fixing #21587 (#22287) 2017-03-28 09:28:27 -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
Mark Otto
02e0fdbd52 Remove cursor: pointer; (#21812)
* Remove most of custom cursor: pointer; implementations

* turns out that's not so much of a thing
2017-01-23 22:15:28 -08:00
Mark Otto
b350e60e82 use align-items on .form-inline to keep items from growing too much (#21461) 2016-12-28 19:08:33 -08:00
Mark Otto
8a3d0d344b use var 2016-12-27 14:17:11 -08:00
Mark Otto
8721ff8d6b fix inline checks 2016-12-27 14:17:11 -08:00
Mark Otto
4ba5bfb7cb add some vars 2016-12-27 14:17:11 -08:00
Mark Otto
96986bb4a3 Use calc() on .col-form-label padding calculations
Fixes #21135.

There's a height mismatch here because we're setting padding on the labels, while inputs get padding *and* a top+bottom border. This now uses calc to determine the exact height needed to match labels to inputs.
2016-12-25 15:48:44 -08:00
Mark Otto
04d48ba504 Replaces #21270 with proper fix
Rather than overriding this just on inline form examples, this should be for all static form controls to match inputs.
2016-12-25 15:48:44 -08:00
Mark Otto
4cd426963b vertically center .form-group contents in inline forms
fixes broken inline form example mentioned in #21407
2016-12-25 15:48:44 -08:00
Mark Otto
eb2e1102be Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389)
* remove the $enable-flex variable option

* remove bootstrap-flex.css dist file and it's grunt task

* remove the separate flex css file for docs; it's all the same now

* remove flexbox docs (porting some to the main grid docs in next commit)

* clean up few grid docs bits to simplify copy, start to mention flexbox

* port relevant flexbox-grid.md content to grid.md

- clean up mixins
- update how it works section
- bring over sizing and alignment sections

* remove the $enable-flex from the options.md page

* update lead paragraph to mention flexbox

* update migration to mention loss of ie9 support

* remove mention of flexbox dist file

* clarify IE support

* making a note

* remove flexbox variant mentions from component docs

- updates docs for media object, navs, list group, and cards to consolidate docs
- no more need to callout flexbox variants since it's now the default

* remove $enable-flex if/else from sass files

* remove flex dist files

* update scss lint property order to account for flex properties

* linting

* change to numberless classes for autosizing, wrap in highlighting div

* bump gruntfile and postcss to ie10

* redo intro sections

* rearrange

* phew, redo hella grid docs

- rearrange all the things
- consolidate some bits

* remove reference to flexbox mode

* more border action for demo

* Make some changes to the .card's in .card-deck's to ensure footers align to the bottom
2016-12-21 20:26:17 -08:00
Gijs Boddeus
1c2f372aad Overwrite margin-bottom on form-control-static (#21270)
* Overwrite margin-bottom on form-control-static

In the documentation the form-control-static class has been used on a p element.
On the regular vertical form the margin bottom of the p element gets overwritten by a mb-0 class.
In the inline form example this class hasn't been applied, therefore the p element gets a margin-bottom.

To prevent this behavior we can add a margin-bottom of 0.

* Update _forms.scss
2016-12-20 14:45:08 -08:00
Tom Lutzenberger
e1653edb95 Add variables for transitions (#21345)
* Add variables for transitions

* Add variables for transitions
2016-12-19 20:33:17 -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
Florian Schlittenbauer
959c4e527c Fix incorrect select height calculation (#21171) 2016-11-28 13:33:11 -08:00
Mark Otto
e17e75b757 Update inline forms (updated docs and new flexbox styles) (#21212)
* fix form-inline with flex enabled
* grunt
* fix alignment of labels
* shorter if syntax
* add new form example to docs for now
* update inline form docs usage guidelines
* responsive margins
* better margin utils
* fix sizing of .form-check
* flexbox alignment of .form-check
* no need to change direction
* support custom controls in inline form, for default and flex modes
* add example of custom select and checks to docs
* remove hidden and visible label variants since we cover that in the usage guidelines at the start and include hidden labels everywhere
* use property value instead of layout name
* apply to all labels
* add a visible label, space it out
* add id
2016-11-26 16:55:18 -08:00
Mark Otto
0c467e7b29 Match the height of select.form-control with input.form-control
Uses a local variable and some calc love to counteract the border-width (times 2) from the height of the select. Fixes #17194 and nullifies #19967.
2016-10-09 18:04:30 -07:00
Mark Otto
9ac7e868df remove un-needed comment 2016-10-09 16:18:12 -07:00
Mark Otto
53ce4da835 add transparent border to match .form-control height 2016-10-09 16:17:48 -07:00
Mark Otto
55e130f88f Update static form control
- Remove margin-bottom override in favor of .mb-0 utility class
- Apply the input line-height styles to match
- Remove the min-height to match the input
2016-10-09 16:16:13 -07:00
Mark Otto
cab2d5951d Ensure input groups behavior appropriately in inline forms
Overrides the default width: 100% with an auto. Fixes #20752.
2016-10-09 16:00:30 -07:00
Mark Otto
59d0679250 Only override input border-radius as part of .form-control to avoid bug with iOS Safari (alt fix for #20247) (#20695) 2016-10-02 18:28:37 -07:00
Mark Otto
bb4af05d22 Fixes #20799: Apply same color change to disabled inline radios/checkboxes (#20826) 2016-10-02 18:15:55 -07:00
Mark Otto
425e3d407e Bring back some 'help text' love for forms with .form-text
- Includes new class
- New docs to support it
- Rearranged older docs
2016-05-10 08:24:38 -07:00
Mark Otto
73d9815343 Merge branch 'v4-forms-cleanup' of https://github.com/twbs/bootstrap into v4-forms-cleanup 2016-05-09 19:25:42 -07:00
Mark Otto
35c11b69df Update checkboxes and radios docs
- Add lighter gray text to disabled state for .form-check
- Separate radios and checkboxes example
- Clarify docs
2016-05-09 11:00:36 -07:00
Mark Otto
f5d889c385 update classes for inline form to new checkbox options 2016-05-08 23:14:48 -07:00
Mark Otto
546149f004 Fixes #19771: Enable .form-control-sm/lg on select.form-control 2016-05-08 17:31:02 -07:00
Mark Otto
d8c898b172 linting 2016-05-08 17:11:17 -07:00
Mark Otto
dde85e9888 Redo checkboxes and radios
- Move disabled radio and checkbox styles to Reboot
- Collapse .radio and .checkbox into single class, .form-check
- Collapse .radio-inline and .checkbox-inline into single class, .form-check-inline
- Require classes for sub-elements in both new classes
2016-05-08 16:05:27 -07:00
Mark Otto
8b8f5d0ca6 nuke commented out css 2016-04-23 15:03:18 -07:00
Mark Otto
6764171404 Avoid hacking around the temporal input bug in iOS
- Rather than use CSS hacks, let's avoid needing to hack anything
- Creates a new Reboot entry to simply reset the appear of the temporal inputs, thereby avoiding the problem entirely
- Less than ideal for conveying affordance on iOS, but given bugginess of the input itself, seems a decent tradeoff
2016-04-23 14:56:36 -07:00
Mark Otto
9f2ab98026 Merge branch 'v4-dev' into v4-forms-cleanup 2016-04-23 14:24:08 -07:00
Patrick H. Lauke
d239fbb5f2 Suppress IE/Edge additional white/blue colors for focused <select> 2016-04-12 08:06:10 +01:00
Mark Otto
0a4d3155ab Fixes #18573: Change name of .form-control-label to .col-form-label (and .form-control-legend to .col-form-legend) to reiterate use for only grid layouts 2016-04-08 21:05:23 -05:00
Mark Otto
91627de4de fix up broke forms styles and docs example for the grid 2016-04-08 20:58:36 -05:00
Mark Otto
80144d74d7 Merge branch 'v4-dev' into v4-forms-cleanup 2016-04-08 20:55:19 -05:00