From cacf21b16ed1d13317429212fb5fca13644d6be1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20Simondant?= <msimondant@grandlyon.com>
Date: Wed, 18 Jul 2018 10:44:36 +0200
Subject: [PATCH] Style changes to adapt to new design

---
 extra/static/social.css | 260 ++++++++++++++++++++++++++--------------
 1 file changed, 173 insertions(+), 87 deletions(-)

diff --git a/extra/static/social.css b/extra/static/social.css
index ff8f282..52b0d0b 100644
--- a/extra/static/social.css
+++ b/extra/static/social.css
@@ -1,51 +1,81 @@
-/* Test suivi PH */
+/* Test suivi PH et PA */
 .formdef-suivi-dossier-ph .steps-1,
+.formdef-suivi-dossier-pa .steps-1,
 .formdef-suivi-dossier-ph div#rub_service div#receipt-intro,
+.formdef-suivi-dossier-pa div#rub_service div#receipt-intro,
 .formdef-suivi-dossier-ph div#rub_service .wait .evolution-metadata,
+.formdef-suivi-dossier-pa div#rub_service .wait .evolution-metadata,
 .formdef-suivi-dossier-ph div#rub_service #evolutions.open::before,
+.formdef-suivi-dossier-pa div#rub_service #evolutions.open::before,
 .formdef-suivi-dossier-ph ul#evolutions > li.detail ~ li.detail,
+.formdef-suivi-dossier-pa ul#evolutions > li.detail ~ li.detail,
 .formdef-suivi-dossier-ph ul#evolutions > li.wait ~ li.wait,
+.formdef-suivi-dossier-pa ul#evolutions > li.wait ~ li.wait,
 .formdef-suivi-dossier-ph ul#evolutions li span.item,
+.formdef-suivi-dossier-pa ul#evolutions li span.item,
 .formdef-suivi-dossier-ph ul#evolutions li.None,
+.formdef-suivi-dossier-pa ul#evolutions li.None,
 .formdef-suivi-dossier-ph ul#evolutions > .detail .status,
+.formdef-suivi-dossier-pa ul#evolutions > .detail .status,
 .formdef-suivi-dossier-ph ul#evolutions > .detail .time,
+.formdef-suivi-dossier-pa ul#evolutions > .detail .time,
 .formdef-suivi-dossier-ph ul#evolutions > .detail .user,
+.formdef-suivi-dossier-pa ul#evolutions > .detail .user,
 .formdef-suivi-dossier-ph ul#evolutions:after,
+.formdef-suivi-dossier-pa ul#evolutions:after,
 .formdef-suivi-dossier-ph input.infoInput:checked ~ li div.commentaire,
+.formdef-suivi-dossier-pa input.infoInput:checked ~ li div.commentaire,
 .formdef-suivi-dossier-ph input.infoInput:checked ~ li div.arrowUp,
-.formdef-suivi-dossier-ph input[name="etape"] {
-  display: none;
+.formdef-suivi-dossier-pa input.infoInput:checked ~ li div.arrowUp,
+.formdef-suivi-dossier-ph input[name="etape"] ,
+.formdef-suivi-dossier-pa input[name="etape"] {
+  display: none ;
 }
-.formdef-suivi-dossier-ph h2.foldable {
-    display: none !important;
+.formdef-suivi-dossier-ph div.evolution-metadata,
+.formdef-suivi-dossier-pa div.evolution-metadata,
+.formdef-suivi-dossier-ph h2.foldable,
+.formdef-suivi-dossier-pa h2.foldable  {
+  display: none !important;
+}
+.formdef-suivi-dossier-ph #columns>#form-status-sidebar #receipt-intro,
+.formdef-suivi-dossier-pa #columns>#form-status-sidebar #receipt-intro {
+  left: 0;
+  visibility: hidden;
 }
 /* form */
-.formdef-suivi-dossier-ph div#rub_service form {
+.formdef-suivi-dossier-ph div#rub_service form,
+.formdef-suivi-dossier-pa div#rub_service form {
   padding: 0;
 }
-.formdef-suivi-dossier-ph div#rub_service h3 {
+.formdef-suivi-dossier-ph div#rub_service h3,
+.formdef-suivi-dossier-pa div#rub_service h3 {
   padding: 20px 0 20px 25px;
-  font-size: 1.3em;
 }
