Skip to content

Commit

Permalink
Dark mode: pagination (#2314)
Browse files Browse the repository at this point in the history
  • Loading branch information
louismaximepiton authored and julien-deramond committed Dec 8, 2023
1 parent 3ca7f43 commit 4915bc2
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 24 deletions.
14 changes: 4 additions & 10 deletions scss/_pagination.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
--#{$prefix}pagination-hover-color: #{$pagination-hover-color};
--#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
--#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
--#{$prefix}pagination-focus-color: #{$pagination-focus-color};
--#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
--#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
// Boosted mod: no --#{$prefix}pagination-focus-color
// Boosted mod: no --#{$prefix}pagination-focus-bg
// Boosted mod: no --#{$prefix}pagination-focus-box-shadow
--#{$prefix}pagination-active-color: #{$pagination-active-color};
--#{$prefix}pagination-active-bg: #{$pagination-active-bg};
--#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
Expand Down Expand Up @@ -71,13 +71,7 @@
border-color: var(--#{$prefix}pagination-hover-border-color);
}

&:focus {
z-index: 5; // Boosted mod
color: var(--#{$prefix}pagination-focus-color);
background-color: var(--#{$prefix}pagination-focus-bg);
outline: $pagination-focus-outline;
box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
}
// Boosted mod: no focus

// Boosted mod
&:active,
Expand Down
35 changes: 21 additions & 14 deletions scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1627,38 +1627,45 @@ $dropdown-dark-header-color: $white !default; // Boosted mod
// Pagination

// scss-docs-start pagination-variables
$pagination-padding-y: null !default;
$pagination-padding-x: null !default;
$pagination-padding-y: null !default; // Boosted mod: instead of `.375rem`
$pagination-padding-x: null !default; // Boosted mod: instead of `.75rem`
// Boosted mod: no $pagination-padding-y-sm
// Boosted mod: no $pagination-padding-x-sm
// Boosted mod: no $pagination-padding-y-lg
// Boosted mod: no $pagination-padding-x-lg

$pagination-font-size: $font-size-base !default;

$pagination-color: null !default;
$pagination-bg: var(--#{$prefix}body-bg) !default;
$pagination-color: var(--#{$prefix}link-color) !default;
$pagination-bg: transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
$pagination-border-width: var(--#{$prefix}border-width) !default;
$pagination-margin-y: $spacer !default; // Boosted mod
$pagination-margin-start: 0 !default; // Boosted mod: instead of `calc($pagination-border-width * -1)`
$pagination-margin-x-first-last: $spacer * .5 !default; // Boosted mod
$pagination-border-color: transparent !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`

// Deprecated in v5.3.3
// fusv-disable
$pagination-focus-color: null !default; // Boosted mod
$pagination-focus-bg: null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
$pagination-focus-box-shadow: 0 0 0 $focus-visible-inner-width var(--#{$prefix}focus-visible-inner-color) !default; // Boosted mod: no `$focus-ring-box-shadow`
$pagination-focus-outline: null !default; // Boosted mod
// fusv-enable

$pagination-hover-color: var(--#{$prefix}link-color) !default; // Boosted mod
$pagination-hover-bg: null !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
$pagination-hover-border-color: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
$pagination-hover-color: var(--#{$prefix}link-color) !default; // Boosted mod: instead of `var(--#{$prefix}link-hover-color)`
$pagination-hover-bg: var(--#{$prefix}active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
$pagination-hover-border-color: $pagination-hover-bg !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`

$pagination-active-color: $white !default;
$pagination-active-bg: $black !default;
$pagination-active-color: var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$component-active-color`
$pagination-active-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `$component-active-bg`
$pagination-active-border-color: $pagination-active-bg !default; // Boosted mod: instead of `$component-active-bg`

$pagination-disabled-color: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
$pagination-disabled-bg: $white !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
$pagination-disabled-border-color: $pagination-disabled-color !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
$pagination-disabled-color: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
$pagination-disabled-bg: transparent !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
$pagination-disabled-border-color: transparent !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`

$pagination-transition: $transition-focus !default;
$pagination-transition: $transition-focus !default; // Boosted mod: no color, bg-color, border-color, box-shadow

// Boosted mod: no $pagination-border-radius-sm
// Boosted mod: no $pagination-border-radius-lg
Expand All @@ -1671,7 +1678,7 @@ $pagination-icon-width: add(.5rem, 1px) !default;
$pagination-icon-height: subtract(1rem, 1px) !default;

$pagination-active-item-bg: $primary !default;
$pagination-active-item-color: color-contrast($pagination-active-item-bg) !default;
$pagination-active-item-color: $black !default;
$pagination-active-item-border: $pagination-active-item-bg !default;
// End mod
// scss-docs-end pagination-variables
Expand Down
157 changes: 157 additions & 0 deletions site/content/docs/5.3/dark-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -1821,6 +1821,163 @@ sitemap_exclude: true
</div>
</div>

### Pagination

<h4 class="mt-3">No theme</h4>

<div class="d-flex flex-column gap-2 border border-tertiary p-3">
<nav aria-label="Page navigation example">
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example icons">
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
<li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
</ul>
</nav>
<nav aria-label="Page navigation example complete">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link disabled">3</a></li>
<li class="page-item disabled"><a class="page-link">4</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next"></a>
</li>
</ul>
</nav>
</div>

<h4 class="mt-3">Dark theme on container</h4>

<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
<nav aria-label="Page navigation example2">
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example icons2">
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
<li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
</ul>
</nav>
<nav aria-label="Page navigation example complete2">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link disabled">3</a></li>
<li class="page-item disabled"><a class="page-link">4</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next"></a>
</li>
</ul>
</nav>
</div>

<h4 class="mt-3">Light theme on container</h4>

<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
<nav aria-label="Page navigation example3">
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example icons3">
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
<li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
</ul>
</nav>
<nav aria-label="Page navigation example complete3">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link disabled">3</a></li>
<li class="page-item disabled"><a class="page-link">4</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next"></a>
</li>
</ul>
</nav>
</div>

<h4 class="mt-3">Dark theme on component</h4>

<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
<nav aria-label="Page navigation example4">
<ul class="pagination mb-0" data-bs-theme="dark">
<li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example icons4">
<ul class="pagination mb-0" data-bs-theme="dark">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
<li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
</ul>
</nav>
<nav aria-label="Page navigation example complete4">
<ul class="pagination mb-0" data-bs-theme="dark">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link disabled">3</a></li>
<li class="page-item disabled"><a class="page-link">4</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next"></a>
</li>
</ul>
</nav>
</div>

<h4 class="mt-3">Light theme on component</h4>

<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
<nav aria-label="Page navigation example5">
<ul class="pagination mb-0" data-bs-theme="light">
<li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example icons5">
<ul class="pagination mb-0" data-bs-theme="light">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
<li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
</ul>
</nav>
<nav aria-label="Page navigation example complete5">
<ul class="pagination mb-0" data-bs-theme="light">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link disabled">3</a></li>
<li class="page-item disabled"><a class="page-link">4</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next"></a>
</li>
</ul>
</nav>
</div>

### Popovers

<h4 class="mt-3">No theme</h4>
Expand Down

0 comments on commit 4915bc2

Please sign in to comment.