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 List Menu styling:

  • -smart-list-menu-default-width: ListMenu default width.
  • --smart-list-menu-default-height: ListMenu default height.
  • --smart-list-menu-header-height: ListMenu header height.
  • --smart-list-menu-drop-down-width: ListMenu drop down width.
  • --smart-list-menu-drop-down-height: ListMenu drop down height.
  • --smart-list-menu-font-family: ListMenu font family.
  • --smart-list-menu-font-size: ListMenu font size.
  • --smart-list-menu-filter-input-vertical-offset: Defines vertical offset of the ListMenu's filter input.
  • --smart-list-menu-filter-input-horizontal-offset: Defines horizontal offset of the ListMenu's filter input.
  • --smart-list-menu-border-width: Defines ListMenu's border width.
  • --smart-list-menu-border-top-right-radius: Defines ListMenu's top-right border radius.
  • --smart-list-menu-border-top-left-radius: Defines ListMenu's top-left border radius.
  • --smart-list-menu-border-bottom-left-radius: Defines ListMenu's bottom-left border radius.
  • --smart-list-menu-border-bottom-right-radius: Defines ListMenu's bottom-right border radius.
  • --smart-list-menu-header-background: Defines ListMenu's header background color.
  • --smart-list-menu-header-border: Defines ListMenu's header border color.
  • --smart-list-menu-header-color: Defines ListMenu's header color.
  • --smart-list-menu-background: Defines ListMenu's background color.
  • --smart-list-menu-border: Defines ListMenu's border color.
  • --smart-list-menu-color: Defines ListMenu's color.
  • --smart-list-menu-item-background-hover: Defines ListMenu's item background color on hover state.
  • --smart-list-menu-item-border-hover: Defines ListMenu's item border color on hover state.
  • --smart-list-menu-item-color-hover: Defines ListMenu's item color on hover state.

The following CSS selectors can be used to style List Menu:

  • smart-list-menu - applied to the whole ListMenu element. Can be used for setting width, height and border-, color- and font-related CSS properties.
    • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
      • .smart-hamburger-icon - applied to the ListMenu's hamburger icon that appears when the element is minimized.
        • .smart-hamburger-icon-line .smart-hamburger-icon-line-top - one of the three lines used for the 'Hamburger' icon.
        • .smart-hamburger-icon-line .smart-hamburger-icon-line-center - one of the three lines used for the 'Hamburger' icon.
        • .smart-hamburger-icon-line .smart-hamburger-icon-line-bottom - one of the three lines used for the 'Hamburger' icon.
        • .smart-hamburger-icon-custom-container - applied to the container of the custom minimize icon (visible when the property minimizeIconTemplate is set).
      • .smart-list-menu-view - applied to the main ListMenu view. When the element is minimized, it acts as a dropdown.
        • .smart-list-menu-view-minimized - applied to the main ListMenu view when the element is minimized.
        • .smart-header - applied to the ListMenu header.
          • smart-button - represents the "back" button in the header.
            • .smart-arrow .smart-arrow-left - used for the icon of the button.
          • .smart-title - appied to the title in the header.
        • .smart-list-menu-filter-input - applied to the filter input.
        • .smart-menu-scroll-button .smart-spin-button .smart-scroll-button-near - applied to ListMenu top scroll button.
          • .smart-arrow .smart-arrow-up - a container for the actual icon of the button.
        • .smart-menu-scroll-button .smart-spin-button .smart-scroll-button-far - applied to ListMenu bottom scroll button.
          • .smart-arrow .smart-arrow-down - a container for the actual icon of the button.
        • .smart-menu-main-container - applied to the container of smart-menu-item and smart-menu-items-group elements.
          • smart-menu-items-group - custom element that represents an HTML and a logical container of Menu items.
            • .smart-menu-item-label-element - applied to the label of the items group.
            • .smart-menu-items-group-arrow - applied to the arrow of the items group.
          • smart-menu-item - custom element that represents a Menu item.
            • .smart-menu-item-label-element - applied to the label of the item
            • .smart-menu-item-shortcut - applied to the helper label of the item, that can be used to indicate a helper text, such as a keyboard shortcut.
        • .smart-loader-container - applied to the container for the loading indicator.
          • .smart-loader - applied to the loading indicator.
          • .smart-loader-label - applied to the label for the loading indicator.