Angular - Styling (searchstax-ux-angular)

Style and theme an Angular search page with the SearchStax Site Search UI Kit's default CSS, CSS overrides, and SCSS source files.

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.