Adjusted search input size on focus and made tabs not move on changeorigin/sandbox/tparscal/apex-skin

Change-Id: I38d7563c426b8d4ad7dacbc014eeadc6837692be

3 files changed, 29 insertions, 4 deletions

diff --git a/skins/Apex.php b/skins/Apex.php
index 3eb7d5ae49c9..b7f44cac0ff4 100644
--- a/skins/Apex.php
+++ b/skins/Apex.php
@@ -436,7 +436,7 @@ class ApexTemplate extends BaseTemplate {
 	<h5<?php $this->html( 'userlangattributes' ) ?>><label for="searchInput"><?php $this->msg( 'search' ) ?></label></h5>
 	<form action="<?php $this->text( 'wgScript' ) ?>" id="searchform">
 		<div id="simpleSearch">
-			<?php echo $this->makeSearchInput( array( 'id' => 'searchInput', 'type' => 'search' ) ); ?>
+			<?php echo $this->makeSearchInput( array( 'id' => 'searchInput', 'type' => 'text' ) ); ?>
 			<?php echo $this->makeSearchButton( 'image', array( 'id' => 'searchButton', 'src' => $this->getSkin()->getSkinStylePath( 'images/icons/search.png' ), 'width' => '12', 'height' => '13' ) ); ?>
 			<input type='hidden' name="title" value="<?php $this->text( 'searchtitle' ) ?>"/>
 		</div>
diff --git a/skins/apex/screen-narrow.css b/skins/apex/screen-narrow.css
index 281ec5d95856..310550f82edc 100644
--- a/skins/apex/screen-narrow.css
+++ b/skins/apex/screen-narrow.css
@@ -44,6 +44,10 @@
 	margin-right: 1.5em;
 }
 
+#searchInput:focus {
+	width: 6em;
+}
+
 div#mw-js-message {
 	right: 1.5em;
 }
\ No newline at end of file
diff --git a/skins/apex/screen.css b/skins/apex/screen.css
index c7ff384476f0..8ce4d501f3a9 100644
--- a/skins/apex/screen.css
+++ b/skins/apex/screen.css
@@ -104,6 +104,8 @@ a:visited {
 
 .apex-tabs li {
 	float: left;
+	margin: -1px 0 -1px -1px;
+	border: solid 1px transparent;
 }
 
 .apex-tabs a {
@@ -462,17 +464,29 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', end
 	margin-right: 3em;
 	margin-top: 1.25em;
 }
+#simpleSearch {
+	text-align: right;
+}
 #p-search h5 {
 	display: none;
 }
-#searchInput{
-	width: 8em;
+#searchInput {
+	border: solid 1px #cccccc;
+	border-radius: 1em;
+	padding: 0.125em 0.75em;
+	background-color: #fff;
+	display: inline-block;
+	width: 6em;
 	font-size: 1em;
 }
+#searchInput:focus {
+	width: 12em;
+	outline: none;
+}
 #searchButton {
 	background-color: transparent;
 	border: none;
-	font-size: 1em;
+	font-size: 1.25em;
 	opacity: 0.75;
 	cursor: pointer;
 }
@@ -594,6 +608,13 @@ div#mw-js-message {
 	-o-transition: right 250ms;
 }
 
+#searchInput {
+	transition: width 250ms;
+	-moz-transition: width 250ms;
+	-webkit-transition: width 250ms;
+	-o-transition: width 250ms;
+}
+
 .apex-content-wrapper {
 	transition: margin 250ms;
 	-moz-transition: margin 250ms;