Display a bottom border on inputs, not completely transparent

src/styles/_app_base.sass

@@ -175,10 +175,7 @@ nav.sidebar
 .input-group-flex
 	display: flex
 
-	.input-transparent-group+.input-transparent-group
-		margin-left: 10px
-
-.input-transparent-group
+.input-group
 	width: 100%
 	display: flex
 	align-items: center
@@ -201,17 +198,30 @@ select.input-transparent
 input, input.form-control
 	background-color: transparent
 
-.input-transparent
-	border: thin solid transparent
-	border-radius: 3px
-	padding: 5px
-	margin-top: 10px
-	margin-bottom: 10px
-	width: 100%
+.input-group
+	input, textarea, select
+		border-radius: 0
 
-	&:hover
-		border: thin solid $color-text-dark-hint
+	input, textarea, select
+		border: thin solid transparent
+		border-bottom-color: $color-background-dark
+		padding: 5px
+		margin-top: 10px
+		margin-bottom: 10px
+		width: 100%
 
+		transition: all 150ms ease-in-out
+
+		&:hover
+			border-bottom-color: $color-text-dark-secondary
+
+		&:focus
+			outline: 0
+			border-bottom-color: $color-primary
+			box-shadow: 0 1px 0 0 $color-primary
+
+	select
+		border-radius: 3px
 
 #status-bar
 	color: $color-text-dark-secondary