Merge pull request #39 from bmf-san/feature/add-pagination-active-class

Add a class for active page in pagination
bmf-san · Jun 19, 2022 · f09778e · f09778e
2 parents 4adbc30 + e930dde
commit f09778e
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 4 deletions.
diff --git a/dist/sea.min.css b/dist/sea.min.css
diff --git a/docs/dist/sea.min.css b/docs/dist/sea.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -445,7 +445,7 @@ <h1>Pagination</h1>
                 <div class="pagination">
                     <ul class="pagination-list">
                         <li class="pagination-pre"><a href="#"><span>«</span></a></li>
-                        <li><a href="#"><span>1</span></a></li>
+                        <li><a class="pagination-active" href="#"><span>1</span></a></li>
                         <li><a href="#"><span>2</span></a></li>
                         <li><a href="#"><span>3</span></a></li>
                         <li><a href="#"><span>4</span></a></li>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "sea.css",
-    "version": "2.4.0",
+    "version": "2.4.1",
     "description": "sea.css is a simple and easy to use css framework.",
     "main": "dist/sea.min.css",
     "directories": {

diff --git a/src/component/_pagination.css b/src/component/_pagination.css
@@ -30,6 +30,11 @@
   font-size: 1.5rem;
 }
 
+.pagination .pagination-list li .pagination-active {
+  color: var(--main-text-reverse-color);
+  background-color: var(--main-color);
+}
+
 .pagination .pagination-list li a span {
   display: table-cell;
   vertical-align: middle;