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

Created with Sketch. Search by Name, ID, or Email
Created with Sketch. Search by Name, ID, or Email 16px 10px 8px 8px
Created with Sketch. Search by Name, ID, or Email 14px 14px 300px 32px 
.search_default_text {
font-family: Lato-Regular;
font-size: 14px;
color: #0074D9;
letter-spacing: 0;
text-align: right;
line-height: 16px;
}

.search_field {
border: 1px solid #0074D9;
border-radius: 24px;
}

.search_icon {
font-family: "Font Awesome 5 Free";
content: fa-search;
}

States

There are 3 different states for the checkbox;

  • default
  • active
  • clearing

Active

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.

Created with Sketch. The Humane Soci 
.search_input_text {
font-family: Lato-Regular;
font-size: 14px;
color: #002d41;
letter-spacing: 0;
text-align: right;
line-height: 16px;
}


.clear_icon {
font-family: "Font Awesome 5 Free";
content: fa-times-circle;
color: #A8B7C7;

}

Cleared

The clear symbol turns from gray to red on hover.

Created with Sketch. The Humane Society 

.clear_icon:hover {
font-family: "Font Awesome 5 Free";
content: fa-times-circle;
color: #DC143C;
}

Search Dropdown

The Search dropdown displays a list of results grouped into five categories; Individuals, Organizations, Households, Campaigns, and Events

 

 

 


/!-----Dropdown Structure-----!/


.search_dropdown_text {
font-family: Lato-Bold;
font-size: 16px;
color: #0074D9;
text-align: #left;
}

.search_description_text {
font-family: Lato-Bold;
font-size: 14px;
color: #54698D;
text-align: #left;
}

.search_dropdown {
background: #FFFFFF;
border: 1px solid #D8DDE6;
box-shadow: 0 2px 3px 0 #A8B7C7;
text-align: #left;
border-radius: 4px;
}

.accounts_icon {
font-family: FontAwesome;
content: fa-user-circle-o;
font-size: 16px;
color: #3C4144;
}

.household_icon {
font-family: FontAwesome;
content: fa-home;
font-size: 16px;
color: #3C4144;
}

.fundraiser_icon {
font-family: FontAwesome;
content: fa-bullhorn;
font-size: 16px;
color: #3C4144;
}

.events_icon {
font-family: FontAwesome;
content: fa-calendar-o;
font-size: 16px;
color: #3C4144;
}

.group_header {
background: rgba(198,203,212,0.12);
font-family: Lato-Bold;
font-size: 14px;
color: #3C4144;
letter-spacing: 1.17px;
text-align: left;
}

.dropdown_link {
font-family: Roboto-Regular;
font-size: 12px;
color: #0074D9;
letter-spacing: -0.08px;
text-align: right;
}

/!-----Dropdown Hover State-----!/


.hover_active 
font-size: 16px;
}

.icon_hover 
font-family:FontAwesome;
background: rgba(216,221,230,0.15);
color: #008000;
}

.hover_marker 
background: #0074D9;
}

Overview of CSS Classes

Selector
Summary
Parent Selector

.search-default-text

.search-field

.search-icon

.clear-icon

.search-input-text

default text always present in search when not active

style for search bar field

magnifying glass icon used on left side of search

clear icon that appears upon text being input into field

text style for input text from user