devextreme-themebuilder 23.2.1-alpha-23255-1813 → 23.2.2-beta

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

@@ -54,14 +54,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 +65,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/_tabs.scss

@@ -79,6 +79,7 @@
 }
 
 .dx-tab-content {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -94,10 +95,6 @@
   @include dx-overflow();
 }
 
-.dx-tabs-item-badge {
-  display: inline-block;
-}
-
 .dx-tabs-nav-button {
   align-items: center;
   justify-content: center;
@@ -126,6 +123,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 {

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

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

@@ -54,7 +54,12 @@ $datagrid-text-stub-background-image-path: null !default;
 
 .dx-datagrid {
   color: $datagrid-base-color;
-  background-color: $datagrid-base-background-color;
+
+  > .dx-datagrid-headers,
+  > .dx-datagrid-rowsview,
+  > .dx-datagrid-total-footer {
+    background-color: $datagrid-base-background-color;
+  }
 
   .dx-sort-up {
     @include dx-icon(sortup);
@@ -74,6 +79,10 @@ $datagrid-text-stub-background-image-path: null !default;
   }
 
   .dx-datagrid-header-panel {
+    .dx-toolbar {
+      background-color: transparent;
+    }
+
     .dx-group-panel-item,
     .dx-header-filter {
       outline: none;

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

@@ -59,6 +59,7 @@
 
 .dx-dropdowneditor-button {
   position: relative;
+  display: inline-flex;
   float: right;
   height: 100%;
   cursor: pointer;

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

@@ -83,6 +83,7 @@ $list-searchbox-margin-bottom: 5px;
 .dx-list .dx-empty-message {
   @include dx-overflow();
 
+  text-align: start;
   min-height: 3em;
 }
 
@@ -91,7 +92,6 @@ $list-searchbox-margin-bottom: 5px;
   width: 20px;
   text-align: right;
   vertical-align: middle;
-  padding-right: 10px;
 }
 
 .dx-list-item-badge {
@@ -99,29 +99,16 @@ $list-searchbox-margin-bottom: 5px;
   position: relative;
 }
 
-.dx-list-item-chevron-container {
-  display: table-cell;
-  width: 15px;
-  vertical-align: middle;
-}
-
 .dx-list-item-icon-container {
   display: inline-block;
 }
 
 .dx-list-item-chevron {
-  height: 8px;
-  width: 8px;
-  margin-left: -6px;
-  transform: rotate(135deg);
-  border-width: 2px 0 0 2px;
-  border-style: solid;
-  opacity: 0.3;
+  transform: rotate(0);
+  opacity: 1;
 
   .dx-rtl & {
-    margin-left: auto;
-    margin-right: -6px;
-    transform: rotate(-45deg);
+    transform: rotate(180deg);
   }
 }
 
@@ -139,19 +126,11 @@ $list-searchbox-margin-bottom: 5px;
 
 .dx-list-item-before-bag,
 .dx-list-item-after-bag {
-  display: table-cell;
-  width: 0;
   height: 100%;
   vertical-align: middle;
 }
 
 .dx-list-item-before-bag {
-  .dx-list-toggle-delete-switch {
-    display: block;
-    float: left;
-    padding: 3px 0;
-  }
-
   .dx-icon-toggle-delete {
     transition: all 0.1s linear;
   }
@@ -229,7 +208,6 @@ $list-searchbox-margin-bottom: 5px;
 
 .dx-list-switchable-delete-button-inner-wrapper {
   display: table-cell;
-  padding-left: 1px;
   height: 100%;
   vertical-align: middle;
 }
@@ -313,17 +291,20 @@ $list-searchbox-margin-bottom: 5px;
   margin-bottom: $list-searchbox-margin-bottom;
 }
 
+.dx-list-select-all-checkbox {
+  float: left;
+}
+
 .dx-rtl .dx-list,
 .dx-rtl.dx-list {
-  .dx-list-item-badge-container {
-    padding-left: 10px;
-    padding-right: 0;
-  }
-
   .dx-list-item-badge {
     float: left;
   }
 
+  .dx-list-select-all-checkbox {
+    float: right;
+  }
+
   .dx-list-item-before-bag {
     .dx-list-toggle-delete-switch {
       float: right;
@@ -334,11 +315,6 @@ $list-searchbox-margin-bottom: 5px;
     }
   }
 
-  .dx-list-switchable-delete-button-inner-wrapper {
-    padding-right: 1px;
-    padding-left: 0;
-  }
-
   .dx-list-slide-item-delete-button-container {
     right: 100%;
     left: 0;

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

@@ -223,12 +223,6 @@
       flex-grow: 1;
     }
   }
-
-  // stylelint-enable no-duplicate-selectors
-
-  .dx-area-caption {
-    vertical-align: middle;
-  }
 }
 
 .dx-pivotgrid-action {

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

@@ -16,13 +16,6 @@ $pivotgrid-field-area-text-color: null !default;
 $pivotgrid-data-area-color: null !default;
 $pivotgrid-grandtotalcolor: null !default;
 $pivotgrid-accent-color: null !default;
-$pivotgrid-area-all-image: null !default;
-$pivotgrid-area-filter-image: null !default;
-$pivotgrid-area-row-image: null !default;
-$pivotgrid-area-column-image: null !default;
-$pivotgrid-area-data-image: null !default;
-$pivotgrid-dimension-image: null !default;
-$pivotgrid-hierarchy-image: null !default;
 $pivotgrid-empty-area-text-padding: null !default;
 $pivotgrid-button-top-padding: null !default;
 
@@ -480,9 +473,6 @@ $pivotgrid-expand-icon-text-offset: 0;
 
   .dx-treeview-item .dx-icon {
     vertical-align: middle;
-    margin: 0 5px 1px 0;
-
-    @include dx-icon-sizing(16px);
   }
 
   .dx-treeview-search {
@@ -492,8 +482,6 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-area-icon {
     display: inline-block;
     vertical-align: middle;
-    width: 16px;
-    height: 16px;
   }
 
   .dx-area {
@@ -526,42 +514,6 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-area-fields.dx-drag-target {
     border-color: $pivotgrid-accent-color;
   }
-
-  .dx-area-icon-all {
-    background: $pivotgrid-area-all-image no-repeat center center;
-  }
-
-  .dx-area-icon-filter {
-    background: $pivotgrid-area-filter-image no-repeat center center;
-  }
-
-  .dx-area-icon-row {
-    background: $pivotgrid-area-row-image no-repeat center center;
-  }
-
-  .dx-area-icon-column {
-    background: $pivotgrid-area-column-image no-repeat center center;
-  }
-
-  .dx-area-icon-data {
-    background: $pivotgrid-area-data-image no-repeat center center;
-  }
-
-  .dx-icon-measure {
-    background: $pivotgrid-area-data-image no-repeat center center;
-  }
-
-  .dx-icon-dimension {
-    background: $pivotgrid-dimension-image no-repeat center center;
-  }
-
-  .dx-icon-hierarchy {
-    background: $pivotgrid-hierarchy-image no-repeat center center;
-
-    &::before {
-      content: none;
-    }
-  }
 }
 
 

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

@@ -1,9 +1,9 @@
 @use "sass:math";
 
-@mixin dx-popover-arrow-size($width) {
+@mixin dx-popover-arrow-size($width, $popover-arrow-offset: 0) {
   $sqrt-2: 1.4142;
   $popover-arrow-width: $width;
-  $popover-arrow-heiht: math.div($popover-arrow-width, 2);
+  $popover-arrow-height: math.div($popover-arrow-width, 2);
 
   .dx-popover-wrapper {
     .dx-popover-arrow::after {
@@ -15,14 +15,14 @@
     &.dx-position-bottom {
       .dx-popover-arrow {
         width: $popover-arrow-width;
-        height: $popover-arrow-heiht;
+        height: $popover-arrow-height + $popover-arrow-offset;
       }
     }
 
     &.dx-position-right,
     &.dx-position-left {
       .dx-popover-arrow {
-        width: $popover-arrow-heiht;
+        width: $popover-arrow-height + $popover-arrow-offset;
         height: $popover-arrow-width;
       }
     }