mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-29 08:19:34 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: update styling

Browse Source
This commit is contained in:
Philipp Kühn 2021-04-20 10:13:43 +02:00
parent b6852ad9ca
commit ecf0c92434
14 changed files with 51 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/src/assets/icons/arrow-left.svg
View File

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0607 3.93934C10.4749 3.35355 9.52507 3.35355 8.93927 3.93934L1.93927 10.9393C1.35357 11.5251 1.35357 12.4749 1.93927 13.0607L8.93927 20.0607C9.52507 20.6464 10.4749 20.6464 11.0607 20.0607C11.6464 19.4749 11.6464 18.5251 11.0607 17.9393L6.62127 13.5H21C21.8284 13.5 22.5 12.8284 22.5 12C22.5 11.1716 21.8284 10.5 21 10.5H6.62127L11.0607 6.06066C11.6464 5.47487 11.6464 4.52513 11.0607 3.93934Z" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 566 B

3
docs/src/assets/icons/arrow-right.svg
View File

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9393 3.93934C13.5251 3.35355 14.4749 3.35355 15.0607 3.93934L22.0607 10.9393C22.6464 11.5251 22.6464 12.4749 22.0607 13.0607L15.0607 20.0607C14.4749 20.6464 13.5251 20.6464 12.9393 20.0607C12.3536 19.4749 12.3536 18.5251 12.9393 17.9393L17.3787 13.5H3C2.17157 13.5 1.5 12.8284 1.5 12C1.5 11.1716 2.17157 10.5 3 10.5H17.3787L12.9393 6.06066C12.3536 5.47487 12.3536 4.52513 12.9393 3.93934Z" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 561 B

3
docs/src/assets/icons/close.svg
View File

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3 12.179C14.2767 12.1558 14.2583 12.1282 14.2456 12.0978C14.233 12.0674 14.2266 12.0349 14.2266 12.002C14.2266 11.9691 14.233 11.9366 14.2456 11.9062C14.2583 11.8758 14.2767 11.8482 14.3 11.825L19.563 6.563C19.8443 6.28134 20.0021 5.89948 20.0018 5.50144C20.0016 5.10339 19.8432 4.72176 19.5615 4.4405C19.2798 4.15924 18.898 4.00138 18.4999 4.00166C18.1019 4.00194 17.7203 4.16034 17.439 4.442L12.177 9.7C12.1538 9.72328 12.1262 9.74175 12.0958 9.75435C12.0654 9.76696 12.0329 9.77345 12 9.77345C11.9671 9.77345 11.9346 9.76696 11.9042 9.75435C11.8738 9.74175 11.8462 9.72328 11.823 9.7L6.561 4.442C6.42174 4.30267 6.25639 4.19213 6.07441 4.1167C5.89242 4.04127 5.69736 4.00242 5.50036 4.00237C5.1025 4.00228 4.7209 4.16024 4.4395 4.4415C4.15811 4.72276 3.99997 5.10429 3.99988 5.50214C3.99978 5.9 4.15774 6.2816 4.439 6.563L9.7 11.825C9.72329 11.8482 9.74176 11.8758 9.75436 11.9062C9.76696 11.9366 9.77345 11.9691 9.77345 12.002C9.77345 12.0349 9.76696 12.0674 9.75436 12.0978C9.74176 12.1282 9.72329 12.1558 9.7 12.179L4.43901 17.442C4.29974 17.5813 4.18928 17.7467 4.11393 17.9288C4.03859 18.1108 3.99983 18.3059 3.99988 18.5029C3.99997 18.9007 4.15811 19.2822 4.43951 19.5635C4.57884 19.7028 4.74424 19.8132 4.92626 19.8886C5.10828 19.9639 5.30336 20.0027 5.50036 20.0026C5.89822 20.0025 6.27974 19.8444 6.56101 19.563L11.823 14.3C11.8462 14.2767 11.8738 14.2582 11.9042 14.2456C11.9346 14.233 11.9671 14.2266 12 14.2266C12.0329 14.2266 12.0654 14.233 12.0958 14.2456C12.1262 14.2582 12.1538 14.2767 12.177 14.3L17.439 19.563C17.7203 19.8444 18.1018 20.0025 18.4997 20.0026C18.8975 20.0027 19.2791 19.8448 19.5605 19.5635C19.8419 19.2822 20 18.9007 20.0001 18.5029C20.0002 18.105 19.8423 17.7234 19.561 17.442L14.3 12.179Z" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

1
docs/src/assets/icons/github.svg
View File

