From a21f6052995d2c09e6966bd03df5bf9ba9153b27 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" <redux@splintered.co.uk> Date: Sun, 2 Aug 2020 14:28:23 +0100 Subject: [PATCH] Add padding to badges (#31132) * 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. --- scss/_variables.scss | 4 ++-- site/content/docs/5.0/migration.md | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 6b9ae3d3f7..9e2af089fd 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1067,8 +1067,8 @@ $toast-header-border-color: rgba(0, 0, 0, .05) !default; $badge-font-size: .75em !default; $badge-font-weight: $font-weight-bold !default; $badge-color: $white !default; -$badge-padding-y: .25em !default; -$badge-padding-x: .5em !default; +$badge-padding-y: .35em !default; +$badge-padding-x: .65em !default; $badge-border-radius: $border-radius !default; diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index af44951eb3..12e10f3e4b 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -35,6 +35,10 @@ toc: true ### Components +### Badges + +- Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`. + #### 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) -- GitLab