diff --git a/app/assets/images/icons.svg b/app/assets/images/icons.svg
index 84d68904a..3bd8ae53b 100644
--- a/app/assets/images/icons.svg
+++ b/app/assets/images/icons.svg
@@ -331,6 +331,10 @@
+
+
+
+
diff --git a/app/assets/images/search.svg b/app/assets/images/search.svg
new file mode 100644
index 000000000..c8142072b
--- /dev/null
+++ b/app/assets/images/search.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 89d385ca0..a45f821b6 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -268,7 +268,9 @@ a#toggle-completed-versions {color:#999;}
}
.drdn.expanded .drdn-content {display:block;}
-.drdn-content .quick-search {margin:8px;}
+.drdn-content .quick-search {margin:8px; display: flex; align-items: center;}
+.drdn-content .quick-search svg {margin-left: 5px; position: absolute;}
+.drdn-content .quick-search input.autocomplete {background: none; padding-left: 24px !important;}
.drdn-content .autocomplete {box-sizing: border-box; width:100% !important; height:28px;}
.drdn-content .autocomplete:focus {border-color:#5ad;}
.drdn-items {max-height:400px; overflow:auto;}
@@ -1140,7 +1142,7 @@ input#principal_search, input#user_search {width:90%}
.roles-selection label {display:inline-block; width:210px;}
input.autocomplete {
- background: #fff url(/magnifier.png) no-repeat 2px 50%; padding-left:20px !important;
+ background: #fff url(/search.svg) no-repeat 2px 50%; padding-left:20px !important;
}
input.autocomplete.ajax-loading {
background-image: url(/loading.gif);
diff --git a/app/assets/stylesheets/responsive.css b/app/assets/stylesheets/responsive.css
index ea30ab86c..4eff84187 100644
--- a/app/assets/stylesheets/responsive.css
+++ b/app/assets/stylesheets/responsive.css
@@ -184,9 +184,14 @@
font-size:0.9375rem;
font-weight:normal;
}
+ #project-jump .drdn-content svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
#project-jump .drdn-content .autocomplete {
height:40px;
font-size:1.25rem;
+ padding-left: 28px !important;
}
#project-jump .drdn-content a {
padding:8px;
@@ -259,21 +264,7 @@
content: '\2261';
}
- /* search magnifier icon */
- .search-magnifier {
- font-family: var(--fonts-main);
- color: #bbb;
-
- cursor: pointer;
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- }
-
.search-magnifier--flyout {
- font-size: 1.5625rem;
- line-height: 54px;
-
position: absolute;
z-index: 1;
left: 12px;
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index bac8da266..d708019c9 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -610,7 +610,7 @@ module ApplicationHelper
:class => (@project.nil? && controller.class.main_menu ? 'selected' : nil))
content =
content_tag('div',
- content_tag('div', q, :class => 'quick-search') +
+ content_tag('div', sprite_icon('search', icon_only: true, size: 18) + q, :class => 'quick-search') +
content_tag('div', render_projects_for_jump_box(projects, selected: @project),
:class => 'drdn-items projects selection') +
content_tag('div', all, :class => 'drdn-items all-projects selection'),
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 031c847f3..fdd560481 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -27,7 +27,7 @@
diff --git a/config/icon_source.yml b/config/icon_source.yml
index a97b4bcb9..92ea716b1 100644
--- a/config/icon_source.yml
+++ b/config/icon_source.yml
@@ -197,3 +197,5 @@
svg: chevrons-left
- name: key
svg: key
+- name: search
+ svg: search