@ -1 +0,0 @@
<svg viewBox="0 0 24 24"><path d="M11.999.5C5.649.5.5 5.648.5 12c0 5.082 3.294 9.392 7.865 10.914.574.103.756-.236.756-.541 0-.274.006-1.037 0-1.997-3.198.694-3.861-1.515-3.861-1.515-.523-1.329-1.275-1.682-1.275-1.682-1.045-.714.077-.699.077-.699 1.153.08 1.762 1.184 1.762 1.184 1.026 1.758 2.691 1.25 3.346.956.106-.742.402-1.251.731-1.536-2.554-.292-5.238-1.277-5.238-5.686 0-1.255.448-2.281 1.184-3.086-.118-.289-.514-1.46.112-3.043 0 0 .967-.309 3.162 1.18a11.011 11.011 0 012.88-.388c.976.005 1.96.132 2.88.388 2.195-1.488 3.159-1.18 3.159-1.18.627 1.583.232 2.754.114 3.043.736.805 1.183 1.831 1.183 3.086 0 4.42-2.689 5.391-5.251 5.674.412.357.787 1.047.787 2.12v3.184c0 .308.186.647.77.536C20.209 21.389 23.5 17.08 23.5 12 23.5 5.648 18.352.5 11.999.5z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 776 B

5
docs/src/assets/icons/menu.svg
View File

@ -1,5 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 2.5H1.5C0.947715 2.5 0.5 2.94772 0.5 3.5V4.5C0.5 5.05228 0.947715 5.5 1.5 5.5H22.5C23.0523 5.5 23.5 5.05228 23.5 4.5V3.5C23.5 2.94772 23.0523 2.5 22.5 2.5Z" fill="black"/>
<path d="M22.5 10.5H1.5C0.947715 10.5 0.5 10.9477 0.5 11.5V12.5C0.5 13.0523 0.947715 13.5 1.5 13.5H22.5C23.0523 13.5 23.5 13.0523 23.5 12.5V11.5C23.5 10.9477 23.0523 10.5 22.5 10.5Z" fill="black"/>
<path d="M22.5 18.5H1.5C0.947715 18.5 0.5 18.9477 0.5 19.5V20.5C0.5 21.0523 0.947715 21.5 1.5 21.5H22.5C23.0523 21.5 23.5 21.0523 23.5 20.5V19.5C23.5 18.9477 23.0523 18.5 22.5 18.5Z" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 686 B

3
docs/src/components/Btn/style.scss
View File

@ -9,7 +9,6 @@
text-align: center;
line-height: 1;
text-decoration: none;
white-space: nowrap;
&--primary {
@ -46,6 +45,8 @@
}
&__icon {
transition: opacity 0.2s $ease;
&:first-child {
margin-right: 0.5rem;
}

27
docs/src/components/Icon/index.vue
View File

@ -1,3 +1,11 @@
<template>
<div :class="`icon icon--${size}`">
<svg>
<use :xlink:href="`${require('remixicon/fonts/remixicon.symbol.svg')}#ri-${name}`" />
</svg>
</div>
</template>
<script>
export default {
name: 'Icon',
@ -13,25 +21,6 @@ export default {
default: 'normal',
},
},
render(createElement) {
let svgHTML = ''
try {
svgHTML = require(`!html-loader!@/assets/icons/${this.name}.svg`)
} catch (e) {
// eslint-disable-next-line
console.warn(`Unable to load "${this.name}.svg" icon. Verify it exists in the icons directory.`, e)
}
return createElement(
'div',
{
class: `icon icon--${this.size}`,
domProps: {
innerHTML: svgHTML,
},
},
)
},
}
</script>

13
docs/src/components/Icon/style.scss
View File

