mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Fix pagination
This commit is contained in:
Jeremy Thomas
parent
9d48eff270
commit
3c48f5b3c3
@ -4035,60 +4035,195 @@ a.nav-item.is-tab.is-active {
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.pagination,
|
||||
.pagination-list {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
display: block;
|
||||
min-width: 32px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.pagination span {
|
||||
color: #7a7a7a;
|
||||
display: block;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
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;
|
||||
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) {
|
||||
.pagination {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pagination > a {
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
.pagination > a:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.pagination li {
|
||||
.pagination-previous,
|
||||
.pagination-next {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
flex-shrink: 1;
|
||||
width: calc(50% - 0.375rem);
|
||||
}
|
||||
.pagination ul {
|
||||
margin-top: 10px;
|
||||
.pagination-next {
|
||||
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) {
|
||||
.pagination > a:not(:first-child) {
|
||||
.pagination-list {
|
||||
flex-grow: 1;
|
||||
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;
|
||||
}
|
||||
.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 {
|
||||
|
||||
@ -13,63 +13,158 @@ doc-subtab: pagination
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="example">
|
||||
<nav class="pagination">
|
||||
<a class="button">Previous</a>
|
||||
<a class="button">Next page</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="button">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>...</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button is-primary">46</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>...</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">86</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<p>
|
||||
The pagination component consists of several elements:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
|
||||
</li>
|
||||
<li>
|
||||
<code>pagination-list</code> which displays page items:
|
||||
<ul>
|
||||
<li>
|
||||
<code>pagination-link</code> for the page numbers
|
||||
</li>
|
||||
<li>
|
||||
<code>pagination-ellipsis</code> for range separators
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
All elements are optional so you can compose your pagination as you wish.
|
||||
</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
|
||||
{% capture pagination_example %}
|
||||
<nav class="pagination">
|
||||
<a class="button">Previous</a>
|
||||
<a class="button">Next page</a>
|
||||
<ul>
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="button">1</a>
|
||||
<a class="pagination-link">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>...</span>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">45</a>
|
||||
<a class="pagination-link">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button is-primary">46</a>
|
||||
<a class="pagination-link is-current">46</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">47</a>
|
||||
<a class="pagination-link">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>...</span>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">86</a>
|
||||
<a class="pagination-link">86</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{pagination_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{pagination_example}}
|
||||
{% 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">…</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">…</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">…</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">…</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">…</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>
|
||||
</section>
|
||||
|
||||
@ -1,37 +1,150 @@
|
||||
.pagination
|
||||
// $size: 0.875rem
|
||||
|
||||
.pagination,
|
||||
.pagination-list
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
text-align: center
|
||||
a
|
||||
display: block
|
||||
min-width: 32px
|
||||
padding: 3px 8px
|
||||
span
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.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
|
||||
display: block
|
||||
margin: 0 4px
|
||||
opacity: 0.5
|
||||
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
|
||||
margin: 0 2px
|
||||
ul
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
justify-content: center
|
||||
// Responsiveness
|
||||
+mobile
|
||||
&:not(:first-child)
|
||||
margin-left: 0.375rem
|
||||
|
||||
+mobile
|
||||
.pagination
|
||||
flex-wrap: wrap
|
||||
& > a
|
||||
width: calc(50% - 5px)
|
||||
&:not(:first-child)
|
||||
margin-left: 10px
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
width: calc(50% - 0.375rem)
|
||||
.pagination-next
|
||||
margin-left: 0.75rem
|
||||
.pagination-list
|
||||
margin-top: 0.75rem
|
||||
li
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
ul
|
||||
margin-top: 10px
|
||||
+tablet
|
||||
& > a
|
||||
&:not(:first-child)
|
||||
flex-shrink: 1
|
||||
|
||||
+tablet
|
||||
.pagination-list
|
||||
flex-grow: 1
|
||||
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
|
||||
.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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user