-.formdef-suivi-dossier-ph div.widget {
+.formdef-suivi-dossier-ph div.widget,
+.formdef-suivi-dossier-pa div.widget {
   padding: 0 25px;
 }
-.formdef-suivi-dossier-ph div.submit {
+.formdef-suivi-dossier-ph div.submit,
+ .formdef-suivi-dossier-pa div.submit{
   height: 0;
 }
-.formdef-suivi-dossier-ph #var_dpap {
+.formdef-suivi-dossier-ph #var_dpap,
+ .formdef-suivi-dossier-pa #var_dpap{
   margin-bottom: 0;
   padding: 5px 62px 30px 20px;
 }
-.formdef-suivi-dossier-ph .wrapperSearch {
+.formdef-suivi-dossier-ph .wrapperSearch,
+.formdef-suivi-dossier-pa .wrapperSearch {
   background-color: #E3E3E3;
   margin: 0;
   width: 100%;
 }
-.formdef-suivi-dossier-ph h3.wrapperSearch {
+.formdef-suivi-dossier-ph h3.wrapperSearch,
+.formdef-suivi-dossier-pa h3.wrapperSearch{
   width: calc(100% - 25px);
 }
-.formdef-suivi-dossier-ph div#gauche + div#rub_service div.buttons .submit-button button {
+.formdef-suivi-dossier-ph div#gauche + div#rub_service div.buttons .submit-button button,
+.formdef-suivi-dossier-pa div#gauche + div#rub_service div.buttons .submit-button button {
   background: #DA0D02;
   color: white;
   margin: 0;
@@ -57,7 +87,8 @@
   text-indent: -55px;
   line-height: 0;
 }
-.formdef-suivi-dossier-ph div#gauche + div#rub_service div.buttons .submit-button button:after {
+.formdef-suivi-dossier-ph div#gauche + div#rub_service div.buttons .submit-button button:after,
+.formdef-suivi-dossier-pa div#gauche + div#rub_service div.buttons .submit-button button:after {
   font-family: FontAwesome;
   content: "\f002";
   padding: 0 1em;
@@ -66,73 +97,88 @@
 }
 /* historique */
 @media screen and (min-width: 1000px) {
-  .formdef-suivi-dossier-ph div#rub_service div.contact#receipt-intro {
+  .formdef-suivi-dossier-ph div#rub_service div.contact#receipt-intro,
+  .formdef-suivi-dossier-pa div#rub_service div.contact#receipt-intro {
       display: block;
       position: absolute;
-      top: -45px;
-      left: 104%;
-      width: 35%;
-      background-color: #fff;
-      padding: 10px;
-      border-radius: 5px;
-    }
-    .formdef-suivi-dossier-ph div#rub_service div.colform#receipt-intro {
-      position: relative;
-      top: 1px;
+      top: -144px;
       left: 104%;
       width: 35%;
+      margin-left: 1rem;
+      margin-right: 0;
+      box-shadow: 0 0 3px #888;
     }
+  .formdef-suivi-dossier-ph div#rub_service div.contact#receipt-intro div,
+  .formdef-suivi-dossier-pa div#rub_service div.contact#receipt-intro div {
+      padding : 1em;
+  }
 }
-.formdef-suivi-dossier-ph div#rub_service div.contform {
+.formdef-suivi-dossier-ph div#rub_service div.contform,
+.formdef-suivi-dossier-pa div#rub_service div.contform {
   height: 0px;
 }
-.formdef-suivi-dossier-ph .detail {
-  font-size: 1.1em;
-}
-.formdef-suivi-dossier-ph .emphasized {
+.formdef-suivi-dossier-ph .emphasized,
+.formdef-suivi-dossier-pa .emphasized {
   color: darkred;
   font-size: 1.15em;
   font-weight: bold;
 }
-.formdef-suivi-dossier-ph div#rub_service h3#procedure {
+.formdef-suivi-dossier-ph div#rub_service h3#procedure,
+.formdef-suivi-dossier-pa div#rub_service h3#procedure {
   position: relative;
   left: -40px;
   margin-bottom: 2.5ex;
   padding: 0;
-  font-size: 1.35em;
 }
-.formdef-suivi-dossier-ph div#rub_service div.contact#receipt-intro h3 {
-  margin: 0;
-  padding: 10px 0;
+.formdef-suivi-dossier-ph div#rub_service div.contact#receipt-intro h3,
+.formdef-suivi-dossier-pa div#rub_service div.contact#receipt-intro h3 {
+    text-transform: uppercase;
+    background: #4b4b4b;
+    color: white;
+    padding: 1rem;
+    margin: 0;
+    font-weight: normal;
+    font-family: Oswald, sans-serif;
+    font-style: normal;
+    text-align: center;
 }
