devextreme-themebuilder 25.1.1-alpha → 25.1.2-beta

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

@@ -4,7 +4,9 @@
 @use "layout/chat-header" as *;
 @use "layout/chat-alertlist" as *;
 @use "layout/chat-messagebox" as *;
+@use "layout/chat-messagebox-editing-preview" as *;
 @use "layout/chat-messagebubble" as *;
+@use "layout/chat-confirmationpopup" as *;
 @use "layout/chat-messagegroup" as *;
 @use "layout/chat-messagelist" as *;
 @use "layout/chat-typingindicator" as *;

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

@@ -3,7 +3,9 @@
 @import 'layout/chat-alertlist/mixins';
 @import 'layout/chat-header/mixins';
 @import 'layout/chat-messagebox/mixins';
+@import 'layout/chat-messagebox-editing-preview/mixins';
 @import 'layout/chat-messagebubble/mixins';
 @import 'layout/chat-messagegroup/mixins';
 @import 'layout/chat-messagelist/mixins';
 @import 'layout/chat-typingindicator/mixins';
+@import 'layout/chat-confirmationpopup/mixins';

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

@@ -10,3 +10,23 @@
     opacity: 0.5;
   }
 }
+
+@keyframes dx-chat-animation-fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dx-chat-animation-fadeout {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

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

@@ -2,9 +2,3 @@
   display: flex;
   flex-direction: column;
 }
-
-.dx-chat-alertlist-error {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}

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

@@ -6,8 +6,6 @@
   $padding-inline,
   $error-padding-block,
   $row-gap,
-  $icon-size,
-  $content-column-gap,
 ) {
   .dx-chat-alertlist {
     padding-block: $padding-block;
@@ -21,13 +19,9 @@
   }
 
   .dx-chat-alertlist-error {
-    color: $error-color;
-    column-gap: $content-column-gap;
-    padding-block: $error-padding-block;
-  }
-
-  .dx-chat-alertlist-error-icon {
-    @include dx-icon(errorcircle);
-    @include dx-icon-sizing($icon-size);
+    &.dx-informer {
+      color: $error-color;
+      padding-block: $error-padding-block;
+    }
   }
 }

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

