devextreme-themebuilder 25.1.1-alpha → 25.1.3

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

@@ -1,3 +1,5 @@
+@use "../../../icons" as *;
+
 @mixin chat-messagegroup(
   $messagegroup-gap,
   $messagegroup-start-template,
@@ -6,7 +8,9 @@
   $information-font-size,
   $information-author-name-color,
   $information-timestamp-color,
-  $information-gap
+  $information-gap,
+  $information-icon-size,
+  $information-edited-gap,
 ) {
   .dx-chat-messagegroup {
     row-gap: $messagegroup-gap;
@@ -38,4 +42,15 @@
     font-size: $information-font-size;
     color: $information-author-name-color;
   }
+
+  .dx-chat-message-edited {
+    font-size: $information-font-size;
+    color: $information-author-name-color;
+    column-gap: $information-edited-gap;
+
+    .dx-chat-message-edited-icon {
+      @include dx-icon(edit);
+      @include dx-icon-sizing($information-icon-size);
+    }
+  }
 }

package/data/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss

@@ -8,8 +8,14 @@
   $day-header-font-size,
 ) {
   .dx-chat-messagelist {
-    .dx-scrollable-content {
-      padding-inline: $padding;
+    > .dx-scrollable {
+      > .dx-scrollable-wrapper {
+        > .dx-scrollable-container {
+          > .dx-scrollable-content {
+            padding-inline: $padding;
+          }
+        }
+      }
     }
   }
 
@@ -63,3 +69,29 @@
     color: $messagelist-empty-prompt-color;
   }
 }
