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

change collab style

Browse Source
This commit is contained in:
Philipp Kühn
2021-02-05 10:11:57 +01:00
parent 6c6343c390
commit 8919d88f5b
2 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue
View File

@@ -41,10 +41,10 @@ export default {
.menu-item { .menu-item {
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: rgba(black, 0.5); color: #0D0D0D;
border: none; border: none;
background-color: transparent; background-color: transparent;
border-radius: 0.25rem; border-radius: 0.4rem;
padding: 0.25rem; padding: 0.25rem;
margin-right: 0.25rem; margin-right: 0.25rem;
@@ -56,8 +56,8 @@ export default {
&.is-active, &.is-active,
&:hover { &:hover {
color: black; color: #FFF;
background-color: rgba(black, 0.05); background-color: #0D0D0D;
} }
} }
</style> </style>

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

@@ -1,8 +1,8 @@
<template> <template>
<div class="editor" v-if="editor"> <div class="editor" v-if="editor">
<menu-bar class="editor__menu" :editor="editor" /> <menu-bar class="editor__header" :editor="editor" />
<editor-content class="editor__content" :editor="editor" /> <editor-content class="editor__content" :editor="editor" />
<div class="editor__bottom-bar"> <div class="editor__footer">
<div :class="`editor__status editor__status--${status}`"> <div :class="`editor__status editor__status--${status}`">
<template v-if="status === 'connected'"> <template v-if="status === 'connected'">
{{ users.length }} user{{ users.length === 1 ? '' : 's' }} online {{ users.length }} user{{ users.length === 1 ? '' : 's' }} online
@@ -142,38 +142,38 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 90vh; max-height: 90vh;
color: black; color: #0D0D0D;
background-color: white; background-color: $colorWhite;
border: 1px solid rgba(black, 0.1); border: 3px solid #0D0D0D;
border-radius: 0.5rem; border-radius: 0.5rem;
&__menu { &__header {
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0.25rem; padding: 0.25rem;
border-bottom: 1px solid rgba(black, 0.1); border-bottom: 3px solid #0D0D0D;
} }
&__content { &__content {
padding: 1rem; padding: 1.25rem 1rem;
flex: 1 1 auto; flex: 1 1 auto;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
&__bottom-bar { &__footer {
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
white-space: nowrap; white-space: nowrap;
border-top: 1px solid rgba(black, 0.1); border-top: 3px solid #0D0D0D;
font-size: 13px; font-size: 12px;
font-weight: 500; font-weight: 600;
color: rgba(black, 0.5); color: #0D0D0D;
white-space: nowrap; white-space: nowrap;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
} }
@@ -190,7 +190,7 @@ export default {
display: inline-block; display: inline-block;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
background: rgba(black, 0.5); background: rgba(#0D0D0D, 0.5);
border-radius: 50%; border-radius: 50%;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@@ -200,7 +200,7 @@ export default {
} }
&--connected::before { &--connected::before {
background: #9DEF8F; background: #B9F18D;
} }
} }
@@ -209,16 +209,16 @@ export default {
background: none; background: none;
border: none; border: none;
font: inherit; font: inherit;
font-size: 13px; font-size: 12px;
font-weight: 500; font-weight: 600;
color: rgba(black, 0.5); color: #0D0D0D;
border-radius: 0.25rem; border-radius: 0.4rem;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
margin-right: 0.25rem; margin-right: 0.25rem;
&:hover { &:hover {
color: black; color: #FFF;
background-color: rgba(black, 0.05); background-color: #0D0D0D;
} }
} }
} }
@@ -231,8 +231,8 @@ export default {
position: relative; position: relative;
margin-left: -1px; margin-left: -1px;
margin-right: -1px; margin-right: -1px;
border-left: 1px solid black; border-left: 1px solid #0D0D0D;
border-right: 1px solid black; border-right: 1px solid #0D0D0D;
word-break: normal; word-break: normal;
pointer-events: none; pointer-events: none;
} }
@@ -242,12 +242,12 @@ export default {
position: absolute; position: absolute;
top: -1.4em; top: -1.4em;
left: -1px; left: -1px;
font-size: 13px; font-size: 12px;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 600;
line-height: normal; line-height: normal;
user-select: none; user-select: none;
color: black; color: #0D0D0D;
padding: 0.1rem 0.3rem; padding: 0.1rem 0.3rem;
border-radius: 3px 3px 3px 0; border-radius: 3px 3px 3px 0;
white-space: nowrap; white-space: nowrap;