Commit Graph

108 Commits

Author SHA1 Message Date
Craig Wayne
c81a694ff3
Use CSS box-shadow variables in shadow utility classes (#38816) 2023-07-27 22:46:12 +02:00
Serhii Babakov
33ad33843a Update display utility 2023-03-24 19:32:36 -07:00
Julien Déramond
039f3d1c8b
Remove comments from scss/_utilities.scss (#38181) 2023-03-07 08:32:09 +01:00
Louis-Maxime Piton
23d20fa54f
Utilities: add 0 value to link-underline-opacity (#38131) 2023-03-02 07:45:25 +01:00
Julien Déramond
0d27f3c284
Remove useless comment from scss/_utilities.scss (#38104) 2023-02-22 12:09:15 +01:00
Mark Otto
3ce4fedaa2 Avoid inheritance issues on border-width utilities 2023-02-04 17:40:20 +07:00
Louis-Maxime Piton
9042efd0f8
Deprecate the Sass var and remove any occurence of the .text-muted (#37890) 2023-01-16 15:55:28 -08:00
Louis-Maxime Piton
8265927fc1
CSS: rename some variables to be consistent (#37804)
* Fix

* fix(review)
2023-01-06 11:46:03 -08:00
Julien Déramond
ffbe6e9246
Drop unused .bg-body-emphasis (#37824) 2023-01-06 11:41:28 -08:00
Louis-Maxime Piton
fd1ec97bd3
Docs: Small enhancements (#37803)
* Consistency with the doc

* Bring a class to avoid weird behavior

* Consistency + Add some explaining text

* fix(color)
2023-01-05 19:59:59 -08:00
Mark Otto
d70b5db2e0
Add new link utilities, icon link helper, and update colored link helpers (#37762)
* Add new link utilities, update colored link helpers

* Remove commented out code

* Fixes

* Remove examples changes

* Fixes and copy

* Fix icon-link instances on homepage

* Bump bundlewatch

* Fix node-sass issue for rgba() function bug

* More bundlewatch

* One more time after merge

* Add callout for a11y

* Hover and focus-visible

* Add a11y callouts

* Remove duplicate for now

* More code review feedback
2023-01-03 22:23:46 -08:00
Mark Otto
9e17b2b34c
Focus ring helper and utilities (#33125)
* Add global variables for box-shadow focus rings

* Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs

* fix variable name

* Add CSS variables for global focus styling, document it

* Move to CSS vars section

* Update scss/_nav.scss

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>

* Helper and utils

* Fix bundlewatch

* Change 'Focus ring' in sidebar so that the page can be visible

* Minor typo fix

* fix merge

* Revamp some more, improve docs

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
2022-12-29 14:19:22 -08:00
Mark Otto
fc3f4b67d6
Add dark mode support (#35857)
* Add dark mode to docs

* Minor fix: missing space indentation

* Minor fix: revert utilities/z-index added-in modification

* Remove prev: and next: from doc because extracted to another PR

* Use .bg-body-tertiary in all Utilities > Overflow examples

* fix example

* Fix up spacing examples

* Update box-shadow Sass variables and utilities to auto-adjust to color modes

* Remove unused docs class

* Refactor form styles to use CSS variable for background images on .form-check and .form-switch

* Fix docs selector

* Rename shortcut for clarity

* Heading consistency

* Reintroduce missing 4th grid item in Utilities > Spacing example

* Fix bundlewatch

* .bd-callout* rendering is OK so removing comments in the code

* Update scss/_utilities.scss

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

* Fix gutters example styling

* Fix text colors on background utils docs

* redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken

* fix some color utils examples

* Deprecate mixin notice

* Deprecate notice for list-group-item-variant() mixin

* Revamp new link CSS vars

* Use map-keys in some each Sass files

* Remove list-group-item-variant mixin ref in sass loop desc

* Display CSS vars scoped to our built-in dark mode

* Revert previous commit

* Fix list group variant link

* Fix typo

* Remove imports of alert/list-group mixins in scss/_mixins.scss

* Small formatting + comments removal in scss/_content.scss

* Fix alert links colors

* fix dropdown border-radius mixin

* fix link color and underline again, this time using CSS var override for color var and fallback value for the underline

* fix colors on docs navbar for dark mode

* remove two changes

* missing ref

* another link underline fix, just use sass vars for link decoration for now

* missing color bg docs, plus move dropdown override to scss

* more changes from review

* fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin

* Few fixes around type

- Restored CSS variable for color on headings, this time with a fallback value
- In conjunction, restored and wrapped the default CSS var with a null value check
- Split headings and paragraphs docs in Reboot, elaborated on them

* Restyle custom details > summary element in docs

* Rewrite some migration docs

* fix form checks

* Fix up some navbar styling, tweak docs callout

* Fix select images, mostly for validation styling

* Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs

* Update site/content/docs/5.2/components/scrollspy.md

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

* Apply suggestions from code review

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

* mention form control css vars in migration guide

* Tweak grid and flex docs background examples

* clarify some docs

* fix some more things

Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-28 22:30:26 -08:00
Daniel Raymond
5f67d38bb2
Grid Gap Updates (#37413)
* Grid Gap Updates

- added column-gap
- added row-gap

* Grid Gap Updates

* Bundlewatch update

* Apply suggestions from code review

Co-authored-by: Daniel O <dobiekwe@byteworks.com.ng>
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
2022-11-15 18:51:44 -08:00
Mark Otto
0968db8099
Add z-index utilities, .z-* (#37317)
* Add z-index utilities, .z-*

* Fix missing comma in _utilities.scss

* Fix bundlewatch

* Fix lint

* Update site/content/docs/5.2/utilities/z-index.md

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

* custom appearance

* linter

Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-10-22 17:13:39 -04:00
Daniel Raymond
708a3a0e39
Utilities for overflow and object fit (#36848)
* Added "overflow-x" and "overflow-y"

- Having the same properties as overflow but for just the x and y axises
- Usecase being I want my y axis to be scrollable but not my x axis
- E.g a card with a vertical list of items.

* Added "object-fit" utilities

- The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
- A responsive alternative to using background-img for a resizable fill/fit image.

* Updated documantation for the overflow utilities

- Now includes docs for `overflow-x` and `overflow-y` utilities

* Placeholder shortcode updated

- Can now choose to render an img tag or svg
- The image contains a base64 svg generated within the template
- example shortcode updated to detect, replace and render preview of 'img' tags as well

* New documentaion for Object Fit added

- Documentation added for the 'object-fit' util

* Updated spell checks issues

* Update object-fit.md

* Update overflow.md

* Update object-fit.md

* Updated markup to address HTML Validation Errors

- error: Bad value  for attribute "src" on element "img": Illegal character in scheme data: space is not allowed.
- info warning: Self-closing tag syntax in text/html documents is widely discouraged; it's unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you're using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool.

* Updated Fix

- Added Legibility to the img markup (example.html)
- Fixed issue with example not working properly (because image closing tag no longer has "/>" )

* update values by step of 0.25 in bundlewatch.config

The following values in .bundlewatch.config.json have been updated:
- ./dist/css/bootstrap-utilities.css
- ./dist/css/bootstrap-utilities.min.css
- ./dist/css/bootstrap.css
- ./dist/css/bootstrap.min.css

Co-authored-by: Daniel O <dobiekwe@byteworks.com.ng>
Co-authored-by: Mark Otto <otto@github.com>
2022-10-06 13:14:11 -07:00
Julien Déramond
b1185b91ea
Add new border-radius utilities (#36540)
* Add new border-radius utilities

* Fix bundlewatch

* Fix bundlewatch again

Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-10-03 11:52:41 -07:00
maks
9a582767c6
add font-weight-medium(=500) / fw-medium (#36781)
* add font-weight-medium = 500

* Update _utilities.scss
2022-10-03 10:52:02 -07:00
Mark Otto
bca99232b8
Iterate on border utilities (#36239)
* Remove `--bs-border-opacity: 1` from `.border-*` utilities

We set `--bs-border-opacity: 1` globally at the `:root` level, so redeclaring it on every `.border-*` utility doesn't make much sense. I think we can drop this.

* Remove global border-opacity var, restore on .border-color classes, move .border-color utils down the list to fix some specificity issues

* Add some demos of border utils to the docs
2022-05-05 21:32:02 -07:00
Mark Otto
dab026fc2b Revert border-color utilities to use the CSS property instead of the variable 2022-04-07 09:37:04 -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
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
cccabinet
a9b3445060 fix:border-width 2022-03-02 15:19:21 -08:00
Mark Otto
de0dfca9a1 Convert border utilities to CSS variables
- Updates the utilities mixin to check for specific CSS variable names via `css-variable`
- Bonus fix: we now prevent local variables for `0` value utilities (e.g., `.border-top-0` no longer sets `--bs-border-opacity: 1`
- Adds new `.border-opacity-*` classes
- Adds new root variables: `--bs-border-color`, `--bs-border-style`, `--bs-border-width`
- Documents the new variable changes
2022-02-28 11:40:32 -08:00
Ty Mick
43a9216a7f Move gap utility API from "Flex" to "Spacing"
The `gap` utility is described on the [Spacing page][1] but is not
actually mentioned on the [Flex page][2] (apart from the [API
section][3]).

[1]: https://getbootstrap.com/docs/5.1/utilities/spacing/
[2]: https://getbootstrap.com/docs/5.1/utilities/flex/
[3]: https://getbootstrap.com/docs/5.1/utilities/flex/#utilities-api
2022-02-06 15:45:22 -08:00
XhmikosR
8cdb6c40bd
Update stylelint and stylelint-config-twbs-bootstrap (#35438) 2021-12-14 09:51:31 +02: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
harishhalodoc
a816615efa
Add utility classes for opacity (#33781)
* Add responsive utility classes for opacity

- fix for #33483

* remove responsive opacity utils as it has impact on bootstrap.css bundle size

* Update opacity.md

* Update site/content/docs/5.0/utilities/opacity.md

Co-authored-by: Mark Otto <otto@github.com>

* Update site/content/docs/5.0/utilities/opacity.md

Co-authored-by: Mark Otto <otto@github.com>

Co-authored-by: Harish <halodoc@ip-192-168-1-101.ap-southeast-1.compute.internal>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>
2021-06-22 19:20:01 -07:00
Mark Otto
4c7a3e8adf
Add Sass docs (variables, mixins, and loops) to most pages (#32747)
* WIP: Mention variables, mixins, and loops in docs

* Add Sass sections to component pages

* add sass docs for forms and content

* Update buttons.md

* Remove empty mixins sections

* Massive update to utilities and some consistency changes

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-02-10 19:29:59 -08:00
Mark Otto
88be1ce502 Update docs for color and bg utilities
- Split colors from background utilities with new docs page
- Add Sass docs for both pages
2021-02-03 07:15:49 +02:00
Martijn Cuppens
5b0dcf8ffe Add .translate-middle-x and .translate-middle-y utilities 2020-12-04 16:15:51 +02:00
Gaël Poupard
9488978fb5 feat(RTL): implement RTL
Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-12-04 07:52:03 +02:00
Mark Otto
649e525c62
Add .gap utilities (#32074)
* Add gap utilities

* Update .bundlewatch.config.json

* Revamp headings on this page for better organization

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-11-08 20:56:02 +02:00
Mark Otto
f20335b6c1
Add .d-grid to our display utilities (#32066)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-11-06 14:35:17 +02:00
Mark Otto
4d1ee3b0a7 Add class name so the utility generates 2020-10-31 19:19:52 +01:00
Mark Otto
241f910dc5
Updated .rounded utilities (#31687)
* 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>
2020-10-30 22:42:11 +02:00
Mark Otto
e5fa708491
v5: Add .fs-* utilities for font-size and rename font-weight/-style utilities (#30571)
* 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>
2020-10-26 16:42:07 -07:00
Gaurav Behere
776afb8e9e Adding overflow visible as util 2020-10-13 16:48:17 +03:00
Mark Otto
3cf51c6ac9
Add Sass variable for CSS variable prefix (#31684)
* Add Sass variable for CSS variable prefix

* Update other --bs-* var instances
2020-09-30 08:32:58 +03:00
Jaume Sala
7bbfd439c9
Extra position utilities (#31280)
* 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>
2020-09-20 19:42:41 -07:00
Mauricio Hernan Cabrera
6455c2e8aa
Add border width utility (#31484)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
2020-09-09 11:28:52 +03:00
Aleksander Machniak
cf704cd36d
Give more priority to .d-none (#31473) 2020-08-13 15:51:23 +02:00
Mark Otto
c682e751bf
Restore word-break: break-word on .text-break to fix text breaking on flex containers (#30932) 2020-05-31 06:49:23 +03:00
Edson Jr
1f1b147f19
Add space-evenly option for justify-content (#30910) 2020-05-30 15:19:10 +02:00
Martijn Cuppens
b531bda07c Improve gradients
- 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
2020-05-15 15:03:12 +03:00
Martijn Cuppens
8cdb057111
Add bs- prefixes to custom properties (#30591) 2020-04-15 18:52:16 +02:00
Gaël Poupard
bcdd8fbc07
Use custom properties for font-stacks (#30509) 2020-04-10 20:31:58 +02:00
Catalin Zalog
fef94bf163 style: applies ascending order 2020-03-15 22:12:11 +01:00
Martijn Cuppens
648bceadd8
Add pointer event utilities (#30185) 2020-02-23 01:07:33 +01:00
Jens Luyten
7a694396c1
Add utility class for the user-select property (#30035)
* 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>
2020-02-14 09:24:16 +02:00