Certains input s'agrandissent à la sélection

Désormais, les champs marqués d'un .extend s'étendront sur 300px (taille
par défaut = 180px). Cela a été impliqué dans tous les thèmes. Le
champs de recherche bénéficie de cette amélioration (mais ce dernier est
un peu plus grand par défaut)

Voir issue #375

6 files changed, 45 insertions, 8 deletions

diff --git a/p/themes/Dark/freshrss.css b/p/themes/Dark/freshrss.css
index 19809c215..77dd1fc4f 100644
--- a/p/themes/Dark/freshrss.css
+++ b/p/themes/Dark/freshrss.css
@@ -31,7 +31,6 @@
 			}
 		.header > .item.search input {
 			width: 230px;
-			transition: width 200ms linear;
 		}
 			.header .item.search input:focus {
 				width: 330px;
@@ -825,9 +824,9 @@ select.number option {
 	background: #1c1c1c;
 }
 
-.header > .item.search input {
+input.extend {
 	-moz-transition: width 200ms linear;
-	 -webkit-transition: width 200ms linear;
+	-webkit-transition: width 200ms linear;
 	-o-transition: width 200ms linear;
 	-ms-transition: width 200ms linear;
 }
diff --git a/p/themes/Dark/global.css b/p/themes/Dark/global.css
index b02f00526..f96f83fc8 100644
--- a/p/themes/Dark/global.css
+++ b/p/themes/Dark/global.css
@@ -87,6 +87,13 @@ label {
 	line-height: 25px;
 	cursor: pointer;
 }
+input {
+	width: 180px;
+}
+textarea {
+	width: 360px;
+	height: 100px;
+}
 input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
@@ -116,6 +123,10 @@ input, select, textarea {
 		border-color: red;
 		box-shadow: 0 0 2px 1px red;
 	}
+	input:focus.extend {
+		width: 300px;
+		transition: width 200ms linear;
+	}
 
 .form-group {
 	margin: 0;
diff --git a/p/themes/Flat/freshrss.css b/p/themes/Flat/freshrss.css
index 894497656..04b3df842 100644
--- a/p/themes/Flat/freshrss.css
+++ b/p/themes/Flat/freshrss.css
@@ -34,7 +34,6 @@ body {
 			}
 		.header > .item.search input {
 			width: 230px;
-			transition: width 200ms linear;
 		}
 			.header .item.search input:focus {
 				width: 330px;
@@ -800,6 +799,13 @@ select.number option {
 	-ms-transform: rotate(45deg);
 }
 
+input.extend {
+	-moz-transition: width 200ms linear;
+	-webkit-transition: width 200ms linear;
+	-o-transition: width 200ms linear;
+	-ms-transition: width 200ms linear;
+}
+
 @media print {
 	.header,
 	.aside,
diff --git a/p/themes/Flat/global.css b/p/themes/Flat/global.css
index af1d37549..e3baa26ab 100644
--- a/p/themes/Flat/global.css
+++ b/p/themes/Flat/global.css
@@ -88,6 +88,13 @@ label {
 	font-weight: bold;
 	color: #444;
 }
+input {
+	width: 180px;
+}
+textarea {
+	width: 360px;
+	height: 100px;
+}
 input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
@@ -117,6 +124,10 @@ input, select, textarea {
 		border-color: red;
 		box-shadow: 0 0 2px 1px red;
 	}
+	input:focus.extend {
+		width: 300px;
+		transition: width 200ms linear;
+	}
 
 .form-group {
 	margin: 5px 0;
diff --git a/p/themes/Origine/freshrss.css b/p/themes/Origine/freshrss.css
index be549bf41..906e0c72b 100644
--- a/p/themes/Origine/freshrss.css
+++ b/p/themes/Origine/freshrss.css
@@ -32,7 +32,6 @@
 			}
 		.header > .item.search input {
 			width: 230px;
-			transition: width 200ms linear;
 		}
 			.header .item.search input:focus {
 				width: 330px;
@@ -847,9 +846,9 @@ select.number option {
 	background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
 }
 
-.header > .item.search input {
+input.extend {
 	-moz-transition: width 200ms linear;
-	 -webkit-transition: width 200ms linear;
+	-webkit-transition: width 200ms linear;
 	-o-transition: width 200ms linear;
 	-ms-transition: width 200ms linear;
 }
@@ -857,7 +856,7 @@ select.number option {
 @media(max-width: 840px) {
 	.aside {
 		-moz-transition: width 200ms linear;
-		 -webkit-transition: width 200ms linear;
+		-webkit-transition: width 200ms linear;
 		-o-transition: width 200ms linear;
 		-ms-transition: width 200ms linear;
 	}
diff --git a/p/themes/Origine/global.css b/p/themes/Origine/global.css
index 5209ad161..58a3a52b1 100644
--- a/p/themes/Origine/global.css
+++ b/p/themes/Origine/global.css
@@ -86,6 +86,13 @@ label {
 	line-height: 25px;
 	cursor: pointer;
 }
+input {
+	width: 180px;
+}
+textarea {
+	width: 360px;
+	height: 100px;
+}
 input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
@@ -116,6 +123,10 @@ input, select, textarea {
 		border-color: red;
 		box-shadow: 0 0 2px 1px red;
 	}
+	input:focus.extend {
+		width: 300px;
+		transition: width 200ms linear;
+	}
 
 .form-group {
 	margin: 0;