ToggleButton CSS Styling

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 Toggle Button styling:

  • --smart-button-text-transform: Controls the capitalization of button's text. Could be set as uppercase/lowercase/capitalize.
  • --smart-button-border-top-right-radius: Sets button's top-right border radius.
  • --smart-button-border-top-left-radius: Sets button's top-left border radius.
  • --smart-button-border-bottom-left-radius: Sets button's bottom-left border radius.
  • --smart-button-border-bottom-right-radius: Sets button's bottom-right border radius.
  • --smart-button-border-width: Sets button's border width.
  • --smart-button-padding: Sets button's paddings.
  • --smart-button-font-family: Sets button's font family.
  • --smart-button-font-size: Sets button's font-size.
  • --smart-button-large-padding: Sets large button's paddings.
  • --smart-button-large-font-size: Sets large button's font size.
  • --smart-button-small-padding: Sets small button's paddings.
  • --smart-button-small-font-size: Sets small button's font size.
  • --smart-button-very-small-padding: Sets very small button's paddings.
  • --smart-button-very-small-font-size: Sets very small button's font size.
  • --smart-button-background: Defines button's background color
  • --smart-button-border: Defines button's border color.
  • --smart-button-color: Defines button's color.
  • --smart-button-background-hover: Defines button's background color on hover state.
  • --smart-button-border-hover: Defines button's border color on hover state.
  • --smart-button-color-hover: Defines button's color on hover state.
  • --smart-button-background-active: Defines button's background color on active state.
  • --smart-button-border-active: Defines button's border color on active state.
  • --smart-button-color-active: Defines button's color on active state.
  • --smart-button-background-focus: Defines button's background color when it's focussed.
  • --smart-button-border-focus: Defines button's border color when it's focussed.
  • --smart-button-color-focus: Defines button's color when it's focussed.
  • --smart-button-opacity: Defines button's opacity.
  • --smart-button-opacity-hover: Defines button's opacity on hover state.
  • --smart-button-opacity-active: Defines button's opacity on active state.
  • --smart-button-opacity-focus: Defines button's opacity when it's focussed.

Button - Flat

  • --smart-button-flat-color: The color of the flat button.

Button - Outlined

  • --smart-button-outlined-color: The color of the outlined button.
  • --smart-button-outlined-border: The border of the outlined button.

The following CSS selectors can be used to style Toggle Button:

  • smart-toggle-button - the element itself. Can be used to set width and height for the whole element.
    • .smart-button - an HTML Button element that contains almost all of the CSS work for the element. Can be used to apply borders, paddings, background, font, color, etc. It also contains tabindex and it's active and focused states are used to change the appearance of the element.