* Add additional root variables, rename $variable-prefix to $prefix
- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout
* Bundlewatch
* Support floating labels on `.form-control-plaintext`
* Update floating-labels.md
* Apply suggestions from code review
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
* fix(forms): prevent color control from shrinking
Fixes#34195
Setting `min-width` alongside `max-width` wouldn't make any sense IMHO. The only concern I have is whether we should introduce a dedicated variable for said width?
* feat(forms): introduce ` $form-color-width`
* feat(forms): use ` $form-color-width`
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Convert bulk of division to multiplication
* Use custom divide() function instead of Dart Sass math module for greater compatibility
* Apply suggestions from code review
* Fix functions
A selectbox is styled in a very similar way as an input (`.form-control`), including border-color and box-shadow. So it can be assumed it should apply the same CSS transition for these properties when focused, but this was missing.
Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>
There are 5 places where [readonly] selector is used. I have replaced with :read-only for consistency.
fix for https://github.com/twbs/bootstrap/issues/33101
Co-authored-by: Harish <halodoc@ip-192-168-43-211.ap-southeast-1.compute.internal>
* 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>
- 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
Mark Otto
HDPham
amirhossein-karimi
Mark Otto
Sebastian Podjasek
The Fake Cake
XhmikosR
Gaël Poupard
Dominik Crha
Simon Ihmig
harishhalodoc
Patrick H. Lauke
Dmytro Yaremenko
Gaël Poupard
Emilio Cobos Álvarez
Martijn Cuppens
Nikita Mikhaylov
Catalin Zalog