From 7116f386938d37eabbe43f6b27d93996f7ab368f Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 7 Jan 2022 16:28:34 +0100 Subject: [PATCH] css form --- web/profiles/d8-starterkit-profile | 2 +- web/themes/custom/eql/css-compiled/styles.css | 829 ++++++++++-------- .../custom/eql/scss/pages/_webform.scss | 239 +++-- 3 files changed, 631 insertions(+), 439 deletions(-) diff --git a/web/profiles/d8-starterkit-profile b/web/profiles/d8-starterkit-profile index 9b46db9..6fe8986 160000 --- a/web/profiles/d8-starterkit-profile +++ b/web/profiles/d8-starterkit-profile @@ -1 +1 @@ -Subproject commit 9b46db9c56faf2cbc965ea1b76ce5345e7f46c0f +Subproject commit 6fe8986494069c7e9bf019cbe98d8f2c7d5166d0 diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 48739c6..ff7fff9 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -2223,374 +2223,481 @@ a { .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-lien a svg { display: none; } -.path-webform .region-content { +.path-webform .region-content [role="contentinfo"] { + display: none; } + +.path-webform .region-content .block-system-main-block h2 { + display: none; } + +.path-webform .region-content #webform-submission-deposer-une-contribution-add-form { + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex-basis: auto; + justify-content: flex-start; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-titre { + width: 100%; + font-family: 'Source Code Pro'; + font-size: 2rem; + font-weight: 800; + color: white; + background-color: #009ee3; + text-transform: uppercase; + padding-left: 13%; + padding-top: 2rem; + padding-bottom: 2rem; + vertical-align: middle; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-sous-titre { + width: 100%; + font-family: 'Source Code Pro'; + font-size: 2rem; + font-weight: 800; + color: white; + background-color: #009ee3; + text-transform: uppercase; + width: fit-content; + margin-left: 13%; + margin-top: 8rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-processed-text { + margin-top: 10vh; + margin-left: 13%; + margin-right: 20%; + width: 60%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document input { + width: 90%; + height: 5rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s- { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s-:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s- label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s- input { + width: 90%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution { + margin-left: 13%; + width: 27%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution input { + width: 90%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nombre-de-pages { + margin-right: 20%; + width: 27%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; + margin-right: 3rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nombre-de-pages label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nombre-de-pages input { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur input { + width: 90%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc- { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc-:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc- label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc- input { + width: 90%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 1rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource div { + width: 90%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource div textarea { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet input { + width: 90%; + height: 3rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-url-vers-une-video-ou-un-site-internet { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-url-vers-une-video-ou-un-site-internet label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-url-vers-une-video-ou-un-site-internet input { + width: 90%; + height: 3rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel { + margin-left: 13%; + width: 28%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel input { + width: 90%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone { + margin-right: 20%; + width: 29%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; + margin-right: 3rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone label { + width: 100%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone input { + width: 90%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-actions { + width: 60%; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-actions input { + width: 30%; + align-self: flex-end; + background-color: #009ee3; + text-transform: uppercase; + color: white; + font-size: 1.2rem; + font-weight: 600; + float: right; + margin-top: 1rem; + border: none; } + .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-actions #edit-actions-submit:after { + content: url('data:image/svg+xml,'); } + +.path-webform .region-content #webform-submission-offre-de-service-add-form { + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex-basis: auto; + justify-content: flex-start; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-title { + width: 100%; + font-family: 'Source Code Pro'; + font-size: 2rem; + font-weight: 800; + color: white; + background-color: #009ee3; + text-transform: uppercase; + padding-left: 13%; + padding-top: 2rem; + padding-bottom: 2rem; + vertical-align: middle; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-sous-titre { + width: 100%; + font-family: 'Source Code Pro'; + font-size: 2rem; + font-weight: 800; + color: white; + background-color: #009ee3; + text-transform: uppercase; + width: fit-content; + margin-left: 13%; + margin-top: 8rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-processed-text { + margin-top: 10vh; + margin-left: 13%; + margin-right: 20%; + width: 60%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service label { + width: 100%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service input { + width: 90%; + height: 5rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure label { + width: 100%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure input { + width: 90%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation label { + width: 100%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation input { + width: 90%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form div { + width: 100%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form div .form-item-description { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form div .form-item-description label { + width: 100%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form div .form-item-description textarea { + width: 90%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-description { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-description label { + width: 100%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-description textarea { + width: 90%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper { + width: 100%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url { + margin-left: 13%; + margin-right: 20%; + width: 60%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url label { + width: 100%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url input { + width: 90%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel { + margin-left: 13%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; + width: 28%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel label { + width: 100%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel input { + width: 90%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone { + margin-right: 20%; + width: 29%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; + margin-right: 3rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone label { + width: 100%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone input { + width: 90%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-j-accepte-que-mon-courriel-soit-diffuse-sur-la-page-de-mon-offre { + margin-top: 3rem; + margin-bottom: 3rem; + margin-left: 13%; + margin-right: 20%; + width: 60%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-actions { + width: 60%; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-actions input { + width: 30%; + align-self: flex-end; + background-color: #009ee3; + text-transform: uppercase; + color: white; + font-size: 1.2rem; + font-weight: 600; + float: right; + margin-top: 1rem; + border: none; } + .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-actions #edit-actions-submit:after { + content: url('data:image/svg+xml,'); } + +.path-webform .region-content #webform-submission-question-add-form { + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex-basis: auto; + justify-content: flex-start; + margin-top: 10vh; + width: 60%; margin-left: 13%; - margin-right: 20%; - width: 60%; } - .path-webform .region-content [role="contentinfo"] { - display: none; } - .path-webform .region-content .block-system-main-block h2 { - display: none; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form { + margin-right: 20%; } + .path-webform .region-content #webform-submission-question-add-form .form-item-couriel { display: flex; flex-direction: row; flex-wrap: wrap; - flex-basis: auto; - justify-content: flex-start; - margin-top: 10vh; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-processed-text { + margin-top: 2rem; + width: 100%; } + .path-webform .region-content #webform-submission-question-add-form .form-item-couriel:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; } + .path-webform .region-content #webform-submission-question-add-form .form-item-couriel label { width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; + .path-webform .region-content #webform-submission-question-add-form .form-item-couriel input { + width: 90%; } + .path-webform .region-content #webform-submission-question-add-form .form-item-question { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; + width: 100%; } + .path-webform .region-content #webform-submission-question-add-form .form-item-question:after { + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.9rem; } + .path-webform .region-content #webform-submission-question-add-form .form-item-question label { width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document input { - width: 90%; + .path-webform .region-content #webform-submission-question-add-form .form-item-question div { + width: 90%; } + .path-webform .region-content #webform-submission-question-add-form .form-item-question div textarea { + width: 100%; height: 5rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s- { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s-:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s- label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s- input { - width: 90%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 45%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution input { - width: 90%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nombre-de-pages { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 45%; - margin-right: 3rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nombre-de-pages label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nombre-de-pages input { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur { - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; - margin-top: 2rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur input { - width: 90%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc- { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc-:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc- label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc- input { - width: 90%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource { - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; - margin-top: 2rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 1rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource div { - width: 90%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource div textarea { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet input { - width: 90%; - height: 3rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-url-vers-une-video-ou-un-site-internet { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-url-vers-une-video-ou-un-site-internet label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-url-vers-une-video-ou-un-site-internet input { - width: 90%; - height: 3rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 47%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel input { - width: 90%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 47%; - margin-right: 3rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone label { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone input { - width: 90%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-actions { - width: 100%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-actions input { - width: 30%; - align-self: flex-end; - background-color: #009ee3; - text-transform: uppercase; - color: white; - font-size: 1.2rem; - font-weight: 600; - float: right; - margin-top: 1rem; - border: none; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-actions #edit-actions-submit:after { - content: url('data:image/svg+xml,'); } - .path-webform .region-content #webform-submission-offre-de-service-add-form { - display: flex; - flex-direction: row; - flex-wrap: wrap; - flex-basis: auto; - justify-content: flex-start; - margin-top: 10vh; } - .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-processed-text { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service label { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service input { - width: 90%; - height: 5rem; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure label { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure input { - width: 90%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation label { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation input { - width: 90%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form div { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form div .form-item-description { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form div .form-item-description label { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form div .form-item-description textarea { - width: 90%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-description { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-description label { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-description textarea { - width: 90%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url label { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url input { - width: 90%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 47%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel label { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel input { - width: 90%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 2rem; - width: 47%; - margin-right: 3rem; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone:after { - content: "*"; - color: red; - font-size: 2rem; - padding-left: 0.5rem; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone label { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone input { - width: 90%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-actions { - width: 100%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-actions input { - width: 30%; - align-self: flex-end; - background-color: #009ee3; - text-transform: uppercase; - color: white; - font-size: 1.2rem; - font-weight: 600; - float: right; - margin-top: 1rem; - border: none; } - .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-actions #edit-actions-submit:after { - content: url('data:image/svg+xml,'); } - .path-webform .region-content #webform-submission-question-add-form { - display: flex; - flex-direction: row; - flex-wrap: wrap; - flex-basis: auto; - justify-content: space-between; - margin-top: 10vh; } - .path-webform .region-content #webform-submission-question-add-form #edit-couriel--wrapper { - width: 100%; } - .path-webform .region-content #webform-submission-question-add-form #edit-couriel--wrapper .form-item-couriel-mail-1 { - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-question-add-form #edit-couriel--wrapper .form-item-couriel-mail-1 input { - width: 100%; } - .path-webform .region-content #webform-submission-question-add-form #edit-couriel--wrapper .form-item-couriel-mail-2 { - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-question-add-form #edit-couriel--wrapper .form-item-couriel-mail-2 input { - width: 100%; } - .path-webform .region-content #webform-submission-question-add-form .form-item-question { - margin-top: 2rem; - width: 100%; } - .path-webform .region-content #webform-submission-question-add-form .form-item-question textarea { - width: 100%; } - .path-webform .region-content #webform-submission-question-add-form #edit-actions { - width: 100%; } - .path-webform .region-content #webform-submission-question-add-form #edit-actions input { - width: 30%; - align-self: flex-end; - background-color: #009ee3; - text-transform: uppercase; - color: white; - font-size: 1.2rem; - font-weight: 600; - float: right; - margin-top: 1rem; - border: none; } - .path-webform .region-content #webform-submission-question-add-form #edit-actions #edit-actions-submit:after { - content: url('data:image/svg+xml,'); } + .path-webform .region-content #webform-submission-question-add-form #edit-actions { + width: 90%; } + .path-webform .region-content #webform-submission-question-add-form #edit-actions input { + width: 30%; + align-self: flex-end; + background-color: #009ee3; + text-transform: uppercase; + color: white; + font-size: 1.2rem; + font-weight: 600; + float: right; + margin-top: 1rem; + border: none; } + .path-webform .region-content #webform-submission-question-add-form #edit-actions #edit-actions-submit:after { + content: url('data:image/svg+xml,'); } /*partials*/ .layout-container { diff --git a/web/themes/custom/eql/scss/pages/_webform.scss b/web/themes/custom/eql/scss/pages/_webform.scss index 81671f7..ae7a101 100644 --- a/web/themes/custom/eql/scss/pages/_webform.scss +++ b/web/themes/custom/eql/scss/pages/_webform.scss @@ -1,8 +1,6 @@ .path-webform{ .region-content{ - margin-left: 13%; - margin-right: 20%; - width: 60%; + // div:nth-of-type(2):not(#edit-actions):not(.form-item-couriel-mail-2):not(.form-item-titre-du-document):not(.form-item-intitule-de-l-offre-de-service){ // display: none; // } @@ -22,33 +20,49 @@ flex-wrap: wrap; flex-basis: auto; justify-content: flex-start; - margin-top: 10vh; - // input:focus ~ label, - // input:not(:placeholder-shown) ~ label { - // z-index: -1; - // } - // overflow: visible; - // .required{ - // border-color: red !important; - // display: block; - // content: " "; - // } - - // .required::after{ - // content: " * "; - // } - - #edit-processed-text{ + #edit-titre{ width: 100%; + font-family: 'Source Code Pro'; + font-size: 2rem; + font-weight: 800; + color: $white; + background-color: $blue-light; + text-transform: uppercase; + padding-left: 13%; + padding-top: 2rem; + padding-bottom: 2rem; + vertical-align: middle; + } + + #edit-sous-titre{ + width: 100%; + font-family: 'Source Code Pro'; + font-size: 2rem; + font-weight: 800; + color: $white; + background-color: $blue-light; + text-transform: uppercase; + width: fit-content; + margin-left: 13%; + margin-top: 8rem; + } + #edit-processed-text{ + margin-top: 10vh; + margin-left: 13%; + margin-right: 20%; + width: 60%; } .form-item-titre-du-document{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; + &:after{ content: "*"; color: red; @@ -57,31 +71,19 @@ } label{width: 100%;} input{ - // overflow: visible; width: 90%; height: 5rem; - - // ::placeholder{ - // content:"Titre du document"; - // } - // &::after{ - - // display: block; - // content: " "; - // color: red; - // background-image: url("../images/pictos/twitter_black.svg"); - // font-size: 10rem; - // } } - } .form-item-auteur-s-{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; &:after{ content: "*"; color: red; @@ -95,11 +97,12 @@ } .form-item-date-de-parution{ + margin-left: 13%; + width: 27%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 45%; &:after{ content: "*"; color: red; @@ -112,11 +115,12 @@ } } .form-item-nombre-de-pages{ + margin-right: 20%; + width: 27%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 45%; margin-right: 3rem; label{width: 100%;} input{ @@ -125,10 +129,12 @@ } } .form-item-nom-de-la-revue-et-de-l-editeur{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; - width: 100%; margin-top: 2rem; &:after{ content: "*"; @@ -142,11 +148,13 @@ } } .form-item-type-de-document-revue-article-etc-{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; &:after{ content: "*"; color: red; @@ -159,10 +167,12 @@ } } .form-item-resume-de-la-ressource{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; - width: 100%; margin-top: 2rem; &:after{ content: "*"; @@ -178,12 +188,13 @@ } .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; - label{width: 100%;} input{ width: 90%; @@ -191,11 +202,13 @@ } } .form-item-url-vers-une-video-ou-un-site-internet{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; label{width: 100%;} input{ width: 90%; @@ -203,11 +216,12 @@ } } .form-item-courriel{ + margin-left: 13%; + width: 28%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 47%; &:after{ content: "*"; color: red; @@ -218,11 +232,12 @@ input{width: 90%;} } .form-item-telephone{ + margin-right: 20%; + width: 29%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 47%; margin-right: 3rem; &:after{ content: "*"; @@ -235,7 +250,7 @@ } #edit-actions{ // display: inline-flex; - width: 100%; + width: 60%; input{ width: 30%; align-self: flex-end; @@ -260,22 +275,52 @@ flex-wrap: wrap; flex-basis: auto; justify-content: flex-start; - margin-top: 10vh; // input:focus ~ label, // input:not(:placeholder-shown) ~ label { // z-index: -1; // } - - #edit-processed-text{ + #edit-title{ width: 100%; + font-family: 'Source Code Pro'; + font-size: 2rem; + font-weight: 800; + color: $white; + background-color: $blue-light; + text-transform: uppercase; + padding-left: 13%; + padding-top: 2rem; + padding-bottom: 2rem; + vertical-align: middle; } + #edit-sous-titre{ + width: 100%; + font-family: 'Source Code Pro'; + font-size: 2rem; + font-weight: 800; + color: $white; + background-color: $blue-light; + text-transform: uppercase; + width: fit-content; + margin-left: 13%; + margin-top: 8rem; + } + #edit-processed-text{ + margin-top: 10vh; + margin-left: 13%; + margin-right: 20%; + width: 60%; + } + + .form-item-intitule-de-l-offre-de-service{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; &:after{ content: "*"; color: red; @@ -291,11 +336,13 @@ } .form-item-structure{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; &:after{ content: "*"; color: red; @@ -309,11 +356,13 @@ } .form-item-localisation{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; &:after{ content: "*"; color: red; @@ -326,13 +375,16 @@ } } div{ + width: 100%; .form-item-description{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; label{width: 100%;} textarea{ width: 90%; @@ -340,11 +392,13 @@ } } .form-item-description{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; label{width: 100%;} textarea{ width: 90%; @@ -353,11 +407,13 @@ #edit-lien--wrapper{ width: 100%; .form-item-lien-url{ + margin-left: 13%; + margin-right: 20%; + width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 100%; &:after{ content: "*"; color: red; @@ -371,11 +427,12 @@ } } .form-item-courriel{ + margin-left: 13%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 47%; + width: 28%; &:after{ content: "*"; color: red; @@ -386,11 +443,12 @@ input{width: 90%;} } .form-item-telephone{ + margin-right: 20%; + width: 29%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2rem; - width: 47%; margin-right: 3rem; &:after{ content: "*"; @@ -401,9 +459,18 @@ label{width: 100%;} input{width: 90%;} } + + .form-item-j-accepte-que-mon-courriel-soit-diffuse-sur-la-page-de-mon-offre{ + + margin-top: 3rem; + margin-bottom: 3rem; + margin-left: 13%; + margin-right: 20%; + width: 60%; + } #edit-actions{ // display: inline-flex; - width: 100%; + width: 60%; input{ width: 30%; align-self: flex-end; @@ -428,42 +495,60 @@ flex-direction: row; flex-wrap: wrap; flex-basis: auto; - justify-content: space-between; + justify-content: flex-start; margin-top: 10vh; + width: 60%; + margin-left: 13%; + margin-right: 20%; - - #edit-couriel--wrapper{ - width: 100%; - .form-item-couriel-mail-1{ + .form-item-couriel{ + display: flex; + flex-direction: row; + flex-wrap: wrap; margin-top: 2rem; width: 100%; + &:after{ + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; + } + label{width: 100%;} input{ - width: 100%; + width: 90%; } } - .form-item-couriel-mail-2{ - margin-top: 2rem; - width: 100%; - input{ - width: 100%; - } - - } - } + + .form-item-question{ + display: flex; + flex-direction: row; + flex-wrap: wrap; margin-top: 2rem; width: 100%; - textarea{ - width: 100%; + &:after{ + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.9rem; } + label{width: 100%;} + div{ + width: 90%; + textarea{ + width: 100%; + height: 5rem; + } + } + } #edit-actions{ // display: inline-flex; - width: 100%; + width: 90%; input{ width: 30%; align-self: flex-end;