feat(style): add scss variables (#291)

src/views/dashboard/graphs/Card.vue

@@ -73,7 +73,7 @@ limitations under the License. -->
     color: #666;
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .unit {

src/views/dashboard/graphs/EndpointList.vue

@@ -241,4 +241,8 @@ limitations under the License. -->
   .tips {
     color: rgb(255 0 0 / 50%);
   }
+
+  .link {
+    color: $active-color;
+  }
 </style>

src/views/dashboard/graphs/ServiceList.vue

@@ -335,4 +335,8 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   @import url("./style.scss");
+
+  .link {
+    color: $active-color;
+  }
 </style>

src/views/dashboard/graphs/Table.vue

@@ -76,14 +76,14 @@ limitations under the License. -->
     }
 
     .row {
-      border-left: 1px solid #ccc;
+      border-left: 1px solid $disabled-color;
       height: 20px;
       width: 100%;
 
       div {
         overflow: hidden;
         text-overflow: ellipsis;
-        border-right: 1px solid #ccc;
+        border-right: 1px solid $disabled-color;
         text-align: center;
         height: 20px;
         line-height: 20px;
@@ -91,11 +91,11 @@ limitations under the License. -->
       }
 
       div:last-child {
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid $disabled-color;
       }
 
       div:nth-last-child(2) {
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid $disabled-color;
       }
     }
 
@@ -105,7 +105,7 @@ limitations under the License. -->
 
     .row:first-child {
       div {
-        border-top: 1px solid #ccc;
+        border-top: 1px solid $disabled-color;
         background: #eee;
       }
     }

src/views/dashboard/graphs/TopList.vue

@@ -140,7 +140,7 @@ limitations under the License. -->
   }
 
   .progress-bar {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     color: #333;
   }
 
@@ -159,7 +159,7 @@ limitations under the License. -->
   }
 
   .calls {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     padding: 0 5px;
     display: inline-block;
     background-color: #40454e;
@@ -172,7 +172,7 @@ limitations under the License. -->
     border-radius: 4px;
     border: 1px solid #ddd;
     color: #333;
-    background-color: #fff;
+    background-color: $theme-background;
     will-change: opacity, background-color;
     transition: opacity 0.3s, background-color 0.3s;
   }
@@ -197,10 +197,10 @@ limitations under the License. -->
     cursor: pointer;
     position: relative;
     text-align: center;
-    font-size: 12px;
+    font-size: $font-size-smaller;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }

src/views/dashboard/graphs/components/ColumnGraph.vue

@@ -42,7 +42,7 @@ limitations under the License. -->
           <el-popover placement="left" :width="400" trigger="click">
             <template #reference>
               <span class="trend">
-                <Icon iconName="timeline" size="middle" style="color: #409eff" />
+                <Icon iconName="timeline" size="middle" />
               </span>
             </template>
             <div class="view-line">
@@ -159,6 +159,7 @@ limitations under the License. -->
     display: inline-block;
     height: 100%;
     cursor: pointer;
+    color: $active-color;
   }
 
   .value {

src/views/dashboard/graphs/components/Legend.vue

@@ -118,7 +118,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   table {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     white-space: nowrap;
     margin: 0;
     border: none;
@@ -136,7 +136,7 @@ limitations under the License. -->
     top: 0;
     z-index: 1;
     width: 25vw;
-    background: #fff;
+    background: $theme-background;
     text-align: left;
   }
 
@@ -158,7 +158,7 @@ limitations under the License. -->
     font-weight: bold;
     font-style: normal;
     text-align: left;
-    background: #fff;
+    background-color: $theme-background;
     position: sticky;
     left: 0;
     z-index: 1;

src/views/dashboard/graphs/style.scss

@@ -35,7 +35,6 @@
 
 .link {
   cursor: pointer;
-  color: #409eff;
   display: inline-block;
   width: 100%;
   text-decoration: underline;