From 77e4d470d9910d535f237f629a2f9921cbaad3e4 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 27 Oct 2023 09:26:51 +0200 Subject: [PATCH] Dark mode: pagination (#2314) --- scss/_pagination.scss | 14 +-- scss/_variables.scss | 35 ++++--- site/content/docs/5.3/dark-mode.md | 157 +++++++++++++++++++++++++++++ 3 files changed, 182 insertions(+), 24 deletions(-) diff --git a/scss/_pagination.scss b/scss/_pagination.scss index e15322c14b..f09e31f8a2 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -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}; @@ -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, diff --git a/scss/_variables.scss b/scss/_variables.scss index b066eef40d..7dbffd0ac7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1627,13 +1627,17 @@ $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 @@ -1641,24 +1645,27 @@ $pagination-margin-start: 0 !default; // Boosted mod: instead of `calc $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 @@ -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 diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index e3aaaa9e00..5fd04c5d3b 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -1821,6 +1821,163 @@ sitemap_exclude: true +### Pagination + +

No theme

+ +
+ + + +
+ +

Dark theme on container

+ +
+ + + +
+ +

Light theme on container

+ +
+ + + +
+ +

Dark theme on component

+ +
+ + + +
+ +

Light theme on component

+ +
+ + + +
+ ### Popovers

No theme