-.formdef-suivi-dossier-ph div#rub_service .wait {
+.formdef-suivi-dossier-ph div#rub_service .wait,
+.formdef-suivi-dossier-pa div#rub_service .wait {
   margin-bottom: 0;
 }
-.formdef-suivi-dossier-ph ul#evolutions {
+.formdef-suivi-dossier-ph ul#evolutions,
+.formdef-suivi-dossier-pa ul#evolutions {
   overflow: visible;
 }
-.formdef-suivi-dossier-ph ul#evolutions.open {
+.formdef-suivi-dossier-ph ul#evolutions.open,
+.formdef-suivi-dossier-pa ul#evolutions.open {
   margin-top:0 !important;
-  min-height: 900px;
+  min-height: 1000px;
 }
-.formdef-suivi-dossier-ph ul#evolutions ul.suivi {
+.formdef-suivi-dossier-ph ul#evolutions ul.suivi,
+.formdef-suivi-dossier-pa ul#evolutions ul.suivi {
   padding: 0 0 20px 0;
 }
-.formdef-suivi-dossier-ph ul#evolutions ul.suivi li {
+.formdef-suivi-dossier-ph ul#evolutions ul.suivi li,
+.formdef-suivi-dossier-pa ul#evolutions ul.suivi li {
   list-style-type: none;
   margin: 0;
 }
-.formdef-suivi-dossier-ph ul#evolutions ul.taches {
+.formdef-suivi-dossier-ph ul#evolutions ul.taches,
+.formdef-suivi-dossier-pa ul#evolutions ul.taches {
   padding: 0px;
   margin: 0px;
 }
-.formdef-suivi-dossier-ph ul#evolutions ul.taches > li {
+.formdef-suivi-dossier-ph ul#evolutions ul.taches > li,
+.formdef-suivi-dossier-pa ul#evolutions ul.taches > li {
   margin: 0 0 15px 0;
 }
-.formdef-suivi-dossier-ph ul#evolutions ul.demande li {
+.formdef-suivi-dossier-ph ul#evolutions ul.demande li,
+.formdef-suivi-dossier-pa ul#evolutions ul.demande li {
   margin: 0;
 }
-.formdef-suivi-dossier-ph ul#evolutions span.step {
+.formdef-suivi-dossier-ph ul#evolutions span.step,
+.formdef-suivi-dossier-pa ul#evolutions span.step {
   box-sizing: border-box;
   position: absolute;
   left: -14px;
@@ -141,26 +187,29 @@
   border-radius: 20px;
   border: 1px solid #363636;
 }
-.formdef-suivi-dossier-ph ul#evolutions span.enCours {
+.formdef-suivi-dossier-ph ul#evolutions span.enCours,
+.formdef-suivi-dossier-pa ul#evolutions span.enCours {
   color: #363636;
   background-color: #fff;
   margin-top: 3px;
   color: #fff;
 }
-.formdef-suivi-dossier-ph ul#evolutions span.fini {
+.formdef-suivi-dossier-ph ul#evolutions span.fini,
+.formdef-suivi-dossier-pa ul#evolutions span.fini {
   background-color: #363636;
   color: #363636;
   margin-top: 6px;
 }
-.formdef-suivi-dossier-ph ul#evolutions .etape {
-  font-size: 1.2em;
+.formdef-suivi-dossier-ph ul#evolutions .etape,
+.formdef-suivi-dossier-pa ul#evolutions .etape {
   line-height: 1.8em;
 }
-.formdef-suivi-dossier-ph ul#evolutions .currentStep {
-  font-size: 1.25em;
+.formdef-suivi-dossier-ph ul#evolutions .currentStep,
+.formdef-suivi-dossier-pa ul#evolutions .currentStep {
   color: #98e478;
 }
-.formdef-suivi-dossier-ph ul#evolutions li.listEtape:last-child::before {
+.formdef-suivi-dossier-ph ul#evolutions li.listEtape:last-child::before,
+.formdef-suivi-dossier-pa ul#evolutions li.listEtape:last-child::before {
   position: absolute;
   top: 25px;
   left: -8px;
@@ -170,12 +219,14 @@
   background: #fff;
 }
 /* comments */
-.formdef-suivi-dossier-ph ul#evolutions div.commentaire {
+.formdef-suivi-dossier-ph ul#evolutions div.commentaire,
+.formdef-suivi-dossier-pa ul#evolutions div.commentaire {
   background-color: #E3E3E3;
   border-radius: 5px;
   padding: 15px;
 }
