From: A Web Artisan <laraloop.com@gmail.com>
Date: Fri, 11 Mar 2022 19:25:41 +0000 (+0100)
Subject: Allow to set active and disabled class also to .page-link (#35804)
X-Git-Tag: v5.2.0-beta1~146
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ce655ee6f2fb8ad774846e4afe7daeb9fc8686e7;p=thirdparty%2Fbootstrap.git

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>
---

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