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)
* Fixes#20775 without adding extra width and an important flag
* Since we're now getting the extend, we don't need the extra position relative
* rerrange
* getting min-height from the extend already
- Rather than mix multiple properties in our color utilities, this splits all color and all background utils into separate classes.
- Adds new .text-white class to help lighten text color for darker backgrounds
- Restores two-mixin approach to generating semantic grid columns (now with 'make-col-ready' and 'make-col')
- Removes need for .col-xs-12 by restoring the mass list of all grid tier classes to set position, min-height, and padding
- Adds an initial 'width: 100%' to flexbox grid column prep (later overridden by the column sizing in 'flex' shorthand or 'width') to prevent flexbox columns from collapsing in lower viewports
Refs #19990
Continues the degruntification process.
Also removes mq4-hover-shim for now,
since it doesn't yet implement the standard PostCSS plugin interface.
- Remove background-color from header and footer in inverse cards (fixes#19841)
- Update border override for header and footer in cards; only need to declare a new color
- Update the selector for targetting blockquote footers in cards
- Both classes do about the same thing, but with different names
- Clarifies docs for .m-x-auto requiring a fixed width block element for it to work
- Add missing heading for clearfix section in docs (unrelated)
- Flexbox responsive behavior fixed with specific .col-{breakpoint} classes now added
- Dropped the make-col mixin in favor of a column-basics placeholder that we can extend across our grid infrastructure
- Updated docs to use required .col-xs-12 (as a safeguard for when folks enable flexbox mode--this isn't necessary in default grid mode)
- Update flexbox grid docs to include responsive docs, tweak some other bits too
- Rename -height to -height-base to match other vars
- Drop use of -height across the board and rely on it to be inherited
- Adjust padding of .dropdown-header to account for different line-height of h6 heading element (this needs refactoring for variables and rems also)
In SCSS, the quotes were included verbatim in the resulting CSS, which isn't valid syntax for the `font` property.
Removing the quotes fixes the syntax error and does not cause any SCSS compiler error.
[skip sauce]
[skip validator]
I'm aware that currently cards are a lot simpler than buttons right now
but this may change in future and it feels cleaner to be able to create
new card styles without needing to know the internals of how they're
implemented.
Changes grid and container sizes to `px`, as the
viewport pixel size does not depend on the font size.
The actual em values were inconsistent with the docs,
while the docs were not the same as the comments:
* `sm` breakpoint was 34em (544px) not 480px.
* `lg` container max-width was 60rem (960px), less gutter than `md`.
Changed to 940px, same as Bootstrap 3.
* `xl` container max-width was 72.25rem which is 1140px not 1156px.
Changed to 1140px matching the comment but not the docs.
Addresses #17070 and #17388.
If we want to support namespaced import:
```scss
.twbs {
@import 'bootstrap';
}
```
We cannot use `selector &`, see sass/sass#1817.
`fieldset[disabled] &` is not needed as we no longer support IE8.
- Simplifies variables usage
- Makes components and brand variable usage more consistent (dark bg and white text throughout instead of some mixed light and dark bgs)
- Very likely means lower contrast and thus no more AA compliance (we'll want to fix that eventually obviously)
- no real need for everything to be 100% shared
- padding looked and felt too large for inputs but not for buttons
- tying forms and buttons seems fine, but throwing in pagination feels wrong
We have it set to `1` right now just to avoid compilation errors, but
it’s been replaced everywhere with our new spacer classes anywho. We’ll
likely want to remap that var to custom component vars though (e.g.,
`$pagination-margin` instead of `$spacer-y`).
