changes

app/components/datatable/ContextMenu.vue

@@ -40,13 +40,13 @@
     </p> -->
     <p class="control">
       <button
-        class="button is-light is-primary"
+        class="button"
         @click="moveLeft()"
       >
         <span class="icon">
           <Icon
             name="material-symbols:arrow-back-rounded"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -58,13 +58,13 @@
     </p>
     <p class="control">
       <button
-        class="button is-light is-primary"
+        class="button"
         @click="moveRight()"
       >
         <span class="icon">
           <Icon
             name="material-symbols:arrow-forward-rounded"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -76,13 +76,13 @@
     </p>
     <p class="control">
       <button
-        class="button is-light is-primary"
+        class="button"
         @click="resizeWidth()"
       >
         <span class="icon">
           <Icon
             name="fluent:arrow-fit-16-regular"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -94,13 +94,13 @@
     </p>
     <p class="control">
       <button
-        class="button is-light is-primary"
+        class="button"
         @click="resizeWidth(true)"
       >
         <span class="icon">
           <Icon
             name="fluent:arrow-fit-in-16-regular"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -112,13 +112,13 @@
     </p>
     <p class="control">
       <button
-        class="button is-light is-primary"
+        class="button"
         @click="hideField()"
       >
         <span class="icon">
           <Icon
             name="material-symbols:visibility-off-outline-rounded"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -130,13 +130,13 @@
     </p>
     <p class="control">
       <button
-        class="button is-light is-primary"
+        class="button"
         @click="!currentField.mandatory && doRemove()"
       >
         <span class="icon">
           <Icon
             name="material-symbols:delete-outline-rounded"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -148,14 +148,14 @@
     </p>
     <p class="control">
       <button
-        class="button is-light is-primary"
+        class="button"
         :class="currentField.format !== 'number' && 'has-text-grey-light'"
         @click="currentField.format === 'number' && $emit('modalevent', { name: 'copyfield', data: currentField })"
       >
         <span class="icon">
           <Icon
             name="material-symbols:content-copy-outline-rounded"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -167,13 +167,13 @@
     </p>
     <p class="control">
       <button
-        class="button is-light is-primary"
+        class="button"
         @click="fieldList()"
       >
         <span class="icon">
           <Icon
             name="material-symbols:view-column-outline-rounded"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -185,13 +185,13 @@
     </p>
     <p class="control">
       <button
-        class="button is-light is-primary"
+        class="button"
         @click="createField()"
       >
         <span class="icon">
           <Icon
             name="material-symbols:add-rounded"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -203,13 +203,13 @@
     </p>
     <p class="control">
       <button
-        class="button is-light is-primary"
+        class="button"
         @click="tableOption()"
       >
         <span class="icon">
           <Icon
             name="material-symbols:table-edit-outline"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -227,7 +227,7 @@
         <span class="icon">
           <Icon
             name="material-symbols:save-rounded"
-            :size="22"
+            :size="20"
           />
         </span>
       </button>
@@ -238,7 +238,7 @@
       >
     </p>
   </div>
-  <div class="tabs is-toggle is-centered">
+  <div class="tabs is-centered">
     <ul>
       <li
         v-for="(v, i) in getMenu().filter((x) =>
@@ -252,7 +252,7 @@
         :class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
         @click="changeTab(v)"
       >
-        <a class="px-12 py-1.5 fs-14">{{ v.name }}</a>
+        <a class="px-16 py-1.5 fs-14">{{ v.name }}</a>
       </li>
     </ul>
   </div>
@@ -653,14 +653,12 @@ p.control {
   }
 }
 
-.tabs {
-  --bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
-  --bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
-  --bulma-tabs-toggle-link-active-color: var(--bulma-link-25);
-}
-
 .button.is-primary.is-outlined:hover {
-  --bulma-button-border-width: max(1px, 0.0625em); /* same as not-hovered */
+  /* TODO: make it global: when outlined, 
+  border width shouldn't change, background-color should change */
+
+  --bulma-button-border-width: max(1px, 0.0625em);
+  /* same as not-hovered */
   background-color: var(--bulma-primary-95);
 }
 </style>