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
