From b5581c7127d96ee75856242b076b1b4632dea8d4 Mon Sep 17 00:00:00 2001
From: newick <erick@entre-quote.com>
Date: Thu, 4 Apr 2019 12:54:22 +0200
Subject: [PATCH] =?UTF-8?q?passage=20=C3=A0=20du=20plus=20joli?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/dates.html         |  27 +++-
 public/notifications.html |  82 ++++++-----
 public/parametres.html    |  10 +-
 public/responses.html     |  20 +--
 public/style.css          | 296 +++++++++++++++++++++++++-------------
 5 files changed, 282 insertions(+), 153 deletions(-)

diff --git a/public/dates.html b/public/dates.html
index 74d317b6..31698818 100644
--- a/public/dates.html
+++ b/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>
-
 
+</html>
\ No newline at end of file
diff --git a/public/notifications.html b/public/notifications.html
index 0d36c607..62cafbe6 100644
--- a/public/notifications.html
+++ b/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
-      <select name="" id="">
-        <option value="">tout le monde</option>
-        <option value="">moi uniquement</option>
-      </select>
-      puisse voir les réponses du sondage.
-      </select>. D'ailleurs, il sera supprimé le <input type="date" name="" id="">.
+      <span class="select-wrapper">
+        <select name="" id="">
+          <option value="">tout le monde</option>
+          <option value="">moi uniquement</option>
+        </select>
+      </span>
+      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'à
-      <select name="" id="">
-        <option value="">la suppression du sondate</option>
-        <option value="">date</option>
-      </select>
-      <select name="" id="">
-        <option value="">sans avoir</option>
-        <option value="">en ayant</option>
-      </select>
+      <span class="select-wrapper">
+        <select name="" id="">
+          <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
-      <select name="" id="">
-        <option value="">leur vote</option>
-        <option value="">tous les votes</option>.
-      </select>
+      <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
-      <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="">.
+      <span class="select-wrapper">
+        <select name="" id="">
+          <option value="">veux</option>
+          <option value="">ne veux pas</option>
+        </select>
+      </span>
+      que l'accès du sondage soit protégé par (un) ce mot de passe : <input type="password" name="" id="">.
     </p>
 
     <p>
-      <select name="" id="">
-        <option value="">J'ai envie</option>
-        <option value="">Je n'ai pas envie</option>
-      </select>
+      <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
-      <select name="" id="">
-        <option value="">nouveau commentaire</option>
-        <option value="">nouvelle participation</option>
-        <option value="">nouveau commentaire et nouvelle participation</option>
-      </select>
+      <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>
diff --git a/public/parametres.html b/public/parametres.html
index ba263fdf..d50934f1 100644
--- a/public/parametres.html
+++ b/public/parametres.html
@@ -20,10 +20,12 @@
     <section>
       <p>
       Je veux créer un sondage
-      <select id="type_sondage">
-        <option>special dates</option>
-        <option>classique</option>
-      </select>
+      <span class=select-wrapper>
+        <select id="type_sondage">
+          <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>
diff --git a/public/responses.html b/public/responses.html
index 688c9eec..61692258 100644
--- a/public/responses.html
+++ b/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
-      <select>
-        <option>du texte</option>
-        <option>des images</option>
-        <option>des liens</option>
-        <option>des images avec des liens</option>
-      </select>
+      <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>
-
 
