diff --git a/dist/css/bootstrap-flex.css b/dist/css/bootstrap-flex.css index dcb6bb6eddde5ae7376c1ce7ce6c60e986761256..4c3325230232273f13729fc4298b1212b6022b09 100644 --- a/dist/css/bootstrap-flex.css +++ b/dist/css/bootstrap-flex.css @@ -3278,6 +3278,11 @@ a.label:hover { text-decoration: none; cursor: pointer; } +.label-pill { + padding-left: .6em; + padding-right: .6em; + border-radius: 1rem; } + .label-default { background-color: #818a91; } .label-default[href]:focus, diff --git a/dist/css/bootstrap-flex.css.map b/dist/css/bootstrap-flex.css.map index b7b0c6d76bdbd8c8b7173d056804c03168bf7bf5..8df125ced456d2a2c336fbfa666fcbaf6dc6e441 100644 Binary files a/dist/css/bootstrap-flex.css.map and b/dist/css/bootstrap-flex.css.map differ diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 1fa0a9dc840b3f05af371fa46ed20c6a10b05add..5ac5fafe9c3f70e23b96230438617cb81467031b 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -3193,6 +3193,11 @@ a.label:hover { text-decoration: none; cursor: pointer; } +.label-pill { + padding-left: .6em; + padding-right: .6em; + border-radius: 1rem; } + .label-default { background-color: #818a91; } .label-default[href]:focus, diff --git a/dist/css/bootstrap.css.map b/dist/css/bootstrap.css.map index a746096698a035a1c0da099072e251e0df98a0ba..aaa1ccd9d50a228e36a44b55778daf35a51ddbbf 100644 Binary files a/dist/css/bootstrap.css.map and b/dist/css/bootstrap.css.map differ diff --git a/docs/components/label.md b/docs/components/label.md index e3c03bb93c17d3e4029b22765663675fa4b8ec81..e5937fcd6e45a33e29e04078f2662b955c680efd 100644 --- a/docs/components/label.md +++ b/docs/components/label.md @@ -30,3 +30,16 @@ Add any of the below mentioned modifier classes to change the appearance of a la <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> {% endexample %} + +### Pill labels + +Use the `.label-pill` modifier class to increase the rounded corners. Useful if you miss the badges from v3. + +{% example html %} +<span class="label label-pill label-default">Default</span> +<span class="label label-pill label-primary">Primary</span> +<span class="label label-pill label-success">Success</span> +<span class="label label-pill label-info">Info</span> +<span class="label label-pill label-warning">Warning</span> +<span class="label label-pill label-danger">Danger</span> +{% endexample %} diff --git a/scss/_labels.scss b/scss/_labels.scss index ae6ded5b2d543df32b56a80ca199dd1509e6f3fa..d6dff7738eff68f9c7722a992db20cebf32cc041 100644 --- a/scss/_labels.scss +++ b/scss/_labels.scss @@ -36,6 +36,16 @@ a.label { } } +// Pill labels +// +// Make them extra rounded with a modifier to replace v3's badges. + +.label-pill { + padding-left: .6em; + padding-right: .6em; + border-radius: 1rem; +} + // Colors //