style: add dropdown for navbar

edit stylelint config; change layout
GreptimeTeam · Dec 21, 2022 · 14406fe · 14406fe
1 parent 1356098
commit 14406fe
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 90 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -29,5 +29,7 @@ module.exports = {
         ignorePseudoClasses: ['deep'],
       },
     ],
+    'color-function-notation': 'legacy',
+    'alpha-value-notation': 'number',
   },
 }
diff --git a/src/assets/images/dropdown.svg b/src/assets/images/dropdown.svg
diff --git a/src/assets/style/dataView.less b/src/assets/style/dataView.less
@@ -1,114 +1,133 @@
 .arco-tabs-nav-type-rounded {
   .arco-tabs-tab {
-    background-color: var(--card-bg-color);
-    border-radius: 6px;
     height: 32px;
     margin: 0 8px 0 0;
-    padding: 0 15px 0 15px;
-    font-size: 12px;
-    font-weight: 600;
+    padding: 0 15px;
     color: var(--main-font-color);
+    font-weight: 600;
+    font-size: 12px;
+    background-color: var(--card-bg-color);
+    border-radius: 6px;
     opacity: 0.6;
   }
+
   .arco-tabs-tab-active {
     color: var(--brand-color);
     opacity: 1;
   }
 }
+
 .arco-tabs-content {
   padding-top: 14px;
 }
 
 .arco-table {
   .arco-table-tr {
-    box-shadow: 0px 1px 1px 0px rgba(23, 12, 44, 0.1);
     height: 38px;
+    box-shadow: 0 1px 1px 0 rgba(23, 12, 44, 0.1);
   }
+
   .arco-table-cell {
     padding: 13px 15px;
   }
+
   .arco-table-th {
-    font-size: 12px;
-    font-weight: 600;
     color: var(--main-font-color);
+    font-weight: 600;
+    font-size: 12px;
     background: var(--th-bg-color);
   }
+
   .arco-table-td {
     font-size: 12px;
   }
+
   .arco-table-td-content {
     color: var(--main-font-color);
     font-weight: 400;
     opacity: 0.8;
   }
 }
+
 .arco-table-hover:not(.arco-table-dragging)
