Smart UI Theme – All CSS Variables
This is the complete, exhaustive reference of all customizable CSS design tokens used in the Smart UI Theme.
Every --smart-… variable is listed exactly as defined in the source — grouped by category, with current values and purpose comments.
Perfect for theme customization, component styling, design system documentation, or quick variable lookup.
Sections Map (click to expand/collapse)
- Brand / Semantic Colors
- Application Surfaces
- Interaction / State Colors
- Borders & Shape
- Typography & Icons
- Global Component Defaults
- Icon Glyphs (unicode values)
- Accordion
- Array
- Breadcrumb
- Button
- Button Group
- Calendar
- Card View
- Carousel
- Chart
- CheckBox
- Color Panel
- Color Picker
- ComboBox
- Chip
- DataView (CardView & Kanban)
- Datetime Picker
- Docking Layout
- DropDownList
- DropDownButton
- Editor
- Filter Panel
- File Upload
- Gantt Chart
- Gauge
- Alternation Colors (Grid/Table/Scheduler/Pivot)
- Grid
- Grid Layout
- Group/Sort/Column/MultiFilter/Formatting Panels
- Kanban
- ListBox
- ListMenu
- Masked Text Box
- Menu
- MultiLine TextBox
- Multi Split Button
- Numeric TextBox
- Progress Bar
- Query Builder
- Radio Button
- Ribbon
- Sortable
- Splitter
- Switch Button
- Slider
- Scrollbar
- Table & PivotTable
- Tank
- Tabs
- Time Picker
- Tooltip
- Toast
- Tree
- TextBox
- Validation Panel
- PasswordTextBox
- Pager
- ScrollViewer
- Scheduler
- Window
- Elevations
Brand / Semantic Colors
| Variable | Value | Comment |
|---|---|---|
| Brand / Semantic Colors | ||
| --smart-primary-rgb | 0, 92, 153 | |
| --smart-primary | rgb(var(--smart-primary-rgb)) | |
| --smart-primary-color | #ffffff | |
| --smart-secondary-rgb | 45, 45, 48 | |
| --smart-secondary | rgb(var(--smart-secondary-rgb)) | |
| --smart-secondary-color | #ffffff | |
| --smart-error-rgb | 176, 0, 32 | |
| --smart-error | rgb(var(--smart-error-rgb)) | |
| --smart-error-color | #ffffff | |
| --smart-success-rgb | 139, 195, 74 | |
| --smart-success | rgb(var(--smart-success-rgb)) | |
| --smart-success-color | #ffffff | |
| --smart-info-rgb | 92, 192, 222 | |
| --smart-info | rgb(var(--smart-info-rgb)) | |
| --smart-info-color | #ffffff | |
| --smart-warning-rgb | 240, 173, 78 | |
| --smart-warning | rgb(var(--smart-warning-rgb)) | |
| --smart-warning-color | #ffffff | |
Application Surfaces
| Variable | Value | Comment |
|---|---|---|
| Application Surfaces | ||
| --smart-light-rgb | 255, 255, 255 | |
| --smart-light | rgb(var(--smart-light-rgb)) | |
| --smart-light-color | #222222 | |
| --smart-dark-rgb | 34, 34, 34 | |
| --smart-dark | rgb(var(--smart-dark-rgb)) | |
| --smart-dark-color | #ffffff | |
| --smart-background | #fefefe | |
| --smart-background-color | #5A5A5A | |
| --smart-surface | #F5F5F5 | |
| --smart-surface-color | #323232 | |
Interaction / State Colors
| Variable | Value | Comment |
|---|---|---|
| Interaction / State Colors | ||
| --smart-disabled | #CCCCCC | |
| --smart-disabled-color | #555555 | |
| --smart-ui-state-hover | #ebebeb | |
| --smart-ui-state-color-hover | #333 | |
| --smart-ui-state-border-hover | var(--smart-ui-state-hover) | |
| --smart-ui-state-active | var(--smart-primary) | |
| --smart-ui-state-color-active | var(--smart-primary-color) | |
| --smart-ui-state-border-active | var(--smart-primary) | |
| --smart-ui-state-focus | #e2e0e0 | |
| --smart-ui-state-color-focus | #333 | |
| --smart-ui-state-border-focus | var(--smart-ui-state-focus) | |
| --smart-ui-state-selected | rgba(var(--smart-primary-rgb), .1) | |
| --smart-ui-state-color-selected | var(--smart-primary) | |
| --smart-ui-state-border-selected | rgba(var(--smart-primary-rgb), .1) | |
Borders & Shape
| Variable | Value | Comment |
|---|---|---|
| Borders & Shape | ||
| --smart-item-border-width | 1px | |
| --smart-item-border-radius | var(--smart-border-radius) | |
| --smart-item-border-top-left-radius | var(--smart-border-radius) | |
| --smart-item-border-top-right-radius | var(--smart-border-radius) | |
| --smart-item-border-bottom-left-radius | var(--smart-border-radius) | |
| --smart-item-border-bottom-right-radius | var(--smart-border-radius) | |
| --smart-border-width | 1px | |
| --smart-border-radius | 4px | |
| --smart-border-top-left-radius | var(--smart-border-radius) | |
| --smart-border-top-right-radius | var(--smart-border-radius) | |
| --smart-border-bottom-left-radius | var(--smart-border-radius) | |
| --smart-border-bottom-right-radius | var(--smart-border-radius) | |
| --smart-border | #E0E0E0 | |
| --smart-border-rgb | 244, 224, 224 | |
| --smart-outline | #b2b2b2 | |
Typography & Icons
| Variable | Value | Comment |
|---|---|---|
| Typography & Icons | ||
| --smart-font-size | 14px | |
| --smart-font-weight | inherit | |
| --smart-font-style | inherit | |
| --smart-font-family | Roboto, "Helvetica Neue", sans-serif | |
| --smart-font-family-icon | smart-icons | |
| --smart-font-family-icon-src | local('../font/smart-icons'), url('../font/smart-icons.woff2') format('woff2'), … | |
Global Component Defaults
| Variable | Value | Comment |
|---|---|---|
| Global Component Defaults | ||
| --smart-tick-color | var(--smart-border) | tick color for Smart.Tank, Smart.Slider and Smart.Gauge |
| --smart-tick-label-color | var(--smart-background-color) | tick label color for Smart.Tank, Smart.Slider and Smart.Gauge |
| --smart-box-height | 450px | default height for Dialog, Gauge, Accordion, Tabs, Tree, Array |
| --smart-box-width | 450px | default width for Dialog, Gauge, Accordion, Tabs, Tree, Array |
| --smart-bar-height | 48px | default height for headers and footers |
| --smart-bar-width | 400px | default width for headers and footers |
| --smart-editor-height | 30px | default height for editors |
| --smart-editor-width | 250px | default width for editors |
| --smart-editor-drop-down-width | 300px | default width for editors drop-down |
| --smart-editor-drop-down-height | 400px | default height for editors drop-down |
| --smart-editor-drop-down-padding-size | 3px | Smart.DropDownList, Smart.ComboBox drop down default height |
| --smart-editor-drop-down-max-width | 800px | Smart.DropDownList, Smart.ComboBox, Smart.TextBox popup max width |
| --smart-editor-drop-down-min-width | 100px | Smart.DropDownList, Smart.ComboBox, Smart.TextBox popup min width |
| --smart-editor-drop-down-max-height | 400px | Smart.DropDownList, Smart.ComboBox, Smart.TextBox popup max height |
| --smart-editor-drop-down-min-height | 50px | Smart.DropDownList, Smart.ComboBox, Smart.TextBox popup min height |
| --smart-editor-drop-down-resize-bar-height | 15px | Smart.DropDownList, Smart.ComboBox, Smart.TextBox popup resize bar default height |
| --smart-editor-drop-down-vertical-offset | 5px | Vertical offset of editor drop downs |
| --smart-editor-drop-down-z-index | 9999 | z-index of editor drop downs |
| --smart-editor-label-padding | 4px | default padding for inputs |
| --smart-editor-addon-width | 27px | default width for spin buttons, dropdown buttons |
| --smart-column-icon-size | 30px | default size of column icons |
Icon Glyphs (unicode values)
| Variable | Value | Comment |
|---|---|---|
| Icon Glyphs (unicode values) | ||
| --smart-icon-table | '\e800' | Code of table icon |
| --smart-icon-star | '\e801' | Code of star icon |
| --smart-icon-star-empty | '\e802' | Code of empty star icon |
| --smart-icon-plus | '\e803' | Code of plus icon |
| --smart-icon-minus | '\e804' | Code of minus icon |
| --smart-icon-attention-circled | '\e805' | Code of circled attention icon |
| --smart-icon-align-left | '\e806' | Code of align left icon |
| --smart-icon-align-right | '\e807' | Code of align right icon |
| --smart-icon-align-center | '\e808' | Code of align center icon |
| --smart-icon-align-justify | '\e813' | Code of align justify icon |
| --smart-icon-reload | '\e809' | Code of reload icon |
| --smart-icon-cloud | '\e84d' | Code of cloud icon |
| --smart-icon-cancel | '\e80d' | Code of cancel icon |
| --smart-icon-close | '\e80d' | Code of close icon |
| --smart-icon-cancel-circled | '\e80e' | Code of Close icon Alt |
| --smart-icon-cancel-alt | '\E849' | Code of Close icon Alt |
| --smart-icon-arrow-alt | '\F105' | Code of circled cancel icon |
| --smart-icon-plus-circled | '\e810' | Code of circled plus icon |
| --smart-icon-power | '\e811' | Code of power icon |
| --smart-icon-minus-circled | '\e814' | Code of circled minus icon |
| --smart-icon-arrow-up-alt | '\e817' | Code of alternative up arrow icon |
| --smart-icon-radio | '\e818' | Code of radio icon |
| --smart-icon-refresh | '\e819' | Code of refresh icon |
| --smart-icon-chart | '\e81a' | Code of chart icon |
| --smart-icon-check-squared | '\e81b' | Code of squared check icon |
| --smart-icon-resize-full | '\e81c' | Code of full resize icon |
| --smart-icon-resize-small | '\e81d' | Code of small resize icon |
| --smart-icon-resize-vertical | '\e80c' | Code of vertical resize icon |
| --smart-icon-resize-horizontal | '\e80f' | Code of horizontal resize icon |
| --smart-icon-lock | '\e821' | Code of lock icon |
| --smart-icon-sort | '\e823' | Code of sort icon |
| --smart-icon-delete | '\e826' | Code of delete icon |
| --smart-icon-search | '\e828' | Code of search icon |
| --smart-icon-calendar | '\e829' | Code of calendar icon |
| --smart-icon-edit | '\e82a' | Code of edit icon |
| --smart-icon-popup | '\e82c' | Code of popup icon |
| --smart-icon-lock-open | '\e82e' | Code of open lock icon |
| --smart-icon-add-filter | '\e82f' | Code of add filter icon |
| --smart-icon-block | '\e832' | Code of block icon |
| --smart-icon-settings | '\e833' | Code of settings icon |
| --smart-icon-duplicate | '\e834' | Code of duplicate icon |
| --smart-icon-copy-record | '\e835' | Code of copy record icon |
| --smart-icon-download-alt | '\e836' | Code of alternative download icon |
| --smart-icon-clock | '\e837' | Code of clock icon |
| --smart-icon-attention | '\e838' | Code of attention icon |
| --smart-icon-help-circled | '\e839' | Code of circled help icon |
| --smart-icon-mail | '\e83c' | Code of mail icon |
| --smart-icon-up | '\e83f' | Code of up icon |
| --smart-icon-first-page | '\e900' | Code of first page icon |
| --smart-icon-arrow-down | '\e901' | Code of down arrow icon |
| --smart-icon-arrow-left | '\e902' | Code of left arrow icon |
| --smart-icon-arrow-right | '\e903' | Code of right arrow icon |
| --smart-icon-arrow-up | '\e904' | Code of up arrow icon |
| --smart-icon-arrow-down-filled | '\e812' | Code of filled down arrow icon |
| --smart-icon-arrow-left-filled | '\e816' | Code of filled left arrow icon |
| --smart-icon-arrow-right-filled | '\e81e' | Code of filled right arrow icon |
| --smart-icon-arrow-up-filled | '\e815' | Code of filled up arrow icon |
| --smart-icon-last-page | '\e905' | Code of last page icon |
| --smart-icon-more-horiz | '\e906' | Code of more icon |
| --smart-icon-skip-next | '\e907' | Code of skip next icon |
| --smart-icon-check | '\e908' | Code of check icon |
| --smart-icon-mode-edit | '\e909' | Code of edit mode icon |
| --smart-icon-replay | '\e90c' | Code of replay icon |
| --smart-icon-visibility | '\e90d' | Code of visibility icon |
| --smart-icon-visibility-off | '\e90e' | Code of visibility off icon |
| --smart-icon-link | '\e831' | Code of link icon |
| --smart-icon-unlink | '\f127' | Code of link icon |
| --smart-icon-link-ext | '\f08e' | Code of link icon |
| --smart-icon-check-empty | '\f096' | Code of empty check icon |
| --smart-icon-filter | '\f0b0' | Code of filter icon |
| --smart-icon-resize-full-alt | '\f0b2' | Code of full resize alternative icon |
| --smart-icon-menu | '\f0c9' | Code of menu icon |
| --smart-icon-sort-1 | '\f0dc' | Code of sort alternative icon |
| --smart-icon-paste | '\f0ea' | Code of paste icon |
| --smart-icon-circle-empty | '\f10c' | Code of empty circle icon |
| --smart-icon-circle | '\f111' | Code of circle icon |
| --smart-icon-ellipsis | '\f141' | Code of ellipsis icon |
| --smart-icon-minus-squared | '\f146' | Code of squared minus icon |
| --smart-icon-ok-squared | '\f14a' | Code of squared ok icon |
| --smart-icon-sort-name-up | '\f15d' | Code of sort name up icon |
| --smart-icon-sort-name-down | '\f15e' | Code of sort name down icon |
| --smart-icon-sort-alt-up | '\f160' | Code of sort up alternative icon |
| --smart-icon-sort-alt-down | '\f161' | Code of sort down alternative icon |
| --smart-icon-sort-number-up | '\f162' | Code of sort number up icon |
| --smart-icon-sort-number-down | '\f163' | Code of sort number down icon |
| --smart-icon-dot-circled | '\f192' | Code of circled dot icon |
| --smart-icon-toggle-off | '\f204' | Code of toggle off icon |
| --smart-icon-toggle-on | '\f205' | Code of toggle on icon |
| --smart-icon-group | '\f247' | Code of group icon |
| --smart-icon-ungroup | '\f248' | Code of ungroup icon |
| --smart-icon-window-maximize | '\f2d0' | Code of maximize window icon |
| --smart-icon-window-minimize | '\f2d1' | Code of minimize window icon |
| --smart-icon-window-restore | '\f2d2' | Code of restore window icon |
| --smart-icon-window-pin-alt | '\e82d' | Code of pin window alternative icon |
| --smart-icon-window-pin | '\e80a' | Code of window pin icon |
| --smart-icon-docs | '\f0c5' | Code of docs icon |
| --smart-icon-pdf | '\f1c1' | Code of pdf icon |
| --smart-icon-excel | '\f1C3' | Code of excel icon |
| --smart-icon-word | '\f1C2' | Code of word icon |
| --smart-icon-archive | '\f1C6' | Code of zip icon |
| --smart-icon-file | '\e845' | Code of file icon |
| --smart-icon-powerpoint | '\f1c4' | Code of powerpoint icon |
| --smart-icon-text | '\f0f6' | Code of text icon |
| --smart-icon-math | '\f01a' | Code of math icon |
| --smart-icon-spin | '\e80b' | Code of spin icon |
| --smart-icon-user | '\e81f' | Code of user icon |
| --smart-icon-font | '\f031' | Code of font icon |
| --smart-icon-fontsize | '\f088' | Code of fontsize icon |
| --smart-icon-contains | '\f063' | Code of contains icon |
| --smart-icon-starts_with | '\f064' | Code of starts with icon |
| --smart-icon-ends_with | '\f065' | Code of ends with icon |
| --smart-icon-does_not_contain | '\f066' | Code of does not contain icon |
| --smart-icon-equals | '\f52c' | Code of equals icon |
| --smart-icon-greater-than | '\f531' | Code of greater than icon |
| --smart-icon-greater-than-equal | '\f532' | Code of greater than or equal icon |
| --smart-icon-less-than | '\f536' | Code of less than icon |
| --smart-icon-less-than-equal | '\f537' | Code of less than or equal icon |
| --smart-icon-not-equal | '\f53e' | Code of not equal icon |
| --smart-icon-percentage | '\f541' | Code of percentage icon |
| --smart-icon-grip-vertical | '\f58e' | Code of grip icon |
| --smart-icon-between | '\f06a' | Code of between icon |
| --smart-icon-bold | '\e820' | Code of bold icon |
| --smart-icon-italic | '\e822' | Code of italic icon |
| --smart-icon-underline | '\f0cd' | Code of underline icon |
| --smart-icon-strike-through | '\f0cc' | Code of strike-through icon |
| --smart-icon-list-ordered | '\f0cb' | Code of list numbered icon |
| --smart-icon-list-unordered | '\f0ca' | Code of list bullet icon |
| --smart-icon-list-check | '\e89f' | Code of list check icon |
| --smart-icon-subscript | '\f12c' | Code of subscript icon |
| --smart-icon-superscript | '\f12b' | Code of superscript icon |
| --smart-icon-color-background | '\e830' | Code of bucket icon |
| --smart-icon-indent-right | '\e824' | Code of indent icon |
| --smart-icon-indent-left | '\e825' | Code of outdent icon |
| --smart-icon-image | '\e827' | Code of image icon |
| --smart-icon-case-lower | 'aa' | Code of lower case icon |
| --smart-icon-case-upper | 'AA' | Code of upper case icon |
| --smart-icon-print | '\e82b' | Code of print icon |
| --smart-icon-format-clear | 'T' | Code of clear format icon |
| --smart-icon-source-code | '\f121' | Code of source code icon |
| --smart-icon-split-mode | '\e83b' | Code of split mode icon |
| --smart-icon-cut | '\e83a' | Code of Cut icon |
| --smart-icon-video | '\f16a' | Code of YouTube video icon |
| --smart-icon-video-camera | '\e840' | Code of Bell icon |
| --smart-icon-bell | '\f0f3' | Code of video icon |
| --smart-icon-header | '\f1dc' | Code of Table Header |
| --smart-icon-row | '\f0db' | Code of Table Row icon |
| --smart-icon-row-before | '\f2d0' | Code of Table Row icon |
| --smart-icon-row-after | '\f2d0' | Code of Table Row icon |
| --smart-icon-row-delete | var(--smart-icon-cancel-circled) | Code of Table Row icon |
| --smart-icon-column | '\f0db' | Code of Table Column icon |
| --smart-icon-column-left | '\f2d0' | Code of Table Column left insert icon |
| --smart-icon-column-right | '\f2d0' | Code of Table Column right insert icon |
| --smart-icon-column-delete | var(--smart-icon-cancel-circled) | Code of Table Column delete icon |
| --smart-icon-vertical-align | '\f06a \e80c' | Code of Table Vertical Align icon |
| --smart-icon-styles | '\f1fc' | Code of Table Styles icon |
| --smart-icon-comment | '\F0E5' | Code of Comment icon |
| --smart-icon-card | '\E83E' | Code of Card icon |
| --smart-icon-tasks | '\F0AE' | Code of Tasks icon |
| --smart-icon-phone | '\E83D' | Code of Phone icon |
| --smart-icon-kanban | '\F181' | Code of Kanban icon |
| --smart-icon-table-alt | '\F0CE' | Code of Table icon |
| --smart-icon-zoom-in | '\E841' | Code of Zoom In icon |
| --smart-icon-zoom-out | '\E842' | Code of Zoom Out icon |
| --smart-icon-move | '\F047' | Code of Move icon |
| --smart-icon-home | '\E843' | Code of Home icon |
| --smart-icon-history | '\F1DA' | Code of History icon |
| --smart-icon-kanban-alt | '\e8a1' | Code of Kanban icon |
| --smart-icon-card-alt | '\e8a2' | Code of Card icon |
| --smart-icon-grid-alt | '\e8a3' | Code of Grid icon |
| --smart-icon-timeline | '\E8A4' | Code of timeline icon |
| --smart-icon-scheduler | '\E8A5' | Code of scheduler icon |
| --smart-icon-like | '\F164' | Code of like icon |
| --smart-icon-heart | '\E84E' | Code of heart icon |
| --smart-icon-flag | '\E850' | Code of flag icon |
| --smart-icon-music | '\E851' | Code of music |
Accordion
| Variable | Value | Comment |
|---|---|---|
| Accordion | ||
| --smart-accordion-animation-duration | 225ms | animation duration |
| --smart-accordion-default-width | var(--smart-box-width) | default width |
| --smart-accordion-default-height | var(--smart-box-height) | default height |
| --smart-accordion-expanded-content-height | 0px | Determines expanded content's height |
| --smart-accordion-expanded-content-local-height | 0px | The height of an expanded item content part. Calculated dynamically… |
| --smart-accordion-item-header-height | var(--smart-bar-height) | Element's header height… |
| --smart-accordion-item-expanded-offset | 20px | An offset below each expanded accordion item. |
Breadcrumb
| Variable | Value | Comment |
|---|---|---|
| Breadcrumb | ||
| --smart-breadcrumb-default-width | 400px | default width |
| --smart-breadcrumb-default-height | auto | default height |
| --smart-breadcrumb-padding | 10px | Padding of smart-breadcrumb and vertical offset between Smart.Breadcrumb items |
| --smart-breadcrumb-drop-down-width | var(--smart-editor-drop-down-width) | Width of dropdown in minimized mode |
| --smart-breadcrumb-item-height | 40px | Height of items |
| --smart-breadcrumb-horizontal-offset | 10px | Horizontal offset between items |
Button
| Variable | Value | Comment |
|---|---|---|
| Button | ||
| --smart-button-text-transform | uppercase | Controls the capitalization of button's text. Could be set as uppercase/lowercase/capitalize. |
| --smart-button-padding | 8px 16px | Sets button's paddings. |
| --smart-button-large-padding | 10px 16px | Sets large button's paddings. |
| --smart-button-large-font-size | 18px | Sets large button's font size. |
| --smart-button-small-padding | 5px 10px | Sets small button's paddings. |
| --smart-button-small-font-size | 12px | Sets small button's font size. |
| --smart-button-very-small-padding | 3px 5px | Sets very small button's paddings. |
| --smart-button-very-small-font-size | 10px | Sets very small button's font size. |
| --smart-button-flat-color | var(--smart-background-color) | The color of the flat button. |
| --smart-button-outlined-color | var(--smart-background-color) | The color of the outlined button. |
| --smart-button-outlined-border | var(--smart-border) | The border of the outlined button. |
Button Group
| Variable | Value | Comment |
|---|---|---|
| Button Group | ||
| --smart-button-group-default-width | auto | default width |
| --smart-button-group-default-height | auto | default height |
Calendar
| Variable | Value | Comment |
|---|---|---|
| Calendar | ||
| --smart-calendar-header-height | calc(0.75 * var(--smart-bar-height)) | default height for Smart.Calendar's header section |
| --smart-calendar-footer-height | calc(0.75 * var(--smart-bar-height)) | default height for Smart.Calendar's footer section |
| --smart-calendar-title-height | calc(1.25 * var(--smart-bar-height)) | default height for calendar's title. |
| --smart-calendar-cell-size | 30px | default size of calendar's cell. |
| --smart-calendar-cell-spacing | 4px | Defines calendar's cell spacing. |
| --smart-calendar-default-width | calc(50px + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size))) | Smart.Calendar default width |
| --smart-calendar-default-height | calc(var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height)) | Smart.Calendar default height |
| --smart-calendar-title-text-transform | initial | Controls the capitalization of the title text. |
| --smart-calendar-week-title-text-transform | uppercase | Controls the capitalization of the week title. |
| --smart-calendar-header-text-transform | uppercase | Controls the capitalization of the header text. |
| --smart-calendar-footer-text-transform | uppercase | Controls the capitalization of the footer text. |
| --smart-calendar-cell-border-top-right-radius | 15px | Defines cell's top-right border radius. |
| --smart-calendar-cell-border-top-left-radius | 15px | Defines cell's top-left border radius. |
| --smart-calendar-cell-border-bottom-left-radius | 15px | Defines cell's bottom-left border radius. |
| --smart-calendar-cell-border-bottom-right-radius | 15px | Defines cell's bottom-right border radius. |
| --smart-calendar-title-padding | 10px | Defines title's padding |
| --smart-calendar-important-date-background | var(--smart-ui-state-hover) | |
| --smart-calendar-important-date-color | var(--smart-ui-state-color-hover) | |
| --smart-calendar-important-date-border-color | var(--smart-ui-state-border-hover) | |
| --smart-calendar-navigation-button-size | 30px | Sets the size for the navigation buttons |
Card View
| Variable | Value | Comment |
|---|---|---|
| Card View | ||
| --smart-card-view-default-width | 1200px | default width of CardView. |
| --smart-card-view-default-height | 800px | default height of CardView. |
| --smart-card-view-header-height | 30px | Height of the CardView header |
| --smart-card-view-cover-height | var(--smart-carousel-default-height) | Height of CardView cover (carousel). |
| --smart-card-view-vertical-offset | 15px | Vertical offset of CardView. |
| --smart-card-view-column-min-width | 250px | Min width of CardView visual columns. |
| --smart-card-view-gap | 10px | Gap between CardView cards. |
| --smart-card-view-add-new-button-size | 60px | Size of the 'Add new record' (+) button. |
Carousel
| Variable | Value | Comment |
|---|---|---|
| Carousel | ||
| --smart-carousel-default-width | 600px | default width of the element |
| --smart-carousel-default-height | 200px | default height of the element |
| --smart-carousel-3d-mode-slide-width | 400px | default width of a slide in 3d mode |
| --smart-carousel-3d-mode-slide-height | 400px | default height of a slide in 3d mode |
| --smart-carousel-multiple-mode-slide-width | 200px | default width of a slide in multiple mode |
Chart
| Variable | Value | Comment |
|---|---|---|
| Chart | ||
| --smart-chart-default-width | 850px | default width of the element |
| --smart-chart-default-height | 500px | default height of the element |
CheckBox
| Variable | Value | Comment |
|---|---|---|
| CheckBox | ||
| --smart-check-box-default-size | calc(1px + 1/2 * var(--smart-editor-height)) | default size for the check box used in Smart.CheckBox and Smart.ListItem. |
Color Panel
| Variable | Value | Comment |
|---|---|---|
| Color Panel | ||
| --smart-color-panel-default-width | auto | default width |
| --smart-color-panel-default-height | auto | default height |
| --smart-color-panel-palette-size | 300px | palette size |
| --smart-color-panel-grid-mode-item-size | 20px | item size |
| --smart-color-panel-grid-mode-column-count | 8 | column count |
| --smart-color-panel-grid-mode-columns-gap | 1px | column gap size |
| --smart-color-panel-brightness | 0 | brightness |
| --smart-color-panel-default-mode-sections-gap | 8px | gap size in default mode |
| --smart-color-panel-palette-width | var(--smart-color-panel-palette-size) | palette width |
| --smart-color-panel-palette-height | var(--smart-color-panel-palette-size) | palette height |
| --smart-color-panel-alpha-channel-color | white | Used as a default color for the Alpha Scale |
Color Picker
| Variable | Value | Comment |
|---|---|---|
| Color Picker | ||
| --smart-color-picker-default-width | var(--smart-editor-width) | default width |
| --smart-color-picker-default-height | var(--smart-editor-height) | default height |
| --smart-color-picker-drop-down-width | auto | default width of dropdown |
| --smart-color-picker-drop-down-height | auto | default height of dropdown |
ComboBox
| Variable | Value | Comment |
|---|---|---|
| ComboBox | ||
| --smart-combo-box-default-width | var(--smart-editor-width) | default width |
| --smart-combo-box-default-height | var(--smart-editor-height) | default height |
| --smart-combo-box-drop-down-width | auto | default width of dropdown |
| --smart-combo-box-drop-down-height | auto | default height of dropdown |
Chip
| Variable | Value | Comment |
|---|---|---|
| Chip | ||
| --smart-chip-default-height | var(--smart-editor-height) | default height |
| --smart-chip-avatar-background | var(--smart-secondary) | avatar background color |
DataView (Common for CardView and Kanban)
| Variable | Value | Comment |
|---|---|---|
| DataView - Common for CardView and Kanban | ||
| --smart-data-view-padding | 10px | Padding of the CardView and Kanban |
| --smart-data-view-customize-panel-width | 320px | Width of the CardView and Kanban customize panel (drop down). |
| --smart-data-view-filter-panel-width | 550px | Width of the CardView and Kanban filter panel (drop down). |
| --smart-data-view-sort-panel-width | 470px | Width of the CardView and Kanban sort panel (drop down). |
| --smart-data-view-search-panel-width | 250px | Width of the CardView and Kanban search panel (drop down). |
Datetime Picker
| Variable | Value | Comment |
|---|---|---|
| Datetime Picker | ||
| --smart-date-time-picker-default-width | var(--smart-editor-width) | Smart.DateTimePicker default width |
| --smart-date-time-picker-default-height | var(--smart-editor-height) | Smart.DateTimePicker default height |
| --smart-date-time-picker-header-opacity | 0.8 | Opacity of header elements |
| --smart-date-time-picker-header-opacity-active | 1 | Opacity of header elements when selected |
| --smart-date-time-picker-drop-down-width | var(--smart-editor-drop-down-height) | Smart.DropDownList drop down width |
| --smart-date-time-picker-drop-down-height | auto | Smart.DropDownList drop down height |
Docking Layout
| Variable | Value | Comment |
|---|---|---|
| Docking Layout | ||
| --smart-docking-layout-default-width | 1000px | default width |
| --smart-docking-layout-default-height | 800px | default height |
| --smart-docking-layout-feedback-background-secondary-size | 7px | The size of the arrows of the advanced snapping highlighters… |
DropDownList
| Variable | Value | Comment |
|---|---|---|
| DropDownList | ||
| --smart-drop-down-list-default-width | var(--smart-editor-width) | Smart.DropDownList, Smart.ComboBox default width |
| --smart-drop-down-list-default-height | var(--smart-editor-height) | Smart.DropDownList, Smart.ComboBox default height |
| --smart-drop-down-list-drop-down-width | initial | Smart.DropDownList drop down width |
| --smart-drop-down-list-drop-down-height | auto | Smart.DropDownList drop down height |
DropDownButton
| Variable | Value | Comment |
|---|---|---|
| DropDownButton | ||
| --smart-drop-down-button-default-width | auto | default width |
| --smart-drop-down-button-default-height | var(--smart-editor-height) | default height |
| --smart-drop-down-button-drop-down-width | var(--smart-editor-drop-down-width) | dropdown width |
| --smart-drop-down-button-drop-down-height | var(--smart-editor-drop-down-height) | drop down height |
Editor
| Variable | Value | Comment |
|---|---|---|
| Editor | ||
| --smart-editor-default-width | 100% | default width |
| --smart-editor-default-height | 600px | default height |
| --smart-editor-input-min-height | 100px | input min height |
| --smart-editor-padding | 15px | padding |
| --smart-editor-toolbar-item-margin | 5px | toolbar item margin |
| --smart-editor-toolbar-button-width | 30px | toolbar button width |
| --smart-editor-toolbar-delimiter-width | 5px | toolbar delimiter items width |
| --smart-editor-toolbar-drop-down-width-large | 100px | wider drop down toolbar items like - format, fontname, etc. |
| --smart-editor-toolbar-drop-down-width-small | 65px | all drop down toolbar items default width |
| --smart-editor-window-header-height | var(--smart-scheduler-window-header-height) | Dialog Window header height |
| --smart-editor-window-footer-height | var(--smart-scheduler-window-footer-height) | Dialog Window footer height |
| --smart-editor-inline-toolbar-max-width | 80vw | Inline toolbar max width |
| --smart-editor-table-column-width | initial | table column default width |
| --smart-editor-table-cell-min-height | 20px | table cell default min height |
| --smart-editor-table-cell-min-width | var(--smart-editor-table-cell-min-height) | table cell default min width |
| --smart-editor-char-counter-offset | 30px | char count offset from the edges of the element |
| --smart-editor-toolbar-item-height | 30px | default toolbar item height |
| --smart-editor-toolbar-item-border-radius | var(--smart-border-radius) | toolbar item border radius |
| --smart-editor-toolbar-height | calc(var(--smart-editor-toolbar-item-height) + 2 * var(--smart-editor-toolbar-item-margin)) | toolbar height |
| --smart-editor-highlight | var(--smart-primary) | Find and Replace highlight color |
| --smart-editor-highlight-color | var(--smart-primary-color) | highlight text color |
| --smart-editor-search-bar-offset | 5px | search bar offset |
| --smart-editor-search-bar-padding | 5px | search bar padding |
Filter Panel
| Variable | Value | Comment |
|---|---|---|
| Filter Panel | ||
| --smart-filter-panel-default-width | 300px | default width |
| --smart-filter-panel-default-height | auto | default height |
| --smart-filter-panel-padding | 10px | padding |
| --smart-filter-panel-border-top-right-radius | var(--smart-border-radius) | top-right border radius |
| --smart-filter-panel-border-top-left-radius | var(--smart-border-radius) | top-left border radius |
| --smart-filter-panel-border-bottom-left-radius | var(--smart-border-radius) | bottom-left border radius |
| --smart-filter-panel-border-bottom-right-radius | var(--smart-border-radius) | bottom-right border radius |
| --smart-filter-panel-border-width | var(--smart-border-width) | border width |
| --smart-filter-panel-border | var(--smart-border) | border color |
| --smart-filter-panel-background | var(--smart-background) | background color |
| --smart-filter-panel-color | var(--smart-background-color) | text color |
| --smart-filter-panel-vertical-offset | 10px | Vertical offset between sub-elements |
| --smart-filter-panel-main-element-height | 400px | height of the Smart.Tree inside the Smart.FilterPanel |
File Upload
| Variable | Value | Comment |
|---|---|---|
| File upload | ||
| --smart-file-upload-default-width | var(--smart-editor-width) | default width |
| --smart-file-upload-browse-button-width | auto | default width of the browse button |
| --smart-file-upload-browse-button-height | auto | default height of the browse button |
| --smart-file-upload-footer-button-width | auto | default width of the footer buttons |
| --smart-file-upload-footer-button-height | auto | default height of the footer buttons |
| --smart-file-upload-text-content-uploading-start | "Connecting ..." | default text content … when upload starts |
| --smart-file-upload-text-content-uploading | "Uploading ..." | default text content … during the upload |
| --smart-file-upload-text-content-error | "Upload error!" | default text content … on error |
| --smart-file-upload-text-content-pause | "Upload paused!" | default text content … when upload is paused |
| --smart-file-upload-text-content-drop-zone | "Drag files here" | default text content … where is the drop zone |
| --smart-file-upload-text-content-drop-zone-over | "Drop here \e824" | default text content … when dragged files are over the drop zone |
| --smart-file-upload-container-min-height | 60px | Sets minimum height of the drop zone and file zone containers. |
| --smart-file-upload-total-files-min-height | 20px | Sets min height of the container where total numbers of items is displayed. |
| --smart-file-upload-drop-zone-height | 100% | |
Gantt Chart
| Variable | Value | Comment |
|---|---|---|
| Gantt Chart | ||
| --smart-gantt-chart-resource-splitter-bar-fit-size | calc(var(--smart-gantt-chart-resource-timeline-content-height) + var(--smart-gantt-chart-task-default-height)) | The fit size of all Resource Splitter bar inside the Resource Panel… |
| --smart-gantt-chart-task-splitter-bar-fit-size | var(--smart-gantt-chart-task-timeline-content-height) | The fit size of all Splitter bar inside the element |
| --smart-gantt-chart-task-default-height | 30px | The height of a Task inside the Timeline |
| --smart-gantt-chart-header-height | var(--smart-gantt-chart-task-default-height) | The height of the header of the Task and Resource Panels |
| --smart-gantt-chart-task-bar-fill-padding | 5px | The padding of the Fill of the Task Bar |
| --smart-gantt-chart-task-label-padding | 2px var(--smart-gantt-chart-task-bar-fill-padding) | |
| --smart-gantt-chart-task-thumb-color | rgba(0, 0, 0, .55) | The color of the thumb |
| --smart-gantt-chart-task-progress-color | rgba(0, 0, 0, .15) | The default color of the progress fill of all Tasks… |
| --smart-gantt-chart-project-color | #ffa558 | The default color for all Project tasks |
| --smart-gantt-chart-project-label-color | #333 | Determines the label color of the project tasks… |
| --smart-gantt-chart-project-label-color-selected | #000 | …when selected |
| --smart-gantt-chart-project-progress-color | var(--smart-gantt-chart-task-progress-color) | The default color of the progress fill for all Project tasks |
| --smart-gantt-chart-task-color | rgb(43, 195, 190) | The default color of a Task inside the Timeline |
| --smart-gantt-chart-milestone-color | #800080 | The default color for all Milestones |
| --smart-gantt-chart-timeline-task-background-color | transparent | Determines the background color of the tasks(rows) inside the Timeline. |
| --smart-gantt-chart-timeline-task-connection-feedback-color | #e6510a | Determines the default color of the feedback… when creating a connection… |
| --smart-gantt-chart-timeline-task-connection-feedback-width | 1px | …width of the feedback… |
| --smart-gantt-chart-timeline-task-connection-feedback-style | dashed | …style of the feedback… |
| --smart-gantt-chart-timeline-task-connection-color | var(--smart-gantt-chart-timeline-task-connection-feedback-color) | Determines the color of the connections between Tasks… |
| --smart-gantt-chart-timeline-task-connection-color-hover | var(--smart-gantt-chart-timeline-task-connection-color) | …on hover… |
| --smart-gantt-chart-timeline-task-connection-width | var(--smart-gantt-chart-timeline-task-connection-feedback-width) | Determines the width of the connections… |
| --smart-gantt-chart-timeline-task-connection-style | solid | Determines the style of the connections… |
| --smart-gantt-chart-timeline-task-connection-arrow-type | solid | Determines the border type of the arrow… |
| --smart-gantt-chart-timeline-task-connection-arrow-width | 5px | Determines the width of the arrow… |
| --smart-gantt-chart-timeline-task-resize-indicator-width | 4px | Determines the default width of the resize indicator… |
| --smart-gantt-chart-timeline-task-resize-indicator-color | #fff | Determines the background-color of the resize indicators… |
| --smart-gantt-chart-timeline-task-resize-indicator-border-color | #333 | Determines the border-color… |
| --smart-gantt-chart-timeline-task-progress-thumb-size | 10px | Determines the size of the thumb controlling the progress… |
| --smart-gantt-chart-timeline-cell-size | auto | Determines the default width of the cells inside the Timeline. |
| --smart-gantt-chart-timeline-cell-min-size | 70px | Determines the default min-width of the cells… |
| --smart-gantt-chart-timeline-task-min-width | 5px | Determines the default min-width of the Tasks… Not applicable to Milestone tasks. |
| --smart-gantt-chart-timeline-weekend-color | #EFF5FD | Determines the default background color of the 'weekend' cells… |
| --smart-gantt-chart-timeline-nonworking-color | #F5F5F5 | Determines the default background-color of the nonworking days/hours… |
| --smart-gantt-chart-default-width | auto | Determines the default width of the element. |
| --smart-gantt-chart-default-height | 600px | Determines the height of the element. |
| --smart-gantt-chart-task-popup-window-default-width | 60vw | Determines the width of the task editing popup windows… |
| --smart-gantt-chart-connection-popup-window-default-width | 300px | Determines the width of the connection editing popup windows… |
| --smart-gantt-chart-confirm-popup-window-default-width | var(--smart-gantt-chart-connection-popup-default-width) | Determines the width of the confirm popup window… |
| --smart-gantt-chart-popup-window-header-height | 35px | Determines the height of the header of the popup windows… |
| --smart-gantt-chart-popup-window-footer-height | 50px | Determines the height of the footer of the popup windows… |
| --smart-gantt-chart-header-placeholder | ' - ' | Placeholder for the Header sections when there're no items |
| --smart-gantt-chart-progress-label-padding | 0 10px 0 10px | Task progress label padding |
| --smart-gantt-chart-filter-row-height | 30px | |
| --smart-gantt-chart-task-fill-border-radius | 0 | Sets the default border radius for the Timeline task bars |
| --smart-gantt-chart-segment-link-color | var(--smart-gantt-chart-task-color) | Determines the color of the link between the task segments |
| --smart-gantt-chart-segment-link-size | var(--smart-border-width) | Determines the height of the link between the task segments |
| --smart-gantt-chart-date-marker-color | var(--smart-primary) | Determines the color of the date markers |
| --smart-gantt-chart-date-marker-height | 25px | Determines the background of the date markers |
| --smart-gantt-chart-date-marker-width | var(--smart-border-width) | Determines the width of the date markers |
| --smart-gantt-chart-date-marker-background | var(--smart-primary) | |
| --smart-gantt-chart-date-marker-color | var(--smart-primary-color) | |
| --smart-gantt-chart-date-marker-v-offset | 15% | Determines the vertical position of the date markers |
| --smart-gantt-chart-date-marker-h-offset | 10px | Determines the horizontal offset of the date markers |
| --smart-gantt-chart-indicator-icon | initial | Determines the task indicator icon |
| --smart-gantt-chart-deadline-icon | var(--smart-icon-attention-circled) | Determines the icon for the task deadline |
| --smart-gantt-chart-deadline-color | var(--smart-error) | Determines the color for the task deadline icon |
| --smart-gantt-chart-baseline-proportion | 2 | Determines the proportion of the baseline compared to the task height |
| --smart-gantt-chart-baseline-background | rgba(166, 205, 87, .5) | Determines the background color of the task baseline |
| --smart-gantt-chart-progress-label-width | 60px | Determines the task progress label width |
| --smart-gantt-chart-current-time-indicator-size | 1px | Determines the current time indicator width |
| --smart-gantt-chart-current-time-indicator-background | var(--smart-primary) | Determines the current time indicator background |
| --smart-gantt-chart-current-time-indicator-arrow-size | 7px | Determines the arrow size of the current time indicator |
| --smart-gantt-chart-current-time-indicator-header-size | 2px | Determines the current time indicator size inside the timeline header cell |
| --smart-gantt-chart-shader-background | rgba(var(--smart-border-rgb), .5) | Determines the current time shader background color |
Gauge
| Variable | Value | Comment |
|---|---|---|
| Gauge | ||
| --smart-gauge-default-width | var(--smart-box-width) | Smart.gauge default width |
| --smart-gauge-default-height | var(--smart-box-height) | Gauge default height |
| --smart-gauge-track-border | var(--smart-border) | Gauge track border |
| --smart-gauge-track-background | var(--smart-background) | Track's background color |
| --smart-gauge-needle-background | var(--smart-primary) | Needle's background color |
| --smart-gauge-label-fill-state | initial | Fill color of labels |
| --smart-gauge-label-stroke | initial | Stroke color of labels |
Alternation Colors for Grid/Table/Scheduler/Pivot
| Variable | Value | Comment |
|---|---|---|
| Alternation Colors for Grid/Table/Scheduler/Pivot | ||
| --smart-alternation-index0-color | var(--smart-surface-color) | |
| --smart-alternation-index0-border | var(--smart-surface) | |
| --smart-alternation-index0-background | var(--smart-surface) | |
| --smart-alternation-index1-color | #111 | |
| --smart-alternation-index1-border | #9BBB59 | |
| --smart-alternation-index1-background | #9BBB59 | |
| --smart-alternation-index2-color | #fff | |
| --smart-alternation-index2-border | #FC3752 | |
| --smart-alternation-index2-background | #FC3752 | |
Grid
| Variable | Value | Comment |
|---|---|---|
| Grid | ||
| --smart-grid-default-width | 800px | default width |
| --smart-grid-default-height | 400px | default height |
| --smart-grid-footer-height | var(--smart-bar-height) | footer height |
| --smart-grid-header-height | var(--smart-bar-height) | header height |
| --smart-grid-group-header-height | var(--smart-bar-height) | group header height |
| --smart-grid-row-height | 30px | rows height |
| --smart-grid-column-header-height | var(--smart-bar-height) | columns height |
| --smart-grid-filter-footer-height | var(--smart-bar-height) | filter row height |
| --smart-grid-aggregate-footer-height | var(--smart-bar-height) | aggregates height |
| --smart-grid-header-background-freeze | var(--smart-surface) | row/column header background, when row/column is frozen |
| --smart-grid-header-color-freeze | var(--smart-surface-color) | row/column header text color, when row/column is frozen |
| --smart-grid-column-menu-width | 200px | column menu's width |
| --smart-grid-column-menu-height | auto | column menu's height |
| --smart-grid-column-buttons-width | 23px | column buttons width |
| --smart-grid-cell-color-freeze | var(--smart-surface-color) | text color of cells, when row/column is frozen |
| --smart-grid-cell-background-freeze | var(--smart-surface) | frozen background |
| --smart-grid-cell-background-freeze-selected | #DCE5EC | background color of cells, when row/column is frozen and selected |
| --smart-grid-cell-color-delete | #333 | text color of cells, when row is deleted |
| --smart-grid-cell-background-delete | #FFDCDC | background color of cells, when row is deleted |
| --smart-grid-cell-color-update | #333 | text color of cells, when cell is updated |
| --smart-grid-cell-background-update | #D7F9C7 | background for update state of cell |
| --smart-grid-cell-background-color | #D7F9C7 | background color of cells, when cell is updated |
| --smart-grid-cell-color-add | #333 | text color of cells, when row is added |
| --smart-grid-cell-background-add | #FED59B | background color of cells, when row is added |
| --smart-grid-cell-color-unbound | var(--smart-surface-color) | text color of cells, when row is unbound |
| --smart-grid-cell-background-unbound | var(--smart-surface) | background color of cells, when row is unbound |
| --smart-grid-cell-color-sort | var(--smart-surface-color) | text color of cells, when column is sorted |
| --smart-grid-cell-background-sort | #FEF3dd | background color of cells, when column is sorted |
| --smart-grid-cell-color-filter | var(--smart-surface-color) | text color of cells, when column is filtered |
| --smart-grid-cell-background-filter | #E8F2DB | background color of cells, when column is filtered |
| --smart-grid-view-bar-background | #FCFCFC | the view bar background colors |
| --smart-grid-group-row-vertical-offset | 5 | grouped rows vertical offset |
| --smart-grid-group-row-horizontal-offset | 1 | grouped rows horizontal offset |
| --smart-grid-template-columns | none | Template columns |
| --smart-grid-column-gap | 0px | the element's grid-column-gap (related to CSS Grid) |
| --smart-grid-row-gap | 0px | the element's grid-row-gap (related to CSS Grid) |
| --smart-grid-freeze-splitter-size | 1px | frozen split bar size |
| --smart-grid-resize-line-size | 1px | resize line size |
Grid Layout
| Variable | Value | Comment |
|---|---|---|
| Grid Layout | ||
| --smart-grid-layout-col-gap | 10px | |
| --smart-grid-layout-row-gap | 10px | |
| --smart-grid-layout-width | 100% | |
| --smart-grid-layout-rows | none | |
Group Panel, Sort Panel, Column Panel, Multi Column Filter Panel, Formatting Panel
| Variable | Value | Comment |
|---|---|---|
| Group/Sort/Column/MultiFilter/Formatting Panels | ||
| --smart-grid-panel-default-width | 450px | default width of the Smart.GroupPanel/Smart.SortPanel/Smart.ColumnPanel/Smart.MultiColumnFilterPanel |
| --smart-grid-panel-default-height | auto | default height of the Smart.GroupPanel/Smart.SortPanel/Smart.ColumnPanel/Smart.MultiColumnFilterPanel |
| --smart-grid-panel-padding | 10px | padding of the Smart.GroupPanel/Smart.SortPanel/Smart.ColumnPanel/Smart.MultiColumnFilterPanel |
| --smart-grid-panel-vertical-offset | 10px | Vertical offset between Smart.GroupPanel/Smart.SortPanel/Smart.ColumnPanel/Smart.MultiColumnFilterPanel items |
| --smart-grid-panel-item-height | 30px | height of Smart.GroupPanel/Smart.SortPanel/Smart.ColumnPanel/Smart.MultiColumnFilterPanel items |
| --smart-column-panel-drop-down-height | 350px | height of drop-downs |
| --smart-multi-column-filter-panel-template-columns | 15px 60px 2fr 3fr 3fr | Smart.MultiColumnFilterPanel grid-template-columns |
| --smart-formatting-panel-default-width | 600px | default width of the Smart.FormattingPanel |
| --smart-formatting-panel-row-height | 30px | Height of rows in Smart.FormattingPanel |
| --smart-formatting-panel-add-new-button-size | 40px | Size of "Add new" (+) button in Smart.FormattingPanel |
| --smart-formatting-panel-popup-width | 300px | Width of Smart.FormattingPanel's pop-up |
| --smart-formatting-panel-color-box-height | 20px | Height of color boxes in Smart.FormattingPanel's pop-up |
Kanban
| Variable | Value | Comment |
|---|---|---|
| Kanban | ||
| --smart-kanban-default-width | 1200px | default width |
| --smart-kanban-default-height | 500px | default height |
| --smart-kanban-header-size | 35px | Header size (applies to header and column headers) |
| --smart-kanban-task-min-width | 150px | Min width for tasks in columns with horizontal orientation |
| --smart-kanban-task-min-height | 80px | task min height |
| --smart-kanban-text-max-height | 200px | task text part max height |
| --smart-kanban-user-icon-size | 30px | user icon size |
| --smart-kanban-user-list-width | 150px | user list width |
| --smart-kanban-user-list-max-height | 500px | user list max height |
| --smart-kanban-comments-list-width | 350px | comments list width |
| --smart-kanban-comments-list-height | auto | comments list height |
| --smart-kanban-new-comment-height | 50px | Height of new comment section |
| --smart-kanban-new-comment-height-expanded | 175px | Expanded height of new comment section |
| --smart-kanban-send-button-height | 30px | Height of Send button in new comment section |
| --smart-kanban-color-band-width | 3px | Kanban color band width (i.e. left border of tasks) |
| --smart-kanban-add-new-column-width | 1fr | Kanban "+ New status" column width |
ListBox
| Variable | Value | Comment |
|---|---|---|
| ListBox | ||
| --smart-list-box-default-width | var(--smart-editor-width) | default width |
| --smart-list-box-default-height | var(--smart-editor-width) | default height |
| --smart-list-item-group-header-text-transform | uppercase | item group header text transform |
| --smart-list-item-horizontal-offset | 3px | Defines list item's horizontal offset. |
| --smart-list-item-vertical-offset | 3px | Defines list item's vertical offset. |
| --smart-list-item-height | 36px | Smart.ListBox item height |
| --smart-list-item-label-padding | 0 | Smart.ListBox item label padding |
| --smart-list-item-label-border-radius | 0 | Smart.ListBox item label border radius |
| --smart-list-item-padding | 9px 12px | Smart.ListBox item padding |
| --smart-loader-size | var(--smart-editor-height) | Smart.ListBox loader size(width=height) |
ListMenu
| Variable | Value | Comment |
|---|---|---|
| ListMenu | ||
| --smart-list-menu-default-width | var(--smart-box-width) | default width |
| --smart-list-menu-default-height | var(--smart-box-height) | default height |
| --smart-list-menu-filter-input-vertical-offset | 5px | Defines vertical offset of the ListMenu's filter input. |
| --smart-list-menu-filter-input-horizontal-offset | 5px | Defines horizontal offset of the ListMenu's filter input. |
Masked Text Box
| Variable | Value | Comment |
|---|---|---|
| Masked Text Box | ||
| --smart-masked-text-box-default-width | var(--smart-editor-width) | default width |
| --smart-masked-text-box-default-height | var(--smart-editor-height) | default height |
Menu
| Variable | Value | Comment |
|---|---|---|
| Menu | ||
| --smart-menu-default-width | var(--smart-bar-width) | default width |
| --smart-menu-default-height | var(--smart-bar-height) | default height |
| --smart-menu-vertical-default-width | calc(var(--smart-bar-width) / 2) | vertical and context Menu default width |
| --smart-menu-vertical-default-height | var(--smart-bar-width) | vertical and context Menu default height |
| --smart-menu-scroll-button-size | calc(var(--smart-bar-height) / 1.5) | Smart.Menu scroll buttons size. Horizontal Menu scroll buttons width = Vertical Menu scroll buttons height. |
MultiLine TextBox
| Variable | Value | Comment |
|---|---|---|
| MultiLine TextBox | ||
| --smart-multiline-text-box-default-width | var(--smart-editor-width) | default width of the element |
| --smart-multiline-text-box-default-height | calc(10 * var(--smart-editor-height)) | default height of the element |
Multi Split Button
| Variable | Value | Comment |
|---|---|---|
| Multi Split Button | ||
| --smart-multi-split-button-default-width | var(--smart-editor-width) | default width |
| --smart-multi-split-button-default-height | var(--smart-editor-height) | default height |
Numeric TextBox
| Variable | Value | Comment |
|---|---|---|
| Numeric TextBox | ||
| --smart-numeric-text-box-default-width | var(--smart-editor-width) | default width |
| --smart-numeric-text-box-default-height | var(--smart-editor-height) | default height |
| --smart-numeric-text-box-default-radix-display-width | 12% | default radix display button width |
| --smart-numeric-text-box-default-unit-display-width | var(--smart-editor-addon-width) | default unit display width |
| --smart-numeric-text-box-text-align | right | input text align |
Progress Bar
| Variable | Value | Comment |
|---|---|---|
| Progress Bar | ||
| --smart-progress-bar-default-width | var(--smart-editor-width) | default width |
| --smart-progress-bar-default-height | var(--smart-editor-height) | default height |
| --smart-circular-progress-bar-default-size | var(--smart-editor-width) | Smart.CircularProgressBar default size (width = height) |
| --smart-circular-progress-bar-fill-size | 20% | Smart.CircularProgressBar ui-state size. The width of the ui-state… |
Query Builder
| Variable | Value | Comment |
|---|---|---|
| Query Builder | ||
| --smart-query-builder-default-width | auto | default width of QueryBuilder |
| --smart-query-builder-default-height | auto | default height of QueryBuilder |
| --smart-query-builder-min-width | 100px | Minimum width of QueryBuilder |
| --smart-query-builder-content-padding | 5px | Padding of QueryBuilder |
| --smart-query-builder-editor-width | 125px | Width of editors in QueryBuilder |
Radio Button
| Variable | Value | Comment |
|---|---|---|
| Radio Button | ||
| --smart-radio-button-default-size | calc(1px + 1/2 * var(--smart-editor-height)) | default size for the radio button |
Ribbon
| Variable | Value | Comment |
|---|---|---|
| Ribbon | ||
| --smart-ribbon-tab-height | 125px | Smart.Ribbon tab height |
| --smart-ribbon-collapsed-tab-height | 50px | Smart.Ribbon collapsed tab height |
| --smart-ribbon-border-color | var(--smart-border) | Smart.Ribbon border color |
| --smart-ribbon-tab-header-width | 100px | Smart.Ribbon tab header width |
| --smart-ribbon-tab-padding | 0px | Smart.Ribbon tab padding |
| --smart-ribbon-group-items-padding | 0 10px | Smart.Ribbon group items padding |
| --smart-ribbon-tab-header-height | 32px | Smart.Ribbon tab header height |
| --smart-ribbon-header-padding | 0px | Smart.Ribbon header padding |
Sortable
| Variable | Value | Comment |
|---|---|---|
| Sortable | ||
| --smart-sortable-handle-size | 25px | Smart.Sortable handle size |
Splitter
| Variable | Value | Comment |
|---|---|---|
| Splitter | ||
| --smart-splitter-default-width | var(--smart-box-width) | default width |
| --smart-splitter-default-height | var(--smart-box-height) | default height |
| --smart-splitter-bar-size | 10px | The width of the scrollbar when vertical and the height of the scrollbar when horizontal |
| --smart-splitter-bar-fit-size | 100% | The size of the splitter according to the orientation of the Splitter. By 'default' a SplitterBar fits the size of the Splitter. |
| --smart-splitter-item-padding | 0 | Splitter item padding |
| --smart-splitter-item-content-padding | 0 | Splitter item content padding |
| --smart-splitter-item-size | auto | The default size of the Splitter Items |
Switch Button
| Variable | Value | Comment |
|---|---|---|
| Switch Button | ||
| --smart-switch-button-default-width | calc(var(--smart-editor-height) + 10px) | default width of the SwitchButton |
| --smart-switch-button-default-height | var(--smart-editor-height) | Smart.SwitchButton default height |
| --smart-switch-button-thumb-size | calc(var(--smart-switch-button-default-height) - 8px) | Smart.SwitchButton thumb size |
Slider
| Variable | Value | Comment |
|---|---|---|
| Slider | ||
| --smart-slider-default-width | var(--smart-editor-width) | default width |
| --smart-slider-default-height | 35px | default height |
| --smart-slider-track-size | 1px | track size. Horizontal track height = Vertical track width |
| --smart-slider-thumb-width | 20px | thumb width |
| --smart-slider-thumb-height | 20px | thumb height |
| --smart-slider-tooltip-width | 60px | tooltip width |
| --smart-slider-tooltip-height | 30px | tooltip height |
| --smart-slider-spin-button-width | 30px | spin buttons width |
| --smart-slider-spin-button-height | 30px | spin buttons height |
| --smart-slider-tick-size | 10px | tick size. Horizontal Slider tick height = Vertical Slider tick width |
| --smart-slider-minor-tick-size | 5px | minor tick size. Horizontal Slider minor tick height = Vertical Slider minor tick width |
| --smart-slider-thumb-border-top-right-radius | 15px | Top-right border radius of Smart.Slider thumb |
| --smart-slider-thumb-border-top-left-radius | 15px | Top-left border radius of Smart.Slider thumb |
| --smart-slider-thumb-border-bottom-left-radius | 15px | Bottom-left border radius of Smart.Slider thumb |
| --smart-slider-thumb-border-bottom-right-radius | 15px | Bottom-right border radius of Smart.Slider thumb |
Scrollbar
| Variable | Value | Comment |
|---|---|---|
| Scrollbar | ||
| --smart-scroll-button-size | 16px | Smart.ScrollBar buttons size. Horizontal ScrollBar button width = Vertical ScrollBar button height. ScrollBar track is calculated based on this value. |
| --smart-scroll-bar-size | 18px | default scrollbar size |
| --smart-scroll-bar-default-width | var(--smart-editor-width) | ScrollBar's default width |
| --smart-scroll-bar-default-height | var(--smart-scroll-bar-size) | ScrollBar's default height |
| --smart-scroll-bar-background | #F1F1F1 | default ScrollBar's background color |
| --smart-scroll-bar-track-background | var(--smart-scroll-bar-background) | |
| --smart-scroll-bar-border | #F1F1F1 | The border color of the ScrollBar |
| --smart-scroll-bar-thumb-border-top-right-radius | 0px | default ScrollBar's top-right border radius |
| --smart-scroll-bar-thumb-border-top-left-radius | 0px | default ScrollBar's top-left border radius |
| --smart-scroll-bar-thumb-border-bottom-left-radius | 0px | default ScrollBar's bottom-left border radius |
| --smart-scroll-bar-thumb-border-bottom-right-radius | 0px | default ScrollBar's bottom-right border radius |
| --smart-scroll-bar-thumb-background | #C1C1C1 | The color of the ScrollBar's thumb |
| --smart-scroll-bar-thumb-border | transparent | The color of the ScrollBar's thumb border |
| --smart-scroll-bar-thumb-size | 100% | The size of the ScrollBar's thumb |
| --smart-scroll-bar-thumb-padding | 1px | The padding of the ScrollBar's thumb |
| --smart-scroll-bar-thumb-background-hover | #A8A8A8 | The background color of the ScrollBar's thumb in hover state |
| --smart-scroll-bar-thumb-border-hover | transparent | The border color of the ScrollBar's thumb in hover state |
| --smart-scroll-bar-thumb-background-active | #787878 | The background color of the ScrollBar's thumb in active state |
| --smart-scroll-bar-thumb-border-active | transparent | The border color of the ScrollBar's thumb in active state |
| --smart-scroll-bar-button-background | #F1F1F1 | The background color of ScrollBar's navigation buttons |
| --smart-scroll-bar-button-border | #F1F1F1 | The border color of ScrollBar's navigation buttons |
| --smart-scroll-bar-button-color | #505050 | The color of ScrollBar's navigation buttons |
| --smart-scroll-bar-button-background-hover | #D2D2D2 | The background color of the hovered ScrollBar's buttons |
| --smart-scroll-bar-button-border-hover | #F1F1F1 | The border color of the hovered ScrollBar's buttons |
| --smart-scroll-bar-button-color-hover | #505050 | The color of the hovered ScrollBar's buttons |
| --smart-scroll-bar-button-background-active | #787878 | The background color of the ScrollBar's buttons in active state |
| --smart-scroll-bar-button-border-active | #F1F1F1 | The border color of the ScrollBar's buttons in active state |
| --smart-scroll-bar-button-color-active | #fff | The color of the ScrollBar's buttons in active state |
Table & PivotTable
| Variable | Value | Comment |
|---|---|---|
| Table & PivotTable | ||
| --smart-table-default-width | 100% | default width |
| --smart-table-default-height | auto | default height |
| --smart-table-header-footer-height | 56px | height of header and footer |
| --smart-table-column-header-height | var(--smart-table-header-footer-height) | height of column header |
| --smart-table-row-height | 48px | height of rows |
| --smart-table-cell-padding | 12px | cell padding |
| --smart-table-row-detail-height | var(--smart-table-row-height) | row detail height |
| --smart-table-indent | 30px | hierarchical cell indent |
| --smart-table-arrow-size | 16px | arrow size |
| --smart-table-arrow-margin | 5px | arrow margin |
| --smart-table-group-name-display | unset | group header name display |
| --smart-table-group-count-display | unset | group header leaf count display |
| --smart-pivot-table-cell-width | 200px | cell width |
| --smart-pivot-table-secondary-group-width | calc(1.25 * var(--smart-pivot-table-cell-width)) | row group width |
| --smart-pivot-panel-width | 300px | designer (Smart.PivotPanel) width |
| --smart-pivot-panel-default-height | 800px | Standalone Smart.PivotPanel default height |
| --smart-pivot-panel-tab-item-height | 150px | designer (Smart.PivotPanel) tab item height |
| --smart-pivot-panel-padding | 10px | designer (Smart.PivotPanel) padding |
Tank
| Variable | Value | Comment |
|---|---|---|
| Tank | ||
| --smart-tank-default-width | var(--smart-editor-width) | default width |
| --smart-tank-default-height | calc(10 * var(--smart-editor-height)) | default height |
| --smart-tank-scale-size | 105px | scale size |
| --smart-tank-thumb-width | 25px | thumb width |
| --smart-tank-thumb-height | var(--smart-tank-thumb-width) | thumb height |
| --smart-tank-tooltip-width | 80px | tooltip width |
| --smart-tank-tooltip-height | 30px | tooltip height |
| --smart-tank-tick-size | 10px | tick size. Horizontal Tank tick height = Vertical Tank tick width |
| --smart-tank-minor-tick-size | 5px | minor tick size |
| --smart-tank-minimum-track-size | 6px | horizontal track min-height, vertical track min-width |
Tabs
| Variable | Value | Comment |
|---|---|---|
| Tabs | ||
| --smart-tabs-header-button-size | 20px | header buttons size. Horizontal Tabs header buttons width = Vertical Tab header buttons height |
| --smart-tabs-animation-duration | 0.5s | animation duration |
| --smart-tabs-default-width | var(--smart-box-width) | default width |
| --smart-tabs-default-height | var(--smart-box-height) | default height |
| --smart-tabs-header-padding | 0px | Defines Tabs header padding |
| --smart-tabs-header-offset | 0px | Defines Tabs header offset |
| --smart-tab-item-padding | 12px 16px | Defines vertical and horizontal padding of tab items |
| --smart-tab-item-offset | 5px | default tab item offset |
| --smart-tab-item-initial-offset | 5px | Initial tab item offset |
| --smart-tab-item-text-transform | uppercase | Tab item text capitalization |
Time Picker
| Variable | Value | Comment |
|---|---|---|
| Time Picker | ||
| --smart-time-picker-default-width | var(--smart-editor-width) | Smart.TimePicker default width |
| --smart-time-picker-default-height | calc(12 * var(--smart-editor-height)) | Smart.TimePicker default height |
Tooltip
| Variable | Value | Comment |
|---|---|---|
| Tooltip | ||
| --smart-tooltip-arrow-width | 6px | default Smart.Tooltip arrow width |
| --smart-tooltip-arrow-color | var(--smart-secondary) | Smart.Tooltip arrow color |
| --smart-tooltip-arrow-translate | 0 | Smart.Tooltip arrow translation (transformation) |
| --smart-tooltip-padding | 4px 8px | Smart.Tooltip padding |
| --smart-tooltip-content-shadow | none | Smart.Tooltip content box-shadow |
Toast
| Variable | Value | Comment |
|---|---|---|
| Toast | ||
| --smart-toast-item-icon | '' | Code of toast item icon |
| --smart-toast-container-default-width | var(--smart-bar-width) | default width of the Smart.Toast's containers, positioned top-left, top-right, bottom-left, bottom-right |
| --smart-toast-header-height | 20px | Smart.Toast header height |
| --smart-toast-info-background | var(--smart-info) | Background color for type info |
| --smart-toast-info-color | var(--smart-info-color) | Text color for type info |
| --smart-toast-warning-background | var(--smart-warning) | Background color for type warning |
| --smart-toast-warning-color | var(--smart-warning-color) | Text color for type warning |
| --smart-toast-error-background | var(--smart-error) | Background color for type error |
| --smart-toast-error-color | var(--smart-error-color) | Text color for type error |
| --smart-toast-success-background | var(--smart-success) | Background color for type success |
| --smart-toast-success-color | var(--smart-success-color) | Text color for type success |
Tree
| Variable | Value | Comment |
|---|---|---|
| Tree | ||
| --smart-tree-default-width | var(--smart-box-width) | default width |
| --smart-tree-default-height | var(--smart-box-height) | default height |
| --smart-tree-scroll-button-size | 20px | Smart.Tree scroll buttons size |
| --smart-tree-lines-style | dashed | default style of the connecting tree lines |
| --smart-tree-indent | 16px | Defines the indent(hierarchy offset) size of the tree items |
| --smart-tree-lines-color | var(--smart-border) | Defines the color of the connecting lines |
| --smart-tree-lines-width | 1px | Defines the width of the connecting lines |
| --smart-tree-item-label-height | 36px | Defines the height of tree item labels |
| --smart-tree-item-padding | 9px 12px | Defines the padding of the tree items |
| --smart-tree-item-vertical-offset | 3px | Defines the vertical offset of the tree items |
| --smart-tree-item-horizontal-offset | 3px | Defines the horizontal offset of the tree items |
TextBox
| Variable | Value | Comment |
|---|---|---|
| TextBox | ||
| --smart-text-box-default-width | var(--smart-editor-width) | Text Box default width |
| --smart-text-box-default-height | var(--smart-editor-height) | Text Box default height |
Validation Panel
| Variable | Value | Comment |
|---|---|---|
| Validation Panel | ||
| --smart-validation-panel-description-width | 20% | |
| --smart-validation-panel-content-width | 80% | |
| --smart-validation-panel-appearance-vertical-offset | 10px | |
| --smart-validation-panel-appearance-reset-button-left-offset | 5px | |
| --smart-validation-panel-appearance-textbox-vertical-offset | 5px | |
| --smart-validation-panel-appearance-reset-button-color | var(--smart-primary) | |
| --smart-validation-panel-criteria-row-margin-top | 10px | |
| --smart-validation-panel-criteria-container-vertical-offset | 10px | |
| --smart-validation-panel-criteria-container-input-width | 180px | |
| --smart-validation-panel-criteria-container-input-horizontal-offset | 2px | |
| --smart-validation-panel-criteria-container-textbox-width | 80px | |
| --smart-validation-panel-criteria-container-textbox-horizontal-offset | 2px | |
| --smart-validation-panel-criteria-container-text-between-inputs-offset | 5px | |
| --smart-validation-panel-invalid-data-vertical-offset | 10px | |
| --smart-validation-panel-footer-button-color | #188038 | |
| --smart-validation-panel-footer-button-background | white | |
| --smart-validation-panel-footer-vertical-offset | 20px | |
| --smart-validation-panel-footer-button-horizontal-offset | 5px | |
| --smart-validation-panel-footer-remove-validation-button-color | var(--smart-validation-panel-footer-button-color) | |
| --smart-validation-panel-footer-cancel-button-color | var(--smart-validation-panel-footer-button-color) | |
| --smart-validation-panel-footer-save-button-color | var(--smart-validation-panel-footer-button-background) | |
| --smart-validation-panel-footer-save-button-background | var(--smart-validation-panel-footer-button-color) | |
PasswordTextBox
| Variable | Value | Comment |
|---|---|---|
| PasswordTextBox | ||
| --smart-password-text-box-default-width | var(--smart-editor-width) | default width |
| --smart-password-text-box-default-height | var(--smart-editor-height) | default height |
Pager
| Variable | Value | Comment |
|---|---|---|
| Pager | ||
| --smart-pager-default-width | var(--smart-bar-width) | default pager width |
| --smart-pager-default-height | var(--smart-bar-height) | default pager height |
| --smart-pager-button-width | 'auto' | default pager button width |
| --smart-pager-button-height | 32px | default pager button height |
| --smart-pager-page-size-selector-width | 60px | default page size selector width |
| --smart-pager-page-index-selector-width | 32px | default pager item width |
| --smart-pager-page-index-selector-height | 32px | default pager item height |
| --smart-pager-page-index-ellipsis-selector-width | 32px | default pager ellipsis width |
| --smart-pager-page-index-ellipsis-selector-height | 32px | default pager ellipsis height |
| --smart-pager-page-index-selector-horizontal-offset | 8px | |
| --smart-pager-padding | 2px | default padding |
| --smart-pager-input-width | 50px | default width of the pager input |
ScrollViewer
| Variable | Value | Comment |
|---|---|---|
| ScrollViewer | ||
| --smart-scroll-viewer-min-width | none | |
| --smart-scroll-viewer-max-width | none | |
| --smart-scroll-viewer-min-height | none | |
| --smart-scroll-viewer-max-height | none | |
Scheduler
| Variable | Value | Comment |
|---|---|---|
| Scheduler | ||
| --smart-scheduler-default-height | auto | default height of the Smart.Scheduler |
| --smart-scheduler-default-width | auto | default width of the Smart.Scheduler |
| --smart-scheduler-item-size | auto | default size of the view selection items inside the Timeline Header |
| --smart-scheduler-timeline-cell-width | auto | default width of the cells inside the Timeline |
| --smart-scheduler-timeline-cell-height | 50px | default height of the cells inside the Timeline |
| --smart-scheduler-timeline-cell-min-width | 70px | default min-width of the cells inside the Timeline |
| --smart-scheduler-timeline-cell-min-height | 35px | min-height of the cells inside the Timeline |
| --smart-scheduler-header-height | 50px | height of the header |
| --smart-scheduler-header-today-button-size | auto | header Today Button width |
| --smart-scheduler-header-date-button-max-size | auto | size of the Header Date Selection Button |
| --smart-scheduler-header-navigation-button-size | 30px | size of the header buttons |
| --smart-scheduler-footer-height | var(--smart-scheduler-header-height) | The height of the footer |
| --smart-scheduler-header-box-shadow | initial | Sets a Box shadow to the Timeline header |
| --smart-scheduler-header-padding | 10px | Sets the padding for the header/footer |
| --smart-scheduler-timeline-header-cell-padding | 5px | Sets the padding for the header/footer cells |
| --smart-scheduler-header-menu-button-size | auto | Sets the size for the Header menu button |
| --smart-scheduler-timeline-weekend-color | var(--smart-background) | Sets the background color for the weekend cells |
| --smart-scheduler-timeline-nonworking-color | var(--smart-gantt-chart-timeline-nonworking-color) | Sets the background color for nonworking days/hours cells |
| --smart-scheduler-timeline-all-day-label-font-weight | 600 | Sets the font-weight of the All day label |
| --smart-scheduler-timeline-header-horizontal-cells-size | 40px | Sets the horizontal header cells size |
| --smart-scheduler-timeline-header-horizontal-label-padding | initial | Sets the horizontal header cells label padding |
| --smart-scheduler-timeline-header-horizontal-details-size | var(--smart-scheduler-timeline-header-horizontal-cells-size) | Sets the size of the Horizontal Details Header |
| --smart-scheduler-timeline-header-horizontal-group-size | var(--smart-scheduler-timeline-header-horizontal-cells-size) | Sets the size of the Horizontal Group Header |
| --smart-scheduler-timeline-header-vertical-cells-size | 100px | Sets the vertical header cell size |
| --smart-scheduler-timeline-header-vertical-label-padding | initial | Sets the vertical header cells padding |
| --smart-scheduler-timeline-header-vertical-details-size | var(--smart-scheduler-timeline-header-vertical-cells-size) | Sets the size of the Vertical Details Header |
| --smart-scheduler-timeline-header-vertical-group-size | var(--smart-scheduler-timeline-header-vertical-cells-size) | Sets the size of the Vertical Group Header |
| --smart-scheduler-timeline-header-all-day-cells-size | 75px | Sets the All Day View height |
| --smart-scheduler-timeline-group-separator-background | var(--smart-outline) | Sets the color for the group separator |
| --smart-scheduler-timeline-group-separator-size | var(--smart-border-width) | Sets the group cell separator size |
| --smart-scheduler-timeline-group-white-space | nowrap | Sets the white-space property for the Header Group cells |
| --smart-scheduler-timeline-group-header-offset | calc(-50% - var(--smart-scheduler-timeline-header-cell-padding)) | Sets the label offset for the header cells when groupByDate is enabled |
| --smart-scheduler-current-time-indicator-background | var(--smart-primary) | Current Time Indicator background-color |
| --smart-scheduler-current-time-indicator-size | 1px | Current Time Indicator size (width/height depending on view orientation) |
| --smart-scheduler-current-time-indicator-header-size | 2px | Current Time Indicator size inside the Headers |
| --smart-scheduler-current-time-indicator-arrow-size | 7px | Current Time Indicator arrow size |
| --smart-scheduler-shader-background | rgba(var(--smart-border-rgb), .5) | Shade Until Current Time background |
| --smart-scheduler-view-background | transparent | |
| --smart-scheduler-view-line-size | var(--smart-border-width) | Timeline lines size |
| --smart-scheduler-view-horizontal-line-color | var(--smart-border) | Horizontal timeline line color |
| --smart-scheduler-view-vertical-line-color | var(--smart-border) | Vertical timeline line color |
| --smart-scheduler-day-week-view-vertical-line-size | var(--smart-scheduler-view-line-size) | Vertical line size in 'day' and 'week' views |
| --smart-scheduler-day-week-view-vertical-line-color | var(--smart-border) | Vertical timeline color in 'day' and 'week' views |
| --smart-scheduler-day-week-view-hour-size | var(--smart-scheduler-view-line-size) | Horizontal line size for 'day', 'week'. Only the hour lines (excluding minutes) |
| --smart-scheduler-day-week-view-hour-color | var(--smart-border) | Horizontal line color for 'day', 'week' views. Only the hour lines |
| --smart-scheduler-time-ruler-tick-size | 10px | Time ruler tick size. Applicable only to day/week views |
| --smart-scheduler-event-background-rgb | 52, 121, 186 | Event background RGB |
| --smart-scheduler-event-background | rgba(var(--smart-scheduler-event-background-rgb), 1) | Event background color |
| --smart-scheduler-legend-item-background | var(--smart-scheduler-event-background) | The default background color for the legend items |
| --smart-scheduler-event-color | var(--smart-primary-color) | Event color |
| --smart-scheduler-event-focus | rgba(var(--smart-scheduler-event-background-rgb), .9) | Event focus background color |
| --smart-scheduler-event-color-focus | var(--smart-scheduler-event-color) | Event focus color |
| --smart-scheduler-event-hover | rgba(var(--smart-scheduler-event-background-rgb), .8) | Event hover background color |
| --smart-scheduler-event-color-hover | var(--smart-scheduler-event-color) | Event hover color |
| --smart-scheduler-event-padding-agenda | 5px | Event padding in 'agenda' view only |
| --smart-scheduler-event-padding-basic | 2px | Event padding in all basic views |
| --smart-scheduler-event-padding-timeline | 2px | Event padding in all timeline views |
| --smart-scheduler-event-padding-all-day | 2px | Event padding for events inside AllDay container |
| --smart-scheduler-event-content-padding | 5px | Event content padding |
| --smart-scheduler-event-label-font-size | var(--smart-font-size) | Event label font size |
| --smart-scheduler-event-time-font-size | calc(var(--smart-font-size) - 3px) | Event time label font size |
| --smart-scheduler-event-time-font-size-agenda | var(--smart-font-size) | Event time font size for 'agenda' view |
| --smart-scheduler-event-time-font-weight-agenda | 600 | Event time label font weight for 'agenda' view |
| --smart-scheduler-event-time-opacity-agenda | 1 | Event time label opacity for 'agenda' view |
| --smart-scheduler-event-time-opacity | 0.7 | Event time label opacity |
| --smart-scheduler-event-icon-size | 30px | Event icon (repeating, exception icon) size |
| --smart-scheduler-event-size | 30px | Sets the size of the timeline events in all views. Main variable. |
| --smart-scheduler-event-size-basic | var(--smart-scheduler-event-size) | Sets the size of the events only in Basic views |
| --smart-scheduler-event-size-timeline | 60px | Sets the size of the events only in Timeline views. Should only be in pixels. |
| --smart-scheduler-event-collector-size | 24px | Event collector size |
| --smart-scheduler-event-collector-mobile-size | 28px | Event collector size on mobile |
| --smart-scheduler-event-collector-background | rgba(var(--smart-primary-rgb), 1) | Event collector background color |
| --smart-scheduler-event-collector-color | var(--smart-primary-color) | Event collector color |
Window
| Variable | Value | Comment |
|---|---|---|
| Window | ||
| --smart-window-default-height | var(--smart-box-height) | default height |
| --smart-window-default-width | var(--smart-box-width) | default width |
| --smart-window-header-height | var(--smart-bar-height) | header height |
| --smart-window-footer-height | var(--smart-bar-height) | footer height |
| --smart-window-min-width | 250px | min width |
| --smart-window-header-padding | 10px | header and footer padding |
| --smart-window-footer-padding | 6.5px | header and footer padding |
| --smart-window-header-button-size | 24px | Size of the header buttons |
| --smart-window-header-icon-size | var(--smart-font-size) | size of the header button icons |
| --smart-window-header-background | var(--smart-surface) | Sets the background of the header section |
| --smart-window-footer-background | var(--smart-surface) | Sets the background of the footer section |
| --smart-window-footer-button-width | 100px | Sets the width of the footer buttons |
| --smart-window-content-padding | 10px | Sets the content section padding |
Elevations
| Variable | Value | Comment |
|---|---|---|
| Elevations | ||
| --jqx-elevation-24 | 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12), 0 11px 15px 0 rgba(0,0,0,.2) | Highest elevation – modals, dialogs |
| --jqx-elevation-16 | 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px 0 rgba(0,0,0,.2) | High elevation – cards, menus |
| --jqx-elevation-12 | 0 12px 17px 2px rgba(0,0,0,.14), 0 5px 22px 4px rgba(0,0,0,.12), 0 7px 8px 0 rgba(0,0,0,.2) | Medium-high elevation |
| --jqx-elevation-8 | 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 3px rgba(0,0,0,.12), 0 4px 15px 0 rgba(0,0,0,.2) | Medium elevation – default cards, panels |
| --jqx-elevation-6 | 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12), 0 3px 5px 0 rgba(0,0,0,.2) | Slight elevation – popovers, tooltips |
| --jqx-elevation-4 | 0 2px 4px 0 rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.12), 0 1px 10px 0 rgba(0,0,0,.2) | Low elevation – buttons, inputs |
| --jqx-elevation-2 | 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) | Very subtle elevation |
| --jqx-elevation-1 | 0 0 2px 0 rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.12), 0 1px 3px 0 rgba(0,0,0,.2) | Minimal elevation |
| --jqx-elevation-0 | none | No elevation – flat surface |