* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes#25540 and fixes#26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
* Add Error checking to prevent invalid breakpoint
Error checking to prevent invalid breakpoint name
* check type rather than value
* Revert "check type rather than value"
This reverts commit 04ab1e652f.
* use of not rather than null
Previously deprecated in v4.x, this clears out the now unused Sass option and removes some unused mixins. Arguably we could remove more, but I like the hover-focus mixin and we make extensive use of it across the project.
Extrapolates the previously used selector into a new mixin that only generates valid CSS by creating psuedo-classes for `valid` and `invalid`, and nothing else.
Fixes#28380.
* Fix buttons :focus state styles
Buttons :hover and :focus state shares styles.
Buttons :focus text color on 'a.btn' is now consistent with others '.btn'.
* `:focus` styles should be in sync with `.focus`.
So shared styles with hover were copy to focus definition. Rather then using
`hover-focus` mixin which do not contain `.focus`.
- Drop hover and focus states
- Drop .badge-* variants and associated mixin for .bg-* utilities
- Drop .badge-pill for .rounded-pill utliity and adjust horizontal padding to find middle ground of .badge and old .badge-pill
- Remove unused variables
- Add default color value to .badge base class
- Update docs to reflect changes
Alternate take to #27683 that builds the modifier class based on min-width, such that list groups are stacked until the class's breakpoint is reached. This is less verbose, matches our primary responsive approach, and prevents an extra class. Unfortunately, I believe supporting flush list groups is too much code here, so I've skipped that and made a note in the docs.
Also added examples generate from our breakpoints data file with a protip for how to do equal width items.
* 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
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.
- 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
* 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
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 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
- 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.
* 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
* 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
* 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
* 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
* 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.
* 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
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.
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
