From ce655ee6f2fb8ad774846e4afe7daeb9fc8686e7 Mon Sep 17 00:00:00 2001 From: A Web Artisan Date: Fri, 11 Mar 2022 20:25:41 +0100 Subject: [PATCH] Allow to set active and disabled class also to .page-link (#35804) MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Sometimes we can set `.active` class only to link tag and not parent. Since active status style is applied only to `.page-link` and not `.page-item`, would also make more sense to just add the active class to `.page-link` itself. The other way to set `.active` class to `.page-item` still remain, so there is not BC. Allow to set also `.disabled` class to `.page-link` Co-authored-by: Gaël Poupard Co-authored-by: XhmikosR Co-authored-by: Mark Otto --- scss/_pagination.scss | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 240d201529..7f182922a3 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -51,6 +51,22 @@ outline: $pagination-focus-outline; box-shadow: var(--#{$variable-prefix}pagination-focus-box-shadow); } + + &.active, + .active > & { + z-index: 3; + color: var(--#{$variable-prefix}pagination-active-color); + @include gradient-bg(var(--#{$variable-prefix}pagination-active-bg)); + border-color: var(--#{$variable-prefix}pagination-active-border-color); + } + + &.disabled, + .disabled > & { + color: var(--#{$variable-prefix}pagination-disabled-color); + pointer-events: none; + background-color: var(--#{$variable-prefix}pagination-disabled-bg); + border-color: var(--#{$variable-prefix}pagination-disabled-border-color); + } } .page-item { @@ -76,20 +92,6 @@ @include border-radius(var(--#{$variable-prefix}pagination-border-radius)); } } - - &.active .page-link { - z-index: 3; - color: var(--#{$variable-prefix}pagination-active-color); - @include gradient-bg(var(--#{$variable-prefix}pagination-active-bg)); - border-color: var(--#{$variable-prefix}pagination-active-border-color); - } - - &.disabled .page-link { - color: var(--#{$variable-prefix}pagination-disabled-color); - pointer-events: none; - background-color: var(--#{$variable-prefix}pagination-disabled-bg); - border-color: var(--#{$variable-prefix}pagination-disabled-border-color); - } } -- 2.47.2