display of pagination component (#16)

Author: Caio Tarifa

app/assets/stylesheets/formadmin/components/_pagination.scss

@@ -2,10 +2,6 @@
   margin-bottom: 20px;
 }
 
-.paginated_collection_contents {
-  @include clearfix;
-}
-
 #index_footer {
   margin-top: 20px;
 }
@@ -20,32 +16,21 @@
 // Information
 .pagination_information {
   color: rgba($text-color, 0.75);
-  float: right;
 
   b {
     color: $text-color;
   }
 }
 
 // Per Page
-.pagination_per_page {
-  float: right;
-  margin-left: 20px;
-
-  select {
-    padding: 1px 5px;
-  }
-}
-
-// Download Links
-.download_links {
-  float: left;
+.pagination_per_page select {
+  padding: 1px 5px;
 }
 
 // Pagination
 .pagination {
   font-weight: bold;
-  margin: 0 0 -20px 20px;
+  margin: 0 auto;
   text-align: center;
   text-transform: uppercase;
 
@@ -60,7 +45,7 @@
     padding: 6px 10px 5px;
     text-decoration: none;
     transition: background-color 250ms;
-    margin: 0 1px;
+    margin: 0 1px 4px;
   }
 
   a:not(.current):hover {
@@ -77,13 +62,29 @@
 
 // Medias
 @media #{$largest-phone-screen} {
-  .pagination,
+  .pagination {
+    margin-bottom: 10px;
+  }
+
   .pagination_information,
   .pagination_per_page,
   .download_links {
-    display: block;
-    float: none;
     text-align: center;
+  }
+}
+
+@media #{$tablet-and-desktop-screen} {
+  #index_footer {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .pagination {
+    display: block;
+    margin-top: 10px;
+    order: 10;
     width: 100%;
   }
 }