create common styles for account forms
This commit is contained in:
Ilion Beyst
parent
e4e581b346
commit
579f16fc51
6 changed files with 78 additions and 82 deletions
|
|
@ -1,4 +1,6 @@
|
|||
<script lang="ts">
|
||||
import NavbarUserSection from "$lib/components/navbar/NavbarUserSection.svelte";
|
||||
|
||||
import "./style.css";
|
||||
</script>
|
||||
|
||||
|
|
@ -7,16 +9,13 @@
|
|||
<div class="navbar-main">
|
||||
<a href="/">PlanetWars</a>
|
||||
</div>
|
||||
<div class="navbar-user">
|
||||
<a class="navbar-href" href="login">Sign in</a>
|
||||
<a class="navbar-href" href="register">Sign up</a>
|
||||
</div>
|
||||
<NavbarUserSection />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../lib/variables.scss";
|
||||
@import "src/styles/variables.scss";
|
||||
|
||||
.outer-container {
|
||||
width: 100vw;
|
||||
|
|
@ -35,14 +34,6 @@
|
|||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.navbar-user a {
|
||||
font-size: 18px;
|
||||
color: #eee;
|
||||
font-family: Helvetica, sans-serif;
|
||||
padding: 4px 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-main {
|
||||
margin: auto 0;
|
||||
}
|
||||
|
|
@ -52,8 +43,4 @@
|
|||
color: #eee;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-user {
|
||||
margin: auto 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../lib/variables.scss";
|
||||
@import "src/styles/variables.scss";
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -35,14 +35,21 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{#if loggedIn()}
|
||||
you are logged in
|
||||
{/if}
|
||||
|
||||
<form on:submit|preventDefault={login}>
|
||||
<label for="username">Username</label>
|
||||
<input name="username" bind:value={username} />
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" bind:value={password} />
|
||||
<button type="submit">Log in</button>
|
||||
</form>
|
||||
<div class="page-card">
|
||||
<div class="page-card-content">
|
||||
<h1 class="page-card-header">Sign in</h1>
|
||||
<form class="account-form" on:submit|preventDefault={login}>
|
||||
<label for="username">Username</label>
|
||||
<input name="username" bind:value={username} />
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" bind:value={password} />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "src/styles/account_forms.scss";
|
||||
</style>
|
||||
|
|
@ -31,67 +31,16 @@
|
|||
<div class="page-card">
|
||||
<div class="page-card-content">
|
||||
<h1 class="page-card-header">Create account</h1>
|
||||
<form class="register-form" on:submit|preventDefault={onSubmit}>
|
||||
<form class="account-form" on:submit|preventDefault={onSubmit}>
|
||||
<label for="username">Username</label>
|
||||
<input name="username" bind:value={username} />
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" bind:value={password} />
|
||||
<button type="submit">Sign up</button>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.page-card {
|
||||
margin: 50px auto;
|
||||
width: 40%;
|
||||
max-width: 600px;
|
||||
border: 1px solid #b5b5b5;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.page-card-content {
|
||||
margin: 20px 50px;
|
||||
}
|
||||
|
||||
.page-card-header {
|
||||
padding-top: .5em;
|
||||
padding-bottom: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.register-form label {
|
||||
margin: 10px 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.register-form input {
|
||||
margin: 10px 5px;
|
||||
font-size: 1rem;
|
||||
// height: 2.5em;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #b5b5b5;
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
|
||||
.register-form button {
|
||||
background-color: lightgreen;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
font-size: 18pt;
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
margin-top: 16px;
|
||||
|
||||
}
|
||||
@import "src/styles/account_forms.scss";
|
||||
</style>
|
||||
52
web/pw-server/src/styles/account_forms.scss
Normal file
52
web/pw-server/src/styles/account_forms.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
.page-card {
|
||||
margin: 50px auto;
|
||||
width: 40%;
|
||||
max-width: 600px;
|
||||
border: 1px solid #b5b5b5;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.page-card-content {
|
||||
margin: 20px 50px;
|
||||
}
|
||||
|
||||
.page-card-header {
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.account-form {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.account-form label {
|
||||
margin: 10px 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.account-form input {
|
||||
margin: 10px 5px;
|
||||
font-size: 1rem;
|
||||
// height: 2.5em;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #b5b5b5;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.account-form button {
|
||||
background-color: lightgreen;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
font-size: 18pt;
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
margin-top: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
1
web/pw-server/src/styles/variables.scss
Normal file
1
web/pw-server/src/styles/variables.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
$bg-color: rgb(41, 41, 41);
|
||||
Loading…
Reference in a new issue