Build your web apps using Smart UI
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.
-
.smart-header-section - an HTML container that holds the header and header buttons.
-
.smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
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.
-
.smart-header-section - an HTML container that holds the header and header buttons.
-
.smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
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.
-
.smart-header-section - an HTML container that holds the header and header buttons.
-
.smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
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.
-
.smart-header-container - an HTML container that holds the header and header buttons.
-
.smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
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.
-
.smart-header-section - an HTML container that holds the header and header buttons.
-
.smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
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.
-
.smart-header-section - an HTML container that holds the header and header buttons.
-
.smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
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.
-
.smart-header-section - an HTML container that holds the header and header buttons.
-
.smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
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.
-
.smart-header-section - an HTML container that holds the header and header buttons.
-
.smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
Demo
<style> #window{ --smart-window-header-background: #547284; --smart-window-background: #f5fafd; --smart-window-header-color: #f5fafd; } </style>