only show search icon on desktop, like on mobile

This commit is contained in:
Jan-Christoph Borchardt 2015-08-25 18:46:43 +02:00
parent 08a490df32
commit 5a6b10ae6f
3 changed files with 15 additions and 31 deletions

View file

@ -294,7 +294,7 @@
}
#expand {
display: block;
padding: 7px 30px 6px 22px;
padding: 7px 30px 6px 10px;
cursor: pointer;
}
#expand * {

View file

@ -26,35 +26,12 @@
display: none;
}
/* compress search box on mobile, expand when focused */
.searchbox input[type="search"] {
width: 0;
cursor: pointer;
background-color: transparent;
-webkit-transition: all 100ms;
-moz-transition: all 100ms;
-o-transition: all 100ms;
transition: all 100ms;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
opacity: .7;
}
.searchbox input[type="search"]:focus,
.searchbox input[type="search"]:active {
width: 155px;
max-width: 50%;
cursor: text;
background-color: #112;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}
/* do not show display name on mobile when profile picture is present */
#header .avatardiv.avatardiv-shown + #expandDisplayName {
display: none;
}
#header #expand {
display: block;
padding: 7px 30px 6px 7px;
}
/* do not show update notification on mobile */

View file

@ -258,21 +258,28 @@ input:disabled+label, input:disabled:hover+label, input:disabled:focus+label {
font-size: 1.2em;
padding: 3px;
padding-left: 25px;
background: #112 url('../img/actions/search-white.svg') no-repeat 6px center;
background: transparent url('../img/actions/search-white.svg') no-repeat 6px center;
color: #fff;
border: 0;
border-radius: 3px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
opacity: .3;
margin-top: 9px;
float: right;
}
.searchbox input[type="search"]:hover,
.searchbox input[type="search"]:focus,
.searchbox input[type="search"]:active {
width: 0;
cursor: pointer;
-webkit-transition: all 100ms;
-moz-transition: all 100ms;
-o-transition: all 100ms;
transition: all 100ms;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
opacity: .7;
}
.searchbox input[type="search"]:focus,
.searchbox input[type="search"]:active {
color: #fff;
width: 155px;
max-width: 50%;
cursor: text;
background-color: #112;
}
input[type="submit"].enabled {