All Common CSS variables:

  • --smart-primary: The theme primary color.
  • --smart-primary-color: Text color on top of a primary background.
  • --smart-secondary: The theme secondary color.
  • --smart-secondary-color: Text color on top of a secondary background.
  • --smart-error: The theme error color.
  • --smart-error-color: Text color on top of a error background.
  • --smart-success: The theme success color.
  • --smart-success-color: Text color on top of a success background.
  • --smart-background: The theme background color. The background color appears behind scrollable content.
  • --smart-background-color: Text color on top of a background background.
  • --smart-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --smart-surface-color: Text color on top of a surface surface.
  • --smart-disabled: The theme primary color in disabled state.
  • --smart-disabled-color: Text color on top of a theme background in disabled state.
  • --smart-font-size: Theme font-size.
  • --smart-font-family: Theme font-family.
  • --smart-border-width: Theme border-width.
  • --smart-border-radius: Theme border-radius.
  • --smart-border: The theme border settings.
  • --smart-outline: The theme border color.
  • --smart-arrow-size: Font size of the arrow elements.
  • --smart-editor-selection: Background color of the selected text.
  • --smart-editor-selection-color: Color of the selected text.
  • --smart-alternation-index0-color: Alternation color for index0.
  • --smart-alternation-index0-border-color: Alternation border color for index0.
  • --smart-alternation-index0-background: Alternation background color for index0.
  • --smart-alternation-index1-color: Alternation color for index1.
  • --smart-alternation-index1-border-color: Alternation border color for index1.
  • --smart-alternation-index1-background: Alternation background color for index1.
  • --smart-alternation-index2-color: Alternation color for index2.
  • --smart-alternation-index2-border-color: Alternation border color for index2.
  • --smart-alternation-index2-background: Alternation background color for index2.
  • --smart-tick-color: Default tick color for smartTank, smartSlider and smartGauge.
  • --smart-tick-label-color: Default tick label color for smartTank, smartSlider and smartGauge.
  • --smart-box-height: Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-box-width: Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-bar-height: Default height for headers and footers.
  • --smart-bar-width: Default width for headers and footers.
  • --smart-editor-height: Default height for editors.
  • --smart-editor-width: Default width for editors.
  • --smart-editor-drop-down-width: Default width for editors drop-down.
  • --smart-editor-drop-down-height: Default height for editors drop-down.
  • --smart-editor-label-padding: Default padding for inputs.
  • --smart-editor-addon-width: Default width for spin buttons, dropdown buttons.

Specific CSS variables for QueryBuilder styling:

  • --smart-query-builder-default-width: Default width of QueryBuilder.
  • --smart-query-builder-default-height: Default height of QueryBuilder.
  • --smart-query-builder-min-width: Minimum width of QueryBuilder.
  • --smart-query-builder-border-width: Border width of QueryBuilder.
  • --smart-query-builder-border: Border color of QueryBuilder.
  • --smart-query-builder-border-top-right-radius: Top-right border radius of QueryBuilder.
  • --smart-query-builder-border-top-left-radius: Top-left border radius of QueryBuilder.
  • --smart-query-builder-border-bottom-left-radius: Bottom-left border radius of QueryBuilder.
  • --smart-query-builder-border-bottom-right-radius: Bottom-right border radius of QueryBuilder.
  • --smart-query-builder-content-padding: Padding of QueryBuilder.
  • --smart-query-builder-editor-width: Width of editors in QueryBuilder.
  • --smart-query-builder-background: Background color of QueryBuilder.
  • --smart-query-builder-color: Text color of QueryBuilder.

The following CSS selectors can be used to style QueryBuilder:

  • smart-query-builder - the element itself. Can be used to set width and height for the whole element.
    • .smart-container - a container that holds the inner structure of the element. Normally, it shoudn't be used for styling.
      • .smart-query-builder-label - applied to label at the top of the element.
      • .smart-filter-group - a container that represents a filter group
        • .smart-filter-group-operator - contains labels of operators between filter groups.
        • .smart-filter-group-condition-container - contains all filter conditions in a filter group.
          • .smart-filter-group-condition - a container that represents a filter condition.
            • .filter-builder-item - applied to field, operation, and value choosers.
              • .smart-value-container - applied to the label showing the current field/operation/value.
              • .smart-editors-container - container to all field/operation/value editors.
                • .smart-custom-editor - container of user-defined editors.
            • .smart-filter-field-name - applied to field chooser.
            • .smart-filter-operation - applied to operation chooser.
            • .smart-filter-value - applied to value chooser.
            • .smart-filter-delete-btn - applied to the button for deleting a filter condition.
          • .smart-filter-nested-operator - contains labels of operators between filter conditions.
        • .smart-filter-add-condition-btn - button for adding a filter condition to a group.
        • .smart-filter-add-btn - button for adding a filter group.
      • .smart-conditions-menu - pop-up menu for choosing operators