Smart Filter and Breadcrumb Component Styling

Owned by Radu Nicoara (Unlicensed)
Jun 30, 2017
1 min read

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

 

Smart Filter Styling

CSS SelectorExplanation
.smart-filterContaining element of the smart filter. Use this to set properties such as overall padding, background, etc.
.smart-filter-labelThe labels displayed above the filter input fields.
.smart-filter-fieldThe filter input fields
.btn-filter-operatorThe filter operator selection buttons
.btn-filter-commandThe filter, optional fields selection, and cancel buttons
.horizontal or .verticalUse 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 SelectorExplanation
.smart-breadcrumb-navigationThe containing element of the individual breadcrumbs. Use this to set properties such as the background color.
.smart-breadcrumb-labelAll 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;
}