Skip to content

Commit ee683f2

Browse files
authored
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.
1 parent eaccc43 commit ee683f2

1 file changed

Lines changed: 6 additions & 1 deletion

File tree

scss/_pagination.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ $pagination-tokens: () !default;
1515
// stylelint-disable-next-line scss/dollar-variable-default
1616
$pagination-tokens: defaults(
1717
(
18+
--pagination-min-height: var(--btn-input-min-height),
1819
--pagination-padding-x: var(--btn-input-padding-x),
1920
--pagination-padding-y: var(--btn-input-padding-y),
2021
--pagination-font-size: var(--btn-input-font-size),
@@ -59,7 +60,10 @@ $pagination-sizes: defaults(
5960

6061
.page-link {
6162
position: relative;
62-
display: block;
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
66+
min-height: var(--pagination-min-height);
6367
padding: var(--pagination-padding-y) var(--pagination-padding-x);
6468
font-size: var(--pagination-font-size);
6569
color: var(--pagination-color);
@@ -124,6 +128,7 @@ $pagination-sizes: defaults(
124128
// scss-docs-start pagination-sizes-loop
125129
@each $size, $_ in $pagination-sizes {
126130
.pagination-#{$size} {
131+
--pagination-min-height: var(--bs-btn-input-#{$size}-min-height);
127132
--pagination-padding-y: var(--btn-input-#{$size}-padding-y);
128133
--pagination-padding-x: var(--btn-input-#{$size}-padding-x);
129134
--pagination-font-size: var(--btn-input-#{$size}-font-size);

0 commit comments

Comments
 (0)