kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Allow to set active and disabled class also to .page-link (#35804)

Browse source 
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>
This commit is contained in:
A Web Artisan 2022-03-11 20:25:41 +01:00 committed by GitHub
parent 58ac9a9a5c
commit ce655ee6f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
scss/_pagination.scss
View file

@ -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);
}
}