From 450708981b5d1096e1e46cdea5ded3be7a1fd7ed Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Thu, 30 Mar 2023 17:57:54 +0200
Subject: [PATCH] scss: put buttons icons code inside @mixin (#74954)

---
 static/includes/_forms.scss | 52 +++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index 57b32ca1..6009bad3 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -656,34 +656,40 @@ div.select2-search {
 	}
 }
 
-// Buttons with icons
-
-.submit-button-with-icon {
-	&::after {
+// Button with FontAwesome icon
+// $position: left || right
+// $character : UTF value
+@mixin button-with-icon($position: right, $character: '\f105') {
+	&::before, &::after {
 		font-family: FontAwesome;
-		content: $submit-button-icon;
-		margin-left: 0.5em;
+	}
+	@if ($position == left) {
+		&::before {
+			content: $character;
+			margin-right: 0.5em;
+		}
+	}
+	@if ($position == right) {
+		&::after {
+			content: $character;
+			margin-left: 0.5em;
+		}
 	}
 }
 
-.previous-button-with-icon {
-	&::before {
-		font-family: FontAwesome;
-		content: $previous-button-icon;
-		margin-right: 0.5em;
-	}
-}
-
-.cancel-button-with-icon {
-	&::before {
-		font-family: FontAwesome;
-		content: $cancel-button-icon;
-		margin-right: 0.5em;
-	}
-}
-
-
 @if $buttons-with-icons {
+	.submit-button-with-icon {
+		@include button-with-icon(right, $submit-button-icon);
+	}
+
+	.previous-button-with-icon {
+		@include button-with-icon(left, $previous-button-icon);
+	}
+
+	.cancel-button-with-icon {
+		@include button-with-icon(left, $cancel-button-icon);
+	}
+
 	.quixote:not(#wf-actions) div.buttons {
 		@each $btn in (submit, previous, cancel) {
 			.#{$btn}-button button {