devextreme-themebuilder 23.2.1-alpha-23255-1813 → 23.2.3

package/data/scss/widgets/base/_form.scss

@@ -6,14 +6,6 @@
     padding-top: 10px;
   }
 
-  .dx-field-item:not(.dx-first-col) {
-    padding-left: 15px;
-  }
-
-  .dx-field-item:not(.dx-last-col) {
-    padding-right: 15px;
-  }
-
   .dx-field-empty-item {
     width: 100%;
   }
@@ -27,10 +19,6 @@
     .dx-form-group .dx-single-column-item-content > .dx-first-row.dx-col-0.dx-field-item {
       padding-top: 0;
     }
-
-    .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item {
-      padding-top: 10px;
-    }
   }
 
   .dx-label-h-align {
@@ -141,12 +129,6 @@
     padding-bottom: 20px;
     margin-top: 6px;
   }
-
-  .dx-form-group {
-    &.dx-form-group-with-caption {
-      padding-left: 20px;
-    }
-  }
 }
 
 .dx-layout-manager-hidden-label {
@@ -161,11 +143,11 @@
 }
 
 .dx-field-item-label-location-left {
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }
 
 .dx-field-item-label-location-right {
-  padding-left: 10px;
+  padding-inline-start: 10px;
 }
 
 .dx-field-item-required,
@@ -182,40 +164,4 @@
   .dx-field-item-optional-mark {
     unicode-bidi: embed;
   }
-
-  .dx-field-item:not(.dx-first-col) {
-    padding-left: 0;
-    padding-right: 15px;
-  }
-
-  .dx-field-item:not(.dx-last-col) {
-    padding-left: 15px;
-    padding-right: 0;
-  }
-
-  .dx-field-item-label-location-left {
-    padding-right: 0;
-    padding-left: 10px;
-  }
-
-  .dx-field-item-label-location-right {
-    padding-left: 0;
-    padding-right: 10px;
-  }
-
-  .dx-layout-manager-one-col {
-    .dx-single-column-item-content > .dx-field-item {
-      padding-right: 0;
-      padding-left: 0;
-    }
-  }
-
-  .dx-form-group-with-caption {
-    .dx-form-group {
-      &.dx-form-group-with-caption {
-        padding-left: 0;
-        padding-right: 20px;
-      }
-    }
-  }
 }

package/data/scss/widgets/base/_gallery.scss

@@ -4,6 +4,13 @@
 .dx-gallery {
   width: 100%;
   height: 100%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+
+  &.dx-gallery-indicator-visible {
+    border-width: 0;
+  }
 
   @include user-select(none);
 

package/data/scss/widgets/base/_gridBase.scss

@@ -227,16 +227,10 @@
     }
 
     &.dx-#{$widget-name}-column-chooser-mode-select {
-      .dx-#{$widget-name}-column-chooser-plain {
-        .dx-treeview-select-all-item {
-          padding-left: 4px;
-        }
-
+      .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list {
         .dx-treeview-node {
-          padding-left: 0;
-
-          .dx-checkbox {
-            left: 4px;
+          .dx-treeview-item {
+            padding-inline-start: 4px;
           }
         }
       }
@@ -745,7 +739,7 @@
         height: 100%;
 
         .dx-menu-item-text,
-        .dx-menu-item-popout {
+        .dx-menu-item-popout-container {
           display: none;
         }
       }

package/data/scss/widgets/base/_htmlEditor.scss

@@ -35,21 +35,11 @@ $transparent-border: 1px solid transparent;
     @include add-indent-styles($counter - 1);
 
     .ql-indent-#{$counter} {
-      padding-left: 3 * $counter * 1em;
-
-      .dx-rtl & {
-        padding-left: 0;
-        padding-right: 3 * $counter * 1em;
-      }
+      padding-inline-start: 3 * $counter * 1em;
     }
 
     li.ql-indent-#{$counter} {
-      padding-left: 3 * $counter + $list-style-outer-width;
-
-      .dx-rtl & {
-        padding-left: 0;
-        padding-right: 3 * $counter + $list-style-outer-width;
-      }
+      padding-inline-start: 3 * $counter + $list-style-outer-width;
     }
   }
 }
@@ -207,17 +197,12 @@ $transparent-border: 1px solid transparent;
 
   ol,
   ul {
-    padding-left: 1.5em;
-
-    .dx-rtl & {
-      padding-left: 0;
-      padding-right: 1.5em;
-    }
+    padding-inline-start: 1.5em;
   }
 
   li {
     list-style-type: none;
-    padding-left: $list-style-outer-width;
+    padding-inline-start: $list-style-outer-width;
     position: relative;
 
     &[data-list="bullet"]::before {
@@ -234,9 +219,9 @@ $transparent-border: 1px solid transparent;
 
     &::before {
       display: inline-block;
-      margin-left: -1 * $list-style-outer-width;
-      margin-right: $list-style-margin;
-      text-align: right;
+      margin-inline-start: -1 * $list-style-outer-width;
+      margin-inline-end: $list-style-margin;
+      text-align: end;
       white-space: nowrap;
       width: $list-style-width;
     }
@@ -251,17 +236,6 @@ $transparent-border: 1px solid transparent;
         visibility: visible;
       }
     }
