Commit Graph

93 Commits

Author SHA1 Message Date
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
Martijn Cuppens
c7ce627ca8 Remove redundant overflow-wrap property
While `overflow-wrap` is the more recommanded option, `word-wrap` alone has a wider support.
2020-01-04 18:26:24 +01:00
Florian Lacreuse
d5270cb811 Use word-wrap in .text-break for IE and Edge compatibility. 2020-01-04 18:26:24 +01:00
Martijn Cuppens
bd27834198 Drop .text-justify class (#29793)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2019-12-30 22:33:34 +02:00
Matthieu Vignolle
1a5b7f4a8e Add font style normal (#29744) 2019-12-06 02:34:10 +02:00
Matthieu Vignolle
4de4874e72 Change deprecated html tags to text decoration classes (#29604) 2019-11-27 08:43:49 +02:00
Martijn Cuppens
787256cae4
Compressed Sass output support (#29702) 2019-11-24 20:20:03 +01:00
Mark Otto
b3451ff258 Add new .bg-body utility class (#29511) 2019-10-10 21:18:19 +03:00
Martijn Cuppens
007ea0d8d0 Clean up line heights & add line height utilities (#29271) 2019-08-30 10:42:41 +03:00
Martijn Cuppens
19ee63ad25 Link helpers & use utility API for all utilities 2019-08-26 08:21:24 +02:00
Martijn Cuppens
83fc5a3239
Decrease number of order utilities (#28874) 2019-06-18 07:02:14 +02:00
Shohei Yoshida
3283fe1b52
Rename .text-monospace to .font-monospace (#28867) 2019-06-05 00:51:36 +09:00
Martijn Cuppens
769c8d8246
Helpers & utilities split (#28445) 2019-05-23 11:56:03 +02:00
Martijn Cuppens
3007d4b435 Stretched link 2018-12-04 21:22:12 +01:00
Mark Otto
29bd5e3218 Add overflow-auto and overflow-hidden utilities 2018-10-06 17:55:55 -07:00
Mark Otto
dd7ed79856
Add box-shadow utilities (#25758) 2018-03-31 22:07:48 -07:00