Fixed the `pagination` component not matching the input / button (#42137)

* Fixed the `pagination` component not matching the `input` / `button` components min-height

Fixed the `pagination` component not matching the `input` / `button` components min-height.

See discussion: https://github.com/orgs/twbs/discussions/42136

Feel free to reject if this component isn't supposed to be used like in my examples.

* Reordered the flex / min-height attribute order

Moved min-height attribute after the flex related attributes (to match the order from other components). It's a trivial change.

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 807e3f2dacbe21b36c281c0316bedc31dd7578da..9ddeed2a44608851cc68aaa5134ab2ebbfaea111 100644 (file)
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -15,6 +15,7 @@ $pagination-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $pagination-tokens: defaults(
   (
+    --pagination-min-height: var(--btn-input-min-height),
     --pagination-padding-x: var(--btn-input-padding-x),
     --pagination-padding-y: var(--btn-input-padding-y),
     --pagination-font-size: var(--btn-input-font-size),
@@ -59,7 +60,10 @@ $pagination-sizes: defaults(
 
   .page-link {
     position: relative;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--pagination-min-height);
     padding: var(--pagination-padding-y) var(--pagination-padding-x);
     font-size: var(--pagination-font-size);
     color: var(--pagination-color);
@@ -124,6 +128,7 @@ $pagination-sizes: defaults(
   // scss-docs-start pagination-sizes-loop
   @each $size, $_ in $pagination-sizes {
     .pagination-#{$size} {
+      --pagination-min-height: var(--bs-btn-input-#{$size}-min-height);
       --pagination-padding-y: var(--btn-input-#{$size}-padding-y);
       --pagination-padding-x: var(--btn-input-#{$size}-padding-x);
       --pagination-font-size: var(--btn-input-#{$size}-font-size);