+
+@mixin chat-messagelist-contextmenu(
+  $delete-button-color,
+  $delete-button-focused-color,
+  $delete-button-focused-bg,
+) {
+  .dx-messagelist-context-menu-content {
+    .dx-menu-item:has(.dx-icon-trash) {
+      color: $delete-button-color;
+
+      &.dx-state-focused {
+        color: $delete-button-focused-color;
+        background-color: $delete-button-focused-bg;
+      }
+    }
+  }
+
+  .dx-chat-messagelist {
+    .dx-scrollable-container {
+      > .dx-overlay-wrapper {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+}

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/_index.scss

@@ -0,0 +1,25 @@
+.dx-informer {
+  width: 100%;
+  align-items: center;
+  display: flex;
+  word-break: break-word;
+
+  &.dx-informer-alignment-start {
+    justify-content: flex-start;
+    align-self: flex-start;
+  }
+
+  &.dx-informer-alignment-center {
+    justify-content: center;
+    align-self: center;
+  }
+
+  &.dx-informer-alignment-end {
+    justify-content: flex-end;
+    align-self: flex-end;
+  }
+
+  .dx-informer-icon {
+    display: flex;
+  }
+}

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

@@ -0,0 +1,45 @@
+@use "../icons" as *;
+
+@mixin informer(
+  $error-color,
+  $error-background-color,
+  $info-color,
+  $info-background-color,
+  $border-radius,
+  $icon-size,
+  $padding-inline,
+  $padding-block,
+  $column-gap,
+) {
+  .dx-informer {
+    padding-inline: $padding-inline;
+    padding-block: $padding-block;
+    column-gap: $column-gap;
+  }
+
+  .dx-informer-bg {
+    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/scheduler/_common.scss

@@ -90,6 +90,16 @@ $scheduler-popup-scrollable-content-padding: 20px;
   }
 }
 
+.dx-scheduler-view-switcher .dx-toolbar-item-auto-hide {
+  padding: 0;
+}
+
+.dx-toolbar-menu-section .dx-scheduler-view-switcher-dropdown-button,
+.dx-toolbar-menu-section .dx-scheduler-view-switcher-dropdown-button .dx-button-text {
+  width: 100%;
+  text-align: left;
+}
+
 .dx-scheduler-adaptive {
   @media (max-width: 450px) {
     .dx-scheduler-view-switcher-label {

package/data/scss/widgets/base/scheduler/layout/_header.scss

@@ -4,6 +4,7 @@ $arrow-down: "\f016";
   $border,
 ) {
   border: $border;
+  margin-bottom: -1px;
   position: relative;
   z-index: 1;
   width: 100%;
@@ -27,31 +28,24 @@ $arrow-down: "\f016";
 
 @mixin header-sizes(
   $height,
+  $padding,
   $item-padding,
-  $border,
 ) {
+  padding: $padding;
+
   .dx-toolbar {
-    &:not(.dx-toolbar-multiline) {
-      @if $border {
-        height: $height - 2px;
-      } @else {
-        height: $height;
-      }
+    &:not(.dx-toolbar-multiline),
+    &.dx-toolbar-multiline .dx-toolbar-item {
+      height: $height;
     }
 
-    .dx-toolbar-item-content,
-    .dx-toolbar-menu-container {
-      padding: $item-padding;
+    .dx-toolbar-before .dx-toolbar-item-content {
+      padding-right: $item-padding;
     }
 
-    .dx-scheduler-navigator {
-      .dx-scheduler-navigator-caption {
-        min-width: 180px;
-
-        .dx-scheduler-adaptive & {
-          min-width: 140px;
-        }
-      }
+    .dx-toolbar-after .dx-toolbar-item-content,
+    .dx-toolbar-menu-container {
+      padding-left: $item-padding;
     }
   }
 }

package/data/scss/widgets/base/scheduler/views/_index.scss

@@ -162,7 +162,6 @@ $scheduler-month-date-text-padding: 6px;
   overflow: hidden;
   height: 100%;
   width: 100%;
-  border-top: none;
 
   // T656716
   float: left;

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%;
   }

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

@@ -1,4 +1,3 @@
 @import 'layout/stepper/mixins';
 @import 'layout/connector/mixins';
-@import 'layout/step-list/mixins';
 @import 'layout/step/mixins';

package/data/scss/widgets/base/stepper/layout/connector/_index.scss

@@ -1,30 +1,38 @@
 .dx-stepper-connector {
   display: flex;
   position: absolute;
+  align-items: center;
+  pointer-events: none;
+}
+
+.dx-stepper-connector-horizontal {
+  width: 100%;
 
   .dx-stepper-connector-value {
-    transition: flex-grow 0.5s ease-in-out;
+    width: 0;
+    height: 100%;
   }
+}
 
-  &.dx-stepper-connector-horizontal {
-    height: 2px;
-    width: 100%;
-
-    .dx-stepper-connector-value {
-      width: 0;
-      height: 100%;
-    }
-  }
+.dx-stepper-connector-vertical {
+  flex-direction: column;
+  height: 100%;
 
-  &.dx-stepper-connector-vertical {
-    width: 2px;
-    height: 100%;
+  .dx-stepper-connector-container {
     flex-direction: column;
+  }
 
-    .dx-stepper-connector-value {
-      height: 0;
-      width: 100%;
-    }
+  .dx-stepper-connector-value {
+    height: 0;
+    width: 100%;
   }
 }
 
+.dx-stepper-connector-container {
+  display: flex;
+  flex: 1;
+}
+
+.dx-stepper-connector-value {
+  transition: flex-grow 0.5s ease-in-out;
+}

package/data/scss/widgets/base/stepper/layout/connector/_mixins.scss

@@ -1,9 +1,11 @@
 @mixin connector(
   $connector-background-color,
   $background-color,
-  $margin-start,
+  $size,
+  $padding,
+  $thickness,
 ) {
-  .dx-stepper-connector {
+  .dx-stepper-connector-container {
     background-color: $connector-background-color;
   }
 
@@ -12,10 +14,20 @@
   }
 
   .dx-stepper-connector-horizontal {
-    margin-block-start: $margin-start;
+    padding-inline: $padding;
+    height: $size;
+
+    .dx-stepper-connector-container {
+      height: $thickness;
+    }
   }
 
   .dx-stepper-connector-vertical {
-    margin-inline-start: $margin-start;
+    padding-block: $padding;
+    width: $size;
+
+    .dx-stepper-connector-container {
+      width: $thickness;
+    }
   }
 }

package/data/scss/widgets/base/stepper/layout/step/_index.scss

@@ -6,19 +6,6 @@
   &.dx-state-hover {
     cursor: pointer;
   }
-
-  &.dx-step-completed,
-  &.dx-step-selected {
-    .dx-step-text {
-      font-weight: 600;
-    }
-  }
-
-  &.dx-step-selected {
-    .dx-step-label {
-      font-weight: 600;
-    }
-  }
 }
 
 .dx-step-indicator {
@@ -27,10 +14,10 @@
   justify-content: center;
   flex-shrink: 0;
   transition-property: color, background-color, border-color;
-  transition-duration: .4s;
   transition-timing-function: ease-in-out;
   border-style: solid;
   border-radius: 999em;
+  border-width: 1px;
 }
 
 .dx-step-content {
@@ -39,14 +26,14 @@
   flex-direction: column;
 }
 
-.dx-step-label {
+.dx-step-caption {
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.dx-step-title,
+.dx-step-label,
 .dx-step-optional-mark {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -64,7 +51,7 @@
     width: 100%;
   }
 
-  .dx-step-title,
+  .dx-step-label,
   .dx-step-optional-mark {
     text-align: start;
   }