mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-08-06 13:38:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

scope experiment styles

Browse Source
This commit is contained in:
Philipp Kühn 2021-03-18 11:13:25 +01:00
parent 9dd4e24b97
commit b44b635366
7 changed files with 150 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/src/demos/Experiments/CollaborationAnnotation/index.vue
View File

@ -135,15 +135,17 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
/* Basic editor styles */ ::v-deep {
.ProseMirror { /* Basic editor styles */
> * + * { .ProseMirror {
margin-top: 0.75em; > * + * {
margin-top: 0.75em;
}
}
.annotation {
background: #9DEF8F;
} }
} }
.annotation {
background: #9DEF8F;
}
</style> </style>

24
docs/src/demos/Experiments/Commands/index.vue
View File

@ -130,17 +130,19 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ProseMirror { ::v-deep {
> * + * { .ProseMirror {
margin-top: 0.75em; > * + * {
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> </style>

44
docs/src/demos/Experiments/Details/index.vue
View File

@ -63,34 +63,36 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ProseMirror { ::v-deep {
> * + * { .ProseMirror {
margin-top: 0.75em; > * + * {
} margin-top: 0.75em;
details,
[data-type="details"] {
display: flex;
[data-type="detailsContent"] > *:not(summary) {
display: none;
} }
[data-type="detailsToggle"]::before { details,
cursor: pointer; [data-type="details"] {
content: '▸'; display: flex;
display: inline-block;
width: 1em;
}
&[open] {
[data-type="detailsContent"] > *:not(summary) { [data-type="detailsContent"] > *:not(summary) {
display: inherit; display: none;
} }
[data-type="detailsToggle"]::before { [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: '▾';
}
} }
} }
} }

10
docs/src/demos/Experiments/Embeds/index.vue
View File

@ -53,10 +53,12 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ProseMirror { ::v-deep {
> * + * { .ProseMirror {
margin-top: 0.75em; > * + * {
margin-top: 0.75em;
}
} }
.iframe-wrapper { .iframe-wrapper {

58
docs/src/demos/Experiments/Linter/index.vue
View File

@ -61,36 +61,38 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.problem { ::v-deep {
background: #fdd; .problem {
border-bottom: 1px solid #f22; background: #fdd;
margin-bottom: -1px; border-bottom: 1px solid #f22;
} margin-bottom: -1px;
}
.lint-icon { .lint-icon {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
right: 2px; right: 2px;
cursor: pointer; cursor: pointer;
border-radius: 100px; border-radius: 100px;
background: #f22; background: #f22;
color: white; color: white;
font-family: times, georgia, serif; font-family: times, georgia, serif;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
text-align: center; text-align: center;
padding-left: .5px; padding-left: .5px;
line-height: 1.1em line-height: 1.1em
} }
.lint-icon:before { .lint-icon:before {
content: "!"; content: "!";
} }
.ProseMirror { .ProseMirror {
padding-right: 20px; padding-right: 20px;
}
} }
</style> </style>

100
docs/src/demos/Experiments/MultipleEditors/index.vue
View File

@ -143,67 +143,69 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ProseMirror { ::v-deep {
> * + * { .ProseMirror {
margin-top: 0.75em; > * + * {
} margin-top: 0.75em;
}
ul[data-type="taskList"] { ul[data-type="taskList"] {
list-style: none; list-style: none;
padding: 0; padding: 0;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
> input { > input {
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 0.5rem; margin-right: 0.5rem;
}
} }
} }
} }
}
.form__label { .form__label {
color: #868e96; color: #868e96;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: 0.7rem; font-size: 0.7rem;
letter-spacing: 1px; 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;
} }
&--title { .form__item {
font-size: 1.5rem; 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 { pre {
background: #0D0D0D; font-family: 'JetBrainsMono', monospace;
color: #FFF; padding: 0.75rem 1rem;
font-size: 0.8rem; border-radius: 0.5rem;
}
}
pre { code {
font-family: 'JetBrainsMono', monospace; color: inherit;
padding: 0.75rem 1rem; background: none;
border-radius: 0.5rem; font-size: 0.8rem;
}
code {
color: inherit;
background: none;
font-size: 0.8rem;
} }
} }
</style> </style>

30
docs/src/demos/Experiments/Placeholder/index.vue
View File

@ -37,20 +37,22 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
/* Basic editor styles */ ::v-deep {
.ProseMirror { /* Basic editor styles */
> * + * { .ProseMirror {
margin-top: 0.75em; > * + * {
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> </style>