Home > widget-integration > CSS_CLASS

CSS_CLASS variable

Standard CSS class names used in filter widget styling.

Contains reusable class names for common UI states and components. Technical Support teams can reference these when adding custom styles.

Signature:

CSS_CLASS: {
	readonly HIDE: "boost-sd__g-hide";
	readonly NO_SCROLL: "boost-sd__g-no-scroll";
	readonly BUTTON_CLEAR: "boost-sd__button boost-sd__button--clear";
	readonly FILTER_OPTION_ITEM: "boost-sd__filter-option-item";
	readonly FILTER_OPTION_BOX_ITEM: "boost-sd__filter-option-box-item";
	readonly FILTER_OPTION_BOX_ITEM_SELECTED: "boost-sd__filter-option-box-item--selected";
	readonly SORTING_PREFIX: "boost-sd__sorting-";
	readonly ANIMATE_SLIDE_IN: "animate--slide-in";
	readonly ANIMATION_FADE_IN: "animation--fade-in";
}

Remarks

All classes follow BEM naming convention with "boost-sd__" prefix.

Example

window.boostWidgetIntegration.extend('FilterHandler', (FilterHandler) => {
  return class extends FilterHandler {
    handleSort(e, actionId) {
      // Add custom animation class
      const element = e.target.closest(`.${CSS_CLASS.FILTER_OPTION_ITEM}`);
      element?.classList.add(CSS_CLASS.ANIMATION_FADE_IN);
      return super.handleSort(e, actionId);
    }
  };
});