ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
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> <template>
<div class="feature-item text"> <div class="feature-item">
<slot /> <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> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
icon: {
type: String,
default: null,
},
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.feature-item { .feature-item {
-webkit-column-break-inside: avoid;
break-inside: avoid-column; break-inside: avoid-column;
background-color: rgba($colorBlack, 0.03); page-break-inside: avoid;
border-radius: 0.75rem; padding-bottom: 1rem;
padding: 1.5rem;
margin-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> </style>

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

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