Convert pagination component to CSS variables

twbs · Nov 22, 2021 · da2dfbb · da2dfbb
1 parent 9c01633
commit da2dfbb
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 43 deletions.
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -1,31 +1,44 @@
 .pagination {
+  // scss-docs-start pagination-css-vars
+  --#{$variable-prefix}pagination-padding: #{$pagination-padding-y $pagination-padding-x};
+  --#{$variable-prefix}pagination-color: #{$pagination-color};
+  --#{$variable-prefix}pagination-bg: #{$pagination-bg};
+  --#{$variable-prefix}pagination-border-width: #{$pagination-border-width};
+  --#{$variable-prefix}pagination-border-color: #{$pagination-border-color};
+  --#{$variable-prefix}pagination-border-radius: #{$pagination-border-radius};
+  // scss-docs-end pagination-css-vars
+
   display: flex;
   @include list-unstyled();
 }
 
 .page-link {
   position: relative;
   display: block;
-  color: $pagination-color;
+  padding: var(--#{$variable-prefix}pagination-padding);
+  font-size: var(--#{$variable-prefix}pagination-font-size, inherit);
+  color: var(--#{$variable-prefix}pagination-color);
   text-decoration: if($link-decoration == none, null, none);
-  background-color: $pagination-bg;
-  border: $pagination-border-width solid $pagination-border-color;
+  background-color: var(--#{$variable-prefix}pagination-bg);
+  border: var(--#{$variable-prefix}pagination-border-width) solid var(--#{$variable-prefix}pagination-border-color);
   @include transition($pagination-transition);
 
   &:hover {
+    --#{$variable-prefix}pagination-color: #{$pagination-hover-color};
+    --#{$variable-prefix}pagination-bg: #{$pagination-hover-bg};
+    --#{$variable-prefix}pagination-border-color: #{$pagination-hover-border-color};
+
     z-index: 2;
-    color: $pagination-hover-color;
     text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: $pagination-hover-bg;
-    border-color: $pagination-hover-border-color;
   }
 
   &:focus {
+    --#{$variable-prefix}pagination-color: #{$pagination-focus-color};
+    --#{$variable-prefix}pagination-bg: #{$pagination-focus-bg};
+    --#{$variable-prefix}pagination-box-shadow: #{$pagination-focus-box-shadow};
+
     z-index: 3;
-    color: $pagination-focus-color;
-    background-color: $pagination-focus-bg;
     outline: $pagination-focus-outline;
-    box-shadow: $pagination-focus-box-shadow;
   }
 }
 
@@ -34,26 +47,47 @@
     margin-left: $pagination-margin-start;
   }
 
+  @if $pagination-margin-start == (-$pagination-border-width) {
+    &:first-child {
+      .page-link {
+        @include border-start-radius(var(--#{$variable-prefix}pagination-border-radius));
+      }
+    }
+
+    &:last-child {
+      .page-link {
+        @include border-end-radius(var(--#{$variable-prefix}pagination-border-radius));
+      }
+    }
+  } @else {
+    // Add border-radius to all pageLinks in case they have left margin
+    .page-link {
+      @include border-radius(var(--#{$variable-prefix}pagination-border-radius));
+    }
+  }
+
   &.active .page-link {
+    --#{$variable-prefix}pagination-color: #{$pagination-active-color};
+    --#{$variable-prefix}pagination-bg: #{$pagination-active-bg};
+    --#{$variable-prefix}pagination-border-color: #{$pagination-active-border-color};
+
     z-index: 3;
-    color: $pagination-active-color;
-    @include gradient-bg($pagination-active-bg);
-    border-color: $pagination-active-border-color;
+    @include gradient-bg();
   }
 
   &.disabled .page-link {
-    color: $pagination-disabled-color;
+    --#{$variable-prefix}pagination-color: #{$pagination-disabled-color};
+    --#{$variable-prefix}pagination-bg: #{$pagination-disabled-bg};
+    --#{$variable-prefix}pagination-border-color: #{$pagination-disabled-border-color};
+
     pointer-events: none;
-    background-color: $pagination-disabled-bg;
-    border-color: $pagination-disabled-border-color;
   }
 }
 
 
 //
 // Sizing
 //
-@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
 
 .pagination-lg {
   @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);

diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
@@ -2,30 +2,8 @@
 
 // scss-docs-start pagination-mixin
 @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
-  .page-link {
-    padding: $padding-y $padding-x;
-    @include font-size($font-size);
-  }
-
-  .page-item {
-    @if $pagination-margin-start == (-$pagination-border-width) {
-      &:first-child {
-        .page-link {
-          @include border-start-radius($border-radius);
-        }
-      }
-
-      &:last-child {
-        .page-link {
-          @include border-end-radius($border-radius);
-        }
-      }
-    } @else {
-      //Add border-radius to all pageLinks in case they have left margin
-      .page-link {
-        @include border-radius($border-radius);
-      }
-    }
-  }
+  --#{$variable-prefix}pagination-padding: #{$padding-y $padding-x};
+  --#{$variable-prefix}pagination-font-size: #{$font-size};
+  --#{$variable-prefix}pagination-border-radius: #{$border-radius};
 }
 // scss-docs-end pagination-mixin
diff --git a/site/content/docs/5.1/components/pagination.md b/site/content/docs/5.1/components/pagination.md
@@ -156,12 +156,20 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
 </nav>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.3.0</small>
+
+As part of Bootstrap's evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 {{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}