Turns out we did have the correct height calculation with our custom selects. The problem was we lacked a shared line-height with our buttons and inputs.
This restores the previous `calc` math and adds a line-height that reuses the input line-height.
Sets minimum required flex styles (including an explicit starting alignment) and removes everything else.
- no need for .media-left and .media-right, we have padding utils
- no need for a .media-heading, we have margin
- no need for .media-object, we have display utils
- no need for .media-list, we have .list-unstyled util
- Instead of negative left/right margins, we selectively apply margins to the cards as needed. This way the first and last child never receive a left and right margin (respectively), so we don't need to negative indent those at the .card-deck level.
- Drops the margin-bottom override on the .card because there's no more default margin there.
- Drop the margin-bottom from the .card-deck to match our lack of margins on the card.
This and the previous commit fixes#19883.
- Drops the absolute positioning of the icons within the left/right controls. We have to keep the controls themselves positioned though since we're overlapping HTML elements here.
- No more position, left, right, or margins involved; just some justify-content and align-items.
- Add some comments for explaining which flex property-value pair does what.
- Remove the unapplied font and line-height stuff now that we're all SVGs and flexbox here.
This revamps the indicators to use flexbox instead of inline-block for added flexbility (hah). Indicators now automatically scale based on the number of elements present, and max out at the `$carousel-indicator-width` instead of always being that wide.
- Require inner element for the icon for improved customization (e.g., drop the element to replace it with your own icon font or SVG)
- Tighten up padding
- Better comments
- drop the table styles, use flex
- remove commented out code
- consolidate styles a bit
- add a huge flex-grow to the nav, making the assumption you want nav to take up most space
* 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
This pulls in some changes from #18462 to include a set of generic color variables. It doesn't include a Sass map for generating the theme colors yet, since we can't easily do that for all components, but does give a few more color choices to folks and an easier way to customize.
* 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
- fix naming of left/right controls
- drop the absolute positioning of things and rely on only 3d transforms
- remove img styles and require classes to avoid inline-block line-height stuff
Remove the border-bottom from abbr elements since that's covered with an underline in Normalize.css. Updates the docs to match and tweaks some code comments, too.
* Remove comment that duplicated some code
* Use transition mixin whenever possible
* Create a new function to reduce duplication
* Use the new `breakpoint-infix` method
Add padding to dismiss button for alerts and use position to place it. Removes extra padding on .alert-dismissible's right side, too. We could probably further simplify these things in the future as well.
* Clean up some utilities
- Align CSS properties
- In `_spacing.scss`, we had a comment saying what 'a' was for, but we removed that so this comment no longer applies
* Remove '-xs' from `.navbar-toggleable-xs` and remove duplication
* Fix outdated classes to use newer ones
* Update clearfix to use block instead of table display (also reorder properties for linting)
* update docs snippet for clearfix mixin—was apparently still using Less syntax and had old clearfix hack (even before the block change in this PR)
* Clean up _flex.scss a little
This commit just cleans up the formating of _flex.scss by changing
it so that it uses a single `@include media-breakpoint-up` instead
of multiple. It also aligns all of the CSS properties so it looks
a bit nicer.
* Remove `-xs` from flex classes
* 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
* Add some flexbox nav components
- Includes .nav-justified for inline, tab, and pill nav components
- Includes example of using the flex utils (.d- and .flex-items-) for centered nav
* redo heading hierarchy a bit
* Darken dismiss icon opacity
* Darken text on active list group items
* Darken light gray for accessibility/contrast, then update gray and dark gray to match
The new breakpiont-limited class pattern is to omit the breakpoint size when using the lowest size eg. col-xs-12 to col-12. This commit implements this pattern to the grid system.
* Explore responsive display utils, but with a twist: lowest breakpoint has no breakpoint modifier in the class name
* make floats use the same format, add float-none mixin
* make spacer utils responsive by grid tier
* update scale to add two levels, document them
* change responsive spacing utils to avoid the xs abbreviation in the class name for that tier
* update code snippet to match source
* update usage in our docs
* linter
* docs updates
Firefox requires a width and flex-basis value to size the input field correctly. Despite the width being 1%, the input will size correctly at all parent widths.
http://codepen.io/zalog/pen/bpMJmv
Fixes#21023.
Uses some math functions to determine what the offset should be. This is helpful for those who customize the size of their indicators and still want them vertically centered.
Fixes#20730.
This change computes the minimum needed height of what a single line of text would be for the custom checkboxes/radios. This is required because our custom control indicators are positioned absolutely, meaning they cannot be clearfixed or anything like that. Using a computed value means it should scale nicely in case of customization
