Smart Filter and Breadcrumb Component Styling

The SmartComponent Library provides a set of CSS classes that can be used to style Smart Filters and Breadcrumb components.

Smart Filter Styling

CSS Selector	Explanation
.smart-filter	Containing element of the smart filter. Use this to set properties such as overall padding, background, etc.
.smart-filter-label	The labels displayed above the filter input fields.
.smart-filter-field	The filter input fields
.btn-filter-operator	The filter operator selection buttons
.btn-filter-command	The filter, optional fields selection, and cancel buttons
.horizontal or .vertical	Use these in conjuction with the other filter CSS selectors. Example: `.smart-filter-field.vertical` will only affect fields that are part of a vertically oriented filter.

Smart Breadcrumb Component Styling

CSS Selector	Explanation
.smart-breadcrumb-navigation	The containing element of the individual breadcrumbs. Use this to set properties such as the background color.
.smart-breadcrumb-label	All individual breadcrumb labels. Use this to set properties such as the font size.

Sample

/** set the background color for Smart Filters to light gray */
.smart-filter {
	background-color: lightgray !important;
}
 
/** set the font color of filter labels to white and the font size to 20 pixels */
.smart-filter-label {
	color: white !important;
	font-size: 20px !important;
}
 
/** add a 15px bottom margin to filter fields belonging to vertically oriented Smart Filters */
.smart-filter-label.vertical {
	margin-bottom: 15px !important;
}
 
/** set the background color for breadcrumb navigation components to light gray */
.smart-breadcrumb-navigation {
	background-color: lightgray !important;
}
 
/** set the font color for breadcrumb labels to white */
.smart-breadcrumb-label {
	color: white !important;
}