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 Tabs styling:

  • --smart-tabs-header-button-size: Tabs header buttons size. Horizontal Tabs header buttons width = Vertical Tab header buttons height.
  • --smart-tabs-animation-duration: Tabs animation duration.
  • --smart-tabs-default-width: Tabs default width.
  • --smart-tabs-default-height: Tabs default height.
  • --smart-tabs-font-family: Defines Tabs default font family.
  • --smart-tabs-font-size: Defines Tabs default font size.
  • --smart-tabs-border-width: Defines Tabs default border width.
  • --smart-tabs-selection-bar-background: Defines Tabs bar background color.
  • --smart-tabs-header-background: Defines Tabs header background color.
  • --smart-tabs-header-border: Defines Tabs header border color.
  • --smart-tabs-header-border-width: Defines Tabs header border width.
  • --smart-tabs-header-color: Defines Tabs header background color.
  • --smart-tabs-header-padding: Defines Tabs header padding.
  • --smart-tabs-header-offset: Defines Tabs header offset.
  • --smart-tabs-header-border-top-right-radius: Defines Tabs header top-right border radius.
  • --smart-tabs-header-border-top-left-radius: Defines Tabs header top-left border radius.
  • --smart-tabs-header-border-bottom-left-radius: Defines Tabs header bottom-left border radius.
  • --smart-tabs-header-border-bottom-right-radius: Defines Tabs header bottom-right border radius.
  • --smart-tabs-background: Defines tabs background color.
  • --smart-tabs-border: Defines tabs border color.
  • --smart-tabs-color: Defines tabs background color.
  • --smart-tab-item-padding: Defines vertical and horizontal padding of tab items.
  • --smart-tab-item-border-top-right-radius: Defines Tab items top-right border radius.
  • --smart-tab-item-border-top-left-radius: Defines Tab items top-left border radius.
  • --smart-tab-item-border-bottom-left-radius: Defines Tab items bottom-left border radius.
  • --smart-tab-item-border-bottom-right-radius: Defines Tab items bottom-right border radius.
  • --smart-tabs-border-top-right-radius: Defines Tabs top-right border radius.
  • --smart-tabs-border-top-left-radius: Defines Tabs top-left border radius.
  • --smart-tabs-border-bottom-left-radius: Defines Tabs bottom-left border radius.
  • --smart-tabs-border-bottom-right-radius: Defines Tabs bottom-right border radius.
  • --smart-tab-item-bottom-position-border-top-right-radius: Defines Tab items top-right border radius when the item is at bottom position.
  • --smart-tab-item-bottom-position-border-top-left-radius: Defines Tab items border-top border radius when the item is at bottom position.
  • --smart-tab-item-bottom-position-border-bottom-left-radius: Defines Tab items bottom-left border radius when the item is at bottom position.
  • --smart-tab-item-bottom-position-border-bottom-right-radius: Defines Tab items border-bottom border radius when the item is at bottom position.
  • --smart-tab-bottom-position-border-top-right-radius: Defines Tab top-right border radius when it's at bottom position.
  • --smart-tab-bottom-position-border-top-left-radius: Defines Tab top-left border radius when it's at bottom position.
  • --smart-tab-bottom-position-border-bottom-left-radius: Defines Tab bottom-left border radius when it's at bottom position.
  • --smart-tab-bottom-position-border-bottom-right-radius: Defines Tab bottom-right border radius when it's at bottom position.
  • --smart-tab-item-left-position-border-top-right-radius: Defines Tab items top-right border radius when the item is at left position.
  • --smart-tab-item-left-position-border-top-left-radius: Defines Tab items top-left border radius when the item is at left position.
  • --smart-tab-item-left-position-border-bottom-left-radius: Defines Tab items bottom-left border radius when the item is at left position.
  • --smart-tab-item-left-position-border-bottom-right-radius: Defines Tab items bottom-right border radius when the item is at left position.
  • --smart-tab-left-position-border-top-right-radius: Defines Tab top-right border radius when it's at left position.
  • --smart-tab-left-position-border-top-left-radius: Defines Tab top-left border radius when it's at left position.
  • --smart-tab-left-position-border-bottom-left-radius: Defines Tab bottom-left border radius when it's at left position.
  • --smart-tab-left-position-border-bottom-right-radius: Defines Tab bottom-right border radius when it's at left position.
  • --smart-tab-item-right-position-border-top-right-radius: Defines Tab items top-right border radius when the item is at right position.
  • --smart-tab-item-right-position-border-top-left-radius: Defines Tab items top-left border radius when the item is at right position.
  • --smart-tab-item-right-position-border-bottom-left-radius: Defines Tab items bottom-left border radius when the item is at right position.
  • --smart-tab-item-right-position-border-bottom-right-radius: Defines Tab items bottom-right border radius when the item is at right position.
  • --smart-tab-item-offset: Default tab item offset.
  • --smart-tab-item-initial-offset: Initial tab item offset.
  • --smart-tab-item-border-width: Tab item border width.
  • --smart-tab-item-text-transform: Tab item text capitalization.
  • --smart-tab-item-background: Default Tab item background color.
  • --smart-tab-item-border: Default Tab item border color.
  • --smart-tab-item-color: Default Tab item border color.
  • --smart-tab-item-background-hover: Default Tab item background color on hover state.
  • --smart-tab-item-border-hover: Default Tab item border color on hover state.
  • --smart-tab-item-color-hover: Default Tab item color on hover state.
  • --smart-tab-item-background-active: Default Tab item background color on active state.
  • --smart-tab-item-border-active Default Tab item border color on active state.
  • --smart-tab-item-color-active: Default Tab item color on active state.

