From 2de4d57df377e93e0058b50deaf4585880a85b21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sun, 27 Feb 2022 10:41:44 +0100
Subject: [PATCH] style: use outline for focused widgets (#62209)

---
 gadjo/static/css/_forms.scss | 12 +++++++++---
 gadjo/static/css/gadjo.scss  |  3 +++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss
index 895ecf6..977adb5 100644
--- a/gadjo/static/css/_forms.scss
+++ b/gadjo/static/css/_forms.scss
@@ -11,8 +11,8 @@ $widget-border: 1px solid #AAA;
 $widget-focus-border: $widget-border;
 $widget-border-radius: 0;
 $widget-color: black;
-$widget-focus-color: black;
-$widget-focus-outline: none;
+$widget-focus-color: $widget-color;
+$widget-focus-outline: 1px solid $primary-color;
 $widget-focus-outline-offset: 0;
 
 $data_uri_arrow-down: "arrow-down.svg";
@@ -209,8 +209,14 @@ input, input[type="text"], input[type="url"], input[type="email"], input[type="p
 	@include vendor-prefix('transition', 'background-size 0.2s ease');
 	background: $widget-background;
 	color: $widget-color;
+	&:focus:not([readonly]) {
+		background-color: $widget-focus-background;
+		border: $widget-focus-border;
+		color: $widget-focus-color;
+	}
 	&:focus {
-		border-bottom-color: $button-submit-color;
+		outline: $widget-focus-outline;
+		outline-offset: $widget-focus-outline-offset;
 	}
 	&.disabled,
 	&[disabled] {
diff --git a/gadjo/static/css/gadjo.scss b/gadjo/static/css/gadjo.scss
index acca537..9a5061f 100644
--- a/gadjo/static/css/gadjo.scss
+++ b/gadjo/static/css/gadjo.scss
@@ -474,6 +474,9 @@ div#main-content {
 		border-bottom-right-radius: 0px;
 		border-bottom-left-radius: 10px;
 	}
+	form {
+		padding: 0 2px;
+	}
 }