+</html>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 358a632b..ed3bf2b2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,201 +1,295 @@
+:root {
+    --primary-color: royalblue;
+}
+
 body {
-  max-width: 320px;
-  margin: auto;
-  padding: 30px 20px;
-  font-family: sans-serif;
-  font-size: 16px;
-  line-height: 2;
+    max-width: 320px;
+    margin: auto;
+    padding: 30px 20px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    line-height: 2;
 }
 
 /* Titres */
 h1 {
-  text-align: center;
-  font-size: 20px;
+    text-align: center;
+    font-size: 20px;
 }
 
 h1 span {
-  font-size: 60%;
-  font-weight: 400;
+    font-size: 60%;
+    font-weight: 400;
 }
 
 /* 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"] {
-  display: block;
-  width: 200px;
-  margin: 10px auto auto;
-  padding: 8px 0;
-  text-align: center;
-  color: #4a90e2;
-  font-weight: 600;
-  border: 2px solid #4a90e2;
-  border-radius: 4px;
-  background-color: white;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
+    display: block;
+    width: 200px;
+    margin: 10px auto auto;
+    padding: 8px 0;
+    text-align: center;
+    color: var(--primary-color);
+    font-weight: 600;
+    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;
-  text-decoration: none;
+    color: #fff;
+    background-color: var(--primary-color);
+    text-decoration: none;
 }
 
 .champ-vide-long {
-  min-width: 100px;
-  display: inline-block;
-  height: 20px;
+    min-width: 100px;
+    display: inline-block;
+    height: 20px;
 }
 
 .btn.btn-primary {
-  color: #fff;
-  background-color: #4a90e2;
-}
-.btn.btn-primary:hover {
-  color: #4a90e2;
-  background-color: #fff;
+    color: #fff;
+    background-color: var(--primary-color);
 }
 
+.btn.btn-primary:hover {
+    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;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  color: inherit;
+    display: inline-block;
+    width: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: inherit;
 }
 
 section button {
-  width: 100%;
-  color: #4a4a4a;
-  border-color: #4a4a4a;
+    width: 100%;
+    color: #4a4a4a;
+    border-color: #4a4a4a;
 }
+
 section button:hover {
-  color: #fff;
-  background-color: #4a4a4a;
+    color: #fff;
+    background-color: #4a4a4a;
 }
 
 label,
 input {
-  display: inline;
+    display: inline;
 }
 
 p {
-  margin-bottom: 2rem;
+    margin-bottom: 2rem;
+    /* line-height: 2.7; */
 }
 
 
 /* Listes */
 ul {
-  padding-left: 0;  
-  list-style-type: none;
+    padding-left: 0;
+    list-style-type: none;
 }
 
-li + li {
-  margin-top: 20px;
+li+li {
+    margin-top: 20px;
 }
 
 .default-list {
-  padding-left: 20px;
-  list-style-type: disc;
+    padding-left: 20px;
+    list-style-type: disc;
 }
 
-.default-list li + li {
-  margin-top: 0;
+.default-list li+li {
+    margin-top: 0;
 }
 
 /* Apparence */
 section:not(:last-of-type) {
-  margin-bottom: 30px;
+    margin-bottom: 30px;
 }
 
 input[type="text"] {
-  border:0;
-  border-bottom:1px solid black;
-  line-height:60%;
+    border: 0;
+    border-bottom: 1px solid black;
+    line-height: 60%;
 }
 
 input[type="date"] {
-  width: 60%;
-  padding: 5px;
-  border: 1px solid #9b9b9b;
-  border-radius: 4px;
+    width: 60%;
+    border-radius: 4px;
 }
+
 input[type="date"]:disabled {
-  opacity: 0.7;
+    opacity: 0.7;
 }
 
 [type="email"] {
-  width: 100%;
+    width: 100%;
 }
 
 textarea {
-  display: block;
-  width: 100%;
-  min-height: 130px;
-  padding: 0.5em;
+    display: block;
+    width: 100%;
+    min-height: 130px;
+    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;
-  cursor: pointer;
-  border-bottom: 1px solid #4a4a4a;
+    min-height: 42px;
+    height: auto;
+    cursor: pointer;
+    /* border: 1px solid rgb(128, 126, 126); */
 }
 
 .overlay {
-  background: rgba(1, 1, 1, .3);
-  height: 100%;
-  top: 0;
-  left: 0;
-  position: absolute;
-  width: 100%;
-  z-index: 5;
+    background: rgba(1, 1, 1, .3);
+    height: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 5;
 }
 
 .modal {
-  background: #fff;
-  top: 10%;
-  left: 40%;
-  padding: 10px;
-  position: absolute;
-  z-index: 10;
+    background: #fff;
+    top: 10%;
+    left: 40%;
+    padding: 10px;
+    position: absolute;
+    z-index: 10;
 }
 
 i {
-  color: #4a4a4a;
+    color: #4a4a4a;
 }
+
 .fa-calendar-alt {
-  font-size: 22px;
-  margin-right: .2em;
+    font-size: 22px;
+    margin-right: .2em;
 }
+
 .fa-trash-alt {
-  color: #9b9b9b;
+    color: #9b9b9b;
 }
 
 .item-disabled {
-  opacity: 0.7;
+    opacity: 0.7;
 }
 
-section + nav {
-  margin-top: 100px;
+section+nav {
+    margin-top: 2rem;
 }
 
 .w100 {
-  width: 100%;
-}
-.bold {
-  font-weight: 600;
+    width: 100%;
 }
 
-article + article {
-  margin-top: 40px;
+.bold {
+    font-weight: 600;
+}
+
+article+article {
+    margin-top: 40px;
 }
 
 a {
-  color: #4a4a4a;
+    color: #4a4a4a;
 }
+
 a:hover {
-  color: #4a90e2;
-}
+    color: var(--primary-color);
+}
\ No newline at end of file