Improvments on filter menu responsiviness.

src/admin/pages/lists/items-page.vue

@@ -579,7 +579,8 @@
             </div>
         </div>
         <b-modal
-                class="tainacan-form filters-mobile-modal is-hidden-tablet"                
+                id="filters-mobile-modal"
+                class="tainacan-form is-hidden-tablet"                
                 :active.sync="isFilterModalActive"
                 :width="736">
             <div class="modal-inner-content">

src/admin/scss/_filters-menu-modal.scss

@@ -0,0 +1,61 @@
+#filters-mobile-modal {
+    // top: 95px;
+    @keyframes slide-menu {
+        from {
+            -ms-transform: translate(-100%, 0); /* IE 9 */
+            -webkit-transform: translate(-100%, 0); /* Safari */
+            transform: translate(-100%, 0);
+        }
+        to {
+            -ms-transform: translate(0, 0); /* IE 9 */
+            -webkit-transform: translate(0, 0); /* Safari */
+            transform: translate(0, 0);
+        }
+    }
+
+    animation-name: slide-menu;
+    animation-duration: 0.3s;
+    animation-timing-function: ease-out;
+
+    @keyframes appear {
+        from {
+            opacity: 0.0;
+            visibility: hidden;
+        }
+        to {
+            opacity: 1.0;
+            visibility: visible;
+        }
+    }
+
+    .modal-background {
+        animation-name: appear;
+        animation-duration: 0.6s;
+        animation-timing-function: ease-in;
+    }
+
+    .modal-close {
+        right: calc(8.3333333% + 20px);
+        background-color: $gray1;
+
+        &:hover {
+            background-color: $gray1;   
+        }
+        &::before, &::after {
+            background-color: $secondary;
+        }
+    }
+    .modal-content {
+        background-color: white;
+        margin: 0 8.3333333% 0 0;
+        padding: 24px $page-side-padding;
+        border-radius: 0;
+        height: 100%;
+        max-height: 100%;
+        overflow-y: auto;
+
+        h3 {
+            font-size: 100%;
+        }
+    }
+}

src/admin/scss/tainacan-admin.scss

@@ -22,6 +22,7 @@
 @import "../scss/_modals.scss";
 @import "../scss/_tags.scss";
 @import "../scss/_notices.scss";
+@import "../scss/_filters-menu-modal.scss";
 
 // Clears wordpress content
 body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, body.tainacan-admin-page #wp-auth-check-wrap {
@@ -161,4 +162,5 @@ a:hover {
 // Buefy notices (toast, snackbar...)
 .notices {
     z-index: 99999999999999 !important;
-}
+}
+

src/admin/theme-items-list.vue

@@ -41,8 +41,8 @@ export default {
     @import "../admin/scss/_dropdown-and-autocomplete.scss";
     @import "../admin/scss/_tooltips.scss";
     @import "../admin/scss/_tainacan-form.scss";
+    @import "../admin/scss/_filters-menu-modal.scss";
     
-
     .theme-items-list {
         position: relative;
         display: flex;
@@ -271,7 +271,7 @@ export default {
             }
         }
 
-        .filters-mobile-modal {
+        #filters-mobile-modal {
             // top: 95px;
             @keyframes slide-menu {
                 from {