arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added search input to header, removed search icon

Browse Source
This commit is contained in:
Tobias Reich 2015-03-12 00:07:20 +01:00
parent 2001f172fa
commit f35c146578
2 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -45,11 +45,8 @@
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#plus"></use></svg> <svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#plus"></use></svg>
</a> </a>
<a class="button_divider"></a> <a class="button_divider"></a>
<a class="button button--right" id="button_search" title="Search"> <input id="search" type="text" name="search" placeholder="Search …">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#magnifying-glass"></use></svg> <a id="clearSearch">&times;</a>
</a>
<!-- <input id="search" type="text" name="search" placeholder="Search …">
<a id="clearSearch">&times;</a> -->
</div> </div>
<div class="toolbar" id="tools_album"> <div class="toolbar" id="tools_album">
<a class="button button--left" id="button_back_home" title="Close Album"> <a class="button button--left" id="button_back_home" title="Close Album">

24
src/styles/_header.scss
View File

@ -114,15 +114,21 @@ header {
width: 80px; width: 80px;
margin: 12px 12px 0 0; margin: 12px 12px 0 0;
padding: 5px 12px 6px 12px; padding: 5px 12px 6px 12px;
background-color: #222; background-color: #1d1d1d;
color: #fff; color: #fff;
border: 0; border: 1px solid black(.9);
box-shadow: 0 1px 0 white(.04);
outline: none; outline: none;
border-radius: 50px; border-radius: 50px;
opacity: .6; opacity: .6;
transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s ease-out, width .2s ease-out; transition: opacity .3s ease-out, box-shadow .3s ease-out, width .2s ease-out;
&:focus { width: 140px; } &:focus {
width: 140px;
border-color: $colorBlue;
box-shadow: 0 1px 0 white(0);
opacity: 1;
}
&:focus ~ #clearSearch { opacity: 1; } &:focus ~ #clearSearch { opacity: 1; }
} }
@ -132,15 +138,13 @@ header {
top: 13px; top: 13px;
right: 78px; right: 78px;
padding: 0; padding: 0;
color: #888; color: white(.5);
font-size: 20px; font-size: 20px;
opacity: 0; opacity: 0;
transition: opacity .2s ease-out, color .2s ease-out; transition: color .2s ease-out;
cursor: default;
&:hover { &:hover { color: white(1); }
color: #fff;
opacity: 1;
}
} }
/* Hosted with Lychee ------------------------------------------------*/ /* Hosted with Lychee ------------------------------------------------*/