thang
/
notes
mirror of https://github.com/thangisme/notes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix up search bar on mobile

This commit is contained in:
Patrick Marsceill 2018-10-24 14:05:29 -04:00
parent ea23134560
commit debc7d3310
No known key found for this signature in database
GPG Key ID: 286B93882D828F40
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_layouts/default.html
View File

@ -19,7 +19,7 @@
<div class="main-content pb-0">
<div class="search js-search">
<div class="search-input-wrap">
<input type="text" class="js-search-input search-input fs-2" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
<input type="text" class="js-search-input search-input" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
<svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
</div>
<div class="js-search-results search-results-wrap"></div>

16
_sass/search.scss
View File

@ -7,10 +7,11 @@
z-index: 99;
display: none;
flex-grow: 1;
padding-bottom: $gutter-spacing / 2;
background-color: $white;
padding: $sp-2;
margin-bottom: $sp-3;
background-color: $white;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
@include mq(md) {
display: block;
@ -20,6 +21,7 @@
padding-left: 0;
margin-bottom: 0;
background-color: transparent;
box-shadow: none;
}
&.nav-open {
@ -65,6 +67,16 @@
fill: $purple-000;
}
}
@include fs-5;
@include mq(sm) {
@include fs-3;
}
@include mq(md) {
@include fs-2;
}
}
.search-icon {