diff options
| author | A Web Artisan <laraloop.com@gmail.com> | 2022-03-11 22:25:41 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-11 22:25:41 +0300 |
| commit | ce655ee6f2fb8ad774846e4afe7daeb9fc8686e7 (patch) | |
| tree | 6b80912c2866f381e0ae2b30fd91972565cd5cc4 /scss | |
| parent | 58ac9a9a5cf6072188d8a928a6f3206ffb855219 (diff) | |
Allow to set active and disabled class also to .page-link (#35804)
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 <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_pagination.scss | 30 |
1 files 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); - } } |