{WIP} Bulma => Knacss (signin/signup)
This commit is contained in:
parent
62607e2a83
commit
5b0f5a69c4
10 changed files with 167 additions and 136 deletions
5
sass/bulma.scss
vendored
5
sass/bulma.scss
vendored
|
|
@ -1,5 +0,0 @@
|
|||
@use '../node_modules/bulma/bulma.sass';
|
||||
|
||||
.modal-content {
|
||||
width: 80%;
|
||||
}
|
||||
28
sass/connexion.scss
Normal file
28
sass/connexion.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.connexion,
|
||||
.inscription {
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
|
||||
color: #4a4a4a;
|
||||
display: block;
|
||||
padding: 1.25rem;
|
||||
width: calc(100% - 2rem);
|
||||
margin: auto;
|
||||
|
||||
@include respond-to("small-up") {
|
||||
width: 65%;
|
||||
}
|
||||
@include respond-to("medium-up") {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #485fc7;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: #3e56c4;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
sass/forms.scss
Normal file
51
sass/forms.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.field {
|
||||
padding-top: .6rem;
|
||||
label {
|
||||
font-weight: 800;
|
||||
}
|
||||
input {
|
||||
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dbdbdb !important;
|
||||
color: #363636;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
padding-bottom: calc(0.5em - 1px);
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
padding-top: calc(0.5em - 1px);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border-width: 1px;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&.is-danger {
|
||||
background-color: #f14668;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: #f03a5f;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-link {
|
||||
background-color: #485fc7;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: #3e56c4;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
html,
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: calc(100vh - 3.25rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 3.25rem;
|
||||
|
|
|
|||
|
|
@ -27,4 +27,6 @@
|
|||
// SPÉCIFIQUE AU SITE
|
||||
@import './global';
|
||||
@import './navbar';
|
||||
@import './forms';
|
||||
@import './home';
|
||||
@import './connexion';
|
||||
|
|
@ -23,10 +23,6 @@
|
|||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
@include respond-to("medium-up") {
|
||||
// display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 1.75rem;
|
||||
}
|
||||
|
|
@ -296,30 +292,5 @@
|
|||
&:last-child {
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
padding-bottom: calc(0.5em - 1px);
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
padding-top: calc(0.5em - 1px);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border-width: 1px;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&.is-danger {
|
||||
background-color: #f14668;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.is-link {
|
||||
background-color: #485fc7;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -166,9 +166,9 @@
|
|||
</div>
|
||||
<% } %>
|
||||
</main> -->
|
||||
<main class="layout-maxed">
|
||||
|
||||
<%- include(viewname) %>
|
||||
</main>
|
||||
|
||||
<footer class="footer layout-hero">
|
||||
<p>
|
||||
<strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>.
|
||||
|
|
|
|||
|
|
@ -1,32 +1,24 @@
|
|||
<div class="container">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-10-mobile is-offset-1-mobile is-8-tablet is-offset-2-tablet is-6-desktop is-offset-3-desktop is-4-widescreen is-offset-4-widescreen">
|
||||
<form class="box" method="POST">
|
||||
<div class="has-text-centered">
|
||||
<img class="mb-4" src="/img/logo.png" alt="DarKou">
|
||||
<div class="connexion">
|
||||
<form method="POST">
|
||||
<div class="text-center">
|
||||
<img src="/img/logo.png" alt="DarKou">
|
||||
</div>
|
||||
<div class="is-size-3">
|
||||
<h2>
|
||||
Connexion
|
||||
</h2>
|
||||
<div class="field">
|
||||
<label for="email">Adresse e-mail</label>
|
||||
<input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="email">Adresse e-mail</label>
|
||||
<div class="control">
|
||||
<input class="input" type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="password">Mot de passe</label>
|
||||
<div class="control">
|
||||
<input class="input" type="password" name="password" id="password" placeholder="********">
|
||||
</div>
|
||||
<label for="password">Mot de passe</label>
|
||||
<input type="password" name="password" id="password" placeholder="********">
|
||||
</div>
|
||||
|
||||
<div class="has-text-right mb-3">
|
||||
<div class="text-right mt-10">
|
||||
<p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button class="button is-link">Connexion</button>
|
||||
<button type="submit" class="button">Connexion</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
<main class="layout-maxed">
|
||||
<div class="header layout-hero"></div>
|
||||
<h1>
|
||||
My Music Library
|
||||
|
|
@ -29,3 +30,4 @@
|
|||
<li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss</a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS</a>.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</main>
|
||||
|
|
@ -1,38 +1,28 @@
|
|||
<div class="container">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-10-mobile is-offset-1-mobile is-8-tablet is-offset-2-tablet is-6-desktop is-offset-3-desktop is-4-widescreen is-offset-4-widescreen">
|
||||
<form class="box" method="POST">
|
||||
<div class="has-text-centered">
|
||||
<img class="mb-4" src="/img/logo.png" alt="DarKou">
|
||||
<div class="connexion">
|
||||
<form method="POST">
|
||||
<div class="text-center">
|
||||
<img src="/img/logo.png" alt="DarKou">
|
||||
</div>
|
||||
<div class="is-size-3">
|
||||
<h2>
|
||||
Inscription
|
||||
</h2>
|
||||
<div class="field">
|
||||
<label for="email">Nom d'utilisateur</label>
|
||||
<input type="text" name="username" id="username" placeholder="ex : darkou">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="email">Nom d'utilisateur</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" name="username" id="username" placeholder="ex : darkou">
|
||||
</div>
|
||||
<label for="email">Adresse e-mail</label>
|
||||
<input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="email">Adresse e-mail</label>
|
||||
<div class="control">
|
||||
<input class="input" type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="password">Mot de passe</label>
|
||||
<div class="control">
|
||||
<input class="input" type="password" name="password" id="password" placeholder="********">
|
||||
</div>
|
||||
<label for="password">Mot de passe</label>
|
||||
<input type="password" name="password" id="password" placeholder="********">
|
||||
</div>
|
||||
|
||||
<div class="has-text-right mb-3">
|
||||
<div class="text-right mt-10">
|
||||
<p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button class="button is-link">Inscription</button>
|
||||
<button type="submit" class="button">Inscription</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue