diff --git a/.github/workflows/qunit_tests-additional-renovation.yml b/.github/workflows/qunit_tests-additional-renovation.yml index e19f0a287cc6..541c8f62174d 100644 --- a/.github/workflows/qunit_tests-additional-renovation.yml +++ b/.github/workflows/qunit_tests-additional-renovation.yml @@ -148,8 +148,10 @@ jobs: 'ui.editors(1/2)', 'ui.editors(2/2)', 'ui.htmlEditor', - 'ui.grid(1/2)', - 'ui.grid(2/2)', + 'ui.grid(1/4)', + 'ui.grid(2/4)', + 'ui.grid(3/4)', + 'ui.grid(4/4)', 'ui.scheduler(1/3)', 'ui.scheduler(2/3)', 'ui.scheduler(3/3)', diff --git a/apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue b/apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue index 947f3c1416ab..24cc9c530859 100644 --- a/apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue +++ b/apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue @@ -144,13 +144,13 @@ const onRowInserted = (e: DxDataGridTypes.RowInsertedEvent) => { }; function calculateFilterExpression( - column: DxDataGridTypes.Column, + this: DxDataGridTypes.Column, filterValue: any, selectedFilterOperations: string | null, target: string, ) { if (target === 'search' && typeof filterValue === 'string') { - return [column.dataField, 'contains', filterValue]; + return [this.dataField, 'contains', filterValue]; } return (rowData: Task) => (rowData.AssignedEmployee || []).includes(filterValue); diff --git a/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent.blue.light).png b/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent.blue.light).png index b6f1e7a5e9fa..32ce4422ce2c 100644 Binary files a/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent.blue.light).png and b/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (fluent.blue.light).png index e595c2c9531f..28a2d3e08fde 100644 Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light).png index 85c9c15a4045..c961a032c5c9 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light).png index b50c2e021b79..2f9055365763 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/common/eventsEngine.ts b/e2e/testcafe-devextreme/tests/common/eventsEngine.ts new file mode 100644 index 000000000000..fc3d070ac956 --- /dev/null +++ b/e2e/testcafe-devextreme/tests/common/eventsEngine.ts @@ -0,0 +1,61 @@ +import { ClientFunction, Selector } from 'testcafe'; +import url from '../../helpers/getPageUrl'; + +fixture.disablePageReloads`Events` + .page(url(__dirname, '../container.html')); + +const init = ClientFunction(() => { + const markup = `
`; + + $('#container').html(markup); + + const { DevExpress } = (window as any); + + let hoverStartTriggerCount = 0; + let hoverEndTriggerCount = 0; + + DevExpress.events.on($('#target'), 'dxhoverstart', () => { + hoverStartTriggerCount += 1; + + $('#hoverStartTriggerCount').text(hoverStartTriggerCount); + }); + + DevExpress.events.on($('#target'), 'dxhoverend', () => { + hoverEndTriggerCount += 1; + + $('#hoverEndTriggerCount').text(hoverEndTriggerCount); + }); +}); + +test('The `dxhoverstart` event should be triggered after dragging and dropping an HTML draggable element (T1260277)', async (t) => { + const draggable = Selector('#draggable'); + const target = Selector('#target'); + const hoverStartTriggerCount = Selector('#hoverStartTriggerCount'); + const hoverEndTriggerCount = Selector('#hoverEndTriggerCount'); + + await t + .drag(draggable, 0, 400, { speed: 1 }); + + // `.drag` does not trigger the `pointercancel` event. + // A sequence of `.drag` calls behaves like a single drag&drop operation, + // and each call does not trigger the `pointerup` event. + // Even if it did, the `pointercancel` event would not be triggered as specified in: + // https://www.w3.org/TR/pointerevents/#suppressing-a-pointer-event-stream + // This is a hack to test the event engine's logic. + await t.dispatchEvent(draggable, 'pointercancel'); + + await t + .drag(target, 0, 400, { speed: 1 }); + + await t.expect(hoverStartTriggerCount.textContent).eql('1'); + await t.expect(hoverEndTriggerCount.textContent).eql('1'); +}).before(async () => { + await init(); +}); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/invisible-toolbar-buttons-fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/invisible-toolbar-buttons-fluent.blue.light.png new file mode 100644 index 000000000000..a1306ae8cd3d Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/invisible-toolbar-buttons-fluent.blue.light.png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/invisible-toolbar-buttons-generic.light.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/invisible-toolbar-buttons-generic.light.png new file mode 100644 index 000000000000..13fad88006fb Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/invisible-toolbar-buttons-generic.light.png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/invisible-toolbar-buttons-material.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/invisible-toolbar-buttons-material.blue.light.png new file mode 100644 index 000000000000..74fac3f21290 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/invisible-toolbar-buttons-material.blue.light.png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/filterRow/filterRow.ts b/e2e/testcafe-devextreme/tests/dataGrid/filterRow/filterRow.ts index 592c53de5a70..6fc220d919fb 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/filterRow/filterRow.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/filterRow/filterRow.ts @@ -9,6 +9,49 @@ import { getNumberData } from '../helpers/generateDataSourceData'; fixture.disablePageReloads`FilterRow` .page(url(__dirname, '../../container.html')); +test('Filter should reset if the filter row editor text is cleared (T1257261)', async (t) => { + const dataGrid = new DataGrid('#container'); + const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox); + const filterPanelText = dataGrid.getFilterPanel().getFilterText(); + + await t + // assert + .expect(filterPanelText.element.textContent) + .eql('[Text] Equals \'i\'') + // act + .click(filterEditor.input) + .pressKey('backspace') + .wait(100) // updateValueTimeout + // assert + .expect(filterPanelText.element.textContent) + .eql('Create Filter') + // act + .click(dataGrid.element) + // assert + .expect(filterPanelText.element.textContent) + .eql('Create Filter'); +}).before(async () => createWidget('dxDataGrid', { + dataSource: [ + { ID: 1, Text: 'Item 1' }, + { ID: 2, Text: '' }, + { ID: 3, Text: 'Item 3' }, + ], + keyExpr: 'ID', + showBorders: true, + remoteOperations: true, + headerFilter: { visible: true }, + filterRow: { visible: true }, + filterPanel: { visible: true }, + filterValue: ['Text', '=', 'i'], + columns: ['ID', { + dataField: 'Text', + selectedFilterOperation: '=', + }], + onEditorPreparing(e: any) { + e.updateValueTimeout = 100; + }, +})); + test('Filter row\'s height should be adjusted by content (T1072609)', async (t) => { const dataGrid = new DataGrid('#container'); const { takeScreenshot, compareResults } = createScreenshotsComparer(t); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/headerFilter.ts b/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/headerFilter.ts index 15fd2fd294f2..c292258582e1 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/headerFilter.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/headerFilter.ts @@ -10,6 +10,47 @@ fixture.disablePageReloads`Header Filter` const GRID_CONTAINER = '#container'; +test('Data should be filtered if (Blank) is selected in the header filter (T1257261)', async (t) => { + const result: string[] = []; + const dataGrid = new DataGrid(GRID_CONTAINER); + const headerCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(1); + const dataCell = dataGrid.getDataRow(0).getDataCell(0); + const filterIconElement = headerCell.getFilterIcon(); + const headerFilter = new HeaderFilter(); + const buttons = headerFilter.getButtons(); + const list = headerFilter.getList(); + + await t + .click(filterIconElement) + .click(list.getItem(1).element) // Select second item with value 'Item 1' + .click(buttons.nth(0)); // Click OK + + result[0] = await dataCell.element().innerText; + + await t + .click(filterIconElement) + .click(list.getItem(1).element) // Deselect second item with value 'Item 1' + .click(list.getItem(0).element) // Select second item with value '(Blanks)' + .click(buttons.nth(0)); // Click OK + + result[1] = await dataCell.element().innerText; + + await t.expect(result[0]).eql('1') + .expect(result[1]).eql('2'); +}).before(async () => createWidget('dxDataGrid', { + dataSource: [ + { ID: 1, Text: 'Item 1' }, + { ID: 2, Text: '' }, + { ID: 3, Text: 'Item 3' }, + ], + keyExpr: 'ID', + showBorders: true, + remoteOperations: true, + headerFilter: { visible: true }, + filterRow: { visible: true }, + filterPanel: { visible: true }, +})); + test('HeaderFilter icon should be grayed out after the clearFilter call (T1193648)', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); const dataGrid = new DataGrid(GRID_CONTAINER); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/headerPanel.ts b/e2e/testcafe-devextreme/tests/dataGrid/headerPanel.ts index dbf2a11af7d0..cd559d928c79 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/headerPanel.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/headerPanel.ts @@ -180,3 +180,33 @@ test('Toolbar should not reset its widget values when changing the disabled prop }], }, })); + +[ + Themes.genericLight, + Themes.materialBlue, + Themes.fluentBlue, +].forEach((theme) => { + test(`Invisible toolbar doesn't have additional paddings (T1261773) in ${theme}`, async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const dataGrid = new DataGrid('#container'); + + await t + .expect(await takeScreenshot(`invisible-toolbar-buttons-${theme}.png`, dataGrid.element)) + .ok() + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); + }).before(async () => { + await changeTheme(theme); + + return createWidget('dxDataGrid', { + dataSource: getData(5, 3), + keyExpr: 'field_0', + toolbar: { + items: ['columnChooserButton'], + visible: false, + }, + }); + }).after(async () => { + await changeTheme(Themes.genericLight); + }); +}); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/T1269088_grid_with_fixed_columns_and_without_data.png b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/T1269088_grid_with_fixed_columns_and_without_data.png new file mode 100644 index 000000000000..7dd9ff334d0d Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/T1269088_grid_with_fixed_columns_and_without_data.png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/band-columns-1-(case-10)(rLines_=_false_cLines_=_false_borders_=_true_rtl_=_true_rAlt_=_true).png b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/band-columns-1-(case-10)(rLines_=_false_cLines_=_false_borders_=_true_rtl_=_true_rAlt_=_true).png index 37c1a547ffed..7c740fb1e86e 100644 Binary files a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/band-columns-1-(case-10)(rLines_=_false_cLines_=_false_borders_=_true_rtl_=_true_rAlt_=_true).png and b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/band-columns-1-(case-10)(rLines_=_false_cLines_=_false_borders_=_true_rtl_=_true_rAlt_=_true).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/stickyColumns.ts b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/stickyColumns.ts index fb473246a65e..489b020324a8 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/stickyColumns.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/stickyColumns.ts @@ -7,6 +7,7 @@ import { getData } from '../helpers/generateDataSourceData'; import url from '../../../helpers/getPageUrl'; import { changeTheme } from '../../../helpers/changeTheme'; import { Themes } from '../../../helpers/themes'; +import { defaultConfig } from './data'; const DATA_GRID_SELECTOR = '#container'; @@ -1367,3 +1368,21 @@ safeSizeTest('The simulated scrollbar should display correctly when there are st }); }); }); + +safeSizeTest('The grid should display correctly when there is no data and there are fixed columns (T1269088)', async (t) => { + // arrange, act + const dataGrid = new DataGrid('#container'); + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await t.expect(dataGrid.isReady()).ok(); + + await takeScreenshot('T1269088_grid_with_fixed_columns_and_without_data.png', dataGrid.element); + + // assert + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}, [1000, 800]).before(async () => createWidget('dxDataGrid', { + ...defaultConfig, + dataSource: [], +})); diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle.png index e857ec3d287a..f0073716ac9e 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end.png index 0b8246ec699e..25b7b401bac2 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-middle.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-middle.png index 088e955f6956..f5a597357236 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-middle.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-middle.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-middle.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-middle.png index 63b53f23262c..47fad764360e 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-middle.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-middle.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date.png index 45ae2a4e7090..0606bc62110a 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling.png index 94c2d9309c19..f9e468120601 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping.png index 470fcce016d5..f76b52e9bc7d 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-horizontal-grouping-scaling.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-horizontal-grouping-scaling.png index 23b271b7f8bc..19f9e13de030 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-horizontal-grouping-scaling.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-horizontal-grouping-scaling.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-horizontal-grouping-scaling.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-horizontal-grouping-scaling.png index 424bf50337ac..955a3977fad7 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-horizontal-grouping-scaling.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-horizontal-grouping-scaling.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-horizontal-grouping-scaling.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-horizontal-grouping-scaling.png index ce8dfcddf549..17cdbbe36d3f 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-horizontal-grouping-scaling.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-horizontal-grouping-scaling.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-grouping-by-date.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-grouping-by-date.png index 3f146ec4e7f4..d8bc2bec81fa 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-grouping-by-date.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-grouping-by-date.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping-scaling.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping-scaling.png index 4e944b53d9ae..6c7918e73ecb 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping-scaling.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping-scaling.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping.png index bce2d95a75a2..b7771f2633b9 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll.png b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll.png index 1631e7368832..a1aceb1da8d8 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll.png and b/e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/etalons/virtual-scrolling-week-after-scroll.png differ diff --git a/packages/devextreme-scss/.stylelintrc.json b/packages/devextreme-scss/.stylelintrc.json index c687a25cd37e..dee6e4c52eac 100644 --- a/packages/devextreme-scss/.stylelintrc.json +++ b/packages/devextreme-scss/.stylelintrc.json @@ -33,6 +33,8 @@ "selector-not-notation": null, "keyframe-selector-notation": null, "media-feature-range-notation": null, + "no-eol-whitespace": true, + "no-missing-end-of-source-newline": true, "scss/at-else-empty-line-before": null, "scss/at-if-closing-brace-newline-after": null, diff --git a/packages/devextreme-scss/package.json b/packages/devextreme-scss/package.json index 7e60505cfc10..cf0dba126cc8 100644 --- a/packages/devextreme-scss/package.json +++ b/packages/devextreme-scss/package.json @@ -14,7 +14,7 @@ "sass-embedded": "1.59.2", "stylelint": "15.11.0", "stylelint-config-standard-scss": "9.0.0", - "stylelint-scss": "5.3.1", + "stylelint-scss": "6.10.0", "through2": "2.0.5", "ts-jest": "29.1.2" }, diff --git a/packages/devextreme-scss/scss/widgets/base/_dropDownMenu.scss b/packages/devextreme-scss/scss/widgets/base/_dropDownMenu.scss index ba9b48e37745..3e409eae572d 100644 --- a/packages/devextreme-scss/scss/widgets/base/_dropDownMenu.scss +++ b/packages/devextreme-scss/scss/widgets/base/_dropDownMenu.scss @@ -21,7 +21,7 @@ display: block; border-top: 0; } - + .dx-list-item-content { display: block; } diff --git a/packages/devextreme-scss/scss/widgets/base/_tabPanel.scss b/packages/devextreme-scss/scss/widgets/base/_tabPanel.scss index 5519366a30a2..9a2f5e5e242e 100644 --- a/packages/devextreme-scss/scss/widgets/base/_tabPanel.scss +++ b/packages/devextreme-scss/scss/widgets/base/_tabPanel.scss @@ -22,7 +22,7 @@ .dx-tabpanel-tabs-position-right { flex-direction: row-reverse; - + &.dx-rtl { flex-direction: row; } @@ -34,7 +34,7 @@ .dx-tabpanel-tabs-position-left { flex-direction: row; - + &.dx-rtl { flex-direction: row-reverse; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss index 1fc8d090db03..f688e795e40b 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss @@ -24,13 +24,13 @@ &:first-child { border-start-start-radius: $border-radius; } - + &:last-child { border-end-start-radius: $border-radius; } } } - + .dx-chat-messagegroup-alignment-end { .dx-chat-messagebubble { color: $color-primary; diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss index 94ca46ab9cda..322e4ab4cebd 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss @@ -20,7 +20,7 @@ .dx-chat-messagegroup-information { column-gap: $information-gap; } - + .dx-chat-messagegroup-alignment-start { grid-template-columns: $messagegroup-start-template; } @@ -28,7 +28,7 @@ .dx-chat-messagegroup-alignment-start:has(.dx-avatar) { column-gap: $messagegroup-start-gap; } - + .dx-chat-messagegroup-time { font-size: $information-font-size; color: $information-timestamp-color; diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-typingindicator/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-typingindicator/_mixins.scss index 6567b4f99356..854ef661568d 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-typingindicator/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-typingindicator/_mixins.scss @@ -25,7 +25,7 @@ font-size: $font-size; color: $color; } - + .dx-chat-typingindicator-bubble { padding-block: $bubble-padding-block; padding-inline: $bubble-padding-inline; diff --git a/packages/devextreme-scss/scss/widgets/base/checkBox/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/checkBox/_mixins.scss index 2dd40c861269..b131e5edc239 100644 --- a/packages/devextreme-scss/scss/widgets/base/checkBox/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/checkBox/_mixins.scss @@ -29,7 +29,7 @@ .dx-checkbox-icon { .dx-checkbox-indeterminate & { color: $color; - + @include dx-checkbox-icon-centered($icon-height, $icon-width); &::before { diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss index 4dcdf14e8b47..35b65dcb9a42 100644 --- a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss @@ -417,10 +417,9 @@ $datagrid-text-stub-background-image-path: null !default; tr { outline: none; } - + &:focus-within { outline: 2px solid $datagrid-focused-border-color; outline-offset: -2px; } } - diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss index f9220895908b..c5386d732acb 100644 --- a/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss @@ -7,7 +7,7 @@ width: $dropdownbutton-icon-spindown-size; height: $dropdownbutton-icon-spindown-size; } - } + } .dx-dropdownbutton-action { &.dx-button-has-icon:not(.dx-button-has-text) { @@ -22,7 +22,7 @@ margin-inline-start: 4px; margin-inline-end: 0; } - } + } } .dx-dropdownbutton-has-arrow { diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss index 641fb4232792..5cf26b247242 100644 --- a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss @@ -29,7 +29,7 @@ .dx-texteditor-input { padding-inline-end: $invalid-badge-size + $texteditor-filled-input-horizontal-padding; } - + .dx-start-datebox { .dx-texteditor-input { padding-inline-end: $texteditor-filled-input-horizontal-padding; diff --git a/packages/devextreme-scss/scss/widgets/base/lookup/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/lookup/_mixins.scss index 8ccc7a728477..8b576c814548 100644 --- a/packages/devextreme-scss/scss/widgets/base/lookup/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/lookup/_mixins.scss @@ -10,20 +10,20 @@ ) { .dx-lookup-arrow { @include dx-icon($spin-icon-glyph); - + .dx-rtl & { &::before { content: $spin-icon-glyph-rtl; } } - + width: $arror-width; color: $icon-color; .dx-dropdowneditor-active & { color: $icon-color-active; } - + @include dx-icon-font-centered-sizing($icon-size); } } diff --git a/packages/devextreme-scss/scss/widgets/base/scrollable/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/scrollable/_mixins.scss index 397adc9a516b..b0dcce779eae 100644 --- a/packages/devextreme-scss/scss/widgets/base/scrollable/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/scrollable/_mixins.scss @@ -13,19 +13,19 @@ ) { .dx-scrollbar-hoverable { background-color: $scrollable-scrollbar-bg; - + &.dx-state-hover, &.dx-scrollable-scrollbar-active { background-color: $scrollable-scrollbar-active-bg; } - + &.dx-scrollable-scrollbar-active .dx-scrollable-scroll-content { background-color: $scrollable-scroll-active-bg; } - + .dx-scrollable-scroll.dx-state-invisible { opacity: 1; - + .dx-scrollable-scroll-content { background-color: transparent; } @@ -44,31 +44,31 @@ width: $scrollbar-size-thin; padding-inline-end: $scrollbar-scroll-boundary-padding; } - + &.dx-scrollbar-hoverable { width: $scrollbar-size-thin; transition: width 0.2s linear 0.15s, background-color 0.2s linear 0.15s; - + .dx-scrollable-scroll { transition: background-color 0.5s linear 1s, width 0.2s linear 150ms; - + .dx-scrollable-scroll-content { transition: background-color 0.15s linear 0.15s; } - + &.dx-state-invisible { transition: background-color 0.5s linear 1s, width 0.2s linear 0.15s; - + .dx-scrollable-scroll-content { transition: background-color 0.5s linear 1s; } } } - + &.dx-state-hover, &.dx-scrollable-scrollbar-active { width: $scrollbar-size; - + .dx-scrollable-scroll { width: $scrollbar-size; } @@ -87,31 +87,31 @@ height: $scrollbar-size-thin; padding-bottom: $scrollbar-scroll-boundary-padding; } - + &.dx-scrollbar-hoverable { height: $scrollbar-size-thin; transition: height 0.2s linear 0.15s, background-color 0.2s linear 0.15s; - + .dx-scrollable-scroll { transition: background-color 0.5s linear 1s, height 0.2s linear 0.15s; - + .dx-scrollable-scroll-content { transition: background-color 0.15s linear 0.15s; } - + &.dx-state-invisible { transition: background-color 0.5s linear 1s, height 0.2s linear 0.15s; - + .dx-scrollable-scroll-content { transition: background-color 0.5s linear 1s; } } } - + &.dx-state-hover, &.dx-scrollable-scrollbar-active { height: $scrollbar-size; - + .dx-scrollable-scroll { height: $scrollbar-size; } @@ -133,7 +133,7 @@ } } } - + &.dx-rtl, .dx-rtl & { > .dx-scrollable-wrapper { @@ -146,7 +146,7 @@ } } } - + &.dx-scrollable-horizontal, &.dx-scrollable-both { > .dx-scrollable-wrapper { diff --git a/packages/devextreme-scss/scss/widgets/base/splitter/_index.scss b/packages/devextreme-scss/scss/widgets/base/splitter/_index.scss index 409d3e8bad7d..a6b294c93841 100644 --- a/packages/devextreme-scss/scss/widgets/base/splitter/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/splitter/_index.scss @@ -4,7 +4,7 @@ display: flex; height: 100%; width: 100%; - + .dx-splitter-item { display: flex; overflow: hidden; @@ -49,7 +49,7 @@ &.dx-resize-handle-vertical { flex-direction: row; - + &.dx-resize-handle-resizable { cursor: row-resize; } diff --git a/packages/devextreme-scss/scss/widgets/base/splitter/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/splitter/_mixins.scss index 9562176fd919..5465a522f49c 100644 --- a/packages/devextreme-scss/scss/widgets/base/splitter/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/splitter/_mixins.scss @@ -9,12 +9,12 @@ .dx-resize-handle { color: $color; background-color: $background-color; - + &.dx-state-hover { color: $color-hover; background-color: $background-color-hover; } - + &.dx-state-active, &.dx-state-focused { color: $color-focused; diff --git a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss index 403613f18382..53c6d2604c6d 100644 --- a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss @@ -15,7 +15,7 @@ .dx-switch { width: $switch-width; height: $switch-height; - + .dx-switch-wrapper { position: relative; padding-top: $switch-padding,; @@ -35,7 +35,7 @@ overflow: visible; position: relative; padding: 0 $switch-container-horizontal-padding; - + &::before { position: absolute; content: ''; @@ -46,12 +46,12 @@ transition: $switch-transition; } } - + .dx-switch-inner { width: 200%; height: 100%; } - + .dx-switch-on, .dx-switch-off { flex-shrink: 0; @@ -63,17 +63,17 @@ text-align: center; line-height: 100%; } - + .dx-switch-on { background: transparent; } - + .dx-switch-off { display: none; padding-bottom: 10px; background-color: transparent; } - + .dx-switch-handle { flex-basis: $switch-handle-height; flex-shrink: 0; @@ -83,7 +83,7 @@ width: $switch-handle-height; height: $switch-handle-height; border-radius: $switch-handle-border-radius; - + &::before { display: block; content: ' '; @@ -112,7 +112,7 @@ .dx-switch-handle::before { background-color: $switch-handle-disabled-bg; } - + .dx-switch-container::before { background-color: $switch-disabled-bg; } @@ -156,11 +156,11 @@ .dx-switch-container::before { background-color: $switch-on-bg; } - + .dx-switch-handle::before { background-color: $switch-handle-on-bg; } - + &.dx-state-active, &.dx-state-focused { .dx-switch-handle::before { @@ -221,7 +221,7 @@ &.dx-state-readonly { .dx-switch-container::before { border-color: $switch-off-border-color-hover; - } + } } &.dx-invalid { @@ -373,12 +373,12 @@ background-color: $switch-invalid-container-bg; } } - + &.dx-switch-on-value:not(.dx-state-readonly):not(.dx-state-disabled) { .dx-switch-container .dx-switch-handle::before { background-color: $switch-invalid-handle-bg; } - + &.dx-state-active, &.dx-state-focused { .dx-switch-container .dx-switch-handle::before { diff --git a/packages/devextreme-scss/scss/widgets/base/textArea/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/textArea/_mixins.scss index c18f7e580775..49a7e5a90cf5 100644 --- a/packages/devextreme-scss/scss/widgets/base/textArea/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/textArea/_mixins.scss @@ -11,12 +11,12 @@ .dx-texteditor-input-container { margin: $input-container-margin; } - + .dx-texteditor-input, .dx-placeholder::before { line-height: $content-line-height; } - + &.dx-texteditor-with-label:not(.dx-texteditor-label-outside), &.dx-texteditor-with-floating-label { &.dx-editor-outlined, @@ -27,26 +27,26 @@ padding-top: 0; } } - + &.dx-editor-outlined { .dx-texteditor-container { padding-top: $outlined-top-padding; } } - + &.dx-editor-filled { .dx-texteditor-container { padding-top: $filled-top-padding; } } - + &.dx-editor-underlined { .dx-texteditor-container { padding-top: $underlined-top-padding; } } } - + .dx-icon-clear { top: 0; margin-top: 0; diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss index 8080410cfb21..e9a59d5d1d8f 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss @@ -39,15 +39,15 @@ gap: $gap; padding: $padding; margin: $margin; - + .dx-treeview-item-content { .dx-icon { @include dx-icon-sizing($icon-size); - + vertical-align: bottom; } } - + &.dx-state-hover { background-color: $hover-bg; border-radius: $border-radius; @@ -80,20 +80,20 @@ .dx-treeview-search { margin-bottom: $searchbox-margin-bottom; } - + .dx-treeview-with-search > .dx-scrollable { height: calc(100% - #{round($search-editor-height + $searchbox-margin-bottom)}); } - + .dx-treeview-select-all-item { border-bottom: 1px solid $border-color; padding: $select-all-item-padding; - + .dx-checkbox-container { display: flex; align-items: center; } - + .dx-checkbox-text { padding-inline-start: $item-element-gap; } @@ -106,11 +106,11 @@ .dx-treeview-border-visible { border: 1px solid $border-color; - + .dx-treeview-select-all-item { padding-inline-start: $select-all-item-border-visible-padding; } - + .dx-scrollable-content { > .dx-treeview-node-container { padding: $treeview-container-padding; @@ -120,8 +120,8 @@ } @mixin treeview-checkbox( - $checkbox-container-size, - $base-text-color, + $checkbox-container-size, + $base-text-color, $checkbox-border-color-focused, $treeview-item-selected-color, $treeview-item-selected-bg, diff --git a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss index 832e5826d250..595f26a61f8c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss @@ -188,7 +188,7 @@ $scrollview-pulldown-path: null !default; $base-separator-color: $base-border-color !default; $base-inverted-bg: darken($base-bg, 100%) !default; - + $base-inverted-text-color: #fff !default; $base-danger-hover: darken(desaturate($base-danger, 3.05), 5.10) !default; @@ -217,14 +217,14 @@ $scrollview-pulldown-path: null !default; $base-success: #10B230 !default; $base-danger: #F92F2F !default; $base-border-color: #414B5F !default; - + $base-typography-bg: #141E28 !default; } $base-accent-hover: lighten(desaturate($base-accent, 1.67), 5.29) !default; $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 16.30), 10.59) !default; $base-accent-selected: darken(desaturate(adjust-hue($base-accent, -3), 9.05), 31.57) !default; - + $base-text-color: rgba(255, 255, 255, 1) !default; $base-label-color: darken($base-text-color, 40.00) !default; $base-icon-color: darken($base-text-color, 32.16) !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss index 7e6ed9c8ff4d..88ad9823f724 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss @@ -77,10 +77,10 @@ $base-border-radius: $fluent-base-border-radius !default; $fluent-base-standard-texteditor-input-horizontal-padding: 0 !default; -:root { +:root { --dx-component-height: #{$fluent-base-inline-widget-height}; --dx-font-size: #{$fluent-base-font-size}; - --dx-border-width: #{$fluent-base-border-width}; - --dx-border-radius: #{$fluent-base-border-radius}; - --dx-font-size-icon: #{$fluent-base-icon-size}; -} + --dx-border-width: #{$fluent-base-border-width}; + --dx-border-radius: #{$fluent-base-border-radius}; + --dx-font-size-icon: #{$fluent-base-icon-size}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss index 83456e2e392e..5c4cec6e2300 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss @@ -28,6 +28,6 @@ $fluent-button-box-shadow-size: 0 1px 3px !default; $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; } -:root { - --dx-button-padding-inline: #{$fluent-button-horizontal-padding}; -} +:root { + --dx-button-padding-inline: #{$fluent-button-horizontal-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss index fea35d1797d2..e7f2cded30f7 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss @@ -147,11 +147,11 @@ $chat-typingindicator-circle-bg-color: null !default; @if $mode == "dark" { $chat-bubble-background-color-secondary: lighten($base-bg, 7.84) !default; $chat-bubble-background-color-primary: darken(desaturate(adjust-hue($base-accent, 356.3), 14.7), 49.4) !default; - + $chat-information-author-name-color: lighten($base-bg, 43.92) !default; $chat-information-timestamp-color: lighten($base-bg, 43.92) !default; $chat-typingindicator-color: lighten($base-bg, 43.92) !default; - + $chat-messagelist-day-header-color: lighten($base-bg, 43.92) !default; $chat-messagelist-empty-icon-color: darken($base-icon-color, 25.88) !default; $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/checkBox/_index.scss index 84caa389d26f..81a8ab676685 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/checkBox/_index.scss @@ -82,7 +82,7 @@ &.dx-state-disabled, .dx-state-disabled & { - opacity: 1; + opacity: 1; .dx-checkbox-icon { border-color: $checkbox-border-color-disabled; diff --git a/packages/devextreme-scss/scss/widgets/fluent/common/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/common/_sizes.scss index 0d7317380fa5..ca2a3c4ef064 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/common/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/common/_sizes.scss @@ -28,6 +28,6 @@ $fluent-base-dropdown-widgets-shadow: null !default; $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 4px 8px 0 $base-dropdown-shadow-color2 !default; } -:root { +:root { --dx-line-height: #{$fluent-line-height}; -} +} diff --git a/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_colors.scss index 8ec5be6106cc..d8a80bb49733 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_colors.scss @@ -10,10 +10,10 @@ $fluent-datagrid-grouppanel-item-bg: null !default; @if $color == "blue"{ $fluent-datagrid-grouppanel-item-bg: darken($base-bg, 5.88) !default; } - + @if $color == "saas" { $fluent-datagrid-grouppanel-item-bg: color.change($base-hover-bg, $alpha: 0.4) !default; - } + } } @if $mode == "dark" { diff --git a/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss index 8d8ba5dd283b..e3fa5bf43d5e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss @@ -32,7 +32,7 @@ $fluent-editor-custom-button-margin: 6px; width: calc(100% - 2 * $fluent-daterangebox-active-bar-horizontal-margin); margin: 0 $fluent-daterangebox-active-bar-horizontal-margin; } - } + } } &.dx-editor-underlined, diff --git a/packages/devextreme-scss/scss/widgets/fluent/filterBuilder/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/filterBuilder/_sizes.scss index f195b1f2b64e..2f9224d4db40 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/filterBuilder/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/filterBuilder/_sizes.scss @@ -12,7 +12,7 @@ $fluent-filterbuilder-treeview-item-min-heigth: null !default; @if $size == "default" { $fluent-filterbuilder-icon-padding: 8px !default; $fluent-filterbuilder-filled-editor-padding: 13px 12px !default; - + $fluent-filterbuilder-treeview-item-left-padding: 12px !default; $fluent-filterbuilder-treeview-item-padding: 6px 12px 6px $fluent-filterbuilder-treeview-item-left-padding !default; $fluent-filterbuilder-treeview-toggle-left: 16px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/form/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/form/_colors.scss index c09c1a678cad..ef8a1f3bac79 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/form/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/form/_colors.scss @@ -23,7 +23,7 @@ $form-field-mark-color: $form-field-item-color !default; @if $color == "blue" { $form-field-item-color: $base-text-color !default; } - + @if $color == "saas" { $form-field-item-color: $base-label-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss index ef7744ed3d00..c5959e7e34fd 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss @@ -1139,7 +1139,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig } &.dx-#{$widget-name}-sticky-columns { - .dx-row:not(.dx-row-lines, .dx-group-row, .dx-#{$widget-name}-group-footer, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) { + .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) { padding-top: $fluent-grid-base-cell-vertical-padding + 1px; } @@ -1151,7 +1151,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-row.dx-edit-row > td.dx-command-edit { padding-top: $fluent-grid-base-cell-vertical-padding - 1px; } - + .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input { height: $fluent-grid-base-cell-height - 2px; line-height: $fluent-grid-base-cell-height - 2px; diff --git a/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss index c26f594e4ec1..6b7b26bbab3a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss @@ -267,7 +267,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo color: $list-group-color; } } - + &:last-of-type { .dx-list-item { &:last-of-type { @@ -300,11 +300,11 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo .dx-list-group-header-indicator { color: $list-header-indicator-color; - + .dx-list-collapsible-groups & { display: flex; align-items: center; - + @include dx-icon(chevrondown); @include dx-icon-sizing($fluent-base-icon-size); } @@ -463,7 +463,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo @include dx-icon(dragvertical); color: $list-icon-color; - + @include dx-icon-sizing($fluent-base-icon-size); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent/list/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/list/_sizes.scss index bf861ec37864..5cc5743c44a7 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/list/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/list/_sizes.scss @@ -29,6 +29,6 @@ $fluent-list-next-button-horizontal-padding: null !default; } :root { - --dx-list-item-padding-inline: #{$fluent-list-item-horizontal-padding}; - --dx-list-item-padding-block: #{$fluent-list-item-vertical-padding}; -} + --dx-list-item-padding-inline: #{$fluent-list-item-horizontal-padding}; + --dx-list-item-padding-block: #{$fluent-list-item-vertical-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss index 705fdd537399..abd837a311b3 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss @@ -27,5 +27,5 @@ $load-indicator-inner-segment-border-color: null !default; } @if $mode == "dark" { - $load-indicator-inner-segment-border-color: $base-accent-selected !default; + $load-indicator-inner-segment-border-color: $base-accent-selected !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/lookup/_index.scss index 0c6cad09c1a7..120f08c13a2e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/lookup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/lookup/_index.scss @@ -147,7 +147,7 @@ box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12); background: $overlay-content-bg; border-top-right-radius: $lookup-arrow-border-radius; - } + } } &.dx-position-top { diff --git a/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss index 563d1da2ad5e..c2fd8daf91af 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss @@ -8,8 +8,8 @@ $fluent-numberbox-touch-friendly-spin-container-width: null !default; @if $size == "default" { $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; } - + @else if $size == "compact" { $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; } - + diff --git a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss index a45668ff782a..a4bc9d11c119 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss @@ -46,11 +46,11 @@ $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default; $pivotgrid-grandtotalcolor: $base-hover-bg !default; $pivotgrid-field-area-box-background-color: darken($base-bg, 5.88) !default; } - + @if $color == "saas" { $pivotgrid-grandtotalcolor: color.change($base-hover-bg, $alpha: 0.4) !default; $pivotgrid-field-area-box-background-color: color.change($base-hover-bg, $alpha: 0.4) !default; - } + } } @if $mode == "dark" { diff --git a/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss index 24c44ec20136..93f5409ad501 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss @@ -45,6 +45,6 @@ $fluent-popup-focused-content-shadow: null !default; $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; } -:root { - --dx-popup-toolbar-item-padding-inline: #{$fluent-popup-toolbar-item-spacing}; -} +:root { + --dx-popup-toolbar-item-padding-inline: #{$fluent-popup-toolbar-item-spacing}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss b/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss index 9449cedfdbaa..c0c51ce9a080 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss @@ -35,7 +35,7 @@ height: $fluent-tab-nav-button-icon-height; font-size: $fluent-tab-nav-button-icon-font-size; } - + &.dx-state-active { border: none; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss b/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss index 877f17c41b24..349f5d7faf91 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss @@ -19,11 +19,11 @@ &.dx-state-hover { background-color: $tabs-tab-bg-color-hover-primary; } - + &.dx-state-focused { background-color: $tabs-tab-bg-color-focus-primary; } - + &.dx-state-active { background-color: $tabs-tab-bg-color-active-primary; } @@ -47,7 +47,7 @@ &.dx-state-hover { @include dx-tabs-indicator-background($tabs-tab-border-color-hover); } - + &.dx-state-active { @include dx-tabs-indicator-background($tabs-tab-border-color-active); } @@ -92,7 +92,7 @@ &.dx-state-hover { @include dx-tabs-indicator-background($tabs-tab-border-color-hover); } - + &.dx-state-active { @include dx-tabs-indicator-background($tabs-tab-border-color-active); } diff --git a/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss b/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss index 7afc7291ed41..745cda66a2ac 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss @@ -39,33 +39,33 @@ &.dx-state-hover .dx-tab-content { @include dx-tabs-indicator-background($tabs-tab-border-color-hover); } - + &.dx-state-active .dx-tab-content { @include dx-tabs-indicator-background($tabs-tab-border-color-active); } - + &.dx-tab-selected { .dx-tab-content { @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic); } - + &.dx-state-focused .dx-tab-content { @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused); } - + &.dx-state-hover .dx-tab-content { @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover); } - + &.dx-state-active .dx-tab-content { @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active); } - + &.dx-state-disabled .dx-tab-content { @include dx-tabs-indicator-background($tabs-tab-border-color-disabled); } } - } + } } &.dx-tab-indicator-position-right { @@ -88,27 +88,27 @@ &.dx-state-hover { @include dx-tabs-indicator-background($tabs-tab-border-color-hover); } - + &.dx-state-active { @include dx-tabs-indicator-background($tabs-tab-border-color-active); } } - + .dx-tab-selected { @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic); - + &.dx-state-focused { @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused); } - + &.dx-state-hover { @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover); } - + &.dx-state-active { @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active); } - + &.dx-state-disabled { @include dx-tabs-indicator-background($tabs-tab-border-color-disabled); } diff --git a/packages/devextreme-scss/scss/widgets/fluent/tabs/mixins/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/tabs/mixins/_index.scss index ca6d2a994259..002c2ac14ca9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tabs/mixins/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tabs/mixins/_index.scss @@ -50,7 +50,7 @@ @mixin dx-tabs-indicator-secondary { @include dx-tabs-indicator(); - + &::after { border-radius: $fluent-indicator-border-radius-secondary; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/tagBox/_index.scss index 8eef44cff592..5a9c7bfa1925 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tagBox/_index.scss @@ -66,7 +66,7 @@ padding-bottom: $fluent-tagbox-filled-with-label-bottom-padding; } } - + &.dx-editor-underlined { .dx-tag-container, .dx-placeholder::before { diff --git a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss index 5883c78087db..738a801a7c0f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss @@ -98,7 +98,7 @@ $texteditor-label-transition: $texteditor-outlined-bg: $base-element-bg !default; $texteditor-filled-bg: darken($base-element-bg, 3.9) !default; } - + @if $color == "saas" { $texteditor-color: rgba(66, 81, 118, 1) !default; $texteditor-placeholder-color: rgba(144, 158, 192, 1) !default; @@ -148,9 +148,6 @@ $texteditor-label-color: $texteditor-placeholder-color; $texteditor-label-color-focused: $base-accent; :root { - --dx-texteditor-color-text: #{$texteditor-color}; + --dx-texteditor-color-text: #{$texteditor-color}; --dx-texteditor-color-label: #{$texteditor-label-color}; } - - - diff --git a/packages/devextreme-scss/scss/widgets/fluent/toast/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/toast/_colors.scss index 8a55ffc9ab31..057b1a0013f5 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/toast/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/toast/_colors.scss @@ -10,7 +10,7 @@ $warning-color: null !default; @if $mode == "light" { $warning-color: $base-text-color !default; } - + @if $mode == "dark" { $warning-color: $base-inverted-text-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/toolbar/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/toolbar/_sizes.scss index f4d132c25a7c..d72e05698d91 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/toolbar/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/toolbar/_sizes.scss @@ -21,5 +21,5 @@ $fluent-toolbar-section-padding: null !default; } :root { - --dx-toolbar-height: #{$fluent-toolbar-height}; -} + --dx-toolbar-height: #{$fluent-toolbar-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss index 1d68a76e0039..42f21a2d9a20 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss @@ -45,16 +45,16 @@ $fluent-h6-font-size: null !default; } :root { - --dx-font-size-heading-1: #{$fluent-h1-font-size}; - --dx-font-size-heading-2: #{$fluent-h2-font-size}; - --dx-font-size-heading-3: #{$fluent-h3-font-size}; - --dx-font-size-heading-4: #{$fluent-h4-font-size}; - --dx-font-size-heading-5: #{$fluent-h5-font-size}; + --dx-font-size-heading-1: #{$fluent-h1-font-size}; + --dx-font-size-heading-2: #{$fluent-h2-font-size}; + --dx-font-size-heading-3: #{$fluent-h3-font-size}; + --dx-font-size-heading-4: #{$fluent-h4-font-size}; + --dx-font-size-heading-5: #{$fluent-h5-font-size}; --dx-font-size-heading-6: #{$fluent-h6-font-size}; - --dx-font-size-xl: #{$fluent-xl-font-size}; - --dx-font-size-lg: #{$fluent-l-font-size}; - --dx-font-size-md: #{$fluent-m-font-size}; - --dx-font-size-sm: #{$fluent-s-font-size}; - --dx-font-size-xs: #{$fluent-xs-font-size}; + --dx-font-size-xl: #{$fluent-xl-font-size}; + --dx-font-size-lg: #{$fluent-l-font-size}; + --dx-font-size-md: #{$fluent-m-font-size}; + --dx-font-size-sm: #{$fluent-s-font-size}; + --dx-font-size-xs: #{$fluent-xs-font-size}; } diff --git a/packages/devextreme-scss/scss/widgets/generic/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/_sizes.scss index d4e51bd412d9..bc8003862f40 100644 --- a/packages/devextreme-scss/scss/widgets/generic/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/_sizes.scss @@ -74,7 +74,7 @@ $generic-treeview-search-editor-height: round($generic-base-line-height * $gener :root { --dx-component-height: #{$generic-base-inline-widget-height}; --dx-font-size: #{$generic-base-font-size}; - --dx-border-width: #{$generic-base-border-width}; - --dx-border-radius: #{$base-border-radius}; - --dx-font-size-icon: #{$generic-base-icon-size}; + --dx-border-width: #{$generic-base-border-width}; + --dx-border-radius: #{$base-border-radius}; + --dx-font-size-icon: #{$generic-base-icon-size}; } diff --git a/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss index a44b3355592f..824673362b6c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss @@ -27,6 +27,6 @@ $generic-button-content-line-height: $generic-base-line-height !default; $generic-button-box-shadow-size: 0 1px 2px !default; } -:root { - --dx-button-padding-inline: #{$generic-button-horizontal-padding}; -} +:root { + --dx-button-padding-inline: #{$generic-button-horizontal-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss index 6665e0c4a189..43f13cb02bc5 100644 --- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss @@ -148,7 +148,7 @@ $chat-typingindicator-circle-bg-color: null !default; $chat-information-author-name-color: lighten($base-bg, 32.55) !default; $chat-information-timestamp-color: lighten($base-bg, 32.55) !default; $chat-typingindicator-color: lighten($base-bg, 32.55) !default; - + $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default; $chat-messagelist-empty-icon-color: darken($base-icon-color, 37.25) !default; $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; @@ -168,7 +168,7 @@ $chat-typingindicator-circle-bg-color: null !default; $chat-information-author-name-color: darken($base-bg, 41.57) !default; $chat-information-timestamp-color: darken($base-bg, 41.57) !default; $chat-typingindicator-color: darken($base-bg, 41.57) !default; - + $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default; $chat-messagelist-empty-icon-color: $base-icon-color !default; $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default; @@ -188,7 +188,7 @@ $chat-typingindicator-circle-bg-color: null !default; $chat-information-author-name-color: $base-text-color !default; $chat-information-timestamp-color: $base-text-color !default; $chat-typingindicator-color: $base-text-color !default; - + $chat-messagelist-day-header-color: $base-text-color !default; $chat-messagelist-empty-icon-color: $base-bg !default; $chat-messagelist-empty-icon-background-color: $base-inverted-bg !default; @@ -208,7 +208,7 @@ $chat-typingindicator-circle-bg-color: null !default; $chat-information-author-name-color: lighten($base-bg, 32.55) !default; $chat-information-timestamp-color: lighten($base-bg, 32.55) !default; $chat-typingindicator-color: lighten($base-bg, 32.55) !default; - + $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default; $chat-messagelist-empty-icon-color: $base-icon-color !default; $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default; @@ -228,7 +228,7 @@ $chat-typingindicator-circle-bg-color: null !default; $chat-information-author-name-color: lighten($base-bg, 32.55) !default; $chat-information-timestamp-color: lighten($base-bg, 32.55) !default; $chat-typingindicator-color: lighten($base-bg, 32.55) !default; - + $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default; $chat-messagelist-empty-icon-color: darken($base-icon-color, 37.25) !default; $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; @@ -248,7 +248,7 @@ $chat-typingindicator-circle-bg-color: null !default; $chat-information-author-name-color: darken($base-bg, 41.57) !default; $chat-information-timestamp-color: darken($base-bg, 41.57) !default; $chat-typingindicator-color: darken($base-bg, 41.57) !default; - + $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default; $chat-messagelist-empty-icon-color: $base-icon-color !default; $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default; @@ -268,7 +268,7 @@ $chat-typingindicator-circle-bg-color: null !default; $chat-information-author-name-color: darken($base-bg, 41.57) !default; $chat-information-timestamp-color: darken($base-bg, 41.57) !default; $chat-typingindicator-color: darken($base-bg, 41.57) !default; - + $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default; $chat-messagelist-empty-icon-color: $base-icon-color !default; $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss index 87ad7929bf10..a005ee5a11e2 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss @@ -201,7 +201,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic min-width: 20px; } } - + .dx-command-edit-with-icons { .dx-link { @include dx-icon-sizing($generic-command-edit-icon-size); @@ -1019,7 +1019,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic } .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns { - .dx-row:not(.dx-row-lines, .dx-group-row, .dx-#{$widget-name}-group-footer, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) { + .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) { padding-top: $generic-grid-base-cell-padding + 1px; } diff --git a/packages/devextreme-scss/scss/widgets/generic/list/_index.scss b/packages/devextreme-scss/scss/widgets/generic/list/_index.scss index bd0b5c5a6e64..72f6f988006f 100644 --- a/packages/devextreme-scss/scss/widgets/generic/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/list/_index.scss @@ -201,7 +201,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b border-top-color: $list-group-color; content: ' '; } - + .dx-list-group-collapsed &::before { border-bottom-color: $list-group-color; border-width: 0 5px 5px 5px; diff --git a/packages/devextreme-scss/scss/widgets/generic/list/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/list/_sizes.scss index 72aedd6a9f6d..5162b259dcf2 100644 --- a/packages/devextreme-scss/scss/widgets/generic/list/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/list/_sizes.scss @@ -51,4 +51,4 @@ $generic-list-border-width: 1px !default; :root { --dx-list-item-padding-inline: #{$generic-list-item-horizontal-padding}; --dx-list-item-padding-block: #{$generic-list-item-vertical-padding}; -} +} diff --git a/packages/devextreme-scss/scss/widgets/generic/menu/_index.scss b/packages/devextreme-scss/scss/widgets/generic/menu/_index.scss index 1051c240c967..22be73c9673c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/menu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/menu/_index.scss @@ -21,7 +21,7 @@ border-style: solid; border-color: transparent; border-width: 1px; - + &::before { content: ''; position: absolute; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss index 811ca9a49aa4..85df8f51721e 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss @@ -16,7 +16,7 @@ .dx-tabpanel { .dx-tabs-wrapper { border: none; - + &::after { top: 0; bottom: 0; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss index 07e646602ccd..e901b36f91e9 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss @@ -16,7 +16,7 @@ .dx-tabs-wrapper { border-block-start: $generic-tabs-border; border-block-end: $generic-tabs-border; - + @include dx-tabs-border-mixin( none, $generic-tabs-border, diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss index 3a4543fc7fe1..2ce2e76fc300 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss @@ -16,7 +16,7 @@ .dx-tabs-wrapper { border-block-start: $generic-tabs-border; border-block-end: $generic-tabs-border; - + @include dx-tabs-border-mixin( none, $generic-tabs-border, diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss index df78a5e269fe..1bcc97509911 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss @@ -58,7 +58,7 @@ border-inline-end: none; } } - + &.dx-focused-disabled-prev-tab { &::after { border-inline-start: none; @@ -73,7 +73,7 @@ border-block-end: none; } } - + &.dx-focused-disabled-prev-tab { &::after { border-block-start: none; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_base.scss index 8689113b458f..aae274a6bc20 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_base.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_base.scss @@ -133,7 +133,7 @@ border-inline-end: none; } } - + &.dx-focused-disabled-prev-tab { &::after { border-inline-start: none; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_base.scss index 822df2418768..65f96ccda915 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_base.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_base.scss @@ -44,7 +44,7 @@ background-color: $tabs-tab-bg; border-block-start: $generic-tabs-border-transparent; border-block-end: $generic-tabs-border-transparent; - + @include dx-tabs-after-mixin(true); @include dx-tabs-border-mixin( $generic-tabs-border, diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/mixins/_index.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/mixins/_index.scss index 944344b6eea1..5a0561e9a4eb 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/mixins/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/mixins/_index.scss @@ -39,6 +39,6 @@ border-block-start: $border-block-start; border-inline-end: $border-inline-end; border-block-end: $border-block-end; - border-inline-start: $border-inline-start; + border-inline-start: $border-inline-start; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/generic/tagBox/_index.scss index 6959bafea2a5..4f5da6db4618 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tagBox/_index.scss @@ -40,7 +40,7 @@ .dx-tagbox { .dx-tag-container.dx-texteditor-input-container { padding-bottom: $generic-tagbox-tag-container-padding-bottom; - + .dx-texteditor-input { padding-bottom: $generic-base-inline-borderedwidget-bottom-padding - $generic-tagbox-tag-container-padding-bottom; min-height: $generic-texteditor-input-height - $generic-tagbox-tag-container-padding-bottom; diff --git a/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss index 985dd9daea09..e9ba30b175ee 100644 --- a/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss @@ -134,6 +134,6 @@ $texteditor-label-transition: $texteditor-label-color: $texteditor-placeholder-color; :root { - --dx-texteditor-color-text: #{$texteditor-color}; + --dx-texteditor-color-text: #{$texteditor-color}; --dx-texteditor-color-label: #{$texteditor-label-color}; } diff --git a/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss index 2d010a18f8aa..b3f330f9c7b2 100644 --- a/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss @@ -155,7 +155,7 @@ $generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $gener } @include validation-icon-position(); - + &.dx-validation-pending { .dx-texteditor-input { padding-inline-end: $generic-texteditor-invalid-badge-size; @@ -285,7 +285,7 @@ $generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $gener $generic-texteditor-filled-input-with-label-bottom-padding, $generic-texteditor-label-outside-font-size, $generic-texteditor-label-outside-height, -); +); @include dx-editor-underlined( $texteditor-label-transition, $generic-texteditor-label-size, diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss index 858406900a9e..afab366f1002 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss @@ -24,7 +24,7 @@ ); @include default-expander-icon( 'spindown', - 'spinright', + 'spinright', $generic-base-icon-size, $generic-treeview-toggle-item-width, $treeview-spin-icon-color, diff --git a/packages/devextreme-scss/scss/widgets/generic/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/typography/_sizes.scss index 15b6e6b29a6f..7bf7aea4124a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/typography/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/typography/_sizes.scss @@ -43,15 +43,15 @@ $generic-h6-font-size: null !default; } :root { - --dx-font-size-heading-1: #{$generic-h1-font-size}; - --dx-font-size-heading-2: #{$generic-h2-font-size}; - --dx-font-size-heading-3: #{$generic-h3-font-size}; - --dx-font-size-heading-4: #{$generic-h4-font-size}; - --dx-font-size-heading-5: #{$generic-h5-font-size}; + --dx-font-size-heading-1: #{$generic-h1-font-size}; + --dx-font-size-heading-2: #{$generic-h2-font-size}; + --dx-font-size-heading-3: #{$generic-h3-font-size}; + --dx-font-size-heading-4: #{$generic-h4-font-size}; + --dx-font-size-heading-5: #{$generic-h5-font-size}; --dx-font-size-heading-6: #{$generic-h6-font-size}; - --dx-font-size-xl: #{$generic-xl-font-size}; - --dx-font-size-lg: #{$generic-l-font-size}; - --dx-font-size-md: #{$generic-m-font-size}; - --dx-font-size-sm: #{$generic-s-font-size}; - --dx-font-size-xs: #{$generic-xs-font-size}; + --dx-font-size-xl: #{$generic-xl-font-size}; + --dx-font-size-lg: #{$generic-l-font-size}; + --dx-font-size-md: #{$generic-m-font-size}; + --dx-font-size-sm: #{$generic-s-font-size}; + --dx-font-size-xs: #{$generic-xs-font-size}; } diff --git a/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss index 7930dd56b496..0999f8b0b357 100644 --- a/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss @@ -34,6 +34,6 @@ $material-button-active-box-shadow-size: 0 4px 6px !default; $material-button-min-width: 48px !default; } -:root { - --dx-button-padding-inline: #{$material-button-horizontal-padding}; -} +:root { + --dx-button-padding-inline: #{$material-button-horizontal-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss index 75bcbec0bf06..6e65314d0f56 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss @@ -1110,7 +1110,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- } &.dx-#{$widget-name}-sticky-columns { - .dx-row:not(.dx-row-lines, .dx-group-row, .dx-datagrid-group-footer, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) { + .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) { padding-top: $material-grid-base-cell-vertical-padding + 1px; } @@ -1123,7 +1123,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- padding-top: $material-grid-base-cell-vertical-padding - 1px; padding-bottom: $material-grid-base-cell-vertical-padding - 1px; } - + .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input { height: $material-grid-base-cell-height - 1px; line-height: $material-grid-base-cell-height - 1px; diff --git a/packages/devextreme-scss/scss/widgets/material/list/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/list/_sizes.scss index ec946edfb1c4..61a9d35270c3 100644 --- a/packages/devextreme-scss/scss/widgets/material/list/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/list/_sizes.scss @@ -40,7 +40,7 @@ $material-list-select-all-margin-top: -1px !default; $material-list-main-font-size: 13px !default; } -:root { +:root { --dx-list-item-padding-inline: #{$material-list-item-horizontal-padding}; --dx-list-item-padding-block: #{$material-list-item-vertical-padding}; -} +} diff --git a/packages/devextreme-scss/scss/widgets/material/tabs/layout/navigation-button/_base.scss b/packages/devextreme-scss/scss/widgets/material/tabs/layout/navigation-button/_base.scss index 1f1d66c3c9e0..fb6a332046bf 100644 --- a/packages/devextreme-scss/scss/widgets/material/tabs/layout/navigation-button/_base.scss +++ b/packages/devextreme-scss/scss/widgets/material/tabs/layout/navigation-button/_base.scss @@ -41,7 +41,7 @@ height: $material-tab-nav-button-icon-height; font-size: $material-tab-nav-button-icon-font-size; } - + &.dx-state-active { border: none; } diff --git a/packages/devextreme-scss/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss b/packages/devextreme-scss/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss index c3116658d947..4448864253f2 100644 --- a/packages/devextreme-scss/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss +++ b/packages/devextreme-scss/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss @@ -35,7 +35,7 @@ .dx-tab.dx-tab-selected .dx-tab-content { @include dx-tabs-horizontal-indicator-secondary(top, $tabs-selected-tab-border-color); } - + .dx-tab-selected.dx-state-disabled .dx-tab-content { @include dx-tabs-horizontal-indicator-secondary(top, $tabs-disabled-tab-border-color); } @@ -58,7 +58,7 @@ .dx-tab-selected.dx-state-disabled .dx-tab-content { @include dx-tabs-horizontal-indicator-secondary(bottom, $tabs-disabled-tab-border-color); - } + } } &.dx-tab-indicator-position-left { diff --git a/packages/devextreme-scss/scss/widgets/material/textArea/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/textArea/_sizes.scss index b95a495411d7..500c42cdb0ee 100644 --- a/packages/devextreme-scss/scss/widgets/material/textArea/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/textArea/_sizes.scss @@ -5,7 +5,7 @@ $textarea-content-line-height: null !default; $textarea-font-size: $material-texteditor-font-size !default; - + @if $size == "default" { $textarea-content-line-height: 24px !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss index e516770eef84..01e52ca51c43 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss @@ -74,7 +74,7 @@ $texteditor-label-transition: } :root { - --dx-texteditor-color-text: #{$texteditor-color}; + --dx-texteditor-color-text: #{$texteditor-color}; --dx-texteditor-color-label: #{$texteditor-label-color}; } diff --git a/packages/devextreme-scss/scss/widgets/material/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/material/treeView/_index.scss index 6be9b2920a6f..c887bef84d09 100644 --- a/packages/devextreme-scss/scss/widgets/material/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/treeView/_index.scss @@ -20,7 +20,7 @@ background-color: color.change($checkbox-border-color, $alpha: 0.1); transform: scale(1); } - + &.dx-checkbox-checked, &.dx-checkbox-indeterminate { .dx-checkbox-icon::after { @@ -43,7 +43,7 @@ ); @include default-expander-icon( 'chevrondown', - 'chevronright', + 'chevronright', $material-base-icon-size, $material-treeview-toggle-item-width, $treeview-spin-icon-color, diff --git a/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss index 0b7f635b3707..e2ec13fb78a2 100644 --- a/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss @@ -45,16 +45,16 @@ $material-h6-font-size: null !default; } :root { - --dx-font-size-heading-1: #{$material-h1-font-size}; - --dx-font-size-heading-2: #{$material-h2-font-size}; - --dx-font-size-heading-3: #{$material-h3-font-size}; - --dx-font-size-heading-4: #{$material-h4-font-size}; - --dx-font-size-heading-5: #{$material-h5-font-size}; + --dx-font-size-heading-1: #{$material-h1-font-size}; + --dx-font-size-heading-2: #{$material-h2-font-size}; + --dx-font-size-heading-3: #{$material-h3-font-size}; + --dx-font-size-heading-4: #{$material-h4-font-size}; + --dx-font-size-heading-5: #{$material-h5-font-size}; --dx-font-size-heading-6: #{$material-h6-font-size}; - --dx-font-size-xl: #{$material-xl-font-size}; - --dx-font-size-lg: #{$material-l-font-size}; - --dx-font-size-md: #{$material-m-font-size}; - --dx-font-size-sm: #{$material-s-font-size}; - --dx-font-size-xs: #{$material-xs-font-size}; + --dx-font-size-xl: #{$material-xl-font-size}; + --dx-font-size-lg: #{$material-l-font-size}; + --dx-font-size-md: #{$material-m-font-size}; + --dx-font-size-sm: #{$material-s-font-size}; + --dx-font-size-xs: #{$material-xs-font-size}; } diff --git a/packages/devextreme/js/__internal/events/pointer/m_mouse.ts b/packages/devextreme/js/__internal/events/pointer/m_mouse.ts index c5bb04abef0d..d5dd704dfd51 100644 --- a/packages/devextreme/js/__internal/events/pointer/m_mouse.ts +++ b/packages/devextreme/js/__internal/events/pointer/m_mouse.ts @@ -1,5 +1,6 @@ import BaseStrategy from '@js/common/core/events/pointer/base'; import Observer from '@js/common/core/events/pointer/observer'; +import browser from '@js/core/utils/browser'; import { extend } from '@js/core/utils/extend'; /* eslint-disable spellcheck/spell-checker */ @@ -7,13 +8,19 @@ const eventMap = { dxpointerdown: 'mousedown', dxpointermove: 'mousemove', dxpointerup: 'mouseup', - dxpointercancel: '', + dxpointercancel: 'pointercancel', dxpointerover: 'mouseover', dxpointerout: 'mouseout', dxpointerenter: 'mouseenter', dxpointerleave: 'mouseleave', }; +// due to this https://bugs.webkit.org/show_bug.cgi?id=222632 issue +if (browser.safari) { + // eslint-disable-next-line no-useless-concat + eventMap.dxpointercancel += ' ' + 'dragstart'; +} + const normalizeMouseEvent = function (e) { e.pointerId = 1; diff --git a/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts b/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts index b3bee519040b..238482e5ab10 100644 --- a/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts +++ b/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts @@ -886,10 +886,6 @@ const headerPanel = (Base: ModuleType