- Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states.
- Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding.
- Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary.
- Added support for :active states on the .list-group-item-action variant (for the current click state).
- Removed the heading and text classes and variables since we can accomplish the same thing with utilities.
- Added support for :disabled on the .list-group-item-action as well since we can use those with button elements.
- Rearranged docs to reflect all the above changes.
- Reformatted some Sass variables.
- Removes the plain-hover-focus mixin from active and disabled states; no need for them.
- Adds :active and :disabled since we can use button elements here, too.
- Wrap the disabled background-image override in an -gradients condition.
- No need to set hover and focus on disabled or active elements. Disabled has no interactivity and active will inherit the focus.
- Also removes two now unused vars.
- 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.
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.
This also fixes#21280. Previously, we were using float and clear on the individual controls, but that meant a computer height of `0` for the parent `.custom-controls-stacked`. No more problem after using flexbox though.
- we need to set margin for space between footer buttons as flexbox doesn't render HTML spaces like inline-block does
- flexbox doesn't have collapsing margins or anything, so we hack it with some :not(:first-child) and :not(:last-child) action
- Adds new flexbox.md file to utilities docs
- Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon.
- Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
Given move to flexbox, we can make this available for everyone and clean it up some.
- Simplifies the `.nav-justified` styles to build on the flex-powered `.nav` base class.
- Adds the `.nav-fill` to make nav links fill available horizontal space, but not equal width.
- Set an explicit `display: flex` on the base `.nav` class and remove the floats/clearfixes from our navs.
- Set some global styles for `.nav-link`, a departure from the previous solution that featured no predefined padding.
- Move `.nav-link` from `inline-block` to `block` given this setting was added for our tabs and pills anyway.
- Remove horizontal margin from nav tabs; let folks set that on their own from now on.
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
- 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
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
Makes it so that the container is no longer wider than the breakpoint used in the media query. This was never really an issue in rendering as the max-width handled it appropriately, but the mismatch was still incorrect.
Fixes#18054
- 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)
Originally -font-size was added in v3 to set the font-size of the <small> element. Now that we have newer, global type variables, we can use those instead for these kind of things.
Fixes#20859
With apologies, copy/paste error following on from trying to fix conflicting Hound/Travis checks for https://github.com/twbs/bootstrap/pull/20821/ slipped through before I noticed them.
* 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
- Fixes#20298 for vertical button group spacing
- Fixes#20784 for horizontal (default) button group spacing
- Alternate fix to #20823 which only applied a fix for vertical button groups
* Have same margin for <hN> as a <div> on .card-headers
Related #18726
When you use a `<hN>` as `.card-header` there is `margin-bottom: .5rem` added. The changes set the margin-bottom to 0
* Removed space
- Move and rename .img-rounded to .rounded, .img-circle to .rounded-circle
- Add new .rounded-{direction} utils
- New docs pages for border utils with TBD comments for the border property
- Removes most image examples for rounding from the content/images docs in favor of new docs page
- 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
* Allow text of custom form labels to wrap like the default ones
* Switch from using after to force line breaks to float/clear combo in stacked custom forms
* Add .img-fluid to card images in columns to ensure proper resizing
* change that variable from regular value to variable
* use calc to figure out a tighter border for card images
- Creates new flexbox grid Sass file in our docs assets
- Updates the Gruntfile to compile said new Sass file and minify the output
- Update notice on flexbox docs page for how it works
- Only enable compiled flexbox grid CSS in hosted docs site, not in dev (for easier and specific debugging of all flexbox features)
- 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
SCSS-Lint 0.49.0 modifies Shorthand linter to report lint if a shorthand
of a length not specified in the allowed_shorthands option is used.
New defaults include "4" in the list of allowed shorthands, so we are changing our configuration accordingly.
Ref: e283d16896
Refs #19990
Continues the degruntification process.
Also removes mq4-hover-shim for now,
since it doesn't yet implement the standard PostCSS plugin interface.
Here we're doing some margin swapping, so it looks a little funky. All this does is match the margin implementation and rendering across our table and flex versions of card decks.
- 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
- Remove the box-shadow and switch back to border to match .card basics
- Update the header nav margin override--since we restored the border, we need that default negative margin at the bottom
- Really we didn't need to do any of that strip units stuff to generate six new variables, two for each button size
- Using sibling selectors, we can target those split button dropdown toggles using the .dropdown-toggle-split class, and adjust padding and margin as needed
- Now, we nuke the margin-left from the ::after generated caret and tighten up the padding so that those split toggles don't look huge next to their main button
This avoids applying the reset to named anchors/placeholder links (links
without an `href`) that have explicitly been made keyboard-focusable
(using `tabindex`). This is not fool-proof - it's not
easy/straightforward to check for the actual `tabindex` value itself, to
ensure it's positive, not will this apply if a link has been "blessed"
with `tabindex` via JS. However, this should catch most common uses (and
gives a reasonably valid way around the issue for developers who, for
whatever reason, DO want to use links without `href` - as side effect,
it forces best practice of at least ensuring these links can also be
focused with the keyboard)
Mark Otto
Quy
Mark Otto
Starsam80
Jacob Müller
Bardi Harborow
Patrick Cameron
Gijs Boddeus
Jesse Mandel
Tom Lutzenberger
Stepan Zastupov
sophiegit
Chris Rebert
Brad Kent
Florian Schlittenbauer
Stefan Staynov
Cyril Kyburz
Rodrigo Waltenberg
Ken Dale
Elliot Evans
Patrick H. Lauke
Eric Nolte
Alberto Roura
Catalin Zalog
Valentine Abanosimov
tomhorvat
Johann-S
Chris Garcia
Pierre-Denis Vanduynslager
Alan Mooiman
béla
Simon Bächler
JPeer264
Matt Viteri
Bardi Harborow
Beau Smith
VarelloThemes
Kovah
mkroeders
Edd Yerburgh
Chris Garcia
NicoLB
judetucker
Bass Jobsen
Franco Moya
Juan J. Jimenez-Anca
Allan Chau
An Yang
Geremia Taglialatela
morishitter
Chris Rebert
Jerad Rutnam
heath3