Angular - Styling (searchstax-ux-angular)

Styling Options

SearchStax Site Search includes a styling widget for custom search pages built with Angular.

SearchStudio-ux-angular comes with default CSS styling that you can customize.

Using Default Styles

You'll find the default CSS stylesheet at:

node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css

To use it, import this file:

@import 'node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css';

Customization

You can override the default CSS classes to customize styling:

.searchstax-input {
  /* Override input styling */ 
}

.searchstax-result {
  /* Override result styling */
}

/* Override other class names */

Advanced Customization

For more advanced customization, import and modify the SCSS source files:

@import 'node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/scss/mainTheme.scss';

// Override SCSS variables and mixins

Check the SCSS source for available variables, mixins, and selectors.

Theming

To create a new theme, use the main SCSS file as a base:

@import 'mainTheme.scss';

// Override variables and add custom CSS

This approach lets you build on top of the default theme with new styling and variables.