From f07d6cc3df9c8f128314ffee6c4068d85c80bd7c Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Mon, 21 Oct 2024 16:59:30 +0200
Subject: [PATCH] first page proto sytling

---
 resources/css/pages/repertoire-metiers.css | 101 +++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 resources/css/pages/repertoire-metiers.css

diff --git a/resources/css/pages/repertoire-metiers.css b/resources/css/pages/repertoire-metiers.css
new file mode 100644
index 0000000..d18951f
--- /dev/null
+++ b/resources/css/pages/repertoire-metiers.css
@@ -0,0 +1,101 @@
+.artisans-posts {
+  @apply flex gap-4 pt-8;
+  &__grid {
+    @apply flex flex-col lg:grid grid-cols-1 lg:grid-cols-2 gap-6  w-full;
+  }
+  .card-artisans {
+    @apply h-fit;
+  }
+}
+
+.metier-patrimoine-searchbar {
+  @apply max-w-xs;
+  h4 {
+    @apply my-0;
+  }
+  .checkbox-choice {
+    @apply pl-0;
+    @apply flex flex-wrap;
+
+    ul {
+      @apply pl-4 my-1 w-full;
+    }
+    &:before {
+      content: none;
+      /* box-shadow: inset 1em 1em #8B2FF7; */
+    }
+    label,
+    input {
+      /* @apply inline; */
+    }
+    label {
+      @apply -translate-y-1 ml-2;
+    }
+    input[type='checkbox']:before {
+      box-shadow: inset 1em 1em #8b2ff7;
+    }
+  }
+  .fieldset-titling {
+    @apply flex items-center gap-4;
+  }
+  .fieldset-icon {
+    @apply w-10 h-10 p-2 bg-white rounded-lg shadowed;
+    object-fit: contain;
+  }
+  &__search-by {
+    @apply flex flex-col gap-4 mt-4;
+    legend {
+      @apply block text-neutral-400 uppercase !text-base tracking-wider mb-4;
+    }
+    .search-radio-card {
+      @apply bg-white  rounded-lg p-4  shadowed flex justify-between;
+      label {
+        @apply font-bold;
+      }
+
+      label:before {
+        @apply mr-2 translate-y-2 bg-no-repeat;
+        background-position: center;
+        background-size: contain;
+
+        content: '';
+        display: inline-block;
+        height: 30px;
+        width: 36px;
+      }
+      label[for='building_elements']:before {
+        background-image: url('../resources/img/Homegrade_repertoire-elements.svg');
+      }
+      label[for='job_types']:before {
+        background-image: url('../resources/img/Homegrade_repertoire-metiers.svg');
+      }
+    }
+  }
+
+  &__elements-batiments-filters,
+  &__metiers-filters {
+    @apply border border-neutral-300 p-4 rounded-3xl my-4;
+  }
+  /* HIDE METIERS FILTERS WHEN SEARCH IS ON ELEMENTS BATIMENTS */
+  &:has(
+      .metier-patrimoine-searchbar__search-by
+        #elements_batiments_checkbox:checked
+    ) {
+    .metier-patrimoine-searchbar__metiers-filters {
+      /* @apply hidden; */
+      @apply opacity-40;
+    }
+  }
+
+  /* HIDE ELEMENTS BATIMENTS FILTERS WHEN SEARCH IS ON METIERS */
+
+  &:has(
+      .metier-patrimoine-searchbar__search-by
+        #metiers_checkbox:checked
+    ) {
+    .metier-patrimoine-searchbar__elements-batiments-filters {
+      /* @apply hidden; */
+      @apply opacity-40;
+    }
+  }
+}