From 7ccaca03774f9fddb465e6e073c25857bd77191a Mon Sep 17 00:00:00 2001 From: Mark Allen Ramirez Date: Fri, 3 Nov 2023 15:20:53 +0800 Subject: [PATCH] Fluent: Theme Builder - Add properties to change DataGrid/TreeList/Scheduler's border radius (#25782) --- .../devextreme/scss/widgets/fluent/_sizes.scss | 1 - .../scss/widgets/fluent/gridBase/_index.scss | 16 ++++++++-------- .../scss/widgets/fluent/gridBase/_sizes.scss | 6 ++++++ .../scss/widgets/fluent/scheduler/_index.scss | 10 +++++----- .../scss/widgets/fluent/scheduler/_sizes.scss | 8 +++++++- 5 files changed, 26 insertions(+), 15 deletions(-) diff --git a/packages/devextreme/scss/widgets/fluent/_sizes.scss b/packages/devextreme/scss/widgets/fluent/_sizes.scss index a507f36a742e..d8e0164d4dc2 100644 --- a/packages/devextreme/scss/widgets/fluent/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/_sizes.scss @@ -81,6 +81,5 @@ $fluent-base-border-width: 1px !default; * $type text */ $base-border-radius: $fluent-base-border-radius !default; -$fluent-grid-base-border-radius: 0 !default; $fluent-base-standard-texteditor-input-horizontal-padding: 0 !default; diff --git a/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss index 65df296755a3..973c84617a9d 100644 --- a/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss @@ -45,13 +45,13 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-#{$widget-name}, .dx-#{$widget-name}-container { .dx-bordered-top-view { - border-top-left-radius: $fluent-grid-base-border-radius; - border-top-right-radius: $fluent-grid-base-border-radius; + border-top-left-radius: $datagrid-border-radius; + border-top-right-radius: $datagrid-border-radius; } .dx-bordered-bottom-view { - border-bottom-left-radius: $fluent-grid-base-border-radius; - border-bottom-right-radius: $fluent-grid-base-border-radius; + border-bottom-left-radius: $datagrid-border-radius; + border-bottom-right-radius: $datagrid-border-radius; } .dx-menu { @@ -267,11 +267,11 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig padding-bottom: $fluent-grid-base-header-cell-vertical-padding; &:first-child { - border-top-left-radius: $fluent-grid-base-border-radius; + border-top-left-radius: $datagrid-border-radius; } &:last-child { - border-top-right-radius: $fluent-grid-base-border-radius; + border-top-right-radius: $datagrid-border-radius; } } @@ -1253,10 +1253,10 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig } .dx-#{$widget-name}-dragview { - border-radius: $fluent-grid-base-border-radius; + border-radius: $datagrid-border-radius; .dx-#{$widget-name}-borders { - border-radius: $fluent-grid-base-border-radius; + border-radius: $datagrid-border-radius; } } } diff --git a/packages/devextreme/scss/widgets/fluent/gridBase/_sizes.scss b/packages/devextreme/scss/widgets/fluent/gridBase/_sizes.scss index c565c42fdbf7..bbc8a256646b 100644 --- a/packages/devextreme/scss/widgets/fluent/gridBase/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/gridBase/_sizes.scss @@ -2,6 +2,12 @@ // adduse +/** +* $name 15. Border radius +* $type text +*/ +$datagrid-border-radius: 12px !default; + $fluent-grid-base-cell-height: null !default; $fluent-grid-base-header-height: null !default; $fluent-grid-base-cell-line-height: null !default; diff --git a/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss b/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss index 966415523c63..498d35183d19 100644 --- a/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss @@ -72,7 +72,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; } .dx-scheduler-container { - border-radius: $fluent-scheduler-border-radius; + border-radius: $scheduler-border-radius; } .dx-scheduler-time-panel-cell { @@ -411,8 +411,8 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; } background-color: $scheduler-header-bg; - border-top-right-radius: $fluent-scheduler-border-radius; - border-top-left-radius: $fluent-scheduler-border-radius; + border-top-right-radius: $scheduler-border-radius; + border-top-left-radius: $scheduler-border-radius; } .dx-scheduler-group-row { @@ -472,8 +472,8 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; } .dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors - border-bottom-right-radius: $fluent-scheduler-border-radius; - border-bottom-left-radius: $fluent-scheduler-border-radius; + border-bottom-right-radius: $scheduler-border-radius; + border-bottom-left-radius: $scheduler-border-radius; &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) { .dx-scheduler-header-panel, diff --git a/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss b/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss index dfa898ce44b8..f1bf54e3acc8 100644 --- a/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss @@ -22,7 +22,13 @@ $fluent-scheduler-appointment-tooltip-remove-padding-top: null !default; $scheduler-left-column-width: 65px !default; $fluent-scheduler-timeline-date-table-cell-height: 50px !default; -$fluent-scheduler-border-radius: 0 !default; + +/** +* $name 15. Border radius +* $type text +*/ +$scheduler-border-radius: 12px !default; + $fluent-scheduler-navigator-border-radius: $button-border-radius !default; $fluent-scheduler-navigation-buttons-padding: 6px !default; $fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size;