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

improve scrollable containers

Browse Source
This commit is contained in:
Philipp Kühn
2021-02-04 22:10:08 +01:00
parent 74a9cb90ec
commit ea16c713a4
4 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/components/Demo/style.scss
View File

@@ -8,9 +8,9 @@
border-bottom-width: 0; border-bottom-width: 0;
color: $colorBlack; color: $colorBlack;
background-color: $colorWhite; background-color: $colorWhite;
max-height: unquote("max(300px, 70vh)"); max-height: unquote("max(300px, 60vh)");
overflow: auto; overflow: auto;
scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
border: 3px solid $colorBlack; border: 3px solid $colorBlack;
} }

6
docs/src/components/DemoContent/index.vue
View File

@@ -1,8 +1,6 @@
<template> <template>
<div v-if="mainFile"> <component :is="mainFile" v-if="mainFile && mode === 'vue'" />
<component :is="mainFile" v-if="mode === 'vue'" /> <react-renderer :component="mainFile" v-else-if="mainFile && mode === 'react'" />
<react-renderer :component="mainFile" v-if="mode === 'react'" />
</div>
</template> </template>
<script> <script>

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

@@ -1,5 +1,4 @@
<template> <template>
<div>
<div class="editor" v-if="editor"> <div class="editor" v-if="editor">
<menu-bar class="editor__menu" :editor="editor" /> <menu-bar class="editor__menu" :editor="editor" />
<editor-content class="editor__content" :editor="editor" /> <editor-content class="editor__content" :editor="editor" />
@@ -19,7 +18,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -141,6 +139,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.editor { .editor {
display: flex;
flex-direction: column;
max-height: 90vh;
color: black; color: black;
background-color: white; background-color: white;
border: 1px solid rgba(black, 0.1); border: 1px solid rgba(black, 0.1);
@@ -148,6 +149,7 @@ export default {
&__menu { &__menu {
display: flex; display: flex;
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: 1px solid rgba(black, 0.1);
@@ -155,18 +157,15 @@ export default {
&__content { &__content {
padding: 1rem; padding: 1rem;
max-height: 25rem; flex: 1 1 auto;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&::-webkit-scrollbar-thumb {
background-color: rgba(black, 0.1);
}
} }
&__bottom-bar { &__bottom-bar {
display: flex; display: flex;
flex: 0 0 auto;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;

2
docs/src/layouts/App/prism.scss
View File

@@ -46,7 +46,7 @@ pre[class*="language-"] {
background: $codeBackground; background: $codeBackground;
padding: 1.25rem !important; padding: 1.25rem !important;
border-radius: 0.75rem; border-radius: 0.75rem;
max-height: unquote("max(300px, 70vh)"); max-height: unquote("max(300px, 60vh)");
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: rgba($colorWhite, 0.2); background-color: rgba($colorWhite, 0.2);