style(key-value-editor):modify el-input styles

emqx · Jul 29, 2023 · 79f3a42 · 79f3a42
1 parent c847591
commit 79f3a42
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/src/components/KeyValueEditor.vue b/src/components/KeyValueEditor.vue
@@ -9,6 +9,8 @@
         <el-input
           placeholder="Key"
           size="mini"
+          type="textarea"
+          autosize
           :disabled="disabled"
           v-model="item.key"
           class="input-prop user-prop-key"
@@ -17,6 +19,8 @@
         <el-input
           placeholder="Value"
           size="mini"
+          type="textarea"
+          autosize
           :disabled="disabled"
           v-model="item.value"
           class="input-prop user-prop-value"
@@ -129,6 +133,7 @@ export default class KeyValueEditor extends Vue {
     overflow-y: scroll;
     white-space: nowrap;
     .editor-row {
+      overflow: hidden;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -138,6 +143,10 @@ export default class KeyValueEditor extends Vue {
       .input-prop {
         padding: 0px;
         margin-right: 10px;
+        textarea {
+          background: transparent;
+          border-radius: 4px;
+        }
       }
     }
   }

diff --git a/src/components/MsgLeftItem.vue b/src/components/MsgLeftItem.vue
@@ -125,5 +125,11 @@ export default class MsgLeftItem extends Vue {
     right: 0px;
     animation: leftMsg 0.3s ease-in-out;
   }
+  .input-prop {
+    textarea {
+      color: var(--color-text-left_info) !important;
+      border: 1px solid var(--color-border-left_metainfo) !important;
+    }
+  }
 }
 </style>
diff --git a/src/components/MsgRightItem.vue b/src/components/MsgRightItem.vue
@@ -105,5 +105,11 @@ export default class MsgrightItem extends Vue {
     left: 0px;
     animation: rightMsg 0.3s ease-in-out;
   }
+  .input-prop {
+    textarea {
+      color: var(--color-text-active) !important;
+      border: 1px solid var(--color-border-right_metainfo) !important;
+    }
+  }
 }
 </style>