}
}
-.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-previous,
+.pagination-next,
+.pagination-link,
+.pagination-ellipsis {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ align-items: center;
+ 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 span {
+.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;
- display: block;
- margin: 0 4px;
+ opacity: 0.5;
+ pointer-events: none;
}
-.pagination li {
- margin: 0 2px;
+.pagination-previous,
+.pagination-next {
+ padding-left: 0.75em;
+ padding-right: 0.75em;
}
-.pagination ul {
- align-items: center;
- display: flex;
- flex-grow: 1;
- flex-shrink: 0;
- justify-content: center;
+.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-previous,
+ .pagination-next {
+ flex-grow: 1;
+ flex-shrink: 1;
+ width: calc(50% - 0.375rem);
}
- .pagination > a:not(:first-child) {
- margin-left: 10px;
+ .pagination-next {
+ margin-left: 0.75rem;
}
- .pagination li {
- flex-grow: 1;
- flex-shrink: 0;
+ .pagination-list {
+ margin-top: 0.75rem;
}
- .pagination ul {
- margin-top: 10px;
+ .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 {
<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>
+
+{% capture pagination_example %}
+<nav class="pagination">
+ <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_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="button">Previous</a>
- <a class="button">Next page</a>
- <ul>
+ <a class="pagination-previous is-disabled">Previous</a>
+ <a class="pagination-next">Next page</a>
+ <ul class="pagination-list">
<li>
- <a class="button">1</a>
+ <a class="pagination-link is-current">1</a>
</li>
<li>
- <span>...</span>
+ <a class="pagination-link">2</a>
</li>
<li>
- <a class="button">45</a>
+ <a class="pagination-link">3</a>
</li>
<li>
- <a class="button is-primary">46</a>
+ <a class="pagination-link">4</a>
</li>
<li>
- <a class="button">47</a>
+ <a class="pagination-link">5</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_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>
-.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
projects / thirdparty / bulma.git / commitdiff
