fix btn group

This commit is contained in:
Philipp Kühn 2021-02-05 10:00:14 +01:00
parent 6f608b0602
commit 6c6343c390
4 changed files with 42 additions and 7 deletions

View File

@ -4,7 +4,6 @@
justify-content: center;
border-radius: 12px;
font-weight: 700;
margin-left: 0.75rem;
padding: 0.8rem 1rem;
font-size: 1rem;
text-align: center;
@ -42,10 +41,6 @@
opacity: 0.5;
}
&:first-child {
margin-left: 0;
}
&__icon {
&:first-child {
margin-right: 0.5rem;

View File

@ -0,0 +1,13 @@
<template>
<div class="btn-wrapper">
<slot />
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" src="./style.scss"></style>

View File

@ -0,0 +1,25 @@
.btn-wrapper {
display: flex;
flex-direction: column;
@media (min-width: 600px) {
flex-direction: row;
}
> .btn {
margin-bottom: 0.75rem;
&:last-child {
margin-bottom: 0;
}
@media (min-width: 600px) {
margin-bottom: 0;
margin-right: 0.75rem;
&:last-child {
margin-right: 0;
}
}
}
}

View File

@ -8,7 +8,7 @@
<p class="is-large">
tiptap gives you full control about every single aspect of your text editor experience. Its 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! Its free.
</p>
<div>
<btn-wrapper>
<btn type="primary" icon="arrow-right" to="/overview/installation">
Get Started
</btn>
@ -20,7 +20,7 @@
>
View on GitHub
</btn>
</div>
</btn-wrapper>
</div>
</app-section>
@ -222,6 +222,7 @@ import LogoList from '@/components/LogoList'
import LogoItem from '@/components/LogoItem'
import Prism from '~/components/Prism'
import Btn from '~/components/Btn'
import BtnWrapper from '~/components/BtnWrapper'
export default {
components: {
@ -232,6 +233,7 @@ export default {
LogoItem,
Prism,
Btn,
BtnWrapper,
},
metaInfo() {