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

update demo styles

Browse Source
This commit is contained in:
svenadlung 2023-03-30 15:32:04 +02:00
parent 8302d23c65
commit 5a142fd41c
7 changed files with 60 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demos/src/Examples/CollaborativeEditing/React/MenuBar.scss
View File

@ -1,7 +1,7 @@
.divider {
background-color: rgba(#000, 0.1);
background-color: rgba(#fff, 0.25);
height: 1.25rem;
margin-left: 0.5rem;
margin-right: 0.75rem;
width: 2px;
width: 1px;
}

6
demos/src/Examples/CollaborativeEditing/React/MenuItem.scss
View File

@ -2,7 +2,8 @@
background-color: transparent;
border: none;
border-radius: 0.4rem;
color: #0d0d0d;
color: #fff;
cursor: pointer;
height: 1.75rem;
margin-right: 0.25rem;
padding: 0.25rem;
@ -16,7 +17,6 @@
&:hover,
&.is-active {
background-color: #0d0d0d;
color: #fff;
background-color: #303030;
}
}

3
demos/src/Examples/CollaborativeEditing/React/styles.scss
View File

@ -94,7 +94,10 @@
&__header {
align-items: center;
background: #0d0d0d;
border-bottom: 3px solid #0d0d0d;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;

4
demos/src/Examples/CollaborativeEditing/Vue/MenuBar.vue
View File

@ -152,10 +152,10 @@ export default {
<style lang="scss">
.divider {
width: 2px;
background-color: rgba(#fff, 0.25);
height: 1.25rem;
background-color: rgba(#000, 0.1);
margin-left: 0.5rem;
margin-right: 0.75rem;
width: 1px;
}
</style>

16
demos/src/Examples/CollaborativeEditing/Vue/MenuItem.vue
View File

@ -47,25 +47,25 @@ export default {
<style lang="scss">
.menu-item {
width: 1.75rem;
height: 1.75rem;
color: #0D0D0D;
background: transparent;
border: none;
background-color: transparent;
border-radius: 0.4rem;
color: #fff;
cursor: pointer;
height: 1.75rem;
padding: 0.25rem;
margin-right: 0.25rem;
width: 1.75rem;
svg {
width: 100%;
height: 100%;
fill: currentColor;
height: 100%;
width: 100%;
}
&.is-active,
&:hover {
color: #FFF;
background-color: #0D0D0D;
background-color: #303030;
}
}
</style>

80
demos/src/Examples/CollaborativeEditing/Vue/index.vue
View File

@ -149,61 +149,63 @@ export default {
<style lang="scss">
.editor {
display: flex;
flex-direction: column;
max-height: 26rem;
color: #0D0D0D;
background-color: #FFF;
border: 3px solid #0D0D0D;
border-radius: 0.75rem;
color: #0D0D0D;
display: flex;
flex-direction: column;
max-height: 26rem;
&__header {
display: flex;
align-items: center;
background: #0d0d0d;
border-bottom: 3px solid #0d0d0d;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
padding: 0.25rem;
border-bottom: 3px solid #0D0D0D;
}
&__content {
padding: 1.25rem 1rem;
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
padding: 1.25rem 1rem;
-webkit-overflow-scrolling: touch;
}
&__footer {
align-items: center;
border-top: 3px solid #0D0D0D;
color: #0D0D0D;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
white-space: nowrap;
border-top: 3px solid #0D0D0D;
font-size: 12px;
font-weight: 600;
color: #0D0D0D;
white-space: nowrap;
justify-content: space-between;
padding: 0.25rem 0.75rem;
white-space: nowrap;
}
/* Some information about the status */
&__status {
display: flex;
align-items: center;
border-radius: 5px;
display: flex;
&::before {
content: ' ';
flex: 0 0 auto;
display: inline-block;
width: 0.5rem;
height: 0.5rem;
background: rgba(#0D0D0D, 0.5);
border-radius: 50%;
content: ' ';
display: inline-block;
flex: 0 0 auto;
height: 0.5rem;
margin-right: 0.5rem;
width: 0.5rem;
}
&--connecting::before {
@ -219,47 +221,45 @@ export default {
button {
background: none;
border: none;
border-radius: 0.4rem;
color: #0D0D0D;
font: inherit;
font-size: 12px;
font-weight: 600;
color: #0D0D0D;
border-radius: 0.4rem;
padding: 0.25rem 0.5rem;
&:hover {
color: #FFF;
background-color: #0D0D0D;
color: #FFF;
}
}
}
}
</style>
<style lang="scss">
/* Give a remote user a caret */
.collaboration-cursor__caret {
position: relative;
margin-left: -1px;
margin-right: -1px;
border-left: 1px solid #0D0D0D;
border-right: 1px solid #0D0D0D;
word-break: normal;
margin-left: -1px;
margin-right: -1px;
pointer-events: none;
position: relative;
word-break: normal;
}
/* Render the username above the caret */
.collaboration-cursor__label {
position: absolute;
top: -1.4em;
left: -1px;
border-radius: 3px 3px 3px 0;
color: #0D0D0D;
font-size: 12px;
font-style: normal;
font-weight: 600;
left: -1px;
line-height: normal;
user-select: none;
color: #0D0D0D;
padding: 0.1rem 0.3rem;
border-radius: 3px 3px 3px 0;
position: absolute;
top: -1.4em;
user-select: none;
white-space: nowrap;
}
@ -290,16 +290,16 @@ export default {
pre {
background: #0D0D0D;
border-radius: 0.5rem;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
@ -308,8 +308,8 @@ export default {
}
img {
max-width: 100%;
height: auto;
max-width: 100%;
}
hr {
@ -317,8 +317,8 @@ export default {
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
padding-left: 1rem;
}
hr {
@ -332,8 +332,8 @@ export default {
padding: 0;
li {
display: flex;
align-items: center;
display: flex;
> label {
flex: 0 0 auto;

2
docs/installation/nextjs.md
View File

@ -37,6 +37,8 @@ If you followed step 1 and 2, you can now start your project with `npm run dev`,
To actually start using Tiptap, you’ll need to add a new component to your app. To do this, first create a directory called `components/`. Now it's time to create our component which we'll call `Tiptap`. To do this put the following example code in `components/Tiptap.js`.
```jsx
'use client'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'