Improved: expanding inputs (#5040)

* fix

* wider input element

31 files changed, 16 insertions, 214 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index aa3d7eab8..25df31194 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -114,10 +114,6 @@ input:disabled, select:disabled {
 	border-color: var(--border-color-dark);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -556,10 +552,6 @@ kbd {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 99fe8fb34..6fb1bf25a 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -114,10 +114,6 @@ input:disabled, select:disabled {
 	border-color: var(--border-color-dark);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -556,10 +552,6 @@ kbd {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Ansum/_forms.scss b/p/themes/Ansum/_forms.scss
index 4f3f9e698..3bdb30664 100644
--- a/p/themes/Ansum/_forms.scss
+++ b/p/themes/Ansum/_forms.scss
@@ -120,11 +120,6 @@ input:disabled, select:disabled {
 	border-color: variables.$grey-medium-dark;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index c5a1a2b3e..cb5271dcd 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -29,7 +29,7 @@
 
 		&.search {
 			input {
-				width: 230px;
+				width: 350px;
 				color: variables.$sid-font-color;
 				border: none;
 				border-radius: 2px 0 0 2px;
@@ -42,9 +42,7 @@
 				}
 
 				&:focus {
-					width: 350px;
 					color: variables.$grey-dark;
-
 					background-color: variables.$white;
 				}
 			}
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 6789320b5..03aa67e67 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -164,10 +164,6 @@ input:disabled, select:disabled {
 	border-color: #ba9;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -673,7 +669,7 @@ form th {
 	filter: invert(80%) opacity(80%);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #363330;
 	border: none;
 	border-radius: 2px 0 0 2px;
@@ -684,7 +680,6 @@ form th {
 	background-color: #efe3d3;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #766556;
 	background-color: #fff;
 }
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 82ea37a3c..b106da359 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -164,10 +164,6 @@ input:disabled, select:disabled {
 	border-color: #ba9;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -673,7 +669,7 @@ form th {
 	filter: invert(80%) opacity(80%);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #363330;
 	border: none;
 	border-radius: 0 2px 2px 0;
@@ -684,7 +680,6 @@ form th {
 	background-color: #efe3d3;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #766556;
 	background-color: #fff;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index d24a1cd1c..14a369a2e 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -66,10 +66,6 @@ input:disabled, select:disabled {
 	border-color: #ccc;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -593,10 +589,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 3fa917e5f..7c16ee958 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -66,10 +66,6 @@ input:disabled, select:disabled {
 	border-color: #ccc;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -593,10 +589,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 11c4c7d1b..859397eb1 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -78,10 +78,6 @@ input:disabled, select:disabled {
 	border-color: #000;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -544,10 +540,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 19d368165..a75552d51 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -78,10 +78,6 @@ input:disabled, select:disabled {
 	border-color: #000;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -544,10 +540,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 518e6b07b..aefe3d454 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -70,10 +70,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -547,10 +543,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index d82f6d268..43ada0a4c 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -70,10 +70,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -547,10 +543,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Mapco/_forms.scss b/p/themes/Mapco/_forms.scss
index 479f40d44..977a70346 100644
--- a/p/themes/Mapco/_forms.scss
+++ b/p/themes/Mapco/_forms.scss
@@ -119,11 +119,6 @@ input:disabled, select:disabled {
 	background: variables.$grey-light;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index 495c19ebf..7be890369 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -29,7 +29,7 @@
 
 		&.search {
 			input {
-				width: 230px;
+				width: 350px;
 				color: variables.$sid-font-color;
 				border: none;
 				border-radius: 2px 0 0 2px;
@@ -42,9 +42,7 @@
 				}
 
 				&:focus {
-					width: 350px;
 					color: variables.$grey-dark;
-
 					background-color: variables.$white;
 				}
 			}
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index c34dc08e0..d2978c217 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -163,10 +163,6 @@ input:disabled, select:disabled {
 	background: #eff0f2;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -687,7 +683,7 @@ form th {
 	filter: grayscale(100%) brightness(2.2);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #ffffff;
 	border: none;
 	border-radius: 2px 0 0 2px;
@@ -698,7 +694,6 @@ form th {
 	background-color: #17181a;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #5b6871;
 	background-color: #fff;
 }
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 112ca94c7..7ed00631a 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -163,10 +163,6 @@ input:disabled, select:disabled {
 	background: #eff0f2;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -687,7 +683,7 @@ form th {
 	filter: grayscale(100%) brightness(2.2);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #ffffff;
 	border: none;
 	border-radius: 0 2px 2px 0;
@@ -698,7 +694,6 @@ form th {
 	background-color: #17181a;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #5b6871;
 	background-color: #fff;
 }
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index fb4e71147..403a27dd0 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -448,10 +448,6 @@ img.favicon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
@@ -833,17 +829,10 @@ textarea {
 	height: 100px;
 }
 
-
 option {
 	padding: 0 .5em;
 }
 
-
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 95e4625cf..2ae7464fa 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -448,10 +448,6 @@ img.favicon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
@@ -833,17 +829,10 @@ textarea {
 	height: 100px;
 }
 
-
 option {
 	padding: 0 .5em;
 }
 
-
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 1db88e0a9..319e6a2a4 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -151,10 +151,6 @@ input:disabled, select:disabled {
 	background-color: var(--background-color-light-shadowed);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -656,10 +652,6 @@ a:hover .icon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 2cc8e15b4..983b1743e 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -151,10 +151,6 @@ input:disabled, select:disabled {
 	background-color: var(--background-color-light-shadowed);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -656,10 +652,6 @@ a:hover .icon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index f6ee43cf5..f5d418f15 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -140,10 +140,6 @@ input:invalid, select:invalid {
 	box-shadow: 0 0 2px 2px var(--invalid-box-shadow-color) inset;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -611,7 +607,7 @@ a.signin {
 	height: 29px;
 }
 
-.header .item.search input:focus {
+.header .item.search input {
 	width: 350px;
 }
 
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 338a4355f..cc8d72da4 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -140,10 +140,6 @@ input:invalid, select:invalid {
 	box-shadow: 0 0 2px 2px var(--invalid-box-shadow-color) inset;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -611,7 +607,7 @@ a.signin {
 	height: 29px;
 }
 
-.header .item.search input:focus {
+.header .item.search input {
 	width: 350px;
 }
 
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 74a43c890..e66861563 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -64,10 +64,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -577,10 +573,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index de4b33242..a823dc93d 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -64,10 +64,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -577,10 +573,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 17fb8e77f..02fd9471f 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -148,10 +148,6 @@ select {
 	padding-bottom: 8px;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 option {
 	padding: 0 0.5em;
 }
@@ -580,9 +576,6 @@ form th {
 	top: 5px;
 	filter: grayscale(100%) brightness(100);
 }
-.header .item.search input:focus {
-	width: 350px;
-}
 .header .item.search {
 	display: none;
 }
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 9e8d826e1..9cee872c9 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -148,10 +148,6 @@ select {
 	padding-bottom: 8px;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 option {
 	padding: 0 0.5em;
 }
@@ -580,9 +576,6 @@ form th {
 	top: 5px;
 	filter: grayscale(100%) brightness(100);
 }
-.header .item.search input:focus {
-	width: 350px;
-}
 .header .item.search {
 	display: none;
 }
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 584841de2..c3092b2e1 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -186,12 +186,6 @@ select {
 	padding-bottom: 8px;
 }
 
-input {
-	&.extend {
-		transition: width 200ms linear;
-	}
-}
-
 option {
 	padding: 0 .5em;
 }
@@ -744,10 +738,6 @@ form {
 		}
 	}
 
-	.item.search input:focus {
-		width: 350px;
-	}
-
 	.item.search {
 		display: none;
 	}
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index cd133939d..095ef49c0 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -52,10 +52,6 @@ input:invalid, select:invalid {
 input:disabled, select:disabled {
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -404,10 +400,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index ab5156b68..a97d4876c 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -52,10 +52,6 @@ input:invalid, select:invalid {
 input:disabled, select:disabled {
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -404,10 +400,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 56e99ec70..9c3f16b1c 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -194,7 +194,8 @@ label {
 }
 
 input {
-	width: 180px;
+	max-width: 90%;
+	width: 300px;
 }
 
 input[type=number] {
@@ -203,8 +204,7 @@ input[type=number] {
 
 textarea,
 input[type="file"],
-input.long,
-input.extend:focus {
+input.long {
 	width: 300px;
 }
 
@@ -212,6 +212,7 @@ input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
 	font-size: 0.8rem;
+	box-sizing: border-box;
 }
 
 input.w50,
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 4c8326e32..6555c95ce 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -194,7 +194,8 @@ label {
 }
 
 input {
-	width: 180px;
+	max-width: 90%;
+	width: 300px;
 }
 
 input[type=number] {
@@ -203,8 +204,7 @@ input[type=number] {
 
 textarea,
 input[type="file"],
-input.long,
-input.extend:focus {
+input.long {
 	width: 300px;
 }
 
@@ -212,6 +212,7 @@ input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
 	font-size: 0.8rem;
+	box-sizing: border-box;
 }
 
 input.w50,