mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-08-06 13:38:49 +08:00
fix btn group
This commit is contained in:
parent
6f608b0602
commit
6c6343c390
@ -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;
|
||||
|
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">
|
||||
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>
|
||||
<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() {
|
||||
|
Loading…
Reference in New Issue
Block a user