cominfra
/
www-adhesion.a-lec.org
8
0
Fork 0
Code Issues Pull Requests Activity

Passage en flex

This commit is contained in:
Adrien Bourmault 2022-05-05 15:21:31 +02:00
parent 53c49e129e
commit d05403f641
No known key found for this signature in database
GPG Key ID: 6EB408FE0ACEC664
2 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.php
View File

@ -95,9 +95,17 @@
echo "<input class=\"renseignements\" type=\"text\" id=\"prenom\" name=\"prenom\" required/>"; echo "<input class=\"renseignements\" type=\"text\" id=\"prenom\" name=\"prenom\" required/>";
echo "</div>"; echo "</div>";
echo "<div class=\"formline\">"; echo "<div class=\"formline\">";
echo "<label class=\"labels\" for=\"adresse\">Adresse postale</label>"; echo "<label class=\"labels\" for=\"adresse\">Adresse</label>";
echo "<input class=\"renseignements\" type=\"text\" id=\"adresse\" name=\"adresse\" required/>"; echo "<input class=\"renseignements\" type=\"text\" id=\"adresse\" name=\"adresse\" required/>";
echo "</div>"; echo "</div>";
echo "<div class=\"formline\">";
echo "<label class=\"labels\" for=\"codepostal\">Code postal</label>";
echo "<input class=\"renseignements\" type=\"number\" id=\"codepostal\" name=\"codepostal\" required/>";
echo "</div>";
echo "<div class=\"formline\">";
echo "<label class=\"labels\" for=\"ville\">Ville</label>";
echo "<input class=\"renseignements\" type=\"text\" id=\"ville\" name=\"ville\" required/>";
echo "</div>";
echo "<div class=\"formline\">"; echo "<div class=\"formline\">";
echo "<label class=\"labels\" for=\"mail\">Courriel<b>actuel</b></label>"; echo "<label class=\"labels\" for=\"mail\">Courriel<b>actuel</b></label>";
echo "<input class=\"renseignements\" type=\"email\" id=\"mail\" name=\"mail\" required/>"; echo "<input class=\"renseignements\" type=\"email\" id=\"mail\" name=\"mail\" required/>";

42
styles.css
View File

@ -610,8 +610,24 @@ h1,h2,h3,h4,h5,h6 {
.formbox { .formbox {
display: flex; display: flex;
flex-flow: row wrap; flex-direction: column;
align-content: flex-start; text-justify: none;
}
.formline {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
}
.labels {
flex-basis: 50%;
}
.renseignements, .mode, .captcha_inputs, .mode_radio {
flex-basis: 50%;
padding: 5px;
} }
.renseignements { .renseignements {
@ -621,6 +637,14 @@ h1,h2,h3,h4,h5,h6 {
color: black; color: black;
} }
.captcha_inputs {
all: revert;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
.renseignements:focus { .renseignements:focus {
border-bottom: 2px solid var(--a-lec_blue); border-bottom: 2px solid var(--a-lec_blue);
border-radius: 3px; border-radius: 3px;
@ -634,6 +658,7 @@ h1,h2,h3,h4,h5,h6 {
font-weight: bold; font-weight: bold;
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 5px;
} }
.validation:focus { .validation:focus {
@ -644,13 +669,6 @@ h1,h2,h3,h4,h5,h6 {
box-shadow: none; box-shadow: none;
} }
.inputs img {
all: unset;
margin-top: 20px;
margin-left: 10px;
width: 30vh;
}
input[type=radio] { input[type=radio] {
all: revert; all: revert;
} }
@ -675,12 +693,6 @@ input[type=checkbox] {
.mode_radio span { .mode_radio span {
display: block; display: block;
} }
form {
margin-right: auto;
margin-left: auto;
width: 50%;
}
} }