diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 7de7a280cb..a9b13cbefd 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -1,10 +1,12 @@ .pagination { // scss-docs-start pagination-css-vars --#{$prefix}pagination-padding-x: #{$pagination-padding-x}; + --#{$prefix}pagination-label-padding-x: #{$pagination-label-padding-x}; // Boosted mod --#{$prefix}pagination-padding-y: #{$pagination-padding-y}; - --#{$prefix}pagination-padding-end: #{$pagination-padding-end}; // Boosted mod --#{$prefix}pagination-margin-y: #{$pagination-margin-y}; // Boosted mod + --#{$prefix}pagination-gap: #{$pagination-gap}; // Boosted mod --#{$prefix}pagination-margin-x-first-last: #{$pagination-margin-x-first-last}; // Boosted mod + --#{$prefix}pagination-item-max-width: #{$pagination-item-max-width}; // Boosted mod @include rfs($pagination-font-size, --#{$prefix}pagination-font-size); --#{$prefix}pagination-font-weight: #{$font-weight-bold}; // Boosted mod --#{$prefix}pagination-color: #{$pagination-color}; @@ -28,6 +30,7 @@ --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg}; --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color}; --#{$prefix}pagination-icon: #{$pagination-icon}; // Boosted mod + --#{$prefix}pagination-icon-min-width: #{$pagination-icon-min-width}; // Boosted mod --#{$prefix}pagination-icon-size: #{$pagination-icon-size}; // Boosted mod --#{$prefix}pagination-icon-width: #{$pagination-icon-width}; // Boosted mod --#{$prefix}pagination-icon-height: #{$pagination-icon-height}; // Boosted mod @@ -44,6 +47,7 @@ position: relative; box-sizing: content-box; // Boosted mod display: flex; // Boosted mod + gap: var(--#{$prefix}pagination-gap); // Boosted mod align-items: center; // Boosted mod justify-content: center; // Boosted mod padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x); @@ -57,6 +61,7 @@ // Boosted mod: embed icon as mask-image @include button-icon( var(--#{$prefix}pagination-icon), + var(--#{$prefix}pagination-icon-min-width), var(--#{$prefix}pagination-icon-size), $size: var(--#{$prefix}pagination-icon-width) var(--#{$prefix}pagination-icon-height) , $selector: ".page-item:first-child .page-link, .page-item:last-child .page-link", @@ -146,13 +151,16 @@ } } + &:first-child .page-link, + &:last-child .page-link { + &:not([title]) { + --#{$prefix}pagination-padding-x: var(--#{$prefix}pagination-label-padding-x); + } + } + &:first-child .page-link { margin-right: var(--#{$prefix}pagination-margin-x-first-last); - &:not(:empty) { - padding-right: var(--#{$prefix}pagination-padding-end); - } - &::before { /* rtl:raw: transform: scaleX(-1); @@ -161,10 +169,6 @@ } &:last-child .page-link { - &:not(:empty) { - padding-left: var(--#{$prefix}pagination-padding-end); - } - &::before { order: 1; @@ -177,6 +181,10 @@ margin-left: var(--#{$prefix}pagination-margin-x-first-last); } + &:not(:first-child):not(:last-child) .page-link { + max-width: var(--#{$prefix}pagination-item-max-width); + } + @include media-breakpoint-down(sm) { @include pagination-max-items(4); } diff --git a/scss/_variables.scss b/scss/_variables.scss index 09aa0961c1..dabbde6e24 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1639,8 +1639,9 @@ $dropdown-dark-header-color: $white !default; // Boosted mod // Pagination // scss-docs-start pagination-variables -$pagination-padding-y: null !default; // Boosted mod: instead of `.375rem` -$pagination-padding-x: null !default; // Boosted mod: instead of `.75rem` +$pagination-padding-y: .5625rem !default; // Boosted mod: instead of `null` +$pagination-padding-x: .8125rem !default; // Boosted mod: instead of `null` +$pagination-label-padding-x: 1.125rem !default; // Boosted mod // Boosted mod: no $pagination-padding-y-sm // Boosted mod: no $pagination-padding-x-sm // Boosted mod: no $pagination-padding-y-lg @@ -1683,15 +1684,21 @@ $pagination-transition: $transition-focus !default; // Boosted mod: // Boosted mod: no $pagination-border-radius-lg // Boosted mod -$pagination-padding-end: 1.125rem !default; $pagination-icon: var(--#{$prefix}chevron-icon) !default; -$pagination-icon-size: subtract($spacer * 2, calc(var(--#{$prefix}border-width) * 2)) !default; // stylelint-disable-line function-disallowed-list +$pagination-icon-min-width: .625rem !default; +$pagination-icon-size: 1.125rem !default; $pagination-icon-width: add(.5rem, 1px) !default; $pagination-icon-height: subtract(1rem, 1px) !default; +$pagination-gap: 5px !default; $pagination-active-item-bg: $supporting-orange !default; $pagination-active-item-color: $black !default; $pagination-active-item-border: $pagination-active-item-bg !default; + +$pagination-item-max-width: $spacer * .5 !default; +// fusv-disable +$pagination-padding-end: 1.125rem !default; // Deprecated in Boosted 5.3.2 for responsive pagination +// fusv-enable // End mod // scss-docs-end pagination-variables diff --git a/site/content/docs/5.3/components/pagination.md b/site/content/docs/5.3/components/pagination.md index cef9aa4d48..d57f662555 100644 --- a/site/content/docs/5.3/components/pagination.md +++ b/site/content/docs/5.3/components/pagination.md @@ -30,8 +30,8 @@ Looking to use an icon or symbol in place of text for some pagination links? Be {{< example >}} {{< /example >}} @@ -139,7 +139,7 @@ To avoid pagination wrapping or overflowing, we limit the number or pagination i
  • 8
  • 9
  • 10
    • -
    • +
    • {{< /example >}} diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 656deb3476..59b39d8ab0 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -153,7 +153,7 @@ Retrieve our color theme in the [new color theme documentation]({{< docsref "/cu - Breaking The markup has been changed: - `.input-group` class has been removed - `.btn-secondary` class has been replaced by `.btn-outline-secondary` - + Make sure to incorporate these changes into your websites. - **Star rating** @@ -561,6 +561,14 @@ If you need more details about the changes, please refer to the [v5.3.2 release] - **Orange navbar** - Warning The minimizing behavior with `.header-minimized` is applied to the `
    ` instead of one of its children directly. +- **Pagination** + - Warning For accessibility reasons, pagination's variant with icons only has been slightly modified to ensure correct semantic for all assistive technologies. It might be a useful modification to propagate into your websites if you are using this variant. + ```diff + -
    • + -
    • + +
    • + +
    • + ``` ### Forms - New In order to improve accessibility for people suffering from any form of color blindness, we added a visual cue to form elements on error when focused so information does not rely exclusively on color anymore. Although is has no direct impact, you might want to apply this same modification within your custom form controls if you have any. @@ -578,6 +586,20 @@ If you need more details about the changes, please refer to the [v5.3.2 release] ### CSS and Sass variables +-
    + Breaking Deprecated CSS variables: + +
    + +-
    + Breaking Deprecated Sass variables: + +
    + -
    New CSS variables:
    @@ -631,6 +657,10 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
  • $local-nav-padding-y
  • $mark-bg-dark
  • $mark-color-dark
    • +
  • $pagination-gap
    • +
  • $pagination-icon-min-width
    • +
  • $pagination-item-max-width
    • +
  • $pagination-label-padding-x