github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

add pagination month (#2905)

pull/2911/head
REJack 2020-07-22 16:00:40 +02:00 committed by GitHub
parent bc52b7276e
commit 42a184233e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 131 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
build/scss/_pagination.scss Normal file
View File

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

1
build/scss/parts/_core.scss
View File

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

88
pages/UI/general.html
View File

@ -1718,6 +1718,94 @@
<!-- ./col --> <!-- ./col -->
</div> </div>
<!-- /.row --> <!-- /.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 --> <!-- END TYPOGRAPHY -->
</div><!-- /.container-fluid --> </div><!-- /.container-fluid -->
</section> </section>