@ -1,7 +1,16 @@
.icon {
display: inline-flex;
width: 1rem;
height: 1rem;
width: 1.25rem;
height: 1.25rem;
margin: 0 0.4rem;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
&::v-deep > svg {
width: 100%;

4
docs/src/components/PageNavigation/index.vue
View File

@ -3,7 +3,7 @@
<btn
class="page-navigation__previous"
type="secondary"
icon="arrow-left"
icon="arrow-left-line"
icon-position="before"
:to="previousPage.link"
v-if="previousPage"
@ -13,7 +13,7 @@
<btn
class="page-navigation__next"
type="secondary"
icon="arrow-right"
icon="arrow-right-line"
:to="nextPage.redirect || nextPage.link"
v-if="nextPage"
>

2
docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
View File

@ -153,7 +153,7 @@ export default {
<style lang="scss" scoped>
.divider {
width: 2px;
height: 1.5rem;
height: 1.25rem;
background-color: rgba($colorBlack, 0.1);
margin-left: 0.5rem;
margin-right: 0.75rem;

2
docs/src/docPages/overview/upgrade-guide.md
View File

@ -46,7 +46,7 @@ new Editor({
Paragraph,
Text,
// all your other extensions
]
],
})
```

13
docs/src/layouts/App/index.vue
View File

@ -16,6 +16,7 @@
<div class="app__menu">
<span class="app__menu-item">
<icon name="search-line" />
Search
<div class="app__search-docsearch" />
</span>
@ -28,14 +29,14 @@
@click="menuIsVisible = true"
v-if="!menuIsVisible"
>
<icon name="menu" />
<icon name="menu-fill" />
</button>
<button
class="app__close-icon"
@click="menuIsVisible = false"
v-if="menuIsVisible"
>
<icon name="close" />
<icon name="close-fill" />
</button>
</div>
<div class="app__mobile-menu" v-if="menuIsVisible">
@ -54,11 +55,13 @@
</main>
<portal :to="menuPortal">
<g-link class="app__menu-item" to="/installation">
Documentation
<g-link class="app__menu-item" to="/installation" v-if="$route.name === 'home'">
<icon name="book-3-line" />
<span>Documentation</span>
</g-link>
<g-link class="app__menu-item" to="https://github.com/ueberdosis/tiptap-next">
GitHub
<icon name="github-fill" />
<span>GitHub</span>
</g-link>
</portal>

9
docs/src/layouts/App/style.scss
View File

@ -46,7 +46,8 @@ $menuBreakPoint: 800px;
}
&__menu-item {
display: block;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
font-weight: 500;
@ -59,6 +60,12 @@ $menuBreakPoint: 800px;
margin-right: 0;
}
}
svg {
width: 1rem;
height: 1rem;
margin: 0 0.25rem;
}
}
&__content {

20
docs/src/pages/index.vue
View File

@ -9,12 +9,12 @@
tiptap gives you full control about every single aspect of your text editor experience. It’s customizable, comes with a ton of extensions, is open source, has an extensive documentation, and is simply a joy to use. Join our welcoming community and start building cool things!
</p>
<btn-wrapper>
<btn type="primary" icon="arrow-right" to="/installation">
<btn type="primary" icon="arrow-right-line" to="/installation">
Get Started
</btn>
<btn
type="secondary"
icon="github"
icon="github-fill"
icon-position="before"
to="https://github.com/ueberdosis/tiptap-next"
>
@ -38,13 +38,13 @@
It’s headless and comes without any CSS. You are in full control over markup, styling and behaviour.
</p>
<div>
<btn type="tertiary" icon="arrow-right" to="/guide/styling">
<btn type="tertiary" icon="arrow-right-line" to="/guide/styling">
Styling
</btn>
</div>
</feature-item>
<feature-item icon="file-copy-fill">
<feature-item icon="reactjs-fill">
<h3 class="is-h2">
Framework-agnostic
</h3>
@ -52,7 +52,7 @@
Out of the box, tiptap works with Vanilla JavaScript and Vue.js, but it’s also possible to use it in <g-link to="/installation/react">React</g-link>, <g-link to="/installation/svelte">Svelte</g-link> and others.
</p>
<div>
<btn type="tertiary" icon="arrow-right" to="/installation">
<btn type="tertiary" icon="arrow-right-line" to="/installation">
Installation
</btn>
</div>
@ -66,7 +66,7 @@
TypeScript helps to find bugs early and gives you a nice autocomplete for the API on top of the extensive human written documentation.
</p>
<div>
<btn type="tertiary" icon="arrow-right" to="/guide/typescript">
<btn type="tertiary" icon="arrow-right-line" to="/guide/typescript">
TypeScript
</btn>
</div>
@ -80,7 +80,7 @@
Real-time collaboration, syncing between different devices and working offline isn’t hard anymore. Keep everything in sync with the magic of <g-link to="https://github.com/yjs/yjs">Y.js</g-link>.
</p>
<div>
<btn type="tertiary" icon="arrow-right" to="/guide/collaborative-editing">
<btn type="tertiary" icon="arrow-right-line" to="/guide/collaborative-editing">
Collaborative editing
</btn>
</div>
@ -94,7 +94,7 @@
There’s so much content shared, so many people helping out in issues and a ton of community extensions, you’ll be surprised how much that all can help.
</p>
<div>
<btn type="tertiary" icon="arrow-right" to="https://github.com/ueberdosis/tiptap-next">
<btn type="tertiary" icon="arrow-right-line" to="https://github.com/ueberdosis/tiptap-next">
GitHub
</btn>
</div>
@ -133,7 +133,7 @@
&lt;/html&gt;</prism>
<!-- eslint-enable -->
<div>
<btn type="tertiary" icon="arrow-right" to="/installation">
<btn type="tertiary" icon="arrow-right-line" to="/installation">
Learn more
</btn>
</div>
@ -193,7 +193,7 @@
/> -->
</logo-list>
<div>
<btn type="tertiary" icon="arrow-right" to="https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D">
<btn type="tertiary" icon="arrow-right-line" to="https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D">
And many more
</btn>
</div>