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)" :download="href.slice(href.lastIndexOf('/') + 1)"
v-if="download" v-if="download"
> >
<slot></slot> ⬇️ <slot></slot>
</a> </a>
<a class="btn" :href="href" v-else> <slot></slot> ⬇️ </a> <a class="btn" :href="href" v-else><slot></slot></a>
</template> </template>
<script> <script>
@ -30,23 +30,24 @@ export default {
top: 0; top: 0;
border-radius: 0.25em; 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; 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-decoration: none;
text-align: center; text-align: center;
&:hover { &:hover {
top: -0.25em; 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 { &:active {
top: 0.25em; 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> </style>