ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update search box

This commit is contained in:
Rico Sta. Cruz 2017-09-24 03:01:32 +08:00
parent d9e72aa977
commit 44911fe847
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/2017/search-form.html
View File

@ -2,10 +2,8 @@
{% if include.live %}data-js-search-form{% endif %} {% if include.live %}data-js-search-form{% endif %}
class='search' action='{{ base }}' method='get'> class='search' action='{{ base }}' method='get'>
<label class='search-box {{ include.class }}'> <label class='search-box {{ include.class }}'>
{% comment %}
<span class='prefix'>{{ site.data.content.search_form.prefix }}</span> <span class='prefix'>{{ site.data.content.search_form.prefix }}</span>
<span class='sep'>/</span> <span class='sep'>/</span>
{% endcomment %}
<input name='q' <input name='q'
type='text' type='text'
{% if include.live %} {% if include.live %}

20
_sass/2017/components/search-box.scss
View File

@ -13,7 +13,7 @@
height: 64px; height: 64px;
background: transparent; background: transparent;
border: 0; border: 0;
Flex: 1 0 auto; flex: 1 0 auto;
padding-left: 0; padding-left: 0;
font-weight: bold; font-weight: bold;
color: $base-head; color: $base-head;
@ -28,20 +28,27 @@
outline: 0; outline: 0;
} }
& > .prefix, & > .prefix {
& > .sep { @include font-size(0);
@include font-size(2);
display: block; display: block;
color: $base-mute; color: rgba($base-mute, 0.5);
font-weight: 400; font-weight: 400;
opacity: 0.5;
user-select: none; user-select: none;
line-height: 1.5em;
padding: 2px 8px;
border-radius: 3px;
background: rgba($base-body, 0.5);
margin: 0 0 0 16px;
box-shadow: 0 1px 1px rgba($base-mute, 0.25);
} }
& > .sep { & > .sep {
color: rgba($base-mute, 0.5);
@include font-size(2);
margin: 0 8px; margin: 0 8px;
} }
// Icon
&::before { &::before {
@include ion-icon('md-search'); @include ion-icon('md-search');
font-size: 32px; font-size: 32px;
@ -50,6 +57,7 @@
width: 64px; width: 64px;
line-height: 64px; line-height: 64px;
text-align: center; text-align: center;
order: 2;
} }
} }