devextreme-themebuilder 25.1.9 → 25.1.10

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

@@ -0,0 +1,402 @@
+
+@use "../../mixins" as *;
+@use '../variables' as *;
+
+@mixin grid-base-cell($widget-name) {
+
+  // #region position & z-index
+
+  // (0,1,0)
+  .dx-cell-modified,
+  .dx-#{$widget-name}-invalid {
+    position: relative;
+  }
+
+  // (0,2,0)
+  .dx-#{$widget-name} .dx-#{$widget-name}-sticky-column,
+  .dx-#{$widget-name} .dx-#{$widget-name}-sticky-column-left,
+  .dx-#{$widget-name} .dx-#{$widget-name}-sticky-column-right {
+    position: sticky;
+  }
+
+  // (0,2,0)
+  .dx-#{$widget-name} .dx-#{$widget-name}-sticky-column,
+  .dx-#{$widget-name} .dx-#{$widget-name}-sticky-column-left {
+    z-index: 2;
+  }
+
+  // (0,2,0)
+  .dx-#{$widget-name} .dx-#{$widget-name}-sticky-column-right {
+    z-index: 3;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-expand {
+    z-index: 3;
+  }
+
+  // (0,6,0)
+  .dx-rtl .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-#{$widget-name}-sticky-column-right.dx-command-expand {
+    z-index: 4;
+  }
+
+  // #endregion
+
+  // #region visibility & pointer-events
+
+  // (0,3,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content-fixed .dx-#{$widget-name}-table td {
+    pointer-events: auto;
+  }
+
+  // (0,5,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content-fixed .dx-#{$widget-name}-table .dx-row td.dx-pointer-events-none {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  // #endregion
+
+  // #region overflow
+
+  // (0,1,1)
+  .dx-header-row > td {
+    overflow: hidden;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name}-rowsview .dx-row > td,
+  .dx-#{$widget-name}-rowsview .dx-row > tr > td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-edit {
+    text-overflow: clip;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row > .dx-master-detail-cell {
+    overflow: visible;
+  }
+
+  // #endregion
+
+  // #region sizing
+
+  // (0,1,0)
+  .dx-command-adaptive {
+    width: $grid-command-adaptive-column-width;
+    min-width: $grid-command-adaptive-column-width;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table:not(.dx-#{$widget-name}-table-fixed) .dx-master-detail-cell {
+    max-width: 0;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-editor-cell {
+    max-width: 0;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-select {
+    width: $grid-command-select-column-width;
+    min-width: $grid-command-select-column-width;
+    max-width: $grid-command-select-column-width;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-edit {
+    width: $grid-command-edit-column-width;
+    min-width: $grid-command-edit-column-width;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-expand {
+    width: $grid-command-expand-column-width;
+    min-width: $grid-command-expand-column-width;
+    max-width: $grid-command-expand-column-width;
+  }
+
+  // (0,5,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-edit.dx-command-edit-with-icons {
+    width: $grid-command-edit-column-with-icons-width;
+    min-width: $grid-command-edit-column-with-icons-width;
+  }
+
+  // (0,6,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content-fixed .dx-#{$widget-name}-table.dx-#{$widget-name}-table-fixed .dx-row td.dx-pointer-events-none {
+    width: auto;
+  }
+
+  // #endregion
+
+  // #region border
+
+  // (0,1,1)
+  .dx-row > td,
+  .dx-row > tr > td {
+    border: none;
+  }
+
+  // (0,3,0)
+  .dx-#{$widget-name} .dx-row .dx-#{$widget-name}-hidden-column {
+    border-right-width: 0;
+    border-left-width: 0;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > .dx-last-data-cell {
+    border-right: none;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > .dx-command-adaptive-hidden {
+    border-left: none;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:first-child,
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-first-child,
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > tr > td:first-child,
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > tr > td.dx-first-child {
+    border-left: 0;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-last-child,
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > tr > td.dx-last-child {
+    border-right: 0;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > tr > td.dx-#{$widget-name}-group-space {
+    border-right: none;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name}-rowsview .dx-row.dx-row-lines:first-child > td,
+  .dx-#{$widget-name}-rowsview .dx-row.dx-row-lines:first-child > tr > td {
+    border-top: none;
+  }
+
+  // (0,4,2)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-group-space + td,
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > tr > td.dx-#{$widget-name}-group-space + td {
+    border-left: none;
+  }
+
+  // (0,5,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content-fixed .dx-#{$widget-name}-table .dx-row td.dx-pointer-events-none {
+    border-top-color: transparent; // T913696
+    border-bottom-color: transparent; // T913696
+  }
+
+  // T745266
+
+  // (0,5,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content-fixed .dx-#{$widget-name}-table .dx-header-row td.dx-pointer-events-none {
+    border-bottom-color: transparent; // T672281
+  }
+
+  // (0,5,1)
+  .dx-rtl .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-group-space {
+    border-left: none;
+  }
+
+  // (0,5,2)
+  .dx-rtl .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-group-space + td {
+    border-right: none;
+  }
+
+  // (0,6,2)
+  .dx-#{$widget-name}-borders > .dx-#{$widget-name}-rowsview.dx-last-row-border tbody:last-child > .dx-data-row:nth-last-child(2) > td {
+    border-bottom-width: 0;
+  }
+
+  // #endregion
+
+  // #region padding
+
+  // (0,1,0)
+  .dx-cell-modified,
+  .dx-#{$widget-name}-invalid {
+    padding: $grid-cell-padding;
+  }
+
+  // (0,2,0)
+  .dx-editor-cell.dx-cell-modified,
+  .dx-editor-cell.dx-#{$widget-name}-invalid {
+    padding: 0;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-row > td,
+  .dx-#{$widget-name} .dx-row > tr > td {
+    padding: $grid-cell-padding;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-total-footer > .dx-#{$widget-name}-content .dx-row > td {
+    padding-top: $grid-total-footer-paddings * 2;
+    padding-bottom: $grid-total-footer-paddings * 2;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name} .dx-#{$widget-name}-rowsview .dx-data-row .dx-command-drag {
+    padding: 0;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-editor-cell {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-select {
+    padding: 0;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-expand {
+    padding: 0;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-adaptive {
+    padding: 0;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name}-rowsview .dx-#{$widget-name}-table .dx-row.dx-freespace-row > td,
+  .dx-#{$widget-name}-rowsview .dx-#{$widget-name}-table .dx-row.dx-virtual-row > td {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // (0,5,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-editor-cell:not(.dx-#{$widget-name}-cell-expandable) {
+    padding-left: 0;
+  }
+
+  // #endregion
+
+  // #region background
+
+  // (0,5,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content-fixed .dx-#{$widget-name}-table .dx-row td.dx-pointer-events-none {
+    background-color: transparent;
+  }
+
+  // (0,5,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-total-footer td:not(.dx-#{$widget-name}-sticky-column):not(.dx-#{$widget-name}-sticky-column-left):not(.dx-#{$widget-name}-sticky-column-right) {
+    background-color: transparent;
+  }
+
+  // #endregion
+
+  // #region typography
+
+  // (0,1,0)
+  .dx-#{$widget-name}-hidden-column {
+    white-space: nowrap;
+  }
+
+  // (0,1,1)
+  .dx-header-row > td {
+    white-space: nowrap;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-edit {
+    white-space: nowrap;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-data-row .dx-command-edit-with-icons {
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  // #endregion
+
+  // #region vertical-align
+
+  // (0,3,1)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td,
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > tr > td {
+    vertical-align: top;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name} .dx-#{$widget-name}-rowsview .dx-data-row .dx-command-drag {
+    vertical-align: middle;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-editor-cell {
+    vertical-align: middle;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-adaptive {
+    vertical-align: middle;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > tr > td.dx-#{$widget-name}-group-space {
+    vertical-align: top;
+  }
+
+  // #endregion
+
+  // #region cursor
+
+  // (0,1,0)
+  .dx-#{$widget-name}-action {
+    cursor: pointer;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name} .dx-#{$widget-name}-rowsview .dx-data-row .dx-command-drag {
+    cursor: move;
+  }
+
+  // (0,4,0)
+  .dx-sortable-dragging .dx-#{$widget-name}-rowsview .dx-data-row .dx-command-drag {
+    cursor: pointer;
+    cursor: grabbing;
+  }
+
+  // #endregion
+
+  // #region outline
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview .dx-data-row > td:focus {
+    outline: 0;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-rowsview .dx-row > .dx-master-detail-cell:focus {
+    outline: 0;
+  }
+
+  // #endregion
+
+  // #region other
+
+  // (0,4,0)
+  .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row .dx-command-expand {
+    @include user-select(none);
+  }
+
+  // #endregion
+}

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

@@ -16,6 +16,13 @@ $base-focus-color: null !default;
 @use "../icon_fonts" as *;
 @use "./common" as *;
 @use "./expandable" as *;
+@use 'layout/cell' with (
+  $treelist-border: $datagrid-border,
+  $treelist-border-color: $datagrid-border-color,
+  $treelist-base-background-color: $datagrid-base-background-color,
+  $treelist-row-error-color: $datagrid-row-error-color,
+  $treelist-focused-border-color: $datagrid-focused-border-color,
+);
 
 $treelist-border: $datagrid-border;
 $treelist-drag-header-border-color: $datagrid-drag-header-border-color;
@@ -64,44 +71,15 @@ $treelist-row-error-color: $datagrid-row-error-color;
 }
 
 .dx-treelist {
-  .dx-column-lines > td {
-    &:first-child {
-      border-left: none;
-    }
-
-    &:last-child {
-      border-right: none;
-    }
-  }
-
   .dx-command-drag .dx-treelist-drag-icon {
     @include dx-icon(dragvertical);
   }
 
   .dx-treelist-sticky-columns {
-    .dx-column-lines > td {
-      border-right: none;
-    }
-
-    .dx-treelist-content .dx-treelist-table .dx-row {
-      &.dx-column-lines > td.dx-treelist-first-header,
-      .dx-treelist-column-no-border {
-        border-left: none;
-      }
-    }
-
     .dx-treelist-content.dx-sortable {
       overflow: visible;
     }
   }
-
-  .dx-treelist-sticky-column, .dx-treelist-sticky-column-left, .dx-treelist-sticky-column-right {
-    background-color: $treelist-base-background-color;
-  }
-}
-
-.dx-header-multi-row.dx-treelist-sticky-columns .dx-column-lines > td:first-child {
-  border-left: $treelist-border;
 }
 
 .dx-treelist-container {
@@ -136,22 +114,14 @@ $treelist-row-error-color: $datagrid-row-error-color;
   }
 
   .dx-treelist-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 $treelist-focused-border-color;
