From a62233fe89c3445a851e473cc26c4a155a568ca1 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 3 May 2018 23:18:33 -0300
Subject: [PATCH] Adds multiple css tweaks to get rid of Wordpress classes
 styling.

---
 src/admin/admin.vue                           |  2 +-
 .../components/search/search-control.vue      |  4 +-
 src/admin/pages/lists/items-page.vue          |  2 +-
 src/admin/scss/_variables.scss                |  2 +-
 src/admin/scss/tainacan-admin.scss            | 74 +++++++++++++++----
 5 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/src/admin/admin.vue b/src/admin/admin.vue
index 05dd690a3..48221a54f 100644
--- a/src/admin/admin.vue
+++ b/src/admin/admin.vue
@@ -102,7 +102,7 @@
         height: 21px;
         width: 23px;
         border: none;
-        background-color: $primary-light;
+        background-color: #c1dae0;
         color: $secondary;
         padding: 0px;
         border-top-right-radius: 2px;
diff --git a/src/admin/components/search/search-control.vue b/src/admin/components/search/search-control.vue
index c302abbc5..3d6d7c76f 100644
--- a/src/admin/components/search/search-control.vue
+++ b/src/admin/components/search/search-control.vue
@@ -27,7 +27,7 @@
         <div class="header-item">
             <b-dropdown>
                 <button
-                        class="button"
+                        class="button is-white"
                         slot="trigger">
                     <span>{{ $i18n.get('label_table_fields') }}</span>
                     <b-icon icon="menu-down"/>
@@ -66,7 +66,7 @@
                     </option>
                 </b-select>
                 <button
-                        class="button is-small"
+                        class="button is-white is-small"
                         @click="onChangeOrder()">
                     <b-icon :icon="order == 'ASC' ? 'sort-ascending' : 'sort-descending'"/>
                 </button>
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index c5aaa929f..2be129309 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -300,7 +300,7 @@
             this.$eventBusSearch.setCollectionId(this.collectionId);
             this.$eventBusSearch.updateStoreFromURL();
             this.$eventBusSearch.loadItems();
-        }
+        } 
     }
 </script>
 
diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss
index f62d3dfb0..c0104254f 100644
--- a/src/admin/scss/_variables.scss
+++ b/src/admin/scss/_variables.scss
@@ -65,7 +65,7 @@ $page-height: calc(100% - 53px);
 $page-side-padding: 82px;
 $page-top-padding: 27px;
 $page-small-side-padding: 22px;
-$page-small-top-padding: 22px;
+$page-small-top-padding: 25px;
 
 $page-mobile-side-padding: 1em;
 $page-mobile-top-padding: 0.5em;
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index d1fec47ef..b203251b4 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -75,7 +75,6 @@ html {
     }
 }
 
-
 .tainacan-page-title, .tainacan-modal-title {
     h1, h2 {
         font-size: 20px;
@@ -225,18 +224,39 @@ html {
 
 // Some components have a different style in listing pages
 .button {
-    border-width: 0;
     border-radius: 6px !important;
     font-weight: normal;
     padding: 2px 15px !important;
     margin-top: 0px !important;
     margin-bottom: 0px !important;
+    height: inherit !important;
+    box-shadow: none !important;
+    display: inline-flex !important;
+
+    &.is-secondary:hover, &.is-secondary:focus {
+        background: $secondary !important;
+    }
+    &.is-primary:hover, &.is-primary:focus {
+        background: $primary !important;
+    }
+    &.is-success:hover, &.is-success:focus {
+        background: $success !important;
+    }
+    &.is-white:hover, &.is-white:focus {
+        background: $white !important;
+    }
+    &:active {
+        -webkit-transform: none !important;
+        transform: none !important;
+    }
 }
 .button.is-small {
     height: 26px !important;
 }
 .button:not(.is-small):not(.is-medium):not(.is-large) {
     height: 30px !important;
+    line-height: 20px !important;
+    font-size: 14px !important;
 }
 
 .select {
@@ -245,44 +265,60 @@ html {
         border: none;
         border-radius: 6px !important;
         font-weight: normal;
+        font-size: 14px !important;
         height: 30px !important;
         padding: 2px 25px 2px 15px!important;
         margin-top: 0px !important;
         margin-bottom: 0px !important;
-        &:focus>option:checked, &:focus>option:hover {
+        option:checked, option:hover {
             background-color: $primary-lighter !important;
         }
+        &:focus, &:active {
+            box-shadow: none !important;
+            text-decoration: none !important;
+        }
     }
     &:not(.is-multiple)::after {
         content: "\F35D" !important;
         font: normal normal normal 24px/1 "Material Design Icons" !important;
         border: none !important;
-        transform: none;
-        margin-top: -0.6em;
-        right: 0.95em;
+        transform: none !important;
+        margin-top: -15px !important;
+        right: 10px !important;
         color: $primary;
+        display: flex !important;
+        align-items: initial;
     }       
 }
 .dropdown {
     .dropdown-trigger{
         .button {
             border: none;
+            .icon {
+                color: $primary;
+                align-items: start;
+            }
         }
-        .icon {
-            color: $primary;
+        .button.is-primary, .button.is-secondary, .button.is-success {
+            .icon {
+                color: $white;
+            }
         }
     }
     .dropdown-menu {
         top: 26px;
-        .dropdown-item {
-            .b-checkbox { width: 100% };
-            &:hover {
-                background-color: $primary-lighter;
+        .dropdown-content {
+            border-radius: 0px;
+            .dropdown-item {
+                .b-checkbox { width: 100% };
+                &:hover {
+                    background-color: $primary-lighter;
+                }
+                .is-small {
+                    color: gray;
+                }
             }
-            .is-small {
-                color: gray;
-            }
-        }
+        } 
     }
 }
 .switch {
@@ -389,6 +425,12 @@ html {
 
     .pagination { 
         flex-grow: 1; 
+
+        .pagination-link, .pagination-previous, .pagination-next {
+            background-color: transparent;
+            color: $secondary;
+            border: none;
+        }
     }
 }