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

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>