css form operation

web/themes/custom/reha/css/reha.css

@@ -2,7 +2,7 @@
 /*reha*/
 /*global*/
 /* Colors used for REHA */
-.field--type-link, .field--type-file, .links, .views-field-edit-node, .views-field-edit-user, .form-submit, .layout-sidebar-first #block-reha-phase1 footer {
+.field--type-link, .field--type-file, .links, .views-field-edit-node, .views-field-edit-user, .form-submit, .layout-sidebar-first #block-reha-phase1 footer, #block-reha-contenudelapageprincipale #node-operation-form #edit-field-fiche-candidature-wrapper .form-managed-file, #block-reha-contenudelapageprincipale #node-operation-form #edit-field-dossier-de-candidature-wrapper .form-managed-file {
   text-transform: uppercase;
   padding: 1rem;
   border: solid black 1px;
@@ -31,6 +31,9 @@
 #edit-unlock {
   display: none; }
 
+#edit-submit:hover {
+  background-color: #fdc300; }
+
 .mailto {
   text-decoration: underline; }
 
@@ -346,8 +349,6 @@ header {
                 background-color: white; }
               header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul li:hover {
                 background-color: #fdc300; }
-  header html.js body div.dialog-off-canvas-main-canvas div.layout-container header div.region.region-header div#block-reha-views-block-current-user-block-block-1.views-element-container.block.block-views.block-views-blockcurrent-user-block-block-1 div.connected div.connected-full div div.js-view-dom-id-426705c0f405ba1cfc7a9eac64ddbe6f543fe3a21a71f2a99ef49ced31b93bc1 footer ul li {
-    border-top: 1px solid black; }
   header .bouton {
     align-self: flex-end;
     width: fit-content; }
@@ -530,7 +531,7 @@ input {
       justify-content: flex-end;
       align-items: center; }
       .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d .field--type-file {
-        width: 100%;
+        width: 80%;
         margin: 0; }
       .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d :hover {
         background-color: #fdc300; }
@@ -542,7 +543,7 @@ input {
       justify-content: flex-end;
       align-items: center; }
       .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 .field--type-file {
-        width: 100%;
+        width: 80%;
         margin: 0; }
       .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 :hover {
         background-color: #fdc300; }
@@ -564,8 +565,55 @@ input {
 html.js body div.dialog-off-canvas-main-canvas div.layout-container main div.layout-content div.region.region-content div#block-reha-contenudelapageprincipale.block.block-system.block-system-main-block div.views-element-container div.js-view-dom-id-586565a78462afa14f00a79092967e0998bcad1d346481ed34544a2c80124f64 footer {
   background-color: rgba(153, 147, 174, 0) !important; }
 
-#block-reha-contenudelapageprincipale #node-operation-form #edit-field-fiche-candidature-wrapper {
-  width: fit-content; }
-
-#block-reha-contenudelapageprincipale #node-operation-form #edit-field-dossier-de-candidature-wrapper {
-  width: 40%; }
+#block-reha-contenudelapageprincipale #node-operation-form {
+  width: 70%; }
+  #block-reha-contenudelapageprincipale #node-operation-form #edit-field-fiche-candidature-wrapper {
+    background-color: rgba(153, 147, 174, 0) !important;
+    border: none;
+    padding: 0; }
+    #block-reha-contenudelapageprincipale #node-operation-form #edit-field-fiche-candidature-wrapper label {
+      order: 1;
+      font-weight: 800; }
+    #block-reha-contenudelapageprincipale #node-operation-form #edit-field-fiche-candidature-wrapper .description {
+      text-transform: lowercase;
+      order: 2;
+      font-style: italic; }
+    #block-reha-contenudelapageprincipale #node-operation-form #edit-field-fiche-candidature-wrapper .form-managed-file {
+      order: 3;
+      margin-top: 1rem; }
+  #block-reha-contenudelapageprincipale #node-operation-form #edit-field-dossier-de-candidature-wrapper {
+    background-color: rgba(153, 147, 174, 0) !important;
+    border: none;
+    padding: 0;
+    margin-top: 1rem; }
+    #block-reha-contenudelapageprincipale #node-operation-form #edit-field-dossier-de-candidature-wrapper label {
+      order: 1;
+      font-weight: 800; }
+    #block-reha-contenudelapageprincipale #node-operation-form #edit-field-dossier-de-candidature-wrapper .description {
+      text-transform: lowercase;
+      order: 2;
+      font-style: italic; }
+    #block-reha-contenudelapageprincipale #node-operation-form #edit-field-dossier-de-candidature-wrapper .form-managed-file {
+      order: 3;
+      margin-top: 1rem; }
+  #block-reha-contenudelapageprincipale #node-operation-form label {
+    font-weight: 800; }
+  #block-reha-contenudelapageprincipale #node-operation-form .form-wrapper {
+    margin-bottom: 1rem;
+    margin-top: 1rem; }
+  #block-reha-contenudelapageprincipale #node-operation-form #edit-field-commentaire-0-value {
+    width: 80%; }
+  #block-reha-contenudelapageprincipale #node-operation-form #edit-field-adresse-0-address-container2 {
+    display: flex;
+    flex-direction: row;
+    width: 100%; }
+    #block-reha-contenudelapageprincipale #node-operation-form #edit-field-adresse-0-address-container2 .form-item {
+      display: flex;
+      flex-direction: row; }
+  #block-reha-contenudelapageprincipale #node-operation-form .form-item {
+    display: flex;
+    flex-direction: column; }
+  #block-reha-contenudelapageprincipale #node-operation-form #edit-field-commentaire-wrapper {
+    margin-bottom: 2rem; }
+  #block-reha-contenudelapageprincipale #node-operation-form .counter {
+    font-style: italic; }

