Vue - Styling (searchstax-ux-vue)

Styling Options

SearchStax Site Search's SearchStudio-ux-vue comes with default CSS styling that you can customize.

Using Default Styles

The default CSS stylesheet is located at:

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

To use it, import this file:

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

Customization

You can override the default CSS classes to customize styling.

Here are some examples:

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

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

/* Override other class names */

Advanced Customization

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

@import 'node_modules/@searchstax-inc/searchstudio-ux-vue/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 lets you build on the default theme with new styling and variables.