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-12-22 20:23:34 +00:00
parent 6883fac7de
commit da1006527c
4 changed files with 40 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4120,7 +4120,7 @@ a.nav-item.is-tab.is-active {
.pagination-previous:hover,
.pagination-next:hover,
.pagination-link:hover {
border-color: #00d1b2;
border-color: #b5b5b5;
color: #363636;
}
@ -4133,7 +4133,6 @@ a.nav-item.is-tab.is-active {
.pagination-previous:active,
.pagination-next:active,
.pagination-link:active {
background-color: whitesmoke;
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
}
@ -4161,7 +4160,7 @@ a.nav-item.is-tab.is-active {
}
.pagination-ellipsis {
color: #7a7a7a;
color: #b5b5b5;
pointer-events: none;
}

4
docs/documentation/layout/container.html
View File

@ -23,7 +23,7 @@ doc-subtab: container
<li><code>.section</code></li>
<li><code>.footer</code></li>
</ul>
<p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
<p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>1.5rem</strong> on both the left and right sides.</p>
<p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
</div>
</div>
@ -51,6 +51,7 @@ doc-subtab: container
<p>If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
</div>
</div>
</section>
<div class="example is-fullwidth">
<div class="container is-fluid">
@ -67,4 +68,3 @@ doc-subtab: container
</div>
</div>
{% endhighlight %}
</section>

2
sass/base/generic.sass
View File

@ -1,4 +1,4 @@
$body-background: $white-ter !default
$body-background: $white !default
$body-size: $size-6 !default
html

87
sass/components/pagination.sass
View File

@ -1,4 +1,27 @@
// $size: 0.875rem
$pagination: $grey-darker !default
$pagination-background: $white !default
$pagination-border: $grey-lighter !default
$pagination-hover: $link-hover !default
$pagination-hover-border: $link-hover-border !default
$pagination-focus: $link-focus !default
$pagination-focus-border: $link-focus-border !default
$pagination-active: $link-active !default
$pagination-active-border: $link-active-border !default
$pagination-disabled: $grey !default
$pagination-disabled-background: $grey-lighter !default
$pagination-disabled-border: $grey-lighter !default
$pagination-current: $link-invert !default
$pagination-current-background: $link !default
$pagination-current-border: $link !default
$pagination-ellipsis: $grey-light !default
$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination,
.pagination-list
@ -22,20 +45,19 @@
.pagination-previous,
.pagination-next,
.pagination-link
border: 1px solid $border
border: 1px solid $pagination-border
min-width: 2.5em
&:hover
border-color: $link
color: $text-strong
border-color: $pagination-hover-border
color: $pagination-hover
&:focus
border-color: $link
border-color: $pagination-focus-border
&:active
background-color: $background
box-shadow: inset 0 1px 2px rgba($black, 0.2)
box-shadow: $pagination-shadow-inset
&[disabled],
&.is-disabled
background: $border
color: $text-light
background: $pagination-disabled-background
color: $pagination-disabled
opacity: 0.5
pointer-events: none
@ -46,12 +68,12 @@
.pagination-link
&.is-current
background-color: $link
border-color: $link
color: $link-invert
background-color: $pagination-current-background
border-color: $pagination-current-border
color: $pagination-current
.pagination-ellipsis
color: $text-light
color: $pagination-ellipsis
pointer-events: none
.pagination-list
@ -109,42 +131,3 @@
.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