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; justify-content: center;
border-radius: 12px; border-radius: 12px;
font-weight: 700; font-weight: 700;
margin-left: 0.75rem;
padding: 0.8rem 1rem; padding: 0.8rem 1rem;
font-size: 1rem; font-size: 1rem;
text-align: center; text-align: center;
@@ -42,10 +41,6 @@
opacity: 0.5; opacity: 0.5;
} }
&:first-child {
margin-left: 0;
}
&__icon { &__icon {
&:first-child { &:first-child {
margin-right: 0.5rem; 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"> <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. 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> </p>
<div> <btn-wrapper>
<btn type="primary" icon="arrow-right" to="/overview/installation"> <btn type="primary" icon="arrow-right" to="/overview/installation">
Get Started Get Started
</btn> </btn>
@@ -20,7 +20,7 @@
> >
View on GitHub View on GitHub
</btn> </btn>
</div> </btn-wrapper>
</div> </div>
</app-section> </app-section>
@@ -222,6 +222,7 @@ import LogoList from '@/components/LogoList'
import LogoItem from '@/components/LogoItem' import LogoItem from '@/components/LogoItem'
import Prism from '~/components/Prism' import Prism from '~/components/Prism'
import Btn from '~/components/Btn' import Btn from '~/components/Btn'
import BtnWrapper from '~/components/BtnWrapper'
export default { export default {
components: { components: {
@@ -232,6 +233,7 @@ export default {
LogoItem, LogoItem,
Prism, Prism,
Btn, Btn,
BtnWrapper,
}, },
metaInfo() { metaInfo() {