* Tweak the accessibility/reduced motion text
include mention of carousel slides, remove the (now inaccurate, as Firefox 63 includes it too) mention that support is limited to Safari/macOS
xref https://github.com/twbs/bootstrap/issues/27525
* Add new callout for reduced motion
* Add variable to control prefers-reduced-motion media query support
* Add callout about prefers-reduced-motion to all components currently using animation which are affected
This change follows exactly what was done for the `$grays`, `$colors`, and `$theme-colors` lists in #23260. This allows for easy addition of new breakpoints or grid containers also.
When gradients are enabled there is still a hover state on disabled
buttons since the hover rules apply to background-image and disabled
rules apply to background-color. This applies the logic already present
in dropdowns to buttons. This fix was originally proposed by @ysds.
Firefox currently seems extremely fickle - with `pan-y` if fires pointercancel as soon as a touch strays even a pixel or so vertically.
While `touch-action: pan-y` would be ideal (allowing users to scroll the page even when their finger started the scroll on the carousel), this prevents a swipe that isn't perfectly/only horizontal to be recognised by Firefox.
Blockquote footer font size is currently hardcoded to 80%, implying (in a comment) that this would result in the default font size. However, since the blockquote font size itself is variable, this is not necessarily true, and 80% of anything actually results in an arbitrary font size.
80% as a default is still fine.
* add 'lighter' and 'bolder' font weight classes
these are 2 special values for font weight, that will give their content a font-weight value of 100 more or less than their inherited font-weight.
probably doesn't fully fulfill this issue, https://github.com/twbs/bootstrap/issues/23969, but it's a start
* Update .stylelintrc
* add 'lighter' and 'bolder' variables per @mdo 's request.
* Redo input height on .form-control
- Use the already present -height variables on .form-control
- Consolidate the select size and multiple overrides into the .form-control base class instead of sm/lg modifiers
- Remove the Sass extends from input groups since it picks up too many selectors
* Prevent height on textareas
* Fix focus box shadow of custom ranges
* Put `:focus` selector right after `.custom-range`
* Remove unnecessary `outline: none`
* Fix box-shadow issues in IE/Edge
* Better align
* Fix thumb vertical positions in IE/Edge
* Fix incorrect formula of thumb vertical positions in Webkit
* Fix an incorrect comment
* Fix incorrect box-shadow-width
Now `.custom-control` will have height equal to `$font-size-base`
Fix custom checkbox and radio top position (we can't subtract rem from unit)
`$line-height-base - $custom-control-indicator-size` is not valid
Because `$line-height-base` is a unitless variable and `$custom-control-indicator-size`
is a unit (rem) variable
- Only applies to textual inputs and textareas with `.form-control` and selects with `.custom-select`
- Wrap the feedback icons in a Sass variable option, $enable-validation-icons, so folks who theme can disable
- Update docs to summarize styles, mention the icons, include a textarea demo, and add mention of the Sass variable option to the Theming section
- Fixes#25656 where custom selects had the wrong focus shadow
- Fixes#26668 where custom selects had no inset shadow (also closes#26572 which had the wrong form classes on the first example anyway)
By applying the transition: CSS property only to classes that are
active during sliding, we avoid an unnecessary, non-zero-time
animation that although mostly invisible, does interfere with e.g.
z-index based parallax
`<dialog>`, in browsers that support it, has user agent styles of `dialog { display:block; ...} dialog:not([open]) { display:none; }`
by forcing it to `display:block` in the shim, the dialog is shown even when closed. There's no clean way to shim this for non-supporting browsers,
but arguably these browsers would have further problems with pure `<dialog>` usage anyway, and it's up to authors to then use different elements/shims.
* update docs path from docs/4.0/ to docs/4.1/
* bump version to 4.1.0
* Update redirects to work for 4.1 docs move
* Update docs version switcher to include latest and link to 4.0 docs
* re-run dist
* Update package-lock.json
* Update docs-navbar.html
1. It's == "it is"
2. The subject of the sentence is "Only one" (not "these") so the verb must agree with it.
Feel free to do nothing with this change, use it, etc - I just saw this while reading through the code.
* Making use of `prefers-reduced-motion` media query
As discussed in #25249 - if a user (Who is using Safari / iOS) requests
reduced motion in their system settings, we should avoid transitions.
* Ignoring prefers reduced motion for CSS Linting
* Updating copy clarifying the reduce motion functionality in accessibility.md
* added the styling
* added the documentation
* update for one rule per line
* fix hound error: trailing whitespace
* trimmed off vendor prefixes
* Add note about track and thumb
* Psuedo-elements must be split across multiple rulesets to have an affect
* Fix firefox inner focus
* Seems that FF is the only one affected by this
* Add support for gradients
* Add labels, clarify min/max changes
* add step example
* add custom range vars
* Move helpful code comments
* Add .carousel-fade option to Sass
* Document example of the fade carousel
* more logical warning of the .active class on carousel items
Currently bootstrap only provides 4 variations of `width` and `height` css utilities, which are:
1. 25%
2. 50%
3. 75%
4. 100%.
Here, I'm adding `auto` to the list. This is useful when we need to reset the width/height value
back to the browser default value at some point.
* Prevent print utils from overriding all other display utils
Fixes#25221.
I agree with the referenced issue—this is unexpected and also causes a serious bug when mixed with other utility classes. This wasn't an issue in v3 given we had different utilities for hiding that weren't focused on display property.
* Add printing changes to migration docs
* unrelated heading sentence case change
* List out all .d-print- classes
When changing `$input-border-width`, `$input-height-border` does not change and `select.form-control` `custom-select` `custom-file` will still have `$input-height` which is resolved from `$input-btn-border-width`
This will work in cases when want controls with border, and buttons without.
Temporary fix will be to override 2 variables
```
$input-border-width: 2px !default;
// which is
// $input-height-border: $input-btn-border-width * 2 !default;
$input-height-border: $input-border-width * 2 !default;
```
* Use `$component-active-bg`, `$component-active-color` in custom-control-indicators and pagination for checked, indeterminate, and active states
* Button and Forms focus colors should be based on `$component-active-bg`
When using the `media-breakpoint-between` or `media-breakpoint-only`
mixins with a custom breakpoint map – not defined as `$grid-breakpoints`
– the mixin incorrectly defaults back to the global `$grid-breakpoints`
map in certain situations. This commit correctly passes on the
`$breakpoints` argument to the other mixins called within the block.
* Deprecate hover media query shim and mixins
Fixes#25195.
This never was completed or fully implemented, and the docs are inaccurate as to what browsers are currently affected by this stickied hover problem. This PR aims to update the docs and deprecate the shim from our mixins and only return the pseudo-classes. To reflect the order of these states used elsewhere (e.g., our button styles), I've also updated the order of each within the mixin.
* Mention in docs and variables that it's deprecated
* 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.
