feat: <Button border="false">
This commit is contained in:
parent
257a67b21f
commit
70ddf88174
@ -1,6 +1,7 @@
|
||||
$primary-background-color: #282838;
|
||||
$primary-text-color: #ffffff;
|
||||
$error-text-color: #ff8000;
|
||||
$backdrop-color: rgba(40, 40, 56, 90%);
|
||||
|
||||
|
||||
// Text
|
||||
|
@ -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,
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user