117 lines
3.0 KiB
CSS
117 lines
3.0 KiB
CSS
/*
|
|
Pagination (multiple pages)
|
|
========================================
|
|
*/
|
|
|
|
/* Space out pagination from surrounding content */
|
|
.pagination {
|
|
margin: var(--base-line-height) 0;
|
|
}
|
|
|
|
.pagination ul {
|
|
/* Allow for text-based alignment */
|
|
display: inline-block;
|
|
/* Reset default ul styles */
|
|
margin-left: 0;
|
|
margin-bottom: 0;
|
|
/* Visuals */
|
|
border-radius: var(--base-border-radius);
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.05);
|
|
}
|
|
.pagination ul > li {
|
|
display: inline; /* Remove list-style and block-level defaults */
|
|
}
|
|
.pagination ul > li > a,
|
|
.pagination ul > li > span {
|
|
float: left; /* Collapse white-space */
|
|
padding: 4px 12px;
|
|
line-height: var(--base-line-height);
|
|
text-decoration: none;
|
|
background-color: var(--pagination-background);
|
|
border: 1px solid var(--pagination-border);
|
|
border-left-width: 0;
|
|
}
|
|
.pagination ul > li > a:hover,
|
|
.pagination ul > li > a:focus,
|
|
.pagination ul > .active > a,
|
|
.pagination ul > .active > span {
|
|
background-color: var(--pagination-active-background);
|
|
}
|
|
.pagination ul > .active > a,
|
|
.pagination ul > .active > span {
|
|
color: var(--gray-light);
|
|
cursor: default;
|
|
}
|
|
.pagination ul > .disabled > span,
|
|
.pagination ul > .disabled > a,
|
|
.pagination ul > .disabled > a:hover,
|
|
.pagination ul > .disabled > a:focus {
|
|
color: var(--gray-light);
|
|
background-color: transparent;
|
|
cursor: default;
|
|
}
|
|
.pagination ul > li:first-child > a,
|
|
.pagination ul > li:first-child > span {
|
|
border-left-width: 1px;
|
|
border-top-left-radius: var(--base-border-radius);
|
|
border-bottom-left-radius: var(--base-border-radius);
|
|
}
|
|
.pagination ul > li:last-child > a,
|
|
.pagination ul > li:last-child > span {
|
|
border-top-right-radius: var(--base-border-radius);
|
|
border-bottom-right-radius: var(--base-border-radius);
|
|
}
|
|
|
|
/* Alignment */
|
|
.pagination-centered {
|
|
text-align: center;
|
|
}
|
|
.pagination-right {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Sizing */
|
|
|
|
/* Large */
|
|
.pagination-large ul > li > a,
|
|
.pagination-large ul > li > span {
|
|
padding: var(--padding-large);
|
|
font-size: var(--font-size-large);
|
|
}
|
|
.pagination-large ul > li:first-child > a,
|
|
.pagination-large ul > li:first-child > span {
|
|
border-top-left-radius: var(--border-radius-large);
|
|
border-bottom-left-radius: var(--border-radius-large);
|
|
}
|
|
.pagination-large ul > li:last-child > a,
|
|
.pagination-large ul > li:last-child > span {
|
|
border-top-right-radius: var(--border-radius-large);
|
|
border-bottom-right-radius: var(--border-radius-large);
|
|
}
|
|
|
|
/* Small and mini */
|
|
.pagination-mini ul > li:first-child > a,
|
|
.pagination-small ul > li:first-child > span {
|
|
border-top-left-radius: var(--border-radius-small);
|
|
border-bottom-left-radius: var(--border-radius-small);
|
|
}
|
|
.pagination-mini ul > li:last-child > a,
|
|
.pagination-small ul > li:last-child > span {
|
|
border-top-right-radius: var(--border-radius-small);
|
|
border-bottom-right-radius: var(--border-radius-small);
|
|
}
|
|
|
|
/* Small */
|
|
.pagination-small ul > li > a,
|
|
.pagination-small ul > li > span {
|
|
padding: var(--padding-small);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
/* Mini */
|
|
.pagination-mini ul > li > a,
|
|
.pagination-mini ul > li > span {
|
|
padding: var(--padding-mini);
|
|
font-size: var(--font-size-mini);
|
|
}
|