web/themes/custom/reha/scss/global/variables/_buttons.scss

@@ -62,4 +62,8 @@ footer{
 }
 #edit-unlock{
     display: none;
+}
+
+#edit-submit:hover{
+    background-color: $yellow-puca;
 }

web/themes/custom/reha/scss/global/variables/_typography.scss

@@ -1,9 +1,9 @@
 // Font Family
-// $font-family-default: "Marianne", sans-serif;
-// $font-family-header: "Marianne", sans-serif;
-// $font-family-chapeau: "Marianne", sans-serif;
-$font-family-mono: "Inconsolata", monospace;
-$font-family-serif:	"Georgia", "Times", "Times New Roman", serif;
+$font-family-default: "Marianne", sans-serif;
+$font-family-header: "Marianne", sans-serif;
+$font-family-chapeau: "Marianne", sans-serif;
+// $font-family-mono: "Inconsolata", monospace;
+// $font-family-serif:	"Georgia", "Times", "Times New Roman", serif;
 
 
 

web/themes/custom/reha/scss/pages/_home.scss

@@ -17,11 +17,9 @@
           font-weight: 900;
           margin: 0;
           line-height: 0.6;
-
         }
+
         .block-region-content{
-            // display: flex;
-            // flex-wrap: wrap;
             display: grid;
             grid-column: repeat(2, 1fr);
             .block-views-blockhome-block-1{
@@ -49,13 +47,11 @@
                     font-weight: 900;
                     line-height: 1rem;
                     font-size:1.8rem ;
-
                 }
                 .field--name-field-description{
                     margin-top: 0;
                     font-size: 2rem;
                     line-height: 2.2rem;
-                    // inline-size: 1rem;
                     p{
                         margin-top: 0.8rem;
                     }
@@ -99,7 +95,7 @@
                 justify-content: flex-end;  
                 align-items: center;
                 .field--type-file{
-                    width: 100%;
+                    width: 80%;
                     margin: 0;
                 }
                 :hover{
@@ -110,12 +106,11 @@
                 grid-column: 2;
                 grid-row: 3;
                 width: 90%;
-                // height: fit-content;
                 display: flex;
                 justify-content: flex-end;  
                 align-items: center; 
                 .field--type-file{
-                    width: 100%;
+                    width: 80%;
                     margin: 0;
                 }
                 :hover{

web/themes/custom/reha/scss/pages/_proposer-une-operation.scss

@@ -1,15 +1,82 @@
 
 #block-reha-contenudelapageprincipale{
     #node-operation-form{
+        width: 70%;
         #edit-field-fiche-candidature-wrapper{
-            // background-color: rgba(153, 147, 174, 0) !important;
-            // border: none;
-            width: fit-content;
+            background-color: rgba(153, 147, 174, 0) !important;
+            border: none;
+            padding: 0;
+            label{
+                order: 1;
+                font-weight: 800;
+            }
+            .description{
+                text-transform: lowercase;
+                order: 2;
+                font-style: italic;
+
+                // font-weight: 800;
+            }
+            .form-managed-file{
+                // background-color: white;
+                @extend %buttonwithborder;
+                order: 3;
+                margin-top: 1rem;
+            }
         }
         #edit-field-dossier-de-candidature-wrapper{
-            // background-color: rgba(153, 147, 174, 0) !important;
-            // border: none;
-            width: 40%;
+            background-color: rgba(153, 147, 174, 0) !important;
+            border: none;
+            padding: 0;
+            margin-top: 1rem;
+            // width: 40%;
+            label{
+                order: 1;
+                font-weight: 800;
+            }
+    
+            .description{
+                text-transform: lowercase;
+                order: 2;
+                font-style: italic;
+                // font-weight: 800;
+            }
+            .form-managed-file{
+                // background-color: white;
+                @extend %buttonwithborder;
+                order: 3;
+                margin-top: 1rem;
+            }
+        }
+        label{
+            font-weight: 800;
+        }
+        .form-wrapper{
+            margin-bottom: 1rem;
+            margin-top: 1rem;
+        }
+        #edit-field-commentaire-0-value{
+            width: 80%;
+        }
+        #edit-field-adresse-0-address-container2{
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            .form-item{
+                display: flex;
+                flex-direction: row;
+            }
+        }
+        .form-item{
+            display: flex;
+            flex-direction: column;
+        }
+        #edit-field-commentaire-wrapper{
+            margin-bottom: 2rem;
+
+        }
+        .counter{
+            font-style: italic;
         }
     }
 }

