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