Commit 8458ca5e authored by berumuron's avatar berumuron
Browse files

Design forms

parent c505b75a
......@@ -74,6 +74,94 @@ a {
color: var(--secondary-color);
}
/* Forms */
form {
max-width: 500px;
margin-bottom: 5rem;
}
form .form-group {
margin-bottom: 1rem;
}
form .form-group.form-group-actions {
display: flex;
margin-bottom: 1rem;
flex-direction: row-reverse;
align-items: baseline;
justify-content: space-between;
}
form label {
display: block;
margin-bottom: .25rem;
padding-left: .5rem;
}
form .form-group.form-group-radios label {
display: inline-block;
margin-right: 1rem;
padding-left: 0;
}
form input[type="text"],
form input[type="password"],
form input[type="date"],
form textarea {
display: block;
width: 100%;
height: 2.5rem;
padding: .5rem;
color: var(--main-color);
font-size: 1rem;
line-height: 1.5rem;
font-family: inherit;
background-color: white;
border: 1px solid var(--main-color);
border-radius: .25rem;
transition: box-shadow .2s ease-out;
}
form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="date"]:focus,
form textarea:focus {
box-shadow: 0 0 0 2px var(--secondary-color);
}
form textarea {
min-height: 7rem;
}
form button[type="submit"] {
vertical-align: middle;
display: inline-block;
max-width: 100%;
margin-right: .25rem;
padding: .25rem 1.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--contrast-color);
font-size: 1.1rem;
line-height: 1.5rem;
background-color: var(--secondary-color);
border: 1px solid var(--main-color);
border-radius: .25rem;
transition: background-color .2s ease-out;
}
form button[type="submit"]:hover,
form button[type="submit"]:focus {
background-color: var(--main-color);
}
/* Containers */
.container {
max-width: 1200px;
......
......@@ -13,15 +13,15 @@
<div class="form-group">
<label for="title">Titre</label>
<input type="text" name="title" id="title" autofocus />
<input type="text" name="title" id="title" required autofocus />
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" name="date" id="date" />
<input type="date" name="date" id="date" required />
</div>
<div class="form-group">
<div class="form-group form-group-radios">
<input type="radio" name="is_private" id="is_private" value="yes" checked />
<label for="is_private">Privé</label>
......@@ -30,7 +30,7 @@
</div>
<div class="form-group">
<label for="description">Description</label>
<label for="description">Description <span class="text-muted">(facultatif)</span></label>
<textarea name="description" id="description"></textarea>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment