Merge branch 'denischiron-master-css' into dev

Intégration des modifications CSS de Denis
chartes · Mar 26, 2024 · 4e28396 · 4e28396
2 parents 91b26cf + 8c3cd16
commit 4e28396
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 13 deletions.
diff --git a/src/assets/css/endp_utils.css b/src/assets/css/endp_utils.css
@@ -27,8 +27,33 @@ body {
 }
 
 .input:focus {
+  border: none;
+  border-bottom: solid 1px var(--light-brown)
+}
+
+.input[type="number"],
+.input[type="search"],
+.input[type="text"] {
+  box-sizing: border-box;
+}
+
+.input[type="number"]:focus,
+.input[type="search"]:focus,
+.input[type="text"]:focus {
   outline: none;
   box-shadow: none;
+  border-width: 2px;
+}
+
+.input[type="search"]:focus,
+.input[type="text"]:focus {
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
+
+.input[type="number"]:focus {
+  padding-top: 1px;
+  padding-bottom: 1px;
 }
 
 /* Banner style */

diff --git a/src/assets/images/b_Recherche_reset_over.svg b/src/assets/images/b_Recherche_reset_over.svg
diff --git a/src/components/PersonPagination.vue b/src/components/PersonPagination.vue
@@ -165,6 +165,7 @@ nav.pagination {
   margin-left: 10px;
   margin-bottom: 5px;
   transform: translateY(-4px);
+  border: none;
   border-bottom: solid 1px var(--light-brown);
   border-radius: 0;
 

diff --git a/src/components/PersonSearchBox.vue b/src/components/PersonSearchBox.vue
@@ -120,6 +120,7 @@ export default {
 
 .container-search > p:last-child {
   padding: 0;
+  transform: translateY(35px);
 }
 
 .field.has-addons {
@@ -198,13 +199,21 @@ button.button.is-info {
 }
 
 .btn-reset {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 0.3rem;
   margin-top: 1rem !important;
-  margin-bottom: 0.3rem !important;
+  background: url("@/assets/images/b_Recherche_reset.svg") center / cover;
+  border: none;
 }
 
 .btn-reset:hover {
-  background-color: #8d1919 !important;
-  color: white !important;
+  background-image: url("@/assets/images/b_Recherche_reset_over.svg");
+}
+
+.btn-reset .icon {
+  display: none;
 }
 
 .button-reset-search {

diff --git a/src/components/RegisterBaseDateSelector.vue b/src/components/RegisterBaseDateSelector.vue
@@ -117,8 +117,8 @@ export default {
 }
 .control-input-date {
   width: 58px;
-  border-bottom: solid 1px var(--light-brown);
 }
+
 .control-input-date input {
   padding: 5px 0 4px;
   font-family: var(--font-secondary);
@@ -127,6 +127,12 @@ export default {
   color: #4A4A4A;
   text-align: center;
   height: auto;
+  border-bottom: solid 1px var(--light-brown);
+}
+
+.control-input-date input:focus {
+  padding: 5px 0 3px;
+  border-width: 2px !important;
 }
 
 .control.has-icons-left .select select {

diff --git a/src/components/RegisterNoSketchSearchBox.vue b/src/components/RegisterNoSketchSearchBox.vue
@@ -162,6 +162,11 @@ button.is-info {
   text-transform: uppercase;
 }
 
+button.is-info:hover {
+  background-color: var(--light-brown) !important;
+}
+
+
 .open-nosketch-search {
   display: inline-block;
   width: 27px;

diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
@@ -76,8 +76,12 @@
     <!-- end Filters column -->
     <!-- Results column -->
     <div class="column column-results is-12-mobile is-7-tablet is-7-desktop">
-      <div class="column-results-header">
+
+      <div  class="collapse-facets-box-toggle-wrapper">
         <a class="collapse-facets-box-toggle" @click="_collapseFacetsBox()">Filtres</a>
+      </div>
+
+      <div class="column-results-header">
         <RegisterMetadataBox
             :total-of-registers="totalRegisters"
             class="register-meta-box"
@@ -453,6 +457,7 @@ export default {
   height: 25px;
   background-image: url("@/assets/images/b_openW.svg");
   text-indent: -9999px;
+  margin-top: 25px;
 }
 
 .box-facets-column .collapse-facets-box-toggle {
@@ -517,6 +522,7 @@ export default {
 }
 
 .btn-reset-date:hover {
+  background-image: url("@/assets/images/b_Recherche_reset_over.svg");
 }
 
 .btn-reset-date .fa-undo {
@@ -592,6 +598,7 @@ export default {
     line-height: 1;
     text-transform: uppercase;
     text-indent: 0;
+    margin: 0;
   }
 
   .box-facets-column .collapse-facets-box-toggle {
@@ -600,7 +607,6 @@ export default {
     width: calc(100% - 2 * var(--mobile-side-padding));
     height: auto;
     padding: 8px 0;
-    margin: 25px 0 0;
     background: transparent url('~@/assets/images/b_Close_liste.svg') right 20px center / 30px auto no-repeat;
     box-sizing: border-box;
     color: #303030;
@@ -610,25 +616,35 @@ export default {
     padding-top: 0 !important;
   }
 
-  .columns:not(.facets-box-collapsed) .collapse-facets-box-toggle {
+  .columns:not(.facets-box-collapsed) .box-facets-column  .collapse-facets-box-toggle {
     position: sticky;
-    top:102px;
+    top: 102px;
     z-index: 10;
-    transform: translateX(-25px);
+  }
 
-    box-sizing: border-box;
+  .columns:not(.facets-box-collapsed) .collapse-facets-box-toggle {
     width: 100vw;
+    background-color: #FFF;
+    box-sizing: border-box;
+    transform: translateX(-25px);
     margin-top: 0;
-    padding: 30px 20px;
+    padding: 30px;
+  }
+
+  .columns.facets-box-collapsed .collapse-facets-box-toggle-wrapper {
+    position: sticky;
+    top:102px;
+    z-index: 10;
+    width: 100vw;
+    padding: 20px 0;
+    margin: -20px 0;
     background-color: #FFF;
   }
 
   .columns.facets-box-collapsed .collapse-facets-box-toggle {
-    position: relative;
     display: inline-block;
     width: auto;
     height: auto;
-    margin-top: 50px;
     padding: 8px 32px;
     background-color: #7B0C12;
     background-image: none;
@@ -637,6 +653,7 @@ export default {
   }
 
   .column-results-header {
+    position: relative;
     background: #FFF;
   }