* 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
