fix btn group
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
13
docs/src/components/BtnWrapper/index.vue
Normal file
13
docs/src/components/BtnWrapper/index.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div class="btn-wrapper">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" src="./style.scss"></style>
|
||||||
25
docs/src/components/BtnWrapper/style.scss
Normal file
25
docs/src/components/BtnWrapper/style.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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. 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! It’s free.
|
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! It’s 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() {
|
||||||
|
|||||||
Reference in New Issue
Block a user