-  .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover
-  .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) {
+  .arco-table-tr:not(.arco-table-tr-empty, .arco-table-tr-summary):hover
+  .arco-table-td:not(.arco-table-col-fixed-left, .arco-table-col-fixed-right) {
   background-color: var(--bg-brand-color);
 }
 
 .arco-table-pagination {
   margin: 20px 15px 17px 0;
+
   .arco-pagination-item {
-    font-size: 12px;
-    height: 20px;
     min-width: 20px;
-    line-height: 20px;
+    height: 20px;
     padding: 0;
+    font-size: 12px;
+    line-height: 20px;
     opacity: 0.4;
   }
+
   .arco-pagination-item-active,
   .arco-pagination-item-active:hover {
-    background: var(--bg-brand-color);
-    border-radius: 2px;
-    font-weight: 400;
+    margin-right: 4px !important;
     color: var(--main-font-color);
+    font-weight: 400;
     line-height: 20px;
-    margin-right: 4px !important;
+    background: var(--bg-brand-color);
+    border-radius: 2px;
     opacity: 1;
   }
+
   .arco-pagination-item:not(:last-child) {
     margin-right: 4px;
   }
+
   .arco-pagination-options {
     .arco-select-view-single {
       height: 20px;
-      padding-left: 8px;
       padding-right: 8px;
+      padding-left: 8px;
     }
+
     .arco-select-view-single.arco-select-view-size-medium .arco-select-view-value {
+      min-height: 12px;
       padding-top: 0;
       padding-bottom: 0;
       font-size: 12px;
       line-height: 12px;
-      min-height: 12px;
       opacity: 0.4;
     }
+
     .arco-select-view-value {
       padding-right: 2px;
     }
+
     .arco-select-view-suffix {
-      padding-left: 0px;
+      padding-left: 0;
     }
+
     .arco-select-view-icon svg {
+      color: var(--main-font-color);
       font-size: 10px;
       opacity: 0.4;
-      color: var(--main-font-color);
     }
   }
 }
+
 .arco-pagination {
   font-size: 12px !important;
 }
+
 .select-y {
   margin-right: 8px !important;
 }
+
 .draw-button {
   width: 61px;
   height: 32px !important;
   border-radius: 2px !important;
 }
+
 .chart-area {
   margin-top: 10px;
 }
diff --git a/src/assets/style/global.less b/src/assets/style/global.less
@@ -7,12 +7,13 @@
 * {
   box-sizing: border-box;
 }
+
 :root {
   --main-bg-color: #f9f8fd;
   --navbar-bg-color: linear-gradient(270deg, #1d0e38 0%, #2a115a 100%);
   --brand-color: #8322ff;
   --bg-brand-color: rgba(131, 34, 255, 0.05);
-  --card-bg-color: #ffffff;
+  --card-bg-color: rgba(255, 255, 255, 1);
   --main-font-color: rgba(23, 12, 44, 1);
   --small-font-color: rgba(23, 12, 44, 0.8);
   --option-font-color: #1d2129;
@@ -23,17 +24,28 @@
   --danger-bg-color: rgba(239, 60, 104, 0.1);
   --danger-font-color: rgba(239, 60, 104, 1);
 }
+
 html,
 body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   font-size: 14px;
+  font-family: Roboto !important;
   background-color: var(--main-bg-color);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  font-family: Roboto !important;
+}
+
+.navbar-svg:hover {
+  opacity: 0.4;
+}
+
+.arco-dropdown {
+  padding: 0;
+  border-radius: 2px;
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
 }
 
 .pointer {
@@ -45,23 +57,27 @@ body {
 }
 
 .arco-card {
-  border-radius: 6px;
   background: var(--card-bg-color);
+  border-radius: 6px;
+
   .arco-card-body {
     padding: 0;
   }
+
   .arco-card-header {
     height: 58px;
     padding: 10px 15px;
     border-bottom: 0;
   }
+
   .arco-card-header-title {
-    font-size: 14px;
     display: flex;
     align-items: center;
     color: var(--main-font-color);
     font-weight: 600;
+    font-size: 14px;
   }
+
   .arco-card-header-extra {
     display: flex;
   }
@@ -71,11 +87,13 @@ body {
   width: 14px;
   height: 14px;
 }
+
 .card-icon {
   width: 12px;
   height: 12px;
   margin-right: 3px;
 }
+
 .arco-checkbox-checked .arco-checkbox-icon {
   background-color: var(--brand-color);
 }
@@ -88,55 +106,66 @@ body {
     line-height: 32px;
     text-align: left;
   }
+
   .arco-select-option-active {
     background-color: var(--bg-brand-color);
   }
+
   .arco-select-option:not(.arco-select-dropdown .arco-select-option-disabled):hover {
     background-color: var(--bg-brand-color);
   }
 }
 
 .form {
-  margin-left: 15px;
   align-items: center;
+  margin-left: 15px;
 }
+
 .arco-form-layout-inline .arco-form-item {
-  margin-bottom: 0;
   margin-right: 24px;
+  margin-bottom: 0;
 }
+
 .arco-form-item-label-col > .arco-form-item-label {
-  font-size: 12px;
-  font-weight: 400;
   color: var(--main-font-color);
+  font-weight: 400;
+  font-size: 12px;
   opacity: 0.6;
 }
+
 .arco-form-item-content {
   height: 32px;
 }
+
 .arco-select-view-single {
   width: 180px !important;
-  background: var(--th-bg-color);
-  border-radius: 2px;
   padding-right: 8px;
   padding-left: 8px;
+  background: var(--th-bg-color);
+  border-radius: 2px;
+
   .arco-select-view-value {
     font-size: 11px !important;
   }
 }
+
 .arco-select-view-single:hover {
   background-color: var(--th-bg-color);
 }
+
 .arco-select-view-multiple {
-  background: var(--th-bg-color);
-  border-radius: 2px;
+  width: 260px !important;
   padding-right: 8px;
   padding-left: 8px;
-  width: 260px !important;
+  background: var(--th-bg-color);
+  border-radius: 2px;
 }
+
 .arco-select-view-size-medium {
-  font-size: 11px !important;
   color: var(--small-font-color) !important;
+  font-size: 11px !important;
 }
+
 .arco-select-view-multiple:hover {
   background-color: var(--th-bg-color);
 }
@@ -151,8 +180,8 @@ body {
 }
 
 @font-face {
-  font-family: 'Roboto';
-  src: local('Roboto'), url(../fonts/Roboto-Regular.ttf);
   font-weight: normal;
+  font-family: Roboto;
   font-style: normal;
+  src: local('Roboto'), url('../fonts/Roboto-Regular.ttf');
 }