Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Pagination component

Browse source
This commit is contained in:
Paul Adam Davis 2014-08-14 12:48:44 +01:00
parent 60f1b47129
commit 6472d80474
3 changed files with 179 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
core/client/assets/sass/components/pagination.scss Normal file
View file

@ -0,0 +1,110 @@
//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: $rounded;
> li {
display: inline; // Remove list-style and block-level defaults
> a,
> span {
position: relative;
float: left; // Collapse white-space
padding: 6px 12px;
line-height: 1.42857143;
text-decoration: none;
color: $blue;
background-color: #fff;
border: 1px solid $lightbrown;
margin-left: -1px;
}
&:first-child {
> a,
> span {
margin-left: 0;
border-top-left-radius: $rounded;
border-bottom-left-radius: $rounded;
}
}
&:last-child {
> a,
> span {
border-top-right-radius: $rounded;
border-bottom-right-radius: $rounded;
}
}
}
> li > a,
> li > span {
&:hover,
&:focus {
color: #2A6496;
background-color: #EEE;
}
}
> .active > a,
> .active > span {
&,
&:hover,
&:focus {
z-index: 2;
color: #FFF;
background-color: #428BCA;
cursor: default;
}
}
> .disabled {
> span,
> span:hover,
> span:focus,
> a,
> a:hover,
> a:focus {
color: #777;
background-color: #FFF;
border-color: #DDD;
cursor: not-allowed;
}
}
}
// Sizing
// --------------------------------------------------
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
> li {
> a,
> span {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
}
&:first-child {
> a,
> span {
@include border-left-radius($border-radius);
}
}
&:last-child {
> a,
> span {
@include border-right-radius($border-radius);
}
}
}
}
// Large
.pagination-lg {
@include pagination-size(10px, 16px, 18px, 6px);
}
// Small
.pagination-sm {
@include pagination-size(5px, 10px, 12px, 3px);
}

1
core/client/assets/sass/screen.scss
View file

@ -40,6 +40,7 @@
@import "components/uploader";
@import "components/splitbuttons";
@import "components/dropdowns";
@import "components/pagination";
//

68
core/client/docs/pagination.html Normal file
View file

@ -0,0 +1,68 @@
---
layout: default
title: Ghost UI · Making publishing beautiful.
---
<header class="page-header">
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
<h2>Home</h2>
</header>
<section class="page-content">
<h3>Default Pagination</h3>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
<h3>States</h3>
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
<hr>
<h3>Sizes</h3>
<h6>Large</h6>
<ul class="pagination pagination-lg">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul><br>
<br>
<h6>Default</h6>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul><br>
<br>
<h6>Small</h6>
<ul class="pagination pagination-sm">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</section>