-      }
-
-      td:focus {
-        outline-offset: -2px;
-      }
-
       td .dx-header-filter:focus {
+        outline: 2px solid;
+        outline-color: $treelist-focused-border-color;
         outline-offset: 2px;
       }
     }
@@ -182,25 +152,6 @@ $treelist-row-error-color: $datagrid-row-error-color;
     }
   }
 
-  .dx-treelist-rowsview .dx-data-row,
-  .dx-treelist-rowsview .dx-freespace-row,
-  .dx-datagrid-rowsview .dx-virtual-row,
-  .dx-datagrid-rowsview .dx-header-row,
-  .dx-treelist-headers .dx-row {
-    td.dx-pointer-events-none {
-      border-left: 2px solid $treelist-border-color;
-      border-right: 2px solid $treelist-border-color;
-
-      &.dx-first-cell {
-        border-left: none;
-      }
-
-      &.dx-last-cell {
-        border-right: none;
-      }
-    }
-  }
-
   .dx-treelist-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
       outline: 2px solid $datagrid-focused-border-color;
@@ -219,10 +170,6 @@ $treelist-row-error-color: $datagrid-row-error-color;
     }
 
     .dx-virtual-row > td {
-      &:not(.dx-treelist-sticky-column, .dx-treelist-sticky-column-left, .dx-treelist-sticky-column-right) {
-        position: relative;
-      }
-
       &::before {
         display: block;
         height: 100%;
@@ -242,11 +189,6 @@ $treelist-row-error-color: $datagrid-row-error-color;
   }
 
   .dx-error-row {
-    td {
-      color: $datagrid-row-error-color;
-      padding: 0;
-    }
-
     .dx-error-message {
       @include dx-treelist-error-message();
     }
@@ -302,68 +244,7 @@ $treelist-row-error-color: $datagrid-row-error-color;
 }
 
 .dx-rtl {
-  &.dx-treelist {
-    .dx-column-lines > td {
-      &:first-child {
-        border-right: none;
-        border-left: $treelist-border;
-      }
-
-      &:last-child {
-        border-left: none;
-      }
-    }
-
-    .dx-treelist-sticky-columns {
-      .dx-column-lines > td {
-        border-left: none;
-        border-right: $treelist-border;
-
-        &:first-child {
-          border-right: none;
-        }
-      }
-
-      .dx-treelist-content .dx-treelist-table .dx-row {
-        &.dx-column-lines > td.dx-treelist-first-header,
-        .dx-treelist-column-no-border {
-          border-right: none;
-
-          &.dx-treelist-sticky-column-border-left {
-            border-left: 2px solid $treelist-border-color;
-          }
-        }
-      }
-    }
-  }
-
-  .dx-header-multi-row.dx-treelist-sticky-columns {
-    .dx-column-lines > td:first-child {
-      border-left: none;
-      border-right: $treelist-border;
-    }
-  }
-
   .dx-treelist-container {
-    .dx-treelist-rowsview .dx-data-row,
-    .dx-treelist-rowsview .dx-freespace-row,
-    .dx-datagrid-rowsview .dx-virtual-row,
-    .dx-datagrid-rowsview .dx-header-row,
-    .dx-treelist-headers .dx-row {
-      td.dx-pointer-events-none {
-        border-left: 2px solid $treelist-border-color;
-        border-right: 2px solid $treelist-border-color;
-
-        &.dx-first-cell {
-          border-right: none;
-        }
-
-        &.dx-last-cell {
-          border-left: none;
-        }
-      }
-    }
-
     .dx-treelist-rowsview {
       .dx-virtual-row > td {
         &::before {
@@ -387,16 +268,6 @@ $treelist-row-error-color: $datagrid-row-error-color;
   }
 }
 
-.dx-treelist .dx-treelist-sticky-columns .dx-treelist-table .dx-row {
-  td.dx-treelist-sticky-column-border-right {
-    border-right: 2px solid $treelist-border-color;
-  }
-
-  td.dx-treelist-sticky-column-border-left {
-    border-left: 2px solid $treelist-border-color;
-  }
-}
-
 .dx-treelist-cell-updated-animation {
   animation: dx-treelist-highlight-change 1s;
 }