style(messages): modify messages styles on global

emqx · Mar 26, 2021 · a954571 · a954571
1 parent 56c4c0c
commit a954571
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/example/App.vue b/example/App.vue
@@ -170,6 +170,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
+import { ElMessage } from 'element-plus'
 
 export default defineComponent({
   name: 'App',
@@ -217,6 +218,21 @@ export default defineComponent({
     }
     const onSubmit = () => {
       console.log(testForm.value)
+      ElMessage({
+        type: 'success',
+        message: 'success',
+        duration: 0,
+      })
+      ElMessage({
+        type: 'error',
+        message: 'error',
+        duration: 0,
+      })
+      ElMessage({
+        type: 'warning',
+        message: 'warning',
+        duration: 0,
+      })
     }
     const KeyValueEditorRef = ref()
     const addOneRow = () => {

diff --git a/packages/Container/src/container.vue b/packages/Container/src/container.vue
@@ -62,7 +62,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../../style/global.scss';
 .emqx-container {
   &.is-normal {
     margin-right: auto;

diff --git a/packages/index.ts b/packages/index.ts
@@ -27,6 +27,7 @@ import BreadcrumbItem from './BreadcrumbItem'
 import Upload from './Upload'
 import Tags from './Tags'
 import KeyValueEditor from './KeyValueEditor'
+import './style/global.scss'
 
 interface VueWindow extends Window {
   Vue?: App

diff --git a/packages/style/global.scss b/packages/style/global.scss
@@ -1,3 +1,31 @@
+.el-message {
+  border-radius: 8px !important;
+}
+.el-message--success {
+  background: linear-gradient(133deg, #E1F4EE 0%, #DEF0F1 100%) !important;
+  border: none !important;
+  .el-message__content,
+  .el-icon-success {
+    color: #00B173 !important;
+  }
+}
+.el-message--error {
+  background: linear-gradient(133deg, #F9E5EB 0%, #FCE2DC 100%) !important;
+  border: none !important;
+  .el-message__content,
+  .el-icon-error {
+    color: #F16538 !important;
+  }
+}
+.el-message--warning {
+  background: linear-gradient(133deg, #FDF2E2 0%, #FAECD9 100%);
+  border: none !important;
+  .el-message__content,
+  .el-icon-warning {
+    color: #EC8E18 !important;
+  }
+}
+
 @media screen and (max-width: 2560px) {
   .emqx-container.is-normal,
   .emqx-header-container {