armentieres: add search cell description, icon and border on result (#70745)

static/armentieres/_combo.scss

@@ -182,20 +182,51 @@ div.wcscurrentformscell {
 }
 
 // Search cell
-.gru-content div.searchcell form {
-	padding: 0;
-	input[type="search"] {
-		background: $gray-xlight;
-		border: none;
+.gru-content div.searchcell {
+	.combo-search {
+		&--hint {
+			padding: 0;
+			margin-bottom: 1rem;
+		}
 
-		&:focus {
-			background: $gray-xlight;
-			border: none;
+		&--button {
+			display: none;
 		}
 	}
 
-	.combo-search--button {
-		display: none;
+	form {
+		padding: 0;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+
+		input[type="search"] {
+			position: relative;
+			padding-left: 2rem;
+			margin-right: 0;
+
+			&:focus {
+				background: $gray-xlight;
+				border: none;
+			}
+		}
+
+		&::before {
+			position: absolute;
+			top: 0.4rem;
+			left: 0.5rem;
+			z-index: 1;
+
+			background: transparent;
+			font-family: FontAwesome;
+			font-size: 1.2rem;
+			color: $gray;
+			content: "\f002";
+		}
+	}
+
+	.links-list ul li {
+		border-bottom: 1px solid $gray;
 	}
 }
 

templates/variants/armentieres/combo/search-cell.html

@@ -0,0 +1,8 @@
+{% extends "combo/search-cell.html" %}
+
+{% block search-form-pre %}
+  <div class="combo-search--hint">
+    Lorem ipsum dolor sit amet. Cum labore minima ad earum ducimus et ipsum sapiente et rerum vero est sequi similique. Hic quis sint ut nostrum dignissimos est exercitationem voluptate eum accusantium nemo non esse animi quo assumenda voluptatem aut nostrum quos.
+  </div>
+{% endblock %}
+