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 File Upload styling:

  • --smart-file-upload-default-width: Default width of the FileUpload.
  • --smart-file-upload-browse-button-width: Default width of the browse button.
  • --smart-file-upload-browse-button-height: Default height of the browse button.
  • --smart-file-upload-footer-button-width: Default height of the FileUpload's footer buttons.
  • --smart-file-upload-footer-button-height: Default height of the smartFileUpload's footer buttons.
  • --smart-file-upload-text-content-uploading-start: Default text content of the pseudo element shown when upload starts.
  • --smart-file-upload-text-content-uploading: Default text content of the pseudo element shown during the upload.
  • --smart-file-upload-text-content-error: Default text content of the pseudo element shown on error.
  • --smart-file-upload-text-content-pause: Default text content of the pseudo element shown when upload is paused.
  • --smart-file-upload-text-content-drop-zone: Default text content of the pseudo element shown where is the drop zone.
  • --smart-file-upload-text-content-drop-zone-over: Default text content of the pseudo element shown when dragged files are over the drop zone.
  • --smart-file-upload-container-min-height: Sets minimmum height of the drop zone and file zone containers.
  • --smart-file-upload-total-files-min-height: Sets min height of the container where total numbers of items is displayed.
  • --smart-file-upload-font-family: Sets element's font family.
  • --smart-file-upload-font-size: Sets element's font size.
  • --smart-file-upload-background: Sets element's background settings.
  • --smart-file-upload-border: Sets element's border settings.
  • --smart-file-upload-border-width: Sets element's border width.
  • --smart-file-upload-color: Sets element's default color.

The following CSS selectors can be used to style FileUpload:

  • smart-file-upload - 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-file-upload-header - an HTML DIV element, used as container for the browsing elements.
        • .smart-browse-button - smart-button element, used as browse button.
        • .smart-browse-input - the input element used for browsing files.
      • .smart-file-upload-container - an HTML DIV element, used as container for the drop zone and file list.
        • .smart-drop-zone - an HTML DIV element, used as container, where files can be dropped and then uploaded.
        • .smart-selected-files - an HTML DIV element, used as container of the files list.
      • .smart-file - an HTML DIV element, used as container of the files list.
        • .smart-item-name - an HTML DIV element, used as container of a file item.
        • .smart-item-upload-button - an HTML SPAN element, used as item's upload button.
        • .smart-item-cancel-button - an HTML SPAN element, used as item's cancel button.
        • .smart-item-pause-button - an HTML SPAN element, used as item's pause button.
        • smart-progress-bar - smart-progress-bar element, used to be shown the uploading progress when showProgress element's property is se t to true.
      • .smart-total-files - an HTML DIV element, used do display the total number of selected files.It's shown when there is not enought spase all files to be rendered.
      • .smart-file-upload-footer - an HTML DIV element, used as container of the common buttons.
        • .smart-upload-all-button - smart-button element, used as Upload All files button.
        • .smart-cancel-all-button - smart-button element, used as Cancel All files button.
        • .smart-pause-all-button - smart-button element, used as Pause All files button.