Scoped CSS

Author: dark-flames

src/components/Dialog.vue

@@ -28,7 +28,7 @@
     </div>
 </template>
 
-<style>
+<style scoped>
     .mp-dialog-mask {
         position: fixed;
         z-index: 9998;

src/components/InputArea.vue

@@ -10,9 +10,6 @@
 </template>
 
 <style>
-    #mp-input-area {
-        height: 100%;
-    }
     /* hack CodeMirror */
     .CodeMirror {
         height: 100% !important;
@@ -29,6 +26,12 @@
     }
 </style>
 
+<style scoped>
+    #mp-input-area {
+        height: 100%;
+    }
+</style>
+
 <script>
 import {codemirror} from 'vue-codemirror-lite'
 import 'codemirror/mode/markdown/markdown.js'

src/components/MarkdownPalettes.vue

@@ -30,7 +30,7 @@
     </div>
 </template>
 
-<style>
+<style scoped>
     #mp-editor-toolbar {
         float: left;
         width: 100%;

src/components/PreviewArea.vue

@@ -4,7 +4,7 @@
     </div>
 </template>
 
-<style>
+<style scoped>
     #mp-preview-content {
         color: #333;
         padding: 10px;

src/components/Toolbar.vue

@@ -11,8 +11,7 @@
     </div>
 </template>
 
-<style>
-
+<style scoped>
     #mp-toolbar {
         box-sizing: border-box;
         background-color: white;