adding the pager component after rewriting the pagination docs and css

This commit is contained in:
Mark Otto
2012-01-14 20:54:37 -08:00
parent 1c6048bac2
commit 6d916763f8
6 changed files with 211 additions and 78 deletions

1
lib/bootstrap.less vendored
View File

@@ -36,6 +36,7 @@
@import "navs.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
// Components: Popovers
@import "modals.less";

25
lib/pager.less Normal file
View File

@@ -0,0 +1,25 @@
// PAGER
// -----
.pager {
margin-left: 0;
margin-bottom: @baseLineHeight;
list-style: none;
text-align: center;
.clearfix();
}
.pager li {
display: inline;
}
.pager a {
display: inline-block;
padding: 6px 15px;
background-color: #f5f5f5;
.border-radius(15px);
}
.pager .next a {
float: right;
}
.pager .previous a {
float: left;
}

View File

@@ -4,44 +4,46 @@
.pagination {
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
ul {
display: inline-block;
.ie7-inline-block();
margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
li {
}
.pagination ul {
display: inline-block;
.ie7-inline-block();
margin-left: 0;
margin-bottom: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
.pagination li {
display: inline;
}
a {
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
text-decoration: none;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
*border-right-color: #ddd; /* IE6-7 */
}
a:hover,
.active a {
background-color: lighten(@blue, 45%);
}
.disabled a,
.disabled a:hover {
color: @grayLight;
background-color: transparent;
cursor: default;
}
.next a {
border: 0;
}
// Centered
&.centered {
text-align: center;
}
.pagination a {
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
text-decoration: none;
border-right: 1px solid #ddd;
border-right: 1px solid rgba(0,0,0,.15);
}
.pagination a:hover,
.pagination .active a {
background-color: #f5f5f5;
}
.pagination .disabled a,
.pagination .disabled a:hover {
color: @grayLight;
background-color: transparent;
cursor: default;
}
.pagination li:last-child a {
border: 0;
}
// Centered
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}