perf[json-editor]:refine css

PanJiaChen · PanJiaChen · commit 2c147649ba3f · 2018-01-11T11:28:14.000+08:00
diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
@@ -53,11 +53,16 @@ export default {
 }
 </script>
 
-<style>
-.CodeMirror {
+<style scoped>
+.json-editor{
   height: 100%;
+  position: relative;
 }
-.json-editor .cm-s-rubyblue span.cm-string {
+.json-editor >>> .CodeMirror {
+  height: auto;
+  min-height: 300px;
+}
+.json-editor >>> .cm-s-rubyblue span.cm-string {
   color: #F08047;
 }
 </style>
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -140,10 +140,6 @@ code {
   margin-top: 30px;
 }
 
-.editor-container .CodeMirror {
-  height: 100%!important;
-}
-
 .text-center {
   text-align: center
 }
diff --git a/src/views/components-demo/jsonEditor.vue b/src/views/components-demo/jsonEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="components-container" style="height:100vh">
+  <div class="components-container">
     <code>JsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value"></json-editor>

Original file line number	Diff line number	Diff line change
`@@ -53,11 +53,16 @@ export default {`
`53`	`53`	`}`
`54`	`54`	`</script>`
`55`	`55`
`56`		`-<style>`
`57`		`-.CodeMirror {`
	`56`	`+<style scoped>`
	`57`	`+.json-editor{`
`58`	`58`	`height: 100%;`
	`59`	`+ position: relative;`
`59`	`60`	`}`
`60`		`-.json-editor .cm-s-rubyblue span.cm-string {`
	`61`	`+.json-editor >>> .CodeMirror {`
	`62`	`+ height: auto;`
	`63`	`+ min-height: 300px;`
	`64`	`+}`
	`65`	`+.json-editor >>> .cm-s-rubyblue span.cm-string {`
`61`	`66`	`color: #F08047;`
`62`	`67`	`}`
`63`	`68`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -140,10 +140,6 @@ code {`
`140`	`140`	`margin-top: 30px;`
`141`	`141`	`}`
`142`	`142`
`143`		`-.editor-container .CodeMirror {`
`144`		`- height: 100%!important;`
`145`		`-}`
`146`		`-`
`147`	`143`	`.text-center {`
`148`	`144`	`text-align: center`
`149`	`145`	`}`