web/themes/custom/reha/scss/partials/_header.scss

@@ -4,16 +4,12 @@ header{
     display: block;
     height: $header-height;
     background-color: $white-header;
-    // position: fixed;
     z-index: 99;
     width: 100vw;
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-    // .sticky{
-    //         position: fixed;
-    // }
     .region-header{
         display: inline-grid;
         align-items: center;
@@ -187,7 +183,6 @@ header{
                     top: 36px;  // Positionnez-les sous les boutons
                     position: absolute;
                     background-color: $white-header;
-                    // width: 30vw;
                     width: $width-menu-slidedown;
                     height: 200vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
@@ -205,17 +200,14 @@ header{
                             display: flex;
                             flex-direction: column-reverse;
                             padding-left: 0;
-                            // border-bottom: 1px solid black ;
                             li:first-of-type{
                                 margin-top: 4rem;
                                 border-bottom: 1px solid black ;
-                                // background-color: red;
                                 ::before{
 
                                 }
                             }
                             li{
-                                // margin-bottom: 3rem;
                                 text-transform: uppercase;
                                 padding: 1rem;
                                 border: solid black 1px;
@@ -225,21 +217,13 @@ header{
                             li:hover{
                                 background-color: $yellow-puca;
                             }
-                            :first-child{
-                                // border-top: 1px solid black ;
-                                // margin-top: 2rem;
-                                // padding-top: 5px;
-                            }
                         }
                     }
                 }
             }
         }
     }
-    html.js body div.dialog-off-canvas-main-canvas div.layout-container header div.region.region-header div#block-reha-views-block-current-user-block-block-1.views-element-container.block.block-views.block-views-blockcurrent-user-block-block-1 div.connected div.connected-full div div.js-view-dom-id-426705c0f405ba1cfc7a9eac64ddbe6f543fe3a21a71f2a99ef49ced31b93bc1 footer ul li{
-        border-top: 1px solid black ;
 
-    }
     .bouton{
         align-self: flex-end;
         width: fit-content;
@@ -254,18 +238,14 @@ header{
         font-weight: 800;
         font-size: 1.8rem;
         position: relative;
-        // margin-top: 2rem;
         ::after{
             content: url(../images/noun-cross-1151731.svg);
             float: right;
             position: relative;
             left: 90px;
-            // bottom: 100px;
             cursor: pointer;
         }
-
     }
-
 }