Commit Graph

862 Commits

Author SHA1 Message Date
Mark Otto
7745730e41
Revert border-color change (#36238)
* Revert `border-color` change

* Add new border-color-translucent for when we want optional alpha-transparency in our border-color

Apply to drodpowns, modals, offcanvas, popovers, and toasts

* bundlewatch
2022-04-29 13:59:41 -07:00
Mark Otto
544cf8df48 Add input-disabled-color Sass variable 2022-04-28 23:26:38 -07:00
Julien Déramond
54e0af0303 Clean up last $variable-prefix usages 2022-04-28 21:56:46 -07:00
Ryan Buckley
74be17edef Add black to colors map 2022-04-12 20:49:36 -07:00
GeoSot
8aaeb3cb6b
Remove tooltip and popover styling as it is handled by Popper (#34627)
* Remove not needed css form tooltip & popover as it is made by popper
Remove tooltip margin variable, as popper needs margin to be zero

* Remove popover left/top initializers as they are handled by popper

* nullify `margin` variable and add deprecation message

* Document change in migration guide

* Update _variables.scss

Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2022-04-12 18:16:18 -07:00
XhmikosR
7648848e04
Update devDependencies (#36120)
* Update devDependencies

* @babel/core                ^7.17.8  →  ^7.17.9
* @popperjs/core             ^2.11.4  →  ^2.11.5
* clean-css-cli               ^5.5.2  →   ^5.6.0
* eslint-plugin-import       ^2.25.4  →  ^2.26.0
* find-unused-sass-variables  ^4.0.3  →   ^4.0.4
* karma-rollup-preprocessor   ^7.0.8  →   ^7.0.7
* sass                      ^1.49.11  →  ^1.50.0
* stylelint                   14.2.0  →  ^14.6.1

* Fix currentcolor case
2022-04-08 09:17:00 +03:00
louismaxime.piton
238afd94b3 New CSS var 2022-04-06 13:27:56 -07:00
Louis-Maxime Piton
0ceaad3ab4
Use new CSS vars (#36098)
* Proposal to use new CSS var when it could be used.

* Bundlewatch

Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-04-04 13:51:21 -07:00
Mark Otto
e342142b61
Train PR: CSS variables for accordion, cards, navs, and modals (#36071)
* Convert accordion to CSS vars

* Update accordion.md

* Convert navs to CSS variables

* Split up CSS vars

* bundlewatch

* fix vars

* Convert cards to CSS vars

* Convert modals to CSS variables

* Bundlewatch

Co-authored-by: Geremia Taglialatela <tagliala.dev@gmail.com>
2022-03-28 15:05:37 -07:00
Julien Déramond
7f35bc5b65
Define Pagination font size CSS var (#35917)
Co-authored-by: Mark Otto <markd.otto@gmail.com>
2022-03-24 21:14:42 -07:00
Mark Otto
9e73b6a13c
v5.2.0 migration updates (#36038) 2022-03-19 11:58:22 -07:00
Mark Otto
acf6ea74a7
Add additional root variables, rename $variable-prefix to $prefix (#35981)
* 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
2022-03-13 10:13:09 -07:00
Mark Otto
e72a090aee Updates -color to use rgba() 2022-03-11 09:15:33 -08:00
Mark Otto
c73480c636 Adjust border-radius values and add some new utilities
- Updates global border-radius values for a more modern appearance
- New .fw-semibold
- New .rounded-4 and .rounded-5
2022-03-11 09:10:37 -08:00
Mark Otto
63145c8bc6 Fix some instances of lazy Sass math when multiplying new CSS var based border-width 2022-03-11 09:04:13 -08:00
Mark Otto
2e75ec3c41 Convert popovers to CSS variables 2022-03-08 14:53:53 -08:00
Mark Otto
91312486b2 Deprecate the tooltip-arrow-bg color since we're using CSS variables to set tooltip colors 2022-03-08 14:53:53 -08:00
Mark Otto
9030f57db7
Split CSS vars for padding values (#35921)
* Split CSS vars for padding values

Make these few components consistent with where we're heading with other components. Had to add some new Sass variables to handle the dropdown-header element, but not a huge deal. This ensures we can drop the combined variable in v6 when we're ready.

* Update scss/_dropdown.scss

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* Deprecate dropdown-header-padding var

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-03-01 12:52:00 -08:00
Mark Otto
efc5914667 Replace instances of Sass vars for CSS variable versions of border-color and border-width 2022-02-28 11:40:32 -08:00
Erik Faye-Lund
4ee1465acf Prefer Linux-specific fonts over Arial
Some Linux distributions (like Debian) have fontconfig aliases for Arial
that picks specific fonts. But such generic aliases might be less
desirable than the known-good Linux specific fonts.

This fixes a problem on my setup where Liberation Sans is aliased as
Arial, even when Noto Sans is available. Liberation Sans doesn't support
a weight of 500, so we end up rendering headers at the normal weight of
400, which makes them stand out less. Reordering the Arial fallback
makes us instead pick Noto Sans over Lieration Sans, which does support
a weight of 500, and makes headers stand out again.

While we're at it, fixup the reboot documentation to match, and change
the comment about Helvetica Neue; that's not a "Basic web-fallback" font,
it's the UI font on older iOS and macOS versions.
2022-02-25 18:16:26 -08:00
maks
d74870a749 move theme-colors (vars+map) after color tints definitions
In this way we can use color tints other than grays in our custom theme, w/o having to extend it later (e.g `$primary: $indigo-600;` ). This could be done in the project variables file, but i believe most developers just include a full local copy of  `scss/_variables.scss` before the the original `default` file and change the values the need (maybe also removing the !default flag) so that it's easier to track changes and custom values during upgrades.
2022-02-25 14:59:15 -08:00
Mark Otto
28d9aaf670
Add z-index for .toast-container (#35859)
* Add z-index for .toast-container

- Adds positioning and z-index to toast container so that it has a system-declared layer in relation to other components.
- Updates docs to use the class better

Fixes $34028

* Remove unnecessary z-index from docs examples
2022-02-25 08:49:02 -08:00
Mark Otto
db61cf3d6a Base .text-muted on body color 2022-02-24 13:24:34 -08:00
Gaël Poupard
37f3977e6d
Rely on border-width for <hr> size (#35491)
* fix(reboot): revert hr styles to v4 implementation

* docs(cheatsheet): add a hr example

* fix(reboot): currentColor is the initial border-color value

* Document hr element in Reboot docs

* Update migration guide

* Update scss/_variables.scss

Co-authored-by: Mark Otto <markd.otto@gmail.com>
2022-02-22 10:02:47 +02:00
Mark Otto
f7f450ec59
Add null modal-footer-bg variable (#35858)
Fixes #35782
2022-02-18 01:14:18 +02:00
Mark Otto
918a86b425
Correct the horizontal padding on grid containers (#35825)
* Correct the horizontal padding on grid containers

* Don't halve the container-padding-x variable
2022-02-14 15:07:17 -08:00
Macinto5h
d2986daa12 Add zebra striping for table columns
Co-Authored-By: Macallan Camara <44030647+Macinto5h@users.noreply.github.com>
Co-Authored-By: XhmikosR <xhmikosr@gmail.com>
2022-02-06 15:59:18 -08:00
XhmikosR
cb46ad633c
Reprocess inline SVGs with the latest SVGO (#35484) 2021-12-15 09:29:17 +02:00
Alexander Gitter
ba7863a5bb
Fix typo in $purples (#35466)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-12-07 12:34:16 +02:00
Mark Otto
9f099d3e4f
Move reassigned Sass maps for colors to another stylesheet (#34942) 2021-11-15 13:03:48 +02:00
devhoussam
c331a150cd Add Sass variables for hr background-color and border
Co-Authored-By: Houssam Hammouda <11141564+devhoussam@users.noreply.github.com>
2021-10-05 15:49:35 -07:00
Mark Otto
57d80fcd32
Separate container classes from $enable-grid-classes option (#35005)
* Separate container classes from enable-grid-classes optoin

* Document the new option

* Mention in migration guide

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-10-05 19:46:33 +03:00
Geremia Taglialatela
4fffcf7232
Use Sass variable instead of RGB components (#35017)
All other `rgba()` calls use a Sass variable, except for the ones fixed in this commit
2021-09-28 18:18:02 +03:00
Dominik Crha
dbe0ad49ab
Add border-radius sizes to small and large .form-selects (#34853)
Fixes #34852

Co-authored-by: Dominik Crha <crha@havit.cz>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
2021-09-07 13:35:35 -07:00
ghost_32
6cf52ed5f7
Fix $dropdown-link-hover-color variable color value in _variable.scss (#34779) 2021-08-23 10:18:29 +03:00
Mark Otto
612d235faf
Add check to rgba-css-var function for body or bg (#34699) 2021-08-10 17:16:48 +03:00
Mark Otto
e72916e5b7 Update color and background-color utilities
- Adds new functions to generate additional Sass maps
- Adds new root variables for rgb() versions of our theme colors, plus a few extras
- Adds ability to change the alpha transparency of text color and background color utilities with new utilities, inline styles, or local CSS var
- Updates documentation for color and background-color utilities pages
- Deprecates .text-black-50 and .text-white-50 since those (and additional transparency levels) can be generated on the fly

Change approach slightly to prevent cascade
2021-08-03 17:06:06 -07:00
Jaume Sala
39b7c75b13
Add new placeholder component (#31859)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Jaume Sala <jaumesala@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
2021-08-03 08:59:00 -07:00
Mark Otto
f64df40dfa
Update input-bg to use body-bg (#34651) 2021-08-03 18:27:49 +03:00
TheFakeCake
9ef7ca5156 Make default $accordion-icon-color consistent
Change the $accordion-icon-color variable default value to
$accordion-button-color
2021-07-25 21:06:42 -05:00
Gaël Poupard
054f8781a8
fix(forms): prevent color control from shrinking (#34445)
* 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>
2021-07-14 09:19:28 +03:00
Mark Otto
0fc117cec5
Add null $card-box-shadow variable (#34440)
Fixes #34421

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-07-08 09:44:55 +03:00
Mark Otto
47bbd945f0
Add maps for all colors, document how to extend color utilities (#32319)
* Add maps for all colors, document how to extend color utilities

* Updates to make this more functional for v5

- Moves color maps into _variables.scss for now (felt weird to split them out when the variables are there)
- Adds a new function, map-merge-multiple(), and updates docs that reference combo-map
- Updates code snippet and docs guidance about how to extend the color utils to handle this

* Update site/content/docs/5.0/customize/color.md

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-07-06 14:31:20 -07:00
Mark Otto
359ed099e5 Add horizontal collapse support 2021-07-05 17:22:29 -10:00
Mark Otto
45d26de728 Variablize backdrop for modal and offcanvas 2021-06-25 13:41:15 -07:00
Mark Otto
dd824f2d3e
v5.1: Add optional CSS grid (#31813) 2021-06-22 19:51:16 -07:00
Mark Otto
34db122ecc Small typos, closes #34249 2021-06-19 16:30:31 -07:00
Mark Otto
be17444756
Replace / division with multiplication and custom divide() function (#34245)
* 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
2021-06-14 09:35:30 -07:00
Gaël Poupard
dbda13d5ef
fix(forms): unitless line-height for floating labels (#34161)
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-06-03 19:02:46 +03:00
Simon Ihmig
649c2bb0bf
Add missing transition to .form-select (#34034)
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>
2021-05-28 09:20:31 +02:00