From f70112e95654789495b5b8ee50d149c3c22661b3 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Thu, 10 Sep 2020 15:19:31 +0200
Subject: [PATCH] Add optional input field illustration feather icon

---
 assets/sass/_vars.scss  |  1 +
 assets/sass/layout.scss | 27 +++++++++++++++++++++++----
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/assets/sass/_vars.scss b/assets/sass/_vars.scss
index 21d06e7..f0eb1fc 100644
--- a/assets/sass/_vars.scss
+++ b/assets/sass/_vars.scss
@@ -9,6 +9,7 @@ $defaultTextColor: #ffffff;
 $headerBackground: darken($primary, 7.5%);
 $footerBackground: lighten($headerBackground, 1%);
 $panelBackground: lighten($headerBackground, 1%);
+$inputBackground: darken($panelBackground, 4%);
 
 $info: #4499ff;
 $infoText: darken($info, 42%);
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index f46c5e7..9ab7d43 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -353,6 +353,20 @@ form {
 		display: flex;
 		flex-direction: column;
 		margin: 16px auto;
+		background: $inputBackground;
+		border-radius: 5px;
+		overflow: hidden;
+
+		> .feather.icon {
+			position: absolute;
+			top: 50%;
+			right: 8px;
+			transform: translateY(-50%);
+			z-index: 0;
+
+			--icon-size: 24px;
+			opacity: 0.75;
+		}
 
 		label {
 			position: absolute;
@@ -379,10 +393,10 @@ form {
 		}
 
 		input, select, textarea, .input-group {
+			z-index: 1;
 			border: 0;
 			color: $defaultTextColor;
-			background: lighten($panelBackground, 4%);
-			border-radius: 5px;
+			background: transparent;
 			font-size: 16px;
 
 			&:focus, &:not([value=""]), &[type="file"] {
@@ -435,17 +449,22 @@ form {
 
 		&.inline {
 			flex-direction: row;
+			align-items: center;
 
 			input[type=checkbox] {
-				text-align: left;
 				width: min-content;
 				height: min-content;
+				margin: 8px;
+				text-align: left;
 
 				& ~ label {
 					position: static;
+					flex-grow: 1;
 					display: inline;
-					padding-left: 8px;
+					padding: 8px;
+
 					font-size: 16px;
+					text-align: left;
 				}
 			}
 		}