@@ -0,0 +1,30 @@
+.dx-chat-confirmation-popup-wrapper {
+  .dx-toolbar-items-container {
+    display: flex;
+    width: 100%;
+
+    .dx-toolbar-item {
+      flex-grow: 1;
+    }
+
+    .dx-button {
+      width: 100%;
+    }
+  }
+
+  .dx-toolbar {
+    &.dx-popup-bottom {
+      .dx-toolbar-before {
+        position: unset;
+        flex-grow: 1;
+        padding-inline-end: 0;
+      }
+
+      .dx-toolbar-after {
+        position: unset;
+        flex-grow: 1;
+        padding-inline-start: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+@mixin chat-confirmation-popup(
+  $border-radius,
+  $content-padding-bottom,
+  $toolbar-padding-block,
+  $toolbar-padding-inline,
+  $toolbar-gap
+) {
+  .dx-chat-confirmation-popup-wrapper {
+    border-radius: $border-radius;
+
+    .dx-popup-content {
+      padding-bottom: $content-padding-bottom;
+    }
+
+    .dx-popup-bottom.dx-toolbar {
+      padding-block: $toolbar-padding-block;
+      padding-inline: $toolbar-padding-inline;
+    }
+
+    .dx-toolbar-items-container {
+      gap: $toolbar-gap;
+    }
+  }
+}

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

@@ -1,10 +1,15 @@
 .dx-chat-messagebox {
   display: flex;
-  align-items: flex-end;
+  flex-direction: column;
   border-top-width: 1px;
   border-top-style: solid;
 }
 
+.dx-chat-messagebox-input-container {
+  display: flex;
+  align-items: flex-end;
+}
+
 .dx-chat-messagebox-textarea {
   flex-grow: 1;
 }

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

@@ -8,6 +8,10 @@
   .dx-chat-messagebox {
     padding: $padding;
     border-top-color: $border-color;
+    gap: $padding;
+  }
+
+  .dx-chat-messagebox-input-container {
     gap: $gap;
   }
 

package/data/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss

@@ -0,0 +1,37 @@
+@use "../chat" as *;
+
+.dx-chat-editing-preview {
+  display: flex;
+  align-items: center;
+  position: relative;
+  animation: dx-chat-animation-fadein 0.25s ease-out;
+
+  &.dx-chat-editing-preview-hiding {
+    animation: dx-chat-animation-fadeout 0.1s ease-out;
+  }
+}
+
+.dx-chat-editing-preview-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: 0;
+}
+
+.dx-chat-editing-preview::before {
+  content: '';
+  height: 100%;
+  border-radius: 999em;
+  position: absolute;
+}
+
+.dx-chat-editing-preview-caption {
+  font-weight: 500;
+}
+
+.dx-chat-editing-preview-text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

package/data/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss

@@ -0,0 +1,33 @@
+@mixin message-editing-preview(
+  $preview-padding,
+  $message-row-gap,
+  $accent-color,
+  $caption-font-size,
+  $padding,
+  $border-width,
+  $cancel-button-color,
+) {
+  .dx-chat-editing-preview::before{
+    width: $border-width;
+    background-color: $accent-color;
+  }
+
+  .dx-chat-editing-preview-content {
+    gap: $message-row-gap;
+    padding-inline-start: $preview-padding + $border-width;
+    padding-inline-end: $preview-padding;
+  }
+
+  .dx-chat-editing-preview-caption {
+    font-size: $caption-font-size;
+    color: $accent-color;
+  }
+
+  .dx-chat-editing-preview-cancel-button {
+    &.dx-button-mode-text {
+      .dx-icon {
+        color: $cancel-button-color;
+      }
+    }
+  }
+}

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

@@ -1,3 +1,8 @@
+$chat-messagebubble-padding-image: 4px !default;
+$chat-messagebubble-border-radius-image: 8px !default;
+$chat-messagebubble-max-width-image: 400px !default;
+$chat-messagebubble-max-height-image: 400px !default;
+
 .dx-chat-messagegroup-content {
   display: flex;
   flex-direction: column;
@@ -7,6 +12,18 @@
   width: auto;
   word-break: break-word;
   white-space: break-spaces;
+
+  &.dx-chat-messagebubble-deleted {
+    .dx-chat-messagebubble-content {
+      display: flex;
+      align-items: center;
+      font-style: italic;
+    }
+  }
+
+  &.dx-has-image {
+    padding: $chat-messagebubble-padding-image;
+  }
 }
 
 .dx-chat-messagegroup-alignment-start {
@@ -32,3 +49,11 @@
     border-end-end-radius: 0;
   }
 }
+
+.dx-chat-messagebubble-image {
+  border-radius: $chat-messagebubble-border-radius-image;
+  max-width: $chat-messagebubble-max-width-image;
+  max-height: $chat-messagebubble-max-height-image;
+  width: 100%;
+  display: block;
+}

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

@@ -6,6 +6,8 @@
   $color-primary,
   $background-color-primary,
   $bubble-container-gap,
+  $bubble-delete-gap,
+  $bubble-delete-icon-size,
 ) {
   .dx-chat-messagegroup-content {
     row-gap: $bubble-container-gap;
@@ -14,6 +16,17 @@
   .dx-chat-messagebubble {
     padding: $padding;
     border-radius: $border-radius;
+
+    &.dx-chat-messagebubble-deleted {
+      .dx-chat-messagebubble-content {
+        gap: $bubble-delete-gap;
+        line-height: $bubble-delete-icon-size;
+
+        .dx-icon {
+          font-size: $bubble-delete-icon-size;
+        }
+      }
+    }
   }
 
   .dx-chat-messagegroup-alignment-start {

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

@@ -1,4 +1,5 @@
 @use "../../../mixins" as *;
+@use "../chat" as *;
 
 .dx-chat-messagegroup {
   display: grid;
@@ -16,6 +17,16 @@
   @include dx-overflow();
 }
 
+.dx-chat-message-edited {
+  display: flex;
+  align-items: center;
+  animation: dx-chat-animation-fadein 0.25s ease-out;
+
+  &.dx-chat-message-edited-hiding {
+    animation: dx-chat-animation-fadeout 0.1s ease-out;
+  }
+}
+
 .dx-chat-messagegroup-time {
   white-space: nowrap;
 }

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/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,29 @@
+@use "../icons" as *;
+
+@mixin informer(
+  $color,
+  $background-color,
+  $border-radius,
+  $icon-size,
+  $padding-inline,
+  $padding-block,
+  $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-icon {
+    & * {
+      @include dx-icon-sizing($icon-size);
+    }
+  }
+}

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/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;
+    }
   }
 }