add pagination month (#2905)

build/scss/_pagination.scss

@@ -0,0 +1,42 @@
+//
+// Component: Pagination
+//
+
+.pagination-month {
+  .page-item {
+    justify-self: stretch;
+
+    .page-link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+    }
+    &:first-child,
+    &:last-child {
+      .page-link {
+        height: 100%;
+        font-size: $font-size-lg;
+      }
+    }
+    .page-month {
+      margin-bottom: 0;
+      font-size: $font-size-lg;
+      font-weight: $font-weight-bold;
+    }
+    .page-year {
+      margin-bottom: 0;
+    }
+  }
+
+  &.pagination-lg {
+    .page-month {
+      font-size: ($font-size-lg * 1.25);
+    }
+  }
+  &.pagination-sm {
+    .page-month {
+      font-size: ($font-size-base);
+    }
+  }
+}

build/scss/parts/_core.scss

@@ -10,3 +10,4 @@
 @import "../control-sidebar";
 @import "../dropdown";
 @import "../navs";
+@import "../pagination";

pages/UI/general.html

@@ -1718,6 +1718,94 @@
           <!-- ./col -->
         </div>
         <!-- /.row -->
+        <div class="row">
+          <div class="col-12">
+            <div class="card">
+              <div class="card-header">
+                <h3 class="card-title">Pagination Month</h3>
+              </div>
+              <div class="card-body">
+                <ul class="pagination pagination-month justify-content-center">
+                  <li class="page-item"><a class="page-link" href="#">«</a></li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Jan</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item active">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Feb</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Mar</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Apr</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">May</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Jun</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Jul</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Aug</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Sep</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Oct</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Nov</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#">
+                          <p class="page-month">Dec</p>
+                          <p class="page-year">2020</p>
+                      </a>
+                  </li>
+                  <li class="page-item"><a class="page-link" href="#">»</a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- /.row -->
         <!-- END TYPOGRAPHY -->
       </div><!-- /.container-fluid -->
     </section>