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

refactor: darken box-shadow instead of lighten background-color

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-07 21:33:11 +01:00
parent 0c6ed999a4
commit d570bdc678
1 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/Button.vue
View file

@ -5,9 +5,9 @@
:download="href.slice(href.lastIndexOf('/') + 1)"
v-if="download"
>
<slot></slot> ⬇️
<slot></slot>
</a>
<a class="btn" :href="href" v-else> <slot></slot> ⬇️ </a>
<a class="btn" :href="href" v-else><slot></slot></a>
</template>
<script>
@ -30,23 +30,24 @@ export default {
top: 0;
border-radius: 0.25em;
box-shadow: 0 0.5em 0 0 $bg-color-dark;
box-shadow: 0 0.5em 0 0 darken($bg-color-dark, 10%);
transition: all 0.1s ease-out;
background-color: lighten($bg-color-dark, 5%);
font-weight: bold;
background-color: $bg-color-dark;
text-decoration: none;
text-align: center;
&:hover {
top: -0.25em;
box-shadow: 0 0.75em 0 0 $bg-color-dark;
box-shadow: 0 0.75em 0 0 darken($bg-color-dark, 10%);
}
&:active {
top: 0.25em;
box-shadow: 0 0.25em 0 0 $bg-color-dark;
box-shadow: 0 0.25em 0 0 darken($bg-color-dark, 10%);
}
}
</style>