devextreme-themebuilder 25.2.5 → 25.2.6

package/data/metadata/dx-theme-builder-metadata.js

@@ -4408,16 +4408,16 @@ exports.metadata = {
             'Name': '80. Date-time indicator color',
             'Type': 'color'
         },
-        {
-            'Key': '$scheduler-border-radius',
-            'Name': '15. Border radius',
-            'Type': 'text'
-        },
         {
             'Key': '$scrollable-scroll-bg',
             'Name': '10. Scroll bar background color',
             'Type': 'color'
         },
+        {
+            'Key': '$scheduler-border-radius',
+            'Name': '15. Border radius',
+            'Type': 'text'
+        },
         {
             'Key': '$selectbox-list-bg',
             'Name': '10. Item background color',
@@ -4965,7 +4965,7 @@ exports.metadata = {
         }
     ]
 };
-exports.version = '25.2.5';
+exports.version = '25.2.6';
 exports.browsersList = [
     'last 2 Chrome versions',
     'last 2 Firefox versions',

package/data/scss/widgets/base/dataGrid/_common.scss

@@ -12,11 +12,6 @@
   white-space: normal;
 }
 
-.dx-hidden.dx-group-cell {
-  display: table-cell !important; // stylelint-disable-line declaration-no-important
-  font-size: 0 !important; // stylelint-disable-line declaration-no-important
-}
-
 @mixin dx-group-panel-item() {
   display: inline-block;
   min-width: 30px;
@@ -49,28 +44,10 @@
 }
 
 .dx-datagrid-rowsview {
-  .dx-row.dx-group-row {
-    td {
-      border-top: 1px solid;
-      border-bottom: 1px solid;
-    }
-  }
-
-  .dx-row.dx-group-row:first-child {
-    td {
-      border-top: none;
-    }
-  }
-
   .dx-group-row {
     &:focus {
       outline: 0;
     }
-
-    &.dx-row > td {
-      border-left-color: transparent;
-      border-right-color: transparent;
-    }
   }
 
   .dx-adaptive-detail-row {
@@ -98,13 +75,6 @@
     @include flip-horizontally();
   }
 
-  .dx-datagrid-content .dx-datagrid-table {
-    .dx-group-row.dx-row.dx-column-lines > td {
-      border-left: none;
-      border-right: none;
-    }
-  }
-
   .dx-datagrid-group-panel {
     .dx-group-panel-item,
     .dx-block-separator {

package/data/scss/widgets/base/dataGrid/_index.scss

@@ -16,6 +16,13 @@ $datagrid-text-stub-background-image-path: null !default;
 @use "../icon_fonts" as *;
 @use "./common";
 @use "./variables" as *;
+@use 'layout/cell' with (
+  $datagrid-border: $datagrid-border,
+  $datagrid-border-color: $datagrid-border-color,
+  $datagrid-base-background-color: $datagrid-base-background-color,
+  $datagrid-row-error-color: $datagrid-row-error-color,
+  $datagrid-focused-border-color: $datagrid-focused-border-color,
+);
 
 .dx-datagrid-borders {
   > .dx-datagrid-headers,
@@ -108,21 +115,15 @@ $datagrid-text-stub-background-image-path: null !default;
   }
 
   .dx-datagrid-headers {
-    .dx-header-row > td,
     .dx-header-filter {
       outline: none;
     }
 
     &.dx-state-focused .dx-header-row {
-      td:focus,
       td .dx-header-filter:focus {
         outline: 2px solid $datagrid-focused-border-color;
         outline-offset: 2px;
       }
-
-      td:focus {
-        outline-offset: -2px;
-      }
     }
   }
 
@@ -151,25 +152,6 @@ $datagrid-text-stub-background-image-path: null !default;
     }
   }
 
-  .dx-datagrid-rowsview .dx-data-row,
-  .dx-datagrid-rowsview .dx-freespace-row,
-  .dx-datagrid-rowsview .dx-virtual-row,
-  .dx-datagrid-rowsview .dx-header-row,
-  .dx-datagrid-headers .dx-row {
-    td.dx-pointer-events-none {
-      border-left: 2px solid $datagrid-border-color;
-      border-right: 2px solid $datagrid-border-color;
-
-      &.dx-first-cell {
-        border-left: none;
-      }
-
-      &.dx-last-cell {
-        border-right: none;
-      }
-    }
-  }
-
   .dx-datagrid-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
       outline: 2px solid $datagrid-focused-border-color;
@@ -188,10 +170,6 @@ $datagrid-text-stub-background-image-path: null !default;
     }
 
     .dx-virtual-row > td {
-      &:not(.dx-datagrid-sticky-column, .dx-datagrid-sticky-column-left, .dx-datagrid-sticky-column-right) {
-        position: relative;
-      }
-
       &:not(.dx-datagrid-group-space)::before {
         display: block;
         height: 100%;
@@ -208,17 +186,9 @@ $datagrid-text-stub-background-image-path: null !default;
 
   .dx-datagrid-total-footer {
     .dx-row.dx-footer-row {
-      td.dx-command-expand {
-        &.dx-datagrid-sticky-column, &.dx-datagrid-sticky-column-left, &.dx-datagrid-sticky-column-right {
-          background-color: $datagrid-base-background-color;
-        }
-      }
-
       .dx-datagrid-sticky-column,
       .dx-datagrid-sticky-column-left,
       .dx-datagrid-sticky-column-right {
-        padding-inline: 0;
-
         .dx-datagrid-summary-item {
           padding-inline: $datagrid-cell-padding;
         }
@@ -231,11 +201,6 @@ $datagrid-text-stub-background-image-path: null !default;
   }
 
   .dx-error-row {
-    td {
-      color: $datagrid-row-error-color;
-      padding: 0;
-    }
-
     .dx-error-message {
       @include dx-datagrid-error-message();
     }
@@ -247,44 +212,15 @@ $datagrid-text-stub-background-image-path: null !default;
     }
   }
 
-  .dx-column-lines > td {
-    &:first-child {
-      border-left: none;
-    }
-
-    &:last-child {
-      border-right: none;
-    }
-  }
-
   .dx-command-drag .dx-datagrid-drag-icon {
     @include dx-icon(dragvertical);
   }
 
   .dx-datagrid-sticky-columns {
-    .dx-column-lines > td {
-      border-right: none;
-    }
-
-    .dx-datagrid-content .dx-datagrid-table .dx-row {
-      &.dx-column-lines > td.dx-datagrid-first-header,
-      .dx-datagrid-column-no-border {
-        border-left: none;
-      }
-    }
-
     .dx-datagrid-content.dx-sortable {
       overflow: visible;
     }
   }
-
-  .dx-datagrid-sticky-column, .dx-datagrid-sticky-column-left, .dx-datagrid-sticky-column-right {
-    background-color: $datagrid-base-background-color;
-  }
-}
-
-.dx-header-multi-row.dx-datagrid-sticky-columns .dx-column-lines > td:first-child {
-  border-left: $datagrid-border;
 }
 
 .dx-datagrid-filter-panel {
@@ -332,25 +268,6 @@ $datagrid-text-stub-background-image-path: null !default;
 
 .dx-rtl {
   .dx-datagrid {
-    .dx-datagrid-rowsview .dx-data-row,
-    .dx-datagrid-rowsview .dx-freespace-row,
-    .dx-datagrid-rowsview .dx-virtual-row,
-    .dx-datagrid-rowsview .dx-header-row,
-    .dx-datagrid-headers .dx-row {
-      td.dx-pointer-events-none {
-        border-left: 2px solid $datagrid-border-color;
-        border-right: 2px solid $datagrid-border-color;
-
-        &.dx-first-cell {
-          border-right: none;
-        }
-
-        &.dx-last-cell {
-          border-left: none;
-        }
-      }
-    }
-
     .dx-datagrid-rowsview {
       .dx-virtual-row > td {
         &::before {
@@ -362,51 +279,6 @@ $datagrid-text-stub-background-image-path: null !default;
         }
       }
     }
-
-    .dx-column-lines > td {
-      &:first-child {
-        border-right: none;
-        border-left: $datagrid-border;
-      }
-
-      &:last-child {
-        border-left: none;
-      }
-    }
-
-    .dx-datagrid-sticky-columns {
-      .dx-column-lines {
-        & > td {
-          border-left: none;
-        }
-
-        &:not(.dx-datagrid-group-footer) > td {
-          border-right: $datagrid-border;
-
-          &:first-child {
-            border-right: none;
-          }
-        }
-      }
-
-      .dx-datagrid-content .dx-datagrid-table .dx-row {
-        &.dx-column-lines > td.dx-datagrid-first-header,
-        .dx-datagrid-column-no-border {
-          border-right: none;
-
-          &.dx-datagrid-sticky-column-border-left {
-            border-left: 2px solid $datagrid-border-color;
-          }
-        }
-      }
-    }
-  }
-
-  .dx-header-multi-row.dx-datagrid-sticky-columns .dx-datagrid-table {
-    .dx-column-lines > td:first-child {
-      border-left: none;
-      border-right: $datagrid-border;
-    }
   }
 
   .dx-datagrid-form-buttons-container {
@@ -419,20 +291,6 @@ $datagrid-text-stub-background-image-path: null !default;
   }
 }
 
-.dx-datagrid, .dx-rtl .dx-datagrid {
-  .dx-datagrid-sticky-columns .dx-datagrid-table {
-    .dx-row {
-      td.dx-datagrid-sticky-column-border-right {
-        border-right: 2px solid $datagrid-border-color;
-      }
-
-      td.dx-datagrid-sticky-column-border-left {
-        border-left: 2px solid $datagrid-border-color;
-      }
-    }
-  }
-}
-
 .dx-datagrid-cell-updated-animation {
   animation: dx-datagrid-highlight-change 1s;
 }

package/data/scss/widgets/base/dataGrid/layout/cell.scss

@@ -0,0 +1,286 @@
+
+
+$datagrid-border: null !default;
+$datagrid-border-color: null !default;
+$datagrid-base-background-color: null !default;
+$datagrid-row-error-color: null !default;
+$datagrid-focused-border-color: null !default;
+
+// #region position & z-index
+
+// (0,4,1)
+.dx-datagrid .dx-datagrid-rowsview .dx-virtual-row > td:not(.dx-datagrid-sticky-column, .dx-datagrid-sticky-column-left, .dx-datagrid-sticky-column-right) {
+  position: relative;
+}
+
+// #endregion
+
+// #region border
+
+// (0,3,1)
+.dx-datagrid .dx-column-lines > td:first-child {
+  border-left: none;
+}
+
+// (0,3,1)
+.dx-datagrid .dx-column-lines > td:last-child {
+  border-right: none;
+}
+
+// (0,3,1)
+.dx-datagrid .dx-datagrid-sticky-columns .dx-column-lines > td {
+  border-right: none;
+}
+
+// (0,3,1)
+.dx-datagrid-rowsview .dx-row.dx-group-row td {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+}
+
+// (0,3,1)
+.dx-datagrid-rowsview .dx-group-row.dx-row > td {
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+
+// (0,4,1)
+.dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none,
+.dx-datagrid .dx-datagrid-rowsview .dx-freespace-row td.dx-pointer-events-none,
+.dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none,
+.dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
+.dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none {
+  border-left: 2px solid;
+  border-left-color: $datagrid-border-color;
+  border-right: 2px solid;
+  border-right-color: $datagrid-border-color;
+}
+
+// (0,4,1)
+.dx-header-multi-row.dx-datagrid-sticky-columns .dx-column-lines > td:first-child {
+  border-left: $datagrid-border;
+  border-left-color: $datagrid-border-color;
+}
+
+// (0,4,1)
+.dx-datagrid-rowsview .dx-row.dx-group-row:first-child td {
+  border-top: none;
+}
+
+// (0,5,1)
+.dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none.dx-first-cell,
+.dx-datagrid .dx-datagrid-rowsview .dx-freespace-row td.dx-pointer-events-none.dx-first-cell,
+.dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none.dx-first-cell,
+.dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none.dx-first-cell,
+.dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none.dx-first-cell {
+  border-left: none;
+}
+
+// (0,5,1)
+.dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none.dx-last-cell,
+.dx-datagrid .dx-datagrid-rowsview .dx-freespace-row td.dx-pointer-events-none.dx-last-cell,
+.dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none.dx-last-cell,
+.dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none.dx-last-cell,
+.dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none.dx-last-cell {
+  border-right: none;
+}
+
+// (0,5,1)
+.dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-right {
+  border-right: 2px solid;
+  border-right-color: $datagrid-border-color;
+}
+
+// (0,5,1)
+.dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-left {
+  border-left: 2px solid;
+  border-left-color: $datagrid-border-color;
+}
+
+// (0,6,0)
+.dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row .dx-datagrid-column-no-border {
+  border-left: none;
+}
+
+// (0,7,1)
+.dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row.dx-column-lines > td.dx-datagrid-first-header {
+  border-left: none;
+}
+
+// RTL
+
+// (0,4,1)
+.dx-rtl .dx-datagrid .dx-column-lines > td:first-child {
+  border-right: none;
+  border-left: $datagrid-border;
+  border-left-color: $datagrid-border-color;
+}
+
+// (0,4,1)
+.dx-rtl .dx-datagrid .dx-column-lines > td:last-child {
+  border-left: none;
+}
+
+// (0,4,1)
+.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-column-lines > td {
+  border-left: none;
+}
+
+// (0,5,1)
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none,
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-freespace-row td.dx-pointer-events-none,
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none,
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
+.dx-rtl .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none {
+  border-left: 2px solid;
+  border-left-color: $datagrid-border-color;
+  border-right: 2px solid;
+  border-right-color: $datagrid-border-color;
+}
+
+// (0,5,1)
+.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-column-lines:not(.dx-datagrid-group-footer) > td {
+  border-right: $datagrid-border;
+  border-right-color: $datagrid-border-color;
+}
+
+// (0,6,1)
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none.dx-first-cell,
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-freespace-row td.dx-pointer-events-none.dx-first-cell,
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none.dx-first-cell,
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none.dx-first-cell,
+.dx-rtl .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none.dx-first-cell {
+  border-right: none;
+}
+
+// (0,6,1)
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none.dx-last-cell,
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-freespace-row td.dx-pointer-events-none.dx-last-cell,
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none.dx-last-cell,
+.dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none.dx-last-cell,
+.dx-rtl .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none.dx-last-cell {
+  border-left: none;
+}
+
+// (0,6,1)
+.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-column-lines:not(.dx-datagrid-group-footer) > td:first-child {
+  border-right: none;
+}
+
+// (0,6,1)
+.dx-rtl .dx-header-multi-row.dx-datagrid-sticky-columns .dx-datagrid-table .dx-column-lines > td:first-child {
+  border-left: none;
+  border-right: $datagrid-border;
+  border-right-color: $datagrid-border-color;
+}
+
+// (0,6,1)
+.dx-rtl .dx-datagrid-content .dx-datagrid-table .dx-group-row.dx-row.dx-column-lines > td {
+  border-left: none;
+  border-right: none;
+}
+
+// (0,6,1)
+.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-right {
+  border-right: 2px solid;
+  border-right-color: $datagrid-border-color;
+}
+
+// (0,6,1)
+.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-left {
+  border-left: 2px solid;
+  border-left-color: $datagrid-border-color;
+}
+
+// (0,7,0)
+.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row .dx-datagrid-column-no-border {
+  border-right: none;
+}
+
+// (0,8,0)
+.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row .dx-datagrid-column-no-border.dx-datagrid-sticky-column-border-left {
+  border-left: 2px solid;
+  border-left-color: $datagrid-border-color;
+}
+
+// (0,8,1)
+.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row.dx-column-lines > td.dx-datagrid-first-header {
+  border-right: none;
+}
+
+// (0,9,1)
+.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row.dx-column-lines > td.dx-datagrid-first-header.dx-datagrid-sticky-column-border-left {
+  border-left: 2px solid;
+  border-left-color: $datagrid-border-color;
+}
+
+// #endregion
+
+// #region padding
+
+// (0,2,1)
+.dx-datagrid .dx-error-row td {
+  padding: 0;
+}
+
+// (0,5,0)
+.dx-datagrid .dx-datagrid-total-footer .dx-row.dx-footer-row .dx-datagrid-sticky-column,
+.dx-datagrid .dx-datagrid-total-footer .dx-row.dx-footer-row .dx-datagrid-sticky-column-left,
+.dx-datagrid .dx-datagrid-total-footer .dx-row.dx-footer-row .dx-datagrid-sticky-column-right {
+  padding-inline: 0;
+}
+
+// #endregion
+
+// #region background
+
+// (0,2,0)
+.dx-datagrid .dx-datagrid-sticky-column,
+.dx-datagrid .dx-datagrid-sticky-column-left,
+.dx-datagrid .dx-datagrid-sticky-column-right {
+  background-color: $datagrid-base-background-color;
+}
+
+// (0,6,1)
+.dx-datagrid .dx-datagrid-total-footer .dx-row.dx-footer-row td.dx-command-expand.dx-datagrid-sticky-column,
+.dx-datagrid .dx-datagrid-total-footer .dx-row.dx-footer-row td.dx-command-expand.dx-datagrid-sticky-column-left,
+.dx-datagrid .dx-datagrid-total-footer .dx-row.dx-footer-row td.dx-command-expand.dx-datagrid-sticky-column-right {
+  background-color: $datagrid-base-background-color;
+}
+
+// #endregion
+
+// #region typography
+
+// (0,2,1)
+.dx-datagrid .dx-error-row td {
+  color: $datagrid-row-error-color;
+}
+
+// #endregion
+
+// #region outline
+
+// (0,3,1)
+.dx-datagrid .dx-datagrid-headers .dx-header-row > td {
+  outline: none;
+}
+
+// (0,5,1)
+.dx-datagrid .dx-datagrid-headers.dx-state-focused .dx-header-row td:focus {
+  outline: 2px solid;
+  outline-color: $datagrid-focused-border-color;
+  outline-offset: -2px;
+}
+
+// #endregion
+
+// #region other
+
+// (0,2,0)
+.dx-hidden.dx-group-cell {
+  display: table-cell !important; // stylelint-disable-line declaration-no-important
+  font-size: 0 !important; // stylelint-disable-line declaration-no-important
+}
+
+// #endregion