style: select and button

GreptimeTeam · Nov 15, 2023 · fdb2626 · fdb2626
1 parent 73a55db
commit fdb2626
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 62 deletions.
diff --git a/src/assets/style/button.less b/src/assets/style/button.less
@@ -2,7 +2,7 @@
   padding: 7px 14px;
   font-size: 14px;
   line-height: 16px;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 
 .arco-btn-primary[type='button'] {

diff --git a/src/assets/style/form.less b/src/assets/style/form.less
@@ -48,7 +48,6 @@
     height: 100%;
     background-color: transparent;
     border: 1px solid var(--border-color);
-    border-radius: 6px;
   }
 
   .arco-input-wrapper:hover {

diff --git a/src/assets/style/global.less b/src/assets/style/global.less
@@ -118,27 +118,11 @@ body {
 }
 
 .menu-dropdown {
-  .arco-dropdown {
-    padding: 4px 0;
-    border: 0;
-    border-radius: 4px;
-    box-shadow: 0 2px 10px 0 var(--box-shadow-color);
-
-    .arco-dropdown-option {
-      padding: 0;
-    }
-
-    .arco-dropdown-option:not(.arco-dropdown-option-disabled):hover {
-      background-color: transparent;
-    }
-
-    .arco-dropdown-option-content {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      border-radius: 0;
-    }
+  .arco-dropdown-option {
+    padding: 0;
+  }
 
+  .arco-dropdown {
     .arco-link {
       justify-content: flex-start;
       width: 100%;
@@ -152,27 +136,6 @@ body {
       color: var(--small-font-color);
       background-color: var(--main-bg-color);
     }
-
-    .arco-btn-text[type='button'] {
-      justify-content: start;
-      width: 100%;
-      color: var(--small-font-color);
-      font-size: 13px;
-    }
-
-    .arco-btn-text[type='button']:hover {
-      background-color: var(--grey-bg-color);
-    }
-  }
-
-  &.quick-select {
-    .arco-dropdown .arco-btn-text[type='button'] {
-      border-radius: 0;
-
-      &:hover {
-        background-color: var(--main-bg-color);
-      }
-    }
   }
 }
 
@@ -251,9 +214,9 @@ body {
 }
 
 .arco-select-dropdown {
-  padding: 0;
+  padding: 4px 0;
   border: 0;
-  border-radius: 6px;
+  border-radius: 4px;
   box-shadow: 0 2px 10px 0 var(--box-shadow-color);
 
   .arco-select-option {
@@ -262,7 +225,7 @@ body {
     font-size: 13px;
     line-height: 32px;
     text-align: left;
-    border-radius: 6px;
+    border-radius: 0;
 
     .arco-checkbox-icon {
       width: 12px;
@@ -309,7 +272,7 @@ body {
 
 .arco-input-wrapper {
   background: var(--grey-bg-color);
-  border-radius: 6px;
+  border-radius: 4px;
 
   .arco-input[disabled] {
     -webkit-text-fill-color: var(--hover-font-color);

diff --git a/src/assets/style/select.less b/src/assets/style/select.less
@@ -2,7 +2,7 @@
   padding-right: 8px;
   padding-left: 8px;
   background: var(--grey-bg-color);
-  border-radius: 6px;
+  border-radius: 4px;
 }
 
 .arco-select-view-single:hover {
@@ -20,7 +20,7 @@
   padding-left: 8px;
   background: var(--grey-bg-color);
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: 4px;
 
   .arco-select-view-inner .arco-select-view-tag {
     background: var(--grey-bg-color);
@@ -50,10 +50,22 @@
     background: var(--warning-bg-color);
     border: 1px solid var(--warning-color);
   }
-  .arco-select-dropdown {
-    .arco-select-option-active,
-    .arco-select-option:not(.arco-select-dropdown .arco-select-option-disabled):hover {
-      background-color: var(--grey-bg-color);
-    }
-  }
+}
+
+.arco-dropdown {
+  padding: 4px 0;
+  border: 0;
+  border-radius: 4px;
+  box-shadow: 0 2px 10px 0 var(--box-shadow-color);
+}
+
+.arco-dropdown-option:not(.arco-dropdown-option-disabled):hover {
+  background-color: transparent;
+}
+
+.arco-dropdown-option-content {
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  border-radius: 0;
 }
diff --git a/src/views/dashboard/modules/table-manager.vue b/src/views/dashboard/modules/table-manager.vue
@@ -46,11 +46,7 @@ a-card.table-manager(:bordered="false")
                   :class="nodeData.childrenType === 'details' && expandedKeys?.includes(nodeData.key) ? '' : 'icon-color'"
                 )
                   use(href="#details")
-            a-dropdown.menu-dropdown.quick-select(
-              trigger="click"
-              position="right"
-              @click="(event) => clickMenu(event, nodeData)"
-            )
+            a-dropdown.quick-select(trigger="click" position="right" @click="(event) => clickMenu(event, nodeData)")
               a-button(type="text")
                 template(#icon)
                   svg.icon-20.icon-color
@@ -76,7 +72,7 @@ a-card.table-manager(:bordered="false")
           .tree-data
             transition(name="slide-fade")
               .data-type {{ nodeData.dataType }}
-            a-dropdown.menu-dropdown.quick-select(v-if="nodeData.dataType" trigger="click" position="right")
+            a-dropdown.quick-select(v-if="nodeData.dataType" trigger="click" position="right")
               a-button(type="text")
                 template(#icon)
                   svg.icon-20.icon-color
@@ -554,4 +550,28 @@ a-card.table-manager(:bordered="false")
   }
 </style>
 
-<style lang="less"></style>
+<style lang="less">
+  .quick-select {
+    .arco-dropdown-option {
+      padding: 0;
+    }
+    .arco-dropdown .arco-btn-text[type='button'] {
+      border-radius: 0;
+
+      &:hover {
+        background-color: var(--main-bg-color);
+      }
+    }
+
+    .arco-btn-text[type='button'] {
+      justify-content: start;
+      width: 100%;
+      color: var(--small-font-color);
+      font-size: 13px;
+    }
+
+    .arco-btn-text[type='button']:hover {
+      background-color: var(--grey-bg-color);
+    }
+  }
+</style>