passage à du plus joli

public/dates.html

@@ -11,10 +11,12 @@
   <meta name="description" content=" ">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
+  <link crossorigin="anonymous" rel="stylesheet"
+    href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
   <link rel="stylesheet" href="style.css">
 
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
+    integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
 
 </head>
 
@@ -25,7 +27,21 @@
   </section>
 
   <section>
-    <p>Je veux ajouter des dates <select id="ajouterDesHoraires"><option>sans</option><option>avec des</option></select> horaires<span id="identiquesDifferentsPourChaqueJour" style="display:none"> <select id="horairesIdentiquesOuDifferents"><option>identiques</option><option>différents</option></select> pour chaque jour</span>.</p>
+    <p>Je veux ajouter des dates
+      <span class=select-wrapper>
+        <select id="ajouterDesHoraires">
+          <option>sans</option>
+          <option>avec des</option>
+        </select>
+      </span>
+      horaires
+      <span id="identiquesDifferentsPourChaqueJour" style="display:none">
+        <select id="horairesIdentiquesOuDifferents">
+          <option>identiques</option>
+          <option>différents</option>
+        </select>
+      </span>
+      pour chaque jour.</p>
   </section>
 
   <section>
@@ -57,7 +73,7 @@
       </li>
     </ul>
 
-    <button id="addDateButton">Ajouter une date</button>
+    <button id="addDateButton" class="btn btn-secondary">Ajouter une date</button>
 
     <ul class="horaire-identique" style="display:none">
       <li>
@@ -78,6 +94,5 @@
   <script src="script.js"></script>
 
 </body>
+
 </html>
-
-

public/notifications.html

@@ -11,7 +11,8 @@
   <meta name="description" content=" ">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
+  <link crossorigin="anonymous" rel="stylesheet"
+    href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -19,51 +20,66 @@
 
   <section>
     <p>Je veux que
+      <span class="select-wrapper">
         <select name="" id="">
           <option value="">tout le monde</option>
           <option value="">moi uniquement</option>
         </select>
-      puisse voir les réponses du sondage.
+      </span>
-      </select>. D'ailleurs, il sera supprimé le <input type="date" name="" id="">.
+      puisse voir les réponses du sondage jusqu'à sa suppression le <input type="date" name="" id="">.
     </p>
 
     <p>Les personnes sondées pourront voter jusqu'à
+      <span class="select-wrapper">
         <select name="" id="">
-        <option value="">la suppression du sondate</option>
+          <option value="">la suppression du sondage</option>
           <option value="">date</option>
         </select>
+      </span>
+      <span class="select-wrapper">
         <select name="" id="">
           <option value="">sans avoir</option>
           <option value="">en ayant</option>
         </select>
+      </span>
       la possibilité de modifier
+      <span class="select-wrapper">
         <select name="" id="">
           <option value="">leur vote</option>
           <option value="">tous les votes</option>.
         </select>
+      </span>
     </p>
 
-    <p>Je peux retrouver ce sondage grâce à mon email : <input type="email" id="email" name="email" value="monemail@example.com">.</p>
+    <p>Je peux retrouver ce sondage grâce à mon email : <input type="email" id="email" name="email"
+        value="monemail@example.com">.</p>
 
     <p>
       Je
+      <span class="select-wrapper">
         <select name="" id="">
           <option value="">veux</option>
           <option value="">ne veux pas</option>
-      </select> que l'accès du sondage soit protégé par (un) ce mot de passe : <input type="password" name="" id="">.
+        </select>
+      </span>
+      que l'accès du sondage soit protégé par (un) ce mot de passe : <input type="password" name="" id="">.
     </p>
 
     <p>
+      <span class="select-wrapper">
         <select name="" id="">
           <option value="">J'ai envie</option>
           <option value="">Je n'ai pas envie</option>
         </select>
+      </span>
       d'être tenu-e au courant par mail à chaque
+      <span class="select-wrapper">
         <select name="" id="">
           <option value="">nouveau commentaire</option>
           <option value="">nouvelle participation</option>
           <option value="">nouveau commentaire et nouvelle participation</option>
         </select>
+      </span>
     </p>
 
   </section>

public/parametres.html

@@ -20,10 +20,12 @@
     <section>
       <p>
       Je veux créer un sondage
+      <span class=select-wrapper>
         <select id="type_sondage">
-        <option>special dates</option>
+          <option>spécial dates</option>
           <option>classique</option>
         </select>
+      </span>
       dont le titre sera&nbsp;:&nbsp;<input type="text" id="title" name="title" value="" class="nfl-textfield">
       </p>
       <p>

public/responses.html

@@ -11,7 +11,8 @@
   <meta name="description" content=" ">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
+  <link crossorigin="anonymous" rel="stylesheet"
+    href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -21,12 +22,14 @@
     <h1>Choix des sujets</h1>
     <p>
       Je veux proposer des réponses avec
+      <span class=select-wrapper>
         <select>
           <option>du texte</option>
           <option>des images</option>
           <option>des liens</option>
           <option>des images avec des liens</option>
         </select>
