feat: <Button border="false">
This commit is contained in:
parent
257a67b21f
commit
70ddf88174
@ -1,6 +1,7 @@
|
|||||||
$primary-background-color: #282838;
|
$primary-background-color: #282838;
|
||||||
$primary-text-color: #ffffff;
|
$primary-text-color: #ffffff;
|
||||||
$error-text-color: #ff8000;
|
$error-text-color: #ff8000;
|
||||||
|
$backdrop-color: rgba(40, 40, 56, 90%);
|
||||||
|
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
|
@ -1,12 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<button class="button" :class="{ disabled }" @click="click">
|
<button class="button" :class="{ disabled, border }" @click="click">
|
||||||
<slot />
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ['disabled'],
|
props: {
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
click() {
|
click() {
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
@ -22,21 +31,31 @@ export default {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 4px 24px;
|
padding: 4px 24px;
|
||||||
border: 4px solid $button-border-color;
|
background-color: inherit;
|
||||||
border-radius: 8px;
|
color: $text-secondary-text-color;
|
||||||
background-color: $button-background-color;
|
|
||||||
color: $button-text-color;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: $secondary-font;
|
font-family: $secondary-font;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
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 {
|
&:hover {
|
||||||
border-color: $button-hover-border-color;
|
border-color: $button-hover-border-color;
|
||||||
background-color: $button-hover-background-color;
|
background-color: $button-hover-background-color;
|
||||||
color: $button-hover-text-color;
|
color: $button-hover-text-color;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&:hover.disabled {
|
&:hover.disabled {
|
||||||
|
@ -1,8 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="create-team">
|
<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') }}
|
{{ $t('create-team') }}
|
||||||
</div>
|
</Button>
|
||||||
|
<!-- <div v-if="!showModal" class="create-team__button" @click="openModal">
|
||||||
|
{{ $t('create-team') }}
|
||||||
|
</div> -->
|
||||||
<template v-if="showModal">
|
<template v-if="showModal">
|
||||||
<div class="create-team__backdrop" />
|
<div class="create-team__backdrop" />
|
||||||
<div class="create-team__modal">
|
<div class="create-team__modal">
|
||||||
@ -114,7 +117,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 15;
|
z-index: 15;
|
||||||
background-color: rgba(36, 24, 72, 0.8);
|
background-color: $backdrop-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__button {
|
&__button {
|
||||||
|
Loading…
Reference in New Issue
Block a user