kazhnuz/moineau
1
0
Fork 0
Code Issues 3 Pull requests Releases 2 Wiki Activity

feat: ajout des champs de formulaire

Browse source
This commit is contained in:
Kazhnuz 2024-10-05 16:57:16 +02:00
parent 6874f444b4
commit 950c395a19
2 changed files with 113 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
exemples/exemples.md
View file

@ -43,4 +43,37 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut en
###### Titre H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat.
## Input
Les différents types d'input ont des styles
<form>
<label for="text">Champ de texte :</label>
<input type="text" id="text" name="text" />
<div><label for="checkbox">Champ de checkbox :</label>
<input type="checkbox" id="checkbox" name="checkbox" /></div>
<label for="color">Champ de couleur :</label>
<input type="color" id="color" name="color" />
<label for="date">Champ de date :</label>
<input type="date" id="date" name="date" />
<label for="time">Champ d'heure :</label>
<input type="time" id="time" name="time" />
<label for="datetime-local">Champ de date et heure :</label>
<input type="datetime-local" id="datetime-local" name="datetime-local" />
<label for="email">Champ de mail :</label>
<input type="email" id="email" name="email" />
<label for="tel">Champ de tel :</label>
<input type="tel" id="tel" name="tel" />
<label for="file">Champ de fichier :</label>
<input type="file" id="file" name="file" />
<label for="number">Champ de nombre :</label>
<input type="number" id="number" name="number" />
<label for="radio">Champ radio :</label>
<input type="radio" id="radio" name="radio" />
<div>
<input type="submit" id="submit" name="submit" />
<input type="reset" id="reset" name="reset" />
</div>
</form>

80
scss/moineau.scss
View file

@ -6,7 +6,7 @@
--accent-color-light: #d0ebff;
--text-color: #212529;
--border-color: rgba(0,0,0,0.1);
--border-color: rgba(0,0,0,0.15);
--hover-color: rgba(0,0,0,0.05);
--background-color: #f8f9fa;
@ -14,6 +14,8 @@
--accent-color: var(--accent-color-dark);
--accent-color-back: var(--accent-color-light);
--border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
@ -77,6 +79,7 @@ table,
details
main,
.p,
input,
article {
padding: 0;
margin: 0 0 1rem 0;
@ -200,6 +203,81 @@ summary {
margin-left: auto;
}
/* ------------------ INPUT ------------------- */
a, button, input {
outline-color: var(--accent-color);
outline-style: none;
outline-width: 2px;
&:focus-visible {
outline-style: dashed;
}
}
input {
display:block;
background-color: var(--background-color);
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
outline-offset: 2px;
padding: .5rem;
color: var(--text-color);
&:hover {
background-color: var(--hover-color);
}
}
label {
font-size: .9rem;
font-weight: bolder;
}
input[type=checkbox], input[type=radio] {
display: inline-block;
appearance: none;
aspect-ratio: 1;
font-size: 1rem;
height:1em;
width:1em;
box-sizing: border-box;
line-height: 1;
padding:0;
margin: 0 .25em;
border-radius: 3px;
border: 1px solid var(--border-color);
content: "";
position: relative;
top: .1rem;
&:checked {
background-color: var(--accent-color);
box-shadow:inset 0px 0px 0px 3px var(--background-color);
}
&:hover {
filter:brightness(.9);
}
}
input[type=radio] {
border-radius: 9999px;
}
button, .button, input[type=submit], input[type=reset], input[type=button] {
background-color: var(--accent-color);
color: var(--background-color);
border: none;
padding: .5rem 1rem;
border-radius: var(--border-radius);
outline-offset: 2px;
display: inline-block;
&:hover {
background-color: var(--accent-color);
outline-style: solid;
}
}
/* ------------------ SPECIAL STYLING ------------------- */