SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: migrate Button component

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-20 00:35:05 +01:00
parent 3ba5e0aa2b
commit 5cf33f6dfa
2 changed files with 72 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/Button.vue
View file

@ -1,57 +0,0 @@
<template>
<a
class="btn"
:href="href"
:download="href.slice(href.lastIndexOf('/') + 1)"
v-if="download"
>
<slot></slot>
</a>
<a class="btn" :href="href" v-else><slot></slot></a>
</template>
<script>
export default {
props: {
href: String,
download: Boolean,
},
};
</script>
<style lang="scss">
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
.btn {
margin: 0.5em 0;
padding: 0.5em 1em;
position: relative;
top: 0;
border-radius: 0.25em;
transition: all 0.1s ease-out;
font-weight: bold;
background-color: $bg-color-light;
text-decoration: none;
text-align: center;
@include button($bg-color-light);
@include theme(dark) {
@include button($bg-color-dark);
}
&:hover {
top: -0.25em;
}
&:active {
top: 0.25em;
}
}
</style>

72
src/components/RefButton.vue Normal file
View file

@ -0,0 +1,72 @@
<script setup lang="ts">
interface Props {
href?: string;
download?: boolean | any;
}
defineProps<Props>();
</script>
<template>
<a class="btn" :href="href" :[download]="download">
<slot></slot>
</a>
</template>
<style lang="scss">
.btn {
position: relative;
top: 0;
background-color: var(--color-button);
font-weight: 700;
text-decoration: none;
text-align: center;
margin: 0.5rem 0;
border-radius: 0.25rem;
padding: 0.5rem 1rem;
box-shadow: 0 0.5rem 0 0 var(--color-button-box-shadow);
transition: all 0.1s ease-out;
&:hover {
cursor: pointer;
top: -0.25rem;
box-shadow: 0 0.75rem 0 0 var(--color-button-box-shadow);
}
&:active {
top: 0.25rem;
box-shadow: 0 0.25rem 0 0 var(--color-button-box-shadow);
}
&.positive {
background-color: #259410;
box-shadow: 0 0.5rem 0 0 #1a660b;
&:hover {
box-shadow: 0 0.75rem 0 0 #1a660b;
}
&:active {
box-shadow: 0 0.25rem 0 0 #1a660b;
}
}
&.negative {
background-color: #ae1414;
box-shadow: 0 0.5rem 0 0 #800f0f;
&:hover {
box-shadow: 0 0.75rem 0 0 #800f0f;
}
&:active {
box-shadow: 0 0.25rem 0 0 #800f0f;
}
}
}
</style>