Browse Source

css filtres projets

ouidade 6 months ago
parent
commit
2d34e325ee

+ 14 - 6
web/themes/custom/eql/css-compiled/styles.css

@@ -3021,16 +3021,17 @@ a {
             padding-bottom: 3rem; } }
         .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters::before {
           content: 'Filtrer par :';
-          margin-right: 1rem;
+          margin-right: 2rem;
           margin-bottom: 1rem;
-          width: 160px; }
+          min-width: fit-content; }
           @media (max-width: 479px) {
             .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters::before {
               padding-bottom: 1rem; } }
         .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 {
           display: flex;
           flex-direction: row;
-          flex-wrap: wrap; }
+          flex-wrap: wrap;
+          position: relative; }
           .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 .form-item {
             margin-right: 2rem;
             margin-bottom: 2rem; }
@@ -3076,19 +3077,26 @@ a {
             color: white;
             text-transform: uppercase;
             border: none;
-            padding: 0.1rem 0.7rem;
-            margin-left: 2rem; }
+            padding: 0.3rem 0.7rem; }
             @media (max-width: 479px) {
               .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-submit-projets {
                 margin-left: 0rem;
                 margin-right: 2rem; } }
+            @media (min-width: 1495px) {
+              .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-submit-projets {
+                position: absolute;
+                right: 150px; } }
           .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-reset {
             background-color: #009ee3;
             color: white;
             text-transform: uppercase;
             border: none;
-            padding: 0.1rem 0.7rem;
+            padding: 0.3rem 0.7rem;
             margin-left: 1rem; }
+            @media (min-width: 1495px) {
+              .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-reset {
+                position: absolute;
+                right: 0px; } }
           .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input[type="checkbox"] {
             display: none; }
           .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input[type="checkbox"] + label::before {

+ 17 - 6
web/themes/custom/eql/scss/pages/_lesprojets.scss

@@ -125,9 +125,10 @@
                                   
                                     &::before{
                                         content: 'Filtrer par :';
-                                        margin-right: 1rem;
+                                        margin-right: 2rem;
                                         margin-bottom: 1rem;
-                                        width: 160px;
+                                        // width: 160px;
+                                        min-width: fit-content;
                                         @media (max-width: 479px){
                                             padding-bottom: 1rem;
                                         }
@@ -138,6 +139,7 @@
                                         display: flex;
                                         flex-direction: row;
                                         flex-wrap: wrap;
+                                        position: relative;
                                         .form-item{
                                             margin-right: 2rem;
                                             margin-bottom: 2rem;
@@ -195,21 +197,30 @@
                                             color: white;
                                             text-transform: uppercase;
                                             border: none;
-                                            padding: 0.1rem 0.7rem;
-                                            margin-left: 2rem;
+                                            padding: 0.3rem 0.7rem;
+                                            // margin-left: 2rem;
                                             @media (max-width: 479px){
                                                 margin-left: 0rem;
                                                 margin-right: 2rem;
                                             }
-                                           
+                                            @media (min-width:1495px) {
+                                                // margin-left: 0;
+                                                position: absolute;
+                                                right: 150px;
+                                            }
                                         }
                                         #edit-reset{
                                             background-color: $blue-light; 
                                             color: white;
                                             text-transform: uppercase;
                                             border: none;
-                                            padding: 0.1rem 0.7rem;
+                                            padding: 0.3rem 0.7rem;
                                             margin-left: 1rem;
+                                            @media (min-width:1495px) {
+                                                position: absolute;
+                                                right: 0px;
+                                            }
+
                                         }
 
                                         input[type="checkbox"]{