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;
-}