Style changes to adapt to new design

This commit is contained in:
Marlène Simondant 2018-07-18 10:44:36 +02:00
parent 0a2b178860
commit cacf21b16e
1 changed files with 173 additions and 87 deletions

View File

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