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>