ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

move styles from demos to vue components

Browse Source
This commit is contained in:
Hans Pagel
2020-10-02 14:43:19 +02:00
parent f9bea265bd
commit f96dca37d6
8 changed files with 97 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@@ -151,4 +151,62 @@ export default {
} }
</script> </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>

57
docs/src/demos/Examples/CollaborativeEditing/style.scss
View File

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

19
docs/src/demos/Examples/ExportHtmlOrJson/index.vue
View File

@@ -95,4 +95,21 @@ export default {
} }
</script> </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>

16
docs/src/demos/Examples/ExportHtmlOrJson/style.scss
View File

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

7
docs/src/demos/Examples/Focus/index.vue
View File

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

4
docs/src/demos/Examples/Focus/style.scss
View File

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

16
docs/src/demos/Examples/ReadOnly/index.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="editable" v-model="editable" /> <input type="checkbox" id="editable" v-model="editable">
<label for="editable">editable</label> <label for="editable">editable</label>
</div> </div>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
@@ -49,4 +49,16 @@ export default {
} }
</script> </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>

11
docs/src/demos/Examples/ReadOnly/style.scss
View File

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