kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Add icons

Browse source
This commit is contained in:
Alfredo Sumaran 2016-03-09 15:52:15 -05:00 committed by Jacob Schatz
parent 82e3c1f257
commit ec0dfff204
3 changed files with 40 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/images/spinner.svg Normal file
View file

@ -0,0 +1 @@
<svg width='24px' height='24px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(0 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(30 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(60 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(90 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(120 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(150 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(180 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(210 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(240 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(270 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(300 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(330 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

39
app/assets/stylesheets/pages/search.scss
View file

@ -37,6 +37,12 @@
background-color: $input-border-focus;
color: $white-light;
}
.search-input-wrap {
i {
color: $input-border-focus;
}
}
}
form {
@ -61,7 +67,7 @@
font-size: 14px;
outline: none;
padding: 0;
margin-left: 2px;
margin-left: 5px;
line-height: 25px;
width: 100%;
}
@ -89,5 +95,36 @@
.search-input-wrap {
width: 100%;
position: relative;
.search-icon {
@extend .fa-search;
@include transition(color .15s);
position: absolute;
right: 5px;
color: #E7E9ED;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
&:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
}
}
.ui-autocomplete-loading + .search-icon {
height: 25px;
width: 25px;
position: absolute;
right: 0;
background-image: image-url('spinner.svg');
fill: red;
&:before {
display: none;
}
}
}
}

1
app/views/layouts/_search.html.haml
View file

@ -5,6 +5,7 @@
= render 'shared/location_badge'
.search-input-wrap
= search_field_tag "search", nil, placeholder: 'Search', class: "search-input", spellcheck: false, tabindex: "1", autocomplete: 'off'
%i.search-icon
= hidden_field_tag :group_id, @group.try(:id)
= hidden_field_tag :project_id, @project && @project.persisted? ? @project.id : '', id: 'search_project_id'