* Updated rounded utilities to fix scale, but not rename anything else
* Rename rounded-pill to border-radius-pill to match
Also reorder some variables while I'm here to make more sense
* Updated rounded utilities to fix scale, but not rename anything else
* Rename rounded-pill to border-radius-pill to match
Also reorder some variables while I'm here to make more sense
* Small copy addition
* Add example modifier class for spacing
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* v5: Promote floating labels example to component
- Adds new .form-floating
- Stubs out basics of a docs page
- Removes existing Example
* Update floating labels to support .form-select, make inputs and selects more consistent
- To do this, I made the .form-control and .form-select consistent in min-height vs height
- Removed some unused variables now
- Updated -color to be the -color because I don't know why this was any different before
- Update page to include some examples for layout, validation, and value
- Rewrite styles to not modify padding, but instead transform and opacity
* Streamline and bulletproof some things
- Apply some optimizations from code review
- Removed unecessary properties from the label
- Add some comments for what properties are required
- Move from fixed height for labels to height 100% so we can support textareas
- Improve docs a little bit, add ToC
* Move some values to variables, switch from scaling font-size to scale, update transforms
* Bring over changes from #30966 and add to them to tighten things up
* Delete the now unused example images
* Fix typo
* Allowlist the calc function
* Add transform-origin, update transform values
* Test out autofill fix
* Fix linter issue
* Mention it in the migration guide
* Bump bundlesize
* Add one more variable per review
* Shave .25rem off the height
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* v5: Add .fs-* utilities for font-size
- Adds new font-sizes Sass map
- Generates six new classes for setting only font-size
- Updates docs to mention this, including a scss-docs reference
* Update font utilities
- Make .fs-* utils for font-size use RFS
- Rename .font-weight-* utils to .fw-*
- Rename .font-style-* utils to .f-*
- Update order of utilities a bit
- Update docs to match
* Update migration docs to make note of these changes
* Be more specific in font-size docs about scale
* Update font-style abbreviation to .fst
* Fix font-weight property
* Formatting & font style utility fix
* Move to Alpha 3 migration section
* Update migration guide for more details, splitting alpha 2 stuff back to the appropriate section in Migration guide
* Tweak language on example
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
On Ubuntu, our native font-stack doesn't output the same font on Firefox and Chrome. This is [a known aliasing issue](http://fontfamily.io/sans-serif) — check at the bottom, Ubuntu 14.04. Ubuntu 18.04 (my current) doesn't use the same (Firefox uses Liberation Sans, Chrome uses the default system font Ubuntu).
I'm inclined to prefer Liberation Sans since it's closer to Arial / Helvetica. This patch already exists in Boosted, didn't notice it was missing in bootstrap until today…
BTW, our linked Smashing Magazine's system fonts post mentions this and is even more accurate since it targets the three major Linux distributions. AFAIK this is not needed since [Liberation Sans is available everywhere](http://fontfamily.io/Liberation_Sans) — but we might go back to `Oxygen, Ubuntu, Cantarell`if we want to stick to system fonts.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add .dropdown-menu-dark
* Match background color to navbar dark
* Update docs to include a navbar example
* Update dropdowns.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Replaces make-container mixin's padding-x param with gutter to match naming
- Changes value of container padding variable to match grid gutter width variable
- Uses local CSS variable for container padding
Fixes#31642
- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide
* Extra position utilities
Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires.
* Update extra position utilities
* add default position values map
* tweak examples
* add real life examples
* fix double colon
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add padding to badges
The current badges are very tightly padded, and because the top and bottom padding are the same, and aligned to the baseline, this makes badges with descenders (e.g. the "g" in "Danger") look uncomfortably close to the bottom. Adding more ample padding masks this a bit.
An alternative would be to have separate top and bottom padding, with the bottom one slightly larger than the top - but conversely, that then makes badges that contain no text with descenders, and particularly badges that contain all uppercase characters, look too bottom-heavy.
Also adding some left/right extra padding, as currently the pill badges look uncomfortably tight on the sides due to the rounding.
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>
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.
* 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>
- 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.
- 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
- 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
- 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
* 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.
* 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
* 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
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.
- 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
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.
