From b44b63536638fc76ee95d80f70dbf0c010ac759f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 18 Mar 2021 11:13:25 +0100
Subject: [PATCH] scope experiment styles

---
 .../CollaborationAnnotation/index.vue         |  20 ++--
 docs/src/demos/Experiments/Commands/index.vue |  24 +++--
 docs/src/demos/Experiments/Details/index.vue  |  44 ++++----
 docs/src/demos/Experiments/Embeds/index.vue   |  10 +-
 docs/src/demos/Experiments/Linter/index.vue   |  58 +++++-----
 .../Experiments/MultipleEditors/index.vue     | 100 +++++++++---------
 .../demos/Experiments/Placeholder/index.vue   |  30 +++---
 7 files changed, 150 insertions(+), 136 deletions(-)

diff --git a/docs/src/demos/Experiments/CollaborationAnnotation/index.vue b/docs/src/demos/Experiments/CollaborationAnnotation/index.vue
index 6d39ed052..3637abf06 100644
--- a/docs/src/demos/Experiments/CollaborationAnnotation/index.vue
+++ b/docs/src/demos/Experiments/CollaborationAnnotation/index.vue
@@ -135,15 +135,17 @@ export default {
 }
 </script>
 
-<style lang="scss">
-/* Basic editor styles */
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
+<style lang="scss" scoped>
+::v-deep {
+  /* Basic editor styles */
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
+  }
+
+  .annotation {
+    background: #9DEF8F;
   }
 }
-
-.annotation {
-  background: #9DEF8F;
-}
 </style>
diff --git a/docs/src/demos/Experiments/Commands/index.vue b/docs/src/demos/Experiments/Commands/index.vue
index 20469d3f3..45edc9710 100644
--- a/docs/src/demos/Experiments/Commands/index.vue
+++ b/docs/src/demos/Experiments/Commands/index.vue
@@ -130,17 +130,19 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
+  }
+
+  .mention {
+    color: #A975FF;
+    background-color: rgba(#A975FF, 0.1);
+    border-radius: 0.3rem;
+    padding: 0.1rem 0.3rem;
   }
 }
