framework/less/lib/Search.less
Toby Zerner 3e4a8fe769 Collapse search input on tablets. closes flarum/core#162
While this solution isn't perfect (perhaps a search icon which opens a
dropdown would be better, like Discourse does) - it'll do for now :)
2015-08-27 08:34:19 +09:30

78 lines
1.2 KiB
Plaintext
Executable File

.Search {
position: relative;
}
@media @tablet-up {
.Search.focused {
margin-left: -400px;
.transition(all 0.4s);
input, .Search-results {
width: 400px;
}
}
}
.Search-results {
max-height: 70vh;
overflow: auto;
left: auto;
right: 0;
@media @phone {
left: 0;
}
> li > a {
white-space: normal;
}
mark {
background: none;
padding: 0;
font-weight: bold;
color: inherit;
box-shadow: none;
}
}
.Search-input {
overflow: hidden;
color: @muted-color;
&:before {
.fa();
content: @fa-var-search;
float: left;
margin-right: -36px;
width: 36px;
font-size: 14px;
text-align: center;
position: relative;
padding: 7px 0;
line-height: 1.5;
pointer-events: none;
}
input {
float: left;
width: 225px;
padding-left: 32px;
padding-right: 32px;
.transition(all 0.4s);
}
.Button {
float: left;
margin-left: -36px;
width: 36px !important;
outline: none;
}
}
.DiscussionSearchResult-excerpt {
margin-top: 3px;
color: @muted-color;
font-size: 11px;
}
.UserSearchResult .Avatar {
.Avatar--size(24px);
margin: -2px 10px -2px 0;
}