devextreme-themebuilder 26.1.2-beta → 26.1.3

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

@@ -1,449 +1,449 @@
-@use "sass:math";
-@use "sass:color";
-@use "colors" as *;
-@use "../colors" as *;
-@use "sizes" as *;
-@use "../sizes" as *;
-@use "../../base/icon_fonts" as *;
-@use "../common/sizes" as *;
-@use "../button/sizes" as *;
-@use "../common/mixins" as *;
-@use "../common/sizes" as *;
-@use "../../base/textEditor";
-@use "../../base/textEditor/mixins" as *;
-@use "../colorBox/sizes" as *;
-
-// adduse
-
-$material-base-standard-texteditor-input-horizontal-padding: 0;
-$material-texteditor-icon-container-size: $material-base-icon-size - 2px;
-$material-texteditor-invalid-badge-size: $material-invalid-badge-size + 2 * $material-invalid-badge-horizontal-padding;
-$material-editor-custom-button-margin: 5px;
-
-@mixin dx-texteditor-icon() {
-  position: absolute;
-  top: 50%;
-  margin-top: math.div(-$material-texteditor-icon-container-size, 2);
-
-  @include dx-icon-sizing($material-texteditor-icon-container-size);
-}
-
-@mixin texteditor-input-padding-filled() {
-  .dx-texteditor-input {
-    padding-inline-end: $material-texteditor-invalid-badge-size + $material-filled-texteditor-input-horizontal-padding;
-  }
-}
-
-@mixin texteditor-validation-icon-offset() {
-  inset-inline-end: $material-invalid-badge-halfhorizontal-padding;
-}
-
-@mixin texteditor-validation-icon-offset-filled() {
-  inset-inline-end: $material-filled-texteditor-input-button-horizontal-padding;
-}
-
-@mixin validation-icon-position() {
-  &.dx-invalid,
-  &.dx-valid {
-    &.dx-editor-underlined {
-      .dx-texteditor-input {
-        padding-inline-end: $material-texteditor-invalid-badge-size + $material-base-standard-texteditor-input-horizontal-padding;
-      }
-    }
-
-    &.dx-editor-filled,
-    &.dx-editor-outlined {
-      @include texteditor-input-padding-filled();
-
-      .dx-texteditor-input-container {
-        &::after {
-          @include texteditor-validation-icon-offset-filled();
-        }
-      }
-    }
-
-    .dx-texteditor-input-container {
-      &::after {
-        @include texteditor-validation-icon-offset();
-      }
-    }
-  }
-}
-
-@mixin pending-indicator-position() {
-  &.dx-validation-pending {
-    &.dx-editor-underlined {
-      .dx-texteditor-input {
-        padding-inline-end: $material-texteditor-invalid-badge-size + $material-base-standard-texteditor-input-horizontal-padding;
-      }
-    }
-
-    &.dx-editor-filled,
-    &.dx-editor-outlined {
-      @include texteditor-input-padding-filled();
-
-      .dx-texteditor-input-container {
-        .dx-pending-indicator {
-          @include texteditor-validation-icon-offset-filled();
-        }
-      }
-    }
-
-    .dx-texteditor-input-container {
-      .dx-pending-indicator {
-        @include texteditor-validation-icon-offset();
-      }
-    }
-  }
-}
-
-.dx-texteditor {
-  border-top-left-radius: $texteditor-input-border-radius;
-  border-top-right-radius: $texteditor-input-border-radius;
-  position: relative;
-
-  @mixin dx-texteditor-borders-position() {
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 0;
-    width: 100%;
-    content: '';
-    position: absolute;
-  }
-
-  &::before {
-    @include dx-texteditor-borders-position();
-
-    z-index: 2;
-    transform: scale(0);
-  }
-
-  &::after {
-    @include dx-texteditor-borders-position();
-  }
-
-  &.dx-state-focused {
-    .dx-texteditor-label {
-      color: $base-accent;
-      font-size: $material-texteditor-label-font-size;
-    }
-
-    &.dx-invalid {
-      .dx-texteditor-label {
-        color: $base-invalid-color;
-      }
-    }
-  }
-
-  &.dx-texteditor-label-outside {
-    .dx-texteditor-label {
-      color: $base-text-color;
-    }
-
-    &.dx-invalid {
-      .dx-texteditor-label {
-        color: $base-invalid-color;
-      }
-    }
-  }
-
-  &.dx-state-focused,
-  &.dx-state-active {
-    background-color: $texteditor-focused-bg;
-
-    &::before {
-      border-bottom: 2px solid;
-      border-bottom-color: $texteditor-focused-border-color;
-      transform: scale(1);
-      transition: transform 0.6s cubic-bezier(0.4, 0, 0.02, 1);
-    }
-  }
-
-  @include validation-icon-position();
-  @include pending-indicator-position();
-
-  &.dx-editor-filled,
-  &.dx-editor-outlined {
-    .dx-placeholder::before,
-    .dx-lookup-field,
-    .dx-texteditor-input {
-      padding: $material-filled-texteditor-input-padding;
-    }
-  }
-
-  &.dx-editor-filled {
-    background-color: $texteditor-bg;
-
-    &::after {
-      border-bottom: 1px solid;
-      border-bottom-color: $texteditor-border-color;
-    }
-
-    &.dx-state-hover {
-      background-color: $texteditor-hover-bg;
-
-      &::after {
-        border-bottom-color: $texteditor-hover-border-color;
-      }
-    }
-
-    &.dx-state-disabled,
-    &.dx-state-readonly,
-    &.dx-state-readonly.dx-state-hover {
-      background-color: color.change($texteditor-bg, $alpha: 0.12);
-
-      .dx-texteditor-input {
-        color: $texteditor-disabled-color;
-      }
-    }
-  }
-
-  &.dx-editor-underlined {
-    background-color: transparent;
-
-    &::after {
-      border-bottom: 1px solid;
-      border-bottom-color: $texteditor-border-color;
-    }
-
-    &.dx-state-hover {
-      &::after {
-        border-bottom: 2px solid;
-        border-bottom-color: $texteditor-hover-border-color;
-      }
-    }
-
-    .dx-texteditor-input,
-    .dx-placeholder::before {
-      padding: $material-standard-texteditor-input-padding;
-    }
-
-    &.dx-state-disabled,
-    &.dx-state-readonly,
-    &.dx-state-readonly.dx-state-hover {
-      &::after {
-        border-bottom-style: dotted;
-        border-bottom-width: 1px;
-      }
-    }
-
-    &.dx-invalid {
-      &::after {
-        border-bottom-color: $texteditor-invalid-faded-border-color;
-      }
-    }
-  }
-
-  &.dx-editor-outlined {
-    background-color: transparent;
-    border-radius: $texteditor-input-border-radius;
-    box-shadow: inset 0 0 0 1px $texteditor-border-color;
-
-    &::before {
-      display: none;
-    }
-
-    &.dx-state-disabled,
-    &.dx-state-readonly {
-      box-shadow: inset 0 0 0 1px $texteditor-disabled-color;
-
-      .dx-texteditor-input {
-        color: $texteditor-disabled-color;
-      }
-    }
-
-    &.dx-state-hover {
-      box-shadow: inset 0 0 0 1px $texteditor-hover-border-color;
-    }
-
-    &.dx-state-focused {
-      box-shadow: inset 0 0 0 2px $texteditor-focused-border-color;
-
-      &.dx-invalid {
-        box-shadow: inset 0 0 0 2px $texteditor-invalid-focused-border-color;
-      }
-    }
-
-    &.dx-invalid {
-      box-shadow: inset 0 0 0 1px $texteditor-invalid-faded-border-color;
-    }
-  }
-}
-
-.dx-show-clear-button {
-  .dx-clear-button-area {
-    width: $material-texteditor-icon-container-size;
-    min-width: $material-texteditor-icon-container-size;
-    right: 0;
-  }
-
-  .dx-icon-clear {
-    color: $texteditor-button-clear-icon-color;
-    background-color: $texteditor-button-clear-icon-color-bg;
-    border-radius: 50%;
-
-    @include dx-texteditor-icon();
-    @include dx-icon-font-centered-sizing($material-texteditor-clear-icon-size);
-  }
-
-  &:not(.dx-texteditor-empty) {
-    @include validation-icon-position();
-    @include pending-indicator-position();
-  }
-}
-.dx-placeholder {
-  color: $texteditor-placeholder-color;
-  font-size: $material-texteditor-font-size;
-  line-height: normal;
-}
-
-.dx-texteditor-input {
-  margin: 0;
-  background-color: transparent;
-  color: $texteditor-color;
-  font-size: $material-texteditor-font-size;
-}
-
-.dx-invalid.dx-texteditor {
-  &.dx-state-hover {
-    &::after {
-      border-bottom-color: $texteditor-invalid-faded-border-color;
-    }
-  }
-
-  &.dx-state-focused,
-  &.dx-state-active {
-    &::before {
-      border-bottom: 2px solid;
-      border-bottom-color: $texteditor-invalid-focused-border-color;
-    }
-  }
-
-  &.dx-show-invalid-badge .dx-texteditor-input-container {
-    &::after {
-      @include dx-invalid-material-badge();
-    }
-  }
-}
-
-.dx-texteditor-label {
-  position: absolute;
-  font-size: $material-texteditor-label-font-size;
-  color: $texteditor-label-color;
-  white-space: nowrap;
-  user-select: none;
-  pointer-events: none;
-  cursor: text;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  top: 0;
-  left: 0;
-
-  .dx-label {
-    display: flex;
-
-    span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: auto;
-      max-width: 100%;
-      display: block;
-      margin-bottom: -1px;
-    }
-  }
-
-  .dx-invalid & {
-    color: $base-invalid-color;
-  }
-}
-
-@include dx-editor-outlined(
-  $texteditor-input-border-radius,
-  $material-texteditor-label-font-size,
-  $material-base-border-width,
-  2px,
-  solid,
-  $material-texteditor-label-font-size + 2,
-  $material-base-inline-block-height,
-  math.div(1px + $material-texteditor-label-font-size, 2),
-  $material-texteditor-label-outside-top-offset,
-  0.5px,
-  $material-filled-texteditor-input-horizontal-padding,
-  $material-filled-texteditor-input-horizontal-padding,
-  $base-bg,
-  none,
-  $texteditor-border-color,
-  $texteditor-border-color,
-  $texteditor-disabled-color,
-  $texteditor-disabled-color,
-  $texteditor-hover-border-color,
-  $texteditor-hover-border-color,
-  $texteditor-focused-border-color,
-  $texteditor-focused-border-color,
-  $texteditor-invalid-faded-border-color,
-  $texteditor-invalid-focused-border-color,
-  $texteditor-label-transition,
-  $material-texteditor-font-size,
-  $material-filled-texteditor-input-top-padding,
-  0,
-  $material-texteditor-label-outside-font-size,
-  $material-texteditor-label-outside-height,
-);
-@include dx-editor-filled(
-  $texteditor-label-transition,
-  $material-texteditor-label-font-size,
-  $material-texteditor-label-font-size,
-  $material-texteditor-label-font-size,
-  $material-texteditor-label-top-offset,
-  $material-texteditor-label-outside-top-offset,
-  $material-texteditor-font-size,
-  $material-texteditor-font-size,
-  $material-texteditor-font-size + 1px,
-  $material-filled-texteditor-input-horizontal-padding,
-  $material-filled-texteditor-input-with-label-top-padding,
-  $material-filled-texteditor-input-with-label-bottom-padding,
-  $material-texteditor-label-outside-font-size,
-  $material-texteditor-label-outside-height,
-);
-@include dx-editor-underlined(
-  $texteditor-label-transition,
-  $material-texteditor-label-font-size,
-  $material-texteditor-label-font-size,
-  $material-texteditor-label-font-size,
-  $material-texteditor-label-top-offset,
-  $material-texteditor-label-outside-top-offset,
-  $material-texteditor-font-size,
-  $material-texteditor-font-size,
-  $material-texteditor-font-size + 1px,
-  $material-standard-texteditor-with-label-input-top-padding,
-  $material-standard-texteditor-with-label-input-bottom-padding,
-  $material-texteditor-label-outside-font-size,
-  $material-texteditor-label-outside-height,
-);
-
-.dx-valid.dx-texteditor {
-  .dx-texteditor-input-container {
-    &::after {
-      @include dx-valid-material-badge();
-    }
-  }
-}
-
-.dx-validation-pending.dx-texteditor {
-  .dx-texteditor-input-container {
-    .dx-pending-indicator {
-      @include dx-pending-indicator-material();
-    }
-  }
-}
-
-@include dx-editor-buttons-container-material(
-  $material-underlined-editor-button-height,
-  $material-editor-custom-button-margin,
-  $material-editor-custom-button-margin * 2,
-  $material-filled-texteditor-spin-button-horizontal-padding,
-  $material-filled-texteditor-spin-button-horizontal-padding,
-  $material-button-vertical-padding,
-);
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "../colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../common/sizes" as *;
+@use "../button/sizes" as *;
+@use "../common/mixins" as *;
+@use "../common/sizes" as *;
+@use "../../base/textEditor";
+@use "../../base/textEditor/mixins" as *;
+@use "../colorBox/sizes" as *;
+
+// adduse
+
+$material-base-standard-texteditor-input-horizontal-padding: 0;
+$material-texteditor-icon-container-size: $material-base-icon-size - 2px;
+$material-texteditor-invalid-badge-size: $material-invalid-badge-size + 2 * $material-invalid-badge-horizontal-padding;
+$material-editor-custom-button-margin: 5px;
+
+@mixin dx-texteditor-icon() {
+  position: absolute;
+  top: 50%;
+  margin-top: math.div(-$material-texteditor-icon-container-size, 2);
+
+  @include dx-icon-sizing($material-texteditor-icon-container-size);
+}
+
+@mixin texteditor-input-padding-filled() {
+  .dx-texteditor-input {
+    padding-inline-end: $material-texteditor-invalid-badge-size + $material-filled-texteditor-input-horizontal-padding;
+  }
+}
+
+@mixin texteditor-validation-icon-offset() {
+  inset-inline-end: $material-invalid-badge-halfhorizontal-padding;
+}
+
+@mixin texteditor-validation-icon-offset-filled() {
+  inset-inline-end: $material-filled-texteditor-input-button-horizontal-padding;
+}
+
+@mixin validation-icon-position() {
+  &.dx-invalid,
+  &.dx-valid {
+    &.dx-editor-underlined {
+      .dx-texteditor-input {
+        padding-inline-end: $material-texteditor-invalid-badge-size + $material-base-standard-texteditor-input-horizontal-padding;
+      }
+    }
+
+    &.dx-editor-filled,
+    &.dx-editor-outlined {
+      @include texteditor-input-padding-filled();
+
+      .dx-texteditor-input-container {
+        &::after {
+          @include texteditor-validation-icon-offset-filled();
+        }
+      }
+    }
+
+    .dx-texteditor-input-container {
+      &::after {
+        @include texteditor-validation-icon-offset();
+      }
+    }
+  }
+}
+
+@mixin pending-indicator-position() {
+  &.dx-validation-pending {
+    &.dx-editor-underlined {
+      .dx-texteditor-input {
+        padding-inline-end: $material-texteditor-invalid-badge-size + $material-base-standard-texteditor-input-horizontal-padding;
+      }
+    }
+
+    &.dx-editor-filled,
+    &.dx-editor-outlined {
+      @include texteditor-input-padding-filled();
+
+      .dx-texteditor-input-container {
+        .dx-pending-indicator {
+          @include texteditor-validation-icon-offset-filled();
+        }
+      }
+    }
+
+    .dx-texteditor-input-container {
+      .dx-pending-indicator {
+        @include texteditor-validation-icon-offset();
+      }
+    }
+  }
+}
+
+.dx-texteditor {
+  border-top-left-radius: $texteditor-input-border-radius;
+  border-top-right-radius: $texteditor-input-border-radius;
+  position: relative;
+
+  @mixin dx-texteditor-borders-position() {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 0;
+    width: 100%;
+    content: '';
+    position: absolute;
+  }
+
+  &::before {
+    @include dx-texteditor-borders-position();
+
+    z-index: 2;
+    transform: scale(0);
+  }
+
+  &::after {
+    @include dx-texteditor-borders-position();
+  }
+
+  &.dx-state-focused {
+    .dx-texteditor-label {
+      color: $base-accent;
+      font-size: $material-texteditor-label-font-size;
+    }
+
+    &.dx-invalid {
+      .dx-texteditor-label {
+        color: $base-invalid-color;
+      }
+    }
+  }
+
+  &.dx-texteditor-label-outside {
+    .dx-texteditor-label {
+      color: $base-text-color;
+    }
+
+    &.dx-invalid {
+      .dx-texteditor-label {
+        color: $base-invalid-color;
+      }
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: $texteditor-focused-bg;
+
+    &::before {
+      border-bottom: 2px solid;
+      border-bottom-color: $texteditor-focused-border-color;
+      transform: scale(1);
+      transition: transform 0.6s cubic-bezier(0.4, 0, 0.02, 1);
+    }
+  }
+
+  @include validation-icon-position();
+  @include pending-indicator-position();
+
+  &.dx-editor-filled,
+  &.dx-editor-outlined {
+    .dx-placeholder::before,
+    .dx-lookup-field,
+    .dx-texteditor-input {
+      padding: $material-filled-texteditor-input-padding;
+    }
+  }
+
+  &.dx-editor-filled {
+    background-color: $texteditor-bg;
+
+    &::after {
+      border-bottom: 1px solid;
+      border-bottom-color: $texteditor-border-color;
+    }
+
+    &.dx-state-hover {
+      background-color: $texteditor-hover-bg;
+
+      &::after {
+        border-bottom-color: $texteditor-hover-border-color;
+      }
+    }
+
+    &.dx-state-disabled,
+    &.dx-state-readonly,
+    &.dx-state-readonly.dx-state-hover {
+      background-color: color.change($texteditor-bg, $alpha: 0.12);
+
+      .dx-texteditor-input {
+        color: $texteditor-disabled-color;
+      }
+    }
+  }
+
+  &.dx-editor-underlined {
+    background-color: transparent;
+
+    &::after {
+      border-bottom: 1px solid;
+      border-bottom-color: $texteditor-border-color;
+    }
+
+    &.dx-state-hover {
+      &::after {
+        border-bottom: 2px solid;
+        border-bottom-color: $texteditor-hover-border-color;
+      }
+    }
+
+    .dx-texteditor-input,
+    .dx-placeholder::before {
+      padding: $material-standard-texteditor-input-padding;
+    }
+
+    &.dx-state-disabled,
+    &.dx-state-readonly,
+    &.dx-state-readonly.dx-state-hover {
+      &::after {
+        border-bottom-style: dotted;
+        border-bottom-width: 1px;
+      }
+    }
+
+    &.dx-invalid {
+      &::after {
+        border-bottom-color: $texteditor-invalid-faded-border-color;
+      }
+    }
+  }
+
+  &.dx-editor-outlined {
+    background-color: transparent;
+    border-radius: $texteditor-input-border-radius;
+    box-shadow: inset 0 0 0 1px $texteditor-border-color;
+
+    &::before {
+      display: none;
+    }
+
+    &.dx-state-disabled,
+    &.dx-state-readonly {
+      box-shadow: inset 0 0 0 1px $texteditor-disabled-color;
+
+      .dx-texteditor-input {
+        color: $texteditor-disabled-color;
+      }
+    }
+
+    &.dx-state-hover {
+      box-shadow: inset 0 0 0 1px $texteditor-hover-border-color;
+    }
+
+    &.dx-state-focused {
+      box-shadow: inset 0 0 0 2px $texteditor-focused-border-color;
+
+      &.dx-invalid {
+        box-shadow: inset 0 0 0 2px $texteditor-invalid-focused-border-color;
+      }
+    }
+
+    &.dx-invalid {
+      box-shadow: inset 0 0 0 1px $texteditor-invalid-faded-border-color;
+    }
+  }
+}
+
+.dx-show-clear-button {
+  .dx-clear-button-area {
+    width: $material-texteditor-icon-container-size;
+    min-width: $material-texteditor-icon-container-size;
+    right: 0;
+  }
+
+  .dx-icon-clear {
+    color: $texteditor-button-clear-icon-color;
+    background-color: $texteditor-button-clear-icon-color-bg;
+    border-radius: 50%;
+
+    @include dx-texteditor-icon();
+    @include dx-icon-font-centered-sizing($material-texteditor-clear-icon-size);
+  }
+
+  &:not(.dx-texteditor-empty) {
+    @include validation-icon-position();
+    @include pending-indicator-position();
+  }
+}
+.dx-placeholder {
+  color: $texteditor-placeholder-color;
+  font-size: $material-texteditor-font-size;
+  line-height: normal;
+}
+
+.dx-texteditor-input {
+  margin: 0;
+  background-color: transparent;
+  color: $texteditor-color;
+  font-size: $material-texteditor-font-size;
+}
+
+.dx-invalid.dx-texteditor {
+  &.dx-state-hover {
+    &::after {
+      border-bottom-color: $texteditor-invalid-faded-border-color;
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom: 2px solid;
+      border-bottom-color: $texteditor-invalid-focused-border-color;
+    }
+  }
+
+  &.dx-show-invalid-badge .dx-texteditor-input-container {
+    &::after {
+      @include dx-invalid-material-badge();
+    }
+  }
+}
+
+.dx-texteditor-label {
+  position: absolute;
+  font-size: $material-texteditor-label-font-size;
+  color: $texteditor-label-color;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+  cursor: text;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  top: 0;
+  left: 0;
+
+  .dx-label {
+    display: flex;
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: auto;
+      max-width: 100%;
+      display: block;
+      margin-bottom: -1px;
+    }
+  }
+
+  .dx-invalid & {
+    color: $base-invalid-color;
+  }
+}
+
+@include dx-editor-outlined(
+  $texteditor-input-border-radius,
+  $material-texteditor-label-font-size,
+  $material-base-border-width,
+  2px,
+  solid,
+  $material-texteditor-label-font-size + 2,
+  $material-base-inline-block-height,
+  math.div(1px + $material-texteditor-label-font-size, 2),
+  $material-texteditor-label-outside-top-offset,
+  0.5px,
+  $material-filled-texteditor-input-horizontal-padding,
+  $material-filled-texteditor-input-horizontal-padding,
+  $base-bg,
+  none,
+  $texteditor-border-color,
+  $texteditor-border-color,
+  $texteditor-disabled-color,
+  $texteditor-disabled-color,
+  $texteditor-hover-border-color,
+  $texteditor-hover-border-color,
+  $texteditor-focused-border-color,
+  $texteditor-focused-border-color,
+  $texteditor-invalid-faded-border-color,
+  $texteditor-invalid-focused-border-color,
+  $texteditor-label-transition,
+  $material-texteditor-font-size,
+  $material-filled-texteditor-input-top-padding,
+  0,
+  $material-texteditor-label-outside-font-size,
+  $material-texteditor-label-outside-height,
+);
+@include dx-editor-filled(
+  $texteditor-label-transition,
+  $material-texteditor-label-font-size,
+  $material-texteditor-label-font-size,
+  $material-texteditor-label-font-size,
+  $material-texteditor-label-top-offset,
+  $material-texteditor-label-outside-top-offset,
+  $material-texteditor-font-size,
+  $material-texteditor-font-size,
+  $material-texteditor-font-size + 1px,
+  $material-filled-texteditor-input-horizontal-padding,
+  $material-filled-texteditor-input-with-label-top-padding,
+  $material-filled-texteditor-input-with-label-bottom-padding,
+  $material-texteditor-label-outside-font-size,
+  $material-texteditor-label-outside-height,
+);
+@include dx-editor-underlined(
+  $texteditor-label-transition,
+  $material-texteditor-label-font-size,
+  $material-texteditor-label-font-size,
+  $material-texteditor-label-font-size,
+  $material-texteditor-label-top-offset,
+  $material-texteditor-label-outside-top-offset,
+  $material-texteditor-font-size,
+  $material-texteditor-font-size,
+  $material-texteditor-font-size + 1px,
+  $material-standard-texteditor-with-label-input-top-padding,
+  $material-standard-texteditor-with-label-input-bottom-padding,
+  $material-texteditor-label-outside-font-size,
+  $material-texteditor-label-outside-height,
+);
+
+.dx-valid.dx-texteditor {
+  .dx-texteditor-input-container {
+    &::after {
+      @include dx-valid-material-badge();
+    }
+  }
+}
+
+.dx-validation-pending.dx-texteditor {
+  .dx-texteditor-input-container {
+    .dx-pending-indicator {
+      @include dx-pending-indicator-material();
+    }
+  }
+}
+
+@include dx-editor-buttons-container-material(
+  $material-underlined-editor-button-height,
+  $material-editor-custom-button-margin,
+  $material-editor-custom-button-margin * 2,
+  $material-filled-texteditor-spin-button-horizontal-padding,
+  $material-filled-texteditor-spin-button-horizontal-padding,
+  $material-button-vertical-padding,
+);