devextreme-themebuilder 25.1.2-beta → 25.1.3

package/data/scss/widgets/base/cardView/header_panel/item/_index.scss

@@ -4,36 +4,108 @@
 .dx-cardview-header-item {
   display: flex;
   align-items: center;
-  padding: ($cardview-header-item-padding-vertical - $cardview-header-item-border-width) $cardview-header-item-padding-horizontal;
-  min-width: fit-content;
+  padding: $cardview-header-panel__item-padding-vertical $cardview-header-panel__item-padding-horizontal;
   user-select: none;
-  gap: $cardview-header-item-content-gap;
-  border: solid $cardview-header-item-border-width $cardview-header-item-border-color;
-  border-radius: $cardview-header-item-border-radius;
-  background-color: $cardview-header-item-background-color;
-  line-height: $cardview-header-item-line-height;
+  gap: 4px;
+  border: solid $cardview-header-panel__item-border-width;
+  border-radius: $cardview-header-panel__item-border-radius;
+  line-height: $cardview-header-panel__item-line-height;
   cursor: pointer;
 
+  .dx-icon {
+    font-size: $cardview-header-panel__item__icon-size;
+    color: $cardview-header-panel__item__icon-color;
+  }
+
+  background-color: $cardview-header-panel__item-bg-color;
+  border-color: $cardview-header-panel__item-border-color;
+  color: $cardview-header-panel__item-text-color;
+  font-weight: $cardview-header-panel__item-text-weight;
+
+  .dx-header-filter-icon--selected {
+    color: $cardview-header-panel__item__header-filter-icon--selected-color;
+  }
+
+  .dx-cardview-header-item-sorting-order {
+    color: $cardview-header-panel__item__sort-index-text-color;
+    font-weight: $cardview-header-panel__item__sort-index-text-weight;
+  }
+
   &:hover {
-    background-color: $cardview-header-item-hovered-background-color;
-    border: solid $cardview-header-item-border-width $cardview-header-item-hovered-border-color;
+    background-color: $cardview-header-panel__item--hovered-bg-color;
+    border-color: $cardview-header-panel__item--hovered-border-color;
+    color: $cardview-header-panel__item--hovered-text-color;
+    font-weight: $cardview-header-panel__item--hovered-text-weight;
+
+    .dx-icon {
+      color: $cardview-header-panel__item--hovered__icon-color;
+    }
+
+    .dx-header-filter-icon--selected {
+      color: $cardview-header-panel__item--hovered__header-filter-icon--selected-color;
+    }
+
+    .dx-cardview-header-item-sorting-order {
+      color: $cardview-header-panel__item--hovered__sort-index-text-color;
+      font-weight: $cardview-header-panel__item--hovered__sort-index-text-weight;
+    }
   }
 
-  .dx-icon-cursorprohibition {
-    color: $cardview-header-item-prohibition-icon-color;
+  &:focus-visible {
+    outline: 2px $cardview-header-panel__item--focused-outline-color solid;
+    outline-offset: -2px;
   }
 
-  .dx-icon {
-    font-size: $cardview-header-item-icon-size;
+  &.dx-sortable-source {
+    opacity: 1.0;
+    background-color: $cardview-header-panel__item--disabled-bg-color;
+    border-color: $cardview-header-panel__item--disabled-border-color;
+    color: $cardview-header-panel__item--disabled-text-color;
+    font-weight: $cardview-header-panel__item--disabled-text-weight;
+
+    .dx-icon {
+      color: $cardview-header-panel__item--disabled__icon-color;
+    }
+
+    .dx-header-filter-icon--selected {
+      color: $cardview-header-panel__item--disabled__header-filter-icon--selected-color;
+    }
+
+    .dx-cardview-header-item-sorting-order {
+      color: $cardview-header-panel__item--disabled__sort-index-text-color;
+      font-weight: $cardview-header-panel__item--disabled__sort-index-text-weight;
+    }
+  }
+
+  .dx-sortable-dragging > & {
+    background-color: $cardview-header-panel__item--dragged-bg-color;
+    border-color: $cardview-header-panel__item--dragged-border-color;
+    color: $cardview-header-panel__item--dragged-text-color;
+    font-weight: $cardview-header-panel__item--dragged-text-weight;
+    box-shadow:
+      0 1px 3px $cardview-header-panel__item--dragged-box-shadow-color,
+      0 6px 8px $cardview-header-panel__item--dragged-box-shadow-color;
+
+    .dx-icon {
+      color: $cardview-header-panel__item--dragged__allowance-icon-color;
+    }
+
+    .dx-icon-cursorprohibition {
+      color: $cardview-header-panel__item--dragged__prohibition-icon-color;
+    }
   }
 }
 
+.dx-sortable-dragging.dx-cardview-column-sortable {
+  opacity: 1.0;
+}
+
 .dx-cardview {
   .dx-header-filter-icon {
-    color: $cardview-header-filter-icon-empty-color;
+    color: $cardview-header-panel__item__icon-color;
 
     &--selected {
-      color: $cardview-header-filter-icon-selected-color;
+      color: $cardview-header-panel__item__header-filter-icon--selected-color;
     }
   }
 }

package/data/scss/widgets/base/cardView/header_panel/item/_variables.scss

@@ -1,18 +1,44 @@
-$cardview-header-item-background-color: null !default;
-$cardview-header-item-border-color: null !default;
+$cardview-header-panel__item-border-radius: null !default;
+$cardview-header-panel__item-padding-horizontal: null !default;
+$cardview-header-panel__item-padding-vertical: null !default;
+$cardview-header-panel__item-line-height: null !default;
 
-$cardview-header-item-hovered-background-color: null !default;
-$cardview-header-item-hovered-border-color: null !default;
+$cardview-header-panel__item-bg-color: null !default;
+$cardview-header-panel__item-border-color: null !default;
+$cardview-header-panel__item-border-width: null !default;
+$cardview-header-panel__item-text-color: null !default;
+$cardview-header-panel__item-text-weight: null !default;
+$cardview-header-panel__item__icon-color: null !default;
+$cardview-header-panel__item__icon-size: null !default;
+$cardview-header-panel__item__header-filter-icon--selected-color: null !default;
+$cardview-header-panel__item__sort-index-text-color: null !default;
+$cardview-header-panel__item__sort-index-text-weight: null !default;
 
-$cardview-header-item-border-width: null !default;
-$cardview-header-item-border-radius: null !default;
-$cardview-header-item-padding-horizontal: null !default;
-$cardview-header-item-padding-vertical: null !default;
+$cardview-header-panel__item--focused-outline-color: null !default;
 
-$cardview-header-item-content-gap: 4px !default;
-$cardview-header-item-line-height: null !default;
-$cardview-header-item-icon-size: null !default;
-$cardview-header-filter-icon-empty-color: null !default;
-$cardview-header-filter-icon-selected-color: null !default;
+$cardview-header-panel__item--hovered-bg-color: null !default;
+$cardview-header-panel__item--hovered-border-color: null !default;
+$cardview-header-panel__item--hovered-text-color: null !default;
+$cardview-header-panel__item--hovered-text-weight: null !default;
+$cardview-header-panel__item--hovered__icon-color: null !default;
+$cardview-header-panel__item--hovered__header-filter-icon--selected-color: null !default;
+$cardview-header-panel__item--hovered__sort-index-text-color: null !default;
+$cardview-header-panel__item--hovered__sort-index-text-weight: null !default;
+
+$cardview-header-panel__item--disabled-bg-color: null !default;
+$cardview-header-panel__item--disabled-border-color: null !default;
+$cardview-header-panel__item--disabled-text-color: null !default;
+$cardview-header-panel__item--disabled-text-weight: null !default;
+$cardview-header-panel__item--disabled__icon-color: null !default;
+$cardview-header-panel__item--disabled__header-filter-icon--selected-color: null !default;
+$cardview-header-panel__item--disabled__sort-index-text-color: null !default;
+$cardview-header-panel__item--disabled__sort-index-text-weight: null !default;
+
+$cardview-header-panel__item--dragged-bg-color: null !default;
+$cardview-header-panel__item--dragged-border-color: null !default;
+$cardview-header-panel__item--dragged-text-color: null !default;
+$cardview-header-panel__item--dragged-text-weight: null !default;
+$cardview-header-panel__item--dragged__allowance-icon-color: null !default;
+$cardview-header-panel__item--dragged__prohibition-icon-color: null !default;
+$cardview-header-panel__item--dragged-box-shadow-color: null !default;
 
-$cardview-header-item-prohibition-icon-color: null;

package/data/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss

@@ -40,5 +40,5 @@
 }
 
 .dx-chat-messagegroup-alignment-end {
-  justify-items: end;
+  justify-items: flex-end;
 }

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

@@ -46,12 +46,17 @@ $datagrid-text-stub-background-image-path: null !default;
   border-color: $datagrid-drag-header-border-color;
 }
 
