* 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
* 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.
