Ribbon - CSS API Reference

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 Smart.Tank, Smart.Slider and Smart.Gauge.
• --smart-tick-label-color: Default tick label color for Smart.Tank, Smart.Slider and Smart.Gauge.
• --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 barcodes, dropdown barcodes.

Specific CSS variables for Tabs styling:

• --smart-ribbon-border-color: The color of the ribbon border.
• --smart-ribbon-collapsed-tab-height: The height of a collapsed tab.
• --smart-ribbon-group-items-padding: The padding of group items.
• --smart-ribbon-header-padding: The padding of the ribbon header.
• --smart-ribbon-tab-header-height: The height of a tab header.
• --smart-ribbon-tab-header-width: The width of a tab header.
• --smart-ribbon-tab-height: The height of a tab.
• --smart-ribbon-tab-padding: The padding of a tab.

The following CSS selectors can be used to style Tabs:

• smart-ribbon - applied to the whole Ribbon 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-ribbon-header - applied to the Tabs header section, which includes the file menu button and the header tab buttons.
      • .smart-ribbon-file-container - a container for the file menu button
      • .smart-ribbon-header-tabs - a container for the tabStrip.
        • .smart-ribbon-header-tab - applied to the tab header button
    • .smart-ribbon-tabs - a container for the tabs content.
    • .smart-ribbon-tab - applied to the tab content.
      • .smart-ribbon-tab-groups - a container for the tab groups.
        • .smart-ribbon-group - applied to a tab group
          • .smart-ribbon-group-items - a container for the group items.
            • .smart-ribbon-item - applied to a ribbon item
          • .smart-ribbon-group-header - a container for the group header
          • .smart-ribbon-group-drop-down-container - a container for the drop down button when the group is condensed

Demo

<style>
        #ribbon .smart-ribbon-header{
            --smart-surface: #10793F;
            --smart-primary-rgb: 255, 255, 255;
            --smart-primary: white;
            --smart-surface-color: white;
            --smart-ui-state-active: #185C37;
            --smart-ui-state-color-active: var(--smart-primary);
            --smart-ui-state-selected: var(--smart-primary);
            --smart-ui-state-border-active: var(--smart-surface);
            --smart-ui-state-color-selected: var(--smart-surface);
            --smart-ui-state-hover: #185C37;
            --smart-ui-state-color-hover: var(--smart-primary);
            --smart-border-width: 0px;
        }
</style>