From f96dca37d6b27b543e7245a33f8adf8c9af33d5e Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 2 Oct 2020 14:43:19 +0200
Subject: [PATCH] move styles from demos to vue components

---
 .../Examples/CollaborativeEditing/index.vue   | 60 ++++++++++++++++++-
 .../Examples/CollaborativeEditing/style.scss  | 57 ------------------
 .../demos/Examples/ExportHtmlOrJson/index.vue | 19 +++++-
 .../Examples/ExportHtmlOrJson/style.scss      | 16 -----
 docs/src/demos/Examples/Focus/index.vue       |  7 ++-
 docs/src/demos/Examples/Focus/style.scss      |  4 --
 docs/src/demos/Examples/ReadOnly/index.vue    | 16 ++++-
 docs/src/demos/Examples/ReadOnly/style.scss   | 11 ----
 8 files changed, 97 insertions(+), 93 deletions(-)
 delete mode 100644 docs/src/demos/Examples/CollaborativeEditing/style.scss
 delete mode 100644 docs/src/demos/Examples/ExportHtmlOrJson/style.scss
 delete mode 100644 docs/src/demos/Examples/Focus/style.scss
 delete mode 100644 docs/src/demos/Examples/ReadOnly/style.scss

diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index 2246d926..e4f7fe0c 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/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>
diff --git a/docs/src/demos/Examples/CollaborativeEditing/style.scss b/docs/src/demos/Examples/CollaborativeEditing/style.scss
deleted file mode 100644
index 1c7b0e8d..00000000
--- a/docs/src/demos/Examples/CollaborativeEditing/style.scss
+++ /dev/null
@@ -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;
-}
diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
index e5a4f1d7..c4f3d50b 100644
--- a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
+++ b/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>
diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/style.scss b/docs/src/demos/Examples/ExportHtmlOrJson/style.scss
deleted file mode 100644
index 8efcfbce..00000000
--- a/docs/src/demos/Examples/ExportHtmlOrJson/style.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/docs/src/demos/Examples/Focus/index.vue b/docs/src/demos/Examples/Focus/index.vue
index 07781fe8..063f9212 100644
--- a/docs/src/demos/Examples/Focus/index.vue
+++ b/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>
diff --git a/docs/src/demos/Examples/Focus/style.scss b/docs/src/demos/Examples/Focus/style.scss
deleted file mode 100644
index 89ba466a..00000000
--- a/docs/src/demos/Examples/Focus/style.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.has-focus {
-  border-radius: 3px;
-  box-shadow: 0 0 0 3px #3ea4ffe6;
-}
\ No newline at end of file
diff --git a/docs/src/demos/Examples/ReadOnly/index.vue b/docs/src/demos/Examples/ReadOnly/index.vue
index edd38756..766da7dd 100644
--- a/docs/src/demos/Examples/ReadOnly/index.vue
+++ b/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>
diff --git a/docs/src/demos/Examples/ReadOnly/style.scss b/docs/src/demos/Examples/ReadOnly/style.scss
deleted file mode 100644
index 5b903400..00000000
--- a/docs/src/demos/Examples/ReadOnly/style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.checkbox {
-  margin-bottom: 1rem;
-
-  input[type="checkbox"] {
-    margin-right: 0.5rem;
-  }
-}
-
-[contenteditable=false] {
-  color: #999;
-}