From dc829284b533c152845b8204b7c5c4001fa4986c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Mon, 25 Jun 2018 11:12:28 +0200
Subject: [PATCH] scss: add variables to control widget backgrounds/borders
 (#24745)

---
 help/fr/misc-scss.page      | 15 +++++++++++++++
 static/includes/_forms.scss | 10 +++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index 256dcb3..b693f81 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -333,11 +333,26 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <td><p>Taille de l'arrondi à appliquer aux boutons</p></td>
   <td><p><var>$border-radius</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$widget-background</code></p></td>
+  <td><p>Couleur de fond des champs de formulaire (texte, liste…)</p></td>
+  <td><p><var>white</var></p></td>
+ </tr>
  <tr>
   <td><p><code>$widget-border</code></p></td>
   <td><p>Style de bordure des champs de formulaire (texte, liste…)</p></td>
   <td><p><var>1px solid #AAA</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$widget-focus-background</code></p></td>
+  <td><p>Couleur de fond des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
+  <td><p><var>white</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$widget-focus-border</code></p></td>
+  <td><p>Style de bordure des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
+  <td><p><var>white</var></p></td>
+ </tr>
  <tr>
   <td><p><code>$widget-border-radius</code></p></td>
   <td><p>Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td>
diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index 7fd3940..f5df99b 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -8,8 +8,11 @@ $button-hover-background: $button-background !default;
 $button-hover-color: $button-color !default;
 $button-border-radius: $border-radius !default;
 
+$widget-background: white !default;
 $widget-border: 1px solid #AAA !default;
 $widget-border-radius: 0 !default;
+$widget-focus-background: inherit !default;
+$widget-focus-border: 1px solid #AAA !default;
 
 /* $form-style: global style of form elements; possible values
  * are:
@@ -110,6 +113,7 @@ input[type=submit]:disabled {
 }
 
 input, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
+	background: $widget-background;
 	border: $widget-border;
 	border-radius: $widget-border-radius;
 	box-sizing: border-box;
@@ -117,6 +121,11 @@ input, input[type="text"], input[type="email"], input[type="password"], input[ty
 	outline: medium none;
 	padding: 0.7ex 0.7em 0.7ex 0.7em;
 	max-width: 100%;
+	transition: all 0.5s ease;
+	&:focus {
+		background-color: $widget-focus-background;
+		border: $widget-focus-border;
+	}
 }
 
 input[readonly], select[readonly], textarea[readonly] {
@@ -134,7 +143,6 @@ input[type=file] {
 }
 
 select {
-	background: white;
 	@include vendor-prefix('appearance', 'none');
 	padding-right: 4em;
 	background-image: url($data_uri_arrow-down);
-- 
2.17.1