mixin triangle + loupe recherche fixée + form abimailman une liste

formulaires/abomailman_mini_une_liste.html

@@ -11,7 +11,6 @@
 			#SET{erreurs,#ENV**{erreurs}|table_valeur{la_demo}}
 			<div class="editer_email obligatoire[ (#GET{erreurs}|oui)erreur]">
 				<label for="email"><:baz_april:ne_manquez_pas_les_infos:></label>
-				<i class="fas fa-angle-right"></i>
 				[<span class='erreur_message'>(#GET{erreurs})</span>]
 				<input name="email" id="email" class="text" type="text" placeholder="<:baz_april:s_inscrire_a_la_lettre_d_information:>" />
 			</div>

squelettes/scss/styles/_nav.scss

@@ -83,6 +83,7 @@
 		padding-top:($spacer/2);
 		font-size:0.95rem;
 		z-index:9;
+		position:relative;
 		> ul { 
 			text-align:right;
 			@include vendor-prefix(transition,all 0.3s ease-in-out);
@@ -137,6 +138,8 @@
 					@include visuallyhidden;
 				}
 				a {
+					display:inline;
+					padding:0;
 					border:0;
 					background:none;
 					&:hover i.fa-search, &:focus i.fa-search {
@@ -159,6 +162,7 @@
 					left:auto;
 					right:0;
 					border-radius: $spacer/2;
+					z-index:2;
 					@include vendor-prefix(transition,all 0.3s ease-in-out);
 					form:before {
 						left:0.5rem;

squelettes/scss/utils/_mixins.scss

@@ -253,6 +253,53 @@
 	background: -o-linear-gradient($couleur1,$couleur2,$couleur3,$couleur4);
 }
 
+// Triangle helper mixin
+// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
+// @param {Color} $color [currentcolor] - Triangle color 
+// @param {Length} $size [1em] - Triangle size
+// Example : 
+//	.foo {
+//		position: relative;
+//		&:before {
+//			@include triangle(bottom, red, 0.25em);
+//			position: absolute;
+//			left: 100%;
+//			top: 50%;
+//		}
+//	}
+@mixin triangle($direction, $color: currentcolor, $size: 1em, $coefficient: 1.5) {
+	@if not index(top right bottom left, $direction) {
+		@error "Direction must be either `top`, `right`, `bottom` or `left`.";
+	}
+
+	width: 0;
+	height: 0;
+	content: '';
+	z-index: 2;
+	@if $direction == top {
+		border-bottom: ($size * $coefficient) solid $color;
+	}
+	@if $direction == bottom {
+		border-top: ($size * $coefficient) solid $color;
+	}
+	@if $direction == right {
+		border-left: ($size * $coefficient) solid $color;
+	}
+	@if $direction == left {
+		border-right: ($size * $coefficient) solid $color;
+	}
+	
+
+	$perpendicular-borders: $size solid transparent;
+
+	@if $direction == top or $direction == bottom {
+		border-left:   $perpendicular-borders;
+		border-right:  $perpendicular-borders;
+	} @else if $direction == right or $direction == left {
+		border-bottom: $perpendicular-borders;
+		border-top:    $perpendicular-borders;
+	}
+}
 
 /// Font Face
 /// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6#file-_mixins-scss