diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 52e6b195a7..a12bb0e998 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -8,6 +8,7 @@ display: inline-block; font-family: $btn-font-family; font-weight: $btn-font-weight; + line-height: $btn-line-height; color: $body-color; text-align: center; vertical-align: middle; @@ -15,7 +16,7 @@ user-select: none; background-color: transparent; border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); + @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius); @include transition($btn-transition); &:hover { @@ -106,11 +107,11 @@ fieldset:disabled a.btn { // .btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); } .btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); } diff --git a/scss/_pagination.scss b/scss/_pagination.scss index c51272dd79..67d27176aa 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -51,12 +51,12 @@ // // Sizing // -@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-line-height, $pagination-border-radius); +@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius); .pagination-lg { - @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg); + @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $border-radius-lg); } .pagination-sm { - @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm); + @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $border-radius-sm); } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 823000c035..4864ec6640 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -394,6 +394,16 @@ $utilities: map-merge( ) ) ), + "line-height": ( + property: line-height, + class: lh, + values: ( + 1: 1, + sm: $line-height-sm, + base: $line-height-base, + lg: $line-height-lg, + ) + ), "background-color": ( property: background-color, class: bg, diff --git a/scss/_variables.scss b/scss/_variables.scss index ed2755901d..850344aac0 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -226,8 +226,8 @@ $container-padding-x: $grid-gutter-width / 2 !default; // // Define common padding and border radius sizes and more. -$line-height-lg: 1.5 !default; -$line-height-sm: 1.5 !default; +$line-height-sm: 1.25 !default; +$line-height-lg: 2 !default; $border-width: 1px !default; $border-color: $gray-300 !default; @@ -420,12 +420,10 @@ $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-colo $input-btn-padding-y-sm: .25rem !default; $input-btn-padding-x-sm: .5rem !default; $input-btn-font-size-sm: $font-size-sm !default; -$input-btn-line-height-sm: $line-height-sm !default; $input-btn-padding-y-lg: .5rem !default; $input-btn-padding-x-lg: 1rem !default; $input-btn-font-size-lg: $font-size-lg !default; -$input-btn-line-height-lg: $line-height-lg !default; $input-btn-border-width: $border-width !default; @@ -443,12 +441,10 @@ $btn-line-height: $input-btn-line-height !default; $btn-padding-y-sm: $input-btn-padding-y-sm !default; $btn-padding-x-sm: $input-btn-padding-x-sm !default; $btn-font-size-sm: $input-btn-font-size-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; $btn-padding-y-lg: $input-btn-padding-y-lg !default; $btn-padding-x-lg: $input-btn-padding-x-lg !default; $btn-font-size-lg: $input-btn-font-size-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; $btn-border-width: $input-btn-border-width !default; @@ -487,12 +483,10 @@ $input-line-height: $input-btn-line-height !default; $input-padding-y-sm: $input-btn-padding-y-sm !default; $input-padding-x-sm: $input-btn-padding-x-sm !default; $input-font-size-sm: $input-btn-font-size-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; $input-padding-y-lg: $input-btn-padding-y-lg !default; $input-padding-x-lg: $input-btn-padding-x-lg !default; $input-font-size-lg: $input-btn-font-size-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; $input-bg: $white !default; $input-disabled-bg: $gray-200 !default; @@ -523,8 +517,8 @@ $input-height-inner-half: calc(#{$input-line-height * .5em} + #{$i $input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default; $input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default; -$input-height-sm: calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default; -$input-height-lg: calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default; +$input-height-sm: calc(#{$input-line-height * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default; +$input-height-lg: calc(#{$input-line-height * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; @@ -805,13 +799,12 @@ $dropdown-header-color: $gray-600 !default; // Pagination -$pagination-padding-y: .5rem !default; +$pagination-padding-y: .375rem !default; $pagination-padding-x: .75rem !default; $pagination-padding-y-sm: .25rem !default; $pagination-padding-x-sm: .5rem !default; $pagination-padding-y-lg: .75rem !default; $pagination-padding-x-lg: 1.5rem !default; -$pagination-line-height: 1.25 !default; $pagination-color: $link-color !default; $pagination-bg: $white !default; @@ -875,7 +868,7 @@ $tooltip-arrow-color: $tooltip-bg !default; $form-feedback-tooltip-padding-y: $tooltip-padding-y !default; $form-feedback-tooltip-padding-x: $tooltip-padding-x !default; $form-feedback-tooltip-font-size: $tooltip-font-size !default; -$form-feedback-tooltip-line-height: $line-height-base !default; +$form-feedback-tooltip-line-height: null !default; $form-feedback-tooltip-opacity: $tooltip-opacity !default; $form-feedback-tooltip-border-radius: $tooltip-border-radius !default; diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index b5dffa04e1..bd35b6b047 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -13,8 +13,7 @@ float: left; width: $form-check-input-width; height: $form-check-input-width; - // Todo: Change static value to base line-height? - margin-top: calc((1.5em - #{$form-check-input-width}) / 2); // line-height minus check height + margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height margin-left: $form-check-padding-left * -1; background-color: $form-check-input-bg; border: $form-check-input-border; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 209b6a56e1..a9f534f034 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -99,7 +99,6 @@ min-height: $input-height-sm; padding: $input-padding-y-sm $input-padding-x-sm; @include font-size($input-font-size-sm); - line-height: $input-line-height-sm; @include border-radius($input-border-radius-sm); } @@ -107,7 +106,6 @@ min-height: $input-height-lg; padding: $input-padding-y-lg $input-padding-x-lg; @include font-size($input-font-size-lg); - line-height: $input-line-height-lg; @include border-radius($input-border-radius-lg); } diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 05eae6a49a..b965f394f6 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -139,7 +139,6 @@ .input-group-lg > .input-group-append > .btn { padding: $input-padding-y-lg $input-padding-x-lg; @include font-size($input-font-size-lg); - line-height: $input-line-height-lg; @include border-radius($input-border-radius-lg); } @@ -159,7 +158,6 @@ .input-group-sm > .input-group-append > .btn { padding: $input-padding-y-sm $input-padding-x-sm; @include font-size($input-font-size-sm); - line-height: $input-line-height-sm; @include border-radius($input-border-radius-sm); } diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss index 1a4ea8c5c8..b4ccfa8041 100644 --- a/scss/forms/_labels.scss +++ b/scss/forms/_labels.scss @@ -16,12 +16,10 @@ padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width}); @include font-size($input-font-size-lg); - line-height: $input-line-height-lg; } .col-form-label-sm { padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); @include font-size($input-font-size-sm); - line-height: $input-line-height-sm; } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 1c51765d22..de9c6e9b97 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -101,10 +101,9 @@ } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { padding: $padding-y $padding-x; @include font-size($font-size); - line-height: $line-height; // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); } diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss index 2c31a8cc51..52ad1e1212 100644 --- a/scss/mixins/_pagination.scss +++ b/scss/mixins/_pagination.scss @@ -1,10 +1,9 @@ // Pagination -@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { .page-link { padding: $padding-y $padding-x; @include font-size($font-size); - line-height: $line-height; } .page-item { diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md index 201cf9381a..c8f5c1a695 100644 --- a/site/content/docs/4.3/content/typography.md +++ b/site/content/docs/4.3/content/typography.md @@ -161,7 +161,7 @@ While not shown above, feel free to use `` and `` in HTML5. `` is meant ## Text utilities -Change text alignment, transform, style, weight, and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}). +Change text alignment, transform, style, weight, line-height and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}). ## Abbreviations diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 920ca4e5ad..d6a2b5e178 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -36,6 +36,7 @@ Changes to our source Sass files and compiled CSS. - Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339). - Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083) - The `theme-color-level()` function is renamed to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) +- Line heights are dropped from several components to simplify our codebase. The `button-size()` and `pagination-size()` do not accept line height parameters anymore. [See #29271](https://github.com/twbs/bootstrap/pull/29271) ## JavaScript @@ -132,6 +133,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be - Renamed `.text-monospace` to `.font-monospace` - Decreased the number of responsive order utilities per breakpoint. The highest order utility with a number now is `.order-5` instead of `.order-12`. [See #28874](https://github.com/twbs/bootstrap/pull/28874). +- New `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here]({{< docsref "/utilities/text#line-height" >}}). - **Todo:** Drop `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore - **Todo:** Split utilities into property-value utility classes and helpers diff --git a/site/content/docs/4.3/utilities/text.md b/site/content/docs/4.3/utilities/text.md index 0ea7c75a2e..3ae40fabc9 100644 --- a/site/content/docs/4.3/utilities/text.md +++ b/site/content/docs/4.3/utilities/text.md @@ -78,6 +78,17 @@ Quickly change the weight (boldness) of text or italicize text.

Italic text.

{{< /example >}} +## Line height + +Change the line height with `.lh-*` utilities. + +{{< example >}} +

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

+

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

+

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

+

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

+{{< /example >}} + ## Monospace Change a selection to our monospace font stack with `.font-monospace`.