-
-    .dx-rtl & {
-      padding-left: 0;
-      padding-right: $list-style-outer-width;
-
-      &::before {
-        margin-left: $list-style-margin;
-        margin-right: -1 * $list-style-outer-width;
-        text-align: left;
-      }
-    }
   }
 
   li[data-list="ordered"] {
@@ -276,16 +250,6 @@ $transparent-border: 1px solid transparent;
   @include add-counter($max-indent);
   @include add-indent-styles($max-indent);
 
-  .dx-rtl & li { // stylelint-disable-line no-duplicate-selectors
-    padding-right: $list-style-outer-width;
-
-    &::before { // stylelint-disable-line no-duplicate-selectors
-      margin-left: $list-style-margin;
-      margin-right: -1 * $list-style-outer-width;
-      text-align: left;
-    }
-  }
-
   table { // stylelint-disable-line no-duplicate-selectors
     table-layout: fixed;
     width: 100%;
@@ -357,15 +321,8 @@ $transparent-border: 1px solid transparent;
   // stylelint-enable selector-class-pattern
 
   blockquote {
-    padding-left: 12px;
-    border-left: 4px solid;
-
-    .dx-rtl & {
-      padding-left: 0;
-      padding-right: 12px;
-      border-left: none;
-      border-right: 4px solid;
-    }
+    padding-inline-start: 12px;
+    border-inline-start: 4px solid;
   }
 }
 
@@ -405,11 +362,7 @@ $transparent-border: 1px solid transparent;
 }
 
 .dx-formdialog-field-target .dx-field-item-content {
-  text-align: right;
-
-  .dx-rtl & {
-    text-align: left;
-  }
+  text-align: end;
 }
 
 .dx-color-format,

package/data/scss/widgets/base/_icons.scss

@@ -18,10 +18,15 @@
 .dx-icon-clock,
 .dx-icon-close,
 .dx-icon-comment,
+.dx-icon-dataarea,
+.dx-icon-datapie,
+.dx-icon-datatrending,
+.dx-icon-datausage,
 .dx-icon-doc,
 .dx-icon-download,
 .dx-icon-edit,
 .dx-icon-email,
+.dx-icon-errorcircle,
 .dx-icon-event,
 .dx-icon-eventall,
 .dx-icon-favorites,
@@ -108,14 +113,15 @@
 .dx-icon-removetable,
 .dx-icon-bell,
 .dx-icon-to,
