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

  • –smart-accordion-animation-duration: Accordion’s animation duration
  • –smart-accordion-default-width: Accordion’s default width
  • –smart-accordion-default-height: Accordion’s default height
  • –smart-accordion-expanded-content-height: The height of the expanded items content part. Calculated dynamically. Used in “singleFitHeight” mode.
  • –smart-accordion-expanded-content-local-height: The height of an expanded item content part. Calculated dynamically for each item. Used in all modes except “singleFitHeight”.
  • –smart-accordion-font-family: Element’s font-family.
  • –smart-accordion-font-size: Element’s font-size.
  • –smart-accordion-item-header-height: Element’s header height. Used in several calcilations related to items height.
  • –smart-accordion-item-background: The background color of the accordion items.
  • –smart-accordion-item-border: Border settings of the accordion items.
  • –smart-accordion-item-border-width: Border width of the accordion items.
  • –smart-accordion-item-color: The color of the accordion item’s text.
  • –smart-accordion-item-border-top-right-radius: The top-right radius of each accordion item.
  • –smart-accordion-item-border-top-left-radius: The top-left radius of each accordion item.
  • –smart-accordion-item-border-bottom-left-radius: The bottom-left radius of each accordion item.
  • –smart-accordion-item-border-bottom-right-radius: The bottom-right radius of each accordion item.
  • –smart-accordion-item-expanded-offset: An offset below each expanded accordion item.
  • –smart-accordion-item-header-background: The background color of an accordion item header.
  • –smart-accordion-item-header-border: The background color of an accordion item header.
  • –smart-accordion-item-header-color: The color of an accordion item header.
  • –smart-accordion-item-header-background-hover: The background color of hovered item’s header.
  • –smart-accordion-item-header-border-hover: Border settings of hovered item’s header.
  • –smart-accordion-item-header-color-hover: The color of hovered item’s header.
  • –smart-accordion-item-header-background-active: The background color of active item’s header.
  • –smart-accordion-item-header-border-active: Border settings of active item’s header.
  • –smart-accordion-item-header-color-active: The color of active item’s header.
  • –smart-accordion-item-header-background-focus: The background color of focused item’s header.
  • –smart-accordion-item-header-border-focus: Border settings of focused item’s header.
  • –smart-accordion-item-header-color-focus: The text color of focused item’s header.

The following CSS selectors can be used to style an Accordion:

  • smart-accordion – the element itself. Can be used to set width and height for the whole element.
    • .smart-container – the container that holds all of the internals of the element. Shoudn’t be used for styling.
      • .smart-accordion-item – smartAccordionItem custom element. All of the accordion’s content is represented as smart-accordion-item blocks.
        • .smart-container – the container that holds all of the internals of the accordion item. Shoudn’t be used for styling.
          • .smart-accordion-item-header – used as an item’s header container.
            • .smart-arrow – an HTML Span element used as an item’s arrow.
            • .smart-label – an HTML Span element used as an item’s label.
          • .smart-accordion-item-content – used as an item’s content part.
            • .smart-content-container – used as an item’s content container part.

Demo

<style>
        #accordion{
                --smart-accordion-item-expanded-offset: 20px;
                --smart-accordion-animation-duration: 350ms;
        }
</style>