From d6842f8ced59af80b34a1b3dba21c99a95ee0b9f Mon Sep 17 00:00:00 2001
From: chankalan <chankalan@choc0.net>
Date: Sun, 7 Mar 2021 14:55:05 +0100
Subject: [PATCH] =?UTF-8?q?mixin=20triangle=20+=20loupe=20recherche=20fix?=
 =?UTF-8?q?=C3=A9e=20+=20form=20abimailman=20une=20liste?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 formulaires/abomailman_mini_une_liste.html |  1 -
 squelettes/scss/styles/_nav.scss           |  4 ++
 squelettes/scss/utils/_mixins.scss         | 47 ++++++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/formulaires/abomailman_mini_une_liste.html b/formulaires/abomailman_mini_une_liste.html
index 11ca621..46ed6b9 100644
--- a/formulaires/abomailman_mini_une_liste.html
+++ b/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>
diff --git a/squelettes/scss/styles/_nav.scss b/squelettes/scss/styles/_nav.scss
index 8098e9b..816d6c1 100644
--- a/squelettes/scss/styles/_nav.scss
+++ b/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;
diff --git a/squelettes/scss/utils/_mixins.scss b/squelettes/scss/utils/_mixins.scss
index 27a288f..ac5f262 100644
--- a/squelettes/scss/utils/_mixins.scss
+++ b/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