fix: correct the style of input and select (#578)

DTStack · Dec 29, 2021 · e0ba0fc · e0ba0fc
1 parent d80f587
commit e0ba0fc
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 21 deletions.
diff --git a/src/components/input/style.scss b/src/components/input/style.scss
@@ -3,6 +3,7 @@
 #{$input} {
     background-color: var(--input-background);
     border: 1px solid transparent;
+    border-color: var(--input-border);
     color: var(--input-foreground);
     display: inline-block;
     font-size: 13px;
@@ -33,4 +34,16 @@
             text-align: right;
         }
     }
+
+    &::placeholder {
+        color: var(--input-placeholderForeground);
+    }
+
+    &:focus,
+    &:active {
+        border-color: var(--focusBorder);
+        outline-color: var(--focusBorder);
+        outline-offset: -1;
+        outline-style: solid;
+    }
 }
diff --git a/src/components/select/style.scss b/src/components/select/style.scss
@@ -18,9 +18,9 @@
 
     &__input {
         appearance: none;
-        background: inherit;
+        background: var(--input-background);
         border: 0;
-        color: inherit;
+        color: var(--input-foreground);
         cursor: default;
         font: inherit;
         font-size: inherit;
@@ -33,6 +33,18 @@
         &:focus {
             outline: none;
         }
+
+        &::placeholder {
+            color: var(--input-placeholderForeground);
+        }
+
+        &:focus,
+        &:active {
+            border-color: var(--focusBorder);
+            outline-color: var(--focusBorder);
+            outline-offset: -1;
+            outline-style: solid;
+        }
     }
 
     &__arrow {

diff --git a/src/workbench/sidebar/explore/style.scss b/src/workbench/sidebar/explore/style.scss
@@ -28,7 +28,9 @@
         background: rgba(0, 0, 0, 0.3);
 
         #{$folderTree}--input {
+            background: var(--input-background);
             border: 1px solid var(--list-focusOutline);
+            color: var(--input-foreground);
             font-family: inherit;
             font-size: 13px;
             height: 20px;
@@ -48,6 +50,10 @@
             &::selection {
                 background: rgb(90, 126, 167);
             }
+
+            &::placeholder {
+                color: var(--input-placeholderForeground);
+            }
         }
     }
 }

diff --git a/src/workbench/style.scss b/src/workbench/style.scss
@@ -8,25 +8,6 @@
         background-color: var(--editor-selectionBackground);
     }
 
-    input,
-    select {
-        background: var(--input-background);
-        border-color: var(--input-border);
-        color: var(--input-foreground);
-
-        &::placeholder {
-            color: var(--input-placeholderForeground);
-        }
-    }
-
-    input:focus,
-    input:active {
-        border-color: var(--focusBorder);
-        outline-color: var(--focusBorder);
-        outline-offset: -1;
-        outline-style: solid;
-    }
-
     code {
         background: var(--textCodeBlock-background);
     }