Responsive automatic column resets weren't working because they inherited their `max-width` from lower grid tiers. This was because we were resetting the `width`, not the `max-width`.
The premise for #22376 was that if we removed the `max-width` and `flex` properties, we could use the column classes as `width` utilities. The problem that I didn't remember at the time is that column classes have horizontal `padding` on them. This doesn't work for setting `width`. Perhaps more importantly, this causes #22649—the automatic sizing of columns is broken with the absence of `flex` styles.
/cc @sachinsinghi
- add .col-*-auto to the extend in our grid framework mixins so it gets padding
- this means we can avoid the col-12 classes in our docs for the responsive variants
* 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
— Moves print display utils to display utils file
— Removes all other .hidden- utils
— Expands on .invisible and it's mixin to provide options for visibility: visible and visibility: hidden
* Drop -x and -y as they're all the same
- Also move -width to elsewhere in the vars because it makes no sense by spacers.
- Update values of -x and -y across main Sass and docs Sass.
* Update docs to reflect changes; link to spacing utils from options page
- <progress> element didn't allow animation, labels overlaid, multiple bars, etc.
- Revamps CSS to use something more similar to v3's implementation
- Ditches variant mixin for `bg-` utils
- Rebuilds docs to match, including adding a new Height section for customizing that.
Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
- removes original outline removal (hah)
- replaces it with an explicit `outline: 0` on `.btn`
- instead of replicating `:hover` for `:focus`, uses custom and themed `box-shadow` for an "outline"
- not mapped to the `$enable-shadows` variable because accessibility
Trying to simplify our output here by revamping these selectors. We overcomplicated things by setting hover styles for nearly every state (disabled and active included), and we set them in the wrong order.
This commit does the following:
- Reorders states so disabled comes before active, thereby removing the need to set disabled-active styles.
- Removes all focus and hover styles from disabled states as those will naturally inherit from the default button state.
- Renamed `.open` to `.show` to fix dropdown toggle highlighting.
- Tweaked some indendation in the Sass.
* 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
* Remove comment that duplicated some code
* Use transition mixin whenever possible
* Create a new function to reduce duplication
* Use the new `breakpoint-infix` method
* 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)
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
Creating max-width images is not dependent on the display, so setting it is redundant. Cleans up the comments and implementation of the mixin as well.
Fixes#20767
- Fixes issues between float and flex grid systems where container wouldn't fill the available width in Chrome & FF (but would in Safari)
- Fixes#20681
- Fixes#17621 (basically same issue as above issue)
