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

docs: add icons to features

Browse Source
This commit is contained in:
Philipp Kühn 2021-04-18 22:54:53 +02:00
parent aa002a012b
commit d860220f4d
2 changed files with 41 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/src/components/FeatureItem/index.vue
View File

@ -1,22 +1,52 @@
<template>
<div class="feature-item text">
<slot />
<div class="feature-item">
<div class="feature-item__inner">
<svg class="feature-item__icon" v-if="icon">
<use :xlink:href="require('remixicon/fonts/remixicon.symbol.svg') + `#ri-${icon}`" />
</svg>
<div class="feature-item__content text">
<slot />
</div>
</div>
</div>
</template>
<script>
export default {
props: {
icon: {
type: String,
default: null,
},
},
}
</script>
<style lang="scss" scoped>
.feature-item {
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
background-color: rgba($colorBlack, 0.03);
border-radius: 0.75rem;
padding: 1.5rem;
margin-bottom: 1rem;
page-break-inside: avoid;
padding-bottom: 1rem;
&__inner {
background-color: rgba($colorBlack, 0.03);
border-radius: 0.75rem;
padding: 1.5rem;
transition: box-shadow 0.2s ease;
&:hover {
box-shadow: 0 0 0 0.25rem rgba($colorBlack, 0.03);
}
}
&__icon {
width: 3rem;
height: 3rem;
margin-bottom: 1rem;
background-color: rgba($colorBlack, 0.05);
padding: 0.5rem;
border-radius: 50%;
}
}
</style>

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

@ -30,7 +30,7 @@
<app-section>
<feature-list>
<feature-item>
<feature-item icon="contrast-fill">
<h3 class="is-h2">
Headless
</h3>
@ -44,7 +44,7 @@
</div>
</feature-item>
<feature-item>
<feature-item icon="file-copy-fill">
<h3 class="is-h2">
Framework-agnostic
</h3>
@ -58,7 +58,7 @@
</div>
</feature-item>
<feature-item>
<feature-item icon="terminal-box-fill">
<h3 class="is-h2">
TypeScript
</h3>
@ -72,7 +72,7 @@
</div>
</feature-item>
<feature-item>
<feature-item icon="cursor-fill">
<h3 class="is-h2">
Collaborative
</h3>
@ -86,7 +86,7 @@
</div>
</feature-item>
<feature-item>
<feature-item icon="chat-smile-2-fill">
<h3 class="is-h2">
Community
</h3>