+      </span>
     </p>
     <ul id="responses">
     </ul>
@@ -41,6 +44,5 @@
 
   <script src="script.js"></script>
 </body>
+
 </html>
-
-

public/style.css

@@ -1,8 +1,12 @@
+:root {
+    --primary-color: royalblue;
+}
+
 body {
     max-width: 320px;
     margin: auto;
     padding: 30px 20px;
-  font-family: sans-serif;
+    font-family: Arial, sans-serif;
     font-size: 16px;
     line-height: 2;
 }
@@ -19,6 +23,31 @@ h1 span {
 }
 
 /* Formulaires */
+.select-wrapper {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 12px;
+}
+
+.select-wrapper:after {
+    content: '▾';
+    position: absolute;
+    top: 0;
+    right: 10px;
+    line-height: 44px;
+}
+
+select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 10px 30px 10px 10px;
+    color: var(--primary-color);
+    font-weight: bold;
+    border: 1px solid rgb(128, 126, 126);
+    background: none;
+}
+
 .btn,
 button,
 [type="submit"] {
@@ -27,19 +56,20 @@ button,
     margin: 10px auto auto;
     padding: 8px 0;
     text-align: center;
-  color: #4a90e2;
+    color: var(--primary-color);
     font-weight: 600;
-  border: 2px solid #4a90e2;
+    border: 2px solid var(--primary-color);
     border-radius: 4px;
     background-color: white;
     transition: all 0.2s ease-in-out;
     cursor: pointer;
 }
+
 .btn:hover,
 button:hover,
 [type="submit"]:hover {
     color: #fff;
-  background-color: #4a90e2;
+    background-color: var(--primary-color);
     text-decoration: none;
 }
 
@@ -51,13 +81,50 @@ button:hover,
 
 .btn.btn-primary {
     color: #fff;
-  background-color: #4a90e2;
+    background-color: var(--primary-color);
 }
+
 .btn.btn-primary:hover {
-  color: #4a90e2;
+    color: var(--primary-color);
     background-color: #fff;
 }
 
+.btn.btn-secondary {
+    position: relative;
+    display: inline;
+    width: auto;
+    padding: 0;
+    color: var(--primary-color);
+    border: none;
+    border-bottom: 1px solid var(--primary-color);
+    border-radius: 0;
+}
+
+.btn.btn-secondary:before {
+    content: '+';
+    margin-right: 10px;
+}
+
+.btn.btn-secondary:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: var(--primary-color);
+} 
+
+.btn.btn-secondary:hover {
+    background: none;
+}
+
+.btn.btn-secondary:hover:after {
+    height: 2px;
+} 
+
+
 .btn-no-style {
     display: inline-block;
     width: auto;
@@ -72,6 +139,7 @@ section button {
     color: #4a4a4a;
     border-color: #4a4a4a;
 }
+
 section button:hover {
     color: #fff;
     background-color: #4a4a4a;
@@ -84,6 +152,7 @@ input {
 
 p {
     margin-bottom: 2rem;
+    /* line-height: 2.7; */
 }
 
 
@@ -119,10 +188,9 @@ input[type="text"] {
 
 input[type="date"] {
     width: 60%;
-  padding: 5px;
-  border: 1px solid #9b9b9b;
     border-radius: 4px;
 }
+
 input[type="date"]:disabled {
     opacity: 0.7;
 }
@@ -135,13 +203,35 @@ textarea {
     display: block;
     width: 100%;
     min-height: 130px;
-  padding: 0.5em;
+    margin-top: 12px;
+}
+
+select,
+.toggle-field,
+textarea,
+[type=date],
+[type=email],
+[type=password] {
+    color: black;
+    line-height: 1.5;
+    font-weight: normal;
+    background-color: rgba(65, 105, 225, .2);
+    border: none;
+}
+
+.toggle-field,
+textarea,
+[type=date],
+[type=email],
+[type=password] {
+    padding: 8px 10px;
 } 
 
 .toggle-field {
-  color: #4a90e2;
+    min-height: 42px;
+    height: auto;
     cursor: pointer;
-  border-bottom: 1px solid #4a4a4a;
+    /* border: 1px solid rgb(128, 126, 126); */
 }
 
 .overlay {
@@ -166,10 +256,12 @@ textarea {
 i {
     color: #4a4a4a;
 }
+
 .fa-calendar-alt {
     font-size: 22px;
     margin-right: .2em;
 }
+
 .fa-trash-alt {
     color: #9b9b9b;
 }
@@ -179,12 +271,13 @@ i {
 }
 
 section+nav {
-  margin-top: 100px;
+    margin-top: 2rem;
 }
 
 .w100 {
     width: 100%;
 }
+
 .bold {
     font-weight: 600;
 }
@@ -196,6 +289,7 @@ article + article {
 a {
     color: #4a4a4a;
 }
+
 a:hover {
-  color: #4a90e2;
+    color: var(--primary-color);
 }