-.formdef-suivi-dossier-ph ul#evolutions div.arrowUp {
+.formdef-suivi-dossier-ph ul#evolutions div.arrowUp,
+.formdef-suivi-dossier-pa ul#evolutions div.arrowUp {
   width: 0;
   height: 0;
   position: relative;
@@ -186,7 +237,14 @@
   padding-top: 5px;
 }
 /* opinions */
-.formdef-suivi-dossier-ph ul#evolutions div.Accord, .formdef-suivi-dossier-ph ul#evolutions div.Rejet, .formdef-suivi-dossier-ph ul#evolutions div.Refus, .formdef-suivi-dossier-ph ul#evolutions div.suspension {
+.formdef-suivi-dossier-ph ul#evolutions div.Accord,
+.formdef-suivi-dossier-pa ul#evolutions div.Accord,
+.formdef-suivi-dossier-ph ul#evolutions div.Rejet,
+.formdef-suivi-dossier-pa ul#evolutions div.Rejet,
+.formdef-suivi-dossier-ph ul#evolutions div.Refus,
+.formdef-suivi-dossier-pa ul#evolutions div.Refus,
+.formdef-suivi-dossier-ph ul#evolutions div.suspension,
+.formdef-suivi-dossier-pa ul#evolutions div.suspension {
   width: 20px;
   height: 30px;
   float: left;
@@ -194,13 +252,18 @@
   color: #fff;
   font-weight: bold;
 }
-.formdef-suivi-dossier-ph ul#evolutions div.suspension {
+.formdef-suivi-dossier-ph ul#evolutions div.suspension,
+.formdef-suivi-dossier-pa ul#evolutions div.suspension {
   height: 15px;
 }
 .formdef-suivi-dossier-ph ul#evolutions div.Rejet:before,
+.formdef-suivi-dossier-pa ul#evolutions div.Rejet:before,
 .formdef-suivi-dossier-ph ul#evolutions div.Refus:before,
+.formdef-suivi-dossier-pa ul#evolutions div.Refus:before,
 .formdef-suivi-dossier-ph ul#evolutions div.suspension:before,
-.formdef-suivi-dossier-ph ul#evolutions div.Accord:before {
+.formdef-suivi-dossier-pa ul#evolutions div.suspension:before,
+.formdef-suivi-dossier-ph ul#evolutions div.Accord:before,
+.formdef-suivi-dossier-pa ul#evolutions div.Accord:before {
   content: "✖";
   margin: 0;
   border: none;
@@ -215,73 +278,91 @@
   float: left;
   padding: 9px 4px 0 3px;
 }
-.formdef-suivi-dossier-ph ul#evolutions div.Accord:before {
+.formdef-suivi-dossier-ph ul#evolutions div.Accord:before,
+.formdef-suivi-dossier-pa ul#evolutions div.Accord:before {
   content: "✔";
   background-color: #86bd3c;
   width: 11px;
   height: 8px;
 }
 .formdef-suivi-dossier-ph ul#evolutions div.suspension:before,
-.formdef-suivi-dossier-ph ul#evolutions div.mais:before {
+.formdef-suivi-dossier-pa ul#evolutions div.suspension:before,
+.formdef-suivi-dossier-ph ul#evolutions div.mais:before,
+.formdef-suivi-dossier-pa ul#evolutions div.mais:before {
   content: "...";
   padding: 7px 4px 0 3px;
   height: 10px;
   background-color: #ff782a;
 }
-.formdef-suivi-dossier-ph ul#evolutions span.noOpinion {
+.formdef-suivi-dossier-ph ul#evolutions span.noOpinion,
+.formdef-suivi-dossier-pa ul#evolutions span.noOpinion {
   width: 20px;
   height: 50px;
   float: left;
 }
-.formdef-suivi-dossier-ph ul#evolutions #maj {
+.formdef-suivi-dossier-ph ul#evolutions #maj,
+.formdef-suivi-dossier-pa ul#evolutions #maj {
   font-size: 0.8em;
 }
-.formdef-suivi-dossier-ph ul#evolutions .missing::before {
+.formdef-suivi-dossier-ph ul#evolutions .missing::before,
+.formdef-suivi-dossier-pa ul#evolutions .missing::before {
   content: "✖";
   color: darkred;
 }
-.formdef-suivi-dossier-ph ul#evolutions .check::before {
+.formdef-suivi-dossier-ph ul#evolutions .check::before,
+.formdef-suivi-dossier-pa ul#evolutions .check::before {
   content: "✔";
   color: #86bd3c;
 }
