devextreme-themebuilder 21.2.7 → 22.1.2-beta

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

@@ -427,10 +427,15 @@
       & > tr > td {
         vertical-align: top;
 
-        &:first-child {
+        &:first-child,
+        &.dx-first-child {
           border-left: 0;
         }
 
+        &.dx-last-child {
+          border-right: 0;
+        }
+
         &.dx-#{$widget-name}-group-space {
           border-right: none;
           vertical-align: top;
@@ -819,8 +824,7 @@
     &.dx-scrollable {
       display: flex;
 
-      > .dx-scrollable-wrapper,
-      > div > .dx-scrollable-wrapper {
+      > .dx-scrollable-wrapper {
         flex: 1;
         height: auto;
         min-width: 0;
@@ -861,6 +865,10 @@
       &.dx-scrollable-container {
         width: auto;
       }
+
+      &.dx-#{$widget-name}-content-fixed.dx-scrollable-container {
+        height: auto;
+      }
     }
 
 

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

@@ -76,13 +76,53 @@ $transparent-border: 1px solid transparent;
   border: $transparent-border;
 
   &:not(.dx-state-disabled) {
-    li[data-list=checked],
-    li[data-list=unchecked] {
+    li[data-list="checked"],
+    li[data-list="unchecked"] {
       cursor: pointer;
     }
   }
 }
 
+.dx-htmleditor-add-image-popup-with-tabs > .dx-overlay-content > .dx-popup-content {
+  padding: 0;
+}
+
+.dx-htmleditor-hidden-content {
+  display: none;
+}
+
+.dx-htmleditor-add-image-popup > .dx-overlay-content {
+  > .dx-popup-content {
+    .dx-multiview-wrapper {
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+    }
+
+    .dx-fix-ratio-container {
+      .dx-textbox {
+        display: inline-block;
+      }
+
+      .dx-buttongroup {
+        vertical-align: top;
+      }
+    }
+
+    .dx-fileuploader-wrapper {
+      padding: 0;
+    }
+
+    .dx-fileuploader-upload-button {
+      display: none;
+    }
+  }
+
+  .dx-popup-title {
+    border-bottom: 0;
+  }
+}
+
 .dx-quill-container {
   box-sizing: border-box;
   display: flex;
@@ -180,15 +220,15 @@ $transparent-border: 1px solid transparent;
     padding-left: $list-style-outer-width;
     position: relative;
 
-    &[data-list=bullet]::before {
+    &[data-list="bullet"]::before {
       content: '\2022';
     }
 
-    &[data-list=checked]::before {
+    &[data-list="checked"]::before {
       content: '\2611';
     }
 
-    &[data-list=unchecked]::before {
+    &[data-list="unchecked"]::before {
       content: '\2610';
     }
 
@@ -205,8 +245,8 @@ $transparent-border: 1px solid transparent;
       visibility: hidden;
     }
 
-    &[data-list=unchecked],
-    &[data-list=checked] {
+    &[data-list="unchecked"],
+    &[data-list="checked"] {
       > .ql-ui { // stylelint-disable-line selector-class-pattern
         visibility: visible;
       }
@@ -224,7 +264,7 @@ $transparent-border: 1px solid transparent;
     }
   }
 
-  li[data-list=ordered] {
+  li[data-list="ordered"] {
     counter-reset: add-counter-reset($max-indent);
     counter-increment: list-0;
 
@@ -280,11 +320,11 @@ $transparent-border: 1px solid transparent;
   }
 
   .ql-font-serif {
-    font-family: Georgia, Times New Roman, serif;
+    font-family: "Georgia", "Times New Roman", serif;
   }
 
   .ql-font-monospace {
-    font-family: Monaco, Courier New, monospace;
+    font-family: "Monaco", "Courier New", monospace;
   }
 
   .ql-direction-rtl {

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

@@ -178,7 +178,7 @@
 }
 
 @mixin dx-font-icon($glyph) {
-  font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword
+  font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes
 
   &::before {
     content: $glyph;
@@ -403,7 +403,11 @@ $icons: (
     "svgfile": "\f150",
     "attach": "\f151",
     "return": "\f152",
-    "indeterminatestate": "\f153"
+    "indeterminatestate": "\f153",
+    "lock": "\f154",
+    "unlock": "\f155",
+    "imgarlock": "\f156",
+    "imgarunlock": "\f157"
 );
 
 // stylelint-enable

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

@@ -83,8 +83,7 @@
     flex-direction: column;
     height: 0;
 
-    > .dx-scrollable-wrapper,
-    > div > .dx-scrollable-wrapper {
+    > .dx-scrollable-wrapper {
       display: flex;
       flex-grow: 1;
       flex-direction: column;

package/data/scss/widgets/base/_numberBox.scss

@@ -11,7 +11,7 @@ $touch-friendly-spin-container-width: 64px;
 
   @include user-select(none);
 
-  input[type=number] {
+  input[type="number"] {
     -moz-appearance: textfield; // stylelint-disable-line property-no-vendor-prefix
 
     &::-webkit-outer-spin-button,

package/data/scss/widgets/base/_overlay.scss

@@ -20,11 +20,6 @@
   }
 }
 
-.dx-overlay-modal {
-  width: 100%;
-  height: 100%;
-}
-
 .dx-overlay-shader {
   background-color: rgba(128, 128, 128, 0.5);
   pointer-events: auto;

package/data/scss/widgets/base/_pager.scss

@@ -68,7 +68,8 @@ $pager-info-paddings: 9px;
     float: left;
 
     .dx-page-size {
-      &:first-child {
+      &:first-child,
+      &.dx-first-child {
         margin-left: 1px;
       }
 

package/data/scss/widgets/base/_popup.scss

@@ -19,9 +19,7 @@
     min-height: inherit;
 
     > .dx-scrollable-wrapper,
-    > .dx-scrollable-wrapper > .dx-scrollable-container,
-    > div > .dx-scrollable-wrapper,
-    > div > .dx-scrollable-wrapper > .dx-scrollable-container {
+    > .dx-scrollable-wrapper > .dx-scrollable-container {
       max-height: inherit;
       min-height: inherit;
     }

package/data/scss/widgets/base/_scrollable.scss

@@ -19,8 +19,7 @@
   -ms-overflow-style: -ms-autohiding-scrollbar;
   -ms-scroll-snap-type: proximity; // stylelint-disable-line property-no-vendor-prefix
 
-  &.dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-scrollbar,
-  > div > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-scrollbar {
+  &.dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-scrollbar {
     display: none;
   }
 
@@ -36,16 +35,14 @@
   }
 
   &.dx-scrollable-vertical,
-  &.dx-scrollable-vertical > .dx-scrollable-wrapper > .dx-scrollable-container,
-  &.dx-scrollable-vertical > div > .dx-scrollable-wrapper > .dx-scrollable-container {
+  &.dx-scrollable-vertical > .dx-scrollable-wrapper > .dx-scrollable-container {
     touch-action: pan-y;
     overflow-x: hidden;
     overflow-y: auto;
   }
 
   &.dx-scrollable-horizontal,
-  &.dx-scrollable-horizontal > .dx-scrollable-wrapper > .dx-scrollable-container,
-  &.dx-scrollable-horizontal > div > .dx-scrollable-wrapper > .dx-scrollable-container {
+  &.dx-scrollable-horizontal > .dx-scrollable-wrapper > .dx-scrollable-container {
     touch-action: pan-x;
     float: none;
     overflow-x: auto;
@@ -53,8 +50,7 @@
   }
 
   &.dx-scrollable-both,
-  &.dx-scrollable-both > .dx-scrollable-wrapper > .dx-scrollable-container,
-  &.dx-scrollable-both > div > .dx-scrollable-wrapper > .dx-scrollable-container {
+  &.dx-scrollable-both > .dx-scrollable-wrapper > .dx-scrollable-container {
     touch-action: pan-y pan-x;
     float: none;
     overflow-x: auto;
@@ -66,8 +62,7 @@
     touch-action: auto;
   }
 
-  &.dx-scrollable-scrollbars-hidden > .dx-scrollable-wrapper > .dx-scrollable-container,
-  &.dx-scrollable-scrollbars-hidden > div > .dx-scrollable-wrapper > .dx-scrollable-container {
+  &.dx-scrollable-scrollbars-hidden > .dx-scrollable-wrapper > .dx-scrollable-container {
     overflow: hidden;
   }
 

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

@@ -42,3 +42,62 @@
     margin-right: 0;
   }
 }
+
+.dx-toast-stack {
+  position: fixed;
+  display: flex;
+  overflow: hidden;
+  gap: 3px;
+  align-items: center;
+  .dx-toast-wrapper {
+    transform: translate(0) !important;
+    position: static !important;
+    height: auto !important;
+    width: auto !important;
+
+    .dx-toast-content {
+      transform: translate(0) !important;
+      position: static !important;
+    }
+  }
+}
+
+.dx-toast-stack-down-push-direction {
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+}
+
+.dx-toast-stack-up-push-direction {
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.dx-toast-stack-left-push-direction {
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.dx-toast-stack-right-push-direction {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.dx-toast-stack-down-stack-direction {
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.dx-toast-stack-up-stack-direction {
+  flex-direction: column-reverse;
+  justify-content: flex-start;
+}
+
+.dx-toast-stack-left-stack-direction {
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+}
+
+.dx-toast-stack-right-stack-direction {
+  flex-direction: row;
+  justify-content: flex-start;
+}

package/data/scss/widgets/base/_toolbar.scss

@@ -147,6 +147,7 @@
   width: 100%;
   text-align: left;
   padding: 10px;
+  box-shadow: none;
 
   .dx-button-text {
     line-height: normal;

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

@@ -1,4 +1,3 @@
-
 @mixin dx-base-colorview-styles($handle-color, $handle-border-color) {
   .dx-colorview-palette-handle {
     background: radial-gradient(transparent 5px, $handle-border-color 6px, $handle-color 7px, $handle-color 12px, $handle-border-color 13px);

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

@@ -189,10 +189,6 @@ $list-searchbox-margin-bottom: 5px;
 .dx-list-switchable-menu-shield-positioning {
   position: relative;
   transform: translateZ(0);
-
-  .dx-device-android-4 & {
-    transform: none;
-  }
 }
 
 .dx-list-switchable-delete-top-shield,
@@ -265,7 +261,7 @@ $list-searchbox-margin-bottom: 5px;
   overflow: hidden;
 
   .dx-device-ios & {
-    -webkit-mask-image: -webkit-radial-gradient(white, black); // stylelint-disable-line property-no-vendor-prefix
+    -webkit-mask-image: -webkit-radial-gradient(white, black); // stylelint-disable-line property-no-vendor-prefix, value-no-vendor-prefix
   }
 }
 

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

@@ -602,7 +602,8 @@ $scheduler-appointment-form-label-padding: 20px;
       }
     }
 
-    .dx-scheduler-scrollable-appointments {
+    .dx-scheduler-scrollable-appointments,
+    .dx-scheduler-all-day-appointments {
       left: 0;
     }
   }

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

@@ -557,7 +557,7 @@ $scheduler-month-date-text-padding: 6px;
     font-size: $scheduler-small-font-size;
   }
 
-  .dx-scheduler-time-panel-row:nth-child(1),
+  .dx-scheduler-time-panel-row:first-of-type,
   .dx-scheduler-virtual-row ~ .dx-scheduler-time-panel-row:nth-child(2) {
     td > div {
       margin-top: 0;

package/data/scss/widgets/generic/_colors.scss

@@ -1,6 +1,4 @@
-
 @forward "tb_generic";
-
 @use "tb_generic" as *;
 @use "sass:color";
 @use "./color" as extcolor;

package/data/scss/widgets/generic/accordion/_index.scss

@@ -83,7 +83,7 @@ $generic-accordion-disabled-opacity: 0.5;
     font-weight: normal;
     color: $accordion-icon-color;
     content: "\f016";
-    font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword
+    font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes
     font-size: $generic-base-icon-size;
     margin-left: math.div($generic-base-icon-size, 2);
     margin-right: 0;

package/data/scss/widgets/generic/gridBase/_index.scss

@@ -631,25 +631,14 @@ $grid-masterdetail-padding: 20px;
     }
   }
 
-  .dx-#{$widget-name}-export-button {
-    .dx-icon-export-to {
-      @include dx-icon(export);
-      @include dx-icon-sizing($generic-base-icon-size);
-    }
-
-    .dx-icon-export-excel-button {
-      @include dx-icon(xlsxfile);
-      @include dx-icon-sizing($generic-base-icon-size);
-    }
-  }
-
   .dx-#{$widget-name}-adaptive-more {
     @include dx-icon-sizing($generic-base-more-adaptive-icon-size);
   }
 
   .dx-#{$widget-name}-rowsview {
     .dx-#{$widget-name}-borders &,
-    .dx-#{$widget-name}-headers + & {
+    .dx-#{$widget-name}-headers + &,
+    &.dx-#{$widget-name}-after-headers {
       border-top: $datagrid-border;
     }
 

package/data/scss/widgets/generic/htmlEditor/_index.scss

@@ -7,6 +7,8 @@
 @use "../button/colors" as *;
 @use "../buttonGroup/colors" as *;
 @use "../textEditor/colors" as *;
+@use "../fileUploader/index" as *;
+@use "../fileUploader/sizes" as *;
 @use "../toolbar/sizes" as *;
 @use "../common/mixins" as *;
 @use "../../base/htmlEditor";
@@ -301,6 +303,67 @@ $generic-mobile-html-editor-toolbar-height: $generic-mobile-toolbar-height;
   }
 }
 
+.dx-htmleditor-add-image-popup > .dx-overlay-content > .dx-popup-content {
+  .dx-tab:first-child {
+    box-shadow: inset 0 1px $htmleditor-border-color, inset -1px 0 $htmleditor-border-color, inset 0 0 $htmleditor-border-color, inset 0 0 $htmleditor-border-color;
+  }
+
+  .dx-tabpanel {
+    &.dx-state-focused {
+      .dx-tab.dx-tab-selected:first-child {
+        box-shadow: inset 0 1px $base-accent, inset -1px 0 $base-accent, inset 0 0 $base-accent;
+      }
+
+      .dx-tab:first-child {
+        box-shadow: inset 0 1px $htmleditor-border-color, inset 0 0 $htmleditor-border-color, inset 0 -1px $base-accent, inset 0 0 $htmleditor-border-color;
+      }
+    }
+  }
+
+  .dx-collection .dx-field-item:not(.dx-last-col) {
+    padding-right: $generic-html-editor-add-image-dialog-base-padding;
+  }
+
+  .dx-collection .dx-field-item:not(.dx-first-col) {
+    padding-left: 0;
+  }
+
+  .dx-fileuploader-input-wrapper {
+    padding: $generic-html-editor-add-image-dialog-fileuploader-padding;
+    border: $generic-fileuploader-file-wrapper-border-size dashed $base-border-color;
+
+    .dx-fileuploader-input-label {
+      border-width: 0;
+    }
+  }
+
+  .dx-fileuploader-dragover {
+    .dx-fileuploader-input {
+      padding-top: $generic-fileuploader-vertical-padding;
+      padding-bottom: $generic-fileuploader-vertical-padding + 1px;
+    }
+
+    .dx-fileuploader-input-label {
+      padding-top: $generic-fileuploader-vertical-padding + 1px;
+    }
+
+    .dx-fileuploader-content {
+      background-color: color.change($htmleditor-border-color, $alpha: 0.8);
+    }
+  }
+
+  .dx-fix-ratio-container {
+    .dx-textbox {
+      width: calc(100% - ($generic-html-editor-add-image-dialog-base-padding + $generic-base-inline-widget-height));
+    }
+
+    .dx-buttongroup {
+      margin-left: $generic-html-editor-add-image-dialog-base-padding;
+      width: $generic-base-inline-widget-height;
+    }
+  }
+}
+
 .dx-mention {
   background-color: $htmleditor-mention-bg;
   color: $htmleditor-mention-color;

package/data/scss/widgets/generic/htmlEditor/_sizes.scss

@@ -4,11 +4,15 @@
 
 $generic-toolbar-size-editor-width: null !default;
 $generic-html-editor-horizontal-padding: 15px !default;
+$generic-html-editor-add-image-dialog-base-padding: 5px !default;
+$generic-html-editor-add-image-dialog-fileuploader-padding: null !default;
 
 @if $size == "default" {
   $generic-toolbar-size-editor-width: 105px !default;
+  $generic-html-editor-add-image-dialog-fileuploader-padding: 60px 20px !default;
 }
 
 @else if $size == "compact" {
   $generic-toolbar-size-editor-width: 80px !default;
+  $generic-html-editor-add-image-dialog-fileuploader-padding: 40px 20px !default;
 }

package/data/scss/widgets/generic/pager/_index.scss

@@ -18,6 +18,10 @@
       min-width: 42px;
     }
 
+    .dx-page-indexes {
+      vertical-align: middle;
+    }
+
     .dx-page-index {
       min-width: 19px;
     }

package/data/scss/widgets/generic/validation/_index.scss

@@ -7,8 +7,6 @@
 
 // adduse
 @use "../overlay";
-
-
 @include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color);
 
 .dx-invalid-message > .dx-overlay-content {

package/data/scss/widgets/material/_colors.scss

@@ -1,6 +1,4 @@
-
 @forward "tb_material";
-
 @use "tb_material" as *;
 @use "sass:color";
 $color: null !default;

package/data/scss/widgets/material/_sizes.scss

@@ -10,6 +10,7 @@ $material-base-icon-size: null !default;
 $material-base-inline-horizontal-padding: null !default;
 $material-base-border-radius: null !default;
 $material-base-dropdown-widgets-shadow: null !default;
+$material-html-editor-add-image-dialog-base-padding: 5px !default;
 
 
 @if $size == "default" {

package/data/scss/widgets/material/accordion/_index.scss

@@ -102,7 +102,7 @@ $material-accordion-disabled-opacity: 0.5;
     font-weight: normal;
     color: $accordion-icon-color;
     content: "\f016";
-    font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword
+    font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes
     font-size: $material-base-icon-size;
     height: $material-base-icon-size;
     width: $material-base-icon-size;

package/data/scss/widgets/material/form/_index.scss

@@ -24,8 +24,7 @@
 }
 
 .dx-form {
-  > .dx-scrollable-wrapper,
-  > div > .dx-scrollable-wrapper {
+  > .dx-scrollable-wrapper {
     > .dx-scrollable-container {
       margin-left: -10px;
       padding-left: 10px;
@@ -69,10 +68,6 @@
   }
 
   &.dx-label-v-align {
-    .dx-textarea {
-      margin-top: 6px;
-    }
-
     .dx-invalid-message > .dx-overlay-wrapper,
     .dx-invalid-message > .dx-overlay-content {
       transform: translate(0, 0) !important; // stylelint-disable-line declaration-no-important

package/data/scss/widgets/material/gridBase/_index.scss

@@ -824,18 +824,6 @@ $grid-masterdetail-padding: 16px;
     }
   }
 
-  .dx-#{$widget-name}-export-button {
-    .dx-icon-export-to {
-      @include dx-icon(export);
-      @include dx-icon-sizing($material-base-icon-size);
-    }
-
-    .dx-icon-export-excel-button {
-      @include dx-icon(xlsxfile);
-      @include dx-icon-sizing($material-base-icon-size);
-    }
-  }
-
   .dx-datagrid-export-menu {
     .dx-menu-item .dx-icon-xlsxfile {
       @include dx-icon-sizing($material-base-icon-size);
@@ -863,7 +851,8 @@ $grid-masterdetail-padding: 16px;
   .dx-#{$widget-name}-rowsview {
     border-top: 1px solid $material-grid-base-border-color;
 
-    .dx-#{$widget-name}-headers + & {
+    .dx-#{$widget-name}-headers + &,
+    &.dx-#{$widget-name}-after-headers {
       border-top: none;
     }