Window - CSS API Reference

All Common CSS variables:

Specific CSS variables for Window styling:

• --smart-window-default-height: Window default height.
• --smart-window-default-width: Window default width.
• --smart-window-header-height: Window header height.
• --smart-window-footer-height: Window footer height.
• --smart-window-min-width: Window header width.

The following CSS selectors can be used to style Window:

• smart-window - 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-header-section - an HTML container that holds the header and header buttons.
      • .smart-header - the header ( title ) section of the element.
      • .smart-buttons-container - an HTML container that holds the header buttons of the window.
        • .smart-pin-button - a smartButton custom element used for the pin action.
        • .smart-collapse-button - a smartButton custom element used for the collapse action.
        • .smart-maximize-button - a smartButton custom element used for the maximize action.
        • .smart-minimize-button - a smartButton custom element used for the maximize action.
        • .smart-close-button - a smartButton custom element used for the close action.
    • .smart-content - an HTML container that holds the main content of the element.
    • .smart-footer - the footer section of the element.

The following CSS selectors can be used to style Dialog Window:

• smart-dialog-window - 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-header-section - an HTML container that holds the header and header buttons.
      • .smart-header - the header ( title ) section of the element.
      • .smart-buttons-container - an HTML container that holds the header buttons of the window.
        • .smart-pin-button - a smartButton custom element used for the pin action.
        • .smart-collapse-button - a smartButton custom element used for the collapse action.
        • .smart-maximize-button - a smartButton custom element used for the maximize action.
        • .smart-minimize-button - a smartButton custom element used for the maximize action.
        • .smart-close-button - a smartButton custom element used for the close action.
    • .smart-content - an HTML container that holds the main content of the element.
    • .smart-footer - the footer section of the element.
      • .smart-confirm-button - a smartButton used as a confirm button.
      • .smart-cancel-button - a smartButton used as a cancel button.

The following CSS selectors can be used to style Alert Window:

• smart-alert-window - 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-header-section - an HTML container that holds the header and header buttons.
      • .smart-header - the header ( title ) section of the element.
      • .smart-buttons-container - an HTML container that holds the header buttons of the window.
        • .smart-pin-button - a smartButton custom element used for the pin action.
        • .smart-collapse-button - a smartButton custom element used for the collapse action.
        • .smart-maximize-button - a smartButton custom element used for the maximize action.
        • .smart-minimize-button - a smartButton custom element used for the maximize action.
        • .smart-close-button - a smartButton custom element used for the close action.
    • .smart-content - an HTML container that holds the main content of the element.
    • .smart-footer - the footer section of the element.
      • .smart-confirm-button - a smartButton used as a confirm button.
      • .smart-cancel-button - a smartButton used as a cancel button.

The following CSS selectors can be used to style Prompt Window:

• smart-prompt-window - 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-header-container - an HTML container that holds the header and header buttons.
      • .smart-header - the header ( title ) section of the element.
      • .smart-buttons-container - an HTML container that holds the header buttons of the window.
        • .smart-close-button - a smartButton custom element used for the close action.
    • .smart-content - an HTML container that holds the main content of the element.
      • smart-text-box - a smartTextBox custom element used for text input.
    • .smart-footer - the footer section of the element.
      • .smart-confirm-button - a smartButton used as a confirm button.
      • .smart-cancel-button - a smartButton used as a cancel button.

The following CSS selectors can be used to style Multiline Prompt Window:

• smart-multiline-prompt-window - 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-header-section - an HTML container that holds the header and header buttons.
      • .smart-header - the header ( title ) section of the element.
      • .smart-buttons-container - an HTML container that holds the header buttons of the window.
        • .smart-close-button - a smartButton custom element used for the close action.
    • .smart-content - an HTML container that holds the main content of the element.
      • smart-multiline-text-box - a smartMultilineTextBox custom element used for text input.
    • .smart-footer - the footer section of the element.
      • .smart-confirm-button - a smartButton used as a confirm button.
      • .smart-cancel-button - a smartButton used as a cancel button.

The following CSS selectors can be used to style Progress Window:

• smart-progress-window - 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-header-section - an HTML container that holds the header and header buttons.
      • .smart-header - the header ( title ) section of the element.
      • .smart-buttons-container - an HTML container that holds the header buttons of the window.
        • .smart-close-button - a smartButton custom element used for the close action.
    • .smart-content - an HTML container that holds the main content of the element.
    • .smart-footer - the footer section of the element.
      • smart-progress-bar - a smartProgressBar element used to display the progress.
      • .smart-complete-button - a smartButton used as a confirm button.

The following CSS selectors can be used to style Tabs Window:

• smart-tabs-window - 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-header-section - an HTML container that holds the header and header buttons.
      • .smart-header - the header ( title ) section of the element.
      • .smart-buttons-container - an HTML container that holds the header buttons of the window.
        • .smart-maximize-button - a smartButton custom element used for the maximize action.
        • .smart-minimize-button - a smartButton custom element used for the maximize action.
        • .smart-close-button - a smartButton custom element used for the close action.
    • .smart-content - an HTML container that holds the main content of the element.
      • smart-tabs - a smartTabs element.
    • .smart-footer - the footer section of the element.

The following CSS selectors can be used to style Wait Window:

• smart-wait-window - 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-header-section - an HTML container that holds the header and header buttons.
      • .smart-header - the header ( title ) section of the element.
      • .smart-buttons-container - an HTML container that holds the header buttons of the window.
        • .smart-close-button - a smartButton custom element used for the close action.
    • .smart-content - an HTML container that holds the main content of the element.
      • smart-progress-bar - a smartProgressBar element with undeterminate state.
    • .smart-footer - the footer section of the element.

Demo

<style>
        #window{
            --smart-window-header-background: #547284;
            --smart-window-background: #f5fafd;
            --smart-window-header-color: #f5fafd;
        }
</style>