-.formdef-suivi-dossier-ph ul#evolutions ul.suivi::before {
+.formdef-suivi-dossier-ph ul#evolutions ul.suivi::before,
+.formdef-suivi-dossier-pa ul#evolutions ul.suivi::before {
   position: absolute;
   /*top: 90px;*/
-  left: 0;
+  left: -3px;
   width: 1px;
-  height: calc(100% - 200px);
+  height: calc(100% - 120px);
   content: " ";
   background: #363636;
 }
 /* info button to display old comments */
-.formdef-suivi-dossier-ph .infoBt {
+.formdef-suivi-dossier-ph .infoBt,
+.formdef-suivi-dossier-pa .infoBt {
   visibility: hidden;
   cursor: pointer;
   font-weight: bold;
-  font-size: 1.3em;
+  font-size: 1.2em;
   color: #2f2f7b;
   float: right;
 }
-.formdef-suivi-dossier-ph input.infoInput {
+.formdef-suivi-dossier-ph input.infoInput,
+.formdef-suivi-dossier-pa input.infoInput {
   visibility: hidden;
 }
-.formdef-suivi-dossier-ph .comment ~ .infoBt {
+.formdef-suivi-dossier-ph .comment ~ .infoBt,
+.formdef-suivi-dossier-pa .comment ~ .infoBt {
   visibility: visible;
 }
 /* accordeon */
-.formdef-suivi-dossier-ph .suivi > li {
+.formdef-suivi-dossier-ph .suivi > li,
+.formdef-suivi-dossier-pa .suivi > li {
   position: relative;
   padding: 0 0 0 35px;
   border-bottom: 1px solid white;
 }
-.formdef-suivi-dossier-ph .suivi > li label#phase:after {
+
+.formdef-suivi-dossier-ph .suivi > li span.stepArrow {
+  position: absolute;
+  right: 15px;
+}
+.formdef-suivi-dossier-ph .suivi > li span.stepArrow:after {
   content: "►";
   float: right;
 }
-.formdef-suivi-dossier-ph .suivi > li input:checked + label#phase:after {
+.formdef-suivi-dossier-ph .suivi > li input:checked span.stepArrow:after {
   content: "▼";
 }
-.formdef-suivi-dossier-ph .suivi > li input + label#phase {
+.formdef-suivi-dossier-ph .suivi > li input + label#phase,
+.formdef-suivi-dossier-pa .suivi > li input + label#phase {
   cursor: pointer;
   border-radius: 3px;
   font-weight: bold;
@@ -290,34 +371,39 @@
   background-color: #2A2E4B;
   color: #fff;
 }
-.formdef-suivi-dossier-ph .suivi > li input ~ div {
-  display: none;
-  height: 0px;
+.formdef-suivi-dossier-ph .suivi > li input ~ div,
+.formdef-suivi-dossier-pa .suivi > li input ~ div {
+  /*display: none;*/
+  height: 0%;
   max-height: 0;
   padding: 0;
   opacity: 0;
-  -webkit-transition: all 1s ease;
-  transition: all 1s ease;
+  -webkit-transition: all 0.75s ease-in-out;
+  transition: all 0.75s ease-in-out;
 }
-.formdef-suivi-dossier-ph .suivi > li input:checked + label#phase {
+.formdef-suivi-dossier-ph .suivi > li input:checked + label#phase,
+.formdef-suivi-dossier-pa .suivi > li input:checked + label#phase {
   background-color: #2A2E4B;
   color: #fff;
 }
-.formdef-suivi-dossier-ph .suivi > li input:checked ~ div {
-  display: block;
+.formdef-suivi-dossier-ph .suivi > li input:checked ~ div,
+.formdef-suivi-dossier-pa .suivi > li input:checked ~ div {
+  /*display: block;*/
   height: 100%;
   max-height: 1000px;
   opacity: 1;
-  -webkit-transition: all 1s ease;
-  transition: all 1s ease;
+  -webkit-transition: all 1s ease-in-out;
+  transition: all 1s ease-in-out;
 }
 /* Bouton Grandlyon Connect */
-.formdef-suivi-dossier-ph div.connect-buttons {
+.formdef-suivi-dossier-ph div.connect-buttons,
+.formdef-suivi-dossier-pa div.connect-buttons {
   background-color: #2A2E4B;
   color: white;
   padding: 8px 20px;
 }
-.formdef-suivi-dossier-ph div.connect-buttons a {
+.formdef-suivi-dossier-ph div.connect-buttons a,
+.formdef-suivi-dossier-pa div.connect-buttons a {
   background: #DA0D02;
   color: white;
   border-radius: 40px;