feat: <Button border="false">

This commit is contained in:
Settel 2022-07-22 22:45:14 +02:00
parent 257a67b21f
commit 70ddf88174
3 changed files with 35 additions and 12 deletions

View File

@ -1,6 +1,7 @@
$primary-background-color: #282838;
$primary-text-color: #ffffff;
$error-text-color: #ff8000;
$backdrop-color: rgba(40, 40, 56, 90%);
// Text

View File

@ -1,12 +1,21 @@
<template>
<button class="button" :class="{ disabled }" @click="click">
<button class="button" :class="{ disabled, border }" @click="click">
<slot />
</button>
</template>
<script>
export default {
props: ['disabled'],
props: {
disabled: {
type: Boolean,
default: false,
},
border: {
type: Boolean,
default: true,
},
},
methods: {
click() {
this.$emit('click')
@ -22,20 +31,30 @@ export default {
display: inline-block;
margin: auto;
padding: 4px 24px;
border: 4px solid $button-border-color;
border-radius: 8px;
background-color: $button-background-color;
color: $button-text-color;
background-color: inherit;
color: $text-secondary-text-color;
text-align: center;
font-family: $secondary-font;
font-weight: bold;
font-size: 24px;
border: none;
cursor: pointer;
&:hover {
border-color: $button-hover-border-color;
background-color: $button-hover-background-color;
color: $button-hover-text-color;
color: $text-secondary-hover-text-color;
}
&.border {
background-color: $button-background-color;
color: $button-text-color;
border: 4px solid $button-border-color;
border-radius: 8px;
&:hover {
border-color: $button-hover-border-color;
background-color: $button-hover-background-color;
color: $button-hover-text-color;
}
}
&.disabled,

View File

@ -1,8 +1,11 @@
<template>
<div class="create-team">
<div v-if="!showModal" class="create-team__button" @click="openModal">
<Button v-if="!showModal" :border="false" @click="openModal">
{{ $t('create-team') }}
</div>
</Button>
<!-- <div v-if="!showModal" class="create-team__button" @click="openModal">
{{ $t('create-team') }}
</div> -->
<template v-if="showModal">
<div class="create-team__backdrop" />
<div class="create-team__modal">
@ -114,7 +117,7 @@ export default {
width: 100%;
height: 100%;
z-index: 15;
background-color: rgba(36, 24, 72, 0.8);
background-color: $backdrop-color;
}
&__button {