diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 6b7127a..48739c6 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -2236,67 +2236,167 @@ a { flex-direction: row; flex-wrap: wrap; flex-basis: auto; - justify-content: space-between; + justify-content: flex-start; margin-top: 10vh; } .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-processed-text { 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; 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: 100%; + width: 90%; height: 5rem; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document input:after { - content: "*"; - color: red; } .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: 100%; } + 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 input { + .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%; } + 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 input { + .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- input { + .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 textarea { + .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-top: 2rem; } + 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: 100%; } + 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-top: 2rem; } + 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: 100%; } + 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: 45%; } + 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: 100%; } + 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: 45%; } - .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone input { + 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 { @@ -2317,48 +2417,126 @@ a { flex-direction: row; flex-wrap: wrap; flex-basis: auto; - justify-content: space-between; + 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: 100%; + 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: 100%; } + 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 textarea { + .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 input { + .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: 45%; } + 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: 100%; } + 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: 45%; } - .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone input { + 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 { diff --git a/web/themes/custom/eql/scss/pages/_webform.scss b/web/themes/custom/eql/scss/pages/_webform.scss index 6c8ed86..81671f7 100644 --- a/web/themes/custom/eql/scss/pages/_webform.scss +++ b/web/themes/custom/eql/scss/pages/_webform.scss @@ -21,7 +21,7 @@ flex-direction: row; flex-wrap: wrap; flex-basis: auto; - justify-content: space-between; + justify-content: flex-start; margin-top: 10vh; // input:focus ~ label, // input:not(:placeholder-shown) ~ label { @@ -44,15 +44,21 @@ } .form-item-titre-du-document{ + 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{ // overflow: visible; - width: 100%; + width: 90%; height: 5rem; // ::placeholder{ @@ -71,67 +77,161 @@ } .form-item-auteur-s-{ + 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-date-de-parution{ + display: flex; + flex-direction: row; + flex-wrap: wrap; margin-top: 2rem; width: 45%; + &:after{ + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; + } + label{width: 100%;} input{ - width: 100%; + width: 90%; } } .form-item-nombre-de-pages{ + display: flex; + flex-direction: row; + flex-wrap: wrap; margin-top: 2rem; width: 45%; + margin-right: 3rem; + label{width: 100%;} input{ + // margin-top: 1rem; width: 100%; } } .form-item-nom-de-la-revue-et-de-l-editeur{ + display: flex; + flex-direction: row; + flex-wrap: wrap; width: 100%; margin-top: 2rem; + &:after{ + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; + } + label{width: 100%;} input{ - width: 100%; + width: 90%; } } .form-item-type-de-document-revue-article-etc-{ + 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-resume-de-la-ressource{ + display: flex; + flex-direction: row; + flex-wrap: wrap; width: 100%; margin-top: 2rem; - textarea{width: 100%;} + &:after{ + content: "*"; + color: red; + font-size: 2rem; + padding-left: 1rem; + } + label{width:100%} + div{ + width: 90%; + textarea{width: 100%;} + } + } .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%; + + label{width: 100%;} input{ - width: 100%; + width: 90%; + height: 3rem; } } .form-item-url-vers-une-video-ou-un-site-internet{ + display: flex; + flex-direction: row; + flex-wrap: wrap; margin-top: 2rem; + width: 100%; + label{width: 100%;} input{ - width: 100%; + width: 90%; + height: 3rem; } } .form-item-courriel{ + display: flex; + flex-direction: row; + flex-wrap: wrap; margin-top: 2rem; - width: 45%; - input{width: 100%;} + width: 47%; + &:after{ + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; + } + label{width: 100%;} + input{width: 90%;} } .form-item-telephone{ + display: flex; + flex-direction: row; + flex-wrap: wrap; margin-top: 2rem; - width: 45%; - input{width: 100%;} + width: 47%; + margin-right: 3rem; + &:after{ + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; + } + label{width: 100%;} + input{width: 90%;} } #edit-actions{ // display: inline-flex; @@ -159,7 +259,7 @@ flex-direction: row; flex-wrap: wrap; flex-basis: auto; - justify-content: space-between; + justify-content: flex-start; margin-top: 10vh; // input:focus ~ label, // input:not(:placeholder-shown) ~ label { @@ -171,56 +271,135 @@ } .form-item-intitule-de-l-offre-de-service{ + 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%; height: 5rem; } } .form-item-structure{ + 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-localisation{ + 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%; } } + div{ + width: 100%; + .form-item-description{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; + width: 100%; + label{width: 100%;} + textarea{ + width: 90%; + } + } + } .form-item-description{ + display: flex; + flex-direction: row; + flex-wrap: wrap; margin-top: 2rem; width: 100%; + label{width: 100%;} textarea{ - width: 100%; + width: 90%; } } #edit-lien--wrapper{ width: 100%; .form-item-lien-url{ + 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-courriel{ + display: flex; + flex-direction: row; + flex-wrap: wrap; margin-top: 2rem; - width: 45%; - input{width: 100%;} + width: 47%; + &:after{ + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; + } + label{width: 100%;} + input{width: 90%;} } .form-item-telephone{ + display: flex; + flex-direction: row; + flex-wrap: wrap; margin-top: 2rem; - width: 45%; - input{width: 100%;} + width: 47%; + margin-right: 3rem; + &:after{ + content: "*"; + color: red; + font-size: 2rem; + padding-left: 0.5rem; + } + label{width: 100%;} + input{width: 90%;} } #edit-actions{ // display: inline-flex;