smart-webcomponents-community
Version:
Web Components & Custom Elements Community Version
1,147 lines (1,063 loc) • 65.9 kB
CSS
/* ==========================================================================
Smart UI Theme CSS Variables
==========================================================================
Purpose: Central definition of all customizable design tokens
Usage: :root + dark theme variant + component-specific overrides
Convention: --smart-{scope?}-{property-or-role}[-state-or-modifier]
========================================================================== */
/* CSS variables */
:root {
/* ── Brand / Semantic Colors ──────────────────────────────────────── */
--smart-primary-rgb: 0, 78, 140;
--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 ─────────────────────────────────────────── */
--smart-white: #ffffff;
--smart-black: #000000;
--smart-base: #dfe5ec;
--smart-base-50: #f8fafb;
--smart-base-100: #f3f6f9;
--smart-base-200: #e3eaf2;
--smart-base-300: #dfe5ec;
--smart-base-400: #dbe0e6;
--smart-base-500: #d7dbe0;
--smart-base-600: #c6cbd2;
--smart-base-700: #74787e;
--smart-base-800: #45494f;
--smart-base-900: #1b1d20;
--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: #f8fafb;
--smart-base-background-color: var(--smart-base-50);
--smart-base-background-color-dark: var(--smart-base-900);
--smart-body-background-color: var(--smart-base-100);
--smart-outline-color: var(--smart-primary);
--smart-surface-color: #323232;
/* ── Interaction / State Colors ───────────────────────────────────── */
--smart-disabled: #CCCCCC;
--smart-disabled-color: #555555;
--smart-ui-state-hover: var(--smart-base-200);
--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: rgba(var(--smart-primary-rgb), .1);
--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 ───────────────────────────────────────────── */
--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-radius-0: 0;
--smart-border-radius-1: 0.25rem;
--smart-border-radius-2: 0.5rem;
--smart-border-radius-3: 0.75rem;
--smart-border-radius-4: 1rem;
--smart-border-radius-5: 1.25rem;
--smart-border-radius-6: 1.5rem;
--smart-border-radius-7: 1.75rem;
--smart-border-radius-8: 2rem;
--smart-border-radius-9: 2.25rem;
--smart-border-radius-10: 2.5rem;
--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;
--smart-border-normal: var(--smart-base-400);
--smart-border-hover: var(--smart-base-700);
--smart-border-focus: var(--smart-primary);
--smart-border-disabled: var(--smart-base-400);
/* ── Typography & Icons ───────────────────────────────────────────── */
--smart-text-title-color: var(--smart-base-900);
--smart-text-color: var(--smart-base-900);
--smart-text-secondary-color: var(--smart-base-800);
--smart-text-tertiary-color: var(--smart-base-700);
--smart-text-disabled-color: var(--smart-base-600);
--smart-text-contrast-color: var(--smart-white);
--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'), url('../font/smart-icons.woff') format('woff'), url('../font/smart-icons.ttf') format('truetype'), url('../font/smart-icons.eot') format('embedded-opentype');
/* ── Global Component Defaults ─────────────────────────────── */
--smart-tick-color: var(--smart-border);
/* tick color for smartTank, smartSlider and smartGauge */
--smart-tick-label-color: var(--smart-background-color);
/* tick label color for smartTank, smartSlider and smartGauge */
--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-selection: var(--smart-primary);
/* default selection bg color */
--smart-editor-selection-color: var(--smart-primary-color);
/* default selection color */
--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;
/* smartDropDownList, smartComboBox drop down default height */
--smart-editor-drop-down-max-width: 800px;
/* smartDropDownList, smartComboBox, smartTextBox popup max width */
--smart-editor-drop-down-min-width: 100px;
/* smartDropDownList, smartComboBox, smartTextBox popup min width */
--smart-editor-drop-down-max-height: 400px;
/* smartDropDownList, smartComboBox, smartTextBox popup max height */
--smart-editor-drop-down-min-height: 50px;
/* smartDropDownList, smartComboBox, smartTextBox popup min height */
--smart-editor-drop-down-resize-bar-height: 15px;
/* smartDropDownList, smartComboBox, smartTextBox 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) ─────────────────────────────────── */
--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 */
/* ── 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 smartBreadcrumb 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 ─────────────────────────────────── */
--smart-button-text-transform: none;
/* 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 ─────────────────────────────────── */
--smart-button-group-default-width: auto;
/* default width */
--smart-button-group-default-height: auto;
/* defuult height */
/* ── Calendar ─────────────────────────────────── */
--smart-calendar-header-height: calc(0.75 * var(--smart-bar-height));
/* default height for smartCalendar's header section */
--smart-calendar-footer-height: calc(0.75 * var(--smart-bar-height));
/* default height for smartCalendar'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)));
/* smartCalendar 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));
/* smartCalendar 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);
/* Defines title's padding */
--smart-calendar-important-date-color: var(--smart-ui-state-color-hover);
/* Defines title's padding */
--smart-calendar-important-date-border-color: var(--smart-ui-state-border-hover);
/* Defines title's padding */
--smart-calendar-navigation-button-size: 30px;
/* Sets the size for the navigation buttons */
/* ── 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 ─────────────────────────────────── */
--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 ─────────────────────────────────── */
--smart-chart-default-width: 850px;
/* default width of the element */
--smart-chart-default-height: 500px;
/* default height of the element */
/* ── CheckBox ─────────────────────────────────── */
--smart-check-box-default-size: calc(1px + 1/2 * var(--smart-editor-height));
/* default size for the check box used in smartCheckBox and smartListItem. */
/* ── 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 ─────────────────────────────────── */
--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 ─────────────────────────────────── */
--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 ─────────────────────────────────── */
--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 ─────────────────────────────────── */
--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 ─────────────────────────────────── */
--smart-date-time-picker-default-width: var(--smart-editor-width);
/* smartDateTimePicker default width */
--smart-date-time-picker-default-height: var(--smart-editor-height);
/* smartDateTimePicker 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);
/* smartDropDownList drop down width */
--smart-date-time-picker-drop-down-height: auto;
/* smartDropDownList drop down height */
/* ── 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 that show possible drop position of the dragged item. */
/* ── DropDownList ─────────────────────────────────── */
--smart-drop-down-list-default-width: var(--smart-editor-width);
/* smartDropDownList, smartComboBox default width */
--smart-drop-down-list-default-height: var(--smart-editor-height);
/* smartDropDownList, smartComboBox default height */
--smart-drop-down-list-drop-down-width: initial;
/* smartDropDownList drop down width */
--smart-drop-down-list-drop-down-height: auto;
/* smartDropDownList drop down height */
/* ── 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 downheight */
/* ── Fitler 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 smartTree inside the smartFilterPanel */
/* Alternating 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 ─────────────────────────────────── */
--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 when selected */
--smart-grid-cell-background-freeze-selected: #DCE5EC;
/* background color of cells, when row/column is frozen */
--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 deleted.. */
--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;
/* the view bar background colors */
--smart-grid-view-bar-background: #FCFCFC;
/* background color of cells, when column is filtered. */
--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 ─────────────────────────────────── */
--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 ─────────────────────────────────── */
--smart-grid-panel-default-width: 450px;
/* default width of the smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel */
--smart-grid-panel-default-height: auto;
/* default height of the smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel */
--smart-grid-panel-padding: 10px;
/* padding of the smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel */
--smart-grid-panel-vertical-offset: 10px;
/* Vertical offset between smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel items */
--smart-grid-panel-item-height: 30px;
/* height of smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel items */
--smart-column-panel-drop-down-height: 350px;
/* height of drop-downs */
--smart-multi-column-filter-panel-template-columns: 15px 60px 2fr 3fr 3fr;
/* smartMultiColumnFilterPanel grid-template-columns */
--smart-formatting-panel-default-width: 600px;
/* default width of the smartFormattingPanel */
--smart-formatting-panel-row-height: 30px;
/* Height of rows in smartFormattingPanel */
--smart-formatting-panel-add-new-button-size: 40px;
/* Size of "Add new" (+) button in smartFormattingPanel */
--smart-formatting-panel-popup-width: 300px;
/* Width of smartFormattingPanel's pop-up */
--smart-formatting-panel-color-box-height: 20px;
/* Height of color boxes in smartFormattingPanel's pop-up */
/* ── 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;
/* smartListBox item height */
--smart-list-item-label-padding: 0;
/* smartListBox item label padding */
--smart-list-item-label-border-radius: 0;
/* smartListBox item label border radius */
--smart-list-item-padding: 9px 12px;
/* smartListBox item padding */
--smart-loader-size: var(--smart-editor-height);
/* smartListBox loader size(width=height) */
/* ── 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 ─────────────────────────────────── */
--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);
/* smartMenu scroll buttons size. Horizontal Menu scroll buttons width = Vertical Menu scroll buttons height. */
/* ── 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*/
--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 ─────────────────────────────────── */
--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 ─────────────────────────────────── */
--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);
/* smartCircularProgressBar default size (width = height) */
--smart-circular-progress-bar-fill-size: 20%;
/* smartCircularProgressBar ui-state size. The width of the ui-state. The middle container's width is calculated defaultd on this value. */
/* ── 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 ─────────────────────────────────── */
--smart-radio-button-default-size: calc(1px + 1/2 * var(--smart-editor-height));
/* default size for the radio button. */
/* ── 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);
/* smartSwitchButton default height */
--smart-switch-button-thumb-size: calc(var(--smart-switch-button-default-height) - 8px);
/* smartSwitchButton thumb size */
/* ── Scrollbar ─────────────────────────────────── */
--smart-scroll-button-size: 16px;
/* smartScrollBar buttons size. Horizontal ScrollBar button width = Vertical ScrollBar button height. ScrollBar track is calculated defaultd 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: #f8fafb;
/* default ScrollBar's background color. */
--smart-scroll-bar-track-background: var(--smart-scroll-bar-background);
--smart-scroll-bar-border: #f8fafb;
/* 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: #D5D8DB;
/* 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: #d7dbe0;
/* 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: #c6cbd2;
/* 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: #f8fafb;
/* The background color of ScrollBar's navigation buttons. */
--smart-scroll-bar-button-border: #f8fafb;
/* 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: #d7dbe0;
/* The background color of the hovered ScrollBar's buttons. */
--smart-scroll-bar-button-border-hover: #f8fafb;
/* 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: #c6cbd2;
/* The background color of the ScrollBar's buttons in active state. */
--smart-scroll-bar-button-border-active: #f8fafb;
/* The border color of the ScrollBar's buttons in active state. */
--smart-scroll-bar-button-color-active: #505050;
/* The color of the ScrollBar's buttons in active state. */
/* ── Time Picker ─────────────────────────────────── */
--smart-time-picker-default-width: var(--smart-editor-width);
/* smartTimePicker default width */
--smart-time-picker-default-height: calc(12 * var(--smart-editor-height));
/* smartTimePicker default height */
/* ── Tooltip ─────────────────────────────────── */
--smart-tooltip-arrow-width: 6px;
/* default smartTooltip arrow width */
--smart-tooltip-arrow-color: var(--smart-secondary);
/* smartTooltip arrow color */
--smart-tooltip-arrow-translate: 0;
/* smartTooltip arrow translation (transformation) */
--smart-tooltip-padding: 4px 8px;
/* smartTooltip padding */
--smart-tooltip-content-shadow: none;
/* smartTooltip content box-shadow */
/* ── 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;
/* smartTree 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: 7px 10px;
/* 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 ─────────────────────────────────── */
--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 ─────────────────────────────────── */
/* ── PasswordTextBox ─────────────────────────────────── */
--smart-password-text-box-default-width: var(--smart-editor-width);
/* default width */
--smart-password-