rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Add padding to badges (#31132)

Browse Source 
* 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.
This commit is contained in:
Patrick H. Lauke 2020-08-02 14:28:23 +01:00 committed by GitHub
parent 2a3e487dba
commit a21f605299
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_variables.scss
View File

@ -1067,8 +1067,8 @@ $toast-header-border-color: rgba(0, 0, 0, .05) !default;
$badge-font-size: .75em !default; $badge-font-size: .75em !default;
$badge-font-weight: $font-weight-bold !default; $badge-font-weight: $font-weight-bold !default;
$badge-color: $white !default; $badge-color: $white !default;
$badge-padding-y: .25em !default; $badge-padding-y: .35em !default;
$badge-padding-x: .5em !default; $badge-padding-x: .65em !default;
$badge-border-radius: $border-radius !default; $badge-border-radius: $border-radius !default;

4
site/content/docs/5.0/migration.md
View File

@ -35,6 +35,10 @@ toc: true
### Components ### Components
### Badges
- Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`.
#### Buttons #### Buttons
- Disabled states of buttons are easier to customize thanks to additional arguments in the `button-variant()` mixin. [See #30639.](https://github.com/twbs/bootstrap/pull/30639) - Disabled states of buttons are easier to customize thanks to additional arguments in the `button-variant()` mixin. [See #30639.](https://github.com/twbs/bootstrap/pull/30639)