fixed UIButtons

This commit is contained in:
Fedor Katurov 2022-11-10 16:57:58 +06:00
parent 1394a17d82
commit 6c40acc1f9
3 changed files with 14 additions and 8 deletions

View file

@ -19,7 +19,7 @@
<UiButtonGroup :class="$style.buttons"> <UiButtonGroup :class="$style.buttons">
<UiActionButton href="/contacts" variant="primary"> <UiActionButton href="/contacts" variant="primary">
Contact me Contact&nbsp;me
<template v-slot:suffix> <template v-slot:suffix>
<IconsSend width="22" height="22" fill="currentColor" /> <IconsSend width="22" height="22" fill="currentColor" />
</template> </template>
@ -30,7 +30,7 @@
target="_blank" target="_blank"
variant="outline" variant="outline"
> >
Visit my Github Visit&nbsp;my&nbsp;Github
<template v-slot:suffix> <template v-slot:suffix>
<IconsGithub width="22" height="22" fill="currentColor" /> <IconsGithub width="22" height="22" fill="currentColor" />
</template> </template>
@ -91,6 +91,7 @@
@include desktop { @include desktop {
margin-top: 20px; margin-top: 20px;
justify-content: center;
} }
} }
</style> </style>

View file

@ -24,14 +24,14 @@
<UiButtonGroup :class="$style.buttons"> <UiButtonGroup :class="$style.buttons">
<UiActionButton href="/contacts" variant="primary"> <UiActionButton href="/contacts" variant="primary">
Contact me Contact&nbsp;me
<template v-slot:suffix> <template v-slot:suffix>
<IconsSend width="22" height="22" fill="currentColor" /> <IconsSend width="22" height="22" fill="currentColor" />
</template> </template>
</UiActionButton> </UiActionButton>
<UiActionButton href="/about" variant="outline"> <UiActionButton href="/about" variant="outline">
View Portfolio View&nbsp;Portfolio
<template v-slot:suffix> <template v-slot:suffix>
<IconsBook width="22" height="22" fill="currentColor" /> <IconsBook width="22" height="22" fill="currentColor" />
</template> </template>
@ -119,7 +119,8 @@
.buttons { .buttons {
margin-top: 40px; margin-top: 40px;
@include desktop { @include tablet {
justify-content: center;
margin-top: 20px; margin-top: 20px;
} }
} }

View file

@ -7,9 +7,13 @@
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" module> <style lang="scss" module>
@import "@/assets/css/main.scss";
.buttons { .buttons {
& > * { display: grid;
margin: 0 15px 15px 0; gap: 16px;
} align-items: flex-start;
justify-content: flex-start;
grid-template-columns: repeat(auto-fit, minmax(180px, auto));
} }
</style> </style>