diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index fc0f3d87..abb1801d 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -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 { diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index 0035f58f..d1bd3052 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -13,63 +13,158 @@ doc-subtab: pagination
-
- +
+

+ The pagination component consists of several elements: +

+ +

+ All elements are optional so you can compose your pagination as you wish. +

-{% highlight html %} + +{% capture pagination_example %} +{% endcapture %} +
+{{pagination_example}} +
+{% highlight html %} +{{pagination_example}} {% endhighlight %} + +
+

+ You can disable some links if they are not active, or change the amount of page numbers available. +

+
+ +{% capture pagination_options_example %} + +{% endcapture %} +
+{{pagination_options_example}} +
+{% highlight html %} +{{pagination_options_example}} +{% endhighlight %} + +
+

+ By default, the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the is-centered and is-right modifiers. +

+
+ +{% capture pagination_centered_example %} + +{% endcapture %} +
+{{pagination_centered_example}} +
+{% highlight html %} +{{pagination_centered_example}} +{% endhighlight %} + +{% capture pagination_right_example %} + +{% endcapture %} +
+{{pagination_right_example}} +
+{% highlight html %} +{{pagination_right_example}} +{% endhighlight %} +
diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass index 63cddc11..c7be2717 100644 --- a/sass/components/pagination.sass +++ b/sass/components/pagination.sass @@ -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