* Add min-width to body when printing
This should address some inconsistencies between browsers when printing. It applies a min-width to the body so that the content better resembles what your might see on your screen. I've made it a variable for easy customizing, too.
* Don't underline buttons when printing
* Add basic print styles for page and body size to create a semi-consistent print experience across browsers
* Add additional form validation examples
Fixes#24811.
This adds .valid-feedback to our custom styles and server side examples; previously we ommitted this to suggest you don't always need valid feedback. In addition, this adds examples of the .{valid|invalid}-tooltip classes with a new subsection in the Validation docs.
* Update validation tooltip styles to remove fixed width; instead should retain itself to the parent element
* update ids
* finish docs paragraph, mention position: relative
- Drops the hover-focus mixin for standard :hover
- Adds explicit :focus styles to match button, input, etc with a box-shadow
- Adjusts z-index values to ensure the layers go initial, hover, active, focus
Fixes#24838.
The append and prepend classes vertically aligned items in the center
For textareas this meant the addon would aling vertically instead of stretch and have it's contents vertically aligned
these changes fix that so everything is aligned how it should be
Closes#23319. Both `.text-muted` and `.btn-outline-secondary` (and indeed all secondary items) make use of `$gray-600`. New value provides a contrast ratio of 4.69.
Explicitly re-adds the "hand" `cursor:pointer` for non-disabled `.btn`, `.close`, `.navbar-toggler` elements, as well as forcing `page-link` pagination controls to always have the "hand" cursor (even if an author uses it on, say, `<button>` elements for a dynamically updating in-page pagination).
Controversial, as everybody jumped on the bandwagon following this article https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b - which does have its merits of course, but there are also counter-arguments like http://kizu.ru/en/issues/cursor-pointer/
And seeing the amount of issues we've seen following the change, and the potential complexity needed to consistently address the cursor issue (see https://github.com/twbs/bootstrap/issues/24156 where i explore how the cursor needs to be based on "intent", and how that's tough to determine), I'm favouring an opinionated take here of just reintroducing the `cursor:pointer`.
- Changes the wrapping label to a div so we can style the label instead of another element while also supporting form validation.
- Fixes form validation styles for custom file input (closes#24831).
- Updates docs with validation styles (also adding example feedback text while I was there) and new how it works section.
* Remove unnecessary float
- since parent btn-group is displayed as inline-flex, the child elements are placed left to right by default.
* Cleanup of reset rounded corners
- Remove `border-radius :0` since it is enough by each reset of left and right side
- A `.dropdown-toggle` selector should not be used for reset rounded corner since it does not have border-radius property. Instead use .dropdown-toggle as negation pseudo-class.
* Restyle code element, clean up variables
- Removes the padding and background-color
- Changes the color to a brand color ()
- Add new variables to kbd element styles to account for removing the code ones
- Remove overrides that were needed previously
* only break between words, and override it in the pre
* make file inputs 100% wide
* scope custom file changes in input group for sizing
* shorter button labels for responsive
* narrower cards
* button was too wide
* downsize
* fewer links in pagination
* redo cell text
* improve overflow docs
* match layout behaviors
* ditch the indicator as separate element for psuedo-elements on the label
* move disabled to attribute only on input
* redo default inline check to support new markup
* redo inline forms
* clean up vars
* update validation mixin to new structure
* update checks in docs
* linting for for/id attributes
* Rewrite input group component
* Set the feedback to 100% width for input group
* Move from .row to .form-row for tighter layout
* no need for custom feedback here, we're using browser messaging
* add input group to validation examples
* add note about validating multiple
* migration note added
* chore: sync with twbs (#1)
* Make styling of grouped option buttons class-based
Referencing #23728, styling grouped radio and checkbox buttons should not require the data-toggle attribute.
* Fix installing deps in our webpack docs
* Fix nested cards on card group (#24766)
* Update popper.js to v1.12.9. (#24797)
* Don't run postcss for `dist/css/*.min.css` files. (#24676)
* Change the text color to dark on bg color warning examples (#24805)
* Remove unused file and bundle ie-emulation-modes-warning.js with docs.min.js (#24825)
* Remove the unused assets/js/ie10-viewport-bug-workaround.js.
* Combine ie-emulation-modes-warning.js with docs.min.js.
* Typos in grid.md (#24828)
Fixed typos in offsetting section of grid.md
* Fix dropup example code
* Update devDependencies. (#24829)
* Add support for fractional viewport widths (zoom/high-dpi displays) (#24299)
* Change breakpoint max- calculation to fractional values
* Update docs to reflect fractional max-width breakpoint values
* Add fractional max-width to offcanvas example
* Add documentation and SCSS comment for fractional viewport support
* Add a simple script to generate SRI hashes for our assets. (#24814)
* Allow us to run our unit test on differents jquery version
* Run karma tests in parallel.
* Update typography docs (#24863)
* closes#24450
* Rewrite custom form check backgrounds (#24697)
* Rewrite custom form check backgrounds
Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true.
Fixes#24598
* restore default vars
* Revamp custom check and radio backgrounds
Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient.
* remove now unused mixin
* mention change in migration docs
* lets the centered modal have any height (#24803)
* Custom select updates (#24699)
* Add support for size attribute on custom selects
* Add large custom select, document it and the small variant
* fix custom select focus state
* fix custom file input focus styles
* remove empty line
* Update package.json. (#24582)
1. Use the same jQuery version in jspm
2. Update the files to only include the source and dist folders
* Use Jekyll's `smartify` filter when possible. (#24866)
* Darken outline hover color to match default button hover (#24150)
* Fix Issue #24144
Alter button-outline-variant mixin to darken hover and active background in same fashion as filled button.
* Fix Issue #24144
Filled button on hover should utilize the same color-yiq mixin so that theme buttons match
* default values, fix mixin
* rename it
* document it
* add migration note
* fixes#24728
* Remove unused CSS. (#24872)
* tab.js: do not remove fade class if there's no initial active pane
* Restore currently unused variables (#24891)
* Replace lint-vars.sh with a Node.js script. (#24860)
Also, include it in the `css` npm script since it's instant.
* Fix docs horizontal scrollbar (#24878)
* Fix docs horizontal scrollbar in Components > Modal
* Add overflow to docs example class
* Drop the handleUpdate() variant
While I understand the variant covers the "get a particular plugin instance" case from http://getbootstrap.com/docs/4.0/getting-started/javascript/#programmatic-api it seems weird that we do it here but not everywhere else in the docs (randomly checking other pages, we seem to stick to the documented methods as written on those pages). As this isn't properly explained as is, and as it adds nothing (more of a preference for authors), it would be easier to just drop the variant and stick with the documented method as outlined later on in the same page (avoids having to go off on a "why should you use this instead of that" tangent here).
* Combine path and remove variable used in one place. (#24873)
* Update devDependencies and gems. (#24876)
* Override padding on radio input label (#24899)
We could tell folks to nix the class, we could tell them to override it, or we could add another modifier of some kind to address this. None of them seem particularly useful, but the padding override feels the most approachable and clearly documentable. Added this here to close#24844.
* Update README.md (#24912)
* Work around Travis failures.
Note that we should revert this when the issue is fixed.
* Revert the Travis workaround. (#24926)
The issue has been fixed.
* add .col-form-legend-lg and .col-form-legend-sm classes
* document .col-form-legend-{size}
* trash .col-form-legend completely
One class fits all
* Update forms.md
* consolidate copy
* property order
* Fix Issue #24144
Alter button-outline-variant mixin to darken hover and active background in same fashion as filled button.
* Fix Issue #24144
Filled button on hover should utilize the same color-yiq mixin so that theme buttons match
* default values, fix mixin
* Add support for size attribute on custom selects
* Add large custom select, document it and the small variant
* fix custom select focus state
* fix custom file input focus styles
* remove empty line
* Rewrite custom form check backgrounds
Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true.
Fixes#24598
* restore default vars
* Revamp custom check and radio backgrounds
Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient.
* remove now unused mixin
* mention change in migration docs
* Change breakpoint max- calculation to fractional values
* Update docs to reflect fractional max-width breakpoint values
* Add fractional max-width to offcanvas example
* Add documentation and SCSS comment for fractional viewport support
* Add .modal-dialog-centered for optional vertically cenetered modal
Fixes#23638
* adds modal-dialog-centered class to docs and removes margin to avoid generating a vertical scrolling
* mention limitations
* fix aria attr
* Add `width: 100%` to the .modal-content for the centered version. Adding it here to avoid adding another selector by limiting it to the centered modal modifier.
These were using `z-index: 2` to "Place active items above their
siblings for proper border styling". However, using `z-index: 1` is
sufficient for accomplishing that goal.
In input-group, there were also three `z-index: 3` rules for the
hover/focus/active states. I reduced these to `z-index: 2` since they
just needed to be "one more than normal" (i.e. one more than what is now
`z-index: 1` after my changes).
These changes can be verified by viewing the documentation pages for
Button group, Input group, List group, and Pagination before and after
this commit and observing that the active elements are still "above"
their siblings, so their borders look correct.
* Update the form focus mixin to use a manual `$enable-shadows` check so we can always ensure a focus state for accessibility and consistency
* - Add new `$input-btn-focus-width` and `$input-btn-focus-color` variables.
- Replace separate `$btn-focus-box-shadow` and `$input-focus-box-shadow`
variables with unified `$input-btn-focus-box-shadow` to match our
combined variables approach elsewhere.
* Put new focus width var to use in buttons mixins
* use new button input-box shadow var
* Add a new mixin for quickly adding linear gradient to components when $enable-gradients is set to true
* use correct var
* fix focus shadows in button mixins
* Add opt-in gradients to alerts, buttons, carousel, custom radios and checkboxes, custom file input, and dropdown items
* Generate .bg-gradient- utilities
* add headings to colors page and document bg-gradient utils
* update the button color for active status, check with yiq as it's done for basic state and hover state
* fixes migration forms guides
* removes container from Horizontal form
* adds col-form-label sizes on form docs
* removes .form-control-label from forms.scss
* add note to migration
* Fix media-breakpoint-between
When compiling .scss that uses media-breakpoint between with xs as the lower bound or xl as the upper bound, a compilation error can occur due to $min/$max being set to null, or the resulting .css can be invalid (see issue #23965).
(This is basically the same fix that was applied to media-breakpoint-only a short time ago).
* Update _breakpoints.scss
Make houndci-bot recommended changes.
Overriding the focus outline for links within the dropdown menu
causes accessibility issues for keyboard-only users. This
removes the override, reenabling the browser's default focus
outline.
* use a trailing slash when possible
* use https when possible
* remove a few redirected links
* consistently use `https://popper.js.org/`
* fix `iconUrl` in nuget files
* change Jekyll Windows guide to the official one
1. Instead of having two selectors, we use the `.list-group-item` class and have coverage for list items and anchors.
2. Rather than override all border values, we only override what we set with `border-top`.
Fixes#23360 by restoring just the offset class generation to our grid
framework mixins. Also restores the `make-col-offset` mixin.
Docs have been restored to illustrate this behavior and merged with the
newer margin utilities examples.
I suggest removing `color: #FFF` from the `badge` class, because it is
provided by the `badge-<modifier>` classes along with a
background-color, whereas there is no corresponding background-color
provided on the `badge` class itself.
Background
----------
According to the documentation:
> [badge] Requires one of the contextual, color modifier classes for `color` and
> `background-color`.
That is, color and background color should be provided by a modifier
class, rather than the badge class itself.
e.g. `<span class='badge badge-primary'>4</span>`
In general, providing a `color` property without also providing a
`background-color` should be avoided. [W3 QA tips]
In this context, this is a problem only if someone creates a `badge`
without providing a modifier. Such an omition may be difficult to trouble-shoot,
because this will most likely yield white text on a white background.
[W3 QA tips](https://www.w3.org/QA/Tips/color)
Uses some if/else action to ensure there's readable text on hover. Swapped out a hex value to a variable while I was in there.
Fixes#23398, fixes#23351.
* Remove remaining references to v4 Alpha
This commit removes the remaining refrences to the v4 Alpha website and replaces them with the
corresponding v4 Beta ones.
**Note:** We have to hard code the current docs version at some places. Wouldn't it be good to have a `/docs/latest/` redirect to solve this "issue" in the future?
* Don't update the domain in the CNAME file
* Fix to Chrome inheritance bug (#22872)
* Remove box-sizing from html
box-sizing removed from html and order of wild card selected and html selector swapped to maintain correctness of comments.
The class ".border" (css/utilities/_borders.scss) is set the border-color to "$gray-200".
So I see that it would be nice to create a variable for the border color "$border-color". Because the default border should not always be "gray-200".
Another thing, there is a "$border-width" variable. Would not it be better to use this variable to set the default width of the border?
When focused, these buttons styled as links still give good visible focus indication through the underline, so this should not be a concern. Closes#22655
Use `display: block` since we're not really using any flex styles on the `.carousel-items` (only their controls and indicators). For the indicators, since moving to `width`, our indicators grow to fill available space, so we need to change `flex: 1 0 auto` to `flex: 0 1 auto` to prevent that.
Part of an update to align the naming schemes across our components.
- Renames .popover-title to .popover-header
- Renames .popover-content to .popover-body
Refs: #22092
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
— 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.
* Replace backdrop with simple noop mouse listener
As discussed in https://github.com/twbs/bootstrap/pull/22422 the current
approach of injecting a backdrop (to work around iOS' broken event
delegation for the `click` event) has annoying consequences on
touch-enabled laptop/desktop devices.
Instead of a backdrop `<div>`, here we simply add extra empty/noop
mouse listeners to the immediate children of `<body>` (and remove
them when the dropdown is closed) in order to force iOS to properly
bubble a `click` resulting from a tap (essentially, method 2 from
https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
This is sufficient (except in rare cases where the user does manage to tap
on the body itself, rather than any child elements of body - which is not
very likely in an iOS phone/tablet scenario for most layouts) to get iOS to
get a grip and do the correct event bubbling/delegation, meaning the regular
"click" event will bubble back to the `<body>` when tapping outside of the dropdown,
and the dropdown will close properly (just like it already does, even without
this fix, in non-iOS touchscreen devices/browsers, like Chrome/Android and
Windows on a touch laptop).
This approach, though a bit hacky, has no impact on the DOM structure, and
has no unforeseen side effects on touch-enabled laptops/desktops. And crucially,
it works just fine in iOS.
* Remove dropdown backdrop styles
* Update doc for dropdowns and touch-enabled devices
- 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
instead of flex column, use wrap and an explicit flexbox break with flex-basis 100% on the navbar-collapse.
add some additional container styles for enabling flex behavior when content isn't immediate child of .navbar
- Justified and fill nav variants need .nav-item classes on the anchors in addition to .nav-link
- Fix broken styles for the .nav-justified class which wasn't actually doing what we needed it to
- revert back to display block for list items to prevent unwanted behaviors
- fixes a handful of other linked issues (see main thread)
- updates docs to include more utilities for the one example
* 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
The actual available size of the navbar toggler icon is 30px, but the
SVG uses a 32 unit grid. This commit uses a 30 unit grid and updates
icon accordingly.
* Get this party started by removing mention of Normalize.css
* Nuke the old comment, consolidate to a single line and number as appropriate
* Bring over styles for HTML element from Normalize to Reboot
* Move margin override for body element from Normalize to Reboot
* Drop the block reset for HTML5 elements in IE9- from Normalize given we dropped IE9 support
* Building on previous commit, do the same thing for figure, figcaption, and main
* Remove IE9- display from Normalize given our browser support
* Drop IE8 figure margin because we're IE10+
* No need for the h1 overrides because we reset these font and margin styles anyway in _type.scss already
* Drop Safari 6 b and strong normalization because we're Safari 8+
* Remove mark styles for IE9- from Normalize
* Remove old iOS audio fixes from Normalize
* Remove IE9- display for progress from Normalize
* Remove more IE9- rules from Normalize
* One more IE9- display removal for canvas element
* Move pre overrides from Normalize to Reboot
* Move over some link resets to Reboot, drop others
- Move over background-color and text-decoration
- Drop focus outline change given it affects the offset on hover of
focused links
* Move over more code element resets, consolidate with pre overrides, too
* Move over sub and sup wholesale
* Move over img normalization to Reboot
* Move over SVG override too
* - Drop dupe hidden, but add comment for it
- Move over template
- Move over summary
* Remove bulk of @viewport comment
* edit down that code comment
* consolidate html-based normalizations
* update comments
* Consolidate abbr styles
* move over more type elements
* move over hr changes
* move over form controls and more
* move over button resets
* move over firefox button changes
* move over search changes and more
* we nuke all these styles for fieldsets anyway, so outright remove them
* no need for those, we override them
* move over legend, fieldset, progress
* line break
* delete normalize file
* linting
* update comment
* clarify docs mentions of normalize and reboot
* remove normalize excludes from linter
* remove normalize excludes from cli task
* linting
* callout license since we forked part of normalize
* Improve comments, move table background reset to .table class instead of in reboot
* trailing space
* Make container in navbar to occupy full width even on smallest breakpoint
* Fix typo in comment
* Apply fix only on smaller breakpoint
* drop the comment as chrome doesn't have a bug here
* remove obvi comments
* proper fix for #21801
- ensures .progress-bar text is vertically centered should the height of the .progress-bar change by matching the line-height and height values
- we can't use flexbox here because the inner text of an element doesn't count as a flex item
* fix segmented buttons
changed flex-direction to row
centering is now done by align-items instead of justify-content
this way there is no need for flex property on the .btn inside .btn-group
* Update _input-group.scss
Tried redoing this in flexbox, but it falls apart really quickly. Any changes in height of the cells throws it all off since the rows become columns (and thus, content across columns cannot be equally sized). Rather than implement something with such glaring flaws, I'm nuking it outright.
- Renames .pos-f-t to .fixed-top, adds .fixed-bottom and .sticky-top
- Updates utilities Sass to be split across more files (one for position, sizing, and spacing)
- <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.
- since we're column to start, need to set row.
- note that flex-direction cannot be inherited, so we have to set it twice.
- apply the horizontal padding again to .nav-link.
- remove the .nav-item styles (un-needed).
- remove previous .nav-link styles as they were un-nested and potentially problematic in old placement should someone mix more navs in here.
since we're no longer using the .nav as a base class, we need to bring over some base styles for redoing browser list styles and setting flex in motion.
also brings with it some .nav-link styling. we're still using this global class, but with this small modification for alignment of content in responsive modes.
- 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.