From 3e2c56157bfb20fbc48bdf668bd56fb47bd7cc1f Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 20 Feb 2014 11:33:46 +0100
Subject: [PATCH] reduce width of searchbox on mobile, fix overlap, fix #7282

---
 core/css/mobile.css | 20 ++++++++++++++++++++
 core/css/styles.css | 10 ++++++----
 lib/base.php        |  1 +
 3 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 core/css/mobile.css

diff --git a/core/css/mobile.css b/core/css/mobile.css
new file mode 100644
index 00000000000..a4cca6f37f6
--- /dev/null
+++ b/core/css/mobile.css
@@ -0,0 +1,20 @@
+@media only screen and (max-width: 600px) {
+
+/* compress search box on mobile, expand when focused */
+.searchbox input[type="search"] {
+	width: 17%;
+	-webkit-transition: width 100ms;
+	-moz-transition: width 100ms;
+	-o-transition: width 100ms;
+	transition: width 100ms;
+}
+.searchbox input[type="search"]:focus,
+.searchbox input[type="search"]:active {
+	width: 155px;
+	-webkit-transition: width 100ms;
+	-moz-transition: width 100ms;
+	-o-transition: width 100ms;
+	transition: width 100ms;
+}
+
+}
diff --git a/core/css/styles.css b/core/css/styles.css
index bee44785f12..c17d0a9bc07 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -205,17 +205,19 @@ textarea:disabled {
 		color: #bbb;
 	}
 
-
+/* Searchbox */
 .searchbox input[type="search"] {
+	position: relative;
 	font-size: 1.2em;
-	padding: .2em .5em .2em 1.5em;
+	padding-left: 1.5em;
 	background: #fff url('../img/actions/search.svg') no-repeat .5em center;
 	border: 0;
-	border-radius: 1em;
+	border-radius: 2em;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity: .7;
-	margin-top: 10px;
+	margin-top: 6px;
 	float: right;
 }
+
 input[type="submit"].enabled {
 	background: #66f866;
 	border: 1px solid #5e5;
diff --git a/lib/base.php b/lib/base.php
index a5f064bdb4b..84177c7ba6c 100644
--- a/lib/base.php
+++ b/lib/base.php
@@ -332,6 +332,7 @@ class OC {
 		}
 
 		OC_Util::addStyle("styles");
+		OC_Util::addStyle("mobile");
 		OC_Util::addStyle("icons");
 		OC_Util::addStyle("apps");
 		OC_Util::addStyle("fixes");