Fix pagination

docs/css/bulma-docs.css

@@ -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;
 }
 

docs/documentation/layout/container.html

@@ -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>

sass/base/generic.sass

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

sass/components/pagination.sass

@@ -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
+    border-color: $pagination-hover-border
-    color: $text-strong
+    color: $pagination-hover
   &:focus
-    border-color: $link
+    border-color: $pagination-focus-border
   &:active
-    background-color: $background
+    box-shadow: $pagination-shadow-inset
-    box-shadow: inset 0 1px 2px rgba($black, 0.2)
   &[disabled],
   &.is-disabled
-    background: $border
+    background: $pagination-disabled-background
-    color: $text-light
+    color: $pagination-disabled
     opacity: 0.5
     pointer-events: none
 
@@ -46,12 +68,12 @@
 
 .pagination-link
   &.is-current
-    background-color: $link
+    background-color: $pagination-current-background
-    border-color: $link
+    border-color: $pagination-current-border
-    color: $link-invert
+    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