champs recherche moche

web_main/themes/custom/mathallo/assets/img/loupe.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<g>
+	<path d="M497.938,430.063l-126.914-126.91C389.287,272.988,400,237.762,400,200C400,89.719,310.281,0,200,0
+		C89.719,0,0,89.719,0,200c0,110.281,89.719,200,200,200c37.762,0,72.984-10.711,103.148-28.973l126.914,126.91
+		C439.438,507.313,451.719,512,464,512c12.281,0,24.563-4.688,33.938-14.063C516.688,479.195,516.688,448.805,497.938,430.063z
+		 M64,200c0-74.992,61.016-136,136-136s136,61.008,136,136s-61.016,136-136,136S64,274.992,64,200z"/>
+</g>
+</svg>

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -84,6 +84,36 @@ header[role="banner"]{
     form{
       display: flex;
       align-items: baseline;
+
+      background-color: #ddd;
+      padding: 0.2em 0.5em;
+      border-radius: 1em;
+
+      input.form-search{
+        background-color: #ddd;
+        border: none;
+        outline: none;
+        &:focus{
+          outline: none;
+        }
+      }
+      input.form-submit{
+        -webkit-appearance: none;
+        appearance: none;
+        background-color: $bleu_typo;
+        border: none;
+        width: 1em;
+        height: 1em;
+        cursor: pointer;
+        -webkit-mask-image: url('/themes/custom/mathallo/assets/img/loupe.svg');
+        mask-image: url('/themes/custom/mathallo/assets/img/loupe.svg');
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-size: contain;
+        mask-size: contain;
+      }
     }
   }