{"id":44,"date":"2018-04-27T14:55:50","date_gmt":"2018-04-27T14:55:50","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=44"},"modified":"2018-07-25T14:08:30","modified_gmt":"2018-07-25T14:08:30","slug":"search-field","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/search-field\/","title":{"rendered":"Search Field"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tSearch<br \/>\n\t<\/h1>\n<h4>\n\t\tSearch allows users to quickly locate content across Neon. Basic search enables users to input a name, ID, or email address into a search text field to view related results. Search query input is extended to include auto-completion of queries.<br \/>\n\t<\/h4>\n<h4>\n\t\t<a href=\"#\" title=\"Search Default\" target=\"_self\"><br \/>\n\t\tSearch Default<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.search_default_text {\nfont-family: Lato-Regular;\nfont-size: 14px;\ncolor: #0074D9;\nletter-spacing: 0;\ntext-align: right;\nline-height: 16px;\n}\n.search_field {\nborder: 1px solid #0074D9;\nborder-radius: 24px;\n}\n.search_icon {\nfont-family: \"Font Awesome 5 Free\";\ncontent: fa-search;\n}\n<\/pre>\n<h2>\n\t\tStates<br \/>\n\t<\/h2>\n<p>There are 3 different states for the checkbox;<\/p>\n<ul>\n<li>default<\/li>\n<li>active<\/li>\n<li>clearing<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Active\" target=\"_self\"><br \/>\n\t\tActive<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>When search is active the default text disappears and a different styled input text is used for entry. A clear symbol (fa-times-circle) is displayed on the right side of the search.<\/p>\n<pre>.search_input_text {\nfont-family: Lato-Regular;\nfont-size: 14px;\ncolor: #002d41;\nletter-spacing: 0;\ntext-align: right;\nline-height: 16px;\n}\n.clear_icon {\nfont-family: \"Font Awesome 5 Free\";\ncontent: fa-times-circle;\ncolor: #A8B7C7;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Cleared\" target=\"_self\"><br \/>\n\t\tCleared<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>The clear symbol turns from gray to red on hover.<\/p>\n<pre>\n.clear_icon:hover {\nfont-family: \"Font Awesome 5 Free\";\ncontent: fa-times-circle;\ncolor: #DC143C;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Search Dropdown\" target=\"_self\"><br \/>\n\t\tSearch Dropdown<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>The Search dropdown displays a list of results grouped into five categories; Individuals, Organizations, Households, Campaigns, and Events<\/p>\n<p><a href=\"..\/..\/wp-content\/uploads\/sites\/141\/2018\/07\/Full-Search-Bar.svg\"><img decoding=\"async\" src=\"..\/..\/wp-content\/uploads\/sites\/141\/2018\/07\/Full-Search-Bar.svg\" alt=\"\" \/><\/a><\/p>\n<p><a href=\"..\/..\/wp-content\/uploads\/sites\/141\/2018\/07\/dropdown_1.svg\"><img decoding=\"async\" src=\"..\/..\/wp-content\/uploads\/sites\/141\/2018\/07\/dropdown_1.svg\" alt=\"\" \/><\/a> <img decoding=\"async\" src=\"..\/..\/wp-content\/uploads\/sites\/141\/2018\/07\/dropdown_2.svg\" alt=\"\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" src=\"..\/..\/wp-content\/uploads\/sites\/141\/2018\/07\/dropdown_3.svg\" alt=\"\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" src=\"..\/..\/wp-content\/uploads\/sites\/141\/2018\/07\/dropdown_4.svg\" alt=\"\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" src=\"..\/..\/wp-content\/uploads\/sites\/141\/2018\/07\/dropdown_5.svg\" alt=\"\" \/><\/p>\n<p><img decoding=\"async\" src=\"..\/..\/wp-content\/uploads\/sites\/141\/2018\/07\/dropdown_6.svg\" alt=\"\" \/><\/p>\n<pre>\n\/!-----Dropdown Structure-----!\/\n.search_dropdown_text {\nfont-family: Lato-Bold;\nfont-size: 16px;\ncolor: #0074D9;\ntext-align: #left;\n}\n.search_description_text {\nfont-family: Lato-Bold;\nfont-size: 14px;\ncolor: #54698D;\ntext-align: #left;\n}\n.search_dropdown {\nbackground: #FFFFFF;\nborder: 1px solid #D8DDE6;\nbox-shadow: 0 2px 3px 0 #A8B7C7;\ntext-align: #left;\nborder-radius: 4px;\n}\n.accounts_icon {\nfont-family: FontAwesome;\ncontent: fa-user-circle-o;\nfont-size: 16px;\ncolor: #3C4144;\n}\n.household_icon {\nfont-family: FontAwesome;\ncontent: fa-home;\nfont-size: 16px;\ncolor: #3C4144;\n}\n.fundraiser_icon {\nfont-family: FontAwesome;\ncontent: fa-bullhorn;\nfont-size: 16px;\ncolor: #3C4144;\n}\n.events_icon {\nfont-family: FontAwesome;\ncontent: fa-calendar-o;\nfont-size: 16px;\ncolor: #3C4144;\n}\n.group_header {\nbackground: rgba(198,203,212,0.12);\nfont-family: Lato-Bold;\nfont-size: 14px;\ncolor: #3C4144;\nletter-spacing: 1.17px;\ntext-align: left;\n}\n.dropdown_link {\nfont-family: Roboto-Regular;\nfont-size: 12px;\ncolor: #0074D9;\nletter-spacing: -0.08px;\ntext-align: right;\n}\n\/!-----Dropdown Hover State-----!\/\n.hover_active \nfont-size: 16px;\n}\n.icon_hover \nfont-family:FontAwesome;\nbackground: rgba(216,221,230,0.15);\ncolor: #008000;\n}\n.hover_marker \nbackground: #0074D9;\n}\n<\/pre>\n<h2>\n\t\tOverview of CSS Classes<br \/>\n\t<\/h2>\n<h5>\n\t\tSelector<br \/>\n\t<\/h5>\n<h5>\n\t\tSummary<br \/>\n\t<\/h5>\n<h5>\n\t\tParent Selector<br \/>\n\t<\/h5>\n<p><em>.search-default-text<\/em><\/p>\n<p><em>.search-field<\/em><\/p>\n<p><em>.search-icon<\/em><\/p>\n<p><em>.clear-icon<\/em><\/p>\n<p><em>.search-input-text<\/em><\/p>\n<p>default text always present in search when not active<\/p>\n<p>style for search bar field<\/p>\n<p>magnifying glass icon used on left side of search<\/p>\n<p>clear icon that appears upon text being input into field<\/p>\n<p>text style for input text from user\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Search Search allows users to quickly locate content across Neon. Basic search enables users to input a name, ID, or email address into a search text field to view related results. Search query input is extended to include auto-completion of queries. Search Default .search_default_text { font-family: Lato-Regular; font-size: 14px; color: #0074D9; letter-spacing: 0; text-align:&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":380,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-44","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":18,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/44\/revisions"}],"predecessor-version":[{"id":1296,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/44\/revisions\/1296"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/380"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}