KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Updated seasonedbutton to not have a wrapping div.

Browse Source
This commit is contained in:
KevinMidboe
2020-04-09 19:55:57 +02:00
parent dc0c435163
commit a31bfb6b39
1 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ui/SeasonedButton.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="seasoned-button"> <button type="button" @click="emit('click')" :class="{ active: active }">
<button type="button" class="button" @click="emit('click')" :class="{ active: active }"><slot></slot></button> <slot></slot>
</div> </button>
</template> </template>
<script> <script>
@@ -9,9 +9,11 @@
export default { export default {
name: 'seasonedButton', name: 'seasonedButton',
props: { props: {
required: false, active: {
active: Boolean, type: Boolean,
default: false default: false,
required: false
}
}, },
methods: { methods: {
emit() { emit() {
@@ -25,26 +27,26 @@ export default {
@import "./src/scss/variables"; @import "./src/scss/variables";
@import "./src/scss/media-queries"; @import "./src/scss/media-queries";
.button{ button {
display: inline-block; display: inline-block;
border: 1px solid $text-color; border: 1px solid $text-color;
text-transform: uppercase;
font-weight: 300;
font-size: 11px; font-size: 11px;
line-height: 2; font-weight: 300;
height: 45px; line-height: 1.5;
letter-spacing: 0.5px; letter-spacing: 0.5px;
padding: 5px 20px 4px 20px; text-transform: uppercase;
min-height: 45px;
padding: 5px 10px 4px 10px;
margin: 0; margin: 0;
margin-right: 0.3rem; margin-right: 0.3rem;
cursor: pointer;
color: $text-color; color: $text-color;
background: $background-color-secondary; background: $background-color-secondary;
cursor: pointer;
outline: none; outline: none;
transition: background 0.5s ease, color 0.5s ease, border-color .5s ease; transition: background 0.5s ease, color 0.5s ease, border-color .5s ease;
@include tablet-min{ @include desktop {
font-size: 12px; font-size: 0.8rem;
padding: 6px 20px 5px 20px; padding: 6px 20px 5px 20px;
} }