Fluent: DataGrid - CSS fixes (#25605)

DevExpress · Sep 19, 2023 · 4bc917d · 4bc917d
1 parent f0faf68
commit 4bc917d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/packages/devextreme/scss/widgets/fluent/gridBase/_colors.scss b/packages/devextreme/scss/widgets/fluent/gridBase/_colors.scss
@@ -28,7 +28,7 @@ $datagrid-block-separator-bg: null !default;
 * $type select
 * $type-values 300|500|700
 */
-$datagrid-columnchooser-font-weight: 500 !default;
+$datagrid-columnchooser-font-weight: 600 !default;
 
 /**
 * $name 35. Draggable header border color
@@ -173,13 +173,13 @@ $datagrid-text-link-disabled-opacity: $base-disabled-opacity;
 $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
 
 @if $mode == "light" {
-  $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.54) !default;
+  $datagrid-columnchooser-item-color: $datagrid-base-color !default;
   $datagrid-block-separator-bg: darken($datagrid-base-background-color, 12%) !default;
   $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $header-filter-color: $datagrid-columnchooser-item-color !default;
   $header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.38) !default;
-  $datagrid-selection-bg: color.change($base-accent, $alpha: 0.04) !default;
+  $datagrid-selection-bg: color.change(darken($base-element-bg, 100%), $alpha: 0.08) !default;
   $datagrid-row-error-color: $base-inverted-text-color !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-row-alternation-bg: darken($datagrid-base-background-color, 4%) !default;
@@ -194,7 +194,7 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
   $header-filter-color: $datagrid-columnchooser-item-color !default;
   $header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.38) !default;
-  $datagrid-selection-bg: color.change($base-accent, $alpha: 0.07) !default;
+  $datagrid-selection-bg: color.change(lighten($base-element-bg, 100%), $alpha: 0.08) !default;
   $datagrid-row-error-color: rgba(255, 255, 255, 1) !default;
   $datagrid-columnchooser-item-bg: lighten($datagrid-columnchooser-bg, 3%) !default;
   $datagrid-row-alternation-bg: lighten($datagrid-base-background-color, 4%) !default;

diff --git a/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss
@@ -254,7 +254,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       & > td {
         padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding;
         font-size: $fluent-grid-base-cell-font-size;
-        line-height: $fluent-grid-base-cell-line-height;
+        line-height: $fluent-grid-base-cell-line-height - 1;
       }
     }
 

diff --git a/packages/devextreme/scss/widgets/fluent/gridBase/_sizes.scss b/packages/devextreme/scss/widgets/fluent/gridBase/_sizes.scss
@@ -13,6 +13,7 @@ $fluent-grid-base-texteditor-input-padding: null !default;
 $fluent-grid-base-menu-item-padding: null !default;
 $fluent-grid-base-column-chooser-horizontal-padding: null !default;
 $fluent-grid-base-column-chooser-paddings: null !default;
+$fluent-grid-base-header-panel-padding: null !default;
 $fluent-grid-base-grouppanel-item-margin: null !default;
 $fluent-grid-base-command-edit-column-width: null !default;
 $fluent-grid-base-command-edit-column-with-icons-width: null !default;
@@ -23,14 +24,14 @@ $fluent-command-edit-icon-size: null !default;
 $fluent-filter-row-between-editor-padding: null !default;
 $fluent-command-column-additional-right-margin: null !default;
 
-$fluent-grid-base-header-line-height: 16px !default;
+$fluent-grid-base-header-line-height: 18px !default;
 $fluent-grid-base-header-icon-size: 15px !default;
 $fluent-grid-base-column-chooser-item-margin: 8px !default;
 $fluent-command-edit-icon-margin: 2px !default;
 
 @if $size == "default" {
   $fluent-grid-base-cell-height: 48px !default;
-  $fluent-grid-base-header-height: 56px !default;
+  $fluent-grid-base-header-height: 48px !default;
   $fluent-grid-base-cell-line-height: 20px !default;
   $fluent-grid-base-cell-font-size: 14px !default;
 
@@ -42,6 +43,7 @@ $fluent-command-edit-icon-margin: 2px !default;
   $fluent-grid-base-menu-item-padding: 11px 4px !default;
   $fluent-grid-base-column-chooser-horizontal-padding: 24px !default;
   $fluent-grid-base-column-chooser-paddings: 16px $fluent-grid-base-column-chooser-horizontal-padding 9px !default;
+  $fluent-grid-base-header-panel-padding: 8px 0 !default;
   $fluent-grid-base-grouppanel-item-margin: 10px !default;
 
   $fluent-grid-base-command-edit-column-width: 115px !default;
@@ -57,9 +59,9 @@ $fluent-command-edit-icon-margin: 2px !default;
 
 @else if $size == "compact" {
   $fluent-grid-base-cell-height: 36px !default;
-  $fluent-grid-base-header-height: 40px !default;
+  $fluent-grid-base-header-height: 36px !default;
   $fluent-grid-base-cell-line-height: 16px !default;
-  $fluent-grid-base-cell-font-size: 13px !default;
+  $fluent-grid-base-cell-font-size: 12px !default;
 
   $fluent-grid-base-checkbox-size: 16px !default;
   $fluent-grid-base-cell-horizontal-padding: 11px !default;
@@ -69,6 +71,7 @@ $fluent-command-edit-icon-margin: 2px !default;
   $fluent-grid-base-menu-item-padding: 8px 4px !default;
   $fluent-grid-base-column-chooser-horizontal-padding: 8px !default;
   $fluent-grid-base-column-chooser-paddings: 8px $fluent-grid-base-column-chooser-horizontal-padding 8px !default;
+  $fluent-grid-base-header-panel-padding: 6px 0 !default;
   $fluent-grid-base-grouppanel-item-margin: 8px !default;
 
   $fluent-grid-base-command-edit-column-width: 105px !default;
@@ -82,5 +85,4 @@ $fluent-command-edit-icon-margin: 2px !default;
   $fluent-command-column-additional-right-margin: 2px !default;
 }
 
-$fluent-grid-base-header-panel-padding: 0 $fluent-grid-base-cell-horizontal-padding !default;
 $fluent-grid-base-header-cell-font-size: $fluent-grid-base-cell-font-size !default;