move styles from demos to vue components

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -151,4 +151,62 @@ export default {
 }
 </script>
 
-<style lang="scss" src="./style.scss">
+<style lang="scss">
+.collaboration-users {
+  margin-top: 0.5rem;
+
+  &__item {
+    display: inline-block;
+    border-radius: 5px;
+    padding: 0.25rem 0.5rem;
+    color: white;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
+.collaboration-status {
+  background: #eee;
+  color: #666;
+  border-radius: 5px;
+  padding: 0.5rem 1rem;
+  margin-top: 1rem;
+
+  &::before {
+    content: ' ';
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    background: green;
+    border-radius: 50%;
+    margin-right: 0.5rem;
+  }
+}
+
+/* This gives the remote user caret */
+.collaboration-cursor__caret {
+  position: relative;
+  margin-left: -1px;
+  margin-right: -1px;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  word-break: normal;
+  pointer-events: none;
+}
+
+/* This renders the username above the caret */
+.collaboration-cursor__label {
+  position: absolute;
+  top: -1.6em;
+  left: -1px;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  user-select: none;
+  color: white;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+</style>

docs/src/demos/Examples/CollaborativeEditing/style.scss

@@ -1,57 +0,0 @@
-.collaboration-users {
-  margin-top: 0.5rem;
-
-  &__item {
-    display: inline-block;
-    border-radius: 5px;
-    padding: 0.25rem 0.5rem;
-    color: white;
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-}
-
-.collaboration-status {
-  background: #eee;
-  color: #666;
-  border-radius: 5px;
-  padding: 0.5rem 1rem;
-  margin-top: 1rem;
-
-  &::before {
-    content: ' ';
-    display: inline-block;
-    width: 0.5rem;
-    height: 0.5rem;
-    background: green;
-    border-radius: 50%;
-    margin-right: 0.5rem;
-  }
-}
-
-/* This gives the remote user caret */
-.collaboration-cursor__caret {
-  position: relative;
-  margin-left: -1px;
-  margin-right: -1px;
-  border-left: 1px solid black;
-  border-right: 1px solid black;
-  word-break: normal;
-  pointer-events: none;
-}
-
-/* This renders the username above the caret */
-.collaboration-cursor__label {
-  position: absolute;
-  top: -1.6em;
-  left: -1px;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: normal;
-  user-select: none;
-  color: white;
-  padding: 0.1rem 0.3rem;
-  border-radius: 3px;
-  white-space: nowrap;
-}

docs/src/demos/Examples/ExportHtmlOrJson/index.vue

@@ -95,4 +95,21 @@ export default {
 }
 </script>
 
-<style lang="scss" src="./style.scss">
+<style lang="scss">
+.export {
+  h3 {
+    margin: 0.5rem 0;
+  }
+  pre {
+    border-radius: 5px;
+    color: #333;
+  }
+
+  code {
+    display: block;
+    white-space: pre-wrap;
+    font-size: 0.8rem;
+    padding: 1rem;
+  }
+}
+</style>

docs/src/demos/Examples/ExportHtmlOrJson/style.scss

@@ -1,16 +0,0 @@
-.export {
-  h3 {
-    margin: 0.5rem 0;
-  }
-  pre {
-    border-radius: 5px;
-    color: #333;
-  }
-
-  code {
-    display: block;
-    white-space: pre-wrap;
-    font-size: 0.8rem;
-    padding: 1rem;
-  }
-}

docs/src/demos/Examples/Focus/index.vue

@@ -55,4 +55,9 @@ export default {
 }
 </script>
 
-<style lang="scss" src="./style.scss">
+<style lang="scss">
+.has-focus {
+  border-radius: 3px;
+  box-shadow: 0 0 0 3px #3ea4ffe6;
+}
+</style>

docs/src/demos/Examples/Focus/style.scss

@@ -1,4 +0,0 @@
-.has-focus {
-  border-radius: 3px;
-  box-shadow: 0 0 0 3px #3ea4ffe6;
-}

docs/src/demos/Examples/ReadOnly/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
     <div class="checkbox">
-      <input type="checkbox" id="editable" v-model="editable" />
+      <input type="checkbox" id="editable" v-model="editable">
       <label for="editable">editable</label>
     </div>
     <editor-content :editor="editor" />
@@ -49,4 +49,16 @@ export default {
 }
 </script>
 
-<style lang="scss" src="./style.scss">
+<style lang="scss">
+.checkbox {
+  margin-bottom: 1rem;
+
+  input[type="checkbox"] {
+    margin-right: 0.5rem;
+  }
+}
+
+[contenteditable=false] {
+  color: #999;
+}
+</style>

docs/src/demos/Examples/ReadOnly/style.scss

@@ -1,11 +0,0 @@
-.checkbox {
-  margin-bottom: 1rem;
-
-  input[type="checkbox"] {
-    margin-right: 0.5rem;
-  }
-}
-
-[contenteditable=false] {
-  color: #999;
-}