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

feat: add components to index page (WIP)

Browse Source
This commit is contained in:
Settel 2022-07-26 08:38:44 +02:00
parent e6fa6d1e83
commit db24043f87
5 changed files with 166 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,3 +10,22 @@ $text-error-color: #ff8000;
$background-overlay-color: rgba(40, 40, 56, 90%);
// Box
$box-primary-background-color: $background-primary-color;
$box-primary-text-color: $text-primary-color;
$box-primary-border: 1px solid #e0e0e0;
// Button
$button-background-color: #00a0e0;
$button-text-color: #304048;
$button-border: 4px solid #007098;
$button-hover-background-color: $button-background-color;
$button-hover-text-color: #ffffff;
$button-hover-border: $button-border;
$button-disabled-background-color: #006080;
$button-disabled-text-color: #102028;
$button-disabled-border: 4px solid #004060;

63
client/src/components/Button.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<button class="button__button" :class="{ disabled, border }">
<slot />
</button>
</template>
<script setup>
defineProps({
disabled: {
type: Boolean,
default: false,
},
border: {
type: Boolean,
default: true,
},
})
</script>
<style lang="scss">
@import '~/assets/css/components';
.button {
&__button {
display: inline-block;
margin: auto;
padding: 4px 24px;
background-color: inherit;
color: $text-secondary-color;
text-align: center;
font-family: $secondary-font;
font-weight: bold;
font-size: 24px;
border: none;
cursor: pointer;
&:hover {
color: $text-secondary-hover-color;
}
&.border {
background-color: $button-background-color;
color: $button-text-color;
border: $button-border;
border-radius: 8px;
&:hover {
border: $button-hover-border;
background-color: $button-hover-background-color;
color: $button-hover-text-color;
}
}
&.disabled,
&:hover.disabled {
cursor: default;
background-color: $button-disabled-background-color;
border: $button-disabled-border;
color: $button-disabled-text-color;
}
}
}
</style>

15
client/src/components/LoginBox.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div class="login-box__container">
<Button>123456</Button>
<Button>646162</Button>
</div>
</template>
<style lang="scss">
.login-box {
&__container {
display: flex;
justify-content: center;
}
}
</style>

64
client/src/components/TitleBox.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<div class="titlebox__container">
<div class="titlebox__titleborderbox2" />
<div class="titlebox__titleborderbox3" />
<div class="titlebox__titleborderbox1">
<h1 class="titlebox__title">
Know Your Teammates!
</h1>
</div>
</div>
</template>
<style lang="scss">
@import '~/assets/css/components';
.titlebox {
&__container {
position: relative;
padding: 80px 0;
display: flex;
justify-content: center;
}
&__titleborderbox1,
&__titleborderbox2,
&__titleborderbox3 {
border: $box-primary-border;
border-radius: 16px;
background-color: $box-primary-background-color;
}
&__titleborderbox1 {
display: flex;
width: 600px;
height: 200px;
justify-content: center;
align-items: center;
z-index: 3;
}
&__titleborderbox2 {
position: absolute;
top: 120px;
width: 720px;
height: 120px;
z-index: 2;
}
&__titleborderbox3 {
position: absolute;
top: 160px;
width: 760px;
height: 40px;
z-index: 1;
}
&__title {
font-size: 64px;
font-family: $primary-font;
color: $box-primary-text-color;
text-align: center;
}
}
</style>

7
client/src/pages/index.vue
View File

@ -1,14 +1,17 @@
<template>
<div>
yay
<TitleBox />
<LoginBox />
</div>
</template>
<style lang="scss">
@import '~/assets/css/colors';
@import '~/assets/css/components';
body {
background-color: $background-primary-color;
color: $text-primary-color;
margin: 0;
}
</style>