-
-.mention {
-  color: #A975FF;
-  background-color: rgba(#A975FF, 0.1);
-  border-radius: 0.3rem;
-  padding: 0.1rem 0.3rem;
-}
 </style>
diff --git a/docs/src/demos/Experiments/Details/index.vue b/docs/src/demos/Experiments/Details/index.vue
index b460448ac..faf9d37ff 100644
--- a/docs/src/demos/Experiments/Details/index.vue
+++ b/docs/src/demos/Experiments/Details/index.vue
@@ -63,34 +63,36 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  details,
-  [data-type="details"] {
-    display: flex;
-
-    [data-type="detailsContent"] > *:not(summary) {
-      display: none;
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
     }
 
-    [data-type="detailsToggle"]::before {
-      cursor: pointer;
-      content: '▸';
-      display: inline-block;
-      width: 1em;
-    }
+    details,
+    [data-type="details"] {
+      display: flex;
 
-    &[open] {
       [data-type="detailsContent"] > *:not(summary) {
-        display: inherit;
+        display: none;
       }
 
       [data-type="detailsToggle"]::before {
-        content: '▾';
+        cursor: pointer;
+        content: '▸';
+        display: inline-block;
+        width: 1em;
+      }
+
+      &[open] {
+        [data-type="detailsContent"] > *:not(summary) {
+          display: inherit;
+        }
+
+        [data-type="detailsToggle"]::before {
+          content: '▾';
+        }
       }
     }
   }
diff --git a/docs/src/demos/Experiments/Embeds/index.vue b/docs/src/demos/Experiments/Embeds/index.vue
index 45c7e4713..0d77882e9 100644
--- a/docs/src/demos/Experiments/Embeds/index.vue
+++ b/docs/src/demos/Experiments/Embeds/index.vue
@@ -53,10 +53,12 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
   }
 
   .iframe-wrapper {
diff --git a/docs/src/demos/Experiments/Linter/index.vue b/docs/src/demos/Experiments/Linter/index.vue
index 3bf38ab30..34c702ad2 100644
--- a/docs/src/demos/Experiments/Linter/index.vue
+++ b/docs/src/demos/Experiments/Linter/index.vue
@@ -61,36 +61,38 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.problem {
-  background: #fdd;
-  border-bottom: 1px solid #f22;
-  margin-bottom: -1px;
-}
+<style lang="scss" scoped>
+::v-deep {
+  .problem {
+    background: #fdd;
+    border-bottom: 1px solid #f22;
+    margin-bottom: -1px;
+  }
 
-.lint-icon {
-  display: inline-block;
-  position: absolute;
-  right: 2px;
-  cursor: pointer;
-  border-radius: 100px;
-  background: #f22;
-  color: white;
-  font-family: times, georgia, serif;
-  font-size: 15px;
-  font-weight: bold;
-  width: 1.1em;
-  height: 1.1em;
-  text-align: center;
-  padding-left: .5px;
-  line-height: 1.1em
-}
+  .lint-icon {
+    display: inline-block;
+    position: absolute;
+    right: 2px;
+    cursor: pointer;
+    border-radius: 100px;
+    background: #f22;
+    color: white;
+    font-family: times, georgia, serif;
+    font-size: 15px;
+    font-weight: bold;
+    width: 1.1em;
+    height: 1.1em;
+    text-align: center;
+    padding-left: .5px;
+    line-height: 1.1em
+  }
 
-.lint-icon:before {
-  content: "!";
-}
+  .lint-icon:before {
+    content: "!";
+  }
 
-.ProseMirror {
-  padding-right: 20px;
+  .ProseMirror {
+    padding-right: 20px;
+  }
 }
 </style>
diff --git a/docs/src/demos/Experiments/MultipleEditors/index.vue b/docs/src/demos/Experiments/MultipleEditors/index.vue
index 9e28af90d..1f7350b28 100644
--- a/docs/src/demos/Experiments/MultipleEditors/index.vue
+++ b/docs/src/demos/Experiments/MultipleEditors/index.vue
@@ -143,67 +143,69 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
-  }
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
 
-  ul[data-type="taskList"] {
-    list-style: none;
-    padding: 0;
+    ul[data-type="taskList"] {
+      list-style: none;
+      padding: 0;
 
-    li {
-      display: flex;
-      align-items: center;
+      li {
+        display: flex;
+        align-items: center;
 
-      > input {
-        flex: 0 0 auto;
-        margin-right: 0.5rem;
+        > input {
+          flex: 0 0 auto;
+          margin-right: 0.5rem;
+        }
       }
     }
   }
-}
 
-.form__label {
-  color: #868e96;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 0.7rem;
-  letter-spacing: 1px;
-}
-
-.form__item {
-  margin: 0 0 1rem;
-  padding: 0.75rem 1rem;
-  border-radius: 5px;
-  border: 1px solid #e9ecef;
-  transition: .1s all ease-in-out;
-
-  &:hover {
-    border-color: #68CEF8;
+  .form__label {
+    color: #868e96;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 0.7rem;
+    letter-spacing: 1px;
   }
 
-  &--title {
-    font-size: 1.5rem;
+  .form__item {
+    margin: 0 0 1rem;
+    padding: 0.75rem 1rem;
+    border-radius: 5px;
+    border: 1px solid #e9ecef;
+    transition: .1s all ease-in-out;
+
+    &:hover {
+      border-color: #68CEF8;
+    }
+
+    &--title {
+      font-size: 1.5rem;
+    }
+
+    &--json {
+      background: #0D0D0D;
+      color: #FFF;
+      font-size: 0.8rem;
+    }
   }
 
-  &--json {
-    background: #0D0D0D;
-    color: #FFF;
-    font-size: 0.8rem;
-  }
-}
+  pre {
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
 
-pre {
-  font-family: 'JetBrainsMono', monospace;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
-
-  code {
-    color: inherit;
-    background: none;
-    font-size: 0.8rem;
+    code {
+      color: inherit;
+      background: none;
+      font-size: 0.8rem;
+    }
   }
 }
 </style>
diff --git a/docs/src/demos/Experiments/Placeholder/index.vue b/docs/src/demos/Experiments/Placeholder/index.vue
index fd22ca84e..c87895e17 100644
--- a/docs/src/demos/Experiments/Placeholder/index.vue
+++ b/docs/src/demos/Experiments/Placeholder/index.vue
@@ -37,20 +37,22 @@ export default {
 }
 </script>
 
-<style lang="scss">
-/* Basic editor styles */
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
+<style lang="scss" scoped>
+::v-deep {
+  /* Basic editor styles */
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
+  }
+
+  /* Placeholder */
+  .ProseMirror p.is-editor-empty:first-child::before {
+    content: attr(data-empty-text);
+    float: left;
+    color: #ced4da;
+    pointer-events: none;
+    height: 0;
   }
 }
-
-/* Placeholder */
-.ProseMirror p.is-editor-empty:first-child::before {
-  content: attr(data-empty-text);
-  float: left;
-  color: #ced4da;
-  pointer-events: none;
-  height: 0;
-}
 </style>