From 3f323aacc1a615ca8e6ca0e5c55d919315692a59 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Wed, 9 May 2018 08:31:00 -0300
Subject: [PATCH 1/2] Small css adjustments to switch. Ref. #30.

---
 src/admin/scss/tainacan-admin.scss | 37 ++++++++++++------------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index 698d5fb44..6e17295df 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -198,16 +198,9 @@ html {
         font-size: 12px;
     }
     .select {
-        padding-top: 0px !important;
+        
         select {
             font-size: 14px;
-            border: none;
-            border-radius: 1px !important;
-            font-weight: normal;
-            height: 30px !important;
-            padding: 2px 25px 2px 15px!important;
-            margin-top: 0px !important;
-            margin-bottom: 0px !important;
             color: $tainacan-input-color;
             background-color: white !important;
             border: 1px solid $tainacan-input-background;
@@ -219,10 +212,6 @@ html {
             background-color: $tainacan-input-background !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;
             color: $primary;
@@ -395,11 +384,13 @@ html {
 }
 .switch {
     input[type="checkbox"] + .check {
-        background-color: transparent;
-        border: 1.6px solid $gray;
+        background-color: $gray-light;
+        border: 2px solid $gray-light;
+        width: 2.7em;
+        height: 1.7em;
 
         &::before {
-            background-color: $gray;
+            background-color: white;
             box-shadow: none;
         }
     } 
@@ -408,16 +399,16 @@ html {
     }
 
     input[type="checkbox"]:checked + .check {
-        border: 1.6px solid $secondary;
+        border: 2px solid $secondary;
         background-color: transparent;
 
         &::before {
             background-color: $secondary;
-            transform: translate3d(83%, 0, 0);
+            transform: translate3d(78%, 0, 0);
         }
     }
     &:hover input[type="checkbox"] + .check {
-        background-color: $tainacan-input-background;
+        background-color: $gray-light;
     }
 
     &:focus input[type="checkbox"] + .check,
@@ -429,18 +420,20 @@ html {
         font-size: 9px;
 
         input[type="checkbox"] + .check {
-            border: 1.5px solid $gray;
+            border: 1.5px solid $gray-light;
+            width: 2.55em;
+            height: 1.7em;
 
             &::before {
-                width: 1.05em;
-                height: 1.05em;
+                width: 1.0em;
+                height: 1.0em;
             }
         }
         input[type="checkbox"]:checked + .check {
             border: 1.5px solid $secondary;
 
             &::before {
-                transform: translate3d(93%, 0, 0);
+                transform: translate3d(84%, 0, 0);
             }
         }
     }

From 42ccbba5e64b3e15e10bc3ef99ae15a92a3864c0 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Wed, 9 May 2018 10:19:58 -0300
Subject: [PATCH 2/2] Several css adjustments. Almost concluding Ref. #30.

---
 .../components/lists/collections-list.vue     |   1 -
 src/admin/components/lists/fields-list.vue    |   1 +
 src/admin/components/lists/filters-list.vue   |   1 +
 src/admin/components/lists/items-list.vue     |   1 -
 .../components/navigation/tainacan-title.vue  |   2 +-
 src/admin/scss/_variables.scss                |   3 +
 src/admin/scss/tainacan-admin.scss            | 123 +++++++++++++-----
 .../field-types/selectbox/Selectbox.vue       |   1 +
 .../filter-types/selectbox/Selectbox.vue      |   3 +-
 9 files changed, 99 insertions(+), 37 deletions(-)

diff --git a/src/admin/components/lists/collections-list.vue b/src/admin/components/lists/collections-list.vue
index 76d8b40dd..fa7f0c61a 100644
--- a/src/admin/components/lists/collections-list.vue
+++ b/src/admin/components/lists/collections-list.vue
@@ -19,7 +19,6 @@
                 checkable
                 :loading="isLoading"
                 hoverable 
-                striped
                 selectable
                 backend-sorting>
             <template slot-scope="props">
diff --git a/src/admin/components/lists/fields-list.vue b/src/admin/components/lists/fields-list.vue
index c39eaf67f..a4dfc9ffd 100644
--- a/src/admin/components/lists/fields-list.vue
+++ b/src/admin/components/lists/fields-list.vue
@@ -457,6 +457,7 @@ export default {
 
             .switch.is-small {
                 input[type="checkbox"] + .check {
+                    background-color: $secondary !important;
                     border: 1.5px solid white !important;
                     &::before { background-color: white !important; }
                 } 
diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue
index 7478d7c6c..3149ff3f2 100644
--- a/src/admin/components/lists/filters-list.vue
+++ b/src/admin/components/lists/filters-list.vue
@@ -588,6 +588,7 @@ export default {
 
             .switch.is-small {
                 input[type="checkbox"] + .check {
+                    background-color: $secondary !important;
                     border: 1.5px solid white !important;
                     &::before { background-color: white !important; }
                 } 
diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index 64ea710e9..81e858b0f 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -18,7 +18,6 @@
                 :checkable="!isOnTheme"
                 :loading="isLoading"
                 hoverable
-                striped
                 :selectable="!isOnTheme"
                 backend-sorting>
             <template slot-scope="props">
diff --git a/src/admin/components/navigation/tainacan-title.vue b/src/admin/components/navigation/tainacan-title.vue
index 084b3cccf..678e4f570 100644
--- a/src/admin/components/navigation/tainacan-title.vue
+++ b/src/admin/components/navigation/tainacan-title.vue
@@ -136,7 +136,7 @@ export default {
     #title-row {
 
         .breadcrumbs {
-            font-size: 0.85em;
+            font-size: 12px;
         }
 
         .level-left {
diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss
index 5c8ea3940..78220b4f2 100644
--- a/src/admin/scss/_variables.scss
+++ b/src/admin/scss/_variables.scss
@@ -29,6 +29,9 @@ $gray-invert: findColorInvert($gray);
 $gray-light: #898d8f; 
 $gray-light-invert: findColorInvert($gray-light);
 
+$danger: #a23939; 
+$danger-invert: findColorInvert($danger);
+
 @import "../../../node_modules/bulma/sass/utilities/derived-variables.sass";
 
 // Setup $colors to use as bulma classes
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index 6e17295df..807f00a12 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -31,8 +31,9 @@ html {
     font-family: $family-sans-serif;
 }
 
-.modal-background {
-    background-color: rgba(0, 0, 0, 0.70);
+// Link (hover is the same color as secondary
+a:hover {
+    color: $secondary;
 }
 
 /* Rules for sizing the icon. */
@@ -79,6 +80,8 @@ html {
     }
 }
 
+
+// Modal
 .tainacan-page-title, .tainacan-modal-title {
     h1, h2 {
         font-size: 20px;
@@ -107,6 +110,11 @@ html {
     }
 }
 
+.modal-background {
+    background-color: rgba(0, 0, 0, 0.70);
+}
+
+
 // Custom ScrollBar (will work only in Chrome, Opera, Safari, webkit browsers)
 /* width */
 ::-webkit-scrollbar {
@@ -143,9 +151,6 @@ html {
             border-width: 1px;
             padding: 2px 30px !important;
         }
-        .button.is-outlined {
-            color: #150e38;
-        }
         &.has-only-save {
             justify-content: end !important;
         }
@@ -180,17 +185,28 @@ html {
             border: 1px solid $tainacan-input-background;
         }
     }
-    .control.has-content {
-        .input, .textarea {
-            background-color: white;
-            border: 1px solid $tainacan-input-background;
+    .control{
+        &.has-content {
+            .input, .textarea {
+                background-color: white;
+                border: 1px solid $tainacan-input-background;
+            }
+        }
+        &.has-icons-right {
+            .icon {
+                height: 2.0em;
+                .mdi-alert-circle::before {
+                    content: "\F156" !important;
+                    font-size: 16px !important;
+                }
+            }
         }
     }
-    .radio {
-        margin-bottom: 0.2em;   
-    }
-    .checkbox {
-        margin-bottom: 0.2em;       
+    .radio, .checkbox {
+        margin-bottom: 0.2em;
+        &.is-danger {
+            border-color: $danger;
+        }   
     }
     .control-label { // The value part in checkbox, radio and switches
         color: $tainacan-input-color;
@@ -239,13 +255,18 @@ html {
     &.is-success:hover, &.is-success:focus {
         background: $success !important;
     }
-    &.is-white:hover, &.is-white:focus {
+    &.is-white:hover, &.is-white:focus, &.is-outlined:hover, &.is-outlined:focus {
         background: $white !important;
     }
     &:active {
         -webkit-transform: none !important;
         transform: none !important;
     }
+    &.is-outlined {
+        color: #150e38 !important;
+        background-color: white;
+        border-color: $gray-light !important;
+    }
 }
 .button.is-small {
     height: 26px !important;
@@ -261,13 +282,14 @@ html {
     padding-top: 0px !important;
     select {
         border: none;
-        border-radius: 6px !important;
+        border-radius: 1px !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;
+        color: $tainacan-input-color;
         option:checked, option:hover {
             background-color: $primary-lighter !important;
         }
@@ -293,7 +315,7 @@ html {
         .button {
             border: none;
             .icon {
-                color: $primary;
+                color: $secondary;
                 align-items: start;
             }
         }
@@ -493,20 +515,23 @@ html {
 }
 
 // Tables
-.table {
-    tbody {
-        td { border-bottom: 0px solid $gray-light !important; }
-    }
-    .b-checkbox.checkbox input[type="checkbox"] + .check {
-        width: 0.85em !important;
-        height: 0.85em !important;
-        border-radius: 2px !important;
-        border: 1px solid #7a7a7a !important;
-    }
-    .th-wrap {
-        font-size: 0.85em !important;
-        font-weight: normal !important;
+.table-wrapper {
+    .table {
+        tbody {
+            td { border-bottom: 0px solid $gray-light !important; }
+        }
+        .b-checkbox.checkbox input[type="checkbox"] + .check {
+            width: 0.85em !important;
+            height: 0.85em !important;
+            border-radius: 2px !important;
+            border: 1px solid #7a7a7a !important;
+        }
+        .th-wrap {
+            font-size: 12px !important;
+            font-weight: normal !important;
+        }
     }
+    margin-bottom: 0px !important;
 }
 .pagination-area {
     display: flex;
@@ -514,8 +539,8 @@ html {
     align-items: center;
     font-size: 0.85em !important;
     font-weight: normal !important;
-    border-top: 1px solid $gray-light;
-    padding: 0.85em 1.0em;
+    border-top: 1px solid $gray;
+    padding: 0em 1.0em;
     color: $gray-light;
 
     .shown-items { 
@@ -541,12 +566,44 @@ html {
 
     .pagination { 
         flex-grow: 1; 
-
+        a[disabled="disabled"] {
+            color: $gray-light;
+        }
         .pagination-link, .pagination-previous, .pagination-next {
             background-color: transparent;
             color: $secondary;
             border: none;
         }
+        .pagination-link.is-current {
+            color: $gray-light;
+        }
+        .pagination-link::after:not(:last-child) {
+            content: ',';
+            color: $gray-light;
+        }
+        .mdi-chevron-left::before {
+            content: "\F4AE";
+            font-size: 20px;
+        }
+        .mdi-chevron-right::before {
+            content: "\F4AD";
+            font-size: 20px;
+        }
+    }
+}
+
+// Tabs 
+.tabs {
+    a {
+        font-size: 13px;
+        margin-bottom: -3px;
+        &:hover{
+            border-bottom-color: transparent;
+        }
+    }
+    li.is-active a {
+        border-bottom: 5px solid $primary;
+        color: $primary; 
     }
 }
 
diff --git a/src/classes/field-types/selectbox/Selectbox.vue b/src/classes/field-types/selectbox/Selectbox.vue
index f58eaae72..c4699eae0 100644
--- a/src/classes/field-types/selectbox/Selectbox.vue
+++ b/src/classes/field-types/selectbox/Selectbox.vue
@@ -4,6 +4,7 @@
             :id = "id"
             :placeholder="$i18n.get('label_selectbox_init')"
             v-model="selected" 
+            :class="{'is-empty': selected == undefined || selected == ''}"
             @input="onChecked()">
             <option
                     v-for="(option, index) in getOptions"
diff --git a/src/classes/filter-types/selectbox/Selectbox.vue b/src/classes/filter-types/selectbox/Selectbox.vue
index 81f0ac4dc..1d45064e5 100644
--- a/src/classes/filter-types/selectbox/Selectbox.vue
+++ b/src/classes/filter-types/selectbox/Selectbox.vue
@@ -5,7 +5,8 @@
                 :loading = "isLoading"
                 v-model = "selected"
                 @input = "onSelect($event)"
-                expanded>
+                expanded
+                :class="{'is-empty': selected == undefined || selected == ''}">
             <option value="">{{ $i18n.get('label_selectbox_init') }}...</option>
             <option
                     v-for="(option, index) in options"