Fix #399

CHANGELOG.md

@@ -28,6 +28,7 @@
 * Fix #442 selected table row
 * Fix #187 add customize page
 * Fix #449 columns negative horizontal margin
+* Fix #399 pagination wrapping
 
 ## 0.4.0
 

docs/css/bulma-docs.css

@@ -4423,6 +4423,7 @@ a.nav-item.is-tab.is-active {
 
 .pagination {
   font-size: 1rem;
+  margin: -0.25rem;
 }
 
 .pagination.is-small {
@@ -4489,6 +4490,7 @@ a.nav-item.is-tab.is-active {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  margin: 0.25rem;
   text-align: center;
 }
 
@@ -4555,6 +4557,7 @@ a.nav-item.is-tab.is-active {
 .pagination-next {
   padding-left: 0.75em;
   padding-right: 0.75em;
+  white-space: nowrap;
 }
 
 .pagination-link.is-current {
@@ -4568,8 +4571,9 @@ a.nav-item.is-tab.is-active {
   pointer-events: none;
 }
 
-.pagination-list li:not(:first-child) {
+.pagination-list {
-  margin-left: 0.375rem;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 
 @media screen and (max-width: 768px) {
@@ -4584,13 +4588,6 @@ a.nav-item.is-tab.is-active {
             flex-grow: 1;
     -ms-flex-negative: 1;
         flex-shrink: 1;
-    width: calc(50% - 0.375rem);
-  }
-  .pagination-next {
-    margin-left: 0.75rem;
-  }
-  .pagination-list {
-    margin-top: 0.75rem;
   }
   .pagination-list li {
     -webkit-box-flex: 1;
@@ -4615,10 +4612,6 @@ a.nav-item.is-tab.is-active {
         -ms-flex-order: 1;
             order: 1;
   }
-  .pagination-previous,
-  .pagination-next {
-    margin-left: 0.75rem;
-  }
   .pagination-previous {
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
@@ -4635,7 +4628,6 @@ a.nav-item.is-tab.is-active {
             justify-content: space-between;
   }
   .pagination.is-centered .pagination-previous {
-    margin-left: 0;
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1;
@@ -4654,7 +4646,6 @@ a.nav-item.is-tab.is-active {
             order: 3;
   }
   .pagination.is-right .pagination-previous {
-    margin-left: 0;
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1;
@@ -4663,7 +4654,6 @@ a.nav-item.is-tab.is-active {
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;
-    margin-right: 0.75rem;
   }
   .pagination.is-right .pagination-list {
     -webkit-box-pack: end;

sass/components/pagination.sass

@@ -25,6 +25,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
 .pagination
   font-size: $size-normal
+  margin: -0.25rem
   // Sizes
   &.is-small
     font-size: $size-small
@@ -50,6 +51,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   padding-left: 0.5em
   padding-right: 0.5em
   justify-content: center
+  margin: 0.25rem
   text-align: center
 
 .pagination-previous,
@@ -75,6 +77,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-next
   padding-left: 0.75em
   padding-right: 0.75em
+  white-space: nowrap
 
 .pagination-link
   &.is-current
@@ -87,9 +90,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   pointer-events: none
 
 .pagination-list
-  li
+  flex-wrap: wrap
-    &:not(:first-child)
-      margin-left: 0.375rem
 
 +mobile
   .pagination
@@ -98,11 +99,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   .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: 1
@@ -113,9 +110,6 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
     flex-shrink: 1
     justify-content: flex-start
     order: 1
-  .pagination-previous,
-  .pagination-next
-    margin-left: 0.75rem
   .pagination-previous
     order: 2
   .pagination-next
@@ -124,7 +118,6 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
     justify-content: space-between
     &.is-centered
       .pagination-previous
-        margin-left: 0
         order: 1
       .pagination-list
         justify-content: center
@@ -133,11 +126,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
         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