library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix pagination

Browse Source
This commit is contained in:
Jeremy Thomas 2016-10-30 22:31:54 +00:00
parent 9d48eff270
commit 3c48f5b3c3
3 changed files with 441 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
docs/css/bulma-docs.css
View File

@ -4035,60 +4035,195 @@ a.nav-item.is-tab.is-active {
} }
} }
.pagination { .pagination,
.pagination-list {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.pagination a { .pagination-previous,
display: block; .pagination-next,
min-width: 32px; .pagination-link,
padding: 3px 8px; .pagination-ellipsis {
} -moz-appearance: none;
-webkit-appearance: none;
.pagination span {
color: #7a7a7a;
display: block;
margin: 0 4px;
}
.pagination li {
margin: 0 2px;
}
.pagination ul {
align-items: center; align-items: center;
display: flex; border: none;
flex-grow: 1; border-radius: 3px;
flex-shrink: 0; box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.5em;
justify-content: flex-start;
line-height: 1.5;
padding-left: 0.75em;
padding-right: 0.75em;
position: relative;
vertical-align: top;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 0.875rem;
padding-left: 0.5em;
padding-right: 0.5em;
justify-content: center; justify-content: center;
text-align: center;
}
.pagination-previous:focus, .pagination-previous.is-focused, .pagination-previous:active, .pagination-previous.is-active,
.pagination-next:focus,
.pagination-next.is-focused,
.pagination-next:active,
.pagination-next.is-active,
.pagination-link:focus,
.pagination-link.is-focused,
.pagination-link:active,
.pagination-link.is-active,
.pagination-ellipsis:focus,
.pagination-ellipsis.is-focused,
.pagination-ellipsis:active,
.pagination-ellipsis.is-active {
outline: none;
}
.pagination-previous[disabled], .pagination-previous.is-disabled,
.pagination-next[disabled],
.pagination-next.is-disabled,
.pagination-link[disabled],
.pagination-link.is-disabled,
.pagination-ellipsis[disabled],
.pagination-ellipsis.is-disabled {
pointer-events: none;
}
.pagination-previous,
.pagination-next,
.pagination-link {
border: 1px solid #dbdbdb;
min-width: 2.5em;
}
.pagination-previous:hover,
.pagination-next:hover,
.pagination-link:hover {
border-color: #00d1b2;
color: #363636;
}
.pagination-previous:focus,
.pagination-next:focus,
.pagination-link:focus {
border-color: #00d1b2;
}
.pagination-previous:active,
.pagination-next:active,
.pagination-link:active {
background-color: whitesmoke;
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
}
.pagination-previous[disabled], .pagination-previous.is-disabled,
.pagination-next[disabled],
.pagination-next.is-disabled,
.pagination-link[disabled],
.pagination-link.is-disabled {
background: #dbdbdb;
color: #7a7a7a;
opacity: 0.5;
pointer-events: none;
}
.pagination-previous,
.pagination-next {
padding-left: 0.75em;
padding-right: 0.75em;
}
.pagination-link.is-current {
background-color: #00d1b2;
border-color: #00d1b2;
color: #fff;
}
.pagination-ellipsis {
color: #7a7a7a;
pointer-events: none;
}
.pagination-list li:not(:first-child) {
margin-left: 0.375rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.pagination { .pagination {
flex-wrap: wrap; flex-wrap: wrap;
} }
.pagination > a { .pagination-previous,
width: calc(50% - 5px); .pagination-next {
}
.pagination > a:not(:first-child) {
margin-left: 10px;
}
.pagination li {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 1;
width: calc(50% - 0.375rem);
} }
.pagination ul { .pagination-next {
margin-top: 10px; margin-left: 0.75rem;
}
.pagination-list {
margin-top: 0.75rem;
}
.pagination-list li {
flex-grow: 1;
flex-shrink: 1;
} }
} }
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
.pagination > a:not(:first-child) { .pagination-list {
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
order: 1; order: 1;
} }
.pagination-previous,
.pagination-next {
margin-left: 0.75rem;
}
.pagination-previous {
order: 2;
}
.pagination-next {
order: 3;
}
.pagination {
justify-content: space-between;
}
.pagination.is-centered .pagination-previous {
margin-left: 0;
order: 1;
}
.pagination.is-centered .pagination-list {
justify-content: center;
order: 2;
}
.pagination.is-centered .pagination-next {
order: 3;
}
.pagination.is-right .pagination-previous {
margin-left: 0;
order: 1;
}
.pagination.is-right .pagination-next {
order: 2;
margin-right: 0.75rem;
}
.pagination.is-right .pagination-list {
justify-content: flex-end;
order: 3;
}
} }
.panel-icon { .panel-icon {

173
docs/documentation/components/pagination.html
View File

@ -13,63 +13,158 @@ doc-subtab: pagination
<hr> <hr>
<div class="example"> <div class="content">
<nav class="pagination"> <p>
<a class="button">Previous</a> The pagination component consists of several elements:
<a class="button">Next page</a> </p>
<ul> <ul>
<li> <li>
<a class="button">1</a> <code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
</li> </li>
<li> <li>
<span>...</span> <code>pagination-list</code> which displays page items:
</li> <ul>
<li> <li>
<a class="button">45</a> <code>pagination-link</code> for the page numbers
</li> </li>
<li> <li>
<a class="button is-primary">46</a> <code>pagination-ellipsis</code> for range separators
</li> </li>
<li> </ul>
<a class="button">47</a> </li>
</li> </ul>
<li> <p>
<span>...</span> All elements are optional so you can compose your pagination as you wish.
</li> </p>
<li>
<a class="button">86</a>
</li>
</ul>
</nav>
</div> </div>
{% highlight html %}
{% capture pagination_example %}
<nav class="pagination"> <nav class="pagination">
<a class="button">Previous</a> <a class="pagination-previous">Previous</a>
<a class="button">Next page</a> <a class="pagination-next">Next page</a>
<ul> <ul class="pagination-list">
<li> <li>
<a class="button">1</a> <a class="pagination-link">1</a>
</li> </li>
<li> <li>
<span>...</span> <span class="pagination-ellipsis">&hellip;</span>
</li> </li>
<li> <li>
<a class="button">45</a> <a class="pagination-link">45</a>
</li> </li>
<li> <li>
<a class="button is-primary">46</a> <a class="pagination-link is-current">46</a>
</li> </li>
<li> <li>
<a class="button">47</a> <a class="pagination-link">47</a>
</li> </li>
<li> <li>
<span>...</span> <span class="pagination-ellipsis">&hellip;</span>
</li> </li>
<li> <li>
<a class="button">86</a> <a class="pagination-link">86</a>
</li> </li>
</ul> </ul>
</nav> </nav>
{% endcapture %}
<div class="example">
{{pagination_example}}
</div>
{% highlight html %}
{{pagination_example}}
{% endhighlight %} {% endhighlight %}
<div class="content">
<p>
You can disable some links if they are not active, or change the amount of page numbers available.
</p>
</div>
{% capture pagination_options_example %}
<nav class="pagination">
<a class="pagination-previous is-disabled">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link is-current">1</a>
</li>
<li>
<a class="pagination-link">2</a>
</li>
<li>
<a class="pagination-link">3</a>
</li>
<li>
<a class="pagination-link">4</a>
</li>
<li>
<a class="pagination-link">5</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link">86</a>
</li>
</ul>
</nav>
{% endcapture %}
<div class="example">
{{pagination_options_example}}
</div>
{% highlight html %}
{{pagination_options_example}}
{% endhighlight %}
<div class="content">
<p>
By default, the list is located on the left, and the previous/next buttons on the right. But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and <code>is-right</code> modifiers.
</p>
</div>
{% capture pagination_centered_example %}
<nav class="pagination is-centered">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link">1</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link">45</a></li>
<li><a class="pagination-link is-current">46</a></li>
<li><a class="pagination-link">47</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link">86</a></li>
</ul>
</nav>
{% endcapture %}
<div class="example">
{{pagination_centered_example}}
</div>
{% highlight html %}
{{pagination_centered_example}}
{% endhighlight %}
{% capture pagination_right_example %}
<nav class="pagination is-right">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link">1</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link">45</a></li>
<li><a class="pagination-link is-current">46</a></li>
<li><a class="pagination-link">47</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link">86</a></li>
</ul>
</nav>
{% endcapture %}
<div class="example">
{{pagination_right_example}}
</div>
{% highlight html %}
{{pagination_right_example}}
{% endhighlight %}
</div> </div>
</section> </section>

167
sass/components/pagination.sass
View File

@ -1,37 +1,150 @@
.pagination // $size: 0.875rem
.pagination,
.pagination-list
align-items: center align-items: center
display: flex display: flex
justify-content: center justify-content: center
text-align: center text-align: center
a
display: block .pagination-previous,
min-width: 32px .pagination-next,
padding: 3px 8px .pagination-link,
span .pagination-ellipsis
+control
+unselectable
font-size: 0.875rem
padding-left: 0.5em
padding-right: 0.5em
justify-content: center
text-align: center
.pagination-previous,
.pagination-next,
.pagination-link
border: 1px solid $border
min-width: 2.5em
&:hover
border-color: $link
color: $text-strong
&:focus
border-color: $link
&:active
background-color: $background
box-shadow: inset 0 1px 2px rgba($black, 0.2)
&[disabled],
&.is-disabled
background: $border
color: $text-light color: $text-light
display: block opacity: 0.5
margin: 0 4px pointer-events: none
.pagination-previous,
.pagination-next
padding-left: 0.75em
padding-right: 0.75em
.pagination-link
&.is-current
background-color: $link
border-color: $link
color: $link-invert
.pagination-ellipsis
color: $text-light
pointer-events: none
.pagination-list
li li
margin: 0 2px &:not(:first-child)
ul margin-left: 0.375rem
align-items: center
display: flex +mobile
flex-grow: 1 .pagination
flex-shrink: 0
justify-content: center
// Responsiveness
+mobile
flex-wrap: wrap flex-wrap: wrap
& > a .pagination-previous,
width: calc(50% - 5px) .pagination-next
&:not(:first-child) flex-grow: 1
margin-left: 10px flex-shrink: 1
width: calc(50% - 0.375rem)
.pagination-next
margin-left: 0.75rem
.pagination-list
margin-top: 0.75rem
li li
flex-grow: 1 flex-grow: 1
flex-shrink: 0 flex-shrink: 1
ul
margin-top: 10px +tablet
+tablet .pagination-list
& > a flex-grow: 1
&:not(:first-child) flex-shrink: 1
justify-content: flex-start
order: 1
.pagination-previous,
.pagination-next
margin-left: 0.75rem
.pagination-previous
order: 2
.pagination-next
order: 3
.pagination
justify-content: space-between
&.is-centered
.pagination-previous
margin-left: 0
order: 1 order: 1
.pagination-list
justify-content: center
order: 2
.pagination-next
order: 3
&.is-right
.pagination-previous
margin-left: 0
order: 1
.pagination-next
order: 2
margin-right: 0.75rem
.pagination-list
justify-content: flex-end
order: 3
// .pagination
// align-items: center
// display: flex
// justify-content: center
// text-align: center
// a
// display: block
// min-width: 32px
// padding: 3px 8px
// span
// color: $text-light
// display: block
// margin: 0 4px
// li
// margin: 0 2px
// ul
// align-items: center
// display: flex
// flex-grow: 1
// flex-shrink: 0
// justify-content: center
// // Responsiveness
// +mobile
// flex-wrap: wrap
// & > a
// width: calc(50% - 5px)
// &:not(:first-child)
// margin-left: 10px
// li
// flex-grow: 1
// flex-shrink: 0
// ul
// margin-top: 10px
// +tablet
// & > a
// &:not(:first-child)
// order: 1