settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: <Button border="false">

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/assets/css/colors.scss
View File

@ -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

31
client/src/components/Button.vue
View File

@ -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 {

9
client/src/components/CreateTeam.vue
View File

@ -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 {