diff --git a/apps/demos/testing/etalons/Common-ListsOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-ListsOverview (fluent-next.blue.light).png index 5d20b7a8bcc1..7fd2d03f9f2c 100644 Binary files a/apps/demos/testing/etalons/Common-ListsOverview (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Common-ListsOverview (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/List-Search (fluent-next.blue.light).png b/apps/demos/testing/etalons/List-Search (fluent-next.blue.light).png index 71b5a2659ab3..07300623fd4f 100644 Binary files a/apps/demos/testing/etalons/List-Search (fluent-next.blue.light).png and b/apps/demos/testing/etalons/List-Search (fluent-next.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-search (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-search (fluent-next.blue.light).png index 21fadc6b933e..9f1a27f5ef5e 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-search (fluent-next.blue.light).png and b/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-search (fluent-next.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - after scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - after scroll (fluent-next.blue.light).png index 72f040d253f9..c19b98471d78 100644 Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - after scroll (fluent-next.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - after scroll (fluent-next.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - before scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - before scroll (fluent-next.blue.light).png index 0df93bc18f84..bb584e82c26f 100644 Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - before scroll (fluent-next.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - before scroll (fluent-next.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/List with search (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List with search (fluent-next.blue.light).png index 22cf2373d3ae..934ef4069f8d 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/list/etalons/List with search (fluent-next.blue.light).png and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List with search (fluent-next.blue.light).png differ diff --git a/packages/devextreme-scss/.gitignore b/packages/devextreme-scss/.gitignore index a140fd7101f4..73eb511bf214 100644 --- a/packages/devextreme-scss/.gitignore +++ b/packages/devextreme-scss/.gitignore @@ -1,2 +1,3 @@ scss/bundles scss/_design-system +.size-runs diff --git a/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss b/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss index 6e90ce1e806c..933d4e096950 100644 --- a/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss +++ b/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss @@ -11,7 +11,7 @@ $contextmenu-menu-separator-margin: 5px 0 !default; .dx-menu-items-container { - // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this @if $contextmenu-menu-items-container-padding { padding: $contextmenu-menu-items-container-padding; } diff --git a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss index ac5f3675f426..1d98db9224bf 100644 --- a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss +++ b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss @@ -124,7 +124,7 @@ $fileuploader-input-wrapper-vertical-padding: 1em !default; // dx-relative align-items: center; width: 100%; - // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this @if $fileuploader-file-container-padding { padding: $fileuploader-file-container-padding; } @@ -210,7 +210,7 @@ $fileuploader-input-wrapper-vertical-padding: 1em !default; // dx-relative float: left; width: 100%; height: $fileuploader-progressbar-height; - margin-top: -6px; + margin-top: -6px; // dx-fixed-size: pulls the status text onto the progress line } .dx-fileuploader-file-name { diff --git a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss index 880f8954abed..7419d438b14a 100644 --- a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss +++ b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss @@ -1,5 +1,6 @@ @use "sass:list"; @use "sass:math"; +@use "sass:meta"; @use "sass:selector"; $htmleditor-code-block-bg: rgba(191, 191, 191, 0.15) !default; @@ -11,12 +12,32 @@ $list-style-width: 1.2em; $list-style-margin: 0.3em; $list-style-outer-width: $list-style-margin + $list-style-width; $max-indent: 9; + +/* + * dx-fixed-size: the drag handle's size; its half is negated at twenty positions, so feeding a + * var() here would trade one knob nobody retunes for twenty calc() in the bundle. + */ $resize-handle-size: 11px; -$touch-resize-handle-size: 15px; +$touch-resize-handle-size: 15px; // dx-fixed-size: the touch variant of the same handle $half-resize-handle-size: math.div($resize-handle-size, 2); $half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2); -$transparent-border: 1px solid transparent; +$htmleditor-border-width: 1px !default; +$transparent-border: $htmleditor-border-width solid transparent; + +// Design sizing values (parametrizable; fluent-next injects tokens) +$variable-padding: 3px 6px !default; +$variable-border-radius: 8px !default; +$blockquote-padding-inline-start: 12px !default; +$blockquote-border-inline-start-width: 4px !default; +$table-cell-padding: 2px 5px !default; +$placeholder-inset-inline: 15px !default; +$htmleditor-content-padding: 12px 15px !default; +$mention-padding-block: 1px !default; +$mention-border-radius: 2px !default; +$mention-margin-inline: 2px !default; +$table-resizer-thickness: 5px !default; +$table-resizer-highlight-thickness: 3px !default; @function add-counter-reset($counter, $start: 1) { @if $counter > $start { @@ -130,15 +151,15 @@ $transparent-border: 1px solid transparent; display: flex; flex: 1; flex-basis: auto; - min-height: 1px; + min-height: 1px; // dx-structural: lets the flex item shrink below its content, not a designed height margin: 0; position: relative; overflow: hidden; } .ql-clipboard { // stylelint-disable-line selector-class-pattern - left: -100000px; - height: 1px; + left: -100000px; // dx-structural: parks Quill's clipboard element off-screen + height: 1px; // dx-structural: collapses the off-screen clipboard element, not a designed height overflow-y: hidden; position: absolute; top: 50%; @@ -155,14 +176,14 @@ $transparent-border: 1px solid transparent; width: 100%; outline: none; overflow-y: auto; - padding: 12px 15px; + padding: $htmleditor-content-padding; white-space: pre-wrap; word-wrap: break-word; .dx-variable { & > span { - padding: 3px 6px; - border-radius: 8px; + padding: $variable-padding; + border-radius: $variable-border-radius; } } @@ -202,8 +223,8 @@ $transparent-border: 1px solid transparent; td, th { - border: 1px solid #000; - padding: 2px 5px; + border: 1px solid #000; // dx-line-width: a table hairline; the colour beside it is hard-coded too + padding: $table-cell-padding; } ol { @@ -319,10 +340,10 @@ $transparent-border: 1px solid transparent; color: $htmleditor-placeholder-color; content: attr(data-placeholder); font-style: italic; - left: 15px; + left: $placeholder-inset-inline; pointer-events: none; position: absolute; - right: 15px; + right: $placeholder-inset-inline; } &::after { @@ -332,21 +353,21 @@ $transparent-border: 1px solid transparent; } &[data-placeholder] > p { - height: 0.1px; + height: 0.1px; // dx-structural: a non-zero height the placeholder needs, not a designed size } } // stylelint-enable selector-class-pattern blockquote { - padding-inline-start: 12px; - border-inline-start: 4px solid; + padding-inline-start: $blockquote-padding-inline-start; + border-inline-start: $blockquote-border-inline-start-width solid; } } .dx-suggestion-list-wrapper { .dx-list { - min-height: 35px; + min-height: 35px; // dx-fixed-size: the mention suggestion list keeps a row of space while filtering .dx-scrollable-content { margin: 0; @@ -355,7 +376,7 @@ $transparent-border: 1px solid transparent; } .dx-suggestion-list { - min-width: 50px; + min-width: 50px; // dx-fixed-size: the narrowest the mention suggestion list may get .dx-list-item { display: block; @@ -368,7 +389,7 @@ $transparent-border: 1px solid transparent; } .dx-formdialog-form { - min-width: 360px; + min-width: 360px; // dx-fixed-size: the link/image dialog form width } .dx-aidialog { @@ -393,14 +414,14 @@ $transparent-border: 1px solid transparent; .dx-aidialog-title { display: flex; align-items: center; - gap: 6px; + gap: 6px; // dx-fixed-size: gap between the AI dialog title icon and its text font-weight: $htmleditor-aidialog-title-font-weight; } .dx-overlay-content { &.dx-popup-fullscreen { .dx-formdialog-form { - min-width: 240px; + min-width: 240px; // dx-fixed-size: the same dialog form once the popup goes fullscreen } } } @@ -413,7 +434,7 @@ $transparent-border: 1px solid transparent; .dx-background-format { .dx-icon-color, .dx-icon-background { - border-bottom: 3px solid transparent; + border-bottom: 3px solid transparent; // dx-line-width: the strip under the colour-format icon that shows the picked colour } } @@ -433,7 +454,7 @@ $transparent-border: 1px solid transparent; .dx-resize-frame { position: absolute; box-sizing: content-box; - border: 1px dashed lightslategrey; + border: 1px dashed lightslategrey; // dx-line-width: hairline of the image resize frame pointer-events: none; .dx-resizable-handle { @@ -444,7 +465,7 @@ $transparent-border: 1px solid transparent; .dx-resizable-handle-corner-top-left, .dx-resizable-handle-corner-bottom-right, .dx-resizable-handle-corner-bottom-left { - border: 1px solid white; + border: 1px solid white; // dx-line-width: hairline around a resize handle width: $resize-handle-size; height: $resize-handle-size; border-radius: 0; @@ -500,7 +521,7 @@ $transparent-border: 1px solid transparent; position: absolute; width: $resize-handle-size; height: $resize-handle-size; - border: 1px solid white; + border: 1px solid white; // dx-line-width: hairline around a resize handle // dx-line-width: hairline around a resize handle @at-root #{selector.append(".dx-touch-device", &)} { width: $touch-resize-handle-size; @@ -565,8 +586,8 @@ $transparent-border: 1px solid transparent; } .dx-mention { - padding: 1px 0; - border-radius: 2px; + padding: $mention-padding-block 0; + border-radius: $mention-border-radius; .dx-template-wrapper { white-space: nowrap; @@ -574,7 +595,7 @@ $transparent-border: 1px solid transparent; } & > span { - margin: 0 2px; + margin: 0 $mention-margin-inline; } } @@ -589,27 +610,27 @@ $transparent-border: 1px solid transparent; } .dx-htmleditor-column-resizer { - width: 5px; + width: $table-resizer-thickness; top: 0; height: 100%; cursor: col-resize; } .dx-htmleditor-highlighted-column { - width: 3px; + width: $table-resizer-highlight-thickness; top: 0; height: 100%; } .dx-htmleditor-row-resizer { - height: 5px; + height: $table-resizer-thickness; left: 0; width: 100%; cursor: row-resize; } .dx-htmleditor-highlighted-row { - height: 3px; + height: $table-resizer-highlight-thickness; left: 0; width: 100%; } diff --git a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss index e6771ff34fcc..4414faee776f 100644 --- a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss +++ b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss @@ -304,7 +304,7 @@ } @mixin dx-font-icon($glyph) { - font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes + font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes -- dx-icon-glyph-size: the icon font's own size, no icon scale in the package &::before { content: $glyph; @@ -672,7 +672,7 @@ $icons: ( } %icon-font { - font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes + font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes -- dx-icon-glyph-size: the icon font's own size, no icon scale in the package } @each $key, $glyph in $icons { diff --git a/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss b/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss index ac6f0ec94503..5ddb76f321cc 100644 --- a/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss +++ b/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss @@ -1,7 +1,26 @@ @use "sass:math"; - -$loadindicator-width: 32px; -$loadindicator-height: 32px; +@use "sass:meta"; + +// Design sizing values (parametrizable; fluent-next injects tokens) +$loadindicator-width: 32px !default; +$loadindicator-height: 32px !default; + +/* + * The container centres the indicator by pulling it back half its own size. A theme that feeds a + * var() into the sizes above leaves Sass nothing to halve, so the halves are knobs of their own: the + * theme passes one derived token instead of four calc() expressions reaching the browser. The + * defaults compute at build time and keep every other theme byte-identical. + */ +$loadindicator-offset-top: if( + meta.type-of($loadindicator-height) == number, + math.div(-$loadindicator-height, 2), + calc(#{$loadindicator-height} / -2) +) !default; +$loadindicator-offset-left: if( + meta.type-of($loadindicator-width) == number, + math.div(-$loadindicator-width, 2), + calc(#{$loadindicator-width} / -2) +) !default; .dx-loadindicator { width: $loadindicator-width; @@ -49,12 +68,12 @@ $loadindicator-height: 32px; top: 50%; left: 50%; position: absolute; - margin-top: math.div(-1 * $loadindicator-height, 2); - margin-left: math.div(-1 * $loadindicator-width, 2); + margin-top: $loadindicator-offset-top; + margin-left: $loadindicator-offset-left; &.dx-loadindicator { - margin-top: math.div(-1 * $loadindicator-height, 2); - margin-left: math.div(-1 * $loadindicator-width, 2); + margin-top: $loadindicator-offset-top; + margin-left: $loadindicator-offset-left; } } } diff --git a/packages/devextreme-scss/scss/widgets/base/_multiView.scss b/packages/devextreme-scss/scss/widgets/base/_multiView.scss index 286801aa0075..9633d2c97644 100644 --- a/packages/devextreme-scss/scss/widgets/base/_multiView.scss +++ b/packages/devextreme-scss/scss/widgets/base/_multiView.scss @@ -36,8 +36,8 @@ } .dx-multiview-item-hidden { - top: -9999px; - left: -9999px; + top: -9999px; // dx-structural: parks the hidden slide off-screen + left: -9999px; // dx-structural: parks the hidden slide off-screen visibility: hidden; .dx-accordion-item-opened .dx-accordion-item-body { diff --git a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss index 5cc302db045a..450acd6911bc 100644 --- a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss +++ b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss @@ -2,8 +2,8 @@ $numberbox-spin-idle-opacity: 0.2 !default; -$spin-container-width: 22px; -$touch-friendly-spin-container-width: 64px; +$spin-container-width: 22px !default; +$touch-friendly-spin-container-width: 64px !default; .dx-numberbox { position: relative; diff --git a/packages/devextreme-scss/scss/widgets/base/_pagination.scss b/packages/devextreme-scss/scss/widgets/base/_pagination.scss index b96aa7f70684..6e21325afdc1 100644 --- a/packages/devextreme-scss/scss/widgets/base/_pagination.scss +++ b/packages/devextreme-scss/scss/widgets/base/_pagination.scss @@ -21,15 +21,25 @@ $pagination-pages-count-padding-left: 6px !default; $pagination-info-opacity: 0.7 !default; $pagination-nav-disabled-opacity: 0.3 !default; -$pagination-paddings: 8px; -$pagination-info-paddings: 9px; +// Not a knob itself: the shared source of the two fallbacks below, which are. +$pagination-paddings: 8px; // dx-fixed-size: the shared source of the two fallbacks below +$pagination-info-paddings: 9px !default; + +// The pager's own padding and the nav button's, as fallbacks fluent-next switches off with false. +$pagination-padding-block-fallback: $pagination-paddings !default; +$pagination-navigate-button-padding-block-fallback: $pagination-paddings - 1px !default; .dx-pager, .dx-pagination { overflow: hidden; width: 100%; - padding-top: $pagination-paddings; - padding-bottom: $pagination-paddings; + + // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this + @if $pagination-padding-block-fallback { + padding-top: $pagination-padding-block-fallback; + padding-bottom: $pagination-padding-block-fallback; + } + line-height: normal; @include user-select(none); @@ -46,7 +56,7 @@ $pagination-info-paddings: 9px; display: inline-block; cursor: pointer; - // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this @if $pagination-page-padding-fallback { padding: $pagination-page-padding-fallback; } @@ -69,7 +79,7 @@ $pagination-info-paddings: 9px; .dx-navigate-button { - // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this @if $pagination-navigate-button-width-fallback { width: $pagination-navigate-button-width-fallback; } @@ -78,7 +88,12 @@ $pagination-info-paddings: 9px; cursor: pointer; display: inline-block; vertical-align: top; - padding: $pagination-paddings - 1px $pagination-page-horizontal-padding; + + // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this + @if $pagination-navigate-button-padding-block-fallback { + padding: $pagination-navigate-button-padding-block-fallback $pagination-page-horizontal-padding; + } + box-sizing: content-box; &.dx-button-disable { diff --git a/packages/devextreme-scss/scss/widgets/base/_popup.scss b/packages/devextreme-scss/scss/widgets/base/_popup.scss index baf23ed61243..0ef8ecef341e 100644 --- a/packages/devextreme-scss/scss/widgets/base/_popup.scss +++ b/packages/devextreme-scss/scss/widgets/base/_popup.scss @@ -11,7 +11,7 @@ $popup-dialog-message-padding: 10px 10px 5px 10px !default; .dx-popup-title { padding: $popup-title-padding; - // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this @if $popup-title-min-height-fallback { min-height: $popup-title-min-height-fallback; } diff --git a/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss b/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss index 28f826acb54d..7868303a93c2 100644 --- a/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss +++ b/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss @@ -1,6 +1,7 @@ -$recurrence-interval-number-box-margin-top: 25px; -$recurrence-radio-group-item-padding: 10px; -$recurrence-button-group-item-padding: 8px; +// Design sizing values (parametrizable; fluent-next injects tokens) +$recurrence-interval-number-box-margin-top: 25px !default; +$recurrence-radio-group-item-padding: 10px !default; +$recurrence-button-group-item-padding: 8px !default; .dx-recurrence-repeat-on, .dx-recurrence-numberbox-interval-wrapper { diff --git a/packages/devextreme-scss/scss/widgets/base/_resizable.scss b/packages/devextreme-scss/scss/widgets/base/_resizable.scss index 8068ae0a863a..d1ac354a127d 100644 --- a/packages/devextreme-scss/scss/widgets/base/_resizable.scss +++ b/packages/devextreme-scss/scss/widgets/base/_resizable.scss @@ -1,6 +1,6 @@ $handle-offset: 0; -$one-side-handle-size: 3px + $handle-offset; -$two-side-handle-size: 6px + $handle-offset; +$one-side-handle-size: 3px + $handle-offset; // dx-fixed-size: handle thickness ($handle-offset is 0) +$two-side-handle-size: 6px + $handle-offset; // dx-fixed-size: handle thickness ($handle-offset is 0) .dx-resizable { display: block; diff --git a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss index be797dd14148..7995ecfe4968 100644 --- a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss +++ b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "./mixins" as *; // Design sizing values (parametrizable; fluent-next injects tokens) @@ -13,9 +14,19 @@ $scrollview-scrollbottom-indicator-margin: 0 10px 0 0 !default; $scrollview-scrollbottom-indicator-margin-rtl: 0 0 0 10px !default; $scrollview-pulldown-icon-font-size: 24px !default; - -$pulldown-height: 50px; -$pulldown-padding: 15px; +$pulldown-height: 50px !default; +$pulldown-padding: 15px !default; + +/* + * The pull-down area is parked directly above the viewport, so the offset is its own height plus + * both paddings, negated. A theme that feeds var() into either leaves Sass nothing to add up, so the + * offset is a knob of its own: the theme derives it once instead of the browser recomputing it here. + */ +$pulldown-top-offset: if( + meta.type-of($pulldown-height) == number and meta.type-of($pulldown-padding) == number, + -($pulldown-height + $pulldown-padding * 2), + calc(-1 * (#{$pulldown-height} + #{$pulldown-padding} * 2)) +) !default; .dx-scrollable-native { &.dx-scrollable-native-generic { @@ -40,7 +51,7 @@ $pulldown-padding: 15px; height: 100%; width: 100%; left: -50%; - margin-left: -20px; + margin-left: -20px; // dx-fixed-size: centres the android pull-down on the pocket padding: 0; border-radius: 50%; @@ -120,7 +131,7 @@ $pulldown-padding: 15px; width: 100%; height: $pulldown-height; padding: $pulldown-padding 0; - top: -($pulldown-height + $pulldown-padding * 2); + top: $pulldown-top-offset; overflow: hidden; transform: translate(0, 0); -webkit-user-drag: none; @@ -139,7 +150,7 @@ $pulldown-padding: 15px; left: 0; top: 50%; display: inline-block; - margin: -15px 20px 0 15px; + margin: -15px 20px 0 15px; // dx-fixed-size: centres the indicator on its own half-height width: $scrollview-pull-down-indicator-width; -webkit-user-drag: none; } @@ -220,7 +231,7 @@ $pulldown-padding: 15px; .dx-scrollview-scrollbottom-text { display: inline-block; - margin-top: -20px; + margin-top: -20px; // dx-fixed-size: pulls the text onto the indicator's line vertical-align: middle; -webkit-user-drag: none; } diff --git a/packages/devextreme-scss/scss/widgets/base/_slider.scss b/packages/devextreme-scss/scss/widgets/base/_slider.scss index 77a05e3c70c9..1c5a76524df9 100644 --- a/packages/devextreme-scss/scss/widgets/base/_slider.scss +++ b/packages/devextreme-scss/scss/widgets/base/_slider.scss @@ -1,8 +1,8 @@ @use "./mixins" as *; @use "./popover/mixins" as *; -$slider-tooltip-content-height: 28px; -$slider-tooltip-arrow-height: 7px; +$slider-tooltip-content-height: 28px !default; +$slider-tooltip-arrow-height: 7px; // dx-fixed-size: feeds dx-popover-arrow-size, which divides by sqrt(2) // Design sizing values (parametrizable; fluent-next injects tokens) $slider-label-position-bottom-padding-bottom: 14px !default; diff --git a/packages/devextreme-scss/scss/widgets/base/_sortable.scss b/packages/devextreme-scss/scss/widgets/base/_sortable.scss index f6ac60912163..79a7cb64b80f 100644 --- a/packages/devextreme-scss/scss/widgets/base/_sortable.scss +++ b/packages/devextreme-scss/scss/widgets/base/_sortable.scss @@ -58,5 +58,5 @@ $sortable-placeholder-inside-border-width: 2px !default; .dx-sortable-dragging > * { border-color: if(meta.type-of($base-accent) == color, color.change($base-accent, $alpha: 0.5), rgb(from #{$base-accent} r g b / 0.5)); - box-shadow: 0 1px 3px $sortable-clone-shadow-color-first, 0 6px 8px $sortable-clone-shadow-color-second; + box-shadow: 0 1px 3px $sortable-clone-shadow-color-first, 0 6px 8px $sortable-clone-shadow-color-second; // dx-shadow-geometry: the theme already takes both colours from roles; whether a whole shadow role replaces this two-layer geometry is design's call } diff --git a/packages/devextreme-scss/scss/widgets/base/_tagBox.scss b/packages/devextreme-scss/scss/widgets/base/_tagBox.scss index ab4d70eb717d..37426af9b186 100644 --- a/packages/devextreme-scss/scss/widgets/base/_tagBox.scss +++ b/packages/devextreme-scss/scss/widgets/base/_tagBox.scss @@ -12,7 +12,7 @@ @include hide-input-cursor(); // T278002 min-width: 0; - width: 0.1px; // T393423, T437866 + width: 0.1px; // T393423, T437866 -- dx-structural: a non-zero width the browsers need, not a designed size padding-left: 0; padding-right: 0; margin-left: 0; @@ -40,7 +40,7 @@ } .dx-tag { - max-width: calc(100% - 1px); + max-width: calc(100% - 1px); // dx-px-nudge: a pixel off the full width so the tag never overflows display: inline-flex; align-self: flex-start; } diff --git a/packages/devextreme-scss/scss/widgets/base/_ui.scss b/packages/devextreme-scss/scss/widgets/base/_ui.scss index 01861bbd9f96..79113adfd114 100644 --- a/packages/devextreme-scss/scss/widgets/base/_ui.scss +++ b/packages/devextreme-scss/scss/widgets/base/_ui.scss @@ -10,8 +10,8 @@ .dx-hidden-input { position: fixed; - top: -10px; - left: -10px; + top: -10px; // dx-structural: parks the hidden input off-screen + left: -10px; // dx-structural: parks the hidden input off-screen width: 0; height: 0; } @@ -38,8 +38,8 @@ .dx-screen-reader-only { position: absolute; - height: 1px; - width: 1px; + height: 1px; // dx-structural: the screen-reader-only clipping box, not a designed size + width: 1px; // dx-structural: the screen-reader-only clipping box, not a designed size overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); @@ -223,7 +223,7 @@ .dx-android-pop-animation { &.dx-enter.dx-forward, &.dx-leave.dx-leave-active.dx-backward { - transform: translate3d(0, 150px, 0); + transform: translate3d(0, 150px, 0); // dx-fixed-size: how far the android pop animation travels opacity: 0; } @@ -345,7 +345,7 @@ .dx-3d-drop-animation { &.dx-enter, &.dx-leave.dx-leave-active { - transform: rotate3d(1, 0, 0, 10deg) translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1); + transform: rotate3d(1, 0, 0, 10deg) translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the 3d drop animation travels opacity: 0; } @@ -359,7 +359,7 @@ .dx-fade-drop-animation { &.dx-enter, &.dx-leave.dx-leave-active { - transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1); + transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the fade drop animation travels opacity: 0; } @@ -373,7 +373,7 @@ .dx-fade-rise-animation { &.dx-enter, &.dx-leave.dx-leave-active { - transform: translate3d(0, 10px, 0) scale3d(1.1, 1.1, 1.1); + transform: translate3d(0, 10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the fade rise animation travels opacity: 0; } diff --git a/packages/devextreme-scss/scss/widgets/base/_validation.scss b/packages/devextreme-scss/scss/widgets/base/_validation.scss index ce0f2117ff5b..abaaa03d78e8 100644 --- a/packages/devextreme-scss/scss/widgets/base/_validation.scss +++ b/packages/devextreme-scss/scss/widgets/base/_validation.scss @@ -3,6 +3,7 @@ $validation-summary-margin-top: 20px !default; $validation-message-content-padding: 10px !default; $validation-message-font-size: 0.85em !default; // dx-relative +$validation-summary-item-border-bottom-width: 1px !default; @mixin dx-base-validation($summary-color, $message-color, $message-bg-color, $border-radius) { .dx-validationsummary-item { @@ -82,7 +83,7 @@ $validation-message-font-size: 0.85em !default; // dx-relative } .dx-validationsummary-item-content { - border-bottom: 1px dashed; + border-bottom: $validation-summary-item-border-bottom-width dashed; display: inline-block; line-height: normal; } diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss index df11e6b2bfc8..22da41bc377b 100644 --- a/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss +++ b/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss @@ -1,5 +1,9 @@ @use "../mixins" as *; +// Design sizing values (parametrizable; fluent-next injects tokens) +$calendar-border-width: 1px !default; +$calendar-multiview-table-padding: 0 10px !default; + $calendar-week-day-header-font-size: 10px !default; $calendar-week-day-header-font-weight: 500 !default; @@ -12,7 +16,7 @@ $calendar-week-number-cell-width: 2em !default; // dx-relative direction: ltr; flex-direction: column; justify-content: space-between; - border: 1px solid transparent; + border: $calendar-border-width solid transparent; &.dx-rtl { direction: rtl; @@ -135,7 +139,7 @@ $calendar-week-number-cell-width: 2em !default; // dx-relative } table { - padding: 0 10px; + padding: $calendar-multiview-table-padding; } } } diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss index faf34cf756f9..a66e4c58f459 100644 --- a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss @@ -129,6 +129,10 @@ $calendar-cell-other-hover-color, $calendar-cell-hover-border-color, $calendar-cell-range-border-radius, + // Today is outlined and the contoured (keyboard-focused) date carries a ring; both are drawn at + // the same thickness, but they are separate decisions, so they are separate knobs. + $cell-today-border-width: 2px, + $cell-contoured-ring-width: 2px, ) { .dx-calendar-cell { color: $cell-text-color; @@ -153,7 +157,7 @@ &.dx-calendar-today { span { - border: 2px solid; + border: $cell-today-border-width solid; border-color: $base-accent; } } @@ -180,7 +184,7 @@ &.dx-calendar-contoured-date { span { - box-shadow: 0 0 0 2px $cell-contoured-border-color; + box-shadow: 0 0 0 $cell-contoured-ring-width $cell-contoured-border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss index f3e094c5aff3..1fdee364b285 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss @@ -19,9 +19,9 @@ } &:focus-visible { - outline: 2px solid; + outline: 2px solid; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with outline-color: $cardview-card--focused-outline-color; - outline-offset: -2px; + outline-offset: -2px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with } } diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss index ae28a7e5f713..70216956dd1e 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss @@ -7,7 +7,7 @@ height: $cardview-card__header-height; .dx-toolbar { - padding: 0 12px; + padding: 0 12px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with border-radius: $cardview-card-border-radius $cardview-card-border-radius 0 0; background-color: transparent; @@ -39,8 +39,8 @@ .dx-toolbar-item-content::before { content: ""; - width: 20px; - height: 20px; + width: 20px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with + height: 20px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with display: inline-block; pointer-events: none; } diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss index 945055c5aaab..8fdc113f1420 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss @@ -7,7 +7,7 @@ align-items: center; justify-content: center; background-color: $cardview-nodata-view__icon-bg-color; - border-radius: 999px; + border-radius: 999px; // dx-fixed-size: a pill radius; the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with margin: $cardview-nodata-view__icon-container-margin; .dx-icon { diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss index 0424508ec3f0..83db04979e65 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss @@ -7,7 +7,7 @@ 2px maximal right header item padding + 4px maximal dxSortable placeholder (drop indicator) width We can increase this number up to the CardView root padding without issues */ -$sortable-side-offset: 6px; +$sortable-side-offset: 6px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with .dx-cardview-header-item-sorting { display: flex; @@ -47,7 +47,7 @@ $sortable-side-offset: 6px; display: flex; align-items: center; justify-content: center; - gap: 4px; + gap: 4px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with .dx-icon { color: $cardview-header-panel__dropzone__icon-color; diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss index 6e341df7730b..1546a0c6775a 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss @@ -6,7 +6,7 @@ align-items: center; padding: $cardview-header-panel__item-padding-vertical $cardview-header-panel__item-padding-horizontal; user-select: none; - gap: 4px; + gap: 4px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with border: solid $cardview-header-panel__item-border-width; border-radius: $cardview-header-panel__item-border-radius; line-height: $cardview-header-panel__item-line-height; @@ -52,9 +52,9 @@ } &:focus-visible { - outline: 2px solid; + outline: 2px solid; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with outline-color: $cardview-header-panel__item--focused-outline-color; - outline-offset: -2px; + outline-offset: -2px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with } &.dx-sortable-source { @@ -83,6 +83,8 @@ border-color: $cardview-header-panel__item--dragged-border-color; color: $cardview-header-panel__item--dragged-text-color; font-weight: $cardview-header-panel__item--dragged-text-weight; + + // dx-shadow-geometry: two-layer drag shadow; whether a shadow role replaces it is design's call box-shadow: 0 1px 3px $cardview-header-panel__item--dragged-box-shadow-color, 0 6px 8px $cardview-header-panel__item--dragged-box-shadow-color; diff --git a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss index cfbc479e39d1..5a92198ea57c 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss @@ -1,6 +1,13 @@ $chat-file-name-font-weight: 600 !default; $chat-editing-preview-caption-font-weight: 500 !default; +// Design sizing values (parametrizable; fluent-next injects tokens) +$chat-messagebox-border-block-start-width: 1px !default; +$chat-messagebubble-padding-image: 4px !default; +$chat-messagebubble-border-radius-image: 8px !default; +$chat-messagebubble-max-width-image: 400px !default; +$chat-messagebubble-max-height-image: 400px !default; + @use "../mixins" as *; @use "layout/chat" as *; @use "layout/chat-avatar" as *; @@ -8,11 +15,18 @@ $chat-editing-preview-caption-font-weight: 500 !default; $file-name-font-weight: $chat-file-name-font-weight, ); @use "layout/chat-alertlist" as *; -@use "layout/chat-messagebox" as *; +@use "layout/chat-messagebox" as * with ( + $messagebox-border-block-start-width: $chat-messagebox-border-block-start-width, +); @use "layout/chat-messagebox-editing-preview" as * with ( $editing-preview-caption-font-weight: $chat-editing-preview-caption-font-weight, ); -@use "layout/chat-messagebubble" as *; +@use "layout/chat-messagebubble" as * with ( + $messagebubble-padding-image: $chat-messagebubble-padding-image, + $messagebubble-border-radius-image: $chat-messagebubble-border-radius-image, + $messagebubble-max-width-image: $chat-messagebubble-max-width-image, + $messagebubble-max-height-image: $chat-messagebubble-max-height-image, +); @use "layout/chat-confirmationpopup" as *; @use "layout/chat-messagegroup" as *; @use "layout/chat-messagelist" as *; diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss index 020268c74563..405555977963 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss @@ -1,7 +1,10 @@ +// Sized from base/chat, which owns the default and forwards a theme's value down (as chat-fileview does). +$messagebox-border-block-start-width: null !default; + .dx-chat-messagebox { display: flex; flex-direction: column; - border-top-width: 1px; + border-top-width: $messagebox-border-block-start-width; border-top-style: solid; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss index bfeb9f8d3fd3..32e1b22f1c97 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss @@ -1,7 +1,8 @@ -$chat-messagebubble-padding-image: 4px !default; -$chat-messagebubble-border-radius-image: 8px !default; -$chat-messagebubble-max-width-image: 400px !default; -$chat-messagebubble-max-height-image: 400px !default; +// Sized from base/chat, which owns the defaults and forwards a theme's values down (as chat-fileview does). +$messagebubble-padding-image: null !default; +$messagebubble-border-radius-image: null !default; +$messagebubble-max-width-image: null !default; +$messagebubble-max-height-image: null !default; $chat-messagebubble-content-max-width: 82.5% !default; // dx-relative-% .dx-chat-messagegroup-content { @@ -25,7 +26,7 @@ $chat-messagebubble-content-max-width: 82.5% !default; // dx-relative-% } &.dx-has-image { - padding: $chat-messagebubble-padding-image; + padding: $messagebubble-padding-image; } .dx-chat-messagebubble-content:empty { @@ -58,9 +59,9 @@ $chat-messagebubble-content-max-width: 82.5% !default; // dx-relative-% } .dx-chat-messagebubble-image { - border-radius: $chat-messagebubble-border-radius-image; - max-width: $chat-messagebubble-max-width-image; - max-height: $chat-messagebubble-max-height-image; + border-radius: $messagebubble-border-radius-image; + max-width: $messagebubble-max-width-image; + max-height: $messagebubble-max-height-image; width: 100%; display: block; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss index bc3fc147187e..0120d523ae63 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss @@ -1,11 +1,12 @@ @mixin chat( $background-color, $border-color, - $border-radius + $border-radius, + $border-width: 1px, ) { .dx-chat { background-color: $background-color; - border: 1px solid; + border: $border-width solid; border-color: $border-color; border-radius: $border-radius; } diff --git a/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss index 6808925d2000..571a29024142 100644 --- a/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss @@ -42,7 +42,7 @@ $checkbox-text-padding-inline-start: 5px !default; word-wrap: break-word; line-height: normal; - // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this @if $checkbox-text-padding-inline-start { padding-inline-start: $checkbox-text-padding-inline-start; } diff --git a/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss index 44b772b69cc2..ab12b991153e 100644 --- a/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss @@ -1,13 +1,22 @@ +@use "sass:math"; +@use "sass:meta"; @use "../mixins" as *; @use "./mixins" as *; @use "sass:string" as string; -$colorbox-input-left-padding: 40px; +$colorbox-input-left-padding: 40px !default; // Design sizing values (parametrizable; fluent-next injects tokens) $colorbox-texteditor-input-container-width: 15px !default; $colorbox-texteditor-input-container-height: 15px !default; $colorbox-texteditor-input-container-inset-inline-start: 14px !default; + +/* The preview is centred on the input, so the offset is half its own height. */ +$colorbox-texteditor-input-container-offset-block-start: if( + meta.type-of($colorbox-texteditor-input-container-height) == number, + math.div(-$colorbox-texteditor-input-container-height, 2), + calc(#{$colorbox-texteditor-input-container-height} / -2) +) !default; $colorbox-overlay-padding: 20px !default; $colorbox-toolbar-item-padding-right: 10px !default; @@ -19,7 +28,7 @@ $colorbox-toolbar-item-padding-right: 10px !default; } .dx-placeholder { - max-width: calc(100% - 25px); + max-width: calc(100% - 25px); // dx-fixed-size: room the colour preview and its gap take from the placeholder } } @@ -33,7 +42,7 @@ $colorbox-toolbar-item-padding-right: 10px !default; z-index: 1; width: $colorbox-texteditor-input-container-width; height: $colorbox-texteditor-input-container-height; - margin-top: -7.5px; + margin-top: $colorbox-texteditor-input-container-offset-block-start; inset-inline-start: $colorbox-texteditor-input-container-inset-inline-start; } } diff --git a/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss index f226a5938c2a..08b624b7c753 100644 --- a/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss @@ -1,17 +1,41 @@ @use "../mixins" as *; -$color-view-container-width: 450px; -$color-view-palette-width: 288px; -$color-view-palette-height: 299px; -$color-view-alpha-width: 292px; -$color-view-hue-scale-width: 18px; -$color-view-hue-scale-height: $color-view-palette-height; - -$colorview-palette-handle-size: 28px; +$color-view-container-width: 450px !default; +$color-view-palette-width: 288px !default; +$color-view-palette-height: 299px !default; +$color-view-alpha-cell-width: 292px !default; +$color-view-hue-scale-width: 18px !default; +$color-view-hue-scale-height: $color-view-palette-height !default; +$color-view-hue-scale-wrapper-height: $color-view-hue-scale-height + 2 !default; + +/* + * The handle is a drawing, not a box: its size is interlocked with the ring radii of the + * radial-gradient and the inset shadows in _mixins.scss. Changing one without redrawing the + * others breaks the handle, so these stay fixed rather than becoming knobs. + */ +$colorview-palette-handle-size: 28px; // dx-fixed-size: diameter of the round palette handle, drawn as rings at 6/7/12/13px $colorview-transparent-background-color: #ccc; -$colorview-handle-first-side-size: 36px; -$colorview-handle-second-side-size: 17px; +$colorview-handle-first-side-size: 36px; // dx-fixed-size: long side of the scale handles, drawn by the inset shadows +$colorview-handle-second-side-size: 17px; // dx-fixed-size: short side of the scale handles, drawn by the inset shadows + +// Design sizing values (parametrizable; fluent-next injects tokens) +$color-view-label-hex-margin: 10px 0 0 0 !default; +$color-view-alpha-label-margin-inline-start: 43px !default; +$color-view-alpha-label-margin-inline-start-rtl: 41px !default; +$color-view-alpha-label-width: 115px !default; +$color-view-textbox-width: 69px !default; +$color-view-textbox-margin: 1px 1px 10px 0 !default; +$color-view-alpha-row-margin-block-start: 10px !default; +$color-view-hue-scale-cell-margin-inline-start: 19px !default; +$color-view-controls-width: 90px !default; +$color-view-controls-margin-inline-start: 27px !default; +$color-view-controls-margin-inline-start-rtl: 25px !default; +$color-view-color-preview-width: 86px !default; +$color-view-color-preview-height: 40px !default; +$color-view-alpha-scale-height: 20px !default; +$color-view-alpha-cell-margin-block: 6px !default; +$color-view-apply-button-margin-inline-end: 10px !default; .dx-colorview-container { width: $color-view-container-width; @@ -24,18 +48,18 @@ $colorview-handle-second-side-size: 17px; white-space: normal; &.dx-colorview-label-hex { - margin: 10px 0 0 0; + margin: $color-view-label-hex-margin; } &.dx-colorview-alpha-channel-label { - margin-left: 43px; - width: 115px; + margin-left: $color-view-alpha-label-margin-inline-start; + width: $color-view-alpha-label-width; } .dx-texteditor { - width: 69px; + width: $color-view-textbox-width; float: right; - margin: 1px 1px 10px 0; + margin: $color-view-textbox-margin; } } @@ -44,7 +68,7 @@ $colorview-handle-second-side-size: 17px; margin-bottom: 0; &.dx-colorview-apply-button { - margin-right: 10px; + margin-right: $color-view-apply-button-margin-inline-end; margin-left: 0; } @@ -57,14 +81,14 @@ $colorview-handle-second-side-size: 17px; .dx-colorview-container-row { overflow: hidden; - padding: 1px 0; + padding: 1px 0; // dx-line-width: room for the 1px hairline ring the cells inside carry, which overflow: hidden would clip &:first-child { margin-top: 0; } &.dx-colorview-alpha-channel-row { - margin-top: 10px; + margin-top: $color-view-alpha-row-margin-block-start; } } @@ -93,13 +117,13 @@ $colorview-handle-second-side-size: 17px; width: $colorview-handle-first-side-size; height: $colorview-handle-second-side-size; top: 0; - left: -7px; + left: -7px; // dx-px-nudge: centres the handle across the hue scale, counting its own border } .dx-colorview-alpha-channel-handle { width: $colorview-handle-second-side-size; height: $colorview-handle-first-side-size; - top: -6px; + top: -6px; // dx-px-nudge: centres the handle across the alpha scale, counting its own border left: 0; } @@ -117,12 +141,12 @@ $colorview-handle-second-side-size: 17px; .dx-colorview-alpha-channel-wrapper, .dx-colorbox-input-container::after { background-image: linear-gradient(45deg, $colorview-transparent-background-color 25%, transparent 25%, transparent 74%, $colorview-transparent-background-color 75%, $colorview-transparent-background-color), linear-gradient(45deg, $colorview-transparent-background-color 25%, transparent 25%, transparent 74%, $colorview-transparent-background-color 75%, $colorview-transparent-background-color); - background-size: 16px 16px; - background-position: 0 0, 8px 8px; + background-size: 16px 16px; // dx-fixed-size: tile of the transparency checkerboard, drawn by two offset gradients + background-position: 0 0, 8px 8px; // dx-fixed-size: half the tile, which is what makes the two gradients read as a checkerboard } .dx-colorview-alpha-channel-wrapper { - background-position: 0 6px, 8px 14px; + background-position: 0 6px, 8px 14px; // dx-fixed-size: the same checkerboard, shifted to sit inside the alpha scale } .dx-colorbox-input-container { @@ -159,37 +183,37 @@ $colorview-handle-second-side-size: 17px; .dx-colorview-alpha-channel-scale { width: $color-view-palette-width; - height: 20px; + height: $color-view-alpha-scale-height; position: relative; } .dx-colorview-hue-scale-cell { - margin-left: 19px; + margin-left: $color-view-hue-scale-cell-margin-inline-start; position: relative; } .dx-colorview-hue-scale-wrapper { - height: $color-view-hue-scale-height + 2; + height: $color-view-hue-scale-wrapper-height; } .dx-colorview-controls-container { position: relative; - width: 90px; - margin-left: 27px; + width: $color-view-controls-width; + margin-left: $color-view-controls-margin-inline-start; } .dx-colorview-color-preview { - width: 86px; - height: 40px; + width: $color-view-color-preview-width; + height: $color-view-color-preview-height; } .dx-colorview-alpha-channel-cell { - margin: 6px 0; + margin: $color-view-alpha-cell-margin-block 0; position: relative; - width: $color-view-alpha-width; + width: $color-view-alpha-cell-width; .dx-button { - width: 90px; + width: $color-view-controls-width; } } @@ -201,14 +225,14 @@ $colorview-handle-second-side-size: 17px; } .dx-colorview-hue-scale-cell { - margin-right: 19px; + margin-right: $color-view-hue-scale-cell-margin-inline-start; margin-left: 0; } .dx-colorview-container { label { &.dx-colorview-alpha-channel-label { - margin-right: 41px; + margin-right: $color-view-alpha-label-margin-inline-start-rtl; margin-left: 0; } @@ -219,7 +243,7 @@ $colorview-handle-second-side-size: 17px; } .dx-colorview-controls-container { - margin-right: 25px; + margin-right: $color-view-controls-margin-inline-start-rtl; margin-left: 0; } diff --git a/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss index 3c01a4e7d145..632c56c5c286 100644 --- a/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss @@ -1,18 +1,18 @@ @mixin dx-base-colorview-styles($handle-color, $handle-border-color) { .dx-colorview-palette-handle { - background: radial-gradient(transparent 5px, $handle-border-color 6px, $handle-color 7px, $handle-color 12px, $handle-border-color 13px); - box-shadow: 0 1px 1px 0 $handle-border-color; + background: radial-gradient(transparent 5px, $handle-border-color 6px, $handle-color 7px, $handle-color 12px, $handle-border-color 13px); // dx-fixed-size: the handle is drawn, not laid out — a transparent core to 5px, a 1px ring at 6px, fill to 12px and a 1px ring at 13px, inside the 28px diameter + box-shadow: 0 1px 1px 0 $handle-border-color; // dx-shadow-geometry: lifts the round handle off the palette } .dx-colorview-hue-scale-handle { - border: 1px solid; + border: 1px solid; // dx-line-width: hairline outline of the handle border-color: $handle-border-color; - box-shadow: inset -5px 0 0 3px $handle-color, inset 5px 0 0 3px $handle-color, inset -6px 0 1px 4px $handle-border-color, inset 6px 0 1px 4px $handle-border-color; + box-shadow: inset -5px 0 0 3px $handle-color, inset 5px 0 0 3px $handle-color, inset -6px 0 1px 4px $handle-border-color, inset 6px 0 1px 4px $handle-border-color; // dx-shadow-geometry: the grip is drawn entirely with inset shadows — 5px bars inset from both sides, each edged by a 1px ring at 6px } .dx-colorview-alpha-channel-handle { - border: 1px solid; + border: 1px solid; // dx-line-width: hairline outline of the handle border-color: $handle-border-color; - box-shadow: inset 0 -5px 0 3px $handle-color, inset 0 5px 0 3px $handle-color, inset 0 -6px 1px 4px $handle-border-color, inset 0 6px 1px 4px $handle-border-color; + box-shadow: inset 0 -5px 0 3px $handle-color, inset 0 5px 0 3px $handle-color, inset 0 -6px 1px 4px $handle-border-color, inset 0 6px 1px 4px $handle-border-color; // dx-shadow-geometry: the same grip turned 90deg for the horizontal scale } } diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss index 95bed6c44221..2b465f04a229 100644 --- a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss @@ -143,7 +143,7 @@ $datagrid-button-margin-right: 10px !default; .dx-header-filter:focus { outline: $datagrid-header-filter-outline; outline-color: $datagrid-focused-border-color; - outline-offset: -2px; + outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots } .dx-header-filter:focus { @@ -179,7 +179,7 @@ $datagrid-button-margin-right: 10px !default; &.dx-filter-menu { .dx-menu-item-content .dx-icon { - @include dx-icon-sizing(14px); + @include dx-icon-sizing(14px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots } } @@ -298,7 +298,7 @@ $datagrid-button-margin-right: 10px !default; cursor: pointer; @include dx-icon(more); - @include dx-icon-sizing(21px); + @include dx-icon-sizing(21px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots } .dx-datagrid-edit-popup .dx-error-message { @@ -362,7 +362,7 @@ $datagrid-button-margin-right: 10px !default; right: 0; outline: $datagrid-header-filter-outline; outline-color: $datagrid-focused-border-color; - outline-offset: -1px; + outline-offset: -1px; // dx-px-nudge: a one-pixel inset for the sticky-column overlay z-index: 4; // should overlap sticky column cells pointer-events: none; background-color: transparent; diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss index b559941f515e..ff5edc87dff5 100644 --- a/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss +++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss @@ -280,7 +280,7 @@ $datagrid-cell-focus-outline: null !default; .dx-datagrid .dx-datagrid-headers.dx-state-focused .dx-header-row td:focus { outline: $datagrid-cell-focus-outline; outline-color: $datagrid-focused-border-color; - outline-offset: -2px; + outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots } // #endregion diff --git a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss index 4342141c37d4..0e5130a81f5a 100644 --- a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss @@ -1,3 +1,5 @@ +@use "sass:math"; +@use "sass:meta"; @use "../mixins" as *; // Design sizing values (parametrizable; fluent-next injects tokens) @@ -15,7 +17,8 @@ $diagram-context-toolbox-target-height: 1px !default; $diagram-popup-title-toolbar-bg: rgba(0, 0, 0, 0.05) !default; -$transparent-border: 1px solid transparent; +$diagram-border-width: 1px !default; +$transparent-border: $diagram-border-width solid transparent; $diagram-toolbox-input-font-size: 0.9em !default; // dx-relative .dx-diagram { @@ -172,7 +175,7 @@ $diagram-toolbox-input-font-size: 0.9em !default; // dx-relative } &.dx-diagram-mobile-popup { - width: calc(100% - 2px) !important; // stylelint-disable-line declaration-no-important + width: calc(100% - 2px) !important; // stylelint-disable-line declaration-no-important -- dx-px-nudge: 2px shaved off a full-width popup .dx-popup-title { border: 0; @@ -321,8 +324,16 @@ $diagram-toolbox-input-font-size: 0.9em !default; // dx-relative .dx-diagram-loading-indicator { position: absolute; - top: calc(50% - 32px); - left: calc(50% - 32px); + top: if( + meta.type-of($diagram-loading-indicator-height) == number, + calc(50% - #{math.div($diagram-loading-indicator-height, 2)}), + calc(50% - #{$diagram-loading-indicator-height} / 2) + ); + left: if( + meta.type-of($diagram-loading-indicator-width) == number, + calc(50% - #{math.div($diagram-loading-indicator-width, 2)}), + calc(50% - #{$diagram-loading-indicator-width} / 2) + ); width: $diagram-loading-indicator-width; height: $diagram-loading-indicator-height; } diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss index c5386d732acb..846174c0330a 100644 --- a/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss @@ -1,6 +1,7 @@ @mixin dx-dropdownbutton( $dropdownbutton-icon-spindown-size, $dropdownbutton-action-horizontal-padding, + $dropdownbutton-icon-right-margin-inline-start: 4px, ) { .dx-dropdownbutton-toggle { .dx-icon-spindown { @@ -19,7 +20,7 @@ &.dx-button-has-icon, &.dx-button-has-text { .dx-icon.dx-icon-right { - margin-inline-start: 4px; + margin-inline-start: $dropdownbutton-icon-right-margin-inline-start; margin-inline-end: 0; } } diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_mixins.scss index 129adac34b1d..f6ff37723dd8 100644 --- a/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_mixins.scss @@ -2,6 +2,9 @@ $accent-color, $border-radius, $section-horizontal-margin, + // The focus ring's geometry, on the same role as its colour and radius. + $outline-width: 2px, + $outline-offset: 1px, ) { .dx-dropdownmenu-popup-wrapper.dx-dropdownmenu-list-focus-mode { .dx-dropdownmenu-list { @@ -9,8 +12,8 @@ .dx-list-item[tabindex="0"]:focus-visible { position: relative; z-index: 1; - outline: 2px solid $accent-color; - outline-offset: 1px; + outline: $outline-width solid $accent-color; + outline-offset: $outline-offset; border-radius: $border-radius; } } diff --git a/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss index 7124aeb09bd5..6ebe15605fb6 100644 --- a/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss @@ -61,6 +61,10 @@ $filemanager-progress-bold-font-weight: 600 !default; $filemanager-error-message-font-size: 0.85em !default; // dx-relative $filemanager-drawer-panel-content-width: 30% !default; // dx-relative-% + +// Half the difference between the splitter border and bar, centring the wrapper on the bar. +$filemanager-splitter-wrapper-right: 3px !default; + .dx-filemanager { height: $filemanager-root-height; border: $filemanager-root-border; @@ -81,7 +85,7 @@ $filemanager-drawer-panel-content-width: 30% !default; // dx-relative-% min-width: $filemanager-overlay-content-min-width; max-width: 93vw; - @media (min-width: 431px) { + @media (min-width: 431px) { // dx-literal-required: a media condition, var() is invalid here max-width: $filemanager-overlay-content-max-width; } } @@ -210,7 +214,7 @@ $filemanager-drawer-panel-content-width: 30% !default; // dx-relative-% .dx-splitter-wrapper.dx-splitter-initial, .dx-splitter-wrapper.dx-splitter-inactive { - right: 3px; // (dx-splitter-border width - dx-splitter-bar width) / 2 + right: $filemanager-splitter-wrapper-right; } .dx-filemanager-container { @@ -296,14 +300,14 @@ $filemanager-drawer-panel-content-width: 30% !default; // dx-relative-% .dx-filemanager-notification-container { position: absolute; - top: -5000px; - left: -5000px; + top: -5000px; // dx-structural: parks the container off-screen until it is positioned + left: -5000px; // dx-structural: parks the container off-screen until it is positioned } .dx-filemanager-editing-container { position: absolute; - top: -5000px; - left: -5000px; + top: -5000px; // dx-structural: parks the container off-screen until it is positioned + left: -5000px; // dx-structural: parks the container off-screen until it is positioned } .dx-row { diff --git a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss index a95bc7402c90..8580de332cf9 100644 --- a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss +++ b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss @@ -73,8 +73,8 @@ $filterbuilder-scrollable-max-height: null !default; .dx-texteditor { vertical-align: middle; - margin-top: -7px; - margin-bottom: -4px; + margin-top: -7px; // dx-fixed-size: pulls the row onto the group line + margin-bottom: -4px; // dx-fixed-size: pulls the row onto the group line display: inline-block; } } diff --git a/packages/devextreme-scss/scss/widgets/base/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/base/gantt/_index.scss index dc4a3516af60..389a09123dbf 100644 --- a/packages/devextreme-scss/scss/widgets/base/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/gantt/_index.scss @@ -57,7 +57,7 @@ $gantt-view-min-width: 1px !default; min-width: $gantt-view-min-width; .dx-gantt-tac-hb { - margin-top: -1px; + margin-top: -1px; // dx-px-nudge: a one-pixel correction on top of the row height } .dx-scrollable-scrollbar { diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss index 8a59bf54afba..9b25a266e382 100644 --- a/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss @@ -22,7 +22,7 @@ position: fixed; left: 0; top: 0; - clip: rect(1px, 1px, 1px, 1px); + clip: rect(1px, 1px, 1px, 1px); // dx-structural: clips the a11y live region to nothing while keeping it rendered — the NOTE above; not a size clip-path: polygon(0 0); } @@ -34,7 +34,7 @@ } .dx-#{$widget-name}-important-margin { - margin-right: 5px !important; // stylelint-disable-line declaration-no-important + margin-right: 5px !important; // stylelint-disable-line declaration-no-important -- dx-fixed-size: legacy compat helper class, kept for the Foundation layout below } // for Foundation Responsive Framework @@ -52,7 +52,7 @@ } > .dx-pager { - margin-top: -1px; + margin-top: -1px; // dx-px-nudge: pulls the pager up by one border so its top edge overlaps the grid bottom edge } > .dx-#{$widget-name}-rowsview.dx-last-row-border { @@ -83,12 +83,12 @@ padding-top: 0; &:first-child { - padding-top: 1px; + padding-top: 1px; // dx-px-nudge: lifts the first submenu row off the menu border } } .dx-menu-item { - padding: 7px 30px 7px 5px; + padding: $grid-context-menu-item-padding-block $grid-context-menu-item-padding-inline-end $grid-context-menu-item-padding-block $grid-context-menu-item-padding-inline-start; .dx-menu-image { background-position-x: left; @@ -112,8 +112,8 @@ .dx-sort-index-icon { padding-right: $grid-sort-index-offset; - margin-left: -$grid-sort-index-offset; - width: $grid-sort-index-width + $grid-sort-index-offset; + margin-left: grid-negate($grid-sort-index-offset); + width: grid-sum($grid-sort-index-width, $grid-sort-index-offset); } .dx-sort, @@ -130,7 +130,7 @@ bottom: 0; left: 0; right: 0; - margin: -$grid-cell-padding; + margin: grid-negate($grid-cell-padding); } } } @@ -156,19 +156,19 @@ .dx-overlay-content { .dx-popup-title { border-bottom: none; - font-size: 16px; + font-size: $grid-column-chooser-title-font-size; .dx-toolbar-label { - font-size: 16px; + font-size: $grid-column-chooser-title-font-size; } } .dx-popup-content { - padding: 0 20px 20px 20px; + padding: $grid-column-chooser-content-padding; .dx-column-chooser-item { opacity: 0.5; - margin-bottom: 10px; + margin-bottom: $grid-column-chooser-item-margin-block-end; &.dx-#{$widget-name}-drag-action { opacity: 1; @@ -193,7 +193,7 @@ .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list { .dx-treeview-node { .dx-treeview-item { - padding-inline-start: 4px; + padding-inline-start: $grid-column-chooser-tree-view-item-padding-inline-start; } } } @@ -221,7 +221,7 @@ .dx-#{$widget-name}-columns-separator { position: absolute; z-index: 4; - width: 3px; + width: $grid-column-separator-width; } .dx-#{$widget-name}-columns-separator-transparent { @@ -304,7 +304,7 @@ border-collapse: collapse; border-spacing: 0; margin: 0; - max-width: 10px; + max-width: 10px; // dx-structural: deliberately tiny so the table sizes to its columns rather than the container — the fixed variant below resets it to none &.dx-#{$widget-name}-table-fixed { max-width: none; @@ -315,7 +315,7 @@ } &.dx-sort-index { - width: $grid-column-header-indicator-width + $grid-sort-index-width; + width: grid-sum($grid-column-header-indicator-width, $grid-sort-index-width); } } } @@ -421,9 +421,9 @@ &::after { content: ""; position: absolute; - border: 2px solid transparent; + border: 2px solid transparent; // dx-line-width: thickness of the invalid-cell ring, drawn on a pseudo-element top: 0; - left: 1px; + left: 1px; // dx-px-nudge: insets that ring by the cell border on the left bottom: 0; right: 0; pointer-events: none; @@ -471,7 +471,7 @@ .dx-#{$widget-name}-headers { position: relative; outline: 0; - min-height: 1px; + min-height: 1px; // dx-structural: one-pixel floor so the headers block keeps layout presence when it has no rows; not a designed height @include user-select(none); } @@ -500,7 +500,7 @@ .dx-sort-indicator, .dx-header-filter-indicator { - max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin)}); + max-width: grid-header-text-max-width(1, 1); &.dx-text-content-alignment-left { margin-right: $grid-text-content-margin; @@ -511,31 +511,31 @@ } &.dx-text-content-alignment-left.dx-text-content-alignment-right { - max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2)}); + max-width: grid-header-text-max-width(2, 2); } } .dx-sort-indicator.dx-header-filter-indicator { - max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin)}); + max-width: grid-header-text-max-width(2, 1); } .dx-sort-indicator.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right { - max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2)}); + max-width: grid-header-text-max-width(4, 2); } .dx-sort-indicator.dx-sort-index-indicator { - max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin + $grid-sort-index-width)}); + max-width: grid-header-text-max-width(1, 1, 1); &.dx-header-filter-indicator { - max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin + $grid-sort-index-width)}); + max-width: grid-header-text-max-width(2, 1, 1); } &.dx-text-content-alignment-left.dx-text-content-alignment-right { - max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2 + $grid-sort-index-width)}); + max-width: grid-header-text-max-width(2, 2, 1); } &.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right { - max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2 + $grid-sort-index-width)}); + max-width: grid-header-text-max-width(4, 2, 1); } } } @@ -547,17 +547,17 @@ &.dx-state-focused::after { content: " "; position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - right: -1px; + top: -1px; // dx-px-nudge: pulls the focus ring out over the cell border + bottom: -1px; // dx-px-nudge: pulls the focus ring out over the cell border + left: -1px; // dx-px-nudge: pulls the focus ring out over the cell border + right: -1px; // dx-px-nudge: pulls the focus ring out over the cell border z-index: 1; pointer-events: none; } } .dx-#{$widget-name}-filter-range-end { - border-top: 1px solid transparent; + border-top: 1px solid transparent; // dx-line-width: hairline placeholder keeping the range-end input aligned with the range-start one } .dx-editor-container { @@ -642,20 +642,20 @@ } .dx-menu-horizontal .dx-overlay-content ul .dx-menu-item { - padding: 5px; - padding-right: 30px; + padding: $grid-context-menu-overlay-item-padding; + padding-right: $grid-context-menu-overlay-item-padding-inline-end; } .dx-menu ul.dx-menu-horizontal > li > .dx-menu-item { - padding: 8px 5px 7px 5px; + padding: $grid-menu-bar-item-padding; } .dx-menu ul.dx-menu-horizontal > li > .dx-menu-item.dx-state-disabled:hover { - padding: 9px 6px 8px 6px; + padding: 9px 6px 8px 6px; // dx-px-nudge: +1px on each side of the resting padding above, compensating the border the disabled item loses on hover } .dx-menu-caption { - padding-left: 6px; + padding-left: $grid-menu-caption-padding-inline-start; } .dx-menu ul .dx-menu-item .dx-menu-chouser-down { @@ -677,7 +677,7 @@ .dx-toolbar-menu-container { .dx-button { - margin-left: 10px; + margin-left: $grid-toolbar-button-margin-inline-start; } } } @@ -692,7 +692,7 @@ .dx-#{$widget-name}-search-panel { margin: 0; - margin-left: 15px; + margin-left: $grid-search-panel-margin-inline-start; } .dx-gridbase-container > .dx-#{$widget-name}-rowsview { @@ -716,7 +716,7 @@ overflow: hidden; &.dx-empty { - height: 100px; + height: $grid-rowsview-empty-height; .dx-scrollable-content { height: 100%; @@ -817,7 +817,7 @@ .dx-#{$widget-name}-bottom-load-panel { text-align: center; - padding: 10px; + padding: $grid-bottom-load-panel-padding; } .dx-#{$widget-name}-hidden-column > * { @@ -891,7 +891,7 @@ .dx-#{$widget-name}.dx-rtl { .dx-menu-subitem { .dx-menu-item { - padding: 7px 5px 7px 30px; + padding: $grid-context-menu-item-padding-block $grid-context-menu-item-padding-inline-start $grid-context-menu-item-padding-block $grid-context-menu-item-padding-inline-end; .dx-menu-image { background-position-x: right; @@ -946,7 +946,7 @@ right: 0; left: auto; margin-left: 0; - margin-right: -2px; + margin-right: -2px; // dx-px-nudge: RTL mirror — pulls the menu out by its own border } & > td:first-child .dx-menu { @@ -954,12 +954,12 @@ } .dx-menu-horizontal .dx-overlay-content ul .dx-menu-item { - padding: 5px; - padding-left: 30px; + padding: $grid-context-menu-overlay-item-padding; + padding-left: $grid-context-menu-overlay-item-padding-inline-end; } .dx-menu-caption { - padding-right: 6px; + padding-right: $grid-menu-caption-padding-inline-start; } } @@ -973,14 +973,14 @@ .dx-toolbar-menu-container { .dx-button { margin-left: 0; - margin-right: 10px; + margin-right: $grid-toolbar-button-margin-inline-start; } } } .dx-#{$widget-name}-search-panel { margin: 0; - margin-right: 15px; + margin-right: $grid-search-panel-margin-inline-start; } } @@ -993,7 +993,7 @@ } .dx-#{$widget-name}-filter-panel { - padding: 10px; + padding: $grid-filter-panel-padding; .dx-#{$widget-name}-filter-panel-text { @include dx-overflow(); @@ -1006,12 +1006,12 @@ } .dx-#{$widget-name}-filter-panel-checkbox { - padding-right: 10px; + padding-right: $grid-filter-panel-checkbox-padding-inline-end; } .dx-icon-filter { margin: auto; - margin-right: 7px; + margin-right: $grid-filter-panel-icon-margin-inline-end; cursor: pointer; } } diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss index c1b6172d3926..efc0bc94ad13 100644 --- a/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss @@ -1,13 +1,88 @@ -$grid-cell-padding: 7px; -$grid-texteditor-input-padding: 32px; -$grid-total-footer-paddings: 7px; -$grid-command-select-column-width: 70px; -$grid-command-edit-column-width: 100px; -$grid-command-edit-column-with-icons-width: 80px; -$grid-command-expand-column-width: 30px; -$grid-command-adaptive-column-width: 36px; -$grid-column-header-indicator-width: 14px; -$grid-text-content-margin: 3px; -$grid-sort-index-width: 12px; -$grid-sort-index-offset: 3px; -$grid-ai-assistant-confirm-dialog-button-width: 50px; +@use "sass:math"; +@use "sass:meta"; + +$grid-cell-padding: 7px !default; +$grid-texteditor-input-padding: 32px !default; + +// the footer used to be written as `$x * 2`; the knob holds the padding itself now +$grid-total-footer-padding-block: 14px !default; +$grid-command-select-column-width: 70px !default; +$grid-command-edit-column-width: 100px !default; +$grid-command-edit-column-with-icons-width: 80px !default; +$grid-command-expand-column-width: 30px !default; +$grid-command-adaptive-column-width: 36px !default; +$grid-column-header-indicator-width: 14px !default; +$grid-text-content-margin: 3px !default; +$grid-sort-index-width: 12px !default; +$grid-sort-index-offset: 3px !default; +$grid-ai-assistant-confirm-dialog-button-width: 50px !default; + +// Sizes the shared layer used to pin inside rules; the theme owns them now +$grid-context-menu-item-padding-block: 7px !default; +$grid-context-menu-item-padding-inline-start: 5px !default; +$grid-context-menu-item-padding-inline-end: 30px !default; +$grid-context-menu-overlay-item-padding: 5px !default; +$grid-context-menu-overlay-item-padding-inline-end: 30px !default; +$grid-menu-bar-item-padding: 8px 5px 7px 5px !default; +$grid-menu-caption-padding-inline-start: 6px !default; +$grid-column-chooser-title-font-size: 16px !default; +$grid-column-chooser-content-padding: 0 20px 20px 20px !default; +$grid-column-chooser-item-margin-block-end: 10px !default; +$grid-column-chooser-tree-view-item-padding-inline-start: 4px !default; +$grid-column-separator-width: 3px !default; +$grid-toolbar-button-margin-inline-start: 10px !default; +$grid-search-panel-margin-inline-start: 15px !default; +$grid-rowsview-empty-height: 100px !default; +$grid-bottom-load-panel-padding: 10px !default; +$grid-filter-panel-padding: 10px !default; +$grid-filter-panel-checkbox-padding-inline-end: 10px !default; +$grid-filter-panel-icon-margin-inline-end: 7px !default; + +/* + * The four sizes above are read in arithmetic, and arithmetic is where a token cannot follow: a + * legacy theme passes numbers, which Sass folds at build time, while fluent-next passes var(), + * which Sass can neither add nor negate nor round. So every such spot goes through one of the + * three helpers below: with numbers they return exactly what the layer emitted before, with + * var() they emit the same sum as a single runtime calc(). Nothing else in the layer changes. + */ + +@function grid-negate($value) { + @if meta.type-of($value) == number { + @return -$value; + } + + @return calc(-1 * #{$value}); +} + +@function grid-sum($first, $second) { + @if meta.type-of($first) == number and meta.type-of($second) == number { + @return $first + $second; + } + + @return calc(#{$first} + #{$second}); +} + +/* + * Header text must not run under the indicator icons, so its max-width subtracts them. math.round() + * guarded against a fractional theme value; with the current numbers (14/3/12) every one of the + * eight sums is already whole, so dropping it in the var() branch subtracts the same amount. + */ +@function grid-header-text-max-width($indicators, $margins, $sort-indexes: 0) { + @if meta.type-of($grid-column-header-indicator-width) == number + and meta.type-of($grid-text-content-margin) == number + and meta.type-of($grid-sort-index-width) == number { + $sum: $grid-column-header-indicator-width * $indicators + + $grid-text-content-margin * $margins + + $grid-sort-index-width * $sort-indexes; + + @return calc(100% - #{math.round($sum)}); + } + + $sum: "#{$indicators} * #{$grid-column-header-indicator-width} + #{$margins} * #{$grid-text-content-margin}"; + + @if $sort-indexes > 0 { + $sum: "#{$sum} + #{$sort-indexes} * #{$grid-sort-index-width}"; + } + + @return calc(100% - (#{$sum})); +} diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_mixins.scss index 6e992a50baa9..956994ccc337 100644 --- a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_mixins.scss @@ -44,7 +44,7 @@ $border-color, ) { .dx-ai-chat__content .dx-chat-messagegroup-alignment-start .dx-chat-messagebubble { - border-width: 1px; + border-width: 1px; // dx-line-width: hairline border of the incoming message bubble border-style: solid; border-color: $border-color; } diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss index 03c18025cb6e..fd8c7db6b7e4 100644 --- a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss @@ -1,6 +1,6 @@ -$ai-chat-toolbar-item-spacing: 4px; -$ai-chat-message-gap: 8px; -$ai-chat-message-content-gap: 4px; -$ai-chat-message-width: 280px; -$ai-chat-message-regenerate-button-border-radius: 4px; +$ai-chat-toolbar-item-spacing: 4px !default; +$ai-chat-message-gap: 8px !default; +$ai-chat-message-content-gap: 4px !default; +$ai-chat-message-width: 280px !default; +$ai-chat-message-regenerate-button-border-radius: 4px !default; $ai-chat-action-list-item-text-max-lines: 2; diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss index 493328baff48..b08254901bff 100644 --- a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss +++ b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss @@ -247,8 +247,8 @@ // (0,3,1) .dx-#{$widget-name}-total-footer > .dx-#{$widget-name}-content .dx-row > td { - padding-top: $grid-total-footer-paddings * 2; - padding-bottom: $grid-total-footer-paddings * 2; + padding-top: $grid-total-footer-padding-block; + padding-bottom: $grid-total-footer-padding-block; } // (0,4,0) diff --git a/packages/devextreme-scss/scss/widgets/base/list/_index.scss b/packages/devextreme-scss/scss/widgets/base/list/_index.scss index 44ef994f8c3b..ddcf7c6908b3 100644 --- a/packages/devextreme-scss/scss/widgets/base/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/list/_index.scss @@ -3,7 +3,7 @@ $list-response-wait-opacity: 0.5 !default; -$list-searchbox-margin-bottom: 5px; +$list-searchbox-margin-bottom: 5px !default; // Design sizing values (parametrizable; fluent-next injects tokens) $list-item-badge-container-width: 20px !default; diff --git a/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss index d4e363f2f690..076a47c649e0 100644 --- a/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss @@ -7,7 +7,7 @@ $lookup-popup-search-list-height: 90% !default; // dx-relative-% .dx-popup-content { .dx-scrollable { - height: calc(100% - 45px); + height: calc(100% - 45px); // dx-fixed-size: the height the popup toolbar takes from the list } } diff --git a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_common.scss b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_common.scss index 66800eed5b8e..925384674a81 100644 --- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_common.scss +++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_common.scss @@ -235,7 +235,7 @@ $pivotgrid-common-field-chooser-drag-height: null !default; .dx-pivotgrid-scrollbar-measure-element { position: absolute; - top: -9999px; + top: -9999px; // dx-structural: parks the scrollbar probe off-screen width: $pivotgrid-common-field-chooser-drag-width; height: $pivotgrid-common-field-chooser-drag-height; overflow: scroll; diff --git a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss index 3af6a0e8e8af..c0d3135a601f 100644 --- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss @@ -53,15 +53,17 @@ $pivotgrid-common-field-chooser-drag-height: 100px !default; ); @use "sass:meta"; -$pivotgrid-drag-header-border: 1px solid; -$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color; -$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color; -$pivotgrid-border-width: 1px; +$pivotgrid-border-width: 1px !default; +$pivotgrid-focus-outline-width: 2px !default; +$pivotgrid-focus-outline-offset: -2px !default; +$pivotgrid-drag-header-border: $pivotgrid-border-width solid; +$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color; // dx-shadow-geometry +$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color; // dx-shadow-geometry $pivotgrid-border: $pivotgrid-border-width solid; -$pivotgrid-icon-size: 14px; -$pivotgrid-common-field-padding: 2px; +$pivotgrid-icon-size: 14px !default; +$pivotgrid-common-field-padding: 2px !default; $pivotgrid-filter-area-border-spacing: if(meta.type-of($pivotgrid-common-left-right-padding) == number and meta.type-of($pivotgrid-common-field-padding) == number, $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding, calc(#{$pivotgrid-common-left-right-padding} - #{$pivotgrid-common-field-padding})) if(meta.type-of($pivotgrid-header-top-bottom-padding) == number and meta.type-of($pivotgrid-common-field-padding) == number, $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding, calc(#{$pivotgrid-header-top-bottom-padding} - #{$pivotgrid-common-field-padding})); -$pivotgrid-expand-icon-offset: -5px; +$pivotgrid-expand-icon-offset: -5px; // dx-fixed-size: negated at its use site $pivotgrid-expand-icon-text-offset: 0; .dx-pivotgrid-fields-container { @@ -69,17 +71,17 @@ $pivotgrid-expand-icon-text-offset: 0; background-color: gray; &.dx-position-indicator-vertical { - margin-top: -4px; - margin-left: -1px; + margin-top: -4px; // dx-fixed-size: pulls the element onto the grid line + margin-left: -1px; // dx-fixed-size: pulls the element onto the grid line height: $pivotgrid-position-indicator-vertical-height; &.dx-position-indicator-last { - margin-top: -3px; + margin-top: -3px; // dx-fixed-size: pulls the element onto the grid line } } &.dx-position-indicator-horizontal { - margin-left: -3px; + margin-left: -3px; // dx-fixed-size: pulls the element onto the grid line width: $pivotgrid-position-indicator-horizontal-width; &.dx-position-indicator-last { @@ -124,9 +126,9 @@ $pivotgrid-expand-icon-text-offset: 0; } .dx-area-field:focus-visible { - outline: 2px solid; + outline: $pivotgrid-focus-outline-width solid; outline-color: $pivotgrid-accent-color; - outline-offset: -2px; + outline-offset: $pivotgrid-focus-outline-offset; } &.dx-drag { @@ -166,14 +168,14 @@ $pivotgrid-expand-icon-text-offset: 0; td:has(> .dx-expand-icon-container:focus-visible) { outline: $pivotgrid-expand-icon-container-outline; outline-color: $pivotgrid-accent-color; - outline-offset: -2px; + outline-offset: $pivotgrid-focus-outline-offset; } .dx-pivotgrid-horizontal-headers td:focus-visible, .dx-pivotgrid-vertical-headers td:focus-visible { outline: $pivotgrid-expand-icon-container-outline; outline-color: $pivotgrid-accent-color; - outline-offset: -2px; + outline-offset: $pivotgrid-focus-outline-offset; } .dx-expand-icon-container:focus-visible { @@ -181,9 +183,9 @@ $pivotgrid-expand-icon-text-offset: 0; } .dx-pivotgrid-toolbar .dx-button:focus-visible { - outline: 2px solid; + outline: $pivotgrid-focus-outline-width solid; outline-color: $pivotgrid-accent-color; - outline-offset: -2px; + outline-offset: $pivotgrid-focus-outline-offset; } .dx-column-header, @@ -328,7 +330,7 @@ $pivotgrid-expand-icon-text-offset: 0; width: $pivotgrid-position-indicator-horizontal-width; top: 50%; height: $pivotgrid-position-indicator-vertical-height; - margin-top: -1px; + margin-top: -1px; // dx-fixed-size: pulls the element onto the grid line background-color: $pivotgrid-border-color; &.dx-group-connector-prev { @@ -599,7 +601,7 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-pivotgrid-fields-container { .dx-position-indicator { &.dx-position-indicator-horizontal { - margin-left: -3px; + margin-left: -3px; // dx-fixed-size: pulls the element onto the grid line &.dx-position-indicator-last { margin-left: $pivotgrid-position-indicator-last-margin-left-rtl; diff --git a/packages/devextreme-scss/scss/widgets/base/popover/_index.scss b/packages/devextreme-scss/scss/widgets/base/popover/_index.scss index d9a22934371f..04e6119f6a7d 100644 --- a/packages/devextreme-scss/scss/widgets/base/popover/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/popover/_index.scss @@ -1,5 +1,5 @@ @use "./mixins" as *; -@include dx-popover-arrow-size(20px); +@include dx-popover-arrow-size(20px); // dx-fixed-size: the arrow width; the mixin divides it by sqrt(2), so a var() cannot pass .dx-popover-arrow { position: absolute; diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss index 79c7cda6d069..80ff146f7c18 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss @@ -1,8 +1,8 @@ @use "sass:math"; @use "../../base/mixins" as *; -$scheduler-appointment-collector-margin: 3px; -$scheduler-appointment-collector-height: 22px; +$scheduler-appointment-collector-margin: 3px; // dx-fixed-size: the collector margin, multiplied elsewhere so a var() cannot pass +$scheduler-appointment-collector-height: 22px !default; $scheduler-common-collector-margin: null !default; $scheduler-common-collector-size: null !default; @@ -72,7 +72,7 @@ $scheduler-common-collector-size: null !default; } .dx-scheduler-adaptive { - @media (max-width: 450px) { + @media (max-width: 450px) { // dx-literal-required: a media condition, var() is invalid here .dx-scheduler-view-switcher-label { display: none; } diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss index 164c54bf4b89..2ff440da9b89 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss @@ -1,3 +1,4 @@ +$scheduler-appointment-collector-height: 22px !default; $scheduler-appointment-base-color: null !default; $scheduler-appointment-start-color: null !default; $scheduler-appointment-active-color: null !default; @@ -50,6 +51,7 @@ $scheduler-common-collector-size: 28px !default; @use "./common" with ( $scheduler-common-collector-margin: $scheduler-common-collector-margin, $scheduler-common-collector-size: $scheduler-common-collector-size, + $scheduler-appointment-collector-height: $scheduler-appointment-collector-height, ); $scheduler-tooltip-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15) !default; @@ -79,52 +81,58 @@ $scheduler-appointment-content-details-font-size: 11px !default; $scheduler-tooltip-date-font-size: $scheduler-tooltip-date-font-size ); -$scheduler-appointment-min-size: 4px; -$scheduler-appointment-content-padding: 5px 7px; -$scheduler-appointment-reduced-content-padding: 40px; +$scheduler-appointment-min-size: 4px !default; +$scheduler-appointment-content-padding: 5px 7px !default; +$scheduler-appointment-reduced-content-padding: 40px !default; -$scheduler-hovered-appointment-top-shadow-size: 5px; -$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color; +$scheduler-hovered-appointment-top-shadow-size: 5px; // dx-fixed-size: negated and composed into shadows, so a var() cannot pass +$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color; // dx-shadow-geometry -$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color; +$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry $scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color; -$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color; -$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow; +$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry +$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow; // dx-shadow-geometry $scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2) !default; -$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color; -$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color; +$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry +$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry $scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color; $scheduler-horizontal-appointment-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color; -$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color; -$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color; -$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow; +$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry +$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry +$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow; // dx-shadow-geometry -$scheduler-grouped-appointment-month-text-size: 12px; +$scheduler-grouped-appointment-month-text-size: 12px !default; -$scheduler-base-border: 1px solid; -$scheduler-transparent-top-border: 1px solid transparent; -$scheduler-accent-border: 1px solid; +$scheduler-border-width: 1px !default; +$scheduler-workspace-info-font-size: 20px !default; +$scheduler-small-font-size: 14px !default; +$scheduler-group-header-table-cell-height: 30px !default; +$scheduler-month-date-text-size: 16px !default; +$scheduler-month-date-text-padding: 6px !default; +$scheduler-base-border: $scheduler-border-width solid; +$scheduler-transparent-top-border: $scheduler-border-width solid transparent; +$scheduler-accent-border: $scheduler-border-width solid; -$scheduler-reduced-icon-offset: 5px; -$scheduler-recurrence-icon-offset: 20px; +$scheduler-reduced-icon-offset: 5px !default; +$scheduler-recurrence-icon-offset: 20px !default; -$scheduler-agenda-appointment-margin: 5px; -$scheduler-agenda-last-in-date-appointment-margin: 20px; +$scheduler-agenda-appointment-margin: 5px !default; +$scheduler-agenda-last-in-date-appointment-margin: 20px !default; $scheduler-small-size-factor: 0.5; $scheduler-small-size-element-offset: $scheduler-left-column-width * $scheduler-small-size-factor; -$scheduler-time-indicator-font-size: 30px; -$scheduler-time-indicator-size: 1px; -$scheduler-time-indicator-top: 14px; -$scheduler-time-indicator-left: 12px; +$scheduler-time-indicator-font-size: 30px !default; +$scheduler-time-indicator-size: 1px !default; +$scheduler-time-indicator-top: 14px; // dx-fixed-size: negated at its use site +$scheduler-time-indicator-left: 12px; // dx-fixed-size: negated at its use site $scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1) !default; -$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color; -$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0; +$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color; // dx-shadow-geometry +$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0; // dx-shadow-geometry $scheduler-appointment-icon-font-size: 18px !default; $scheduler-appointment-date-opacity: 0.7 !default; @@ -212,6 +220,11 @@ $scheduler-agenda-date-table-padding-top: 10px !default; $scheduler-renovation-virtual-row-height: 50px !default; @use "./views" with ( + $scheduler-workspace-info-font-size: $scheduler-workspace-info-font-size, + $scheduler-small-font-size: $scheduler-small-font-size, + $scheduler-group-header-table-cell-height: $scheduler-group-header-table-cell-height, + $scheduler-month-date-text-size: $scheduler-month-date-text-size, + $scheduler-month-date-text-padding: $scheduler-month-date-text-padding, $scheduler-timeline-min-height: $scheduler-timeline-min-height, $scheduler-timeline-group-two-empty-cell-width: $scheduler-timeline-group-two-empty-cell-width, $scheduler-timeline-group-header-width: $scheduler-timeline-group-header-width, @@ -449,7 +462,7 @@ $scheduler-appointment-content-padding-right: 5px !default; right: 0; /* NOTE: Cell has 1px table cell () border, so -1px bottom is ok here. */ - bottom: -1px; + bottom: -1px; // dx-px-nudge: sits on the 1px border, see the note above height: $scheduler-header-panel-current-time-cell-height; background-color: $scheduler-time-indicator-color; } diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss index 16494c6d774f..d9576dcd663f 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss @@ -144,7 +144,7 @@ $appointment-reduced-icon-rtl-left: null !default; } .dx-resizable-handle-left { - left: -1px; + left: -1px; // dx-px-nudge: pulls the resize handle onto the appointment's 1px border } .dx-scheduler-appointment-recurrence-icon { diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss index f58cba3e9c35..32ab0190d027 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss @@ -6,7 +6,7 @@ $arrow-down: "\f016"; ) { border: $border; border-color: $border-color; - margin-bottom: -1px; + margin-bottom: -1px; // dx-px-nudge: collapses the header border with the row below position: relative; z-index: 1; width: 100%; diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss index 2e791cd03b8f..ee7d6d730edc 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss @@ -41,24 +41,24 @@ $scheduler-views-time-indicator-width: 10% !default; // dx-relative-% $scheduler-views-group-header-content-height: null !default; $scheduler-views-vertical-group-min-height: null !default; -$scheduler-timepanel-cell-offset: 20px; -$scheduler-workspace-info-font-size: 20px; -$scheduler-small-font-size: 14px; +$scheduler-timepanel-cell-offset: 20px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass +$scheduler-workspace-info-font-size: 20px !default; +$scheduler-small-font-size: 14px !default; -$scheduler-current-time-cell-border-size: 2px; +$scheduler-current-time-cell-border-size: 2px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass -$scheduler-workspace-date-table-cell-height: 50px; +$scheduler-workspace-date-table-cell-height: 50px; // dx-fixed-size: four derived heights multiply it, so a var() cannot pass $scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5; $scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5; $scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height; -$scheduler-header-panel-table-cell-height: if(meta.type-of($scheduler-workspace-date-table-cell-height) == number, $scheduler-workspace-date-table-cell-height - 10px, calc(#{$scheduler-workspace-date-table-cell-height} - 10px)); -$scheduler-group-header-table-cell-height: 30px; +$scheduler-header-panel-table-cell-height: if(meta.type-of($scheduler-workspace-date-table-cell-height) == number, $scheduler-workspace-date-table-cell-height - 10px, calc(#{$scheduler-workspace-date-table-cell-height} - 10px)); // dx-px-nudge: -10px under the workspace cell height +$scheduler-group-header-table-cell-height: 30px !default; -$scheduler-group-header-table-cell-width: 80px; +$scheduler-group-header-table-cell-width: 80px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass -$scheduler-month-date-text-size: 16px; +$scheduler-month-date-text-size: 16px !default; -$scheduler-month-date-text-padding: 6px; +$scheduler-month-date-text-padding: 6px !default; @use "./day" with ( $scheduler-base-border: $scheduler-base-border, @@ -118,7 +118,7 @@ $scheduler-renovation-virtual-row-height: 50px !default; &::before { position: absolute; - top: if(meta.type-of($scheduler-header-panel-table-cell-height) == number and meta.type-of($scheduler-current-time-cell-border-size) == number, $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1, calc(#{$scheduler-header-panel-table-cell-height} - #{$scheduler-current-time-cell-border-size} - 1px)); + top: if(meta.type-of($scheduler-header-panel-table-cell-height) == number and meta.type-of($scheduler-current-time-cell-border-size) == number, $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1, calc(#{$scheduler-header-panel-table-cell-height} - #{$scheduler-current-time-cell-border-size} - 1px)); // dx-px-nudge: -1px under the derived top offset, so the indicator overlaps the border right: 0; width: 100%; height: $scheduler-current-time-cell-border-size; @@ -402,7 +402,7 @@ $scheduler-renovation-virtual-row-height: 50px !default; @include flex-container(row, nowrap); flex: 0 0 auto; - padding: 0 5px; + padding: 0 5px; // dx-fixed-size: horizontal padding of the time panel cell height: 100%; width: $scheduler-left-column-width; justify-content: flex-start; @@ -694,7 +694,7 @@ $scheduler-renovation-virtual-row-height: 50px !default; border-bottom: $scheduler-views-time-panel-border-bottom; > div { - margin-top: -13px; + margin-top: -13px; // dx-px-nudge: lifts the hour label to straddle the cell border } .dx-scheduler-small & { @@ -704,7 +704,7 @@ $scheduler-renovation-virtual-row-height: 50px !default; &::after { position: absolute; - bottom: -1px; + bottom: -1px; // dx-px-nudge: sits the time indicator on the cell border width: $scheduler-views-time-indicator-width; height: $scheduler-views-time-indicator-height; right: 0; @@ -841,7 +841,7 @@ $scheduler-renovation-virtual-row-height: 50px !default; &.dx-scheduler-work-space-work-week { .dx-scheduler-all-day-title { top: 0; - height: 50px !important; // stylelint-disable-line declaration-no-important + height: $scheduler-workspace-date-table-cell-height !important; // stylelint-disable-line declaration-no-important border-bottom: none; } } @@ -852,7 +852,7 @@ $scheduler-renovation-virtual-row-height: 50px !default; } .dx-scheduler-all-day-table-row { - height: 50px; + height: $scheduler-workspace-date-table-cell-height; } .dx-scheduler-time-panel-cell { @@ -867,7 +867,7 @@ $scheduler-renovation-virtual-row-height: 50px !default; &.dx-scheduler-last-group-cell { border-bottom: none; - box-shadow: inset 0 -1px 0 $scheduler-base-border-color; + box-shadow: inset 0 -1px 0 $scheduler-base-border-color; // dx-line-width: hairline standing in for the removed border-bottom } } diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss index 4d1205c67e90..7322fcc918ac 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss @@ -42,7 +42,7 @@ $scheduler-base-border-color: null !default; &:not(.dx-scheduler-work-space-grouped) { .dx-scheduler-header-panel { - margin-top: 1px; + margin-top: 1px; // dx-px-nudge: keeps the ungrouped header panel off the border above } } diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/month/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/month/_index.scss index f19bd0a0e64a..d08189bb53ff 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/month/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/month/_index.scss @@ -70,7 +70,7 @@ $scheduler-first-month-cell-background-color: null !default; } .dx-scheduler-group-header { - box-shadow: 0 -2px 0 $scheduler-base-border-color; + box-shadow: 0 -2px 0 $scheduler-base-border-color; // dx-line-width: 2px line standing in for the removed border-bottom border-bottom: none; } diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss index a45158ca3d98..dffb3a8ba2a6 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss @@ -185,7 +185,7 @@ $scheduler-timeline-cell-width: null !default; } .dx-scheduler-header-panel-empty-cell { - border-bottom: 1px solid; + border-bottom: 1px solid; // dx-line-width: hairline under the empty header cell border-bottom-color: $scheduler-accent-border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_index.scss b/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_index.scss index 954bc2b67f4b..39b3e48ddf4e 100644 --- a/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_index.scss @@ -17,7 +17,7 @@ transition-timing-function: ease-in-out; border-style: solid; border-radius: 999em; - border-width: 1px; + border-width: 1px; // dx-line-width: hairline, the same in every theme } .dx-step-content { diff --git a/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss index f5c4a4aa01a3..8e1ca96e4bc3 100644 --- a/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss @@ -68,11 +68,20 @@ $disabled-text-color, $disabled-bg, $disabled-shadow, + /* + * The indicator is a dot on top of the connector line. Three box-shadow rings shape it, from the + * inside out: the selection ring starts at $indicator-ring-inset and ends at $indicator-ring-size, + * and $indicator-halo-size is the gap the indicator punches in the connector behind it. The + * defaults are the values every theme drew before the sizes were opened. + */ + $indicator-ring-inset: 2px, + $indicator-ring-size: 4px, + $indicator-halo-size: 8px, ) { .dx-step-indicator { background-color: $base-bg; border-color: $base-border-color; - box-shadow: 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-halo-size $shadow-color; color: $base-text-color; } @@ -108,7 +117,7 @@ color: $selected-text-color; border-color: $selected-bg; background-color: $selected-bg; - box-shadow: 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-halo-size $shadow-color; } .dx-step-caption { @@ -119,7 +128,7 @@ .dx-step-indicator { border-color: $selected-invalid-bg; background-color: $selected-invalid-bg; - box-shadow: 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-halo-size $shadow-color; } .dx-step-caption { @@ -138,7 +147,7 @@ color: $selected-text-color; border-color: $selected-bg; background-color: $selected-bg; - box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-bg, 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-bg, 0 0 0 $indicator-halo-size $shadow-color; } .dx-step-caption { @@ -149,7 +158,7 @@ .dx-step-indicator { border-color: $selected-invalid-bg; background-color: $selected-invalid-bg; - box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-invalid-bg, 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-invalid-bg, 0 0 0 $indicator-halo-size $shadow-color; } .dx-step-caption { @@ -192,7 +201,7 @@ &.dx-state-focused { .dx-step-indicator { - box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-bg, 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-bg, 0 0 0 $indicator-halo-size $shadow-color; } &.dx-step-completed { @@ -206,19 +215,19 @@ .dx-step-indicator { border-color: $selected-hover-bg; background-color: $selected-hover-bg; - box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-hover-bg, 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-hover-bg, 0 0 0 $indicator-halo-size $shadow-color; } } &.dx-state-hover { .dx-step-indicator { - box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-hover-bg, 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-hover-bg, 0 0 0 $indicator-halo-size $shadow-color; } } &.dx-step-invalid { .dx-step-indicator { - box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-invalid-bg, 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-invalid-bg, 0 0 0 $indicator-halo-size $shadow-color; } &.dx-step-completed { @@ -232,25 +241,25 @@ .dx-step-indicator { border-color: $selected-invalid-hover-bg; background-color: $selected-invalid-hover-bg; - box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-invalid-hover-bg, 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-invalid-hover-bg, 0 0 0 $indicator-halo-size $shadow-color; } } &.dx-state-hover { .dx-step-indicator { - box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-invalid-hover-bg, 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-invalid-hover-bg, 0 0 0 $indicator-halo-size $shadow-color; } } } &.dx-state-disabled { .dx-step-indicator { - box-shadow: 0 0 0 2px $disabled-shadow, 0 0 0 4px $selected-bg, 0 0 0 8px $disabled-shadow; + box-shadow: 0 0 0 $indicator-ring-inset $disabled-shadow, 0 0 0 $indicator-ring-size $selected-bg, 0 0 0 $indicator-halo-size $disabled-shadow; } &.dx-step-invalid { .dx-step-indicator { - box-shadow: 0 0 0 2px $disabled-shadow, 0 0 0 4px $selected-invalid-bg, 0 0 0 8px $disabled-shadow; + box-shadow: 0 0 0 $indicator-ring-inset $disabled-shadow, 0 0 0 $indicator-ring-size $selected-invalid-bg, 0 0 0 $indicator-halo-size $disabled-shadow; } } } @@ -309,17 +318,17 @@ &.dx-state-focused { .dx-step-selected { .dx-step-indicator { - box-shadow: 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-halo-size $shadow-color; } &.dx-state-focused { .dx-step-indicator { - box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-hover-bg, 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-hover-bg, 0 0 0 $indicator-halo-size $shadow-color; } &.dx-step-invalid { .dx-step-indicator { - box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-invalid-hover-bg, 0 0 0 8px $shadow-color; + box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-invalid-hover-bg, 0 0 0 $indicator-halo-size $shadow-color; } } } diff --git a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss index 9dd9ac763250..0a9ccd127f47 100644 --- a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss @@ -12,6 +12,11 @@ $switch-handle-margin, $switch-handle-border-radius, $switch-transition, + // A pill: any radius past half the track height draws the same shape, so the default is a number + // large enough to be one at every size the themes use. + $switch-container-border-radius: 500px, + $switch-label-padding: 4px 0, + $switch-off-padding-bottom: 10px, ) { .dx-switch { width: $switch-width; @@ -42,7 +47,7 @@ content: ""; width: 100%; height: $switch-container-height; - border-radius: 500px; + border-radius: $switch-container-border-radius; margin: $switch-container-vertical-margin 0; transition: $switch-transition; } @@ -57,7 +62,7 @@ .dx-switch-off { flex-shrink: 0; float: left; - padding: 4px 0; + padding: $switch-label-padding; width: 50%; height: $switch-height; color: transparent; @@ -71,7 +76,7 @@ .dx-switch-off { display: none; - padding-bottom: 10px; + padding-bottom: $switch-off-padding-bottom; background-color: transparent; } diff --git a/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss index 24aa9039f2e1..06fd678b76ea 100644 --- a/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss @@ -50,7 +50,7 @@ $texteditor-input-top-padding ) { .dx-label { - padding: 0 2px; + padding: 0 2px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes border-top-width: $borderWidth; span { @@ -157,24 +157,48 @@ $label-margin-top-diff, $texteditor-label-outside-font-size, $texteditor-label-outside-height, + // The label widens itself by its padding and pulls the same amount back, so the box grows around + // the text without moving it: the margin is derived, not a second decision. + $label-padding-inline: 2px, + $label-border-radius: 1px, + $label-backdrop-height: 3px, ) { + $label-margin-inline: if( + meta.type-of($label-padding-inline) == number, + -$label-padding-inline, + calc(-1 * #{$label-padding-inline}) + ); + .dx-editor-outlined { .dx-texteditor-label { inset: 0; } .dx-label { - padding: 0 2px; + padding: 0 $label-padding-inline; border-top-width: 0; border-bottom-width: $label-border-width; border-inline-width: 0; border-style: solid; border-top-color: $texteditor-border-color; border-bottom-color: $texteditor-border-bottom-color; - margin-left: -2px; - margin-right: -2px; - border-radius: 1px; - clip-path: inset(-$texteditor-label-font-size 1px -1px 1px); + margin-left: $label-margin-inline; + margin-right: $label-margin-inline; + border-radius: $label-border-radius; + + /* + * The clip reaches a whole font-size above the label to uncover the notch. A theme that feeds + * a var() here leaves nothing for Sass to negate, and `-var(…)` is not valid CSS: the browser + * drops the whole declaration and the notch stops being clipped. Same guard as the transform + * below, which had it from the start. + * + * dx-line-width: the notch is carved at the label border, a hairline that must not thicken. + */ + clip-path: inset(#{if( + meta.type-of($texteditor-label-font-size) == number, + -$texteditor-label-font-size, + calc(-1 * #{$texteditor-label-font-size}) + )} 1px -1px 1px); span { position: relative; @@ -198,7 +222,7 @@ border-start-start-radius: $texteditor-input-border-radius; border-end-start-radius: $texteditor-input-border-radius; min-width: $label-before-min-width; - clip-path: inset(-1px 1px -1px -1px); + clip-path: inset(-1px 1px -1px -1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale } .dx-label-after { @@ -213,16 +237,16 @@ border-inline-end-color: $texteditor-border-color; border-start-end-radius: $texteditor-input-border-radius; border-end-end-radius: $texteditor-input-border-radius; - clip-path: inset(-1px -1px -1px 1px); + clip-path: inset(-1px -1px -1px 1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale } &.dx-rtl { .dx-label-before { - clip-path: inset(-1px -1px -1px 1px); + clip-path: inset(-1px -1px -1px 1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale } .dx-label-after { - clip-path: inset(-1px 1px -1px -1px); + clip-path: inset(-1px 1px -1px -1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale } } @@ -236,9 +260,9 @@ content: ""; width: 100%; position: absolute; - height: 3px; + height: $label-backdrop-height; top: if(meta.type-of($label-backdrop-offset-y) == number, -$label-backdrop-offset-y, calc(-1 * #{$label-backdrop-offset-y})); - margin-inline-start: -2px; + margin-inline-start: $label-margin-inline; background-color: $label-backdrop-bg; } } @@ -300,8 +324,8 @@ clip-path: none; border-top-width: $label-border-width; border-radius: 0; - border-start-end-radius: 1px; - border-end-end-radius: 1px; + border-start-end-radius: $label-border-radius; + border-end-end-radius: $label-border-radius; margin-inline-start: 0; padding: 0; @@ -626,8 +650,8 @@ ) { .dx-texteditor-buttons-container { > .dx-button { - margin-top: 1px; - margin-bottom: 1px; + margin-top: 1px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes + margin-bottom: 1px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes margin-inline-start: $generic-texteditor-custom-button-margin; margin-inline-end: $generic-texteditor-custom-button-margin; @@ -689,6 +713,11 @@ $material-filled-texteditor-spin-button-horizontal-padding, $last-button-horizontal-padding, $material-button-vertical-padding, + $button-margin-block-start: 1px, + $button-margin-block-end: 3px, + $button-icon-margin-block-start: 1px, + $button-icon-margin-block-start-with-text: 3px, + $button-icononly-padding: 2px, ) { .dx-texteditor { .dx-texteditor-buttons-container { @@ -746,25 +775,25 @@ .dx-texteditor-buttons-container { > .dx-button.dx-button-mode-text { height: $material-underlined-editor-button-height; - margin-top: 1px; - margin-bottom: 3px; + margin-top: $button-margin-block-start; + margin-bottom: $button-margin-block-end; margin-inline-end: $material-editor-custom-button-margin; margin-inline-start: $material-editor-custom-button-margin; .dx-button-content { display: flex; justify-content: center; - padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); + padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); // dx-px-nudge: -1px under the button's own padding .dx-icon { align-self: center; - margin-top: 1px; + margin-top: $button-icon-margin-block-start; } } &.dx-button-has-text { .dx-button-content .dx-icon { - margin-top: 3px; + margin-top: $button-icon-margin-block-start-with-text; } } @@ -772,7 +801,7 @@ min-width: $material-underlined-editor-button-height; .dx-button-content { - padding: 2px; + padding: $button-icononly-padding; } } } @@ -800,25 +829,25 @@ .dx-texteditor-buttons-container { > .dx-button.dx-button-mode-text { height: $material-underlined-editor-button-height; - margin-top: 1px; - margin-bottom: 3px; + margin-top: $button-margin-block-start; + margin-bottom: $button-margin-block-end; margin-inline-end: $material-editor-custom-button-margin; margin-inline-start: $material-editor-custom-button-margin; .dx-button-content { display: flex; justify-content: center; - padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); + padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); // dx-px-nudge: -1px under the button's own padding .dx-icon { align-self: center; - margin-top: 1px; + margin-top: $button-icon-margin-block-start; } } &.dx-button-has-text { .dx-button-content .dx-icon { - margin-top: 3px; + margin-top: $button-icon-margin-block-start-with-text; } } @@ -826,7 +855,7 @@ min-width: $material-underlined-editor-button-height; .dx-button-content { - padding: 2px; + padding: $button-icononly-padding; } } } diff --git a/packages/devextreme-scss/scss/widgets/base/timeView/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/timeView/_mixins.scss index 3f220dee2ca5..5312c83fe28d 100644 --- a/packages/devextreme-scss/scss/widgets/base/timeView/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/timeView/_mixins.scss @@ -1,3 +1,5 @@ +@use "sass:math"; +@use "sass:meta"; @use "sass:string"; @use "../string" as *; @@ -9,12 +11,23 @@ background-image: string.unquote($uri); } -@mixin clock-action-icons-mixin($accent-color, $background-color, $digit-color) { +@mixin clock-action-icons-mixin( + $accent-color, + $background-color, + $digit-color, + // The clock face is the SVG behind it, so its size scales the whole dial; the arrows are centred + // on the dial with half their own width, which is why the offset is a knob of its own. + $clock-size: 182px, + $arrow-width: 10px, + $arrow-offset: if( + meta.type-of($arrow-width) == number, + math.div(-$arrow-width, 2), + calc(#{$arrow-width} / -2) + ), +) { .dx-timeview-clock { @include clock-colored-image(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/timeView/clock-bg.svg"), $accent-color, $background-color, $digit-color); - $clock-size: 182px; - min-width: $clock-size; min-height: $clock-size; max-height: $clock-size; @@ -27,8 +40,8 @@ .dx-timeview-minutearrow { position: absolute; left: 50%; - width: 10px; - margin-left: -5px; + width: $arrow-width; + margin-left: $arrow-offset; height: 50%; background-position: bottom; background-repeat: no-repeat; diff --git a/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss index 01361ba736ea..e216ebb33083 100644 --- a/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss @@ -98,7 +98,7 @@ $toolbar-texteditor-width: 150px !default; @include dx-overflow(); // NOTE: Prevent croping of italic text in label (T126187) - margin: 0 -5px; + margin: 0 -5px; // dx-fixed-size: pulls the items flush with the toolbar edge padding: $toolbar-item-padding; } diff --git a/packages/devextreme-scss/scss/widgets/base/toolbar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/toolbar/_mixins.scss index e76f9e4da44e..4627f47ac1ec 100644 --- a/packages/devextreme-scss/scss/widgets/base/toolbar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/toolbar/_mixins.scss @@ -1,17 +1,20 @@ @mixin dx-toolbar-focus-outline( $accent-color, $border-radius, + // The focus ring's geometry, on the same role as its colour and radius. + $outline-width: 2px, + $outline-offset: 1px, ) { .dx-toolbar.dx-toolbar-focus-mode { [tabindex="0"]:focus-visible:not(.dx-toolbar-item) { - outline: 2px solid $accent-color; - outline-offset: 1px; + outline: $outline-width solid $accent-color; + outline-offset: $outline-offset; border-radius: $border-radius; } .dx-toolbar-item[tabindex="0"]:focus-visible .dx-menu { - outline: 2px solid $accent-color; - outline-offset: 1px; + outline: $outline-width solid $accent-color; + outline-offset: $outline-offset; border-radius: $border-radius; } } diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss index 411a79fc5362..e179a9a83229 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss @@ -165,7 +165,7 @@ $treelist-button-margin-right: 10px !default; &.dx-filter-menu { .dx-menu-item-content .dx-icon { - @include dx-icon-sizing(14px); + @include dx-icon-sizing(14px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots } } @@ -253,7 +253,7 @@ $treelist-button-margin-right: 10px !default; .dx-treelist-export-menu { .dx-menu-item .dx-icon-exportxlsx { - @include dx-icon-sizing(16px); + @include dx-icon-sizing(16px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots } } @@ -261,7 +261,7 @@ $treelist-button-margin-right: 10px !default; cursor: pointer; @include dx-icon(more); - @include dx-icon-sizing(21px); + @include dx-icon-sizing(21px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots } .dx-treelist-edit-popup .dx-error-message { diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss b/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss index 8550e2160286..99d9aac760fb 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss @@ -226,7 +226,7 @@ $treelist-cell-focus-outline: null !default; .dx-treelist-container .dx-treelist-headers.dx-state-focused .dx-header-row td:focus { outline: $treelist-cell-focus-outline; outline-color: $treelist-focused-border-color; - outline-offset: -2px; + outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots } // #endregion diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss index 795a3385c598..32d4272a4ad3 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss @@ -3,7 +3,8 @@ $treeview-disabled-opacity: null !default; @use "../mixins" as *; @use "../../base/icon_fonts" as *; -$treeview-searchbox-margin-bottom: 5px; +// Sized from base/treeView, which owns the defaults and forwards a theme's values down. +$treeview-searchbox-margin-bottom: null !default; .dx-treeview-loadindicator-wrapper { text-align: center; @@ -82,7 +83,7 @@ $treeview-searchbox-margin-bottom: 5px; order: 2; .dx-icon { - margin-inline-end: 8px; + margin-inline-end: 8px; // dx-fixed-size: demos hand-write this class outside the widget, where a tier var would not reach } .dx-button-has-icon { diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss index ac0535f0ad9a..3468a5b4e4f3 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss @@ -1,9 +1,11 @@ $treeview-disabled-opacity: 0.5 !default; +$treeview-searchbox-margin-bottom: 5px !default; @use "sass:math"; @use "sass:meta"; @use "./common" with ( $treeview-disabled-opacity: $treeview-disabled-opacity, + $treeview-searchbox-margin-bottom: $treeview-searchbox-margin-bottom, ); @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss index 5097a05b0fc7..d05a4e37799f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss @@ -177,7 +177,9 @@ .dx-header-filter-menu, .dx-datagrid-drag-header, .dx-treelist-drag-header, -.dx-ai-chat { +.dx-ai-chat, +.dx-datagrid-ai-assistant-confirm-dialog, +.dx-treelist-ai-assistant-confirm-dialog { @include gridBasePublic.publish(); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss index af6cbb426b57..2307d6aee8c8 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss @@ -6,6 +6,8 @@ @use "../../base/calendar/calendar" with ( $calendar-week-day-header-font-size: var(--dx-calendar-week-day-header-font-size), $calendar-week-day-header-font-weight: var(--dx-calendar-week-day-header-font-weight), + $calendar-border-width: var(--dx-calendar-border-width), + $calendar-multiview-table-padding: 0 var(--dx-calendar-view-multiview-padding-inline), ); @use "../../base/calendar/mixins" as *; @include dx-calendar-mixin( @@ -48,6 +50,8 @@ var(--dx-calendar-cell-other-content-hovered), var(--dx-calendar-cell-border-hovered), 999em, + $cell-today-border-width: var(--dx-calendar-cell-today-border-width), + $cell-contoured-ring-width: var(--dx-calendar-cell-contoured-outline-width), ); @include dx-calendar-cell-in-range-mixin( "::before", diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss index 1b627fdef5f4..67e1cc252202 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss @@ -4,6 +4,7 @@ @mixin publish { --dx-calendar-bg: #{$calendar-bg}; --dx-calendar-bg-hovered: #{$calendar-bg-hovered}; + --dx-calendar-border-width: #{$calendar-border-width}; --dx-calendar-cell-bg-active: #{$calendar-cell-bg-active}; --dx-calendar-cell-bg-selected: #{$calendar-cell-bg-selected}; --dx-calendar-cell-border-hovered: var(--dx-calendar-bg-hovered); @@ -11,9 +12,11 @@ --dx-calendar-cell-content-selected: #{$calendar-cell-content-selected}; --dx-calendar-cell-contoured-border: var(--dx-calendar-cell-bg-active); --dx-calendar-cell-contoured-border-radius: #{$calendar-cell-contoured-border-radius}; + --dx-calendar-cell-contoured-outline-width: #{$calendar-cell-contoured-outline-width}; --dx-calendar-cell-font-size: #{$calendar-cell-font-size}; --dx-calendar-cell-other-content: #{$calendar-cell-other-content}; --dx-calendar-cell-other-content-hovered: var(--dx-calendar-cell-other-content); + --dx-calendar-cell-today-border-width: #{$calendar-cell-today-border-width}; --dx-calendar-content: #{$calendar-content}; --dx-calendar-element-padding: #{$calendar-element-padding}; --dx-calendar-footer-button-height: #{$calendar-footer-button-height}; @@ -22,6 +25,7 @@ --dx-calendar-invalid-border-focused: #{$calendar-invalid-border-focused}; --dx-calendar-legacy-height: #{$calendar-legacy-height}; --dx-calendar-legacy-width: #{$calendar-legacy-width}; + --dx-calendar-view-multiview-padding-inline: #{$calendar-view-multiview-padding-inline}; --dx-calendar-navigator-content: #{$calendar-navigator-content}; --dx-calendar-week-day-header-font-size: #{$calendar-week-day-header-font-size}; --dx-calendar-week-day-header-font-weight: #{$calendar-week-day-header-font-weight}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_sizes.scss index 1c3ee67ec03e..0580184fce6c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_sizes.scss @@ -33,3 +33,9 @@ $calendar-element-padding: ds.$spacing-80 !default; // Base-layer values injected with design tokens (wave B1) $calendar-week-day-header-font-size: ds.$font-size-caption-sm !default; $calendar-week-day-header-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700) + +// Base-layer sizing injected with design tokens (wave B10) +$calendar-border-width: ds.$border-width-10 !default; +$calendar-view-multiview-padding-inline: ds.$spacing-100 !default; +$calendar-cell-today-border-width: ds.$border-width-20 !default; +$calendar-cell-contoured-outline-width: ds.$border-width-20 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss index 87882e79865c..b685979772a9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss @@ -3,6 +3,11 @@ @use "../../base/chat" with ( $chat-file-name-font-weight: var(--dx-chat-file-name-font-weight), $chat-editing-preview-caption-font-weight: var(--dx-chat-editing-preview-caption-font-weight), + $chat-messagebox-border-block-start-width: var(--dx-chat-message-box-border-block-start-width), + $chat-messagebubble-padding-image: var(--dx-chat-bubble-image-padding), + $chat-messagebubble-border-radius-image: var(--dx-chat-bubble-image-border-radius), + $chat-messagebubble-max-width-image: var(--dx-chat-bubble-image-max-width), + $chat-messagebubble-max-height-image: var(--dx-chat-bubble-image-max-height), ); @use "../../base/chat/mixins" as *; @use "../common/mixins" as *; @@ -10,6 +15,7 @@ var(--dx-chat-bg), var(--dx-chat-border), var(--dx-chat-border-radius), + $border-width: var(--dx-chat-border-width), ); @include chat-avatar( var(--dx-chat-avatar-size), diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss index d332fcef5af5..95e003af0ca6 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss @@ -11,6 +11,7 @@ --dx-chat-avatar-content: #{$chat-avatar-content}; --dx-chat-avatar-size: #{$chat-avatar-size}; --dx-chat-bg: #{$chat-bg}; + --dx-chat-border-width: #{$chat-border-width}; --dx-chat-border: #{$chat-border}; --dx-chat-border-radius: #{$chat-border-radius}; --dx-chat-bubble-border-radius: #{$chat-bubble-border-radius}; @@ -18,6 +19,10 @@ --dx-chat-bubble-delete-gap: #{$chat-bubble-delete-gap}; --dx-chat-bubble-delete-icon-size: #{$chat-bubble-delete-icon-size}; --dx-chat-bubble-gap: #{$chat-bubble-gap}; + --dx-chat-bubble-image-border-radius: #{$chat-bubble-image-border-radius}; + --dx-chat-bubble-image-max-height: #{$chat-bubble-image-max-height}; + --dx-chat-bubble-image-max-width: #{$chat-bubble-image-max-width}; + --dx-chat-bubble-image-padding: #{$chat-bubble-image-padding}; --dx-chat-bubble-padding: #{$chat-bubble-padding}; --dx-chat-bubble-primary-bg: #{$chat-bubble-primary-bg}; --dx-chat-bubble-primary-content: #{$chat-bubble-primary-content}; @@ -47,6 +52,7 @@ --dx-chat-information-gap: #{$chat-information-gap}; --dx-chat-information-icon-size: #{$chat-information-icon-size}; --dx-chat-information-timestamp-content: #{$chat-information-timestamp-content}; + --dx-chat-message-box-border-block-start-width: #{$chat-message-box-border-block-start-width}; --dx-chat-message-box-border: var(--dx-chat-border); --dx-chat-message-box-file-bg: #{$chat-message-box-file-bg}; --dx-chat-message-box-file-cancel-button-secondary-content: #{$chat-message-box-file-cancel-button-secondary-content}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss index fdc52561b24d..5cbbf05774a8 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss @@ -152,6 +152,16 @@ $chat-bubble-gap: ds.$spacing-80 !default; $chat-file-icon-font-size: ds.$font-size-160 !default; // dx-icon-glyph-size: text roles not applicable } +// Base-layer sizing injected with design tokens (wave B3) +$chat-bubble-image-padding: ds.$spacing-40 !default; +$chat-bubble-image-border-radius: ds.$border-radius-80 !default; +$chat-bubble-image-max-width: 400px !default; // dx-offscale: 400px, the spacing scale stops at 160px +$chat-bubble-image-max-height: 400px !default; // dx-offscale: 400px, the spacing scale stops at 160px + // Base-layer values injected with design tokens (wave B1) $chat-file-name-font-weight: ds.$font-weight-base-strong !default; $chat-editing-preview-caption-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700) + +// Base-layer sizing injected with design tokens (wave B12) +$chat-border-width: ds.$border-width-10 !default; +$chat-message-box-border-block-start-width: ds.$border-width-10 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss index 9eef41976ded..59df69ebc871 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss @@ -3,7 +3,7 @@ @use "sizes" as *; @use "../../base/icon_fonts" as *; @use "../../base/checkBox" with ( - $checkbox-text-padding-inline-start: null, + $checkbox-text-padding-inline-start: false, ); @use "../../base/checkBox/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss index a32d437003c8..9e0d27482762 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss @@ -3,6 +3,7 @@ @use "sizes" as *; @use "../colorView/colors" as colorViewColors; @use "../../base/colorBox" with ( + $colorbox-input-left-padding: var(--dx-color-box-input-min-width), $colorbox-texteditor-input-container-width: var(--dx-color-box-input-container-width), $colorbox-texteditor-input-container-height: var(--dx-color-box-input-container-height), $colorbox-texteditor-input-container-inset-inline-start: var(--dx-color-box-input-container-inset-inline-start), diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss index 825967ce5a39..f3908dbaee6b 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss @@ -6,6 +6,7 @@ --dx-color-box-input-container-height: #{$color-box-input-container-height}; --dx-color-box-input-container-inset-inline-start: #{$color-box-input-container-inset-inline-start}; --dx-color-box-input-container-width: #{$color-box-input-container-width}; + --dx-color-box-input-min-width: #{$color-box-input-min-width}; --dx-color-box-overlay-bg: var(--dx-surface-overlay); --dx-color-box-overlay-content-padding: #{$color-box-overlay-content-padding}; --dx-color-box-overlay-padding: #{$color-box-overlay-padding}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_sizes.scss index 1bc91bd349e4..347c6fcafce5 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_sizes.scss @@ -26,3 +26,6 @@ $color-box-input-container-height: ds.$spacing-150 !default; $color-box-input-container-inset-inline-start: ds.$spacing-140 !default; $color-box-overlay-padding: ds.$spacing-200 !default; $color-box-toolbar-item-padding-inline-end: ds.$spacing-100 !default; + +// Base-layer sizing injected with design tokens (wave B13) +$color-box-input-min-width: ds.$spacing-400 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss index 8ec8e22df34c..3e9e82b52dda 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss @@ -1,76 +1,55 @@ @use "colors" as *; @use "sizes" as *; @use "../../base/colorView/mixins" as *; -@use "../../base/colorView"; +@use "../../base/colorView" with ( + $color-view-container-width: var(--dx-color-view-container-width), + $color-view-palette-width: var(--dx-color-view-palette-width), + $color-view-palette-height: var(--dx-color-view-palette-height), + $color-view-alpha-cell-width: var(--dx-color-view-alpha-cell-width), + $color-view-hue-scale-width: var(--dx-color-view-hue-scale-width), + $color-view-hue-scale-height: var(--dx-color-view-hue-scale-height), + $color-view-hue-scale-wrapper-height: var(--dx-color-view-hue-scale-wrapper-height), + $color-view-label-hex-margin: var(--dx-color-view-container-hex-margin), + $color-view-alpha-label-margin-inline-start: var(--dx-color-view-container-alpha-label-margin), + $color-view-alpha-label-margin-inline-start-rtl: var(--dx-color-view-container-alpha-label-margin), + $color-view-alpha-label-width: var(--dx-color-view-container-alpha-label-width), + $color-view-textbox-width: var(--dx-color-view-container-textbox-width), + $color-view-textbox-margin: var(--dx-color-view-container-textbox-margin), + $color-view-alpha-row-margin-block-start: var(--dx-color-view-alpha-row-margin-block-start), + $color-view-hue-scale-cell-margin-inline-start: var(--dx-color-view-hue-scale-margin), + $color-view-controls-width: var(--dx-color-view-controls-container-width), + $color-view-controls-margin-inline-start: var(--dx-color-view-controls-container-margin), + $color-view-controls-margin-inline-start-rtl: var(--dx-color-view-controls-container-margin), + $color-view-color-preview-width: 100%, + $color-view-color-preview-height: var(--dx-color-view-color-preview-height), + $color-view-alpha-scale-height: var(--dx-color-view-alpha-scale-height), + $color-view-alpha-cell-margin-block: var(--dx-color-view-alpha-cell-margin-block), + $color-view-apply-button-margin-inline-end: var(--dx-color-view-apply-button-margin-inline-end), +); @include dx-base-colorview-styles(var(--dx-color-view-handle-content), var(--dx-color-view-handle-border)); .dx-colorview-container { - width: var(--dx-color-view-container-width); - label { line-height: var(--dx-color-view-container-line-height); display: flex; align-items: center; margin-bottom: var(--dx-color-view-container-margin-block-end); - &.dx-colorview-label-hex { - margin: var(--dx-color-view-container-hex-margin); - } - + /* + * Kept as a whole declaration on purpose: it also resets the margin-bottom above, which the + * base rule — it sets margin-inline-start alone — would leave in place. + */ &.dx-colorview-alpha-channel-label { margin: 0 0 0 var(--dx-color-view-container-alpha-label-margin); - width: var(--dx-color-view-container-alpha-label-width); - } - - .dx-texteditor { - width: var(--dx-color-view-container-textbox-width); - margin: var(--dx-color-view-container-textbox-margin); } } } -.dx-colorview-hue-scale-cell { - margin-left: var(--dx-color-view-hue-scale-margin); -} - -.dx-colorview-palette { - width: var(--dx-color-view-palette-width); - height: var(--dx-color-view-palette-height); -} - -.dx-colorview-alpha-channel-scale { - width: var(--dx-color-view-palette-width); -} - .dx-colorview-container-row.dx-colorview-alpha-channel-row { - margin-top: var(--dx-color-view-alpha-margin); display: flex; align-items: center; } -.dx-colorview-hue-scale { - width: var(--dx-color-view-hue-scale-width); - height: var(--dx-color-view-hue-scale-height); -} - -.dx-colorview-alpha-channel-cell { - width: var(--dx-color-view-alpha-width); -} - -.dx-colorview-hue-scale-wrapper { - height: var(--dx-color-view-hue-scale-wrapper-height); -} - -.dx-colorview-color-preview { - width: 100%; - height: var(--dx-color-view-color-preview-height); -} - -.dx-colorview-controls-container { - width: var(--dx-color-view-controls-container-width); - margin-left: var(--dx-color-view-controls-container-margin); -} - .dx-colorview-container label { // stylelint-disable-line no-duplicate-selectors color: var(--dx-color-view-label-content); } @@ -89,24 +68,3 @@ .dx-colorview-color-preview-container { margin-bottom: var(--dx-color-view-preview-container-margin); } - -.dx-rtl { - .dx-colorview-controls-container { - margin-left: 0; - margin-right: var(--dx-color-view-controls-container-margin); - } - - .dx-colorview-hue-scale-cell { - margin-left: 0; - margin-right: var(--dx-color-view-hue-scale-margin); - } - - .dx-colorview-container { - label { - &.dx-colorview-alpha-channel-label { - margin-left: 0; - margin-right: var(--dx-color-view-container-alpha-label-margin); - } - } - } -} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss index 6bac38e37c44..643afa0a2899 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss @@ -2,8 +2,11 @@ @use "sizes" as *; @mixin publish { - --dx-color-view-alpha-margin: #{$color-view-alpha-margin}; - --dx-color-view-alpha-width: #{$color-view-alpha-width}; + --dx-color-view-alpha-cell-margin-block: #{$color-view-alpha-cell-margin-block}; + --dx-color-view-alpha-cell-width: #{$color-view-alpha-cell-width}; + --dx-color-view-alpha-row-margin-block-start: #{$color-view-alpha-row-margin-block-start}; + --dx-color-view-alpha-scale-height: #{$color-view-alpha-scale-height}; + --dx-color-view-apply-button-margin-inline-end: #{$color-view-apply-button-margin-inline-end}; --dx-color-view-bg-box-palette-cell-bg: var(--dx-surface-overlay); --dx-color-view-border: #{$color-view-border}; --dx-color-view-color-preview-container-margin: #{$color-view-color-preview-container-margin}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss index 19726e799712..170e73218944 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss @@ -3,7 +3,7 @@ $color-view-container-width: 450px !default; // dx-offscale: 450px $color-view-palette-width: 288px !default; // dx-offscale: 288px $color-view-palette-height: 299px !default; // dx-offscale: 299px -$color-view-alpha-margin: ds.$spacing-100 !default; +$color-view-alpha-row-margin-block-start: ds.$spacing-100 !default; $color-view-hue-scale-width: ds.$spacing-180 !default; $color-view-hue-scale-margin: ds.$spacing-190 !default; $color-view-color-preview-height: ds.$spacing-400 !default; @@ -28,7 +28,12 @@ $color-view-color-preview-container-margin: ds.$spacing-10 !default; * Derived values, moved out of _index.scss: a file that emits rules must not declare * variables (NAMING.md, O7). */ -$color-view-alpha-width: $color-view-palette-width + 4; +$color-view-alpha-cell-width: $color-view-palette-width + 4; // the wrapper carries the 1px hairline ring on both sides, so it is two pixels taller than the scale $color-view-hue-scale-wrapper-height: $color-view-palette-height + 2; + +// Hoisted out of the shared layer's rules; values match what it used to pin +$color-view-alpha-scale-height: ds.$spacing-200 !default; +$color-view-alpha-cell-margin-block: ds.$spacing-60 !default; +$color-view-apply-button-margin-inline-end: ds.$spacing-100 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/common/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/common/_colors.scss index 38717262cc97..9e26789f8649 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/common/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_colors.scss @@ -30,3 +30,12 @@ $valid-badge-content: ds.$color-bg-success !default; $palette-text: ds.$color-content !default; $global-bg: ds.$color-bg !default; $global-content: ds.$color-content !default; + +/* + * A mention is markup the editor writes into the value, and consumers render that value back + * anywhere — the Mentions demo shows a chat log built from plain spans, with no editor around. + * The base layer says the same by styling `.dx-mention` from a bare selector, unlike `.dx-variable` + * which it nests under `.dx-htmleditor-content`. So the value is not part of one widget's anatomy + * and belongs in the system tier, next to invalid-badge. + */ +$mention-bg: ds.$color-bg-selected !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent-next/common/_mixins.scss index 4a4ddbf19b18..7706c1e1d497 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/common/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_mixins.scss @@ -5,6 +5,7 @@ @use "../../base/validation" as baseValidation with ( $validation-summary-margin-top: validationSizes.$validation-summary-margin-block-start, $validation-message-content-padding: validationSizes.$validation-message-content-padding, + $validation-summary-item-border-bottom-width: var(--dx-validation-summary-item-border-block-end-width), ); @use "../list/sizes" as listSizes; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/common/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/common/_public.scss index 7d066d7b913d..25221eba6022 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/common/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_public.scss @@ -5,6 +5,9 @@ --dx-backdrop-bg: #{$backdrop-bg}; --dx-focus-rect-border-radius: #{$focus-rect-border-radius}; --dx-focus-rect-outline: #{$focus-rect-outline}; + --dx-focus-rect-outline-offset: #{$focus-rect-outline-offset}; + --dx-focus-rect-outline-offset-inset: #{$focus-rect-outline-offset-inset}; + --dx-focus-rect-outline-width: #{$focus-rect-outline-width}; --dx-global-bg: #{$global-bg}; --dx-global-content: #{$global-content}; --dx-global-disabled-opacity: #{$global-disabled-opacity}; @@ -23,6 +26,10 @@ --dx-invalid-badge-offset: #{$invalid-badge-offset}; --dx-invalid-badge-padding-inline: #{$invalid-badge-padding-inline}; --dx-invalid-badge-size: #{$invalid-badge-size}; + --dx-mention-bg: #{$mention-bg}; + --dx-mention-border-radius: #{$mention-border-radius}; + --dx-mention-margin-inline: #{$mention-margin-inline}; + --dx-mention-padding-block: #{$mention-padding-block}; --dx-palette-accent: #{$palette-accent}; --dx-palette-bg: #{$palette-bg}; --dx-palette-border: #{$palette-border}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/common/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/common/_sizes.scss index f04518c00778..b50bc7868447 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/common/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_sizes.scss @@ -11,6 +11,14 @@ $global-line-height: null !default; $global-inline-widget-inner-height: calc(#{$global-inline-widget-height} - #{$global-border-width} * 2) !default; $focus-rect-border-radius: $global-border-radius !default; +$focus-rect-outline-width: ds.$border-width-20 !default; +$focus-rect-outline-offset: ds.$spacing-10 !default; + +/* + * The inset variant: the grids draw the ring inside the cell instead of around it. Derived once + * here and published, so ten places read a var() instead of each shipping its own calc(). + */ +$focus-rect-outline-offset-inset: calc(-1 * #{$focus-rect-outline-width}) !default; $invalid-badge-size: calc(#{$global-icon-size} - #{ds.$spacing-20}) !default; $invalid-badge-padding-inline: calc((#{$global-inline-widget-inner-height} - #{$invalid-badge-size}) / 2) !default; @@ -35,3 +43,8 @@ $invalid-badge-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role $global-dropdown-content-padding: ds.$spacing-10 !default; $global-dropdown-border-block-end-width: ds.$border-width-10 !default; $global-dropdown-flipped-border-block-start-width: ds.$border-width-10 !default; + +// see the note on $mention-bg in _colors.scss +$mention-padding-block: ds.$spacing-10 !default; +$mention-border-radius: ds.$border-radius-20 !default; +$mention-margin-inline: ds.$spacing-20 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss index cfd8a55dc11e..207d2b26b263 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss @@ -6,7 +6,7 @@ @use "../menu/colors" as menuColors; @use "../button/sizes" as buttonSizes; @use "../../base/contextMenu" with ( - $contextmenu-menu-items-container-padding: null, + $contextmenu-menu-items-container-padding: false, $contextmenu-menu-separator-height: var(--dx-context-menu-separator-height), $contextmenu-menu-separator-margin: var(--dx-context-menu-separator-margin), ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss index 97ab54c09143..4db1a5da438c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss @@ -9,6 +9,7 @@ $diagram-popup-content-padding: var(--dx-diagram-popup-content-padding), $diagram-colorview-palette-min-width: var(--dx-diagram-color-view-palette-min-width), $diagram-colorview-hue-scale-cell-margin-left: var(--dx-diagram-color-view-hue-scale-cell-margin-inline-start), + $diagram-border-width: var(--dx-diagram-border-width), $diagram-loading-indicator-width: var(--dx-diagram-loading-indicator-width), $diagram-loading-indicator-height: var(--dx-diagram-loading-indicator-height), $diagram-context-toolbox-target-width: var(--dx-diagram-context-toolbox-target-width), diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss index 7870dfa80538..175025acad26 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss @@ -5,6 +5,7 @@ --dx-diagram-accordion-item-border-block-end: #{$diagram-accordion-item-border-block-end}; --dx-diagram-accordion-item-title-min-height: #{$diagram-accordion-item-title-min-height}; --dx-diagram-bg: #{$diagram-bg}; + --dx-diagram-border-width: #{$diagram-border-width}; --dx-diagram-border: #{$diagram-border}; --dx-diagram-button-margin: #{$diagram-button-margin}; --dx-diagram-button-min-height: #{$diagram-button-min-height}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_sizes.scss index 2949389913a2..fb39b0253f2c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_sizes.scss @@ -134,3 +134,6 @@ $diagram-context-toolbox-target-height: ds.$spacing-10 !default; * variables (NAMING.md, O7). */ $diagram-toolbar-icon-size: $global-icon-size; + +// Base-layer sizing injected with design tokens (wave B11) +$diagram-border-width: ds.$border-width-10 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss index 58bef39448a4..0adc093bab91 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss @@ -8,6 +8,7 @@ @include dx-dropdownbutton( var(--dx-drop-down-button-toggle-spindown-icon-size), var(--dx-drop-down-button-action-padding-inline), + $dropdownbutton-icon-right-margin-inline-start: var(--dx-drop-down-button-icon-right-margin-inline-start), ); .dx-dropdownbutton-popup-wrapper { diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss index 5ed5a1f9e764..052826b20b48 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss @@ -4,5 +4,6 @@ @mixin publish { --dx-drop-down-button-action-padding-inline: #{$drop-down-button-action-padding-inline}; --dx-drop-down-button-action-spindown-icon-size: #{$drop-down-button-action-spindown-icon-size}; + --dx-drop-down-button-icon-right-margin-inline-start: #{$drop-down-button-icon-right-margin-inline-start}; --dx-drop-down-button-toggle-spindown-icon-size: #{$drop-down-button-toggle-spindown-icon-size}; } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_sizes.scss index b8e1363e6d9b..973548eb8261 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_sizes.scss @@ -16,3 +16,6 @@ $drop-down-button-action-spindown-icon-size: null !default; $drop-down-button-toggle-spindown-icon-size: ds.$spacing-180; $drop-down-button-action-spindown-icon-size: ds.$spacing-120 !default; } + +// Base-layer sizing injected with design tokens (wave B12) +$drop-down-button-icon-right-margin-inline-start: ds.$spacing-40 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss index d773cf6a48e1..0e3adf2c7e8e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss @@ -19,4 +19,10 @@ } } -@include dx-dropdownmenu-focus-outline(var(--dx-focus-rect-outline), var(--dx-focus-rect-border-radius), var(--dx-drop-down-menu-section-margin-inline)); +@include dx-dropdownmenu-focus-outline( + var(--dx-focus-rect-outline), + var(--dx-focus-rect-border-radius), + var(--dx-drop-down-menu-section-margin-inline), + $outline-width: var(--dx-focus-rect-outline-width), + $outline-offset: var(--dx-focus-rect-outline-offset), +); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss index 8788ef113577..77e31a5621bf 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss @@ -3,6 +3,7 @@ @use "../sizes" as *; @use "../../base/fileManager" with ( $filemanager-root-height: var(--dx-file-manager-height), + $filemanager-splitter-wrapper-right: var(--dx-file-manager-splitter-wrapper-inset-inline-end), $filemanager-root-border: var(--dx-file-manager-border-width) solid, $filemanager-overlay-content-min-width: var(--dx-file-manager-overlay-content-min-width), $filemanager-overlay-content-max-width: var(--dx-file-manager-overlay-content-max-width), diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss index a8516dc131d7..a98b9ac51842 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss @@ -79,6 +79,7 @@ --dx-file-manager-progress-panel-width: #{$file-manager-progress-panel-width}; --dx-file-manager-progress-title-font-size: #{$file-manager-progress-title-font-size}; --dx-file-manager-progress-title-font-weight: #{$file-manager-progress-title-font-weight}; + --dx-file-manager-splitter-wrapper-inset-inline-end: #{$file-manager-splitter-wrapper-inset-inline-end}; --dx-file-manager-thumbnails-item-border: #{$file-manager-thumbnails-item-border}; --dx-file-manager-thumbnails-item-content-padding: #{$file-manager-thumbnails-item-content-padding}; --dx-file-manager-thumbnails-item-height: #{$file-manager-thumbnails-item-height}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_sizes.scss index 68f430c8e5f5..0ce0205a7662 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_sizes.scss @@ -1,6 +1,7 @@ @use "../sizes" as *; @use "../toolbar/sizes" as toolbarSizes; @use "../../../_design-system/variables/ds" as ds; +@use "../splitterBar/sizes" as splitterBarSizes; $file-manager-toolbar-separator-height: null !default; $file-manager-toolbar-viewmode-width: null !default; @@ -121,3 +122,10 @@ $file-manager-dialog-name-editor-max-width: 340px !default; // dx-offscale: 340p $file-manager-dialog-name-editor-min-height: 180px !default; // dx-offscale: 180px $file-manager-dialog-name-editor-max-height: 180px !default; // dx-offscale: 180px $file-manager-progress-box-cancel-button-margin-block-start: ds.$spacing-50 !default; + +/* + * Base centres the splitter wrapper on the bar with half the difference between the border and + * the bar. Both are tokens here, so the relationship is derived instead of frozen at 3px: move + * either token and this follows. + */ +$file-manager-splitter-wrapper-inset-inline-end: calc((#{splitterBarSizes.$splitter-bar-border-width} - #{splitterBarSizes.$splitter-bar-width}) / 2) !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss index 7f7198ad4132..5d491537d92f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss @@ -4,7 +4,7 @@ @use "../sizes" as *; @use "../../base/mixins" as *; @use "../../base/fileUploader" with ( - $fileuploader-file-container-padding: null, + $fileuploader-file-container-padding: false, $fileuploader-button-margin-left: var(--dx-file-uploader-button-margin-inline-start), $fileuploader-upload-button-margin-top: var(--dx-file-uploader-upload-button-margin-block-start), $fileuploader-show-file-list-padding-top: var(--dx-file-uploader-show-file-list-padding-block-start), diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss index 99b1ecf94140..097fe2bd221b 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss @@ -21,6 +21,57 @@ @use "../scrollable"; @use "../overlay"; @use "../pagination"; + +/* + * base/gridBase/variables holds no rules, so configuring it here changes no CSS position — and + * this is the first load of that module in the graph: the theme's gridBase is used before + * base/dataGrid and base/treeList, which are what pull base/gridBase in. + * + * Only the four whose value the theme already wins on are passed: measured in the browser, the + * rendered min-width of the command columns is the theme's (50px / 115px / 93px) and the filter + * row input padding is the theme's 40px, so the base literals below them never reach the page. + */ +@use "../../base/gridBase/variables" as baseGridVariables with ( + $grid-texteditor-input-padding: var(--dx-grid-editor-input-padding), + $grid-command-select-column-width: var(--dx-grid-command-select-column-width), + $grid-command-edit-column-width: var(--dx-grid-command-edit-column-width), + $grid-command-edit-column-with-icons-width: var(--dx-grid-command-edit-column-with-icons-width), + $grid-command-expand-column-width: var(--dx-grid-command-expand-column-width), + $grid-command-adaptive-column-width: var(--dx-grid-command-adaptive-column-width), + $grid-ai-assistant-confirm-dialog-button-width: var(--dx-grid-ai-confirm-dialog-button-width), + $grid-context-menu-item-padding-block: var(--dx-grid-context-menu-item-padding-block), + $grid-context-menu-item-padding-inline-start: var(--dx-grid-context-menu-item-padding-inline-start), + $grid-context-menu-item-padding-inline-end: var(--dx-grid-context-menu-item-padding-inline-end), + $grid-context-menu-overlay-item-padding: var(--dx-grid-context-menu-overlay-item-padding), + $grid-context-menu-overlay-item-padding-inline-end: var(--dx-grid-context-menu-overlay-item-padding-inline-end), + $grid-menu-bar-item-padding: var(--dx-grid-menu-bar-item-padding), + $grid-menu-caption-padding-inline-start: var(--dx-grid-menu-caption-padding-inline-start), + $grid-column-chooser-title-font-size: var(--dx-grid-column-chooser-title-font-size), + $grid-column-chooser-content-padding: var(--dx-grid-column-chooser-content-padding), + $grid-column-chooser-item-margin-block-end: var(--dx-grid-column-chooser-item-margin-block-end), + $grid-column-chooser-tree-view-item-padding-inline-start: var(--dx-grid-column-chooser-tree-view-item-padding-inline-start), + $grid-column-separator-width: var(--dx-grid-column-separator-width), + $grid-toolbar-button-margin-inline-start: var(--dx-grid-toolbar-button-margin-inline-start), + $grid-search-panel-margin-inline-start: var(--dx-grid-search-panel-margin-inline-start), + $grid-rowsview-empty-height: var(--dx-grid-rowsview-empty-height), + $grid-bottom-load-panel-padding: var(--dx-grid-bottom-load-panel-padding), + $grid-filter-panel-padding: var(--dx-grid-filter-panel-padding), + $grid-filter-panel-checkbox-padding-inline-end: var(--dx-grid-filter-panel-checkbox-padding-inline-end), + $grid-filter-panel-icon-margin-inline-end: var(--dx-grid-filter-panel-icon-margin-inline-end), + $grid-cell-padding: var(--dx-grid-cell-content-padding), + $grid-total-footer-padding-block: var(--dx-grid-summary-padding-block), + $grid-column-header-indicator-width: var(--dx-grid-column-indicator-width), + $grid-text-content-margin: var(--dx-grid-header-text-margin-inline), + $grid-sort-index-width: var(--dx-grid-sort-index-width), + $grid-sort-index-offset: var(--dx-grid-sort-index-offset), +); +@use "../../base/gridBase/layout/aiChat/variables" as baseAiChatVariables with ( + $ai-chat-toolbar-item-spacing: var(--dx-grid-ai-chat-toolbar-item-padding-inline-end), + $ai-chat-message-gap: var(--dx-grid-ai-chat-message-gap), + $ai-chat-message-content-gap: var(--dx-grid-ai-chat-message-content-gap), + $ai-chat-message-width: var(--dx-grid-ai-chat-message-min-width), + $ai-chat-message-regenerate-button-border-radius: var(--dx-grid-ai-chat-message-regenerate-button-border-radius), +); @use "variables" as *; @forward "variables"; @use "layout/cell" as *; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss index 82a0c2a97abf..fc5ee810700d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss @@ -4,13 +4,43 @@ @use "layout/aiChat/sizes" as *; @mixin publish { + --dx-grid-cell-content-padding: #{$grid-cell-content-padding}; + --dx-grid-summary-padding-block: #{$grid-summary-padding-block}; + --dx-grid-column-indicator-width: #{$grid-column-indicator-width}; + --dx-grid-header-text-margin-inline: #{$grid-header-text-margin-inline}; + --dx-grid-sort-index-width: #{$grid-sort-index-width}; + --dx-grid-sort-index-offset: #{$grid-sort-index-offset}; + --dx-grid-context-menu-item-padding-block: #{$grid-context-menu-item-padding-block}; + --dx-grid-context-menu-item-padding-inline-start: #{$grid-context-menu-item-padding-inline-start}; + --dx-grid-context-menu-item-padding-inline-end: #{$grid-context-menu-item-padding-inline-end}; + --dx-grid-context-menu-overlay-item-padding: #{$grid-context-menu-overlay-item-padding}; + --dx-grid-context-menu-overlay-item-padding-inline-end: #{$grid-context-menu-overlay-item-padding-inline-end}; + --dx-grid-menu-bar-item-padding: #{$grid-menu-bar-item-padding}; + --dx-grid-menu-caption-padding-inline-start: #{$grid-menu-caption-padding-inline-start}; + --dx-grid-column-chooser-title-font-size: #{$grid-column-chooser-title-font-size}; + --dx-grid-column-chooser-content-padding: #{$grid-column-chooser-content-padding}; + --dx-grid-column-chooser-item-margin-block-end: #{$grid-column-chooser-item-margin-block-end}; + --dx-grid-column-chooser-tree-view-item-padding-inline-start: #{$grid-column-chooser-tree-view-item-padding-inline-start}; + --dx-grid-column-separator-width: #{$grid-column-separator-width}; + --dx-grid-toolbar-button-margin-inline-start: #{$grid-toolbar-button-margin-inline-start}; + --dx-grid-search-panel-margin-inline-start: #{$grid-search-panel-margin-inline-start}; + --dx-grid-rowsview-empty-height: #{$grid-rowsview-empty-height}; + --dx-grid-bottom-load-panel-padding: #{$grid-bottom-load-panel-padding}; + --dx-grid-filter-panel-checkbox-padding-inline-end: #{$grid-filter-panel-checkbox-padding-inline-end}; + --dx-grid-filter-panel-icon-margin-inline-end: #{$grid-filter-panel-icon-margin-inline-end}; --dx-grid-adaptive-column-height: #{$grid-adaptive-column-height}; --dx-grid-after-inset-inline-end: #{$grid-after-inset-inline-end}; --dx-grid-ai-chat-message-border: #{$grid-ai-chat-message-border}; + --dx-grid-ai-chat-message-content-gap: #{$grid-ai-chat-message-content-gap}; --dx-grid-ai-chat-message-error-content: #{$grid-ai-chat-message-error-content}; + --dx-grid-ai-chat-message-gap: #{$grid-ai-chat-message-gap}; --dx-grid-ai-chat-message-icon-size: #{$grid-ai-chat-message-icon-size}; + --dx-grid-ai-chat-message-min-width: #{$grid-ai-chat-message-min-width}; --dx-grid-ai-chat-message-pending-content: #{$grid-ai-chat-message-pending-content}; + --dx-grid-ai-chat-message-regenerate-button-border-radius: #{$grid-ai-chat-message-regenerate-button-border-radius}; --dx-grid-ai-chat-message-success-content: #{$grid-ai-chat-message-success-content}; + --dx-grid-ai-chat-toolbar-item-padding-inline-end: #{$grid-ai-chat-toolbar-item-padding-inline-end}; + --dx-grid-ai-confirm-dialog-button-width: #{$grid-ai-confirm-dialog-button-width}; --dx-grid-ai-prompt-editor-progress-bar-height: #{$grid-ai-prompt-editor-progress-bar-height}; --dx-grid-bg: #{$grid-bg}; --dx-grid-border-width: #{$grid-border-width}; @@ -40,6 +70,7 @@ --dx-grid-column-chooser-padding: #{$grid-column-chooser-padding}; --dx-grid-column-chooser-padding-inline: #{$grid-column-chooser-padding-inline}; --dx-grid-column-separator-bg: #{$grid-column-separator-bg}; + --dx-grid-command-adaptive-column-width: #{$grid-command-adaptive-column-width}; --dx-grid-command-ai-button-max-width: #{$grid-command-ai-button-max-width}; --dx-grid-command-ai-content-padding-inline-start: #{$grid-command-ai-content-padding-inline-start}; --dx-grid-command-ai-icon-size: #{$grid-command-ai-icon-size}; @@ -48,6 +79,7 @@ --dx-grid-command-edit-icon-margin: #{$grid-command-edit-icon-margin}; --dx-grid-command-edit-icon-size: #{$grid-command-edit-icon-size}; --dx-grid-command-edit-text-margin: #{$grid-command-edit-text-margin}; + --dx-grid-command-expand-column-width: #{$grid-command-expand-column-width}; --dx-grid-command-select-column-width: #{$grid-command-select-column-width}; --dx-grid-content-focused: #{$grid-content-focused}; --dx-grid-content-padding: #{$grid-content-padding}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_sizes.scss index 94c740786820..564768ff67e7 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_sizes.scss @@ -150,3 +150,41 @@ $grid-hidden-border: ds.$border-width-10 solid transparent !default; $grid-row-border: ds.$border-width-10 solid transparent !default; $grid-link-icon-min-width: ds.$spacing-200 !default; $grid-editor-input-border-block-end-width: ds.$border-width-10 !default; + +// Command column widths the shared layer used to pin; the theme owns them now +$grid-command-expand-column-width: ds.$spacing-300 !default; + +/* + * The same expression the theme's own .dx-command-adaptive rule computes, so the shared layer + * stops asserting 36px while the theme renders something else. + */ +$grid-command-adaptive-column-width: calc(2 * #{$grid-cell-padding-inline} + #{$global-icon-size}) !default; +$grid-ai-confirm-dialog-button-width: 50px !default; // dx-offscale: 50px + +// Sizes hoisted out of the shared layer's rules; values match what it used to pin +$grid-context-menu-item-padding-block: ds.$spacing-70 !default; +$grid-context-menu-item-padding-inline-start: ds.$spacing-50 !default; +$grid-context-menu-item-padding-inline-end: ds.$spacing-300 !default; +$grid-context-menu-overlay-item-padding: ds.$spacing-50 !default; +$grid-context-menu-overlay-item-padding-inline-end: ds.$spacing-300 !default; +$grid-menu-bar-item-padding: ds.$spacing-80 ds.$spacing-50 ds.$spacing-70 ds.$spacing-50 !default; +$grid-menu-caption-padding-inline-start: ds.$spacing-60 !default; +$grid-column-chooser-title-font-size: ds.$font-size-160 !default; +$grid-column-chooser-content-padding: 0 ds.$spacing-200 ds.$spacing-200 ds.$spacing-200 !default; +$grid-column-chooser-item-margin-block-end: ds.$spacing-100 !default; +$grid-column-chooser-tree-view-item-padding-inline-start: ds.$spacing-40 !default; +$grid-column-separator-width: ds.$spacing-30 !default; +$grid-toolbar-button-margin-inline-start: ds.$spacing-100 !default; +$grid-search-panel-margin-inline-start: ds.$spacing-150 !default; +$grid-rowsview-empty-height: ds.$spacing-1000 !default; +$grid-bottom-load-panel-padding: ds.$spacing-100 !default; +$grid-filter-panel-checkbox-padding-inline-end: ds.$spacing-100 !default; +$grid-filter-panel-icon-margin-inline-end: ds.$spacing-70 !default; + +// The last of the shared layer's sizes: read in arithmetic, so base goes through its dual-mode helpers +$grid-cell-content-padding: ds.$spacing-70 !default; +$grid-summary-padding-block: ds.$spacing-140 !default; +$grid-column-indicator-width: ds.$spacing-140 !default; +$grid-header-text-margin-inline: ds.$spacing-30 !default; +$grid-sort-index-width: ds.$spacing-120 !default; +$grid-sort-index-offset: ds.$spacing-30 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_sizes.scss index 4552c41dc0a7..b012bc6de07d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_sizes.scss @@ -1,3 +1,11 @@ @use "../../../sizes" as *; +@use "../../../../../_design-system/variables/ds" as ds; $grid-ai-chat-message-icon-size: $global-icon-size; + +// Values hoisted from the shared layer's fixed sizes (tokenized) +$grid-ai-chat-toolbar-item-padding-inline-end: ds.$spacing-40 !default; +$grid-ai-chat-message-gap: ds.$spacing-80 !default; +$grid-ai-chat-message-content-gap: ds.$spacing-40 !default; +$grid-ai-chat-message-min-width: 280px !default; // dx-offscale: 280px, the width the message column is designed around +$grid-ai-chat-message-regenerate-button-border-radius: ds.$border-radius-40 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_colors.scss index 574f2e6bce22..19d996f8ffeb 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_colors.scss @@ -4,7 +4,6 @@ $html-editor-toolbar-border: ds.$color-border-subtle !default; $html-editor-variable-bg: ds.$color-bg-primary-alpha-hovered !default; $html-editor-resize-frame-border: ds.$color-border-primary !default; $html-editor-resize-trigger: ds.$color-bg-primary !default; -$html-editor-mention-bg: ds.$color-bg-selected !default; $html-editor-table-border: ds.$color-border !default; $html-editor-file-uploader-input-wrapper-border: ds.$color-border !default; $html-editor-file-uploader-input-wrapper-bg: ds.$color-bg-canvas !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss index 4ffa47a4259e..65d54e379582 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss @@ -11,6 +11,19 @@ @use "../popup/sizes" as popupSizes; @use "../../base/mixins" as *; @use "../../base/htmlEditor" with ( + $htmleditor-border-width: var(--dx-html-editor-border-width), + $variable-padding: var(--dx-html-editor-variable-padding), + $variable-border-radius: var(--dx-html-editor-variable-border-radius), + $blockquote-padding-inline-start: var(--dx-html-editor-blockquote-padding-inline-start), + $blockquote-border-inline-start-width: var(--dx-html-editor-blockquote-border-inline-start-width), + $table-cell-padding: var(--dx-html-editor-table-cell-padding), + $placeholder-inset-inline: var(--dx-html-editor-placeholder-inset-inline), + $htmleditor-content-padding: var(--dx-html-editor-padding-block) var(--dx-html-editor-padding-inline), + $mention-padding-block: var(--dx-mention-padding-block), + $mention-border-radius: var(--dx-mention-border-radius), + $mention-margin-inline: var(--dx-mention-margin-inline), + $table-resizer-thickness: var(--dx-html-editor-table-resizer-thickness), + $table-resizer-highlight-thickness: var(--dx-html-editor-table-resizer-highlight-thickness), $htmleditor-code-block-bg: var(--dx-html-editor-code-block-bg), $htmleditor-placeholder-color: var(--dx-html-editor-placeholder-content), $htmleditor-aidialog-title-font-weight: var(--dx-html-editor-ai-dialog-title-font-weight), @@ -122,7 +135,6 @@ .dx-htmleditor-content { line-height: var(--dx-global-line-height); - padding: var(--dx-html-editor-padding-block) var(--dx-html-editor-padding-inline); &.ql-blank::before { // stylelint-disable-line selector-class-pattern color: textEditorColors.$text-editor-placeholder; @@ -284,8 +296,9 @@ text-align: start; } +// a mention renders wherever the editor's value is rendered, so it reads the system tier .dx-mention { - background-color: var(--dx-html-editor-mention-bg); + background-color: var(--dx-mention-bg); } .dx-suggestion-list-wrapper { diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss index d9c5684054aa..23cfd4b44e9f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss @@ -10,7 +10,10 @@ --dx-html-editor-ai-dialog-content-padding: #{$html-editor-ai-dialog-content-padding}; --dx-html-editor-ai-dialog-selects-gap: #{$html-editor-ai-dialog-selects-gap}; --dx-html-editor-ai-dialog-title-font-weight: #{$html-editor-ai-dialog-title-font-weight}; + --dx-html-editor-blockquote-border-inline-start-width: #{$html-editor-blockquote-border-inline-start-width}; + --dx-html-editor-blockquote-padding-inline-start: #{$html-editor-blockquote-padding-inline-start}; --dx-html-editor-border-block-end-active: #{$html-editor-border-block-end-active}; + --dx-html-editor-border-width: #{$html-editor-border-width}; --dx-html-editor-code-block-bg: #{$html-editor-code-block-bg}; --dx-html-editor-content-margin: #{$html-editor-content-margin}; --dx-html-editor-cover-bg: #{$html-editor-cover-bg}; @@ -21,13 +24,16 @@ --dx-html-editor-file-uploader-input-wrapper-border-width: #{$html-editor-file-uploader-input-wrapper-border-width}; --dx-html-editor-highlighted-row-bg: #{$html-editor-highlighted-row-bg}; --dx-html-editor-input-wrapper-gap: #{$html-editor-input-wrapper-gap}; - --dx-html-editor-mention-bg: #{$html-editor-mention-bg}; --dx-html-editor-padding-block: #{$html-editor-padding-block}; --dx-html-editor-padding-inline: #{$html-editor-padding-inline}; --dx-html-editor-placeholder-content: #{$html-editor-placeholder-content}; + --dx-html-editor-placeholder-inset-inline: #{$html-editor-placeholder-inset-inline}; --dx-html-editor-resize-frame-border: #{$html-editor-resize-frame-border}; --dx-html-editor-resize-trigger: #{$html-editor-resize-trigger}; --dx-html-editor-table-border: #{$html-editor-table-border}; + --dx-html-editor-table-cell-padding: #{$html-editor-table-cell-padding}; + --dx-html-editor-table-resizer-highlight-thickness: #{$html-editor-table-resizer-highlight-thickness}; + --dx-html-editor-table-resizer-thickness: #{$html-editor-table-resizer-thickness}; --dx-html-editor-toolbar-border: #{$html-editor-toolbar-border}; --dx-html-editor-toolbar-menu-separator-margin: #{$html-editor-toolbar-menu-separator-margin}; --dx-html-editor-toolbar-padding: var(--dx-html-editor-padding-inline); @@ -38,4 +44,6 @@ --dx-html-editor-toolbar-wrapper-inset-inline-start: #{$html-editor-toolbar-wrapper-inset-inline-start}; --dx-html-editor-uploader-cover-bg: #{$html-editor-uploader-cover-bg}; --dx-html-editor-variable-bg: #{$html-editor-variable-bg}; + --dx-html-editor-variable-border-radius: #{$html-editor-variable-border-radius}; + --dx-html-editor-variable-padding: #{$html-editor-variable-padding}; } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss index fe9c5af8de05..0346f3b8a051 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss @@ -52,3 +52,14 @@ $html-editor-border-block-end-active: ds.$border-width-20 solid !default; // Base-layer values injected with design tokens (wave B1) $html-editor-ai-dialog-title-font-weight: ds.$font-weight-title-default !default; + +// Base-layer sizing injected with design tokens (wave B14) +$html-editor-border-width: ds.$border-width-10 !default; +$html-editor-variable-padding: ds.$spacing-30 ds.$spacing-60 !default; +$html-editor-variable-border-radius: ds.$border-radius-80 !default; +$html-editor-blockquote-padding-inline-start: ds.$spacing-120 !default; +$html-editor-blockquote-border-inline-start-width: ds.$border-width-40 !default; +$html-editor-table-cell-padding: ds.$spacing-20 ds.$spacing-50 !default; +$html-editor-placeholder-inset-inline: ds.$spacing-150 !default; +$html-editor-table-resizer-thickness: ds.$spacing-50 !default; +$html-editor-table-resizer-highlight-thickness: ds.$spacing-30 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss index 79e35fdd0ea3..15efe3fd03e2 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss @@ -13,6 +13,7 @@ $list-static-delete-button-padding: var(--dx-list-delete-button-static-padding), $list-next-button-padding: var(--dx-list-next-button-padding), $list-response-wait-opacity: var(--dx-list-response-wait-opacity), + $list-searchbox-margin-bottom: var(--dx-list-search-box-margin-block-end), ); @use "../../base/list/mixins" as *; @use "../radioButton/colors" as radioButtonColors; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss index bea6c9e80933..7e165526c4d6 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss @@ -1,6 +1,11 @@ @use "colors" as *; @use "sizes" as *; -@use "../../base/loadIndicator" as baseLoadIndicator; +@use "../../base/loadIndicator" as baseLoadIndicator with ( + $loadindicator-width: var(--dx-load-indicator-size), + $loadindicator-height: var(--dx-load-indicator-size), + $loadindicator-offset-top: var(--dx-load-indicator-offset), + $loadindicator-offset-left: var(--dx-load-indicator-offset), +); .dx-loadindicator { line-height: 100%; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss index f5477c62d129..ac400afe6ea7 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss @@ -2,9 +2,11 @@ @use "sizes" as *; @mixin publish { + --dx-load-indicator-offset: #{$load-indicator-offset}; --dx-load-indicator-segment-border: #{$load-indicator-segment-border}; --dx-load-indicator-segment-border-width: #{$load-indicator-segment-border-width}; --dx-load-indicator-segment-inner-border: #{$load-indicator-segment-inner-border}; + --dx-load-indicator-size: #{$load-indicator-size}; --dx-load-indicator-sparkle-stop-1-bg: #{$load-indicator-sparkle-stop-1-bg}; --dx-load-indicator-sparkle-stop-2-bg: #{$load-indicator-sparkle-stop-2-bg}; --dx-load-indicator-sparkle-stop-3-bg: #{$load-indicator-sparkle-stop-3-bg}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_sizes.scss index c29eb0bbf777..a04376bc8660 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_sizes.scss @@ -1,2 +1,13 @@ +@use "../../../_design-system/variables/ds" as ds; + // Values hoisted from style-file literals (tokenized) $load-indicator-segment-border-width: 0.12em !default; // dx-relative: scales with the parent font-size + +// Base-layer sizing injected with design tokens (wave B5) +$load-indicator-size: ds.$spacing-320 !default; + +/* + * Derived once and published, so the four centring declarations in the base layer read a var() + * instead of each shipping its own calc() (see the tier-published derived sizes of #34927). + */ +$load-indicator-offset: calc(#{$load-indicator-size} / -2) !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss index 4440de94ade6..a3fa8f5a0a45 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss @@ -3,6 +3,8 @@ @use "../sizes" as *; @use "../../base/icon_fonts" as *; @use "../../base/numberBox" with ( + $spin-container-width: var(--dx-number-box-spin-container-width), + $touch-friendly-spin-container-width: var(--dx-number-box-spin-container-touch-friendly-width), $numberbox-spin-idle-opacity: var(--dx-number-box-spin-opacity), ); @use "../textEditor" as *; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss index 1a436d00b711..91cfe121bcf8 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss @@ -2,8 +2,11 @@ @use "sizes" as *; @use "../../base/icon_fonts" as *; @use "../../base/pagination" with ( - $pagination-page-padding-fallback: null, - $pagination-navigate-button-width-fallback: null, + $pagination-page-padding-fallback: false, + $pagination-navigate-button-width-fallback: false, + $pagination-padding-block-fallback: false, + $pagination-navigate-button-padding-block-fallback: false, + $pagination-info-paddings: var(--dx-pagination-info-margin-inline), $pagination-page-margin-left: var(--dx-pagination-page-margin-inline-start), $pagination-page-margin-right: var(--dx-pagination-page-margin-inline-end), $pagination-separator-padding-left: var(--dx-pagination-separator-padding-inline-start), diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss index c281fa39ed3d..98f84d82e9f9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss @@ -8,6 +8,7 @@ --dx-pagination-first-child-padding-inline-end: #{$pagination-first-child-padding-inline-end}; --dx-pagination-first-child-padding-inline-start: #{$pagination-first-child-padding-inline-start}; --dx-pagination-font-weight-selected: #{$pagination-font-weight-selected}; + --dx-pagination-info-margin-inline: #{$pagination-info-margin-inline}; --dx-pagination-info-opacity: #{$pagination-info-opacity}; --dx-pagination-nav-button-height: #{$pagination-nav-button-height}; --dx-pagination-nav-button-icon-size: #{$pagination-nav-button-icon-size}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss index 4b3f6759216f..52964a2add6c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss @@ -49,3 +49,6 @@ $pagination-pages-count-padding-inline-start: ds.$spacing-60 !default; // B2 tail: pagination page horizontal padding $pagination-page-padding-inline: ds.$spacing-130 !default; + +// Base-layer sizing injected with design tokens (wave B9) +$pagination-info-margin-inline: ds.$spacing-90 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss index 2aedfa753267..00aa91379787 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss @@ -5,6 +5,11 @@ @use "../treeView/sizes" as treeViewSizes; @use "../button/sizes" as buttonSizes; @use "../../base/pivotGrid" as basePivotGrid with ( + $pivotgrid-border-width: var(--dx-pivot-grid-border-width), + $pivotgrid-focus-outline-width: var(--dx-focus-rect-outline-width), + $pivotgrid-focus-outline-offset: var(--dx-focus-rect-outline-offset-inset), + $pivotgrid-icon-size: var(--dx-pivot-grid-icon-size), + $pivotgrid-common-field-padding: var(--dx-pivot-grid-field-padding), $pivotgrid-common-field-chooser-drag-width: var(--dx-pivot-grid-field-chooser-drag-width), $pivotgrid-common-field-chooser-drag-height: var(--dx-pivot-grid-field-chooser-drag-height), $pivotgrid-position-indicator-vertical-height: var(--dx-pivot-grid-position-indicator-vertical-height), diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss index 06e700698a28..43340f090a07 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss @@ -14,6 +14,7 @@ --dx-pivot-grid-area-fields-margin-block-start: #{$pivot-grid-area-fields-margin-block-start}; --dx-pivot-grid-area-font-size: #{$pivot-grid-area-font-size}; --dx-pivot-grid-area-padding: #{$pivot-grid-area-padding}; + --dx-pivot-grid-border-width: #{$pivot-grid-border-width}; --dx-pivot-grid-border: #{$pivot-grid-border}; --dx-pivot-grid-border-disabled: #{$pivot-grid-border-disabled}; --dx-pivot-grid-button-margin: #{$pivot-grid-button-margin}; @@ -44,6 +45,7 @@ --dx-pivot-grid-field-chooser-drag-width: #{$pivot-grid-field-chooser-drag-width}; --dx-pivot-grid-field-chooser-field-min-height: #{$pivot-grid-field-chooser-field-min-height}; --dx-pivot-grid-field-indicators-offset: #{$pivot-grid-field-indicators-offset}; + --dx-pivot-grid-field-padding: #{$pivot-grid-field-padding}; --dx-pivot-grid-fields-area-head-cell-padding-inline: #{$pivot-grid-fields-area-head-cell-padding-inline}; --dx-pivot-grid-fields-area-head-padding: #{$pivot-grid-fields-area-head-padding}; --dx-pivot-grid-fields-area-head-padding-inline-start: #{$pivot-grid-fields-area-head-padding-inline-start}; @@ -54,6 +56,7 @@ --dx-pivot-grid-header-top-bottom-padding: #{$pivot-grid-header-top-bottom-padding}; --dx-pivot-grid-headers-font-size: #{$pivot-grid-headers-font-size}; --dx-pivot-grid-icon-margin: #{$pivot-grid-icon-margin}; + --dx-pivot-grid-icon-size: #{$pivot-grid-icon-size}; --dx-pivot-grid-icon-sorted-margin-inline-end: #{$pivot-grid-icon-sorted-margin-inline-end}; --dx-pivot-grid-icon-sorted-margin-inline-start: #{$pivot-grid-icon-sorted-margin-inline-start}; --dx-pivot-grid-indicators-line-height: #{$pivot-grid-indicators-line-height}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss index 478b71a9012e..29fa3d3d0dd7 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss @@ -85,3 +85,8 @@ $pivot-grid-field-chooser-drag-height: ds.$spacing-1000 !default; // B2 tail: pivotGrid cell side paddings $pivot-grid-header-cell-padding-inline: ds.$spacing-20 !default; $pivot-grid-fields-area-head-cell-padding-inline: ds.$spacing-20 !default; + +// Base-layer sizing injected with design tokens (wave B16) +$pivot-grid-border-width: ds.$border-width-10 !default; +$pivot-grid-icon-size: ds.$spacing-140 !default; +$pivot-grid-field-padding: ds.$spacing-20 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss index da5b38496f34..d03ada398496 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss @@ -3,7 +3,7 @@ @use "../../base/icon_fonts" as *; @use "../toolbar/mixins" as *; @use "../../base/popup" with ( - $popup-title-min-height-fallback: null, + $popup-title-min-height-fallback: false, $popup-title-padding: var(--dx-popup-title-padding), $popup-dialog-message-padding: var(--dx-popup-dialog-message-padding), $popup-dialog-shader-color: var(--dx-popup-dialog-backdrop), diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss index 0172d2cdaac8..71ea134a6df0 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss @@ -1,7 +1,11 @@ @use "colors" as *; @use "sizes" as *; @use "../sizes" as *; -@use "../../base/recurrenceEditor" ; +@use "../../base/recurrenceEditor" with ( + $recurrence-interval-number-box-margin-top: var(--dx-recurrence-editor-interval-number-box-margin-block-start), + $recurrence-radio-group-item-padding: var(--dx-recurrence-editor-radio-group-item-padding-block-end), + $recurrence-button-group-item-padding: var(--dx-recurrence-editor-button-group-padding), +); .dx-recurrence-numberbox-interval { margin-right: var(--dx-recurrence-editor-number-box-margin); @@ -9,14 +13,9 @@ .dx-recurrence-numberbox-interval-label { font-size: $global-font-size; - margin-top: var(--dx-recurrence-editor-interval-number-box-margin-block-start); } .dx-recurrence-button-group { - .dx-button-content { - padding: var(--dx-recurrence-editor-button-group-padding); - } - .dx-buttongroup-wrapper > div { min-width: 0; } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss index c635ec8e14c2..7a22688ed3ed 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss @@ -5,6 +5,7 @@ --dx-recurrence-editor-count-number-box-margin-block-start: #{$recurrence-editor-count-number-box-margin-block-start}; --dx-recurrence-editor-interval-number-box-margin-block-start: #{$recurrence-editor-interval-number-box-margin-block-start}; --dx-recurrence-editor-number-box-margin: #{$recurrence-editor-number-box-margin}; + --dx-recurrence-editor-radio-group-item-padding-block-end: #{$recurrence-editor-radio-group-item-padding-block-end}; --dx-recurrence-editor-radio-group-margin: #{$recurrence-editor-radio-group-margin}; --dx-recurrence-editor-until-date-box-margin-block-start: #{$recurrence-editor-until-date-box-margin-block-start}; } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_sizes.scss index 1d24d8437abb..e3492f94ed7f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_sizes.scss @@ -17,6 +17,9 @@ $recurrence-editor-interval-number-box-margin-block-start: null !default; $recurrence-editor-interval-number-box-margin-block-start: ds.$spacing-220 !default; } +// Base-layer sizing injected with design tokens (wave B4) +$recurrence-editor-radio-group-item-padding-block-end: ds.$spacing-100 !default; + // Values hoisted from style-file literals (tokenized) $recurrence-editor-number-box-margin: ds.$spacing-110 !default; $recurrence-editor-button-group-padding: ds.$spacing-60 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss index 02aa7eff8315..88c1490f6b67 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss @@ -9,6 +9,23 @@ @use "../../base/mixins" as *; @use "../../base/icon_fonts" as *; @use "../../base/scheduler" as baseScheduler with ( + $scheduler-appointment-collector-height: var(--dx-scheduler-appointment-collector-height), + $scheduler-appointment-min-size: var(--dx-scheduler-appointment-min-size), + $scheduler-appointment-content-padding: var(--dx-scheduler-appointment-content-padding), + $scheduler-appointment-reduced-content-padding: var(--dx-scheduler-appointment-reduced-content-padding), + $scheduler-grouped-appointment-month-text-size: var(--dx-scheduler-appointment-month-text-font-size), + $scheduler-border-width: var(--dx-scheduler-border-width), + $scheduler-workspace-info-font-size: var(--dx-scheduler-workspace-info-font-size), + $scheduler-small-font-size: var(--dx-scheduler-small-font-size), + $scheduler-group-header-table-cell-height: var(--dx-scheduler-group-header-cell-height), + $scheduler-month-date-text-size: var(--dx-scheduler-month-date-text-font-size), + $scheduler-month-date-text-padding: var(--dx-scheduler-month-date-text-padding), + $scheduler-reduced-icon-offset: var(--dx-scheduler-reduced-icon-inset-inline), + $scheduler-recurrence-icon-offset: var(--dx-scheduler-recurrence-icon-inset-inline), + $scheduler-agenda-appointment-margin: var(--dx-scheduler-agenda-appointment-margin), + $scheduler-agenda-last-in-date-appointment-margin: var(--dx-scheduler-agenda-appointment-last-margin), + $scheduler-time-indicator-font-size: var(--dx-scheduler-time-indicator-font-size), + $scheduler-time-indicator-size: var(--dx-scheduler-time-indicator-size), $scheduler-appointment-reduced-icon-top: var(--dx-scheduler-appointment-reduced-icon-inset-block-start), $scheduler-appointment-active-marker-border-radius: var(--dx-scheduler-appointment-marker-border-radius-active), $scheduler-appointment-content-details-margin-top: var(--dx-scheduler-appointment-content-details-margin-block-start), @@ -815,11 +832,6 @@ } } -.dx-scheduler-header-panel, -.dx-scheduler-time-panel { - font-size: var(--dx-scheduler-workspace-info-font-size); -} - .dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) .dx-scheduler-group-row th, .dx-scheduler-work-space.dx-scheduler-work-space-grouped:not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-timeline) .dx-scheduler-last-group-cell { border-right: var(--dx-scheduler-last-group-cell-border-inline-end); @@ -983,10 +995,6 @@ } } -.dx-scheduler-agenda-nodata { - font-size: var(--dx-scheduler-workspace-info-font-size); -} - .dx-popup-content .dx-scheduler-dropdown-appointment-buttons-block { .dx-button { min-width: auto; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss index f144f950b516..593c4b66a085 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss @@ -9,6 +9,8 @@ --dx-scheduler-agenda-appointment-content: #{$scheduler-agenda-appointment-content}; --dx-scheduler-agenda-appointment-item-border-radius: #{$scheduler-agenda-appointment-item-border-radius}; --dx-scheduler-agenda-appointment-item-padding: #{$scheduler-agenda-appointment-item-padding}; + --dx-scheduler-agenda-appointment-last-margin: #{$scheduler-agenda-appointment-last-margin}; + --dx-scheduler-agenda-appointment-margin: #{$scheduler-agenda-appointment-margin}; --dx-scheduler-agenda-appointment-recurrence-icon: #{$scheduler-agenda-appointment-recurrence-icon}; --dx-scheduler-agenda-appointment-resource-item-margin-inline-start: #{$scheduler-agenda-appointment-resource-item-margin-inline-start}; --dx-scheduler-agenda-appointment-resource-value-margin-inline-start: #{$scheduler-agenda-appointment-resource-value-margin-inline-start}; @@ -43,15 +45,16 @@ --dx-scheduler-appointment-base-content: #{$scheduler-appointment-base-content}; --dx-scheduler-appointment-bg-focused: #{$scheduler-appointment-bg-focused}; --dx-scheduler-appointment-border-radius: #{$scheduler-appointment-border-radius}; + --dx-scheduler-appointment-collector-height: #{$scheduler-appointment-collector-height}; --dx-scheduler-appointment-collector-margin-inline-end: #{$scheduler-appointment-collector-margin-inline-end}; --dx-scheduler-appointment-collector-margin-inline-start: #{$scheduler-appointment-collector-margin-inline-start}; --dx-scheduler-appointment-collector-width: #{$scheduler-appointment-collector-width}; + --dx-scheduler-appointment-content-padding: #{$scheduler-appointment-content-padding}; --dx-scheduler-appointment-content: #{$scheduler-appointment-content}; --dx-scheduler-appointment-content-active: #{$scheduler-appointment-content-active}; --dx-scheduler-appointment-content-details-font-size: #{$scheduler-appointment-content-details-font-size}; --dx-scheduler-appointment-content-details-margin-block-start: #{$scheduler-appointment-content-details-margin-block-start}; --dx-scheduler-appointment-content-focused: var(--dx-scheduler-appointment-content); - --dx-scheduler-appointment-content-padding: #{$scheduler-appointment-content-padding}; --dx-scheduler-appointment-content-padding-inline-end: #{$scheduler-appointment-content-padding-inline-end}; --dx-scheduler-appointment-content-rtl-padding: #{$scheduler-appointment-content-rtl-padding}; --dx-scheduler-appointment-date-opacity: #{$scheduler-appointment-date-opacity}; @@ -60,7 +63,9 @@ --dx-scheduler-appointment-dragging-shadow: #{$scheduler-appointment-dragging-shadow}; --dx-scheduler-appointment-icon-font-size: #{$scheduler-appointment-icon-font-size}; --dx-scheduler-appointment-marker-border-radius-active: #{$scheduler-appointment-marker-border-radius-active}; + --dx-scheduler-appointment-min-size: #{$scheduler-appointment-min-size}; --dx-scheduler-appointment-month-font-size: #{$scheduler-appointment-month-font-size}; + --dx-scheduler-appointment-month-text-font-size: #{$scheduler-appointment-month-text-font-size}; --dx-scheduler-appointment-opacity-disabled: #{$scheduler-appointment-opacity-disabled}; --dx-scheduler-appointment-overlay-bg: #{$scheduler-appointment-overlay-bg}; --dx-scheduler-appointment-popup-all-day-item-height: #{$scheduler-appointment-popup-all-day-item-height}; @@ -72,6 +77,7 @@ --dx-scheduler-appointment-popup-repeat-end-item-height: #{$scheduler-appointment-popup-repeat-end-item-height}; --dx-scheduler-appointment-popup-toolbar-height: #{$scheduler-appointment-popup-toolbar-height}; --dx-scheduler-appointment-recurrence-icon-inset-block-start: #{$scheduler-appointment-recurrence-icon-inset-block-start}; + --dx-scheduler-appointment-reduced-content-padding: #{$scheduler-appointment-reduced-content-padding}; --dx-scheduler-appointment-reduced-icon-inset-block-start: #{$scheduler-appointment-reduced-icon-inset-block-start}; --dx-scheduler-appointment-reduced-icon-rtl-inset-inline-start: #{$scheduler-appointment-reduced-icon-rtl-inset-inline-start}; --dx-scheduler-appointment-resizing-opacity: #{$scheduler-appointment-resizing-opacity}; @@ -94,6 +100,7 @@ --dx-scheduler-appointment-transparent-right-border: #{$scheduler-appointment-transparent-right-border}; --dx-scheduler-base-border: #{$scheduler-base-border}; --dx-scheduler-bg: #{$scheduler-bg}; + --dx-scheduler-border-width: #{$scheduler-border-width}; --dx-scheduler-border: #{$scheduler-border}; --dx-scheduler-border-radius: #{$scheduler-border-radius}; --dx-scheduler-cell-bg-active: #{$scheduler-cell-bg-active}; @@ -120,6 +127,7 @@ --dx-scheduler-form-icon: #{$scheduler-form-icon}; --dx-scheduler-group-header-agenda-font-size: #{$scheduler-group-header-agenda-font-size}; --dx-scheduler-group-header-border-block-end: #{$scheduler-group-header-border-block-end}; + --dx-scheduler-group-header-cell-height: #{$scheduler-group-header-cell-height}; --dx-scheduler-group-header-content-inset-block-start: #{$scheduler-group-header-content-inset-block-start}; --dx-scheduler-group-header-content-padding-block-start: #{$scheduler-group-header-content-padding-block-start}; --dx-scheduler-group-header-font-size: #{$scheduler-group-header-font-size}; @@ -147,6 +155,8 @@ --dx-scheduler-month-appointment-content-padding: #{$scheduler-month-appointment-content-padding}; --dx-scheduler-month-appointment-content-rtl-padding: #{$scheduler-month-appointment-content-rtl-padding}; --dx-scheduler-month-date-font-size: #{$scheduler-month-date-font-size}; + --dx-scheduler-month-date-text-font-size: #{$scheduler-month-date-text-font-size}; + --dx-scheduler-month-date-text-padding: #{$scheduler-month-date-text-padding}; --dx-scheduler-month-recurrence-appointment-content-padding: #{$scheduler-month-recurrence-appointment-content-padding}; --dx-scheduler-month-recurrence-appointment-content-rtl-padding: #{$scheduler-month-recurrence-appointment-content-rtl-padding}; --dx-scheduler-navigator-button-font-size: #{$scheduler-navigator-button-font-size}; @@ -154,11 +164,14 @@ --dx-scheduler-other-month-cell-opacity: #{$scheduler-other-month-cell-opacity}; --dx-scheduler-panel-content: #{$scheduler-panel-content}; --dx-scheduler-recurrence-appointment-content-padding: #{$scheduler-recurrence-appointment-content-padding}; + --dx-scheduler-recurrence-icon-inset-inline: #{$scheduler-recurrence-icon-inset-inline}; --dx-scheduler-recurring-appointment-content-padding: #{$scheduler-recurring-appointment-content-padding}; --dx-scheduler-recurring-appointment-content-rtl-padding: #{$scheduler-recurring-appointment-content-rtl-padding}; + --dx-scheduler-reduced-icon-inset-inline: #{$scheduler-reduced-icon-inset-inline}; --dx-scheduler-rtl-border-inline-start: #{$scheduler-rtl-border-inline-start}; --dx-scheduler-rtl-padding: #{$scheduler-rtl-padding}; --dx-scheduler-scrollable-content-min-height: #{$scheduler-scrollable-content-min-height}; + --dx-scheduler-small-font-size: #{$scheduler-small-font-size}; --dx-scheduler-small-margin-block-end: #{$scheduler-small-margin-block-end}; --dx-scheduler-small-margin-block-start: #{$scheduler-small-margin-block-start}; --dx-scheduler-small-margin-inline-start: #{$scheduler-small-margin-inline-start}; @@ -166,6 +179,8 @@ --dx-scheduler-small-padding-inline-start: #{$scheduler-small-padding-inline-start}; --dx-scheduler-time-indicator-bg: #{$scheduler-time-indicator-bg}; --dx-scheduler-time-indicator-content: #{$scheduler-time-indicator-content}; + --dx-scheduler-time-indicator-font-size: #{$scheduler-time-indicator-font-size}; + --dx-scheduler-time-indicator-size: #{$scheduler-time-indicator-size}; --dx-scheduler-time-panel-cell-margin-block-start: #{$scheduler-time-panel-cell-margin-block-start}; --dx-scheduler-time-panel-font-size: #{$scheduler-time-panel-font-size}; --dx-scheduler-timeline-cell-height: #{$scheduler-timeline-cell-height}; @@ -203,13 +218,13 @@ --dx-scheduler-views-vertical-group-min-height: #{$scheduler-views-vertical-group-min-height}; --dx-scheduler-virtual-row-height: #{$scheduler-virtual-row-height}; --dx-scheduler-widget-margin-block-end: #{$scheduler-widget-margin-block-end}; + --dx-scheduler-workspace-info-font-size: #{$scheduler-workspace-info-font-size}; --dx-scheduler-workspace-accent-content: #{$scheduler-workspace-accent-content}; --dx-scheduler-workspace-bg: #{$scheduler-workspace-bg}; --dx-scheduler-workspace-cell-content-active: var(--dx-scheduler-accent-border); --dx-scheduler-workspace-cell-content-focused: #{$scheduler-workspace-cell-content-focused}; --dx-scheduler-workspace-cell-content-hovered: var(--dx-scheduler-workspace-month-content); --dx-scheduler-workspace-date-table-cell-height: #{$scheduler-workspace-date-table-cell-height}; - --dx-scheduler-workspace-info-font-size: #{$scheduler-workspace-info-font-size}; --dx-scheduler-workspace-month-cell-left-offset: #{$scheduler-workspace-month-cell-left-offset}; --dx-scheduler-workspace-month-content: #{$scheduler-workspace-month-content}; --dx-scheduler-workspace-month-header-height: #{$scheduler-workspace-month-header-height}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_sizes.scss index 95a8afa4b61d..bbc7fa3f888d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_sizes.scss @@ -330,3 +330,20 @@ $scheduler-virtual-row-height: 50px !default; // dx-offscale: 50px * variables (NAMING.md, O7). */ $scheduler-all-day-table-cell-height: calc(#{$scheduler-workspace-date-table-cell-height} * 1.5); + +// Base-layer sizing injected with design tokens (wave B15) +$scheduler-appointment-collector-height: ds.$spacing-220 !default; +$scheduler-appointment-min-size: ds.$spacing-40 !default; +$scheduler-appointment-reduced-content-padding: ds.$spacing-400 !default; +$scheduler-appointment-month-text-font-size: ds.$font-size-120 !default; +$scheduler-border-width: ds.$border-width-10 !default; +$scheduler-reduced-icon-inset-inline: ds.$spacing-50 !default; +$scheduler-recurrence-icon-inset-inline: ds.$spacing-200 !default; +$scheduler-agenda-appointment-margin: ds.$spacing-50 !default; +$scheduler-agenda-appointment-last-margin: ds.$spacing-200 !default; +$scheduler-time-indicator-font-size: ds.$font-size-300 !default; +$scheduler-time-indicator-size: ds.$spacing-10 !default; +$scheduler-small-font-size: ds.$font-size-140 !default; +$scheduler-group-header-cell-height: ds.$spacing-300 !default; +$scheduler-month-date-text-font-size: ds.$font-size-160 !default; +$scheduler-month-date-text-padding: ds.$spacing-60 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss index 7cfa24048aaa..974fccc2bd50 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss @@ -16,12 +16,15 @@ $scrollview-scrollbottom-indicator-margin: var(--dx-scroll-view-scroll-bottom-indicator-margin), $scrollview-scrollbottom-indicator-margin-rtl: var(--dx-scroll-view-scroll-bottom-indicator-rtl-margin), $scrollview-pulldown-icon-font-size: var(--dx-scroll-view-pull-down-icon-font-size), + $pulldown-height: var(--dx-scroll-view-pull-down-height), + $pulldown-padding: var(--dx-scroll-view-pull-down-padding), + $pulldown-top-offset: var(--dx-scroll-view-pull-down-top-offset), ); .dx-scrollview-scrollbottom-text, .dx-scrollview-pull-down-text { margin-left: var(--dx-scroll-view-pull-down-text-margin-inline-start); - top: calc((50px - #{$global-font-size}) / 2); // dx-fixed-size: 50px pull-down area height + top: calc((var(--dx-scroll-view-pull-down-height) - #{$global-font-size}) / 2); display: inline-block; .dx-rtl & { diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_public.scss index f92a2ee5b14e..7e78fd1f520a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_public.scss @@ -5,12 +5,15 @@ --dx-scroll-view-icon-pull-down-padding: #{$scroll-view-icon-pull-down-padding}; --dx-scroll-view-load-indicator-font-size: #{$scroll-view-load-indicator-font-size}; --dx-scroll-view-load-indicator-size: #{$scroll-view-load-indicator-size}; + --dx-scroll-view-pull-down-height: #{$scroll-view-pull-down-height}; --dx-scroll-view-pull-down-icon-font-size: #{$scroll-view-pull-down-icon-font-size}; --dx-scroll-view-pull-down-image-height: #{$scroll-view-pull-down-image-height}; --dx-scroll-view-pull-down-image-margin: #{$scroll-view-pull-down-image-margin}; --dx-scroll-view-pull-down-indicator-padding: #{$scroll-view-pull-down-indicator-padding}; --dx-scroll-view-pull-down-indicator-width: #{$scroll-view-pull-down-indicator-width}; + --dx-scroll-view-pull-down-padding: #{$scroll-view-pull-down-padding}; --dx-scroll-view-pull-down-text-margin-inline-start: #{$scroll-view-pull-down-text-margin-inline-start}; + --dx-scroll-view-pull-down-top-offset: #{$scroll-view-pull-down-top-offset}; --dx-scroll-view-rtl-margin-inline-end: #{$scroll-view-rtl-margin-inline-end}; --dx-scroll-view-scroll-bottom-image-height: #{$scroll-view-scroll-bottom-image-height}; --dx-scroll-view-scroll-bottom-image-width: #{$scroll-view-scroll-bottom-image-width}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_sizes.scss index a5a608b0410b..ae0e332c3a68 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_sizes.scss @@ -22,3 +22,13 @@ $scroll-view-pull-down-image-height: 50px !default; // dx-offscale: 50px $scroll-view-scroll-bottom-padding: ds.$spacing-100 0 !default; $scroll-view-scroll-bottom-indicator-margin: 0 ds.$spacing-100 0 0 !default; $scroll-view-scroll-bottom-indicator-rtl-margin: 0 0 0 ds.$spacing-100 !default; + +// Base-layer sizing injected with design tokens (wave B6) +$scroll-view-pull-down-height: 50px !default; // dx-offscale: 50px, the spacing scale has no 50px step +$scroll-view-pull-down-padding: ds.$spacing-150 !default; + +/* + * Derived once and published: base parks the pull-down area above the viewport by its own height + * plus both paddings. Deriving keeps the three in step instead of freezing -80px. + */ +$scroll-view-pull-down-top-offset: calc(-1 * (#{$scroll-view-pull-down-height} + #{$scroll-view-pull-down-padding} * 2)) !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss index 596d254c8cec..693e3e82de79 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss @@ -2,6 +2,7 @@ @use "colors" as *; @use "sizes" as *; @use "../../base/slider" with ( + $slider-tooltip-content-height: var(--dx-slider-tooltip-height), $slider-label-position-bottom-padding-bottom: var(--dx-slider-label-bottom-padding-block-end), $slider-label-position-top-padding-top: var(--dx-slider-label-top-padding-block-start), ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss index c5193b391c51..1f15885ce739 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss @@ -23,6 +23,7 @@ --dx-slider-label-bottom-padding-block-end: #{$slider-label-bottom-padding-block-end}; --dx-slider-label-top-inset-block-start: #{$slider-label-top-inset-block-start}; --dx-slider-label-top-padding-block-start: #{$slider-label-top-padding-block-start}; + --dx-slider-tooltip-height: #{$slider-tooltip-height}; --dx-slider-tooltip-content: #{$slider-tooltip-content}; --dx-slider-tooltip-top-padding-block-start: #{$slider-tooltip-top-padding-block-start}; --dx-slider-tooltip-width: #{$slider-tooltip-width}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_sizes.scss index 134aeb6472a5..af6d6d7b145b 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_sizes.scss @@ -34,3 +34,6 @@ $slider-label-top-inset-block-start: -15px !default; // dx-offscale: -15px // Base-layer sizing injected with design tokens (wave B2) $slider-label-bottom-padding-block-end: ds.$spacing-140 !default; $slider-label-top-padding-block-start: ds.$spacing-140 !default; + +// Base-layer sizing injected with design tokens (wave B12) +$slider-tooltip-height: ds.$spacing-280 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss index f06b79c84f2d..e71d3dd2dfe0 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss @@ -47,4 +47,7 @@ var(--dx-stepper-step-content-disabled), var(--dx-stepper-step-bg-disabled), var(--dx-stepper-step-shadow-disabled), + $indicator-ring-inset: var(--dx-stepper-step-indicator-ring-inset), + $indicator-ring-size: var(--dx-stepper-step-indicator-ring-size), + $indicator-halo-size: var(--dx-stepper-step-indicator-halo-size), ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss index 7a974c044a20..d8e26f7ecc5a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss @@ -25,6 +25,9 @@ --dx-stepper-step-content-selected: #{$stepper-step-content-selected}; --dx-stepper-step-font-weight-selected: #{$stepper-step-font-weight-selected}; --dx-stepper-step-icon-size: #{$stepper-step-icon-size}; + --dx-stepper-step-indicator-halo-size: #{$stepper-step-indicator-halo-size}; + --dx-stepper-step-indicator-ring-inset: #{$stepper-step-indicator-ring-inset}; + --dx-stepper-step-indicator-ring-size: #{$stepper-step-indicator-ring-size}; --dx-stepper-step-indicator-size: #{$stepper-step-indicator-size}; --dx-stepper-step-invalid-bg: var(--dx-stepper-step-base-bg); --dx-stepper-step-invalid-bg-hovered: var(--dx-stepper-step-base-bg-hovered); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss index 40542bf0cca5..24385e77205d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss @@ -30,3 +30,8 @@ $stepper-step-transition-duration: 0.4s !default; } $stepper-connector-thickness: ds.$spacing-20 !default; + +// Base-layer sizing injected with design tokens (wave B3) +$stepper-step-indicator-ring-inset: ds.$spacing-20 !default; +$stepper-step-indicator-ring-size: ds.$spacing-40 !default; +$stepper-step-indicator-halo-size: ds.$spacing-80 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss index 1565e4cf0358..1c940122ed6b 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss @@ -14,6 +14,9 @@ var(--dx-switch-handle-margin), var(--dx-switch-handle-border-radius), var(--dx-switch-transition), + $switch-container-border-radius: var(--dx-switch-container-border-radius), + $switch-label-padding: var(--dx-switch-label-padding), + $switch-off-padding-bottom: var(--dx-switch-off-padding-block-end), ); @include dx-switch-states-fluent( var(--dx-switch-on-bg-disabled), diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss index 3e338f4c28d3..66544a68ea8b 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss @@ -5,6 +5,7 @@ --dx-switch-bg: #{$switch-bg}; --dx-switch-border-disabled: #{$switch-border-disabled}; --dx-switch-box-shadow: #{$switch-box-shadow}; + --dx-switch-container-border-radius: #{$switch-container-border-radius}; --dx-switch-container-height: var(--dx-switch-height); --dx-switch-container-margin-block: #{$switch-container-margin-block}; --dx-switch-container-padding-inline: var(--dx-switch-handle-margin); @@ -22,9 +23,11 @@ --dx-switch-invalid-border-focused: #{$switch-invalid-border-focused}; --dx-switch-invalid-border-hovered: #{$switch-invalid-border-hovered}; --dx-switch-invalid-border: #{$switch-invalid-border}; + --dx-switch-label-padding: #{$switch-label-padding}; --dx-switch-off-border-active: #{$switch-off-border-active}; --dx-switch-off-border-hovered: #{$switch-off-border-hovered}; --dx-switch-off-border: #{$switch-off-border}; + --dx-switch-off-padding-block-end: #{$switch-off-padding-block-end}; --dx-switch-on-bg-disabled: #{$switch-on-bg-disabled}; --dx-switch-on-bg: #{$switch-on-bg}; --dx-switch-on-border-focused: #{$switch-on-border-focused}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_sizes.scss index 8de499ab0562..3d4bdc307a4e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_sizes.scss @@ -40,3 +40,8 @@ $switch-container-rtl-offset: ds.$spacing-60 !default; $switch-container-margin-block: 0 !default; $switch-height: ds.$spacing-160 !default; } + +// Base-layer sizing injected with design tokens (wave B7) +$switch-container-border-radius: ds.$border-radius-full !default; +$switch-label-padding: ds.$spacing-40 0 !default; +$switch-off-padding-block-end: ds.$spacing-100 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss index 96cf7f1479a3..11af10f139f5 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss @@ -517,6 +517,9 @@ 1px, // dx-px-nudge: 1px label margin-top difference var(--dx-text-editor-font-size), var(--dx-text-editor-label-outside-height), + $label-padding-inline: var(--dx-text-editor-label-padding-inline), + $label-border-radius: var(--dx-text-editor-label-border-radius), + $label-backdrop-height: var(--dx-text-editor-label-backdrop-height), ); @include dx-editor-filled( $text-editor-label-transition, @@ -573,4 +576,9 @@ 0, var(--dx-text-editor-spin-button-padding-inline), buttonSizes.$button-padding-block, + $button-margin-block-start: var(--dx-text-editor-button-margin-block-start), + $button-margin-block-end: var(--dx-text-editor-button-margin-block-end), + $button-icon-margin-block-start: var(--dx-text-editor-button-icon-margin-block-start), + $button-icon-margin-block-start-with-text: var(--dx-text-editor-button-icon-with-text-margin-block-start), + $button-icononly-padding: var(--dx-text-editor-button-icon-only-padding), ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss index 5ab9a479230a..4990f7211779 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss @@ -8,6 +8,11 @@ --dx-text-editor-border: #{$text-editor-border}; --dx-text-editor-border-width: #{$text-editor-border-width}; --dx-text-editor-button-filled-inset-inline-end: #{$text-editor-button-filled-inset-inline-end}; + --dx-text-editor-button-icon-with-text-margin-block-start: #{$text-editor-button-icon-with-text-margin-block-start}; + --dx-text-editor-button-icon-margin-block-start: #{$text-editor-button-icon-margin-block-start}; + --dx-text-editor-button-icon-only-padding: #{$text-editor-button-icon-only-padding}; + --dx-text-editor-button-margin-block-end: #{$text-editor-button-margin-block-end}; + --dx-text-editor-button-margin-block-start: #{$text-editor-button-margin-block-start}; --dx-text-editor-button-underlined-height: #{$text-editor-button-underlined-height}; --dx-text-editor-clear-button-icon: #{$text-editor-clear-button-icon}; --dx-text-editor-clear-button-width: #{$text-editor-clear-button-width}; @@ -36,6 +41,8 @@ --dx-text-editor-invalid-border-focused: #{$text-editor-invalid-border-focused}; --dx-text-editor-invalid-border: #{$text-editor-invalid-border}; --dx-text-editor-invalid-content: #{$text-editor-invalid-content}; + --dx-text-editor-label-backdrop-height: #{$text-editor-label-backdrop-height}; + --dx-text-editor-label-border-radius: #{$text-editor-label-border-radius}; --dx-text-editor-label-content-focused: #{$text-editor-label-content-focused}; --dx-text-editor-label-content: var(--dx-text-editor-placeholder); --dx-text-editor-label-font-size: #{$text-editor-label-font-size}; @@ -45,6 +52,7 @@ --dx-text-editor-label-offset: #{$text-editor-label-offset}; --dx-text-editor-label-outside-height: #{$text-editor-label-outside-height}; --dx-text-editor-label-outside-offset: #{$text-editor-label-outside-offset}; + --dx-text-editor-label-padding-inline: #{$text-editor-label-padding-inline}; --dx-text-editor-line-border-block-end-active: #{$text-editor-line-border-block-end-active}; --dx-text-editor-line-border-block-end-width-active: #{$text-editor-line-border-block-end-width-active}; --dx-text-editor-line-border-block-end-width-focused: #{$text-editor-line-border-block-end-width-focused}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_sizes.scss index 9bbdb1b1e30e..14020acfe7da 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_sizes.scss @@ -106,3 +106,13 @@ $text-editor-line-border-block-end-width-active: ds.$border-width-20 !default; // Base-layer sizing injected with design tokens (wave B2) $text-editor-clear-button-width: ds.$spacing-340 !default; + +// Base-layer sizing injected with design tokens (wave B13) +$text-editor-label-padding-inline: ds.$spacing-20 !default; +$text-editor-label-border-radius: ds.$border-radius-10 !default; +$text-editor-label-backdrop-height: ds.$spacing-30 !default; +$text-editor-button-margin-block-start: ds.$spacing-10 !default; +$text-editor-button-margin-block-end: ds.$spacing-30 !default; +$text-editor-button-icon-margin-block-start: ds.$spacing-10 !default; +$text-editor-button-icon-with-text-margin-block-start: ds.$spacing-30 !default; +$text-editor-button-icon-only-padding: ds.$spacing-20 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss index b3147f8dd5e7..42c8aca68556 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss @@ -6,7 +6,14 @@ $timeview-numberbox-width: var(--dx-time-view-field-number-box-width), $timeview-numberbox-spin-touch-friendly-width: var(--dx-time-view-field-number-box-spin-touch-friendly-width), ); -@include clock-action-icons-mixin($time-view-clock-accent-bg, $time-view-clock-bg, $time-view-clock-digits-content); +@include clock-action-icons-mixin( + $time-view-clock-accent-bg, + $time-view-clock-bg, + $time-view-clock-digits-content, + $clock-size: var(--dx-time-view-clock-size), + $arrow-width: var(--dx-time-view-clock-arrow-width), + $arrow-offset: var(--dx-time-view-clock-arrow-offset), +); .dx-timeview { height: auto; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss index 077d95e9f375..f96b81c3ef38 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss @@ -1,7 +1,10 @@ @use "sizes" as *; @mixin publish { + --dx-time-view-clock-arrow-offset: #{$time-view-clock-arrow-offset}; + --dx-time-view-clock-arrow-width: #{$time-view-clock-arrow-width}; --dx-time-view-clock-margin-block-end: #{$time-view-clock-margin-block-end}; + --dx-time-view-clock-size: #{$time-view-clock-size}; --dx-time-view-field-min-height: #{$time-view-field-min-height}; --dx-time-view-field-number-box-spin-touch-friendly-width: #{$time-view-field-number-box-spin-touch-friendly-width}; --dx-time-view-field-number-box-width: #{$time-view-field-number-box-width}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_sizes.scss index d1a2758e8ea8..a07229be01b3 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_sizes.scss @@ -12,3 +12,10 @@ $time-view-number-box-spin-touch-friendly-width: 110px !default; // dx-offscale: // Base-layer sizing injected with design tokens (wave B2) $time-view-field-number-box-width: 70px !default; // dx-offscale: 70px $time-view-field-number-box-spin-touch-friendly-width: 110px !default; // dx-offscale: 110px + +// Base-layer sizing injected with design tokens (wave B8) +$time-view-clock-size: 182px !default; // dx-offscale: 182px, the size of the dial SVG behind it +$time-view-clock-arrow-width: ds.$spacing-100 !default; + +// Derived once and published: the arrows are centred on the dial with half their own width. +$time-view-clock-arrow-offset: calc(#{$time-view-clock-arrow-width} / -2) !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss index 1e7e5f9e7719..3eef3b859c8e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss @@ -181,4 +181,9 @@ } } -@include dx-toolbar-focus-outline(var(--dx-focus-rect-outline), var(--dx-focus-rect-border-radius)); +@include dx-toolbar-focus-outline( + var(--dx-focus-rect-outline), + var(--dx-focus-rect-border-radius), + $outline-width: var(--dx-focus-rect-outline-width), + $outline-offset: var(--dx-focus-rect-outline-offset), +); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss index 93b6c1f66223..492a7aab7244 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss @@ -6,6 +6,7 @@ $treeview-select-all-item-border-bottom: var(--dx-tree-view-select-all-item-border-block-end), $treeview-border-visible-border: var(--dx-tree-view-border-visible-border), $treeview-disabled-opacity: var(--dx-tree-view-opacity-disabled), + $treeview-searchbox-margin-bottom: var(--dx-tree-view-search-box-margin-block-end), ); @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss index a76d389eb464..5792bdb6a708 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss @@ -11,6 +11,7 @@ --dx-validation-message-padding-inline: #{$validation-message-padding-inline}; --dx-validation-overlay-border-radius: #{$validation-overlay-border-radius}; --dx-validation-summary-content: #{$validation-summary-content}; + --dx-validation-summary-item-border-block-end-width: #{$validation-summary-item-border-block-end-width}; --dx-validation-summary-item-margin: #{$validation-summary-item-margin}; --dx-validation-summary-margin-block-start: #{$validation-summary-margin-block-start}; } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_sizes.scss index 65c98052b3ea..da73f702e708 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_sizes.scss @@ -24,3 +24,6 @@ $validation-message-font-size: ds.$font-size-caption-md !default; $validation-message-padding-inline: ds.$spacing-60 !default; $validation-message-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale } + +// Base-layer sizing injected with design tokens (wave B12) +$validation-summary-item-border-block-end-width: ds.$border-width-10 !default; diff --git a/packages/devextreme-scss/tests/base-size-markers.baseline.json b/packages/devextreme-scss/tests/base-size-markers.baseline.json new file mode 100644 index 000000000000..8720caffd498 --- /dev/null +++ b/packages/devextreme-scss/tests/base-size-markers.baseline.json @@ -0,0 +1,5 @@ +{ + "openKnobs": 0, + "unclassified": 0, + "unclassifiedByWidget": {} +} diff --git a/packages/devextreme-scss/tests/base-size-markers.test.ts b/packages/devextreme-scss/tests/base-size-markers.test.ts new file mode 100644 index 000000000000..a1cd2235da3b --- /dev/null +++ b/packages/devextreme-scss/tests/base-size-markers.test.ts @@ -0,0 +1,115 @@ +/* + * Every fixed pixel size in the shared layer scss/widgets/base/** must end up in one of two states: + * set from a theme, or classified with a marker saying why it stays. + * + * The layer is compiled once per bundle, so a number written into it reaches generic, material, + * fluent and fluent-next at the same time. That makes it the opposite of the theme, where the bar is + * zero unmarked (tests/fluent-next-size-markers.test.ts): 444 places cannot be classified in one + * commit, and the layer belongs to the base owners, so this is a RATCHET. The counts are compared + * against tests/base-size-markers.baseline.json and must only ever shrink. Regenerate it + * deliberately, as part of a batch, with: + * + * UPDATE_BASE_SIZE_BASELINE=1 pnpm test + * + * The scan is tools/sizes/inventory.mjs, which reads the places from tools/review/px-audit.mjs — the + * same module the theme gate and SCALES.md are built from, so the three cannot disagree about what + * counts as a place. It is driven as a child process because the tool is ESM and jest transforms + * TypeScript only. + */ + +import { execFileSync } from 'child_process'; +import { readdirSync, readFileSync, writeFileSync } from 'fs'; +import { join } from 'path'; + +const packageRoot = process.cwd(); +const baseRoot = join(packageRoot, 'scss', 'widgets', 'base'); +const tool = join(packageRoot, 'tools', 'sizes', 'inventory.mjs'); +const baselinePath = join(__dirname, 'base-size-markers.baseline.json'); +const updatingBaseline = process.env.UPDATE_BASE_SIZE_BASELINE === '1'; + +const vocabulary = JSON.parse( + readFileSync(join(packageRoot, 'tools', 'review', 'size-markers.json'), 'utf8'), +); +const markers: string[] = vocabulary.categories + .map((category: { marker: string | null }) => category.marker) + .filter(Boolean); + +type Summary = { + comments: number; + settable: { + occurrences: number; variables: number; injected: number; open: number; + }; + owned: { + occurrences: number; + unmarked: number; + byCategory: Record; + byWidget: Record; + }; +}; + +const summary: Summary = JSON.parse( + execFileSync(process.execPath, [tool, '--json'], { encoding: 'utf8', cwd: packageRoot }), +); + +const walk = (dir: string): string[] => readdirSync(dir, { withFileTypes: true }) + .flatMap((entry) => { + const full = join(dir, entry.name); + if (entry.isDirectory()) return walk(full); + return entry.name.endsWith('.scss') ? [full] : []; + }); + +test('the inventory accounts for every px literal in the layer', () => { + /* + * An independent count, so a scanner that quietly stops seeing a file cannot pass the ratchet by + * reporting fewer places. Every literal is either in code (settable or base-owned) or in a + * comment; nothing may fall between the buckets. + */ + const raw = walk(baseRoot).reduce( + (total, file) => total + (readFileSync(file, 'utf8').match(/-?\d*\.?\d+px\b/g)?.length ?? 0), + 0, + ); + expect(summary.settable.occurrences + summary.owned.occurrences + summary.comments).toBe(raw); +}); + +test('no marker name is a substring of a custom property name used in the layer', () => { + /* + * Same trap as in the theme: the scan looks for the marker as a substring of the line's comment, so + * a marker that reads like a custom property would match prose about that property. The layer reads + * a handful of --dx-* names (cardView's grid columns, the scheduler animation offset), so it has to + * be checked here too and not only against the theme. + */ + const names = new Set(walk(baseRoot).flatMap((file) => [ + ...readFileSync(file, 'utf8').matchAll(/--(dx[a-z0-9-]*)/g), + ].map(([, name]) => name))); + const collisions = markers.flatMap((marker) => [...names] + .filter((name) => name.includes(marker)) + .map((name) => `marker "${marker}" is contained in --${name}: rename the marker`)); + expect(collisions).toEqual([]); +}); + +// --------------------------------------------------------------------------------------------- +// ratchets +// --------------------------------------------------------------------------------------------- + +const findings = { + // Knobs the layer already offers that no theme turns: theme-side work, base stays untouched. + openKnobs: summary.settable.open, + // Places with no knob and no marker: the backlog this task works through, batch by batch. + unclassified: summary.owned.unmarked, + unclassifiedByWidget: summary.owned.byWidget, +}; + +if (updatingBaseline) { + test('baseline regenerated', () => { + writeFileSync(baselinePath, `${JSON.stringify(findings, null, 2)}\n`); + expect(true).toBe(true); + }); +} else { + const baseline = JSON.parse(readFileSync(baselinePath, 'utf8')); + + Object.keys(findings).forEach((check) => { + test(`${check} does not regress`, () => { + expect(findings[check as keyof typeof findings]).toEqual(baseline[check]); + }); + }); +} diff --git a/packages/devextreme-scss/tests/calc-budget.json b/packages/devextreme-scss/tests/calc-budget.json index 7cc4d7803a33..75ace0652dc0 100644 --- a/packages/devextreme-scss/tests/calc-budget.json +++ b/packages/devextreme-scss/tests/calc-budget.json @@ -1,18 +1,18 @@ { "dx.fluent-next.blue.dark.compact.css": { - "calcOccurrences": 348, + "calcOccurrences": 367, "declarationsWithDeepCalc": 5 }, "dx.fluent-next.blue.dark.css": { - "calcOccurrences": 348, + "calcOccurrences": 367, "declarationsWithDeepCalc": 5 }, "dx.fluent-next.blue.light.compact.css": { - "calcOccurrences": 348, + "calcOccurrences": 367, "declarationsWithDeepCalc": 5 }, "dx.fluent-next.blue.light.css": { - "calcOccurrences": 348, + "calcOccurrences": 367, "declarationsWithDeepCalc": 5 } } diff --git a/packages/devextreme-scss/tools/naming/derive-registries.mjs b/packages/devextreme-scss/tools/naming/derive-registries.mjs index 9fe6a58010c4..dc5f1baa5211 100644 --- a/packages/devextreme-scss/tools/naming/derive-registries.mjs +++ b/packages/devextreme-scss/tools/naming/derive-registries.mjs @@ -172,7 +172,9 @@ const OVERRIDES = { validation: ['text-editor'], filterBuilder: ['text-editor'], // the file manager's toolbar is a Toolbar - fileManager: ['toolbar'], + // …and it splits the dirs panel from the items view with a real Splitter, centring the + // wrapper on the bar from that widget's own border and bar widths + fileManager: ['toolbar', 'splitter-bar'], // the editor's spin buttons are real Buttons textEditor: ['button'], }, @@ -335,7 +337,15 @@ const OVERRIDES = { * metrics came out unpainted. The AI assistant is a Popup whose wrapper carries * .dx-ai-chat .dx-aidialog (grid_core/ai_chat: wrapperAttr), likewise outside the grid. */ - '.dx-datagrid-drag-header', '.dx-treelist-drag-header', '.dx-ai-chat'], + '.dx-datagrid-drag-header', '.dx-treelist-drag-header', '.dx-ai-chat', + /* + * The AI assistant's "abort the running request?" dialog is a standalone dx dialog + * (grid_core/ai_assistant/ai_assistant_view: createConfirmDialog with elementAttr), so it + * renders at body level and not inside the grid. Its button width is a grid size, so the + * component tier has to be published on the dialog itself — the reachability gate caught + * this the moment the width stopped being a literal. + */ + '.dx-datagrid-ai-assistant-confirm-dialog', '.dx-treelist-ai-assistant-confirm-dialog'], /* * The dragged clone is created as $('
').appendTo(container) — the container defaults to * the viewport — and the placeholder is inserted next to it, so both live outside .dx-sortable @@ -394,6 +404,13 @@ const OVERRIDES = { // editor family plus fieldset. 'invalid-badge', 'valid-badge', + // Markup a widget writes into its own value, which consumers then render anywhere: the + // htmlEditor emits .dx-mention into the HTML it saves, and the Mentions demo shows that HTML + // in a chat log with no editor around it. The base layer already says so — `.dx-mention` is a + // bare selector there, while `.dx-variable` is nested under `.dx-htmleditor-content`. A + // component-tier token would only resolve inside the editor and the highlight would vanish + // everywhere else, so the value is published on :root. + 'mention', 'focus-rect', // ds.$focus-rect-color-* 'shadow', // ds.$color-shadow-* / ds.$box-shadow-* 'typography', // ds.$font-* / ds.$line-height-* @@ -480,6 +497,11 @@ const OVERRIDES = { 'with-label', // .dx-menu-item-has-icon: a menu item that reserves room for an icon 'with-icon', + // .dx-button:not(.dx-button-has-text): a button that shows a glyph and nothing else, which + // pads itself differently from one carrying a caption + 'icon-only', + // .dx-button-has-text: the same button when it carries a caption beside the glyph + 'with-text', // .dx-popup-title present: the content box loses the padding the title already provides 'with-title', // Switch.value rendered as .dx-switch-on-value / -off-value, and the two label boxes inside @@ -495,6 +517,9 @@ const OVERRIDES = { 'small', 'dragging', 'inverted', 'first-month', 'first-of-month', 'other-month', // calendar cell states drawn as classes, and the two htmlEditor overlay variants 'contoured', 'faded', 'noimage', 'highlighted', 'dragged', 'legacy', + // .dx-calendar-today marks the current date's cell; .dx-calendar-multiview sits on the + // widget root when it shows more than one month at a time + 'today', 'multiview', // `.dx-calendar-other-view` — a cell belonging to the neighbouring month 'other', // the two step appearances Stepper draws, and the two treeView border variants @@ -821,7 +846,8 @@ const OVERRIDES = { * on. Compounds (`group-header`, `nav-button`, `pull-down`) are one anatomy level, not two. */ 'check-box': ['icon', 'mark', 'arrow', 'arrow-icon', 'container'], - switch: ['handle', 'container', 'inner'], + // wave B7: .dx-switch-on and .dx-switch-off are the two labels the track slides between + switch: ['handle', 'container', 'inner', 'label'], /* * `menu-items-container` sits next to `items-container` on purpose: base/_contextMenu.scss draws * `.dx-context-menu .dx-menu-items-container` with its own parameter, and contextMenu/_index.scss @@ -833,7 +859,9 @@ const OVERRIDES = { 'drop-down-menu': ['section', 'list', 'popup', 'content'], 'date-view': ['roller', 'item', 'year', 'month', 'hours-colon'], 'time-view': ['clock', 'digits', 'field', 'number-box', 'input', 'time-separator', 'spin', - 'format12'], + 'format12', + // wave B8: the hour and minute hands are boxes the clock positions on the dial + 'arrow'], fieldset: ['field', 'label', 'value', 'header', 'attention-icon', 'radio-group'], 'radio-group': ['radio-button', 'collection', 'value-container'], 'progress-bar': ['status', 'range', 'container', 'label'], @@ -881,8 +909,16 @@ const OVERRIDES = { 'file', 'file-name', 'file-container', 'files-container', 'suggestions', 'editing-preview', 'caption', 'delete-button', 'cancel-button', 'context-menu', 'icon', 'box', 'container', 'alert-list', 'prompt', 'textarea', 'toolbar', 'information', 'author-name', 'timestamp', - 'typing-indicator', 'circle', 'bubble', 'group'], - 'color-view': ['palette', 'palette-cell', 'hue-scale', 'hue-scale-cell', 'hue-scale-wrapper', 'alpha', 'controls', + 'typing-indicator', 'circle', 'bubble', 'group', + // wave B3: .dx-chat-messagebubble-image is a real box inside a bubble + 'image'], + /* + * `alpha` alone was doing three jobs — the alpha row, the alpha cell and the alpha scale are + * three different elements with three different sizes, so each gets its own segment and the + * bare `alpha` is gone. `apply-button` names the dialog button the base layer sizes. + */ + 'color-view': ['palette', 'palette-cell', 'hue-scale', 'hue-scale-cell', 'hue-scale-wrapper', 'controls', + 'alpha-row', 'alpha-cell', 'alpha-scale', 'alpha-label', 'apply-button', 'container', 'label', 'handle', 'color-preview', 'preview', 'textbox', 'hex', 'overlay', 'content-box', 'bg-box'], diagram: [ @@ -917,7 +953,10 @@ const OVERRIDES = { 'html-editor': ['toolbar', 'table', 'variable', 'mention', 'resize', 'resize-frame', 'cover', 'uploader', 'file-uploader', 'input-wrapper', 'wrapper', 'ai-dialog', 'content', 'icon', 'item', 'highlighted-row', 'code-block', 'placeholder', 'size-editor', 'add-image-dialog', 'separator', - 'tabs', 'selects', 'title'], + 'tabs', 'selects', 'title', + // wave B14: the quoted block, a table cell, and the bar that resizes a column or row together + // with the strip that highlights the one being dragged + 'blockquote', 'cell', 'resizer', 'highlight'], 'pivot-grid': ['area', 'area-field', 'fields-area-head', 'fields-area-head-cell', 'field-chooser', 'field', 'fields', 'expand-icon', 'row', 'column', 'cell', 'last-cell', 'header', 'headers', 'drag-header', 'total', 'grand-total', 'filter', 'sort', 'icon', 'chevron', 'chevron-icon', @@ -928,7 +967,10 @@ const OVERRIDES = { stepper: [ // wave H: anatomy the folder needed to enter `migrated` 'content', 'optional-mark','step', 'step-indicator', 'step-label', 'label', 'connector', 'value', 'icon', 'text', - 'item', 'container'], + 'item', 'container', + // wave B3: the two box-shadow rings around the indicator — `ring` is the selection ring, + // `halo` is the gap the indicator punches in the connector behind it + 'ring', 'halo'], 'recurrence-editor': ['switch', 'repeat-end', 'item', 'container', 'label', 'until-date-box', 'count-number-box', 'interval-number-box', 'number-box', 'button-group', 'radio-group'], /* @@ -978,6 +1020,8 @@ const OVERRIDES = { 'thumbnails', 'thumbnails-item', 'thumbnails-view-port', 'custom-thumbnail', 'spacer', 'progress-panel', 'progress-box', 'progress-title', 'progress-bar', 'close-button', 'large-icon', 'view-mode-button', 'tree-view-item', 'drop-zone-placeholder', + // wave B5: .dx-splitter-wrapper is a splitter box the file manager positions itself + 'splitter-wrapper', 'cancel-button', 'notification', 'container', 'separator', 'content', 'item', 'menu-item', 'popup', 'overlay', 'editor', 'button', 'icon', 'text', 'title', 'image', 'placeholder', 'drop-zone', @@ -1022,6 +1066,19 @@ const OVERRIDES = { 'adaptive-column', 'tree-view', 'node', 'select-all', 'sort-index', 'error-message', 'popup', 'overlay', 'revert-button', 'validation', 'input', 'progress-bar', 'prompt-editor', 'after', 'lines', 'title', 'ai', 'operation', 'list', 'button', 'content', 'text', 'header-row', + /* + * Opening the last of the base-layer fixed sizes: `expand-column` completes the + * select/edit/adaptive column family that was already here, `toolbar` and + * `regenerate-button` name the AI chat parts the base layer sizes + * (.dx-ai-chat .dx-popup-title .dx-toolbar-item, .dx-ai-chat__message-regenerate-button), + * and `confirm-dialog` the AI assistant dialog whose buttons carry a fixed width. + */ + 'expand-column', 'toolbar', 'regenerate-button', 'confirm-dialog', + // the last of the base-layer sizes: menu bar and caption, the search panel, the bottom + // load panel and the rows view, each named after the class the shared layer sizes + 'menu-bar', 'menu-caption', 'search-panel', 'bottom-load-panel', 'rowsview', + // .dx-column-indicators: the sort / header-filter icon strip in a column header + 'column-indicator', ], // dataGrid's own deltas on top of the chassis: the group panel and the edit-form buttons. // `group-panel-item` and `block-separator` are compounds — one anatomy level each, not two. @@ -1036,6 +1093,9 @@ const OVERRIDES = { 'text-editor': [ 'input', 'label', 'line', 'button', 'clear-button', 'spin-button', 'custom-button', 'icon-container', 'invalid-badge', + // wave B13: the strip the floating label sits on (.dx-label::before) and the glyph inside an + // editor button (.dx-button-content .dx-icon) are both real boxes with sizes of their own + 'backdrop', 'icon', ], }, }; diff --git a/packages/devextreme-scss/tools/naming/registries.json b/packages/devextreme-scss/tools/naming/registries.json index a59397cca05a..6da09df99886 100644 --- a/packages/devextreme-scss/tools/naming/registries.json +++ b/packages/devextreme-scss/tools/naming/registries.json @@ -190,6 +190,7 @@ "focus-rect", "global", "invalid-badge", + "mention", "motion", "palette", "separator", @@ -331,7 +332,9 @@ ".dx-header-filter-menu", ".dx-datagrid-drag-header", ".dx-treelist-drag-header", - ".dx-ai-chat" + ".dx-ai-chat", + ".dx-datagrid-ai-assistant-confirm-dialog", + ".dx-treelist-ai-assistant-confirm-dialog" ], "data-grid": [ ".dx-datagrid" @@ -640,6 +643,8 @@ "alternation", "with-label", "with-icon", + "icon-only", + "with-text", "with-title", "on", "off", @@ -659,6 +664,8 @@ "highlighted", "dragged", "legacy", + "today", + "multiview", "other", "base", "accent", @@ -933,7 +940,8 @@ "text-editor" ], "fileManager": [ - "toolbar" + "toolbar", + "splitter-bar" ], "textEditor": [ "button" @@ -1152,7 +1160,8 @@ "switch": [ "handle", "container", - "inner" + "inner", + "label" ], "context-menu": [ "item", @@ -1183,7 +1192,8 @@ "input", "time-separator", "spin", - "format12" + "format12", + "arrow" ], "fieldset": [ "field", @@ -1387,7 +1397,8 @@ "typing-indicator", "circle", "bubble", - "group" + "group", + "image" ], "color-view": [ "palette", @@ -1395,8 +1406,12 @@ "hue-scale", "hue-scale-cell", "hue-scale-wrapper", - "alpha", "controls", + "alpha-row", + "alpha-cell", + "alpha-scale", + "alpha-label", + "apply-button", "container", "label", "handle", @@ -1563,7 +1578,11 @@ "separator", "tabs", "selects", - "title" + "title", + "blockquote", + "cell", + "resizer", + "highlight" ], "pivot-grid": [ "area", @@ -1623,7 +1642,9 @@ "icon", "text", "item", - "container" + "container", + "ring", + "halo" ], "recurrence-editor": [ "switch", @@ -1791,6 +1812,7 @@ "view-mode-button", "tree-view-item", "drop-zone-placeholder", + "splitter-wrapper", "cancel-button", "notification", "container", @@ -1975,7 +1997,17 @@ "button", "content", "text", - "header-row" + "header-row", + "expand-column", + "toolbar", + "regenerate-button", + "confirm-dialog", + "menu-bar", + "menu-caption", + "search-panel", + "bottom-load-panel", + "rowsview", + "column-indicator" ], "data-grid": [ "group-panel", @@ -2009,7 +2041,9 @@ "spin-button", "custom-button", "icon-container", - "invalid-badge" + "invalid-badge", + "backdrop", + "icon" ] }, "packageElementPaths": [ diff --git a/packages/devextreme-scss/tools/review/nested-scopes.json b/packages/devextreme-scss/tools/review/nested-scopes.json index a9ce054119cd..2d06b36f14cf 100644 --- a/packages/devextreme-scss/tools/review/nested-scopes.json +++ b/packages/devextreme-scss/tools/review/nested-scopes.json @@ -31,6 +31,7 @@ "dx-calendar-cell", "dx-calendar-cell-in-range", "dx-calendar-cell-range-hover", + "dx-calendar-multiview", "dx-calendar-navigator", "dx-calendar-week-number-cell" ], @@ -75,6 +76,7 @@ "dx-chat-messagebox", "dx-chat-messagebox-textarea-container", "dx-chat-messagebubble", + "dx-chat-messagebubble-image", "dx-chat-messagegroup", "dx-chat-messagegroup-alignment-end", "dx-chat-messagegroup-alignment-start", @@ -231,14 +233,18 @@ "dx-gallery-indicator-item-selected" ], "grid": [ + "dx-ai-chat__action-list-item", "dx-ai-chat__action-list-item--aborted", "dx-ai-chat__action-list-item--error", "dx-ai-chat__action-list-item--success", "dx-ai-chat__content", + "dx-ai-chat__message", "dx-ai-chat__message--error", "dx-ai-chat__message--pending", "dx-ai-chat__message--success", + "dx-ai-chat__message-content", "dx-ai-chat__message-error-text", + "dx-ai-chat__message-header-row", "dx-ai-chat__message-icon", "dx-ai-chat__message-regenerate-button", "dx-ai-prompt-editor__progressbar", @@ -253,6 +259,7 @@ "dx-datagrid-column-chooser-list", "dx-datagrid-columns-separator", "dx-datagrid-container", + "dx-datagrid-content", "dx-datagrid-dragview", "dx-datagrid-edit-popup", "dx-datagrid-filter-panel", @@ -265,11 +272,14 @@ "dx-datagrid-nodata", "dx-datagrid-revert-tooltip", "dx-datagrid-rowsview", + "dx-datagrid-search-panel", "dx-datagrid-search-text", "dx-datagrid-sticky-columns", "dx-datagrid-summary-item", "dx-datagrid-total-footer", "dx-editor-cell", + "dx-header-row", + "dx-highlight-outline", "dx-row", "dx-treelist-adaptive-more", "dx-treelist-borders", @@ -277,6 +287,7 @@ "dx-treelist-column-chooser-list", "dx-treelist-columns-separator", "dx-treelist-container", + "dx-treelist-content", "dx-treelist-dragview", "dx-treelist-edit-popup", "dx-treelist-filter-panel", @@ -289,6 +300,7 @@ "dx-treelist-nodata", "dx-treelist-revert-tooltip", "dx-treelist-rowsview", + "dx-treelist-search-panel", "dx-treelist-search-text", "dx-treelist-sticky-columns", "dx-treelist-summary-item", @@ -302,7 +314,6 @@ "dx-htmleditor-toolbar-format", "dx-htmleditor-toolbar-menu-separator", "dx-htmleditor-toolbar-separator", - "dx-mention", "dx-resize-frame", "dx-table-resize-frame" ], @@ -326,6 +337,7 @@ "dx-list-items", "dx-list-next-button", "dx-list-reorder-handle", + "dx-list-search", "dx-list-select-all", "dx-list-select-all-label", "dx-list-slide-menu-button", @@ -336,7 +348,8 @@ "load-indicator": [ "dx-loadindicator-content-circle", "dx-loadindicator-content-sparkle", - "dx-loadindicator-segment-inner" + "dx-loadindicator-segment-inner", + "dx-loadindicator-wrapper" ], "lookup": [ "dx-dropdowneditor-active", @@ -405,6 +418,8 @@ "dx-scheduler-appointment-content-date", "dx-scheduler-appointment-content-details", "dx-scheduler-appointment-recurrence", + "dx-scheduler-appointment-recurrence-icon", + "dx-scheduler-appointment-reduced", "dx-scheduler-appointment-title", "dx-scheduler-container", "dx-scheduler-date-table-cell", @@ -416,6 +431,7 @@ "dx-scheduler-fixed-appointments", "dx-scheduler-group-flex-container", "dx-scheduler-group-flex-container-hierarchical", + "dx-scheduler-group-header", "dx-scheduler-group-row", "dx-scheduler-group-table", "dx-scheduler-header", @@ -445,6 +461,7 @@ ], "scroll-view": [ "dx-scrollable-native", + "dx-scrollview-pull-down", "dx-scrollview-pull-down-image", "dx-scrollview-pull-down-indicator", "dx-scrollview-pull-down-text", @@ -541,6 +558,8 @@ "dx-timeview-clock", "dx-timeview-field", "dx-timeview-format12", + "dx-timeview-hourarrow", + "dx-timeview-minutearrow", "dx-timeview-time-separator" ], "toast": [ @@ -582,6 +601,7 @@ "dx-treeview-with-search" ], "validation": [ - "dx-validationsummary-item" + "dx-validationsummary-item", + "dx-validationsummary-item-content" ] } diff --git a/packages/devextreme-scss/tools/review/px-audit.mjs b/packages/devextreme-scss/tools/review/px-audit.mjs index 9ac20284e5c3..f2f444660278 100644 --- a/packages/devextreme-scss/tools/review/px-audit.mjs +++ b/packages/devextreme-scss/tools/review/px-audit.mjs @@ -10,8 +10,13 @@ * An unmarked value never reaches SCALES.md, so design never sees it and no decision about it * exists. The marker is the only channel to the scales card, not decoration. * - * Deliberately out of scope: scss/widgets/base/** (the shared layer belongs to the base owners), - * and em/% values — those carry the dx-relative marker but have no gate of their own. + * The shared layer scss/widgets/base/** is scanned by tests/base-size-markers.test.ts, which points + * --root at it and compares against a baseline: 444 places cannot be classified in one commit, and + * the layer belongs to the base owners, so there the count ratchets down instead of having to be + * zero. The default run stays the theme, where the bar is zero unmarked. + * + * Deliberately out of scope: em/% values — those carry the dx-relative marker but have no gate of + * their own. */ import { readFileSync, readdirSync } from 'fs'; @@ -44,19 +49,73 @@ const split = (line) => { return at === -1 ? { code: line, comment: '' } : { code: line.slice(0, at), comment: line.slice(at) }; }; +const ENDS_STATEMENT = /[;{}]$/; +/* + * Tested against the code half of the line: a declaration that carries a trailing marker still + * ends its statement, and without stripping the comment the walk below sails past it and lets a + * later declaration inherit a marker that was never written for it. + */ +const endsStatement = (line) => ENDS_STATEMENT.test(split(line).code.trim()); +const nonBlankAbove = (lines, index) => { + for (let at = index - 1; at >= 0; at -= 1) if (lines[at].trim() !== '') return at; + return -1; +}; + +/* + * A marker is written next to the declaration it explains, but a px literal inside a multi-line + * declaration lands on a continuation line, where there is no comment to find — the two-layer + * box-shadow of cardView's dragged item and the clip-path of textEditor's label both carry a + * reviewed marker that the line-by-line lookup could not see. So for a continuation line the + * marker is inherited from the declaration: the trailing comments of its earlier lines plus the + * comment attached above its first line, block comments included (those are blanked in `code`, + * which is why the raw text is passed in separately). + * + * A line counts as a continuation only when the statement above it is unfinished, so a plain + * `min-height: 1px;` never inherits anything from its neighbours. + */ +const inheritedComment = (raw, index) => { + const above = nonBlankAbove(raw, index); + if (above === -1 || endsStatement(raw[above])) return ''; + + let start = index; + while (start > 0) { + const previous = nonBlankAbove(raw, start); + if (previous === -1 || endsStatement(raw[previous])) break; + start = previous; + } + + // a comment line contributes its whole text (a block comment carries no `//` to split on); + // a code line contributes only its trailing comment, so a marker can never be read out of code + const isComment = (text) => text.startsWith('//') || text.startsWith('/*') + || text.startsWith('*') || text.endsWith('*/'); + const parts = raw.slice(start, index) + .map((line) => (isComment(line.trim()) ? line : split(line).comment)); + for (let at = start - 1; at >= 0; at -= 1) { + const text = raw[at].trim(); + if (text === '' || !isComment(text)) break; + parts.push(text); + if (text.startsWith('/*')) break; + } + return parts.join('\n'); +}; + export const scanPxLiterals = (root = themeDir) => { const marked = []; const unmarked = []; scssFiles(root).forEach((file) => { - blankBlockComments(readFileSync(file, 'utf8')).split('\n').forEach((line, index) => { + const raw = readFileSync(file, 'utf8').split('\n'); + blankBlockComments(raw.join('\n')).split('\n').forEach((line, index) => { const { code, comment } = split(line); const literals = code.match(PX_LITERAL); if (!literals) return; - const marker = MARKERS.find((entry) => comment.includes(entry)) ?? null; + const scope = comment || inheritedComment(raw, index); + const marker = MARKERS.find((entry) => scope.includes(entry)) ?? null; const place = { file: relative(packageRoot, file), line: index + 1, literals: [...new Set(literals)], + // distinct values drive the report; the raw count is what an inventory of the layer adds up + occurrences: literals.length, marker, text: line.trim(), }; diff --git a/packages/devextreme-scss/tools/review/size-markers.json b/packages/devextreme-scss/tools/review/size-markers.json index fc5e187e5cdc..5eab230c9cfb 100644 --- a/packages/devextreme-scss/tools/review/size-markers.json +++ b/packages/devextreme-scss/tools/review/size-markers.json @@ -1,9 +1,10 @@ { "comment": [ - "Size-marker vocabulary for the fluent-next theme. One source, two consumers:", + "Size-marker vocabulary. One source, three consumers:", " tools/review/scales.mjs — builds the SCALES.md / SCALES.html report, a section per entry;", " tools/review/px-audit.mjs — the gate: a px literal with no marker does not pass", " (tests/fluent-next-size-markers.test.ts runs it).", + " tests/base-size-markers.test.ts — the same scan over the shared layer scss/widgets/base/**, against a baseline: that layer cannot be marked in one go, so the count only ratchets down.", "The report and the gate cannot drift: this list is the only one.", "", "Fields: id — section anchor; marker — the token in a `// : note` comment;", @@ -118,6 +119,26 @@ "literals": "px", "why": "The number is written where it applies — in a rule, a mixin argument or a derived variable — with no name of its own. Unlike A, a step with that value usually does exist: the step column shows which one.", "scale": "spacing" + }, + { + "id": "shared", + "marker": "dx-base-shared", + "source": "sources", + "title": "J. Sizes owned by the shared layer", + "question": "does the theme get a knob, or does the number stay shared", + "literals": "px", + "why": "A value in scss/widgets/base/** that every theme compiles. The marker is the record of a decision by the base owners: the number is the same for generic, material, fluent and fluent-next, and opening a knob for one theme would buy nothing. Base-layer marker: in the theme itself there is no shared layer to own a value, so a theme literal marked this way is a mistake.", + "scale": "spacing" + }, + { + "id": "structural", + "marker": "dx-structural", + "source": "sources", + "title": "K. Not a designed size", + "question": "no decision needed — the number is a technique, not a size", + "literals": "px", + "why": "An off-screen parking coordinate (top: -9999px), a one-pixel probe, a number chosen to be far outside the viewport rather than to be seen. Nobody designs it and no step can replace it: making it a token would only invite someone to tune it. Unlike H, the value is not frozen by a syntax — it is frozen by having no visual meaning.", + "scale": null } ] } diff --git a/packages/devextreme-scss/tools/sizes/inventory.mjs b/packages/devextreme-scss/tools/sizes/inventory.mjs new file mode 100644 index 000000000000..79836eac3b85 --- /dev/null +++ b/packages/devextreme-scss/tools/sizes/inventory.mjs @@ -0,0 +1,405 @@ +/* + * The inventory of fixed sizes in the SHARED layer scss/widgets/base/**. + * + * node tools/sizes/inventory.mjs # write the lists, print the summary + * node tools/sizes/inventory.mjs --check # read-only; exit 1 if a list on disk is stale + * node tools/sizes/inventory.mjs --json # read-only; the summary, machine-readable (jest uses this) + * + * The layer is compiled once per bundle, so a value written into it reaches generic, material, + * fluent and fluent-next at the same time. That is why the sizes are split in two, and the split is + * not a matter of taste: + * + * theme-settable — the literal is the default of a `$x: … !default` declaration. The knob already + * exists: a theme passes its own value through `@use "…/base/x" with ($x: …)` and + * the other themes keep the default, byte for byte. Nothing in base has to change. + * base-owned — the literal is written where it applies: in a rule, a mixin body, a local + * variable with no `!default`, a calc(), a @media condition. There is no knob, so + * opening one means editing the shared layer, which is the base owners' call. + * + * The scan is tools/review/px-audit.mjs — the same module the gate and SCALES.md are built from, so + * the inventory cannot claim a different set of places than the gate enforces. + */ + +import { readFileSync, readdirSync, writeFileSync } from 'fs'; +import { dirname, join, relative } from 'path'; +import { fileURLToPath } from 'url'; + +import { scanPxLiterals } from '../review/px-audit.mjs'; + +const here = dirname(fileURLToPath(import.meta.url)); +const packageRoot = join(here, '..', '..'); +const baseDir = join(packageRoot, 'scss', 'widgets', 'base'); +const themeDir = join(packageRoot, 'scss', 'widgets', 'fluent-next'); +const listsDir = join(here, 'lists'); + +/* --------------------------------------------------------------- classifying */ + +/* + * A category answers "why is there no knob here", because that decides the cost of making one: + * local-var — a `$x: 25px` with no `!default`; adding `!default` is the whole job. + * mixin-arg — inside a @mixin body or its call; module variables cannot reach it, a parameter can. + * media — a @media/@container condition; var() is invalid there, so no knob can ever exist. + * structural — an off-screen parking coordinate, not a size anyone designs. + * geometry — box-shadow / outline / border / clip-path numbers, judged as a shape, not a step. + * calc — already inside a calc(); a knob has to keep the arithmetic valid for both forms. + * inline — a plain declaration, the ordinary case. + */ +/* A parking coordinate, not a size: nothing anyone designs is a thousand pixels across. */ +const OFF_SCREEN_PX = 1000; +const isOffScreen = (code) => (code.match(/-?\d*\.?\d+px\b/g) ?? []) + .some((literal) => Math.abs(parseFloat(literal)) >= OFF_SCREEN_PX); +const GEOMETRY = /^(?:box-shadow|outline|outline-offset|outline-width|border|border-\w+|border-\w+-\w+|clip|clip-path)\s*:/; + +const codeOf = (text) => { + const at = text.indexOf('//'); + return (at === -1 ? text : text.slice(0, at)).trim(); +}; + +const categoryOf = (code) => { + if (/^\$[\w-]+\s*:/.test(code)) return 'local-var'; + if (code.includes('@media') || code.includes('@container')) return 'media'; + if (code.startsWith('@include') || code.startsWith('@mixin')) return 'mixin-arg'; + if (isOffScreen(code)) return 'structural'; + if (GEOMETRY.test(code)) return 'geometry'; + if (code.includes('calc(')) return 'calc'; + return 'inline'; +}; + +/* + * Lines inside a `@mixin name(…)` parameter list. A literal there is a knob too, even though it is + * not a `$x: … !default` declaration: the theme sets it by passing an argument, and the default is + * what every other theme keeps. An `@include` argument list is the opposite — a call site, not a + * knob — so only `@mixin` opens a signature here. + */ +const signatureCache = new Map(); +const mixinParameterLines = (file) => { + if (signatureCache.has(file)) return signatureCache.get(file); + const inside = new Set(); + let depth = 0; + blankBlockComments(readFileSync(join(packageRoot, file), 'utf8')).split('\n').forEach((line, index) => { + const code = codeOf(line); + const opening = depth === 0 && /@mixin\b/.test(code); + if (!opening && depth === 0) return; + if (depth > 0) inside.add(index + 1); + depth += (code.match(/\(/g)?.length ?? 0) - (code.match(/\)/g)?.length ?? 0); + if (depth < 0) depth = 0; + }); + signatureCache.set(file, inside); + return inside; +}; + +/** The widget a file belongs to: `_toast.scss` -> toast, `scheduler/views/_index.scss` -> scheduler. */ +const widgetOf = (file) => { + const [head, ...rest] = relative('scss/widgets/base', file).split('/'); + return rest.length ? head : head.replace(/^_/, '').replace(/\.scss$/, ''); +}; + +/* ------------------------------------------------- what the theme already sets */ + +const scssFiles = (dir) => readdirSync(dir, { withFileTypes: true }).flatMap((entry) => { + const full = join(dir, entry.name); + if (entry.isDirectory()) return scssFiles(full); + return entry.name.endsWith('.scss') ? [full] : []; +}); + +const blankBlockComments = (content) => content + .replace(/\/\*[\s\S]*?\*\//g, (comment) => comment.replace(/[^\n]/g, ' ')); + +/* + * `@use "…/base/x" with (…)` is the only channel into the layer, and the block spans many lines with + * nested parens (`var(--dx-a, 4px)`), so it is read by balancing brackets. A one-line regex here + * silently under-reports: it finds a few dozen of the 300-odd names that are actually configured. + */ +const splitTopLevel = (body) => { + const parts = []; + let depth = 0; + let current = ''; + [...body].forEach((character) => { + if (character === '(') depth += 1; + if (character === ')') depth -= 1; + if (character === ',' && depth === 0) { + parts.push(current); + current = ''; + return; + } + current += character; + }); + parts.push(current); + return parts; +}; + +const readThemeConfiguration = () => { + const setBy = new Map(); + scssFiles(themeDir).forEach((file) => { + const content = blankBlockComments(readFileSync(file, 'utf8')); + [...content.matchAll(/@use\s+"([^"]*base[^"]*)"[^(\n]*with\s*\(/g)].forEach((match) => { + let depth = 1; + let at = match.index + match[0].length; + while (at < content.length && depth > 0) { + if (content[at] === '(') depth += 1; + if (content[at] === ')') depth -= 1; + at += 1; + } + const body = content.slice(match.index + match[0].length, at - 1).replace(/\/\/[^\n]*/g, ''); + splitTopLevel(body).forEach((part) => { + const name = /^\s*\$([\w-]+)\s*:/.exec(part); + if (!name) return; + const value = part.slice(part.indexOf(':') + 1).trim().replace(/\s+/g, ' '); + setBy.set(name[1], { + file: relative(packageRoot, file), + value, + }); + }); + }); + }); + return setBy; +}; + +/* ------------------------------------------------------------------ the lists */ + +const build = () => { + const { marked, unmarked } = scanPxLiterals(baseDir); + const places = [...marked, ...unmarked] + .sort((a, b) => a.file.localeCompare(b.file) || a.line - b.line); + const setBy = readThemeConfiguration(); + + const settable = []; + const owned = []; + + places.forEach((place) => { + const code = codeOf(place.text); + const declaration = /^\$([\w-]+)\s*:/.exec(code); + const parameter = Boolean(declaration) && mixinParameterLines(place.file).has(place.line); + const isKnob = Boolean(declaration) && (code.includes('!default') || parameter); + const common = { + file: place.file, + line: place.line, + widget: widgetOf(place.file), + literals: place.literals, + occurrences: place.occurrences, + marker: place.marker, + text: place.text, + }; + + if (isKnob) { + const configured = setBy.get(declaration[1]); + settable.push({ + ...common, + variable: declaration[1], + kind: parameter ? 'mixin-parameter' : 'module-variable', + status: parameter ? 'parameter' : (configured ? 'injected' : 'open'), + ...(configured && !parameter ? { setBy: configured.file, setTo: configured.value } : {}), + }); + return; + } + owned.push({ ...common, category: categoryOf(code) }); + }); + + return { settable, owned }; +}; + +const tally = (rows, key) => rows.reduce((totals, row) => { + totals[row[key]] = (totals[row[key]] ?? 0) + row.occurrences; + return totals; +}, {}); + +const descending = (totals) => Object.fromEntries( + Object.entries(totals).sort(([, a], [, b]) => b - a), +); + +const sum = (rows) => rows.reduce((total, row) => total + row.occurrences, 0); + +/* ------------------------------------------------------------------- reports */ + +const GENERATED = 'GENERATED by tools/sizes/inventory.mjs — do not edit by hand. ' + + 'Judgment calls belong in that script, not in this file.'; + +const settableJson = (settable) => ({ + $comment: [ + GENERATED, + 'Sizes the theme can set from outside without touching the shared layer: the literal is the ' + + 'default of a `$x: … !default` declaration, so `@use "…/base/x" with ($x: …)` replaces it for ' + + 'one theme and leaves the default — and every other theme — untouched.', + 'kind "module-variable" — a `$x: … !default` declaration; "mixin-parameter" — a default in a ' + + '`@mixin name(…)` signature, which a theme replaces by passing an argument.', + 'status "injected" — fluent-next already passes a value; "open" — the knob exists and nobody ' + + 'turns it; "parameter" — a mixin parameter, where the signature itself is the channel and there ' + + 'is nothing to cross-check by name. An "open" row is theme-side work only.', + 'The match is by variable name. A name declared in a nested module is only reachable once the ' + + 'parent forwards it (see base/chat/_index.scss), which is why an "open" row can sit next to ' + + 'injected ones from the same widget.', + ], + summary: { + occurrences: sum(settable), + variables: new Set(settable.map((row) => row.variable)).size, + injected: sum(settable.filter((row) => row.status === 'injected')), + open: sum(settable.filter((row) => row.status === 'open')), + parameters: sum(settable.filter((row) => row.status === 'parameter')), + }, + places: settable, +}); + +const ownedJson = (owned) => ({ + $comment: [ + GENERATED, + 'Sizes nailed into the shared layer: no `!default` declaration holds them, so opening one means ' + + 'editing scss/widgets/base/** — which every theme compiles. Each place needs either a knob ' + + '(and proof the other themes did not move) or a marker saying why it stays.', + 'category — why there is no knob today: local-var (a $x with no !default), mixin-arg (inside a ' + + '@mixin body or call), media (a @media condition, where var() is invalid), structural (an ' + + 'off-screen parking coordinate, not a designed size), geometry (box-shadow / outline / border ' + + '/ clip-path numbers), calc (already inside a calc()), inline (a plain declaration).', + 'marker — the classification comment already on the line, from tools/review/size-markers.json.', + ], + summary: { + occurrences: sum(owned), + byCategory: descending(tally(owned, 'category')), + byWidget: descending(tally(owned, 'widget')), + unmarked: sum(owned.filter((row) => !row.marker)), + // The backlog proper: what still has neither a knob nor a marker. `byWidget` above counts the + // classified places too, so the two differ wherever a batch has already been through. + unmarkedByWidget: descending(tally(owned.filter((row) => !row.marker), 'widget')), + }, + places: owned, +}); + +const agenda = (settable, owned, comments) => { + // The agenda is a to-do list: a place that already carries a marker is a decision, not an item. + const backlog = owned.filter((row) => !row.marker); + const byWidget = descending(tally(backlog, 'widget')); + const categories = Object.keys(descending(tally(backlog, 'category'))); + const lines = [ + '# Fixed sizes in the shared layer', + '', + `_${GENERATED}_`, + '', + 'The layer `scss/widgets/base/**` is compiled once per bundle, so a size written into it reaches', + 'generic, material, fluent and fluent-next at the same time. This is the agenda for the base', + 'owners: for every number below, either the theme gets a knob, or the number is agreed to stay', + 'and carries a marker saying why.', + '', + '## Totals', + '', + '| | occurrences |', + '|---|---|', + `| a raw grep of the layer | ${sum(settable) + sum(owned) + comments} |`, + `| …of those, inside comments (commented-out code, prose) | ${comments} |`, + `| **in code** | **${sum(settable) + sum(owned)}** |`, + `| — the theme can already set from outside | ${sum(settable)} |`, + `| — nailed into the shared layer | ${sum(owned)} |`, + '', + '## What the theme can already set', + '', + `${sum(settable)} occurrences in ${new Set(settable.map((row) => row.variable)).size} \`!default\` variables. ` + + `fluent-next already passes ${sum(settable.filter((row) => row.status === 'injected'))}; ` + + `${sum(settable.filter((row) => row.status === 'open'))} are open knobs nobody turns.`, + '', + ...(settable.some((row) => row.status === 'open') ? [ + 'Open knobs — theme-side work, the shared layer stays untouched:', + '', + ...settable.filter((row) => row.status === 'open') + .map((row) => `- \`$${row.variable}\` — ${row.file}:${row.line}`), + '', + ] : []), + '## What is nailed into the layer', + '', + `| widget | ${categories.join(' | ')} | total |`, + `|---|${categories.map(() => '---').join('|')}|---|`, + ...Object.keys(byWidget).map((widget) => { + const rows = backlog.filter((row) => row.widget === widget); + const counts = categories.map((category) => sum(rows.filter((row) => row.category === category)) || ''); + return `| ${widget} | ${counts.join(' | ')} | **${byWidget[widget]}** |`; + }), + '', + '## Places, by widget', + '', + ]; + + Object.keys(byWidget).forEach((widget) => { + lines.push(`### ${widget} — ${byWidget[widget]}`, ''); + backlog.filter((row) => row.widget === widget).forEach((row) => { + lines.push(`- \`${row.file}:${row.line}\` · ${row.category}`, ` \`${row.text}\``); + }); + lines.push(''); + }); + + return `${lines.join('\n')}`; +}; + +/* --------------------------------------------------------------------- output */ + +/* The raw grep counts px inside comments too; the scan does not. Report the gap instead of hiding it. */ +const commentedOccurrences = () => { + const px = /-?\d*\.?\d+px\b/g; + return scssFiles(baseDir).reduce((total, file) => { + const content = readFileSync(file, 'utf8'); + const inCode = blankBlockComments(content).split('\n') + .reduce((count, line) => count + (codeOf(line).match(px)?.length ?? 0), 0); + return total + ((content.match(px)?.length ?? 0) - inCode); + }, 0); +}; + +export const inventory = () => { + const { settable, owned } = build(); + const comments = commentedOccurrences(); + return { + comments, + settable: { + occurrences: sum(settable), + variables: new Set(settable.map((row) => row.variable)).size, + injected: sum(settable.filter((row) => row.status === 'injected')), + open: sum(settable.filter((row) => row.status === 'open')), + parameters: sum(settable.filter((row) => row.status === 'parameter')), + }, + owned: { + occurrences: sum(owned), + unmarked: sum(owned.filter((row) => !row.marker)), + byCategory: descending(tally(owned, 'category')), + byWidget: descending(tally(owned.filter((row) => !row.marker), 'widget')), + }, + artefacts: [ + ['theme-settable.json', `${JSON.stringify(settableJson(settable), null, 2)}\n`], + ['base-owned.json', `${JSON.stringify(ownedJson(owned), null, 2)}\n`], + ['BASE-SIZES.md', agenda(settable, owned, comments)], + ], + }; +}; + +if (process.argv[1] === fileURLToPath(import.meta.url)) { + const { + comments, settable, owned, artefacts, + } = inventory(); + const check = process.argv.includes('--check'); + const json = process.argv.includes('--json'); + + const stale = artefacts.filter(([name, content]) => { + try { + return readFileSync(join(listsDir, name), 'utf8') !== content; + } catch { + return true; + } + }); + // --check and --json are read-only: the gate must not rewrite the tree it is judging. + if (!check && !json) artefacts.forEach(([name, content]) => writeFileSync(join(listsDir, name), content)); + + if (json) { + process.stdout.write(`${JSON.stringify({ comments, settable, owned }, null, 2)}\n`); + } else { + process.stdout.write([ + `raw grep of scss/widgets/base: ${settable.occurrences + owned.occurrences + comments} px ` + + `occurrences (${comments} of them inside comments)`, + `in code: ${settable.occurrences + owned.occurrences}`, + ` theme-settable ${settable.occurrences} (injected ${settable.injected}, open ${settable.open}, ` + + `mixin parameters ${settable.parameters})`, + ` base-owned ${owned.occurrences} ${Object.entries(owned.byCategory) + .map(([category, count]) => `${category} ${count}`).join(', ')}`, + ` of those still unclassified: ${owned.unmarked}`, + '', + ].join('\n')); + } + + if (check && stale.length) { + process.stdout.write(`stale: ${stale.map(([name]) => name).join(', ')} — run node tools/sizes/inventory.mjs\n`); + process.exit(1); + } +} diff --git a/packages/devextreme-scss/tools/sizes/lists/BASE-SIZES.md b/packages/devextreme-scss/tools/sizes/lists/BASE-SIZES.md new file mode 100644 index 000000000000..64ebf36f80e1 --- /dev/null +++ b/packages/devextreme-scss/tools/sizes/lists/BASE-SIZES.md @@ -0,0 +1,29 @@ +# Fixed sizes in the shared layer + +_GENERATED by tools/sizes/inventory.mjs — do not edit by hand. Judgment calls belong in that script, not in this file._ + +The layer `scss/widgets/base/**` is compiled once per bundle, so a size written into it reaches +generic, material, fluent and fluent-next at the same time. This is the agenda for the base +owners: for every number below, either the theme gets a knob, or the number is agreed to stay +and carries a marker saying why. + +## Totals + +| | occurrences | +|---|---| +| a raw grep of the layer | 768 | +| …of those, inside comments (commented-out code, prose) | 26 | +| **in code** | **742** | +| — the theme can already set from outside | 525 | +| — nailed into the shared layer | 217 | + +## What the theme can already set + +525 occurrences in 454 `!default` variables. fluent-next already passes 501; 0 are open knobs nobody turns. + +## What is nailed into the layer + +| widget | | total | +|---||---| + +## Places, by widget diff --git a/packages/devextreme-scss/tools/sizes/lists/base-owned.json b/packages/devextreme-scss/tools/sizes/lists/base-owned.json new file mode 100644 index 000000000000..0ee00cdbe467 --- /dev/null +++ b/packages/devextreme-scss/tools/sizes/lists/base-owned.json @@ -0,0 +1,1996 @@ +{ + "$comment": [ + "GENERATED by tools/sizes/inventory.mjs — do not edit by hand. Judgment calls belong in that script, not in this file.", + "Sizes nailed into the shared layer: no `!default` declaration holds them, so opening one means editing scss/widgets/base/** — which every theme compiles. Each place needs either a knob (and proof the other themes did not move) or a marker saying why it stays.", + "category — why there is no knob today: local-var (a $x with no !default), mixin-arg (inside a @mixin body or call), media (a @media condition, where var() is invalid), structural (an off-screen parking coordinate, not a designed size), geometry (box-shadow / outline / border / clip-path numbers), calc (already inside a calc()), inline (a plain declaration).", + "marker — the classification comment already on the line, from tools/review/size-markers.json." + ], + "summary": { + "occurrences": 217, + "byCategory": { + "inline": 88, + "geometry": 69, + "local-var": 35, + "calc": 9, + "structural": 8, + "mixin-arg": 6, + "media": 2 + }, + "byWidget": { + "colorView": 42, + "scheduler": 33, + "textEditor": 26, + "gridBase": 22, + "htmlEditor": 16, + "cardView": 15, + "pivotGrid": 11, + "ui": 8, + "scrollView": 5, + "dataGrid": 5, + "fileManager": 5, + "sortable": 4, + "treeList": 4, + "icon_fonts": 2, + "multiView": 2, + "resizable": 2, + "tagBox": 2, + "filterBuilder": 2, + "fileUploader": 1, + "pagination": 1, + "slider": 1, + "colorBox": 1, + "diagram": 1, + "gantt": 1, + "lookup": 1, + "popover": 1, + "stepper": 1, + "toolbar": 1, + "treeView": 1 + }, + "unmarked": 0, + "unmarkedByWidget": {} + }, + "places": [ + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 213, + "widget": "fileUploader", + "literals": [ + "-6px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-top: -6px; // dx-fixed-size: pulls the status text onto the progress line", + "category": "inline" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 20, + "widget": "htmlEditor", + "literals": [ + "11px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$resize-handle-size: 11px;", + "category": "local-var" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 21, + "widget": "htmlEditor", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$touch-resize-handle-size: 15px; // dx-fixed-size: the touch variant of the same handle", + "category": "local-var" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 154, + "widget": "htmlEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "min-height: 1px; // dx-structural: lets the flex item shrink below its content, not a designed height", + "category": "inline" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 161, + "widget": "htmlEditor", + "literals": [ + "-100000px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "left: -100000px; // dx-structural: parks Quill's clipboard element off-screen", + "category": "structural" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 162, + "widget": "htmlEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "height: 1px; // dx-structural: collapses the off-screen clipboard element, not a designed height", + "category": "inline" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 226, + "widget": "htmlEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border: 1px solid #000; // dx-line-width: a table hairline; the colour beside it is hard-coded too", + "category": "geometry" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 356, + "widget": "htmlEditor", + "literals": [ + "0.1px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "height: 0.1px; // dx-structural: a non-zero height the placeholder needs, not a designed size", + "category": "inline" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 370, + "widget": "htmlEditor", + "literals": [ + "35px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "min-height: 35px; // dx-fixed-size: the mention suggestion list keeps a row of space while filtering", + "category": "inline" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 379, + "widget": "htmlEditor", + "literals": [ + "50px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "min-width: 50px; // dx-fixed-size: the narrowest the mention suggestion list may get", + "category": "inline" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 392, + "widget": "htmlEditor", + "literals": [ + "360px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "min-width: 360px; // dx-fixed-size: the link/image dialog form width", + "category": "inline" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 417, + "widget": "htmlEditor", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "gap: 6px; // dx-fixed-size: gap between the AI dialog title icon and its text", + "category": "inline" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 424, + "widget": "htmlEditor", + "literals": [ + "240px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "min-width: 240px; // dx-fixed-size: the same dialog form once the popup goes fullscreen", + "category": "inline" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 437, + "widget": "htmlEditor", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border-bottom: 3px solid transparent; // dx-line-width: the strip under the colour-format icon that shows the picked colour", + "category": "geometry" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 457, + "widget": "htmlEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border: 1px dashed lightslategrey; // dx-line-width: hairline of the image resize frame", + "category": "geometry" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 468, + "widget": "htmlEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border: 1px solid white; // dx-line-width: hairline around a resize handle", + "category": "geometry" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 524, + "widget": "htmlEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border: 1px solid white; // dx-line-width: hairline around a resize handle // dx-line-width: hairline around a resize handle", + "category": "geometry" + }, + { + "file": "scss/widgets/base/_icon_fonts.scss", + "line": 307, + "widget": "icon_fonts", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": "dx-icon-glyph-size", + "text": "font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes -- dx-icon-glyph-size: the icon font's own size, no icon scale in the package", + "category": "inline" + }, + { + "file": "scss/widgets/base/_icon_fonts.scss", + "line": 675, + "widget": "icon_fonts", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": "dx-icon-glyph-size", + "text": "font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes -- dx-icon-glyph-size: the icon font's own size, no icon scale in the package", + "category": "inline" + }, + { + "file": "scss/widgets/base/_multiView.scss", + "line": 39, + "widget": "multiView", + "literals": [ + "-9999px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "top: -9999px; // dx-structural: parks the hidden slide off-screen", + "category": "structural" + }, + { + "file": "scss/widgets/base/_multiView.scss", + "line": 40, + "widget": "multiView", + "literals": [ + "-9999px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "left: -9999px; // dx-structural: parks the hidden slide off-screen", + "category": "structural" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 25, + "widget": "pagination", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$pagination-paddings: 8px; // dx-fixed-size: the shared source of the two fallbacks below", + "category": "local-var" + }, + { + "file": "scss/widgets/base/_resizable.scss", + "line": 2, + "widget": "resizable", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$one-side-handle-size: 3px + $handle-offset; // dx-fixed-size: handle thickness ($handle-offset is 0)", + "category": "local-var" + }, + { + "file": "scss/widgets/base/_resizable.scss", + "line": 3, + "widget": "resizable", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$two-side-handle-size: 6px + $handle-offset; // dx-fixed-size: handle thickness ($handle-offset is 0)", + "category": "local-var" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 54, + "widget": "scrollView", + "literals": [ + "-20px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-left: -20px; // dx-fixed-size: centres the android pull-down on the pocket", + "category": "inline" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 153, + "widget": "scrollView", + "literals": [ + "-15px", + "20px", + "15px" + ], + "occurrences": 3, + "marker": "dx-fixed-size", + "text": "margin: -15px 20px 0 15px; // dx-fixed-size: centres the indicator on its own half-height", + "category": "inline" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 234, + "widget": "scrollView", + "literals": [ + "-20px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-top: -20px; // dx-fixed-size: pulls the text onto the indicator's line", + "category": "inline" + }, + { + "file": "scss/widgets/base/_slider.scss", + "line": 5, + "widget": "slider", + "literals": [ + "7px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$slider-tooltip-arrow-height: 7px; // dx-fixed-size: feeds dx-popover-arrow-size, which divides by sqrt(2)", + "category": "local-var" + }, + { + "file": "scss/widgets/base/_sortable.scss", + "line": 61, + "widget": "sortable", + "literals": [ + "1px", + "3px", + "6px", + "8px" + ], + "occurrences": 4, + "marker": "dx-shadow-geometry", + "text": "box-shadow: 0 1px 3px $sortable-clone-shadow-color-first, 0 6px 8px $sortable-clone-shadow-color-second; // dx-shadow-geometry: the theme already takes both colours from roles; whether a whole shadow role replaces this two-layer geometry is design's call", + "category": "geometry" + }, + { + "file": "scss/widgets/base/_tagBox.scss", + "line": 15, + "widget": "tagBox", + "literals": [ + "0.1px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "width: 0.1px; // T393423, T437866 -- dx-structural: a non-zero width the browsers need, not a designed size", + "category": "inline" + }, + { + "file": "scss/widgets/base/_tagBox.scss", + "line": 43, + "widget": "tagBox", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "max-width: calc(100% - 1px); // dx-px-nudge: a pixel off the full width so the tag never overflows", + "category": "calc" + }, + { + "file": "scss/widgets/base/_ui.scss", + "line": 13, + "widget": "ui", + "literals": [ + "-10px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "top: -10px; // dx-structural: parks the hidden input off-screen", + "category": "inline" + }, + { + "file": "scss/widgets/base/_ui.scss", + "line": 14, + "widget": "ui", + "literals": [ + "-10px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "left: -10px; // dx-structural: parks the hidden input off-screen", + "category": "inline" + }, + { + "file": "scss/widgets/base/_ui.scss", + "line": 41, + "widget": "ui", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "height: 1px; // dx-structural: the screen-reader-only clipping box, not a designed size", + "category": "inline" + }, + { + "file": "scss/widgets/base/_ui.scss", + "line": 42, + "widget": "ui", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "width: 1px; // dx-structural: the screen-reader-only clipping box, not a designed size", + "category": "inline" + }, + { + "file": "scss/widgets/base/_ui.scss", + "line": 226, + "widget": "ui", + "literals": [ + "150px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "transform: translate3d(0, 150px, 0); // dx-fixed-size: how far the android pop animation travels", + "category": "inline" + }, + { + "file": "scss/widgets/base/_ui.scss", + "line": 348, + "widget": "ui", + "literals": [ + "-10px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "transform: rotate3d(1, 0, 0, 10deg) translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the 3d drop animation travels", + "category": "inline" + }, + { + "file": "scss/widgets/base/_ui.scss", + "line": 362, + "widget": "ui", + "literals": [ + "-10px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the fade drop animation travels", + "category": "inline" + }, + { + "file": "scss/widgets/base/_ui.scss", + "line": 376, + "widget": "ui", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "transform: translate3d(0, 10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the fade rise animation travels", + "category": "inline" + }, + { + "file": "scss/widgets/base/cardView/content_view/content/card/_index.scss", + "line": 22, + "widget": "cardView", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "outline: 2px solid; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "geometry" + }, + { + "file": "scss/widgets/base/cardView/content_view/content/card/_index.scss", + "line": 24, + "widget": "cardView", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "outline-offset: -2px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "geometry" + }, + { + "file": "scss/widgets/base/cardView/content_view/content/card/header/_index.scss", + "line": 10, + "widget": "cardView", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "padding: 0 12px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "inline" + }, + { + "file": "scss/widgets/base/cardView/content_view/content/card/header/_index.scss", + "line": 42, + "widget": "cardView", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "width: 20px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "inline" + }, + { + "file": "scss/widgets/base/cardView/content_view/content/card/header/_index.scss", + "line": 43, + "widget": "cardView", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "height: 20px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "inline" + }, + { + "file": "scss/widgets/base/cardView/content_view/no_data/_index.scss", + "line": 10, + "widget": "cardView", + "literals": [ + "999px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "border-radius: 999px; // dx-fixed-size: a pill radius; the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "geometry" + }, + { + "file": "scss/widgets/base/cardView/header_panel/_index.scss", + "line": 10, + "widget": "cardView", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$sortable-side-offset: 6px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "local-var" + }, + { + "file": "scss/widgets/base/cardView/header_panel/_index.scss", + "line": 50, + "widget": "cardView", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "gap: 4px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "inline" + }, + { + "file": "scss/widgets/base/cardView/header_panel/item/_index.scss", + "line": 9, + "widget": "cardView", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "gap: 4px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "inline" + }, + { + "file": "scss/widgets/base/cardView/header_panel/item/_index.scss", + "line": 55, + "widget": "cardView", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "outline: 2px solid; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "geometry" + }, + { + "file": "scss/widgets/base/cardView/header_panel/item/_index.scss", + "line": 57, + "widget": "cardView", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "outline-offset: -2px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with", + "category": "geometry" + }, + { + "file": "scss/widgets/base/cardView/header_panel/item/_index.scss", + "line": 89, + "widget": "cardView", + "literals": [ + "1px", + "3px" + ], + "occurrences": 2, + "marker": "dx-shadow-geometry", + "text": "0 1px 3px $cardview-header-panel__item--dragged-box-shadow-color,", + "category": "inline" + }, + { + "file": "scss/widgets/base/cardView/header_panel/item/_index.scss", + "line": 90, + "widget": "cardView", + "literals": [ + "6px", + "8px" + ], + "occurrences": 2, + "marker": "dx-shadow-geometry", + "text": "0 6px 8px $cardview-header-panel__item--dragged-box-shadow-color;", + "category": "inline" + }, + { + "file": "scss/widgets/base/colorBox/_index.scss", + "line": 31, + "widget": "colorBox", + "literals": [ + "25px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "max-width: calc(100% - 25px); // dx-fixed-size: room the colour preview and its gap take from the placeholder", + "category": "calc" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 16, + "widget": "colorView", + "literals": [ + "28px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$colorview-palette-handle-size: 28px; // dx-fixed-size: diameter of the round palette handle, drawn as rings at 6/7/12/13px", + "category": "local-var" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 19, + "widget": "colorView", + "literals": [ + "36px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$colorview-handle-first-side-size: 36px; // dx-fixed-size: long side of the scale handles, drawn by the inset shadows", + "category": "local-var" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 20, + "widget": "colorView", + "literals": [ + "17px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$colorview-handle-second-side-size: 17px; // dx-fixed-size: short side of the scale handles, drawn by the inset shadows", + "category": "local-var" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 84, + "widget": "colorView", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "padding: 1px 0; // dx-line-width: room for the 1px hairline ring the cells inside carry, which overflow: hidden would clip", + "category": "inline" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 120, + "widget": "colorView", + "literals": [ + "-7px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "left: -7px; // dx-px-nudge: centres the handle across the hue scale, counting its own border", + "category": "inline" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 126, + "widget": "colorView", + "literals": [ + "-6px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "top: -6px; // dx-px-nudge: centres the handle across the alpha scale, counting its own border", + "category": "inline" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 144, + "widget": "colorView", + "literals": [ + "16px" + ], + "occurrences": 2, + "marker": "dx-fixed-size", + "text": "background-size: 16px 16px; // dx-fixed-size: tile of the transparency checkerboard, drawn by two offset gradients", + "category": "inline" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 145, + "widget": "colorView", + "literals": [ + "8px" + ], + "occurrences": 2, + "marker": "dx-fixed-size", + "text": "background-position: 0 0, 8px 8px; // dx-fixed-size: half the tile, which is what makes the two gradients read as a checkerboard", + "category": "inline" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 149, + "widget": "colorView", + "literals": [ + "6px", + "8px", + "14px" + ], + "occurrences": 3, + "marker": "dx-fixed-size", + "text": "background-position: 0 6px, 8px 14px; // dx-fixed-size: the same checkerboard, shifted to sit inside the alpha scale", + "category": "inline" + }, + { + "file": "scss/widgets/base/colorView/_mixins.scss", + "line": 3, + "widget": "colorView", + "literals": [ + "5px", + "6px", + "7px", + "12px", + "13px" + ], + "occurrences": 5, + "marker": "dx-fixed-size", + "text": "background: radial-gradient(transparent 5px, $handle-border-color 6px, $handle-color 7px, $handle-color 12px, $handle-border-color 13px); // dx-fixed-size: the handle is drawn, not laid out — a transparent core to 5px, a 1px ring at 6px, fill to 12px and a 1px ring at 13px, inside the 28px diameter", + "category": "inline" + }, + { + "file": "scss/widgets/base/colorView/_mixins.scss", + "line": 4, + "widget": "colorView", + "literals": [ + "1px" + ], + "occurrences": 2, + "marker": "dx-shadow-geometry", + "text": "box-shadow: 0 1px 1px 0 $handle-border-color; // dx-shadow-geometry: lifts the round handle off the palette", + "category": "geometry" + }, + { + "file": "scss/widgets/base/colorView/_mixins.scss", + "line": 8, + "widget": "colorView", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border: 1px solid; // dx-line-width: hairline outline of the handle", + "category": "geometry" + }, + { + "file": "scss/widgets/base/colorView/_mixins.scss", + "line": 10, + "widget": "colorView", + "literals": [ + "-5px", + "3px", + "5px", + "-6px", + "1px", + "4px", + "6px" + ], + "occurrences": 10, + "marker": "dx-shadow-geometry", + "text": "box-shadow: inset -5px 0 0 3px $handle-color, inset 5px 0 0 3px $handle-color, inset -6px 0 1px 4px $handle-border-color, inset 6px 0 1px 4px $handle-border-color; // dx-shadow-geometry: the grip is drawn entirely with inset shadows — 5px bars inset from both sides, each edged by a 1px ring at 6px", + "category": "geometry" + }, + { + "file": "scss/widgets/base/colorView/_mixins.scss", + "line": 14, + "widget": "colorView", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border: 1px solid; // dx-line-width: hairline outline of the handle", + "category": "geometry" + }, + { + "file": "scss/widgets/base/colorView/_mixins.scss", + "line": 16, + "widget": "colorView", + "literals": [ + "-5px", + "3px", + "5px", + "-6px", + "1px", + "4px", + "6px" + ], + "occurrences": 10, + "marker": "dx-shadow-geometry", + "text": "box-shadow: inset 0 -5px 0 3px $handle-color, inset 0 5px 0 3px $handle-color, inset 0 -6px 1px 4px $handle-border-color, inset 0 6px 1px 4px $handle-border-color; // dx-shadow-geometry: the same grip turned 90deg for the horizontal scale", + "category": "geometry" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 146, + "widget": "dataGrid", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots", + "category": "geometry" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 182, + "widget": "dataGrid", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "@include dx-icon-sizing(14px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots", + "category": "mixin-arg" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 301, + "widget": "dataGrid", + "literals": [ + "21px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "@include dx-icon-sizing(21px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots", + "category": "mixin-arg" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 365, + "widget": "dataGrid", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "outline-offset: -1px; // dx-px-nudge: a one-pixel inset for the sticky-column overlay", + "category": "geometry" + }, + { + "file": "scss/widgets/base/dataGrid/layout/cell.scss", + "line": 283, + "widget": "dataGrid", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots", + "category": "geometry" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 178, + "widget": "diagram", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "width: calc(100% - 2px) !important; // stylelint-disable-line declaration-no-important -- dx-px-nudge: 2px shaved off a full-width popup", + "category": "calc" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 88, + "widget": "fileManager", + "literals": [ + "431px" + ], + "occurrences": 1, + "marker": "dx-literal-required", + "text": "@media (min-width: 431px) { // dx-literal-required: a media condition, var() is invalid here", + "category": "media" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 303, + "widget": "fileManager", + "literals": [ + "-5000px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "top: -5000px; // dx-structural: parks the container off-screen until it is positioned", + "category": "structural" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 304, + "widget": "fileManager", + "literals": [ + "-5000px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "left: -5000px; // dx-structural: parks the container off-screen until it is positioned", + "category": "structural" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 309, + "widget": "fileManager", + "literals": [ + "-5000px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "top: -5000px; // dx-structural: parks the container off-screen until it is positioned", + "category": "structural" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 310, + "widget": "fileManager", + "literals": [ + "-5000px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "left: -5000px; // dx-structural: parks the container off-screen until it is positioned", + "category": "structural" + }, + { + "file": "scss/widgets/base/filterBuilder/_common.scss", + "line": 76, + "widget": "filterBuilder", + "literals": [ + "-7px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-top: -7px; // dx-fixed-size: pulls the row onto the group line", + "category": "inline" + }, + { + "file": "scss/widgets/base/filterBuilder/_common.scss", + "line": 77, + "widget": "filterBuilder", + "literals": [ + "-4px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-bottom: -4px; // dx-fixed-size: pulls the row onto the group line", + "category": "inline" + }, + { + "file": "scss/widgets/base/gantt/_index.scss", + "line": 60, + "widget": "gantt", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "margin-top: -1px; // dx-px-nudge: a one-pixel correction on top of the row height", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 25, + "widget": "gridBase", + "literals": [ + "1px" + ], + "occurrences": 4, + "marker": "dx-structural", + "text": "clip: rect(1px, 1px, 1px, 1px); // dx-structural: clips the a11y live region to nothing while keeping it rendered — the NOTE above; not a size", + "category": "geometry" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 37, + "widget": "gridBase", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-right: 5px !important; // stylelint-disable-line declaration-no-important -- dx-fixed-size: legacy compat helper class, kept for the Foundation layout below", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 55, + "widget": "gridBase", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "margin-top: -1px; // dx-px-nudge: pulls the pager up by one border so its top edge overlaps the grid bottom edge", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 86, + "widget": "gridBase", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "padding-top: 1px; // dx-px-nudge: lifts the first submenu row off the menu border", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 307, + "widget": "gridBase", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "max-width: 10px; // dx-structural: deliberately tiny so the table sizes to its columns rather than the container — the fixed variant below resets it to none", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 424, + "widget": "gridBase", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border: 2px solid transparent; // dx-line-width: thickness of the invalid-cell ring, drawn on a pseudo-element", + "category": "geometry" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 426, + "widget": "gridBase", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "left: 1px; // dx-px-nudge: insets that ring by the cell border on the left", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 474, + "widget": "gridBase", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "min-height: 1px; // dx-structural: one-pixel floor so the headers block keeps layout presence when it has no rows; not a designed height", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 550, + "widget": "gridBase", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "top: -1px; // dx-px-nudge: pulls the focus ring out over the cell border", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 551, + "widget": "gridBase", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "bottom: -1px; // dx-px-nudge: pulls the focus ring out over the cell border", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 552, + "widget": "gridBase", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "left: -1px; // dx-px-nudge: pulls the focus ring out over the cell border", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 553, + "widget": "gridBase", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "right: -1px; // dx-px-nudge: pulls the focus ring out over the cell border", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 560, + "widget": "gridBase", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border-top: 1px solid transparent; // dx-line-width: hairline placeholder keeping the range-end input aligned with the range-start one", + "category": "geometry" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 654, + "widget": "gridBase", + "literals": [ + "9px", + "6px", + "8px" + ], + "occurrences": 4, + "marker": "dx-px-nudge", + "text": "padding: 9px 6px 8px 6px; // dx-px-nudge: +1px on each side of the resting padding above, compensating the border the disabled item loses on hover", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/_index.scss", + "line": 949, + "widget": "gridBase", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "margin-right: -2px; // dx-px-nudge: RTL mirror — pulls the menu out by its own border", + "category": "inline" + }, + { + "file": "scss/widgets/base/gridBase/layout/aiChat/_mixins.scss", + "line": 47, + "widget": "gridBase", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border-width: 1px; // dx-line-width: hairline border of the incoming message bubble", + "category": "geometry" + }, + { + "file": "scss/widgets/base/lookup/_index.scss", + "line": 10, + "widget": "lookup", + "literals": [ + "45px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "height: calc(100% - 45px); // dx-fixed-size: the height the popup toolbar takes from the list", + "category": "calc" + }, + { + "file": "scss/widgets/base/pivotGrid/_common.scss", + "line": 238, + "widget": "pivotGrid", + "literals": [ + "-9999px" + ], + "occurrences": 1, + "marker": "dx-structural", + "text": "top: -9999px; // dx-structural: parks the scrollbar probe off-screen", + "category": "structural" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 60, + "widget": "pivotGrid", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 61, + "widget": "pivotGrid", + "literals": [ + "1px", + "3px" + ], + "occurrences": 2, + "marker": "dx-shadow-geometry", + "text": "$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 66, + "widget": "pivotGrid", + "literals": [ + "-5px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$pivotgrid-expand-icon-offset: -5px; // dx-fixed-size: negated at its use site", + "category": "local-var" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 74, + "widget": "pivotGrid", + "literals": [ + "-4px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-top: -4px; // dx-fixed-size: pulls the element onto the grid line", + "category": "inline" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 75, + "widget": "pivotGrid", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-left: -1px; // dx-fixed-size: pulls the element onto the grid line", + "category": "inline" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 79, + "widget": "pivotGrid", + "literals": [ + "-3px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-top: -3px; // dx-fixed-size: pulls the element onto the grid line", + "category": "inline" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 84, + "widget": "pivotGrid", + "literals": [ + "-3px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-left: -3px; // dx-fixed-size: pulls the element onto the grid line", + "category": "inline" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 333, + "widget": "pivotGrid", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-top: -1px; // dx-fixed-size: pulls the element onto the grid line", + "category": "inline" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 604, + "widget": "pivotGrid", + "literals": [ + "-3px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-left: -3px; // dx-fixed-size: pulls the element onto the grid line", + "category": "inline" + }, + { + "file": "scss/widgets/base/popover/_index.scss", + "line": 2, + "widget": "popover", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "@include dx-popover-arrow-size(20px); // dx-fixed-size: the arrow width; the mixin divides it by sqrt(2), so a var() cannot pass", + "category": "mixin-arg" + }, + { + "file": "scss/widgets/base/scheduler/_common.scss", + "line": 4, + "widget": "scheduler", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$scheduler-appointment-collector-margin: 3px; // dx-fixed-size: the collector margin, multiplied elsewhere so a var() cannot pass", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_common.scss", + "line": 75, + "widget": "scheduler", + "literals": [ + "450px" + ], + "occurrences": 1, + "marker": "dx-literal-required", + "text": "@media (max-width: 450px) { // dx-literal-required: a media condition, var() is invalid here", + "category": "media" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 88, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$scheduler-hovered-appointment-top-shadow-size: 5px; // dx-fixed-size: negated and composed into shadows, so a var() cannot pass", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 89, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 91, + "widget": "scheduler", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 93, + "widget": "scheduler", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 94, + "widget": "scheduler", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 98, + "widget": "scheduler", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 99, + "widget": "scheduler", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 102, + "widget": "scheduler", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 103, + "widget": "scheduler", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 104, + "widget": "scheduler", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 130, + "widget": "scheduler", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$scheduler-time-indicator-top: 14px; // dx-fixed-size: negated at its use site", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 131, + "widget": "scheduler", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$scheduler-time-indicator-left: 12px; // dx-fixed-size: negated at its use site", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 134, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 135, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-shadow-geometry", + "text": "$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0; // dx-shadow-geometry", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 465, + "widget": "scheduler", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "bottom: -1px; // dx-px-nudge: sits on the 1px border, see the note above", + "category": "inline" + }, + { + "file": "scss/widgets/base/scheduler/appointment/regular/_index.scss", + "line": 147, + "widget": "scheduler", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "left: -1px; // dx-px-nudge: pulls the resize handle onto the appointment's 1px border", + "category": "inline" + }, + { + "file": "scss/widgets/base/scheduler/layout/_header.scss", + "line": 9, + "widget": "scheduler", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "margin-bottom: -1px; // dx-px-nudge: collapses the header border with the row below", + "category": "inline" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 44, + "widget": "scheduler", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$scheduler-timepanel-cell-offset: 20px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 48, + "widget": "scheduler", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$scheduler-current-time-cell-border-size: 2px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 50, + "widget": "scheduler", + "literals": [ + "50px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$scheduler-workspace-date-table-cell-height: 50px; // dx-fixed-size: four derived heights multiply it, so a var() cannot pass", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 54, + "widget": "scheduler", + "literals": [ + "10px" + ], + "occurrences": 2, + "marker": "dx-px-nudge", + "text": "$scheduler-header-panel-table-cell-height: if(meta.type-of($scheduler-workspace-date-table-cell-height) == number, $scheduler-workspace-date-table-cell-height - 10px, calc(#{$scheduler-workspace-date-table-cell-height} - 10px)); // dx-px-nudge: -10px under the workspace cell height", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 57, + "widget": "scheduler", + "literals": [ + "80px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "$scheduler-group-header-table-cell-width: 80px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass", + "category": "local-var" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 121, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "top: if(meta.type-of($scheduler-header-panel-table-cell-height) == number and meta.type-of($scheduler-current-time-cell-border-size) == number, $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1, calc(#{$scheduler-header-panel-table-cell-height} - #{$scheduler-current-time-cell-border-size} - 1px)); // dx-px-nudge: -1px under the derived top offset, so the indicator overlaps the border", + "category": "calc" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 405, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "padding: 0 5px; // dx-fixed-size: horizontal padding of the time panel cell", + "category": "inline" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 697, + "widget": "scheduler", + "literals": [ + "-13px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "margin-top: -13px; // dx-px-nudge: lifts the hour label to straddle the cell border", + "category": "inline" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 707, + "widget": "scheduler", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "bottom: -1px; // dx-px-nudge: sits the time indicator on the cell border", + "category": "inline" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 870, + "widget": "scheduler", + "literals": [ + "-1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "box-shadow: inset 0 -1px 0 $scheduler-base-border-color; // dx-line-width: hairline standing in for the removed border-bottom", + "category": "geometry" + }, + { + "file": "scss/widgets/base/scheduler/views/day/_index.scss", + "line": 45, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-px-nudge", + "text": "margin-top: 1px; // dx-px-nudge: keeps the ungrouped header panel off the border above", + "category": "inline" + }, + { + "file": "scss/widgets/base/scheduler/views/month/_index.scss", + "line": 73, + "widget": "scheduler", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "box-shadow: 0 -2px 0 $scheduler-base-border-color; // dx-line-width: 2px line standing in for the removed border-bottom", + "category": "geometry" + }, + { + "file": "scss/widgets/base/scheduler/views/timelines/_index.scss", + "line": 188, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border-bottom: 1px solid; // dx-line-width: hairline under the empty header cell", + "category": "geometry" + }, + { + "file": "scss/widgets/base/stepper/layout/step/_index.scss", + "line": 20, + "widget": "stepper", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-line-width", + "text": "border-width: 1px; // dx-line-width: hairline, the same in every theme", + "category": "geometry" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 53, + "widget": "textEditor", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "padding: 0 2px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes", + "category": "inline" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 201, + "widget": "textEditor", + "literals": [ + "1px", + "-1px" + ], + "occurrences": 3, + "marker": "dx-line-width", + "text": ")} 1px -1px 1px);", + "category": "inline" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 225, + "widget": "textEditor", + "literals": [ + "-1px", + "1px" + ], + "occurrences": 4, + "marker": "dx-line-width", + "text": "clip-path: inset(-1px 1px -1px -1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale", + "category": "geometry" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 240, + "widget": "textEditor", + "literals": [ + "-1px", + "1px" + ], + "occurrences": 4, + "marker": "dx-line-width", + "text": "clip-path: inset(-1px -1px -1px 1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale", + "category": "geometry" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 245, + "widget": "textEditor", + "literals": [ + "-1px", + "1px" + ], + "occurrences": 4, + "marker": "dx-line-width", + "text": "clip-path: inset(-1px -1px -1px 1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale", + "category": "geometry" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 249, + "widget": "textEditor", + "literals": [ + "-1px", + "1px" + ], + "occurrences": 4, + "marker": "dx-line-width", + "text": "clip-path: inset(-1px 1px -1px -1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale", + "category": "geometry" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 653, + "widget": "textEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-top: 1px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes", + "category": "inline" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 654, + "widget": "textEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-bottom: 1px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes", + "category": "inline" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 786, + "widget": "textEditor", + "literals": [ + "1px" + ], + "occurrences": 2, + "marker": "dx-px-nudge", + "text": "padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); // dx-px-nudge: -1px under the button's own padding", + "category": "calc" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 840, + "widget": "textEditor", + "literals": [ + "1px" + ], + "occurrences": 2, + "marker": "dx-px-nudge", + "text": "padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); // dx-px-nudge: -1px under the button's own padding", + "category": "calc" + }, + { + "file": "scss/widgets/base/toolbar/_index.scss", + "line": 101, + "widget": "toolbar", + "literals": [ + "-5px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin: 0 -5px; // dx-fixed-size: pulls the items flush with the toolbar edge", + "category": "inline" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 168, + "widget": "treeList", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "@include dx-icon-sizing(14px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots", + "category": "mixin-arg" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 256, + "widget": "treeList", + "literals": [ + "16px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "@include dx-icon-sizing(16px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots", + "category": "mixin-arg" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 264, + "widget": "treeList", + "literals": [ + "21px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "@include dx-icon-sizing(21px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots", + "category": "mixin-arg" + }, + { + "file": "scss/widgets/base/treeList/layout/cell.scss", + "line": 229, + "widget": "treeList", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots", + "category": "geometry" + }, + { + "file": "scss/widgets/base/treeView/_common.scss", + "line": 86, + "widget": "treeView", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": "dx-fixed-size", + "text": "margin-inline-end: 8px; // dx-fixed-size: demos hand-write this class outside the widget, where a tier var would not reach", + "category": "inline" + } + ] +} diff --git a/packages/devextreme-scss/tools/sizes/lists/theme-settable.json b/packages/devextreme-scss/tools/sizes/lists/theme-settable.json new file mode 100644 index 000000000000..5ff2f88fddb8 --- /dev/null +++ b/packages/devextreme-scss/tools/sizes/lists/theme-settable.json @@ -0,0 +1,7756 @@ +{ + "$comment": [ + "GENERATED by tools/sizes/inventory.mjs — do not edit by hand. Judgment calls belong in that script, not in this file.", + "Sizes the theme can set from outside without touching the shared layer: the literal is the default of a `$x: … !default` declaration, so `@use \"…/base/x\" with ($x: …)` replaces it for one theme and leaves the default — and every other theme — untouched.", + "kind \"module-variable\" — a `$x: … !default` declaration; \"mixin-parameter\" — a default in a `@mixin name(…)` signature, which a theme replaces by passing an argument.", + "status \"injected\" — fluent-next already passes a value; \"open\" — the knob exists and nobody turns it; \"parameter\" — a mixin parameter, where the signature itself is the channel and there is nothing to cross-check by name. An \"open\" row is theme-side work only.", + "The match is by variable name. A name declared in a nested module is only reachable once the parent forwards it (see base/chat/_index.scss), which is why an \"open\" row can sit next to injected ones from the same widget." + ], + "summary": { + "occurrences": 525, + "variables": 454, + "injected": 501, + "open": 0, + "parameters": 24 + }, + "places": [ + { + "file": "scss/widgets/base/_box.scss", + "line": 1, + "widget": "box", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": null, + "text": "$box-item-content-font-size: 14px !default;", + "variable": "box-item-content-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/box/_index.scss", + "setTo": "var(--dx-box-item-content-font-size)" + }, + { + "file": "scss/widgets/base/_contextMenu.scss", + "line": 2, + "widget": "contextMenu", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$contextmenu-menu-items-container-padding: 1px !default;", + "variable": "contextmenu-menu-items-container-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/contextMenu/_index.scss", + "setTo": "false" + }, + { + "file": "scss/widgets/base/_contextMenu.scss", + "line": 3, + "widget": "contextMenu", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$contextmenu-menu-separator-height: 1px !default;", + "variable": "contextmenu-menu-separator-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/contextMenu/_index.scss", + "setTo": "var(--dx-context-menu-separator-height)" + }, + { + "file": "scss/widgets/base/_contextMenu.scss", + "line": 4, + "widget": "contextMenu", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$contextmenu-menu-separator-margin: 5px 0 !default;", + "variable": "contextmenu-menu-separator-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/contextMenu/_index.scss", + "setTo": "var(--dx-context-menu-separator-margin)" + }, + { + "file": "scss/widgets/base/_dateBox.scss", + "line": 4, + "widget": "dateBox", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$datebox-texteditor-height: 20px !default;", + "variable": "datebox-texteditor-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dateBox/_index.scss", + "setTo": "var(--dx-date-box-input-height)" + }, + { + "file": "scss/widgets/base/_dateBox.scss", + "line": 5, + "widget": "dateBox", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$datebox-popup-content-padding-top: 20px !default;", + "variable": "datebox-popup-content-padding-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dateBox/_index.scss", + "setTo": "var(--dx-date-box-popup-content-padding-block-start)" + }, + { + "file": "scss/widgets/base/_dateBox.scss", + "line": 6, + "widget": "dateBox", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$datebox-popup-content-padding-bottom: 20px !default;", + "variable": "datebox-popup-content-padding-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dateBox/_index.scss", + "setTo": "var(--dx-date-box-popup-content-padding-block-end)" + }, + { + "file": "scss/widgets/base/_dateBox.scss", + "line": 7, + "widget": "dateBox", + "literals": [ + "90px" + ], + "occurrences": 1, + "marker": null, + "text": "$datebox-button-min-width: 90px !default;", + "variable": "datebox-button-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dateBox/_index.scss", + "setTo": "var(--dx-date-box-button-min-width)" + }, + { + "file": "scss/widgets/base/_dateBox.scss", + "line": 8, + "widget": "dateBox", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$datebox-apply-button-margin-right: 10px !default;", + "variable": "datebox-apply-button-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dateBox/_index.scss", + "setTo": "var(--dx-date-box-apply-button-margin-inline-end)" + }, + { + "file": "scss/widgets/base/_dropDownList.scss", + "line": 2, + "widget": "dropDownList", + "literals": [ + "35px" + ], + "occurrences": 1, + "marker": null, + "text": "$dropdownlist-list-min-height: 35px !default;", + "variable": "dropdownlist-list-min-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dropDownList/_index.scss", + "setTo": "var(--dx-drop-down-list-min-height)" + }, + { + "file": "scss/widgets/base/_fieldset.scss", + "line": 4, + "widget": "fieldset", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$fieldset-root-margin-bottom: 20px !default;", + "variable": "fieldset-root-margin-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fieldset/_index.scss", + "setTo": "var(--dx-fieldset-margin-block-end)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 4, + "widget": "fileUploader", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-button-margin-left: 12px !default;", + "variable": "fileuploader-button-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-button-margin-inline-start)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 5, + "widget": "fileUploader", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-upload-button-margin-top: 10px !default;", + "variable": "fileuploader-upload-button-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-upload-button-margin-block-start)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 6, + "widget": "fileUploader", + "literals": [ + "22px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-show-file-list-padding-top: 22px !default;", + "variable": "fileuploader-show-file-list-padding-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-show-file-list-padding-block-start)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 7, + "widget": "fileUploader", + "literals": [ + "4px" + ], + "occurrences": 2, + "marker": null, + "text": "$fileuploader-file-container-padding: 4px 0 4px !default;", + "variable": "fileuploader-file-container-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "false" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 8, + "widget": "fileUploader", + "literals": [ + "28px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-button-width: 28px !default;", + "variable": "fileuploader-button-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-button-width)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 9, + "widget": "fileUploader", + "literals": [ + "28px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-button-height: 28px !default;", + "variable": "fileuploader-button-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-button-height)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 10, + "widget": "fileUploader", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-button-margin-right: 10px !default;", + "variable": "fileuploader-button-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-button-margin-inline-end)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 11, + "widget": "fileUploader", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-cancel-button-position-end-margin-left: 4px !default;", + "variable": "fileuploader-cancel-button-position-end-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-cancel-button-position-end-margin-inline-start)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 12, + "widget": "fileUploader", + "literals": [ + "16px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-file-status-message-height: 16px !default;", + "variable": "fileuploader-file-status-message-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-file-status-message-height)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 13, + "widget": "fileUploader", + "literals": [ + "22px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-progressbar-height: 22px !default;", + "variable": "fileuploader-progressbar-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-progress-bar-height)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 14, + "widget": "fileUploader", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-file-size-padding-left: 4px !default;", + "variable": "fileuploader-file-size-padding-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-file-size-padding-inline-start)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 15, + "widget": "fileUploader", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-file-icon-padding-right: 6px !default;", + "variable": "fileuploader-file-icon-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-file-icon-padding-inline-end)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 16, + "widget": "fileUploader", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-file-container-button-margin-left: 10px !default;", + "variable": "fileuploader-file-container-button-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-file-container-button-rtl-margin-inline-end)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 17, + "widget": "fileUploader", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-cancel-button-position-end-margin-right: 4px !default;", + "variable": "fileuploader-cancel-button-position-end-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-cancel-button-position-end-margin-inline-end)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 18, + "widget": "fileUploader", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-file-size-padding-right: 4px !default;", + "variable": "fileuploader-file-size-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-file-size-padding-inline-end)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 19, + "widget": "fileUploader", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-file-status-message-line-margin-bottom: 2px !default;", + "variable": "fileuploader-file-status-message-line-margin-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-file-status-message-line-margin-block-end)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 20, + "widget": "fileUploader", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-cancel-button-margin-top: 5px !default;", + "variable": "fileuploader-cancel-button-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-cancel-button-margin-block-start)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 22, + "widget": "fileUploader", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-status-message-font-size: 12px !default;", + "variable": "fileuploader-status-message-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-status-message-font-size)" + }, + { + "file": "scss/widgets/base/_fileUploader.scss", + "line": 23, + "widget": "fileUploader", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$fileuploader-file-size-font-size: 10px !default;", + "variable": "fileuploader-file-size-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss", + "setTo": "var(--dx-file-uploader-file-size-font-size)" + }, + { + "file": "scss/widgets/base/_form.scss", + "line": 2, + "widget": "form", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$form-first-row-padding-top: 10px !default;", + "variable": "form-first-row-padding-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/form/_index.scss", + "setTo": "var(--dx-form-first-row-padding-block-start)" + }, + { + "file": "scss/widgets/base/_form.scss", + "line": 3, + "widget": "form", + "literals": [ + "7px" + ], + "occurrences": 1, + "marker": null, + "text": "$form-switch-margin-top: 7px !default;", + "variable": "form-switch-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/form/_index.scss", + "setTo": "var(--dx-form-switch-margin-block-start)" + }, + { + "file": "scss/widgets/base/_form.scss", + "line": 4, + "widget": "form", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$form-switch-margin-bottom: 4px !default;", + "variable": "form-switch-margin-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/form/_index.scss", + "setTo": "var(--dx-form-switch-margin-block-end)" + }, + { + "file": "scss/widgets/base/_form.scss", + "line": 5, + "widget": "form", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$form-multiview-item-content-padding: 20px !default;", + "variable": "form-multiview-item-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/form/_index.scss", + "setTo": "var(--dx-form-multiview-item-content-padding)" + }, + { + "file": "scss/widgets/base/_form.scss", + "line": 6, + "widget": "form", + "literals": [ + "19px" + ], + "occurrences": 1, + "marker": null, + "text": "$form-group-content-padding-top: 19px !default;", + "variable": "form-group-content-padding-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/form/_index.scss", + "setTo": "var(--dx-form-group-content-padding-block-start)" + }, + { + "file": "scss/widgets/base/_form.scss", + "line": 7, + "widget": "form", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$form-group-content-padding-bottom: 20px !default;", + "variable": "form-group-content-padding-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/form/_index.scss", + "setTo": "var(--dx-form-group-content-padding-block-end)" + }, + { + "file": "scss/widgets/base/_form.scss", + "line": 8, + "widget": "form", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": null, + "text": "$form-group-content-margin-top: 6px !default;", + "variable": "form-group-content-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/form/_index.scss", + "setTo": "var(--dx-form-group-content-margin-block-start)" + }, + { + "file": "scss/widgets/base/_form.scss", + "line": 9, + "widget": "form", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$form-field-item-label-location-left-padding-inline-end: 10px !default;", + "variable": "form-field-item-label-location-left-padding-inline-end", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/form/_index.scss", + "setTo": "var(--dx-form-field-item-label-location-left-padding-inline-end)" + }, + { + "file": "scss/widgets/base/_form.scss", + "line": 10, + "widget": "form", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$form-field-item-label-location-right-padding-inline-start: 10px !default;", + "variable": "form-field-item-label-location-right-padding-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/form/_index.scss", + "setTo": "var(--dx-form-field-item-label-location-right-padding-inline-start)" + }, + { + "file": "scss/widgets/base/_gallery.scss", + "line": 4, + "widget": "gallery", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$gallery-root-border-width: 1px !default;", + "variable": "gallery-root-border-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gallery/_index.scss", + "setTo": "var(--dx-gallery-border-width)" + }, + { + "file": "scss/widgets/base/_gallery.scss", + "line": 5, + "widget": "gallery", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$gallery-indicator-bottom: 10px !default;", + "variable": "gallery-indicator-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gallery/_index.scss", + "setTo": "var(--dx-gallery-indicator-inset-block-end)" + }, + { + "file": "scss/widgets/base/_gallery.scss", + "line": 6, + "widget": "gallery", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$gallery-indicator-height: 10px !default;", + "variable": "gallery-indicator-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gallery/_index.scss", + "setTo": "var(--dx-gallery-indicator-height)" + }, + { + "file": "scss/widgets/base/_gallery.scss", + "line": 7, + "widget": "gallery", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$gallery-indicator-item-margin: 0 2px !default;", + "variable": "gallery-indicator-item-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gallery/_index.scss", + "setTo": "var(--dx-gallery-indicator-item-margin)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 25, + "widget": "htmlEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$htmleditor-border-width: 1px !default;", + "variable": "htmleditor-border-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-html-editor-border-width)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 29, + "widget": "htmlEditor", + "literals": [ + "3px", + "6px" + ], + "occurrences": 2, + "marker": null, + "text": "$variable-padding: 3px 6px !default;", + "variable": "variable-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-html-editor-variable-padding)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 30, + "widget": "htmlEditor", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$variable-border-radius: 8px !default;", + "variable": "variable-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-html-editor-variable-border-radius)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 31, + "widget": "htmlEditor", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": null, + "text": "$blockquote-padding-inline-start: 12px !default;", + "variable": "blockquote-padding-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-html-editor-blockquote-padding-inline-start)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 32, + "widget": "htmlEditor", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$blockquote-border-inline-start-width: 4px !default;", + "variable": "blockquote-border-inline-start-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-html-editor-blockquote-border-inline-start-width)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 33, + "widget": "htmlEditor", + "literals": [ + "2px", + "5px" + ], + "occurrences": 2, + "marker": null, + "text": "$table-cell-padding: 2px 5px !default;", + "variable": "table-cell-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-html-editor-table-cell-padding)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 34, + "widget": "htmlEditor", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$placeholder-inset-inline: 15px !default;", + "variable": "placeholder-inset-inline", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-html-editor-placeholder-inset-inline)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 35, + "widget": "htmlEditor", + "literals": [ + "12px", + "15px" + ], + "occurrences": 2, + "marker": null, + "text": "$htmleditor-content-padding: 12px 15px !default;", + "variable": "htmleditor-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-html-editor-padding-block) var(--dx-html-editor-padding-inline)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 36, + "widget": "htmlEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$mention-padding-block: 1px !default;", + "variable": "mention-padding-block", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-mention-padding-block)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 37, + "widget": "htmlEditor", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$mention-border-radius: 2px !default;", + "variable": "mention-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-mention-border-radius)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 38, + "widget": "htmlEditor", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$mention-margin-inline: 2px !default;", + "variable": "mention-margin-inline", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-mention-margin-inline)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 39, + "widget": "htmlEditor", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$table-resizer-thickness: 5px !default;", + "variable": "table-resizer-thickness", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-html-editor-table-resizer-thickness)" + }, + { + "file": "scss/widgets/base/_htmlEditor.scss", + "line": 40, + "widget": "htmlEditor", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$table-resizer-highlight-thickness: 3px !default;", + "variable": "table-resizer-highlight-thickness", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss", + "setTo": "var(--dx-html-editor-table-resizer-highlight-thickness)" + }, + { + "file": "scss/widgets/base/_loadIndicator.scss", + "line": 5, + "widget": "loadIndicator", + "literals": [ + "32px" + ], + "occurrences": 1, + "marker": null, + "text": "$loadindicator-width: 32px !default;", + "variable": "loadindicator-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/loadIndicator/_index.scss", + "setTo": "var(--dx-load-indicator-size)" + }, + { + "file": "scss/widgets/base/_loadIndicator.scss", + "line": 6, + "widget": "loadIndicator", + "literals": [ + "32px" + ], + "occurrences": 1, + "marker": null, + "text": "$loadindicator-height: 32px !default;", + "variable": "loadindicator-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/loadIndicator/_index.scss", + "setTo": "var(--dx-load-indicator-size)" + }, + { + "file": "scss/widgets/base/_loadPanel.scss", + "line": 4, + "widget": "loadPanel", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$loadpanel-content-padding: 10px !default;", + "variable": "loadpanel-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/loadPanel/_index.scss", + "setTo": "var(--dx-load-panel-content-padding)" + }, + { + "file": "scss/widgets/base/_loadPanel.scss", + "line": 5, + "widget": "loadPanel", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$loadpanel-content-border: 1px solid #ccc !default;", + "variable": "loadpanel-content-border", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/loadPanel/_index.scss", + "setTo": "var(--dx-load-panel-content-border)" + }, + { + "file": "scss/widgets/base/_loadPanel.scss", + "line": 6, + "widget": "loadPanel", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$loadpanel-content-border-radius: 5px !default;", + "variable": "loadpanel-content-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/loadPanel/_index.scss", + "setTo": "var(--dx-load-panel-content-border-radius)" + }, + { + "file": "scss/widgets/base/_map.scss", + "line": 2, + "widget": "map", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$map-marker-tooltip-margin: 10px !default;", + "variable": "map-marker-tooltip-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/map/_index.scss", + "setTo": "mapSizes.$map-marker-tooltip-margin" + }, + { + "file": "scss/widgets/base/_menu.scss", + "line": 4, + "widget": "menu", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$menu-separator-margin-inline-end: 15px !default;", + "variable": "menu-separator-margin-inline-end", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/menu/_index.scss", + "setTo": "var(--dx-menu-separator-margin-inline-end)" + }, + { + "file": "scss/widgets/base/_menu.scss", + "line": 5, + "widget": "menu", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$menu-separator-margin-bottom: 15px !default;", + "variable": "menu-separator-margin-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/menu/_index.scss", + "setTo": "var(--dx-menu-separator-margin-block-end)" + }, + { + "file": "scss/widgets/base/_menu.scss", + "line": 6, + "widget": "menu", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$menu-treeview-node-padding: 1px !default;", + "variable": "menu-treeview-node-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/menu/_index.scss", + "setTo": "var(--dx-menu-tree-view-node-padding)" + }, + { + "file": "scss/widgets/base/_menu.scss", + "line": 7, + "widget": "menu", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$menu-item-content-padding-inline-start: 15px !default;", + "variable": "menu-item-content-padding-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/menu/_index.scss", + "setTo": "var(--dx-menu-item-content-padding-inline-start)" + }, + { + "file": "scss/widgets/base/_numberBox.scss", + "line": 5, + "widget": "numberBox", + "literals": [ + "22px" + ], + "occurrences": 1, + "marker": null, + "text": "$spin-container-width: 22px !default;", + "variable": "spin-container-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/numberBox/_index.scss", + "setTo": "var(--dx-number-box-spin-container-width)" + }, + { + "file": "scss/widgets/base/_numberBox.scss", + "line": 6, + "widget": "numberBox", + "literals": [ + "64px" + ], + "occurrences": 1, + "marker": null, + "text": "$touch-friendly-spin-container-width: 64px !default;", + "variable": "touch-friendly-spin-container-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/numberBox/_index.scss", + "setTo": "var(--dx-number-box-spin-container-touch-friendly-width)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 4, + "widget": "pagination", + "literals": [ + "7px", + "8px" + ], + "occurrences": 3, + "marker": null, + "text": "$pagination-page-padding-fallback: 7px 8px 8px !default;", + "variable": "pagination-page-padding-fallback", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "false" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 5, + "widget": "pagination", + "literals": [ + "13px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-page-horizontal-padding: 13px !default;", + "variable": "pagination-page-horizontal-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-page-padding-inline)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 6, + "widget": "pagination", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-page-margin-left: 5px !default;", + "variable": "pagination-page-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-page-margin-inline-start)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 7, + "widget": "pagination", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-page-margin-right: 1px !default;", + "variable": "pagination-page-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-page-margin-inline-end)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 8, + "widget": "pagination", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-separator-padding-left: 8px !default;", + "variable": "pagination-separator-padding-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-separator-padding-inline-start)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 9, + "widget": "pagination", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-separator-padding-right: 8px !default;", + "variable": "pagination-separator-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-separator-padding-inline-end)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 10, + "widget": "pagination", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-navigate-button-width-fallback: 10px !default;", + "variable": "pagination-navigate-button-width-fallback", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "false" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 11, + "widget": "pagination", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-navigate-button-height: 20px !default;", + "variable": "pagination-navigate-button-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-navigate-button-height)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 12, + "widget": "pagination", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-first-child-margin-left: 1px !default;", + "variable": "pagination-first-child-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-first-child-margin-inline-start)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 13, + "widget": "pagination", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-first-child-padding-left: 10px !default;", + "variable": "pagination-first-child-padding-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-first-child-padding-inline-start)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 14, + "widget": "pagination", + "literals": [ + "9px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-first-child-padding-right: 9px !default;", + "variable": "pagination-first-child-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-first-child-padding-inline-end)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 15, + "widget": "pagination", + "literals": [ + "7px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-first-child-padding-top: 7px !default;", + "variable": "pagination-first-child-padding-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-first-child-padding-block-start)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 16, + "widget": "pagination", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-first-child-padding-bottom: 8px !default;", + "variable": "pagination-first-child-padding-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-first-child-padding-block-end)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 17, + "widget": "pagination", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-page-size-margin-left: 4px !default;", + "variable": "pagination-page-size-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-page-size-margin-inline-start)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 18, + "widget": "pagination", + "literals": [ + "40px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-page-index-width: 40px !default;", + "variable": "pagination-page-index-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-page-index-width)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 19, + "widget": "pagination", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-pages-count-padding-left: 6px !default;", + "variable": "pagination-pages-count-padding-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-pages-count-padding-inline-start)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 26, + "widget": "pagination", + "literals": [ + "9px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-info-paddings: 9px !default;", + "variable": "pagination-info-paddings", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "var(--dx-pagination-info-margin-inline)" + }, + { + "file": "scss/widgets/base/_pagination.scss", + "line": 30, + "widget": "pagination", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$pagination-navigate-button-padding-block-fallback: $pagination-paddings - 1px !default;", + "variable": "pagination-navigate-button-padding-block-fallback", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pagination/_index.scss", + "setTo": "false" + }, + { + "file": "scss/widgets/base/_popup.scss", + "line": 7, + "widget": "popup", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$popup-title-padding: 10px !default;", + "variable": "popup-title-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/popup/_index.scss", + "setTo": "var(--dx-popup-title-padding)" + }, + { + "file": "scss/widgets/base/_popup.scss", + "line": 8, + "widget": "popup", + "literals": [ + "19px" + ], + "occurrences": 1, + "marker": null, + "text": "$popup-title-min-height-fallback: 19px !default;", + "variable": "popup-title-min-height-fallback", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/popup/_index.scss", + "setTo": "false" + }, + { + "file": "scss/widgets/base/_popup.scss", + "line": 9, + "widget": "popup", + "literals": [ + "10px", + "5px" + ], + "occurrences": 4, + "marker": null, + "text": "$popup-dialog-message-padding: 10px 10px 5px 10px !default;", + "variable": "popup-dialog-message-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/popup/_index.scss", + "setTo": "var(--dx-popup-dialog-message-padding)" + }, + { + "file": "scss/widgets/base/_progressBar.scss", + "line": 3, + "widget": "progressBar", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": null, + "text": "$progressbar-status-font-size: 12px !default;", + "variable": "progressbar-status-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/progressBar/_index.scss", + "setTo": "var(--dx-progress-bar-status-font-size)" + }, + { + "file": "scss/widgets/base/_progressBar.scss", + "line": 6, + "widget": "progressBar", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$progressbar-status-padding-right: 8px !default;", + "variable": "progressbar-status-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/progressBar/_index.scss", + "setTo": "var(--dx-progress-bar-status-padding-inline-end)" + }, + { + "file": "scss/widgets/base/_progressBar.scss", + "line": 7, + "widget": "progressBar", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$progressbar-status-padding-left: 8px !default;", + "variable": "progressbar-status-padding-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/progressBar/_index.scss", + "setTo": "var(--dx-progress-bar-status-padding-inline-start)" + }, + { + "file": "scss/widgets/base/_recurrenceEditor.scss", + "line": 2, + "widget": "recurrenceEditor", + "literals": [ + "25px" + ], + "occurrences": 1, + "marker": null, + "text": "$recurrence-interval-number-box-margin-top: 25px !default;", + "variable": "recurrence-interval-number-box-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/recurrenceEditor/_index.scss", + "setTo": "var(--dx-recurrence-editor-interval-number-box-margin-block-start)" + }, + { + "file": "scss/widgets/base/_recurrenceEditor.scss", + "line": 3, + "widget": "recurrenceEditor", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$recurrence-radio-group-item-padding: 10px !default;", + "variable": "recurrence-radio-group-item-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/recurrenceEditor/_index.scss", + "setTo": "var(--dx-recurrence-editor-radio-group-item-padding-block-end)" + }, + { + "file": "scss/widgets/base/_recurrenceEditor.scss", + "line": 4, + "widget": "recurrenceEditor", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$recurrence-button-group-item-padding: 8px !default;", + "variable": "recurrence-button-group-item-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/recurrenceEditor/_index.scss", + "setTo": "var(--dx-recurrence-editor-button-group-padding)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 5, + "widget": "scrollView", + "literals": [ + "40px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-top-pocket-width: 40px !default;", + "variable": "scrollview-top-pocket-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-top-pocket-width)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 6, + "widget": "scrollView", + "literals": [ + "40px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-top-pocket-height: 40px !default;", + "variable": "scrollview-top-pocket-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-top-pocket-height)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 7, + "widget": "scrollView", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-pull-down-indicator-padding: 4px !default;", + "variable": "scrollview-pull-down-indicator-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-pull-down-indicator-padding)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 8, + "widget": "scrollView", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-icon-pulldown-padding: 8px !default;", + "variable": "scrollview-icon-pulldown-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-icon-pull-down-padding)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 9, + "widget": "scrollView", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-pull-down-indicator-width: 20px !default;", + "variable": "scrollview-pull-down-indicator-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-pull-down-indicator-width)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 10, + "widget": "scrollView", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-pull-down-image-margin: 0 20px !default;", + "variable": "scrollview-pull-down-image-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-pull-down-image-margin)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 11, + "widget": "scrollView", + "literals": [ + "50px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-pull-down-image-height: 50px !default;", + "variable": "scrollview-pull-down-image-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-pull-down-image-height)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 12, + "widget": "scrollView", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-scrollbottom-padding: 10px 0 !default;", + "variable": "scrollview-scrollbottom-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-scroll-bottom-padding)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 13, + "widget": "scrollView", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-scrollbottom-indicator-margin: 0 10px 0 0 !default;", + "variable": "scrollview-scrollbottom-indicator-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-scroll-bottom-indicator-margin)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 14, + "widget": "scrollView", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-scrollbottom-indicator-margin-rtl: 0 0 0 10px !default;", + "variable": "scrollview-scrollbottom-indicator-margin-rtl", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-scroll-bottom-indicator-rtl-margin)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 16, + "widget": "scrollView", + "literals": [ + "24px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollview-pulldown-icon-font-size: 24px !default;", + "variable": "scrollview-pulldown-icon-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-pull-down-icon-font-size)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 17, + "widget": "scrollView", + "literals": [ + "50px" + ], + "occurrences": 1, + "marker": null, + "text": "$pulldown-height: 50px !default;", + "variable": "pulldown-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-pull-down-height)" + }, + { + "file": "scss/widgets/base/_scrollView.scss", + "line": 18, + "widget": "scrollView", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$pulldown-padding: 15px !default;", + "variable": "pulldown-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollView/_index.scss", + "setTo": "var(--dx-scroll-view-pull-down-padding)" + }, + { + "file": "scss/widgets/base/_slider.scss", + "line": 4, + "widget": "slider", + "literals": [ + "28px" + ], + "occurrences": 1, + "marker": null, + "text": "$slider-tooltip-content-height: 28px !default;", + "variable": "slider-tooltip-content-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/slider/_index.scss", + "setTo": "var(--dx-slider-tooltip-height)" + }, + { + "file": "scss/widgets/base/_slider.scss", + "line": 8, + "widget": "slider", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": null, + "text": "$slider-label-position-bottom-padding-bottom: 14px !default;", + "variable": "slider-label-position-bottom-padding-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/slider/_index.scss", + "setTo": "var(--dx-slider-label-bottom-padding-block-end)" + }, + { + "file": "scss/widgets/base/_slider.scss", + "line": 9, + "widget": "slider", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": null, + "text": "$slider-label-position-top-padding-top: 14px !default;", + "variable": "slider-label-position-top-padding-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/slider/_index.scss", + "setTo": "var(--dx-slider-label-top-padding-block-start)" + }, + { + "file": "scss/widgets/base/_sortable.scss", + "line": 13, + "widget": "sortable", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$sortable-placeholder-border: 1px solid !default;", + "variable": "sortable-placeholder-border", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/sortable/_index.scss", + "setTo": "var(--dx-sortable-placeholder-border-width) solid" + }, + { + "file": "scss/widgets/base/_sortable.scss", + "line": 14, + "widget": "sortable", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$sortable-placeholder-inside-border-width: 2px !default;", + "variable": "sortable-placeholder-inside-border-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/sortable/_index.scss", + "setTo": "var(--dx-sortable-placeholder-inside-border-width)" + }, + { + "file": "scss/widgets/base/_speedDialAction.scss", + "line": 6, + "widget": "speedDialAction", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$speeddialaction-fa-button-label-border-radius: 4px !default;", + "variable": "speeddialaction-fa-button-label-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/speedDialAction/_index.scss", + "setTo": "var(--dx-speed-dial-action-fa-button-label-border-radius)" + }, + { + "file": "scss/widgets/base/_splitterBar.scss", + "line": 4, + "widget": "splitterBar", + "literals": [ + "7px" + ], + "occurrences": 1, + "marker": null, + "text": "$splitterbar-splitter-border-width: 7px !default;", + "variable": "splitterbar-splitter-border-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/splitterBar/_index.scss", + "setTo": "var(--dx-splitter-bar-border-width)" + }, + { + "file": "scss/widgets/base/_splitterBar.scss", + "line": 5, + "widget": "splitterBar", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$splitterbar-splitter-bar-width: 1px !default;", + "variable": "splitterbar-splitter-bar-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/splitterBar/_index.scss", + "setTo": "var(--dx-splitter-bar-width)" + }, + { + "file": "scss/widgets/base/_tileView.scss", + "line": 2, + "widget": "tileView", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$tileview-wrapper-height: 1px !default;", + "variable": "tileview-wrapper-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/tileView/_index.scss", + "setTo": "var(--dx-tile-view-wrapper-height)" + }, + { + "file": "scss/widgets/base/_toast.scss", + "line": 2, + "widget": "toast", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$toast-content-padding: 10px !default;", + "variable": "toast-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/toast/_index.scss", + "setTo": "var(--dx-toast-content-padding)" + }, + { + "file": "scss/widgets/base/_toast.scss", + "line": 3, + "widget": "toast", + "literals": [ + "35px" + ], + "occurrences": 1, + "marker": null, + "text": "$toast-icon-width: 35px !default;", + "variable": "toast-icon-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/toast/_index.scss", + "setTo": "var(--dx-toast-icon-width)" + }, + { + "file": "scss/widgets/base/_toast.scss", + "line": 4, + "widget": "toast", + "literals": [ + "35px" + ], + "occurrences": 1, + "marker": null, + "text": "$toast-icon-height: 35px !default;", + "variable": "toast-icon-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/toast/_index.scss", + "setTo": "var(--dx-toast-icon-height)" + }, + { + "file": "scss/widgets/base/_toast.scss", + "line": 5, + "widget": "toast", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$toast-icon-margin-right: 10px !default;", + "variable": "toast-icon-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/toast/_index.scss", + "setTo": "var(--dx-toast-icon-margin-inline-end)" + }, + { + "file": "scss/widgets/base/_toast.scss", + "line": 6, + "widget": "toast", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$toast-icon-margin-left: 10px !default;", + "variable": "toast-icon-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/toast/_index.scss", + "setTo": "var(--dx-toast-icon-rtl-margin-inline-end)" + }, + { + "file": "scss/widgets/base/_toast.scss", + "line": 7, + "widget": "toast", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$toast-stack-gap: 3px !default;", + "variable": "toast-stack-gap", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/toast/_index.scss", + "setTo": "var(--dx-toast-stack-gap)" + }, + { + "file": "scss/widgets/base/_tooltip.scss", + "line": 2, + "widget": "tooltip", + "literals": [ + "34px" + ], + "occurrences": 1, + "marker": null, + "text": "$tooltip-overlay-content-min-width: 34px !default;", + "variable": "tooltip-overlay-content-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/tooltip/_index.scss", + "setTo": "var(--dx-tooltip-overlay-content-min-width)" + }, + { + "file": "scss/widgets/base/_tooltip.scss", + "line": 3, + "widget": "tooltip", + "literals": [ + "26px" + ], + "occurrences": 1, + "marker": null, + "text": "$tooltip-overlay-content-min-height: 26px !default;", + "variable": "tooltip-overlay-content-min-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/tooltip/_index.scss", + "setTo": "var(--dx-tooltip-overlay-content-min-height)" + }, + { + "file": "scss/widgets/base/_tooltip.scss", + "line": 4, + "widget": "tooltip", + "literals": [ + "12px", + "17px" + ], + "occurrences": 2, + "marker": null, + "text": "$tooltip-popup-content-padding: 12px 17px !default;", + "variable": "tooltip-popup-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/tooltip/_index.scss", + "setTo": "var(--dx-tooltip-popup-content-padding)" + }, + { + "file": "scss/widgets/base/_validation.scss", + "line": 2, + "widget": "validation", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$validation-summary-margin-top: 20px !default;", + "variable": "validation-summary-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/common/_mixins.scss", + "setTo": "validationSizes.$validation-summary-margin-block-start" + }, + { + "file": "scss/widgets/base/_validation.scss", + "line": 3, + "widget": "validation", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$validation-message-content-padding: 10px !default;", + "variable": "validation-message-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/common/_mixins.scss", + "setTo": "validationSizes.$validation-message-content-padding" + }, + { + "file": "scss/widgets/base/_validation.scss", + "line": 6, + "widget": "validation", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$validation-summary-item-border-bottom-width: 1px !default;", + "variable": "validation-summary-item-border-bottom-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/common/_mixins.scss", + "setTo": "var(--dx-validation-summary-item-border-block-end-width)" + }, + { + "file": "scss/widgets/base/buttonGroup/_index.scss", + "line": 4, + "widget": "buttonGroup", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$buttongroup-mode-text-column-gap: 1px !default;", + "variable": "buttongroup-mode-text-column-gap", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/buttonGroup/_index.scss", + "setTo": "var(--dx-button-group-text-column-gap)" + }, + { + "file": "scss/widgets/base/calendar/_calendar.scss", + "line": 4, + "widget": "calendar", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$calendar-border-width: 1px !default;", + "variable": "calendar-border-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/calendar/_index.scss", + "setTo": "var(--dx-calendar-border-width)" + }, + { + "file": "scss/widgets/base/calendar/_calendar.scss", + "line": 5, + "widget": "calendar", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$calendar-multiview-table-padding: 0 10px !default;", + "variable": "calendar-multiview-table-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/calendar/_index.scss", + "setTo": "0 var(--dx-calendar-view-multiview-padding-inline)" + }, + { + "file": "scss/widgets/base/calendar/_calendar.scss", + "line": 7, + "widget": "calendar", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$calendar-week-day-header-font-size: 10px !default;", + "variable": "calendar-week-day-header-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/calendar/_index.scss", + "setTo": "var(--dx-calendar-week-day-header-font-size)" + }, + { + "file": "scss/widgets/base/calendar/_mixins.scss", + "line": 134, + "widget": "calendar", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$cell-today-border-width: 2px,", + "variable": "cell-today-border-width", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/calendar/_mixins.scss", + "line": 135, + "widget": "calendar", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$cell-contoured-ring-width: 2px,", + "variable": "cell-contoured-ring-width", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/chat/_index.scss", + "line": 5, + "widget": "chat", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$chat-messagebox-border-block-start-width: 1px !default;", + "variable": "chat-messagebox-border-block-start-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/chat/_index.scss", + "setTo": "var(--dx-chat-message-box-border-block-start-width)" + }, + { + "file": "scss/widgets/base/chat/_index.scss", + "line": 6, + "widget": "chat", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$chat-messagebubble-padding-image: 4px !default;", + "variable": "chat-messagebubble-padding-image", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/chat/_index.scss", + "setTo": "var(--dx-chat-bubble-image-padding)" + }, + { + "file": "scss/widgets/base/chat/_index.scss", + "line": 7, + "widget": "chat", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$chat-messagebubble-border-radius-image: 8px !default;", + "variable": "chat-messagebubble-border-radius-image", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/chat/_index.scss", + "setTo": "var(--dx-chat-bubble-image-border-radius)" + }, + { + "file": "scss/widgets/base/chat/_index.scss", + "line": 8, + "widget": "chat", + "literals": [ + "400px" + ], + "occurrences": 1, + "marker": null, + "text": "$chat-messagebubble-max-width-image: 400px !default;", + "variable": "chat-messagebubble-max-width-image", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/chat/_index.scss", + "setTo": "var(--dx-chat-bubble-image-max-width)" + }, + { + "file": "scss/widgets/base/chat/_index.scss", + "line": 9, + "widget": "chat", + "literals": [ + "400px" + ], + "occurrences": 1, + "marker": null, + "text": "$chat-messagebubble-max-height-image: 400px !default;", + "variable": "chat-messagebubble-max-height-image", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/chat/_index.scss", + "setTo": "var(--dx-chat-bubble-image-max-height)" + }, + { + "file": "scss/widgets/base/chat/layout/chat/_mixins.scss", + "line": 5, + "widget": "chat", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$border-width: 1px,", + "variable": "border-width", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/checkBox/_index.scss", + "line": 5, + "widget": "checkBox", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$checkbox-text-padding-inline-start: 5px !default;", + "variable": "checkbox-text-padding-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/checkBox/_index.scss", + "setTo": "false" + }, + { + "file": "scss/widgets/base/colorBox/_index.scss", + "line": 7, + "widget": "colorBox", + "literals": [ + "40px" + ], + "occurrences": 1, + "marker": null, + "text": "$colorbox-input-left-padding: 40px !default;", + "variable": "colorbox-input-left-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorBox/_index.scss", + "setTo": "var(--dx-color-box-input-min-width)" + }, + { + "file": "scss/widgets/base/colorBox/_index.scss", + "line": 10, + "widget": "colorBox", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$colorbox-texteditor-input-container-width: 15px !default;", + "variable": "colorbox-texteditor-input-container-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorBox/_index.scss", + "setTo": "var(--dx-color-box-input-container-width)" + }, + { + "file": "scss/widgets/base/colorBox/_index.scss", + "line": 11, + "widget": "colorBox", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$colorbox-texteditor-input-container-height: 15px !default;", + "variable": "colorbox-texteditor-input-container-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorBox/_index.scss", + "setTo": "var(--dx-color-box-input-container-height)" + }, + { + "file": "scss/widgets/base/colorBox/_index.scss", + "line": 12, + "widget": "colorBox", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": null, + "text": "$colorbox-texteditor-input-container-inset-inline-start: 14px !default;", + "variable": "colorbox-texteditor-input-container-inset-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorBox/_index.scss", + "setTo": "var(--dx-color-box-input-container-inset-inline-start)" + }, + { + "file": "scss/widgets/base/colorBox/_index.scss", + "line": 20, + "widget": "colorBox", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$colorbox-overlay-padding: 20px !default;", + "variable": "colorbox-overlay-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorBox/_index.scss", + "setTo": "var(--dx-color-box-overlay-padding)" + }, + { + "file": "scss/widgets/base/colorBox/_index.scss", + "line": 21, + "widget": "colorBox", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$colorbox-toolbar-item-padding-right: 10px !default;", + "variable": "colorbox-toolbar-item-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorBox/_index.scss", + "setTo": "var(--dx-color-box-toolbar-item-padding-inline-end)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 3, + "widget": "colorView", + "literals": [ + "450px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-container-width: 450px !default;", + "variable": "color-view-container-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-container-width)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 4, + "widget": "colorView", + "literals": [ + "288px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-palette-width: 288px !default;", + "variable": "color-view-palette-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-palette-width)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 5, + "widget": "colorView", + "literals": [ + "299px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-palette-height: 299px !default;", + "variable": "color-view-palette-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-palette-height)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 6, + "widget": "colorView", + "literals": [ + "292px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-alpha-cell-width: 292px !default;", + "variable": "color-view-alpha-cell-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-alpha-cell-width)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 7, + "widget": "colorView", + "literals": [ + "18px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-hue-scale-width: 18px !default;", + "variable": "color-view-hue-scale-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-hue-scale-width)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 23, + "widget": "colorView", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-label-hex-margin: 10px 0 0 0 !default;", + "variable": "color-view-label-hex-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-container-hex-margin)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 24, + "widget": "colorView", + "literals": [ + "43px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-alpha-label-margin-inline-start: 43px !default;", + "variable": "color-view-alpha-label-margin-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-container-alpha-label-margin)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 25, + "widget": "colorView", + "literals": [ + "41px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-alpha-label-margin-inline-start-rtl: 41px !default;", + "variable": "color-view-alpha-label-margin-inline-start-rtl", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-container-alpha-label-margin)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 26, + "widget": "colorView", + "literals": [ + "115px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-alpha-label-width: 115px !default;", + "variable": "color-view-alpha-label-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-container-alpha-label-width)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 27, + "widget": "colorView", + "literals": [ + "69px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-textbox-width: 69px !default;", + "variable": "color-view-textbox-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-container-textbox-width)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 28, + "widget": "colorView", + "literals": [ + "1px", + "10px" + ], + "occurrences": 3, + "marker": null, + "text": "$color-view-textbox-margin: 1px 1px 10px 0 !default;", + "variable": "color-view-textbox-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-container-textbox-margin)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 29, + "widget": "colorView", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-alpha-row-margin-block-start: 10px !default;", + "variable": "color-view-alpha-row-margin-block-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-alpha-row-margin-block-start)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 30, + "widget": "colorView", + "literals": [ + "19px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-hue-scale-cell-margin-inline-start: 19px !default;", + "variable": "color-view-hue-scale-cell-margin-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-hue-scale-margin)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 31, + "widget": "colorView", + "literals": [ + "90px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-controls-width: 90px !default;", + "variable": "color-view-controls-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-controls-container-width)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 32, + "widget": "colorView", + "literals": [ + "27px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-controls-margin-inline-start: 27px !default;", + "variable": "color-view-controls-margin-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-controls-container-margin)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 33, + "widget": "colorView", + "literals": [ + "25px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-controls-margin-inline-start-rtl: 25px !default;", + "variable": "color-view-controls-margin-inline-start-rtl", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-controls-container-margin)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 34, + "widget": "colorView", + "literals": [ + "86px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-color-preview-width: 86px !default;", + "variable": "color-view-color-preview-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "100%" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 35, + "widget": "colorView", + "literals": [ + "40px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-color-preview-height: 40px !default;", + "variable": "color-view-color-preview-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-color-preview-height)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 36, + "widget": "colorView", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-alpha-scale-height: 20px !default;", + "variable": "color-view-alpha-scale-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-alpha-scale-height)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 37, + "widget": "colorView", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-alpha-cell-margin-block: 6px !default;", + "variable": "color-view-alpha-cell-margin-block", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-alpha-cell-margin-block)" + }, + { + "file": "scss/widgets/base/colorView/_index.scss", + "line": 38, + "widget": "colorView", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$color-view-apply-button-margin-inline-end: 10px !default;", + "variable": "color-view-apply-button-margin-inline-end", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/colorView/_index.scss", + "setTo": "var(--dx-color-view-apply-button-margin-inline-end)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 13, + "widget": "dataGrid", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-group-row-border: 1px solid !default;", + "variable": "datagrid-group-row-border", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-group-row-border)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 14, + "widget": "dataGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-sticky-column-border: 2px solid !default;", + "variable": "datagrid-sticky-column-border", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-sticky-column-border)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 15, + "widget": "dataGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-cell-focus-outline: 2px solid !default;", + "variable": "datagrid-cell-focus-outline", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-cell-outline-focused)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 21, + "widget": "dataGrid", + "literals": [ + "30px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-common-group-min-width: 30px !default;", + "variable": "datagrid-common-group-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-group-panel-item-min-width)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 22, + "widget": "dataGrid", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-common-addrow-margin-right: 10px !default;", + "variable": "datagrid-common-addrow-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-group-panel-item-margin-inline-end)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 23, + "widget": "dataGrid", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-common-addrow-margin-left: 6px !default;", + "variable": "datagrid-common-addrow-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-group-panel-item-sort-margin-inline-start)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 24, + "widget": "dataGrid", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-common-form-buttons-border-radius: 3px !default;", + "variable": "datagrid-common-form-buttons-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-block-separator-border-radius)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 25, + "widget": "dataGrid", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-common-form-buttons-margin-left: 10px !default;", + "variable": "datagrid-common-form-buttons-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-group-panel-item-rtl-margin-inline-end)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 26, + "widget": "dataGrid", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-common-form-buttons-margin-right: 6px !default;", + "variable": "datagrid-common-form-buttons-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-group-panel-item-sort-rtl-margin-inline-start)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 49, + "widget": "dataGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-header-filter-outline: 2px solid !default;", + "variable": "datagrid-header-filter-outline", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-grid-outline-focused)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 50, + "widget": "dataGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-header-filter-outline-offset: 2px !default;", + "variable": "datagrid-header-filter-outline-offset", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-outline-offset-focused)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 51, + "widget": "dataGrid", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-filter-panel-clear-filter-outline-offset: 3px !default;", + "variable": "datagrid-filter-panel-clear-filter-outline-offset", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-filter-panel-outline-offset-focused)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 52, + "widget": "dataGrid", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-button-margin-left: 10px !default;", + "variable": "datagrid-button-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-form-buttons-margin-inline-start)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 53, + "widget": "dataGrid", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-button-margin-top: 10px !default;", + "variable": "datagrid-button-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-form-buttons-margin-block-start)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 54, + "widget": "dataGrid", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-error-message-margin-bottom: 20px !default;", + "variable": "datagrid-error-message-margin-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-error-message-margin-block-end)" + }, + { + "file": "scss/widgets/base/dataGrid/_index.scss", + "line": 55, + "widget": "dataGrid", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$datagrid-button-margin-right: 10px !default;", + "variable": "datagrid-button-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss", + "setTo": "var(--dx-data-grid-form-buttons-rtl-margin-inline-start)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 6, + "widget": "diagram", + "literals": [ + "600px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-root-height: 600px !default;", + "variable": "diagram-root-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-height)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 7, + "widget": "diagram", + "literals": [ + "350px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-root-min-height: 350px !default;", + "variable": "diagram-root-min-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-min-height)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 8, + "widget": "diagram", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-toolbar-wrapper-padding: 5px !default;", + "variable": "diagram-toolbar-wrapper-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-toolbar-wrapper-padding)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 9, + "widget": "diagram", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-button-min-height: 14px !default;", + "variable": "diagram-button-min-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-toolbox-input-button-min-height)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 10, + "widget": "diagram", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-popup-content-padding: 8px !default;", + "variable": "diagram-popup-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-popup-content-padding)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 11, + "widget": "diagram", + "literals": [ + "300px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-colorview-palette-min-width: 300px !default;", + "variable": "diagram-colorview-palette-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-color-view-palette-min-width)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 12, + "widget": "diagram", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-colorview-hue-scale-cell-margin-left: 12px !default;", + "variable": "diagram-colorview-hue-scale-cell-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-color-view-hue-scale-cell-margin-inline-start)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 13, + "widget": "diagram", + "literals": [ + "64px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-loading-indicator-width: 64px !default;", + "variable": "diagram-loading-indicator-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-loading-indicator-width)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 14, + "widget": "diagram", + "literals": [ + "64px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-loading-indicator-height: 64px !default;", + "variable": "diagram-loading-indicator-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-loading-indicator-height)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 15, + "widget": "diagram", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-context-toolbox-target-width: 1px !default;", + "variable": "diagram-context-toolbox-target-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-context-toolbox-target-width)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 16, + "widget": "diagram", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-context-toolbox-target-height: 1px !default;", + "variable": "diagram-context-toolbox-target-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-context-toolbox-target-height)" + }, + { + "file": "scss/widgets/base/diagram/_index.scss", + "line": 20, + "widget": "diagram", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$diagram-border-width: 1px !default;", + "variable": "diagram-border-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/diagram/_index.scss", + "setTo": "var(--dx-diagram-border-width)" + }, + { + "file": "scss/widgets/base/dropDownButton/_mixins.scss", + "line": 4, + "widget": "dropDownButton", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$dropdownbutton-icon-right-margin-inline-start: 4px,", + "variable": "dropdownbutton-icon-right-margin-inline-start", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/dropDownMenu/_index.scss", + "line": 2, + "widget": "dropDownMenu", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$dropdownmenu-list-min-width: 100px !default;", + "variable": "dropdownmenu-list-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dropDownMenu/_index.scss", + "setTo": "var(--dx-drop-down-menu-list-min-width)" + }, + { + "file": "scss/widgets/base/dropDownMenu/_index.scss", + "line": 3, + "widget": "dropDownMenu", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$dropdownmenu-list-border-radius: 8px !default;", + "variable": "dropdownmenu-list-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dropDownMenu/_index.scss", + "setTo": "var(--dx-drop-down-menu-list-border-radius)" + }, + { + "file": "scss/widgets/base/dropDownMenu/_index.scss", + "line": 4, + "widget": "dropDownMenu", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$dropdownmenu-popup-content-padding: 1px !default;", + "variable": "dropdownmenu-popup-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/dropDownMenu/_index.scss", + "setTo": "var(--dx-drop-down-menu-popup-content-padding)" + }, + { + "file": "scss/widgets/base/dropDownMenu/_mixins.scss", + "line": 6, + "widget": "dropDownMenu", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$outline-width: 2px,", + "variable": "outline-width", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/dropDownMenu/_mixins.scss", + "line": 7, + "widget": "dropDownMenu", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$outline-offset: 1px,", + "variable": "outline-offset", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 4, + "widget": "fileManager", + "literals": [ + "500px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-root-height: 500px !default;", + "variable": "filemanager-root-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-height)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 5, + "widget": "fileManager", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-root-border: 1px solid !default;", + "variable": "filemanager-root-border", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-border-width) solid" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 6, + "widget": "fileManager", + "literals": [ + "240px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-overlay-content-min-width: 240px !default;", + "variable": "filemanager-overlay-content-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-overlay-content-min-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 7, + "widget": "fileManager", + "literals": [ + "400px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-overlay-content-max-width: 400px !default;", + "variable": "filemanager-overlay-content-max-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-overlay-content-max-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 8, + "widget": "fileManager", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-popup-content-padding: 15px !default;", + "variable": "filemanager-popup-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-popup-content-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 9, + "widget": "fileManager", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-box-padding: 5px 0 0 !default;", + "variable": "filemanager-progress-box-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 10, + "widget": "fileManager", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-notification-common-padding-bottom: 10px !default;", + "variable": "filemanager-notification-common-padding-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-notification-padding-block-end)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 11, + "widget": "fileManager", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-notification-common-border-bottom-width: 1px !default;", + "variable": "filemanager-notification-common-border-bottom-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-notification-border-block-end-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 12, + "widget": "fileManager", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-panel-border-left-width: 1px !default;", + "variable": "filemanager-progress-panel-border-left-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-panel-border-inline-start-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 13, + "widget": "fileManager", + "literals": [ + "340px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-panel-width: 340px !default;", + "variable": "filemanager-progress-panel-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-panel-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 14, + "widget": "fileManager", + "literals": [ + "10px", + "20px" + ], + "occurrences": 4, + "marker": null, + "text": "$filemanager-progress-panel-container-padding: 10px 20px 20px 20px !default;", + "variable": "filemanager-progress-panel-container-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-panel-container-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 15, + "widget": "fileManager", + "literals": [ + "5px", + "10px" + ], + "occurrences": 2, + "marker": null, + "text": "$filemanager-progress-panel-title-padding: 0 0 5px 10px !default;", + "variable": "filemanager-progress-panel-title-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-panel-title-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 16, + "widget": "fileManager", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-panel-separator-height: 20px !default;", + "variable": "filemanager-progress-panel-separator-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-panel-separator-height)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 17, + "widget": "fileManager", + "literals": [ + "16px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-i-cancel-width: 16px !default;", + "variable": "filemanager-i-cancel-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-i-cancel-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 18, + "widget": "fileManager", + "literals": [ + "16px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-i-cancel-height: 16px !default;", + "variable": "filemanager-i-cancel-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-i-cancel-height)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 19, + "widget": "fileManager", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-box-margin-bottom: 8px !default;", + "variable": "filemanager-progress-box-margin-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-margin-block-end)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 20, + "widget": "fileManager", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-box-border-radius: 2px !default;", + "variable": "filemanager-progress-box-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-border-radius)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 21, + "widget": "fileManager", + "literals": [ + "10px" + ], + "occurrences": 3, + "marker": null, + "text": "$filemanager-progress-panel-box-padding: 10px 0 10px 10px !default;", + "variable": "filemanager-progress-panel-box-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-panel-box-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 22, + "widget": "fileManager", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-box-without-close-button-padding-right: 10px !default;", + "variable": "filemanager-progress-box-without-close-button-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-without-close-button-padding-inline-end)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 23, + "widget": "fileManager", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-box-image-margin-right: 10px !default;", + "variable": "filemanager-progress-box-image-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-image-margin-inline-end)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 24, + "widget": "fileManager", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-box-common-padding: 5px 0 !default;", + "variable": "filemanager-progress-box-common-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-content-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 25, + "widget": "fileManager", + "literals": [ + "9px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-box-close-button-margin-top: 9px !default;", + "variable": "filemanager-progress-box-close-button-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-close-button-margin-block-start)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 26, + "widget": "fileManager", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-box-close-button-margin-left: 5px !default;", + "variable": "filemanager-progress-box-close-button-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-close-button-margin-inline-start)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 27, + "widget": "fileManager", + "literals": [ + "2px", + "8px", + "3px" + ], + "occurrences": 3, + "marker": null, + "text": "$filemanager-progress-box-error-padding: 2px 8px 3px !default;", + "variable": "filemanager-progress-box-error-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-error-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 28, + "widget": "fileManager", + "literals": [ + "150px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-box-error-max-height: 150px !default;", + "variable": "filemanager-progress-box-error-max-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-error-max-height)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 29, + "widget": "fileManager", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-toolbar-separator-item-width: 1px !default;", + "variable": "filemanager-toolbar-separator-item-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-toolbar-separator-item-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 30, + "widget": "fileManager", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-toolbar-separator-item-margin-right: 5px !default;", + "variable": "filemanager-toolbar-separator-item-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-toolbar-separator-item-margin-inline-end)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 31, + "widget": "fileManager", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-container-border-top: 1px solid !default;", + "variable": "filemanager-container-border-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-container-border-block-start)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 32, + "widget": "fileManager", + "literals": [ + "5px", + "10px" + ], + "occurrences": 2, + "marker": null, + "text": "$filemanager-dirs-panel-padding: 5px 10px !default;", + "variable": "filemanager-dirs-panel-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-dirs-panel-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 33, + "widget": "fileManager", + "literals": [ + "250px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-drawer-panel-content-initial-min-width: 250px !default;", + "variable": "filemanager-drawer-panel-content-initial-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-drawer-panel-content-initial-min-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 34, + "widget": "fileManager", + "literals": [ + "300px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-drawer-panel-content-initial-max-width: 300px !default;", + "variable": "filemanager-drawer-panel-content-initial-max-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-drawer-panel-content-initial-max-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 35, + "widget": "fileManager", + "literals": [ + "2px", + "11px" + ], + "occurrences": 2, + "marker": null, + "text": "$filemanager-breadcrumbs-padding: 2px 11px !default;", + "variable": "filemanager-breadcrumbs-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-breadcrumbs-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 36, + "widget": "fileManager", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-breadcrumbs-border-bottom: 1px solid !default;", + "variable": "filemanager-breadcrumbs-border-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-breadcrumbs-border-block-end)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 37, + "widget": "fileManager", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-menu-item-content-padding-left: 2px !default;", + "variable": "filemanager-menu-item-content-padding-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-menu-item-content-padding-inline-start)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 38, + "widget": "fileManager", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-menu-item-content-padding-right: 2px !default;", + "variable": "filemanager-menu-item-content-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-menu-item-content-padding-inline-end)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 39, + "widget": "fileManager", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-menu-item-content-margin: 0 10px !default;", + "variable": "filemanager-menu-item-content-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-menu-item-content-margin)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 40, + "widget": "fileManager", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-breadcrumbs-path-separator-padding-left: 1px !default;", + "variable": "filemanager-breadcrumbs-path-separator-padding-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-breadcrumbs-path-separator-padding-inline-start)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 41, + "widget": "fileManager", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-breadcrumbs-path-separator-padding-right: 1px !default;", + "variable": "filemanager-breadcrumbs-path-separator-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-breadcrumbs-path-separator-padding-inline-end)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 42, + "widget": "fileManager", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-thumbnails-view-port-padding: 5px !default;", + "variable": "filemanager-thumbnails-view-port-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-thumbnails-view-port-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 43, + "widget": "fileManager", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-thumbnails-item-width: 100px !default;", + "variable": "filemanager-thumbnails-item-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-thumbnails-item-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 44, + "widget": "fileManager", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-thumbnails-item-height: 100px !default;", + "variable": "filemanager-thumbnails-item-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-thumbnails-item-height)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 45, + "widget": "fileManager", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-thumbnails-item-border: 1px dashed transparent !default;", + "variable": "filemanager-thumbnails-item-border", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-thumbnails-item-border)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 46, + "widget": "fileManager", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-thumbnails-item-margin: 5px !default;", + "variable": "filemanager-thumbnails-item-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-thumbnails-item-margin)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 47, + "widget": "fileManager", + "literals": [ + "13px", + "10px" + ], + "occurrences": 2, + "marker": null, + "text": "$filemanager-thumbnails-item-content-padding: 13px 0 10px !default;", + "variable": "filemanager-thumbnails-item-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-thumbnails-item-content-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 48, + "widget": "fileManager", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-thumbnails-item-spacer-height: 10px !default;", + "variable": "filemanager-thumbnails-item-spacer-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-thumbnails-item-spacer-height)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 49, + "widget": "fileManager", + "literals": [ + "10px", + "11px" + ], + "occurrences": 2, + "marker": null, + "text": "$filemanager-button-content-padding: 10px 11px !default;", + "variable": "filemanager-button-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-view-mode-button-content-padding)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 50, + "widget": "fileManager", + "literals": [ + "300px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-dialog-min-width: 300px !default;", + "variable": "filemanager-dialog-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-dialog-min-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 51, + "widget": "fileManager", + "literals": [ + "300px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-overlay-content-min-height: 300px !default;", + "variable": "filemanager-overlay-content-min-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-overlay-content-min-height)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 52, + "widget": "fileManager", + "literals": [ + "400px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-overlay-content-max-height: 400px !default;", + "variable": "filemanager-overlay-content-max-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-overlay-content-max-height)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 53, + "widget": "fileManager", + "literals": [ + "340px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-dialog-name-editor-max-width: 340px !default;", + "variable": "filemanager-dialog-name-editor-max-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-dialog-name-editor-max-width)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 54, + "widget": "fileManager", + "literals": [ + "180px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-dialog-name-editor-min-height: 180px !default;", + "variable": "filemanager-dialog-name-editor-min-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-dialog-name-editor-min-height)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 55, + "widget": "fileManager", + "literals": [ + "180px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-dialog-name-editor-max-height: 180px !default;", + "variable": "filemanager-dialog-name-editor-max-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-dialog-name-editor-max-height)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 56, + "widget": "fileManager", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progressbox-cancel-button-margin-top: 5px !default;", + "variable": "filemanager-progressbox-cancel-button-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-box-cancel-button-margin-block-start)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 58, + "widget": "fileManager", + "literals": [ + "18px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-progress-title-font-size: 18px !default;", + "variable": "filemanager-progress-title-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-progress-title-font-size)" + }, + { + "file": "scss/widgets/base/fileManager/_index.scss", + "line": 66, + "widget": "fileManager", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$filemanager-splitter-wrapper-right: 3px !default;", + "variable": "filemanager-splitter-wrapper-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/fileManager/_index.scss", + "setTo": "var(--dx-file-manager-splitter-wrapper-inset-inline-end)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 27, + "widget": "filterBuilder", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-action-icon-margin-left: 5px !default;", + "variable": "filterbuilder-action-icon-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-action-icon-margin-inline-start)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 28, + "widget": "filterBuilder", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-action-icon-margin-right: 5px !default;", + "variable": "filterbuilder-action-icon-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-action-icon-margin-inline-end)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 29, + "widget": "filterBuilder", + "literals": [ + "26px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-group-content-padding-right: 26px !default;", + "variable": "filterbuilder-group-content-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-group-content-padding-inline-end)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 30, + "widget": "filterBuilder", + "literals": [ + "7px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-range-separator-margin: 0 7px !default;", + "variable": "filterbuilder-range-separator-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-range-separator-margin)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 31, + "widget": "filterBuilder", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-item-value-text-min-width: 20px !default;", + "variable": "filterbuilder-item-value-text-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-item-value-text-min-width)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 32, + "widget": "filterBuilder", + "literals": [ + "2px", + "7px", + "3px" + ], + "occurrences": 4, + "marker": null, + "text": "$filterbuilder-item-value-text-padding: 2px 7px 3px 7px !default;", + "variable": "filterbuilder-item-value-text-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-item-value-text-padding)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 33, + "widget": "filterBuilder", + "literals": [ + "5px", + "8px" + ], + "occurrences": 2, + "marker": null, + "text": "$filterbuilder-action-icon-padding: 5px 8px !default;", + "variable": "filterbuilder-action-icon-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-action-icon-padding)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 34, + "widget": "filterBuilder", + "literals": [ + "26px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-group-content-padding-left: 26px !default;", + "variable": "filterbuilder-group-content-padding-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-group-content-padding-inline-start)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 35, + "widget": "filterBuilder", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-treeview-item-padding-left: 5px !default;", + "variable": "filterbuilder-treeview-item-padding-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-tree-view-item-padding-inline-start)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 36, + "widget": "filterBuilder", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-treeview-item-padding-right: 5px !default;", + "variable": "filterbuilder-treeview-item-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-tree-view-item-padding-inline-end)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 37, + "widget": "filterBuilder", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-treeview-node-margin-left: 15px !default;", + "variable": "filterbuilder-treeview-node-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-tree-view-node-margin-inline-start)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 38, + "widget": "filterBuilder", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-treeview-node-margin-right: 15px !default;", + "variable": "filterbuilder-treeview-node-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-tree-view-node-margin-inline-end)" + }, + { + "file": "scss/widgets/base/filterBuilder/_index.scss", + "line": 39, + "widget": "filterBuilder", + "literals": [ + "360px" + ], + "occurrences": 1, + "marker": null, + "text": "$filterbuilder-scrollable-max-height: 360px !default;", + "variable": "filterbuilder-scrollable-max-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss", + "setTo": "var(--dx-filter-builder-scrollable-max-height)" + }, + { + "file": "scss/widgets/base/gantt/_index.scss", + "line": 2, + "widget": "gantt", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$gantt-toolbar-separator-border-left: 1px solid transparent !default;", + "variable": "gantt-toolbar-separator-border-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gantt/_index.scss", + "setTo": "var(--dx-gantt-toolbar-separator-border-inline-start)" + }, + { + "file": "scss/widgets/base/gantt/_index.scss", + "line": 3, + "widget": "gantt", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$gantt-splitter-bar-width: 2px !default;", + "variable": "gantt-splitter-bar-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gantt/_index.scss", + "setTo": "var(--dx-gantt-splitter-bar-width)" + }, + { + "file": "scss/widgets/base/gantt/_index.scss", + "line": 4, + "widget": "gantt", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$gantt-view-min-width: 1px !default;", + "variable": "gantt-view-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gantt/_index.scss", + "setTo": "var(--dx-gantt-view-min-width)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 4, + "widget": "gridBase", + "literals": [ + "7px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-cell-padding: 7px !default;", + "variable": "grid-cell-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-cell-content-padding)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 5, + "widget": "gridBase", + "literals": [ + "32px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-texteditor-input-padding: 32px !default;", + "variable": "grid-texteditor-input-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-editor-input-padding)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 8, + "widget": "gridBase", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-total-footer-padding-block: 14px !default;", + "variable": "grid-total-footer-padding-block", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-summary-padding-block)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 9, + "widget": "gridBase", + "literals": [ + "70px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-command-select-column-width: 70px !default;", + "variable": "grid-command-select-column-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-command-select-column-width)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 10, + "widget": "gridBase", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-command-edit-column-width: 100px !default;", + "variable": "grid-command-edit-column-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-command-edit-column-width)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 11, + "widget": "gridBase", + "literals": [ + "80px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-command-edit-column-with-icons-width: 80px !default;", + "variable": "grid-command-edit-column-with-icons-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-command-edit-column-with-icons-width)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 12, + "widget": "gridBase", + "literals": [ + "30px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-command-expand-column-width: 30px !default;", + "variable": "grid-command-expand-column-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-command-expand-column-width)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 13, + "widget": "gridBase", + "literals": [ + "36px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-command-adaptive-column-width: 36px !default;", + "variable": "grid-command-adaptive-column-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-command-adaptive-column-width)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 14, + "widget": "gridBase", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-column-header-indicator-width: 14px !default;", + "variable": "grid-column-header-indicator-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-column-indicator-width)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 15, + "widget": "gridBase", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-text-content-margin: 3px !default;", + "variable": "grid-text-content-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-header-text-margin-inline)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 16, + "widget": "gridBase", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-sort-index-width: 12px !default;", + "variable": "grid-sort-index-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-sort-index-width)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 17, + "widget": "gridBase", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-sort-index-offset: 3px !default;", + "variable": "grid-sort-index-offset", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-sort-index-offset)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 18, + "widget": "gridBase", + "literals": [ + "50px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-ai-assistant-confirm-dialog-button-width: 50px !default;", + "variable": "grid-ai-assistant-confirm-dialog-button-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-ai-confirm-dialog-button-width)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 21, + "widget": "gridBase", + "literals": [ + "7px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-context-menu-item-padding-block: 7px !default;", + "variable": "grid-context-menu-item-padding-block", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-context-menu-item-padding-block)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 22, + "widget": "gridBase", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-context-menu-item-padding-inline-start: 5px !default;", + "variable": "grid-context-menu-item-padding-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-context-menu-item-padding-inline-start)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 23, + "widget": "gridBase", + "literals": [ + "30px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-context-menu-item-padding-inline-end: 30px !default;", + "variable": "grid-context-menu-item-padding-inline-end", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-context-menu-item-padding-inline-end)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 24, + "widget": "gridBase", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-context-menu-overlay-item-padding: 5px !default;", + "variable": "grid-context-menu-overlay-item-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-context-menu-overlay-item-padding)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 25, + "widget": "gridBase", + "literals": [ + "30px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-context-menu-overlay-item-padding-inline-end: 30px !default;", + "variable": "grid-context-menu-overlay-item-padding-inline-end", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-context-menu-overlay-item-padding-inline-end)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 26, + "widget": "gridBase", + "literals": [ + "8px", + "5px", + "7px" + ], + "occurrences": 4, + "marker": null, + "text": "$grid-menu-bar-item-padding: 8px 5px 7px 5px !default;", + "variable": "grid-menu-bar-item-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-menu-bar-item-padding)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 27, + "widget": "gridBase", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-menu-caption-padding-inline-start: 6px !default;", + "variable": "grid-menu-caption-padding-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-menu-caption-padding-inline-start)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 28, + "widget": "gridBase", + "literals": [ + "16px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-column-chooser-title-font-size: 16px !default;", + "variable": "grid-column-chooser-title-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-column-chooser-title-font-size)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 29, + "widget": "gridBase", + "literals": [ + "20px" + ], + "occurrences": 3, + "marker": null, + "text": "$grid-column-chooser-content-padding: 0 20px 20px 20px !default;", + "variable": "grid-column-chooser-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-column-chooser-content-padding)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 30, + "widget": "gridBase", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-column-chooser-item-margin-block-end: 10px !default;", + "variable": "grid-column-chooser-item-margin-block-end", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-column-chooser-item-margin-block-end)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 31, + "widget": "gridBase", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-column-chooser-tree-view-item-padding-inline-start: 4px !default;", + "variable": "grid-column-chooser-tree-view-item-padding-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-column-chooser-tree-view-item-padding-inline-start)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 32, + "widget": "gridBase", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-column-separator-width: 3px !default;", + "variable": "grid-column-separator-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-column-separator-width)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 33, + "widget": "gridBase", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-toolbar-button-margin-inline-start: 10px !default;", + "variable": "grid-toolbar-button-margin-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-toolbar-button-margin-inline-start)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 34, + "widget": "gridBase", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-search-panel-margin-inline-start: 15px !default;", + "variable": "grid-search-panel-margin-inline-start", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-search-panel-margin-inline-start)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 35, + "widget": "gridBase", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-rowsview-empty-height: 100px !default;", + "variable": "grid-rowsview-empty-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-rowsview-empty-height)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 36, + "widget": "gridBase", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-bottom-load-panel-padding: 10px !default;", + "variable": "grid-bottom-load-panel-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-bottom-load-panel-padding)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 37, + "widget": "gridBase", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-filter-panel-padding: 10px !default;", + "variable": "grid-filter-panel-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-filter-panel-padding)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 38, + "widget": "gridBase", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-filter-panel-checkbox-padding-inline-end: 10px !default;", + "variable": "grid-filter-panel-checkbox-padding-inline-end", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-filter-panel-checkbox-padding-inline-end)" + }, + { + "file": "scss/widgets/base/gridBase/_variables.scss", + "line": 39, + "widget": "gridBase", + "literals": [ + "7px" + ], + "occurrences": 1, + "marker": null, + "text": "$grid-filter-panel-icon-margin-inline-end: 7px !default;", + "variable": "grid-filter-panel-icon-margin-inline-end", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-filter-panel-icon-margin-inline-end)" + }, + { + "file": "scss/widgets/base/gridBase/layout/aiChat/_variables.scss", + "line": 1, + "widget": "gridBase", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$ai-chat-toolbar-item-spacing: 4px !default;", + "variable": "ai-chat-toolbar-item-spacing", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-ai-chat-toolbar-item-padding-inline-end)" + }, + { + "file": "scss/widgets/base/gridBase/layout/aiChat/_variables.scss", + "line": 2, + "widget": "gridBase", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$ai-chat-message-gap: 8px !default;", + "variable": "ai-chat-message-gap", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-ai-chat-message-gap)" + }, + { + "file": "scss/widgets/base/gridBase/layout/aiChat/_variables.scss", + "line": 3, + "widget": "gridBase", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$ai-chat-message-content-gap: 4px !default;", + "variable": "ai-chat-message-content-gap", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-ai-chat-message-content-gap)" + }, + { + "file": "scss/widgets/base/gridBase/layout/aiChat/_variables.scss", + "line": 4, + "widget": "gridBase", + "literals": [ + "280px" + ], + "occurrences": 1, + "marker": null, + "text": "$ai-chat-message-width: 280px !default;", + "variable": "ai-chat-message-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-ai-chat-message-min-width)" + }, + { + "file": "scss/widgets/base/gridBase/layout/aiChat/_variables.scss", + "line": 5, + "widget": "gridBase", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$ai-chat-message-regenerate-button-border-radius: 4px !default;", + "variable": "ai-chat-message-regenerate-button-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/gridBase/_index.scss", + "setTo": "var(--dx-grid-ai-chat-message-regenerate-button-border-radius)" + }, + { + "file": "scss/widgets/base/list/_index.scss", + "line": 6, + "widget": "list", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$list-searchbox-margin-bottom: 5px !default;", + "variable": "list-searchbox-margin-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/list/_index.scss", + "setTo": "var(--dx-list-search-box-margin-block-end)" + }, + { + "file": "scss/widgets/base/list/_index.scss", + "line": 9, + "widget": "list", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$list-item-badge-container-width: 20px !default;", + "variable": "list-item-badge-container-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/list/_index.scss", + "setTo": "var(--dx-list-item-badge-container-width)" + }, + { + "file": "scss/widgets/base/list/_index.scss", + "line": 10, + "widget": "list", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$list-slide-menu-button-padding: 0 10px !default;", + "variable": "list-slide-menu-button-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/list/_index.scss", + "setTo": "var(--dx-list-slide-menu-button-padding)" + }, + { + "file": "scss/widgets/base/list/_index.scss", + "line": 11, + "widget": "list", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$list-static-delete-button-padding: 0 5px !default;", + "variable": "list-static-delete-button-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/list/_index.scss", + "setTo": "var(--dx-list-delete-button-static-padding)" + }, + { + "file": "scss/widgets/base/list/_index.scss", + "line": 12, + "widget": "list", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$list-next-button-padding: 5px !default;", + "variable": "list-next-button-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/list/_index.scss", + "setTo": "var(--dx-list-next-button-padding)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 2, + "widget": "pivotGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-position-indicator-vertical-height: 2px !default;", + "variable": "pivotgrid-position-indicator-vertical-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-position-indicator-vertical-height)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 3, + "widget": "pivotGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-position-indicator-horizontal-width: 2px !default;", + "variable": "pivotgrid-position-indicator-horizontal-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-position-indicator-horizontal-width)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 4, + "widget": "pivotGrid", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-position-indicator-last-margin-left: 3px !default;", + "variable": "pivotgrid-position-indicator-last-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-position-indicator-last-margin-inline-start)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 5, + "widget": "pivotGrid", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-area-box-margin-bottom: 4px !default;", + "variable": "pivotgrid-area-box-margin-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-area-box-margin-block-end)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 6, + "widget": "pivotGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-expand-icon-container-outline: 2px solid !default;", + "variable": "pivotgrid-expand-icon-container-outline", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-expand-icon-container-outline)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 7, + "widget": "pivotGrid", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-toolbar-margin-right: 10px !default;", + "variable": "pivotgrid-toolbar-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-toolbar-margin-inline-end)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 8, + "widget": "pivotGrid", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-field-chooser-button-margin-right: 4px !default;", + "variable": "pivotgrid-field-chooser-button-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-field-chooser-button-margin-inline-end)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 9, + "widget": "pivotGrid", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-button-margin: 1px !default;", + "variable": "pivotgrid-button-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-button-margin)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 10, + "widget": "pivotGrid", + "literals": [ + "50px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-last-cell-min-width: 50px !default;", + "variable": "pivotgrid-last-cell-min-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-last-cell-min-width)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 11, + "widget": "pivotGrid", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-icon-sorted-margin-left: 5px !default;", + "variable": "pivotgrid-icon-sorted-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-icon-sorted-margin-inline-start)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 12, + "widget": "pivotGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-fields-area-head-padding: 0 2px !default;", + "variable": "pivotgrid-fields-area-head-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-fields-area-head-padding)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 13, + "widget": "pivotGrid", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-treeview-search-margin: 5px !default;", + "variable": "pivotgrid-treeview-search-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-tree-view-search-margin)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 14, + "widget": "pivotGrid", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-area-padding: 5px !default;", + "variable": "pivotgrid-area-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-area-padding)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 15, + "widget": "pivotGrid", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-area-fields-margin-top: 3px !default;", + "variable": "pivotgrid-area-fields-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-area-fields-margin-block-start)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 16, + "widget": "pivotGrid", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-position-indicator-last-margin-left-rtl: 1px !default;", + "variable": "pivotgrid-position-indicator-last-margin-left-rtl", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-position-indicator-last-rtl-margin-inline-start)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 17, + "widget": "pivotGrid", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-toolbar-margin-left: 10px !default;", + "variable": "pivotgrid-toolbar-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-toolbar-margin-inline-start)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 18, + "widget": "pivotGrid", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-field-chooser-button-margin-left: 4px !default;", + "variable": "pivotgrid-field-chooser-button-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-field-chooser-button-margin-inline-start)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 19, + "widget": "pivotGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-fields-area-head-padding-left: 2px !default;", + "variable": "pivotgrid-fields-area-head-padding-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-fields-area-head-padding-inline-start)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 20, + "widget": "pivotGrid", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-icon-sorted-margin-right: 5px !default;", + "variable": "pivotgrid-icon-sorted-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-icon-sorted-margin-inline-end)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 21, + "widget": "pivotGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-header-cell-side-padding: 2px !default;", + "variable": "pivotgrid-header-cell-side-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-header-cell-padding-inline)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 22, + "widget": "pivotGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-fields-area-head-cell-side-padding: 2px !default;", + "variable": "pivotgrid-fields-area-head-cell-side-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-fields-area-head-cell-padding-inline)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 47, + "widget": "pivotGrid", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-common-field-chooser-drag-width: 100px !default;", + "variable": "pivotgrid-common-field-chooser-drag-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-field-chooser-drag-width)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 48, + "widget": "pivotGrid", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-common-field-chooser-drag-height: 100px !default;", + "variable": "pivotgrid-common-field-chooser-drag-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-field-chooser-drag-height)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 56, + "widget": "pivotGrid", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-border-width: 1px !default;", + "variable": "pivotgrid-border-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-border-width)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 57, + "widget": "pivotGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-focus-outline-width: 2px !default;", + "variable": "pivotgrid-focus-outline-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-focus-rect-outline-width)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 58, + "widget": "pivotGrid", + "literals": [ + "-2px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-focus-outline-offset: -2px !default;", + "variable": "pivotgrid-focus-outline-offset", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-focus-rect-outline-offset-inset)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 63, + "widget": "pivotGrid", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-icon-size: 14px !default;", + "variable": "pivotgrid-icon-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-icon-size)" + }, + { + "file": "scss/widgets/base/pivotGrid/_index.scss", + "line": 64, + "widget": "pivotGrid", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$pivotgrid-common-field-padding: 2px !default;", + "variable": "pivotgrid-common-field-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss", + "setTo": "var(--dx-pivot-grid-field-padding)" + }, + { + "file": "scss/widgets/base/radioGroup/_index.scss", + "line": 4, + "widget": "radioGroup", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$radiogroup-radio-value-container-padding-inline-end: 10px !default;", + "variable": "radiogroup-radio-value-container-padding-inline-end", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/radioGroup/_index.scss", + "setTo": "var(--dx-radio-button-value-container-padding-inline-end)" + }, + { + "file": "scss/widgets/base/radioGroup/_index.scss", + "line": 5, + "widget": "radioGroup", + "literals": [ + "17px" + ], + "occurrences": 1, + "marker": null, + "text": "$radiogroup-collection-column-gap: 17px !default;", + "variable": "radiogroup-collection-column-gap", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/radioGroup/_index.scss", + "setTo": "var(--dx-radio-group-collection-horizontal-column-gap)" + }, + { + "file": "scss/widgets/base/scheduler/_common.scss", + "line": 5, + "widget": "scheduler", + "literals": [ + "22px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-collector-height: 22px !default;", + "variable": "scheduler-appointment-collector-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-collector-height)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 1, + "widget": "scheduler", + "literals": [ + "22px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-collector-height: 22px !default;", + "variable": "scheduler-appointment-collector-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-collector-height)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 48, + "widget": "scheduler", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-common-collector-margin: 0 3px !default;", + "variable": "scheduler-common-collector-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-common-collector-margin)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 49, + "widget": "scheduler", + "literals": [ + "28px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-common-collector-size: 28px !default;", + "variable": "scheduler-common-collector-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-common-collector-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 56, + "widget": "scheduler", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-tooltip-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15) !default;", + "variable": "scheduler-tooltip-shadow", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-tooltip-shadow)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 58, + "widget": "scheduler", + "literals": [ + "360px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-tooltip-width: 360px !default;", + "variable": "scheduler-tooltip-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-tooltip-width)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 59, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-tooltip-content-padding: 5px !default;", + "variable": "scheduler-tooltip-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-tooltip-content-padding)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 60, + "widget": "scheduler", + "literals": [ + "7px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-tooltip-title-margin-top: 7px !default;", + "variable": "scheduler-tooltip-title-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-tooltip-title-margin-block-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 61, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-tooltip-title-margin-left: 5px !default;", + "variable": "scheduler-tooltip-title-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-tooltip-title-margin-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 62, + "widget": "scheduler", + "literals": [ + "5px", + "10px" + ], + "occurrences": 2, + "marker": null, + "text": "$scheduler-tooltip-date-margin: 5px 10px !default;", + "variable": "scheduler-tooltip-date-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-tooltip-date-margin)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 63, + "widget": "scheduler", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-tooltip-remove-margin-top: 10px !default;", + "variable": "scheduler-tooltip-remove-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-tooltip-remove-margin-block-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 64, + "widget": "scheduler", + "literals": [ + "16px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-tooltip-subject-font-size: 16px !default;", + "variable": "scheduler-tooltip-subject-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-tooltip-subject-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 65, + "widget": "scheduler", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-tooltip-date-font-size: 12px !default;", + "variable": "scheduler-tooltip-date-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-tooltip-date-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 66, + "widget": "scheduler", + "literals": [ + "11px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-content-details-font-size: 11px !default;", + "variable": "scheduler-appointment-content-details-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-content-details-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 84, + "widget": "scheduler", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-min-size: 4px !default;", + "variable": "scheduler-appointment-min-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-min-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 85, + "widget": "scheduler", + "literals": [ + "5px", + "7px" + ], + "occurrences": 2, + "marker": null, + "text": "$scheduler-appointment-content-padding: 5px 7px !default;", + "variable": "scheduler-appointment-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-content-padding)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 86, + "widget": "scheduler", + "literals": [ + "40px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-reduced-content-padding: 40px !default;", + "variable": "scheduler-appointment-reduced-content-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-reduced-content-padding)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 96, + "widget": "scheduler", + "literals": [ + "7px", + "15px" + ], + "occurrences": 3, + "marker": null, + "text": "$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2) !default;", + "variable": "scheduler-appointment-dragging-shadow", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-dragging-shadow)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 106, + "widget": "scheduler", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-grouped-appointment-month-text-size: 12px !default;", + "variable": "scheduler-grouped-appointment-month-text-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-month-text-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 108, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-border-width: 1px !default;", + "variable": "scheduler-border-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-border-width)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 109, + "widget": "scheduler", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-workspace-info-font-size: 20px !default;", + "variable": "scheduler-workspace-info-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-workspace-info-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 110, + "widget": "scheduler", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-small-font-size: 14px !default;", + "variable": "scheduler-small-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-small-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 111, + "widget": "scheduler", + "literals": [ + "30px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-group-header-table-cell-height: 30px !default;", + "variable": "scheduler-group-header-table-cell-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-group-header-cell-height)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 112, + "widget": "scheduler", + "literals": [ + "16px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-month-date-text-size: 16px !default;", + "variable": "scheduler-month-date-text-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-month-date-text-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 113, + "widget": "scheduler", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-month-date-text-padding: 6px !default;", + "variable": "scheduler-month-date-text-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-month-date-text-padding)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 118, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-reduced-icon-offset: 5px !default;", + "variable": "scheduler-reduced-icon-offset", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-reduced-icon-inset-inline)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 119, + "widget": "scheduler", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-recurrence-icon-offset: 20px !default;", + "variable": "scheduler-recurrence-icon-offset", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-recurrence-icon-inset-inline)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 121, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-agenda-appointment-margin: 5px !default;", + "variable": "scheduler-agenda-appointment-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-margin)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 122, + "widget": "scheduler", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-agenda-last-in-date-appointment-margin: 20px !default;", + "variable": "scheduler-agenda-last-in-date-appointment-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-last-margin)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 128, + "widget": "scheduler", + "literals": [ + "30px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-time-indicator-font-size: 30px !default;", + "variable": "scheduler-time-indicator-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-time-indicator-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 129, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-time-indicator-size: 1px !default;", + "variable": "scheduler-time-indicator-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-time-indicator-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 137, + "widget": "scheduler", + "literals": [ + "18px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-icon-font-size: 18px !default;", + "variable": "scheduler-appointment-icon-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-icon-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 143, + "widget": "scheduler", + "literals": [ + "12px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-details-font-size: 12px !default;", + "variable": "agenda-appointment-details-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-details-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 146, + "widget": "scheduler", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-reduced-icon-top: 3px !default;", + "variable": "scheduler-appointment-reduced-icon-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-reduced-icon-inset-block-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 147, + "widget": "scheduler", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-active-marker-border-radius: 4px !default;", + "variable": "scheduler-appointment-active-marker-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-marker-border-radius-active)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 148, + "widget": "scheduler", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-content-details-margin-top: 2px !default;", + "variable": "scheduler-appointment-content-details-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-content-details-margin-block-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 149, + "widget": "scheduler", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-reduced-icon-rtl-left: 3px !default;", + "variable": "scheduler-appointment-reduced-icon-rtl-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-reduced-icon-rtl-inset-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 150, + "widget": "scheduler", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-item-padding: 10px !default;", + "variable": "agenda-appointment-item-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-item-padding)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 151, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-item-border-radius: 5px !default;", + "variable": "agenda-appointment-item-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-item-border-radius)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 152, + "widget": "scheduler", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-right-layout-margin-left: 10px !default;", + "variable": "agenda-appointment-right-layout-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-right-layout-margin-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 153, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-allday-padding-right: 5px !default;", + "variable": "agenda-appointment-allday-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-allday-padding-inline-end)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 154, + "widget": "scheduler", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-resource-item-margin-left: 15px !default;", + "variable": "agenda-appointment-resource-item-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-resource-item-margin-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 155, + "widget": "scheduler", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-resource-value-margin-left: 3px !default;", + "variable": "agenda-appointment-resource-value-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-resource-value-margin-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 156, + "widget": "scheduler", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-rtl-margin-right: 10px !default;", + "variable": "agenda-appointment-rtl-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-rtl-margin-inline-end)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 200, + "widget": "scheduler", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-views-header-border: 2px solid !default;", + "variable": "scheduler-views-header-border", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-header-border)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 201, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-views-empty-cell-border-bottom: 1px solid !default;", + "variable": "scheduler-views-empty-cell-border-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-empty-cell-border-block-end)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 202, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-views-empty-cell-border-right: 1px solid !default;", + "variable": "scheduler-views-empty-cell-border-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-empty-cell-border-inline-end)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 203, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-views-empty-cell-border-left: 1px solid !default;", + "variable": "scheduler-views-empty-cell-border-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-empty-cell-border-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 204, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-views-first-child-border-left: 1px solid transparent !default;", + "variable": "scheduler-views-first-child-border-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-first-child-border-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 205, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-views-time-panel-border-bottom: 1px solid transparent !default;", + "variable": "scheduler-views-time-panel-border-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-time-panel-border-block-end)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 206, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-views-group-header-padding: 0 5px !default;", + "variable": "scheduler-views-group-header-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-group-header-padding)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 207, + "widget": "scheduler", + "literals": [ + "5px", + "10px" + ], + "occurrences": 2, + "marker": null, + "text": "$scheduler-views-group-header-padding-alt: 0 5px 0 10px !default;", + "variable": "scheduler-views-group-header-padding-alt", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-sidebar-group-header-padding)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 208, + "widget": "scheduler", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-views-time-indicator-height: 1px !default;", + "variable": "scheduler-views-time-indicator-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-time-indicator-height)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 209, + "widget": "scheduler", + "literals": [ + "40px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-views-group-header-content-height: 40px !default;", + "variable": "scheduler-views-group-header-content-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-group-header-content-height)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 210, + "widget": "scheduler", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-views-vertical-group-min-height: 100px !default;", + "variable": "scheduler-views-vertical-group-min-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-views-vertical-group-min-height)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 212, + "widget": "scheduler", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-min-height: 100px !default;", + "variable": "scheduler-timeline-min-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-min-height)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 213, + "widget": "scheduler", + "literals": [ + "160px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-group-two-empty-cell-width: 160px !default;", + "variable": "scheduler-timeline-group-two-empty-cell-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-group-two-empty-cell-width)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 214, + "widget": "scheduler", + "literals": [ + "80px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-group-header-width: 80px !default;", + "variable": "scheduler-timeline-group-header-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-group-header-width)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 215, + "widget": "scheduler", + "literals": [ + "240px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-group-three-empty-cell-width: 240px !default;", + "variable": "scheduler-timeline-group-three-empty-cell-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-group-three-empty-cell-width)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 216, + "widget": "scheduler", + "literals": [ + "200px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-cell-width: 200px !default;", + "variable": "scheduler-timeline-cell-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-cell-width)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 217, + "widget": "scheduler", + "literals": [ + "70px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-agenda-left-column-width: 70px !default;", + "variable": "scheduler-agenda-left-column-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-left-column-width)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 218, + "widget": "scheduler", + "literals": [ + "18px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-group-header-agenda-font-size: 18px !default;", + "variable": "scheduler-group-header-agenda-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-group-header-agenda-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 219, + "widget": "scheduler", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-agenda-date-table-padding-top: 10px !default;", + "variable": "scheduler-agenda-date-table-padding-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-date-table-padding-block-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 220, + "widget": "scheduler", + "literals": [ + "50px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-renovation-virtual-row-height: 50px !default;", + "variable": "scheduler-renovation-virtual-row-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-virtual-row-height)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 281, + "widget": "scheduler", + "literals": [ + "7px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-content-horizontal-padding: 0 7px !default;", + "variable": "scheduler-appointment-content-horizontal-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-all-day-appointment-content-padding)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 282, + "widget": "scheduler", + "literals": [ + "9px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-recurrence-icon-top: 9px !default;", + "variable": "scheduler-appointment-recurrence-icon-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-recurrence-icon-inset-block-start)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 283, + "widget": "scheduler", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-header-panel-current-time-cell-height: 2px !default;", + "variable": "scheduler-header-panel-current-time-cell-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-header-panel-current-time-cell-height)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 284, + "widget": "scheduler", + "literals": [ + "25px", + "7px" + ], + "occurrences": 2, + "marker": null, + "text": "$scheduler-appointment-content-recurrence-padding: 0 25px 0 7px !default;", + "variable": "scheduler-appointment-content-recurrence-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-recurrence-appointment-content-padding)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 285, + "widget": "scheduler", + "literals": [ + "7px", + "25px" + ], + "occurrences": 2, + "marker": null, + "text": "$scheduler-rtl-padding: 0 7px 0 25px !default;", + "variable": "scheduler-rtl-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-rtl-padding)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 286, + "widget": "scheduler", + "literals": [ + "24px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-collector-width: 24px !default;", + "variable": "scheduler-appointment-collector-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-collector-width)" + }, + { + "file": "scss/widgets/base/scheduler/_index.scss", + "line": 287, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-content-padding-right: 5px !default;", + "variable": "scheduler-appointment-content-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-content-padding-inline-end)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 31, + "widget": "scheduler", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-reduced-icon-top: 3px !default;", + "variable": "scheduler-appointment-reduced-icon-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-reduced-icon-inset-block-start)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 32, + "widget": "scheduler", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-active-marker-border-radius: 4px !default;", + "variable": "scheduler-appointment-active-marker-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-marker-border-radius-active)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 33, + "widget": "scheduler", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-content-details-margin-top: 2px !default;", + "variable": "scheduler-appointment-content-details-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-content-details-margin-block-start)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 34, + "widget": "scheduler", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-appointment-reduced-icon-rtl-left: 3px !default;", + "variable": "scheduler-appointment-reduced-icon-rtl-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-appointment-reduced-icon-rtl-inset-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 62, + "widget": "scheduler", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-item-padding: 10px !default;", + "variable": "agenda-appointment-item-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-item-padding)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 63, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-item-border-radius: 5px !default;", + "variable": "agenda-appointment-item-border-radius", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-item-border-radius)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 64, + "widget": "scheduler", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-right-layout-margin-left: 10px !default;", + "variable": "agenda-appointment-right-layout-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-right-layout-margin-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 65, + "widget": "scheduler", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-allday-padding-right: 5px !default;", + "variable": "agenda-appointment-allday-padding-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-allday-padding-inline-end)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 66, + "widget": "scheduler", + "literals": [ + "15px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-resource-item-margin-left: 15px !default;", + "variable": "agenda-appointment-resource-item-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-resource-item-margin-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 67, + "widget": "scheduler", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-resource-value-margin-left: 3px !default;", + "variable": "agenda-appointment-resource-value-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-resource-value-margin-inline-start)" + }, + { + "file": "scss/widgets/base/scheduler/appointment/_index.scss", + "line": 68, + "widget": "scheduler", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$agenda-appointment-rtl-margin-right: 10px !default;", + "variable": "agenda-appointment-rtl-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-appointment-rtl-margin-inline-end)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 45, + "widget": "scheduler", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-workspace-info-font-size: 20px !default;", + "variable": "scheduler-workspace-info-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-workspace-info-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 46, + "widget": "scheduler", + "literals": [ + "14px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-small-font-size: 14px !default;", + "variable": "scheduler-small-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-small-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 55, + "widget": "scheduler", + "literals": [ + "30px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-group-header-table-cell-height: 30px !default;", + "variable": "scheduler-group-header-table-cell-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-group-header-cell-height)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 59, + "widget": "scheduler", + "literals": [ + "16px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-month-date-text-size: 16px !default;", + "variable": "scheduler-month-date-text-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-month-date-text-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 61, + "widget": "scheduler", + "literals": [ + "6px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-month-date-text-padding: 6px !default;", + "variable": "scheduler-month-date-text-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-month-date-text-padding)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 77, + "widget": "scheduler", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-min-height: 100px !default;", + "variable": "scheduler-timeline-min-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-min-height)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 78, + "widget": "scheduler", + "literals": [ + "160px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-group-two-empty-cell-width: 160px !default;", + "variable": "scheduler-timeline-group-two-empty-cell-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-group-two-empty-cell-width)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 79, + "widget": "scheduler", + "literals": [ + "80px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-group-header-width: 80px !default;", + "variable": "scheduler-timeline-group-header-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-group-header-width)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 80, + "widget": "scheduler", + "literals": [ + "240px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-group-three-empty-cell-width: 240px !default;", + "variable": "scheduler-timeline-group-three-empty-cell-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-group-three-empty-cell-width)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 81, + "widget": "scheduler", + "literals": [ + "200px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-cell-width: 200px !default;", + "variable": "scheduler-timeline-cell-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-cell-width)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 95, + "widget": "scheduler", + "literals": [ + "70px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-agenda-left-column-width: 70px !default;", + "variable": "scheduler-agenda-left-column-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-left-column-width)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 96, + "widget": "scheduler", + "literals": [ + "18px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-group-header-agenda-font-size: 18px !default;", + "variable": "scheduler-group-header-agenda-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-group-header-agenda-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 97, + "widget": "scheduler", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-agenda-date-table-padding-top: 10px !default;", + "variable": "scheduler-agenda-date-table-padding-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-date-table-padding-block-start)" + }, + { + "file": "scss/widgets/base/scheduler/views/_index.scss", + "line": 109, + "widget": "scheduler", + "literals": [ + "50px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-renovation-virtual-row-height: 50px !default;", + "variable": "scheduler-renovation-virtual-row-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-virtual-row-height)" + }, + { + "file": "scss/widgets/base/scheduler/views/agenda/_index.scss", + "line": 7, + "widget": "scheduler", + "literals": [ + "70px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-agenda-left-column-width: 70px !default;", + "variable": "scheduler-agenda-left-column-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-agenda-left-column-width)" + }, + { + "file": "scss/widgets/base/scheduler/views/agenda/_index.scss", + "line": 8, + "widget": "scheduler", + "literals": [ + "18px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-group-header-agenda-font-size: 18px !default;", + "variable": "scheduler-group-header-agenda-font-size", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-group-header-agenda-font-size)" + }, + { + "file": "scss/widgets/base/scheduler/views/timelines/_index.scss", + "line": 9, + "widget": "scheduler", + "literals": [ + "100px" + ], + "occurrences": 1, + "marker": null, + "text": "$scheduler-timeline-min-height: 100px !default;", + "variable": "scheduler-timeline-min-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scheduler/_index.scss", + "setTo": "var(--dx-scheduler-timeline-min-height)" + }, + { + "file": "scss/widgets/base/scrollable/_index.scss", + "line": 5, + "widget": "scrollable", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollable-scroll-width: 5px !default;", + "variable": "scrollable-scroll-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollable/_index.scss", + "setTo": "var(--dx-scrollable-scroll-width)" + }, + { + "file": "scss/widgets/base/scrollable/_index.scss", + "line": 6, + "widget": "scrollable", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollable-scroll-height: 5px !default;", + "variable": "scrollable-scroll-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollable/_index.scss", + "setTo": "var(--dx-scrollable-scroll-height)" + }, + { + "file": "scss/widgets/base/scrollable/_index.scss", + "line": 7, + "widget": "scrollable", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$scrollable-scroll-padding: 2px !default;", + "variable": "scrollable-scroll-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/scrollable/_index.scss", + "setTo": "var(--dx-scrollable-scroll-padding)" + }, + { + "file": "scss/widgets/base/splitter/_index.scss", + "line": 2, + "widget": "splitter", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$splitter-resize-handle-gap: 8px !default;", + "variable": "splitter-resize-handle-gap", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/splitter/_index.scss", + "setTo": "var(--dx-splitter-resize-handle-gap)" + }, + { + "file": "scss/widgets/base/stepper/layout/step/_mixins.scss", + "line": 77, + "widget": "stepper", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$indicator-ring-inset: 2px,", + "variable": "indicator-ring-inset", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/stepper/layout/step/_mixins.scss", + "line": 78, + "widget": "stepper", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$indicator-ring-size: 4px,", + "variable": "indicator-ring-size", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/stepper/layout/step/_mixins.scss", + "line": 79, + "widget": "stepper", + "literals": [ + "8px" + ], + "occurrences": 1, + "marker": null, + "text": "$indicator-halo-size: 8px,", + "variable": "indicator-halo-size", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/switch/_mixins.scss", + "line": 17, + "widget": "switch", + "literals": [ + "500px" + ], + "occurrences": 1, + "marker": null, + "text": "$switch-container-border-radius: 500px,", + "variable": "switch-container-border-radius", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/switch/_mixins.scss", + "line": 18, + "widget": "switch", + "literals": [ + "4px" + ], + "occurrences": 1, + "marker": null, + "text": "$switch-label-padding: 4px 0,", + "variable": "switch-label-padding", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/switch/_mixins.scss", + "line": 19, + "widget": "switch", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$switch-off-padding-bottom: 10px,", + "variable": "switch-off-padding-bottom", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/textEditor/_index.scss", + "line": 6, + "widget": "textEditor", + "literals": [ + "34px" + ], + "occurrences": 1, + "marker": null, + "text": "$texteditor-clear-button-area-width: 34px !default;", + "variable": "texteditor-clear-button-area-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/textEditor/_index.scss", + "setTo": "var(--dx-text-editor-clear-button-width)" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 162, + "widget": "textEditor", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$label-padding-inline: 2px,", + "variable": "label-padding-inline", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 163, + "widget": "textEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$label-border-radius: 1px,", + "variable": "label-border-radius", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 164, + "widget": "textEditor", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$label-backdrop-height: 3px,", + "variable": "label-backdrop-height", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 716, + "widget": "textEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$button-margin-block-start: 1px,", + "variable": "button-margin-block-start", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 717, + "widget": "textEditor", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$button-margin-block-end: 3px,", + "variable": "button-margin-block-end", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 718, + "widget": "textEditor", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$button-icon-margin-block-start: 1px,", + "variable": "button-icon-margin-block-start", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 719, + "widget": "textEditor", + "literals": [ + "3px" + ], + "occurrences": 1, + "marker": null, + "text": "$button-icon-margin-block-start-with-text: 3px,", + "variable": "button-icon-margin-block-start-with-text", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/textEditor/_mixins.scss", + "line": 720, + "widget": "textEditor", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$button-icononly-padding: 2px,", + "variable": "button-icononly-padding", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/timeView/_index.scss", + "line": 4, + "widget": "timeView", + "literals": [ + "70px" + ], + "occurrences": 1, + "marker": null, + "text": "$timeview-numberbox-width: 70px !default;", + "variable": "timeview-numberbox-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/timeView/_index.scss", + "setTo": "var(--dx-time-view-field-number-box-width)" + }, + { + "file": "scss/widgets/base/timeView/_index.scss", + "line": 5, + "widget": "timeView", + "literals": [ + "110px" + ], + "occurrences": 1, + "marker": null, + "text": "$timeview-numberbox-spin-touch-friendly-width: 110px !default;", + "variable": "timeview-numberbox-spin-touch-friendly-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/timeView/_index.scss", + "setTo": "var(--dx-time-view-field-number-box-spin-touch-friendly-width)" + }, + { + "file": "scss/widgets/base/timeView/_mixins.scss", + "line": 20, + "widget": "timeView", + "literals": [ + "182px" + ], + "occurrences": 1, + "marker": null, + "text": "$clock-size: 182px,", + "variable": "clock-size", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/timeView/_mixins.scss", + "line": 21, + "widget": "timeView", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$arrow-width: 10px,", + "variable": "arrow-width", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/toolbar/_index.scss", + "line": 4, + "widget": "toolbar", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$toolbar-item-padding: 0 5px !default;", + "variable": "toolbar-item-padding", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/toolbar/_index.scss", + "setTo": "var(--dx-toolbar-item-padding)" + }, + { + "file": "scss/widgets/base/toolbar/_index.scss", + "line": 5, + "widget": "toolbar", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$toolbar-group-margin: 0 10px !default;", + "variable": "toolbar-group-margin", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/toolbar/_index.scss", + "setTo": "var(--dx-toolbar-group-margin)" + }, + { + "file": "scss/widgets/base/toolbar/_index.scss", + "line": 6, + "widget": "toolbar", + "literals": [ + "150px" + ], + "occurrences": 1, + "marker": null, + "text": "$toolbar-texteditor-width: 150px !default;", + "variable": "toolbar-texteditor-width", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/toolbar/_index.scss", + "setTo": "var(--dx-toolbar-text-editor-width)" + }, + { + "file": "scss/widgets/base/toolbar/_mixins.scss", + "line": 5, + "widget": "toolbar", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$outline-width: 2px,", + "variable": "outline-width", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/toolbar/_mixins.scss", + "line": 6, + "widget": "toolbar", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$outline-offset: 1px,", + "variable": "outline-offset", + "kind": "mixin-parameter", + "status": "parameter" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 19, + "widget": "treeList", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$treelist-expandable-node-line-height: 1px !default;", + "variable": "treelist-expandable-node-line-height", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeList/_index.scss", + "setTo": "var(--dx-tree-list-empty-space-height)" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 24, + "widget": "treeList", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$treelist-sticky-column-border: 2px solid !default;", + "variable": "treelist-sticky-column-border", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeList/_index.scss", + "setTo": "var(--dx-tree-list-sticky-column-border)" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 25, + "widget": "treeList", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$treelist-cell-focus-outline: 2px solid !default;", + "variable": "treelist-cell-focus-outline", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeList/_index.scss", + "setTo": "var(--dx-tree-list-cell-outline-focused)" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 48, + "widget": "treeList", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$treelist-header-filter-outline: 2px solid !default;", + "variable": "treelist-header-filter-outline", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeList/_index.scss", + "setTo": "var(--dx-grid-outline-focused)" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 49, + "widget": "treeList", + "literals": [ + "2px" + ], + "occurrences": 1, + "marker": null, + "text": "$treelist-header-filter-outline-offset: 2px !default;", + "variable": "treelist-header-filter-outline-offset", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeList/_index.scss", + "setTo": "var(--dx-tree-list-outline-offset-focused)" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 50, + "widget": "treeList", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$treelist-button-margin-left: 10px !default;", + "variable": "treelist-button-margin-left", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeList/_index.scss", + "setTo": "var(--dx-tree-list-form-buttons-margin-inline-start)" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 51, + "widget": "treeList", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$treelist-button-margin-top: 10px !default;", + "variable": "treelist-button-margin-top", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeList/_index.scss", + "setTo": "var(--dx-tree-list-form-buttons-margin-block-start)" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 52, + "widget": "treeList", + "literals": [ + "20px" + ], + "occurrences": 1, + "marker": null, + "text": "$treelist-error-message-margin-bottom: 20px !default;", + "variable": "treelist-error-message-margin-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeList/_index.scss", + "setTo": "var(--dx-tree-list-error-message-margin-block-end)" + }, + { + "file": "scss/widgets/base/treeList/_index.scss", + "line": 53, + "widget": "treeList", + "literals": [ + "10px" + ], + "occurrences": 1, + "marker": null, + "text": "$treelist-button-margin-right: 10px !default;", + "variable": "treelist-button-margin-right", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeList/_index.scss", + "setTo": "var(--dx-tree-list-form-buttons-rtl-margin-inline-start)" + }, + { + "file": "scss/widgets/base/treeView/_index.scss", + "line": 2, + "widget": "treeView", + "literals": [ + "5px" + ], + "occurrences": 1, + "marker": null, + "text": "$treeview-searchbox-margin-bottom: 5px !default;", + "variable": "treeview-searchbox-margin-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeView/_index.scss", + "setTo": "var(--dx-tree-view-search-box-margin-block-end)" + }, + { + "file": "scss/widgets/base/treeView/_index.scss", + "line": 13, + "widget": "treeView", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$treeview-select-all-item-border-bottom: 1px solid !default;", + "variable": "treeview-select-all-item-border-bottom", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeView/_index.scss", + "setTo": "var(--dx-tree-view-select-all-item-border-block-end)" + }, + { + "file": "scss/widgets/base/treeView/_index.scss", + "line": 14, + "widget": "treeView", + "literals": [ + "1px" + ], + "occurrences": 1, + "marker": null, + "text": "$treeview-border-visible-border: 1px solid !default;", + "variable": "treeview-border-visible-border", + "kind": "module-variable", + "status": "injected", + "setBy": "scss/widgets/fluent-next/treeView/_index.scss", + "setTo": "var(--dx-tree-view-border-visible-border)" + } + ] +}