-.dx-icon-task-complete,
-.dx-icon-task-rejected,
-.dx-icon-task-inprogress,
-.dx-icon-task-stop,
-.dx-icon-task-helpneeded,
-.dx-icon-clear-circle,
-.dx-icon-account-box,
-.dx-icon-orders-box {
+.dx-icon-taskcomplete,
+.dx-icon-taskrejected,
+.dx-icon-taskinprogress,
+.dx-icon-taskstop,
+.dx-icon-taskhelpneeded,
+.dx-icon-clearcircle,
+.dx-icon-accountbox,
+.dx-icon-ordersbox,
+.dx-icon-arrowback {
   background-position: 0 0;
   background-repeat: no-repeat;
 }
@@ -267,6 +273,7 @@ $icons: (
     "floppy": "\f073",
     "arrowleft": "\f011",
     "arrowdown": "\f015",
+    "arrowback": "\f15a",
     "arrowright": "\f00e",
     "arrowup": "\f013",
     "spinleft": "\f04f",
@@ -318,9 +325,9 @@ $icons: (
     "exportxlsx": "\f060",
     "exportpdf": "\f061",
     "exportselected": "\f06d",
-    "orders-box": '\f06e',
+    "ordersbox": '\f06e',
     "warning": "\f06b",
-    "task-helpneeded": '\f06f',
+    "taskhelpneeded": '\f06f',
     "more": "\f06c",
     "square": "\f067",
     "clearsquare": "\f068",
@@ -362,7 +369,7 @@ $icons: (
     "mention": "\f090",
     "variable": "\f091",
     "clearformat": "\f092",
-    "account-box": '\f094',
+    "accountbox": '\f094',
     "fullscreen": "\f11a",
     "hierarchy": "\f124",
     "docfile": "\f111",
@@ -427,11 +434,11 @@ $icons: (
     "imgarunlock": "\f157",
     "bell": "\f158",
     "sun": '\f159',
-    "task-complete": '\f15b',
-    "task-rejected": '\f15c',
-    "task-inprogress": '\f15d',
-    "task-stop": '\f15e',
-    "clear-circle": '\f15f',
+    "taskcomplete": '\f15b',
+    "taskrejected": '\f15c',
+    "taskinprogress": '\f15d',
+    "taskstop": '\f15e',
+    "clearcircle": '\f15f',
     "send": '\f160',
     "pinmap": '\f161',
     "photooutline": '\f162',
@@ -446,6 +453,11 @@ $icons: (
     "description": '\f171',
     "belloutline": '\f172',
     "to": '\f173',
+    "errorcircle": '\f174',
+    "datatrending": '\f175',
+    "dataarea": '\f176',
+    "datausage": '\f177',
+    "datapie": '\f178',
 );
 
 // stylelint-enable

package/data/scss/widgets/base/_menu.scss

@@ -17,7 +17,7 @@
 
   .dx-menu-separator {
     display: inline-block;
-    margin: 0 15px 0 0;
+    margin-inline-end: 15px;
   }
 }
 
@@ -29,14 +29,10 @@
   }
 
   .dx-menu-separator {
-    margin: 0 0 15px 0;
+    margin-bottom: 15px;
   }
 }
 
-.dx-rtl.dx-menu {
-  text-align: right;
-}
-
 .dx-context-menu-container-border {
   top: 0;
   right: 0;
@@ -54,14 +50,7 @@
 
 .dx-menu-adaptive-mode {
   .dx-treeview-toggle-item-visibility {
-    left: auto;
-    right: 0;
-
-    @at-root #{selector-append(".dx-rtl", &)},
-    .dx-rtl & {
-      left: 0;
-      right: auto;
-    }
+    order: 3;
   }
 
   .dx-treeview-item {
@@ -72,12 +61,7 @@
     padding: 1px;
 
     .dx-item-content {
-      padding-left: 15px;
-
-      @at-root #{selector-append(".dx-rtl", &)},
-      .dx-rtl & {
-        padding-right: 15px;
-      }
+      padding-inline-start: 15px;
     }
 
     &:last-child {

package/data/scss/widgets/base/_menuBase.scss

@@ -5,8 +5,7 @@
   @include user-select(none);
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  text-align: left;
-
+  text-align: start;
 
   .dx-menu-items-container,
   .dx-menu-item-wrapper {
@@ -35,10 +34,6 @@
     height: 100%;
     width: 100%;
 
-    &.dx-state-disabled {
-      opacity: 0.5;
-    }
-
     .dx-menu-item-content {
       white-space: nowrap;
       height: 100%;
@@ -73,7 +68,7 @@
       .dx-menu-item-popout-container {
         position: absolute;
         top: 0;
-        right: 0;
+        inset-inline-end: 0;
         bottom: 0;
         width: 2em;
 
@@ -85,11 +80,10 @@
   }
 
   &.dx-rtl {
-    text-align: right;
-
-    .dx-menu-item-popout-container {
-      left: 0;
-      right: auto;
+    .dx-menu-item-content {
+      .dx-menu-item-popout {
+        @include flip-horizontally();
+      }
     }
   }
 }

package/data/scss/widgets/base/_tabPanel.scss

@@ -16,6 +16,10 @@
   }
 }
 
+.dx-tabpanel-tab {
+  flex-basis: unset;
+}
+
 .dx-tabpanel-tabs-position-right {
   flex-direction: row-reverse;
   
@@ -36,16 +40,10 @@
   }
 }
 
-.dx-tabpanel-tabs {
+.dx-tabpanel .dx-tabpanel-tabs {
   .dx-tabs {
     height: 100%;
   }
-
-  .dx-tab {
-    flex-basis: unset;
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
 }
 
 .dx-tabpanel-container {

package/data/scss/widgets/base/_tabs.scss

@@ -27,9 +27,21 @@
   &.dx-overflow-hidden {
     overflow: hidden;
   }
+
+  &.dx-tabs-vertical .dx-tabs-wrapper .dx-tab-text {
+    white-space: normal;
+  }
+
+  .dx-tab-text-span,
+  .dx-tab-text-span-pseudo {
+    width: 100%;
+
+    @include dx-overflow();
+  }
 }
 
 .dx-tabs-scrollable {
+  width: 100%;
   overflow: hidden;
 
   .dx-tabs-wrapper {
@@ -59,15 +71,25 @@
   .dx-tab {
     flex-basis: unset;
     flex-grow: 1;
-    min-width: 0;
   }
 }
 
+.dx-tabs:not(.dx-tabs-vertical) .dx-tabs-scrollable .dx-tab {
+  flex-basis: 100%;
+  min-width: max-content;
+}
+
+.dx-tabs:not(.dx-tabs-scrolling-enabled) {
+  min-width: min-content;
+}
+
 .dx-tab {
   position: relative;
   display: inline-flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
+  flex-basis: 100%;
+  min-width: max-content;
   cursor: pointer;
 
   @include dx-tabs-link();
@@ -79,6 +101,7 @@
 }
 
 .dx-tab-content {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -89,13 +112,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
   -webkit-user-drag: none;
-
-  @include dx-overflow();
-}
-
-.dx-tabs-item-badge {
-  display: inline-block;
 }
 
 .dx-tabs-nav-button {
@@ -116,6 +134,10 @@
   flex-direction: column;
   width: auto;
 
+  .dx-tab {
+    min-width: 0;
+  }
+
   .dx-tabs-wrapper {
     flex-direction: column;
     height: auto;
@@ -126,6 +148,13 @@
       transform: rotate(90deg);
     }
   }
+
+  &.dx-tabs-icon-position-start,
+  &.dx-tabs-icon-position-end {
+    .dx-tab {
+      justify-content: flex-start;
+    }
+  }
 }
 
 .dx-tabs-icon-position-end .dx-tab-text {
@@ -133,9 +162,11 @@
 }
 
 .dx-tabs-icon-position-top .dx-tab-text {
+  text-align: center;
   flex-direction: column;
 }
 
 .dx-tabs-icon-position-bottom .dx-tab-text {
+  text-align: center;
   flex-direction: column-reverse;
 }

package/data/scss/widgets/base/_toast.scss

@@ -46,7 +46,6 @@
 .dx-toast-stack {
   position: fixed;
   display: flex;
-  overflow: hidden;
   gap: 3px;
   align-items: center;
   z-index: 9500;

package/data/scss/widgets/base/_validation.scss

@@ -1,4 +1,5 @@
-@mixin dx-base-validation($summary-color, $message-color, $message-bg-color) {
+
+@mixin dx-base-validation($summary-color, $message-color, $message-bg-color, $border-radius) {
   .dx-validationsummary-item {
     color: $summary-color;
   }
@@ -6,6 +7,40 @@
   .dx-invalid-message > .dx-overlay-content {
     color: $message-color;
     background-color: $message-bg-color;
+    border-radius: $border-radius;
+  }
+}
+
+@mixin dx-modern-styles-validation(
+  $validation-message-font-size, 
+  $validation-message-line-height,
+  $filled-texteditor-input-horizontal-padding,
+  $validation-message-padding,
+  $validationsummary-item-margin,
+  $validation-message-vertical-padding, 
+  $validation-message-horizontal-padding,
+) {
+  .dx-invalid-message > .dx-overlay-content {
+    padding: $validation-message-vertical-padding $validation-message-horizontal-padding;
+    line-height: $validation-message-line-height;
+    font-size: $validation-message-font-size;
+  
+    .dx-invalid-message-top &,
+    .dx-invalid-message-bottom & {
+      .dx-editor-filled &,
+      .dx-editor-outlined {
+        padding-left: $filled-texteditor-input-horizontal-padding;
+        padding-right: $filled-texteditor-input-horizontal-padding;
+      }
+    }
+  }
+  
+  .dx-validationsummary > .dx-validationsummary-item:not(:last-child) {
+    margin-bottom: $validationsummary-item-margin;
+  }
+  
+  .dx-form-validation-summary {
+    margin-top: 20px;
   }
 }
 

package/data/scss/widgets/base/{_colorBox.scss → colorBox/_index.scss}

@@ -1,3 +1,7 @@
+@use "../mixins" as *;
+@use "./mixins" as *;
+@use "sass:string" as string;
+
 // adduse
 
 $colorbox-input-left-padding: 40px;
@@ -44,17 +48,6 @@ $colorbox-input-left-padding: 40px;
   }
 }
 
-.dx-colorbox-color-result-preview {
-  position: absolute;
-  top: 50%;
-  z-index: 2;
-  width: 17px;
-  height: 17px;
-  margin-top: -8.5px;
-  inset-inline-start: 13px;
-  border: 1px solid;
-}
-
 .dx-colorbox-overlay {
   padding: 20px;
 

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

@@ -30,7 +30,7 @@
 }
 
 .dx-datagrid-group-panel {
-  display: inline-block;
+  display: flex;
   white-space: nowrap;
   width: 100%;
   touch-action: pinch-zoom;
@@ -44,11 +44,8 @@
   }
 
   .dx-block-separator {
-    @include dx-group-panel-item();
-
-    color: transparent;
     position: relative;
-    min-width: 0;
+    border-radius: 3px;
   }
 }