feat: ajout des champs de formulaire

exemples/exemples.md

@@ -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>

scss/moineau.scss

@@ -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 ------------------- */