Moves from 1.25em to 1em to better support custom font-size-base values. Most common would probably be .875rem (14px) and current sizing garbles that into 1.09-ish, thus causing the rendering issues in #31269.
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
* sr-only -> visually-hidden cleanup
It seems the old screen-readers.md file was left behind, and forgot to rename the mixin
* Fix broken mixins for visually-hidden
New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see #31341
This rule suppresses this new behavior and reverts back to the old way.
See https://drafts.csswg.org/css-scroll-anchoring/
* feat(buttons): easier disabled state customization
* docs(migration): mention new arguments for disabled state in button-variant()
* Update migration.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Replaces #30498 by adding four new null default variables for .nav-link. Doesn't carry over font-style from the original PR though since that's rarely used, at least by default Bootstrap. Nullifies all values from that PR, too, since we count on some basic inheritance here and don't need color by default.
"screen readers" is quite reductive, as there are other assistive technologies. content hidden this way is even announced by things like Alexa/Siri etc, so it's not so much just "screen readers".
in the long run, we may even consider changing the actual classnames (maybe `.visually-hidden` / `.visually-hidden-focusable`, though admittedly that's a bit verbose).
also includes a tiny tweak to layout.md to generalise the note about using `.sr-only`
* Rename `sr-only`/`sr-only-focusable`
To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* v5: Add role=button cursor in Reboot
Ports the changes from #30562 made in v4.5 and adds them to v5. This replaces #30563 which sought to add this to the utility API, but the v4 PR shifted to implement an accessible solution vs a lone utility.
* Update reboot.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
* v5: Redo blockquote attributions
- Renames -small-* variables to -footer-*
- Updates blockquote demos with attribution to place it outside the blockquote with a figure wrapper
* Updated class name
* docs(examples): refactor blockquotes in masonry example
Co-authored-by: Gaël Poupard <gael.poupard@orange.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Update navbar docs to put .active class on .nav-link
Fixes#30652 in v5.
* Remove two selectors from navbar nav that are either unused, or duplicative
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Use a semitransparent gradient from light to dark which works on any background-color
- Store the gradient as a custom property (--bs-gradient)
- Remove `.bg-gradient-*` variants in favour of `.bg-gradient` which works even when `$enable-gradients` are enabled
- Add gradients to navbar, active page links and badges when gradients are enabled
Replaces a custom hsla() value (dunno what I was thinking when I added this) with a reassigned existing variable. This variable goes up the stack and attaches to the component-active-bg variable, derived from our primary color out of the box. Fixes#30646.
- Broke up existing theming page into separate pages
- Audited and updated each new docs page (some pages include some TBD sections)
- Update sidenav to reflect changes
- Fix links that pointed to the old Theming page
- Update docs styles to reflect recent changes
- Rewrite some bits in the Migration page
- Rename `$enable-prefers-reduced-motion-media-query` to `$enable-reduced-motion`
- Rename `$enable-pointer-cursor-for-buttons` to `$enable-button-pointers`
- Define background properties in `.form-check-input`
- Use `background-size: contain` to simplify background sizes (especially for those with linear gradients)
- Remove double `color-adjust`
- Adjust svgs to 20x20 box. This way the strokes aren't rescaled.
- Convert to Sass map
- Consolidate font-weights into single option (matching line-height for them)
- Add two new sizes and create a new scale
- Update migration docs
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
- Updates mentions of number and exact tiers
- Updates grid example to include xxl container
- Adds some scss-docs references
- Cleans up other grid mentions and docs
- Updates navbar example to include an expand at XXL variant
- Staring at my laptop, I realized I'm wasting away space. This adds a
significant amount of CSS, but it feels right already.
- Added the xxl tier with a width that divides by 12
- Motivation was originally trying to have a third column for our toc so
that our docs are more useful
* Fix spinner-grow animation
Safari seems to be interpreting the old keyframes animation as incomplete. Adding `transform` to the second frame seems to resolve the issue.
Co-Authored-By: Martijn Cuppens <martijn.cuppens@gmail.com>
* style: groups sections
- adds two nl before any section
- extract elements from wrong section ex: `mark` from `form`
* style: format comments
* style: sticks all `see`s with the description
- sticks
- renames
* style: removes not needed spaces
* style: removes not needed number like other cases
* style: stick credits with description
* style: adds missing number
* Add utility class for the user-select property
* Docs: Add new page for behavior utility classes - includes user select utility
* Update and rename behaviors.md to interactions.md
* Update sidebar.yml
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
- Remove redundant `display: inline-block` from flex children
- Remove `line-height: inherit;` which is the default value of `line-height`
- Use flex shorthand
- Improve background shorthand
- Fix removed brand margin caused by requiring containers in navbars
This is a follow-up to #29322, specifically "allowing easy placement of
the `.form-check-input` in more places." In my testing in Firefox and
Chrome, setting `vertical-align: top` removes the need to add
`float-left` to vertically align the checkbox and label text. And doing
so does not visually affect examples which do apply `float: left` via
nesting in a `.form-check`.
* Scope .form-check-input layout to the .form-check parent
* Remove margin-bottom from list-group-items in case they are label elements
* document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
- Rename and move the variable to variables file
- Move code to the grid file
- Use the mixin to generate our own classes
- Wrap in a grid classes enabled conditional
- Document the mixin
Trying to find a new way to do responsive card decks while not locking ourselves into the cards themselves. My thinking here is we can easily control the column (.col) width by the parent, but I don't know how many we need (have 0-5 now) across each breakpoint. This works for cards so far, and I think could get us equal height, too.
- `.carousel-caption` doesn't need a z-index. There are no non-static element in its containing block (`.carousel-item`)
- The `z-index` of `.carousel-indicators` is way higher than it needs to be (`15`), the highest sibling `z-index` is `1`, so it can be set to `2` to be the top layer.
* Follow-up to #29095
This PR fixes the responsive containers that were added in #29095, originally stubbed out in #25631. Apologies to @browner12 for getting that wrong.
Fixes#25631.
* update navbar as well because we cannot reset all containers uniformly
* Update navbars example to include container-xl example to ensure containers match
* rewrite responsive containers docs, add table of max-widths
* Update container docs
- Move table up to the intro
- Remove the container example because it's actually hella confusing
- Update and link to grid example as a demo instead
* Allow .page-links to get left margin.
* Add border-radius to page-links in case they have left margin
* Apply MartijnCuppens suggestion to _pagination.scss
Co-Authored-By: Martijn Cuppens <martijn.cuppens@gmail.com>
* Plus if/else Rules
* Formatting fixes
* Fix border-radius for pagination-size
* Use mixin for default pagination sizing
- Remove unsupported browsers fixes
- More consistent comment blocks
- Reorganise order of some blocks
- Add height fix for date/month/week/time inputs (#18842)
- Remove redundant type selectors
- Additional resets and theming options for `legend`
- Add date & color inputs to reboot page
- Use the same borders for text search, text inputs, textareas and date inputs
- Move code styling to reboot
Drop `color()`, `theme-color()` & `gray()` functions in favor of variables. The functions just called a `map-get()` of a map where just the variables were defined.
Also the `theme-color-level()` now accepts any color you want instead of only `$theme-colors` colors. The first value now is a variable instead of the `$theme-colors` key.
* create responsive containers
provide more flexibility and allow the user to determine when containers switch from fluid to fixed width.
* fix the base container code
this commit fixes the non-media portion of the generated CSS. I learned about the `@extends` directive and was able to put it to good use.
I create a new temporary map that contains all the main `$container-max-widths` and join it to our 2 special cases of 'xs' and 'fluid'. Then we loop through that and, with the appropriate infixes, extend our placeholder
* formatting for style
forgot to run my tests before the last push, i think these are better.
* finish incomplete comment
* fix the responsive containers
using the `@extend` directive I was able to clean up this code
* fix responsive containers in the navbar
mostly we just look through all of our breakpoints so we can include all of the responsive container classes in the tweaks we have to do for the navbar (redeclaring flex properties, don't double up on padding, etc)
* Simplify container extends
* Simplify navbar containers
* Rearrange, add comments, ensure everything is nested in $enable-grid-classes
* Reduce new CSS by using attribute selector
We avoid using `@extend` whenever possible, and this is more readable
* Update _grid.scss
* Update _navbar.scss
* Add docs for responsive containers, redesign the container layout page
* Add to the Grid example
* Remove default kbd element shadow, simplify selector while here
* Add new -shadow-inset variable so our shadows match on .form-control's, .form-select's, and .progress's
* Reuse box-shadow variables for .dropdown's, .popover's, .toast's, .modal's, and .img-thumbnail's
While #28450 overhauled a ton of forms work, the support for this custom file input was ineffective. This updates the selector to target the custom field and gray out the entire field.
Fixes#28176.
Media queries do not support CSS custom properties (CSS variables), so we've had some useless variables lying around since shipping v4. This finally removes them and the associated documentation content that explained the situation.
Fixes#29012.
* 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
Pagination used to have box shadow back in the days which required this property, but nowadays it's redundant. (see 0cd186183c/less/pagination.less (L17))
* 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.
- `background-position: 0 0;` is the default background position, so redundant
- The background position should only be animated in the x direction
- `0%` is a little shorter than `from`
- Line height & font family from html were directly overridden by body, so they were redundant thus removed
- The remaining properties are moved to body
- Shim for IE10 tags removed
- hr cleanup
- Combined styles from reboot & type
- Changed from borders to background
- This allows us to keep the color inherited.
- Opacity can be used to change the intensity
- Size attribute will not change the height instead of making the hr look like an input field
- Better variable names
- headings cleanup
- Moved all element styling to reboot
- Type will now extend the element styling. This way we will save some redundant code
- small & mark are also moved to reboot. type does not contain any element styling anymore
- font weight removed from small, this did not really made sense
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.
Currently, `$toast-border-radius` uses the value of `.25rem`. This is inconsistent with other variables such as `$btn-border-radius` and `$input-border-radius`, which uses the "global" `$border-radius` variable.
* 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
instead, only apply outline suppression if the browser wouldn't normally apply the focus outline, using the (currently experimental) `:focus-visible` pseudo-class
* update border-radius mixins
Add $enable-rounded as a keyword argument to border-raidus mixins
* Update rounded classes
- use border-radius mixins to repleace !important
- use true for $enable-rounded for rounded classes
- Add `.rounded-sm` and `.rounded-sm` #27934
* update borders docs
* Revert touch of dist files
* Revert change of border-radius mixins
* use !important in border-radius utilies classes
* update border radius classes keep only rounded-lg and rounded-sm
In a scenario where `$input-line-height` or `$input-font-size` are different than `$input-btn-line-height` and `$input-btn-font-size` the final `$input-height-inner` was wrongly calculated.
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.
* Add variable for dropdown-divider-margin-y
For us to reassign the nav-divider-margin-y variable here, we have to rearrange some of the variables.
Fixes#26660.
* bump bundlesize
With the current styles, it is not possible to nest a popover inside of
another popover if they have different placements because the arrow
styles of the parent popover will conflict with the arrow styles of the
child popover.
- Move 4.1 docs to 4.2
- Update versions everywhere to 4.1.3 with release script
- Manually bump the shorthand version in package.json
- Add 4.2 to the versions docs page
- Update some redirects
- Fix tests asset URLs
- Bump Nuget and more
Edge/Mobile appears to have moved support for `-ms-viewport` behind a flag at some point, instead supporting meta viewport directives.
Removing this altogether also fixes issues in IE11 on high-dpi displays - see https://github.com/twbs/bootstrap/issues/21780
The default font weight value for <strong> <br> in reboot was
set by a fixed value we now use the variable $font-weight-bolder
to let users override this value.
this is the opposite of `.text-nowrap`, and a forces elements to wrap onto new lines.
One use case for this is extra long button text. Bootstrap buttons by default do no wrap, so this class could be used to override that behavior.
* 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
