mirror of
https://github.com/flarum/framework.git
synced 2024-11-29 04:33:47 +08:00
589e903c71
- Fix jank in shrinking animation when search box loses focus after overlapping forum title. - Use solid colors instead of transparent whites/blacks for colored header controls so that search box isn't transparent when it does overlap forum title. - This also simplifies colored header variables, making them more analogous to the non-colored header variables, and allowing for the removal of some conditional CSS in the notifications dropdown button. Some more radical changes to header layout (flexbox?) may be made when we implement the new mobile design (#867), but for now this is an acceptable fix.
81 lines
1.2 KiB
Plaintext
Executable File
81 lines
1.2 KiB
Plaintext
Executable File
.Search {
|
|
position: relative;
|
|
}
|
|
@media @tablet-up {
|
|
.Search {
|
|
.transition(margin-left 0.4s);
|
|
|
|
&.focused {
|
|
margin-left: -400px;
|
|
|
|
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;
|
|
}
|