-@mixin dx-datagrid-error-message() {
-  background-color: $datagrid-row-error-bg;
+@mixin dx-datagrid-error-popup() {
   white-space: normal;
   word-wrap: break-word;
 }
 
+@mixin dx-datagrid-error-message() {
+  background-color: $datagrid-row-error-bg;
+
+  @include dx-datagrid-error-popup();
+}
+
 .dx-datagrid {
   color: $datagrid-base-color;
 
@@ -215,6 +220,12 @@ $datagrid-text-stub-background-image-path: null !default;
     }
   }
 
+  .dx-invalid-message {
+    .dx-overlay-content {
+      @include dx-datagrid-error-popup();
+    }
+  }
+
   .dx-column-lines > td {
     &:first-child {
       border-left: none;
@@ -388,13 +399,15 @@ $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;
-    }
+  .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;
+      td.dx-datagrid-sticky-column-border-left {
+        border-left: 2px solid $datagrid-border-color;
+      }
     }
   }
 }

package/data/scss/widgets/base/informer/_mixins.scss

@@ -1,8 +1,10 @@
 @use "../icons" as *;
 
 @mixin informer(
-  $color,
-  $background-color,
+  $error-color,
+  $error-background-color,
+  $info-color,
+  $info-background-color,
   $border-radius,
   $icon-size,
   $padding-inline,
@@ -10,17 +12,31 @@
   $column-gap,
 ) {
   .dx-informer {
-    color: $color;
     padding-inline: $padding-inline;
     padding-block: $padding-block;
     column-gap: $column-gap;
   }
 
   .dx-informer-bg {
-    background-color: $background-color;
     border-radius: $border-radius;
   }
 
+  .dx-informer-error {
+    color: $error-color;
+
+    &.dx-informer-bg {
+      background-color: $error-background-color;
+    }
+  }
+
+  .dx-informer-info {
+    color: $info-color;
+
+    &.dx-informer-bg {
+      background-color: $info-background-color;
+    }
+  }
+
   .dx-informer-icon {
     & * {
       @include dx-icon-sizing($icon-size);

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

@@ -131,6 +131,8 @@ $pivotgrid-expand-icon-text-offset: 0;
       margin-right: 10px;
       float: right;
       display: inline-block;
+      position: relative;
+      z-index: 1;
 
       .dx-button {
         margin-top: $pivotgrid-button-top-padding;

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

@@ -26,7 +26,6 @@
 
   &.dx-scrollable-wrapper > .dx-scrollable-container,
   > div.dx-scrollable-wrapper > .dx-scrollable-container {
-    -webkit-overflow-scrolling: touch;
     position: relative;
     height: 100%;
   }