search

assets/css/_page-header.scss

@@ -1,3 +1,4 @@
+@use "abstracts/mixins.scss" as *;
 
 .page-header{
     // margin-top: calc(var(--spacing)*1);

assets/css/_site-header.scss

@@ -1,3 +1,5 @@
+@use "abstracts/mixins.scss" as *;
+
 #site-header{
     height: var(--header-h);
     width: 100vw;
@@ -38,52 +40,6 @@
     list-style: none;
 }
 
-/*----------------*/
-/*   search bar   */
-/*----------------*/
-
-.search {
-    display: flex;
-    flex-direction: row-reverse;
-    height: calc(var(--unit)*1.5);
-    flex-grow: 2;
-}
-
-.search__toggle {
-    display: none;
-}
-.search__label {
-    cursor: pointer;
-    user-select: none;
-    width: calc(var(--unit)*1.5);
-    height: calc(var(--unit)*1.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.search__input {
-    display: none;
-}
-.search__icon{
-    width: var(--unit);
-}
-
-.search__icon--open {
-    display: block;
-}
-.search__icon--close {
-    display: none;
-}
-
-.search__toggle:checked ~ .search__input {
-    display: block;
-}
-.search__toggle:checked ~ .search__label .search__icon--open {
-    display: none;
-}
-.search__toggle:checked ~ .search__label .search__icon--close {
-    display: block;
-}
 
 #btn__connexion{
     font-weight: 500;

assets/css/abstracts/_var.scss

@@ -56,6 +56,7 @@
     --color-green-black:    #016042;
 
     --color-txt:       rgb(41, 41, 41);
+    --color-txt: #0D2846;
     --color-txt-light: #a5a9a9;
     --color-light:      #DCDDDD;
     --color-x-light:    #eaebeb;

assets/css/components/_buttons.scss

@@ -11,7 +11,7 @@
     align-items: center;
     justify-content: center;
     height: calc(var(--unit)*1.5);
-
+    min-width: calc(var(--unit)*1.5);
     border-radius: var(--radius-btn);
     cursor: pointer;
 

assets/css/components/_search.scss

@@ -0,0 +1,110 @@
+@use "../abstracts/mixins.scss" as *;
+
+.search {
+    display: flex;
+    height: calc(var(--unit)*1.5);
+    flex-grow: 2;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: calc(var(--padding-inner)*0.5);
+
+    svg {
+        @include icon(18px);
+        stroke-width: 1px;
+        stroke: var(--color-txt);
+    }
+
+
+
+    .search__input-group {
+        display: grid;
+        grid-template-columns: var(--unit) 1fr;
+        width: 100%;
+        height: calc(var(--unit)*1.5);
+
+
+        input {
+            grid-column: 1/end;
+            grid-row: 1;
+            padding-left: calc(var(--padding-inner)*2.5);
+            font-family: sans-serif;
+            font-family: var(--font);
+            font-size: var(--fs-normal);
+            font-weight: 500;
+            border-radius: var(--radius-small);
+            border: 1px solid var(--color-txt-light);
+            outline: none;
+
+            &::placeholder {
+                font-family: var(--font);
+                font-size: var(--fs-normal);
+            }
+
+            &:focus {
+                outline: 1px solid var(--color-violet);
+            }
+
+        }
+
+        button {
+            grid-column: 1;
+            grid-row: 1;
+            z-index: 10;
+            align-self: center;
+            position: relative;
+            left: 10px;
+            top: 2px;
+
+        }
+    }
+
+    .search__icon {
+        width: calc(var(--unit)*1.25);
+        height: calc(var(--unit)*1.25);
+        // background-color: red;
+        border-radius: var(--radius-btn);
+        border: 1px solid var(--color-txt);
+        // background-color: var(--color-x-light);
+        cursor: pointer;
+
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+ 
+        &:hover {
+            background-color: var(--color-x-light);
+        }
+    }
+
+}
+
+
+#search-toggle {
+    display: none;
+}
+
+
+#search-toggle~[for="search-toggle"] .search__icon--open {
+    display: flex;
+}
+
+#search-toggle~[for="search-toggle"] .search__icon--close {
+    display: none;
+}
+
+#search-toggle~.search__input-group {
+    display: none;
+}
+
+#search-toggle:checked~[for="search-toggle"] .search__icon--open {
+    display: none;
+}
+
+#search-toggle:checked~[for="search-toggle"] .search__icon--close {
+    display: flex;
+}
+
+#search-toggle:checked~.search__input-group {
+    display: grid;
+}

assets/css/components/_taxon-card-inline.scss

@@ -31,10 +31,7 @@
         }
         &:first-of-type::before{ border-color: var(--color-green-light);}
 
-        .chart-edit {
-            display: block;
-            margin-right: var(--padding-inner);
-        }
+       
 
        
 
@@ -96,4 +93,8 @@
             display: block!important;
             z-index: 30;
     }
+     .taxon .chart-edit {
+            display: block;
+            margin-right: var(--padding-inner);
+        }
 }

assets/css/pages/_home-item-nav.scss

@@ -13,6 +13,8 @@
     display: flex;
     flex-direction: column;
 
+    text-decoration: none;
+
 
     cursor: pointer;
 

assets/css/pages/_home.scss

@@ -55,6 +55,11 @@
 
     .species-list{
         margin-bottom: calc(var(--spacing)*3);
+
+        .taxon:hover{
+            border-color: red!important;
+            
+        }
     }
 
     .species-list .title{