The following CSS selectors can be used to style Tabs:

  • smart-tabs - applied to the whole Tabs element. Can be used for setting width, height and border-, color- and font-related CSS properties.
    • .smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
      • .smart-header .smart-tabs-header-section - applied to the Tabs header section, which includes the scroll buttons, tab strip, dropdown button and resize token.
        • .smart-tabs-header-items - a container for the tabStrip and the scroll buttons.
          • .smart-tabs-scroll-button .smart-nav-button .smart-spin-button - applied to the Tabs scroll buttons. These are shown only when the property tabOverflow is 'scroll' and there is not enough space to show all tab labels. See also section "CSS variables".
          • .smart-tab-strip - applied to the tab strip, which contains all tab and group labels.
            • .smart-tab-label-container - applied to tab labels. .smart-tab-selected is applied to selected tab label. [hover] is applied to hovered tab label. .smart-add-new-tab - applied to the "Add new" tab (+) label.
              • .smart-tab-label-text-wrapper - a wrapper for the label and the close button.
            • .smart-tab-label-text-container - text label container
            • .smart-tab-close-button - applied to tab close buttons, if enabled. .smart-tab-close-button-hovered - applied to hovered tab close buttons.
            • .smart-tab-group-container - applied to tab group labels. .smart-tab-group-selected is applied to the labels of groups which contain selected tabs. [hover] is applied to hovered tab label.
          • .smart-tab-label-text-wrapper - a wrapper for the label and the close button.
          • .smart-tab-label-text-container - text label container.
          • .smart-tab-group-arrow - a container for the arrow icon.
          • .smart-tabs-drop-down-button - applied to the dropdown button. It is shown only when the property tabOverflow is 'dropdown' and there is not enough space to show all tab labels. See also section "CSS variables".
      • .smart-tabs-selection-bar - a simple color bar used purely for styling.
      • .smart-tabs-content-section - applied to the Tabs content section.
        • smart-tab-item - applied to tab items, which represent the content of each tab.
        • smart-tab-items-group - applied to tab item groups, which are containers of grouped tab items.
      • .smart-tabs-drop-down-button-drop-down - applied to the dropdown which is shown when the dropdown button is clicked.
      • .smart-tab-group-drop-down is applied to the dropdown which is shown when a group label is clicked.
        • .smart-tab-label-container - a label for a tab label container that is currenttly not in view.
      • .smart-tabs-resize-token - applied to the element which is shown to indicate resize operation.