devextreme-themebuilder 26.1.2-beta → 26.1.3

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

@@ -1,614 +1,614 @@
-@use "sass:list";
-@use "sass:math";
-@use "sass:selector";
-
-// adduse
-
-$list-style: decimal lower-alpha lower-roman;
-$list-style-width: 1.2em;
-$list-style-margin: 0.3em;
-$list-style-outer-width: $list-style-margin + $list-style-width;
-$max-indent: 9;
-$resize-handle-size: 11px;
-$touch-resize-handle-size: 15px;
-$half-resize-handle-size: math.div($resize-handle-size, 2);
-$half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2);
-
-$transparent-border: 1px solid transparent;
-
-@function add-counter-reset($counter, $start: 1) {
-  @if $counter > $start {
-    @return add-counter-reset($counter - 1, $start) + " " + list-#{$counter};
-  }
-
-  @return list-#{$counter};
-}
-
-@function add-counter-set($counter, $start: 1) {
-  @if $counter > $start {
-    @return add-counter-set($counter - 1, $start) + " " + list-#{$counter} + " 0";
-  }
-
-  @return list-#{$counter} + " 0";
-}
-
-@mixin if-less-then-max-indent($value) {
-  @if $value < $max-indent {
-    li.ql-indent-#{$value} {
-      counter-reset: add-counter-reset($max-indent, $value + 1);
-    }
-  }
-}
-
-@mixin add-indent-styles($counter) {
-  @if $counter > 0 {
-    @include add-indent-styles($counter - 1);
-
-    .ql-indent-#{$counter} {
-      padding-inline-start: 3 * $counter * 1em;
-    }
-
-    li.ql-indent-#{$counter} {
-      padding-inline-start: 3 * $counter + $list-style-outer-width;
-    }
-  }
-}
-
-@mixin add-counter($counter) {
-  @if $counter > 0 {
-    @include add-counter($counter - 1);
-
-    ol li[data-list=ordered].ql-indent-#{$counter} {
-      counter-increment: list-#{$counter};
-
-      &::before {
-        content: counter(list-#{$counter}, list.nth($list-style, ($counter % 3) + 1)) ". ";
-      }
-    }
-
-    @include if-less-then-max-indent($counter);
-  }
-}
-
-.dx-htmleditor {
-  display: flex;
-  flex-direction: column;
-  border: $transparent-border;
-
-  &:not(.dx-state-disabled) {
-    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;
-  flex: 1;
-  flex-basis: auto;
-  min-height: 1px;
-  margin: 0;
-  position: relative;
-  overflow: hidden;
-}
-
-.ql-clipboard { // stylelint-disable-line selector-class-pattern
-  left: -100000px;
-  height: 1px;
-  overflow-y: hidden;
-  position: absolute;
-  top: 50%;
-
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.dx-htmleditor-content {
-  box-sizing: border-box;
-  line-height: 1.42;
-  width: 100%;
-  outline: none;
-  overflow-y: auto;
-  padding: 12px 15px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-
-  .dx-variable {
-    & > span {
-      padding: 3px 6px;
-      border-radius: 8px;
-    }
-  }
-
-  > * {
-    cursor: text;
-  }
-
-  p,
-  ol,
-  ul,
-  pre,
-  blockquote,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0;
-    padding: 0;
-  }
-
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  ul {
-    counter-reset: add-counter-reset($max-indent);
-  }
-
-  table {
-    border-collapse: collapse;
-  }
-
-  td,
-  th {
-    border: 1px solid #000;
-    padding: 2px 5px;
-  }
-
-  ol {
-    padding-inline-start: 1.5em;
-    counter-reset: add-counter-reset($max-indent);
-  }
-
-  ul {
-    padding-inline-start: 1.5em;
-  }
-
-  li {
-    list-style-type: none;
-    padding-inline-start: $list-style-outer-width;
-    position: relative;
-
-    &[data-list="bullet"]::before {
-      content: '\2022';
-    }
-
-    &[data-list="checked"]::before {
-      content: '\2611';
-    }
-
-    &[data-list="unchecked"]::before {
-      content: '\2610';
-    }
-
-    &::before {
-      display: inline-block;
-      margin-inline-start: -1 * $list-style-outer-width;
-      margin-inline-end: $list-style-margin;
-      text-align: end;
-      white-space: nowrap;
-      width: $list-style-width;
-    }
-
-    > .ql-ui { // stylelint-disable-line selector-class-pattern
-      visibility: hidden;
-    }
-
-    &[data-list="unchecked"],
-    &[data-list="checked"] {
-      > .ql-ui { // stylelint-disable-line selector-class-pattern
-        visibility: visible;
-      }
-    }
-  }
-
-  li[data-list="ordered"] {
-    counter-increment: list-0;
-
-    &::before {
-      content: counter(list-0, list.nth($list-style, 1)) ". ";
-    }
-  }
-
-  li[data-list="ordered"]:not([class*="ql-indent"]) {
-    counter-set: add-counter-set($max-indent);
-  }
-
-  @include add-counter($max-indent);
-  @include add-indent-styles($max-indent);
-
-  table { // stylelint-disable-line no-duplicate-selectors
-    table-layout: fixed;
-    width: 100%;
-
-    td,
-    th {
-      outline: none;
-    }
-  }
-
-  // stylelint-disable selector-class-pattern
-  .ql-code-block-container {
-    font-family: monospace;
-  }
-
-  code,
-  .ql-code-block-container {
-    background-color: rgba(191, 191, 191, 0.15);
-  }
-
-  .ql-video {
-    display: block;
-    max-width: 100%;
-  }
-
-  .ql-video.ql-align-center {
-    margin: 0 auto;
-  }
-
-  .ql-video.ql-align-right {
-    margin: 0 0 0 auto;
-  }
-
-  .ql-font-serif {
-    font-family: "Georgia", "Times New Roman", serif;
-  }
-
-  .ql-font-monospace {
-    font-family: "Monaco", "Courier New", monospace;
-  }
-
-  .ql-direction-rtl {
-    direction: rtl;
-    text-align: inherit;
-  }
-
-  &.ql-blank {
-    &::before {
-      color: rgba(0, 0, 0, 0.6);
-      content: attr(data-placeholder);
-      font-style: italic;
-      left: 15px;
-      pointer-events: none;
-      position: absolute;
-      right: 15px;
-    }
-
-    &::after {
-      content: attr(data-placeholder);
-      z-index: -1;
-      visibility: hidden;
-    }
-
-    &[data-placeholder] > p {
-      height: 0.1px;
-    }
-  }
-
-  // stylelint-enable selector-class-pattern
-
-  blockquote {
-    padding-inline-start: 12px;
-    border-inline-start: 4px solid;
-  }
-}
-
-.dx-suggestion-list-wrapper {
-  .dx-list {
-    min-height: 35px;
-
-    .dx-scrollable-content {
-      margin: 0;
-    }
-  }
-}
-
-.dx-suggestion-list {
-  min-width: 50px;
-
-  .dx-list-item {
-    display: block;
-  }
-
-  .dx-list-item-icon {
-    border-radius: 50%;
-    vertical-align: text-bottom;
-  }
-}
-
-.dx-formdialog-form {
-  min-width: 360px;
-}
-
-.dx-aidialog {
-  .dx-toolbar-after .dx-toolbar-item:nth-last-child(2) {
-    padding-inline-end: 0;
-  }
-}
-
-.dx-aidialog-controls {
-  display: flex;
-
-  .dx-selectbox {
-    flex: 1 0 0;
-  }
-}
-
-.dx-aidialog-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.dx-aidialog-title {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 600;
-}
-
-.dx-overlay-content {
-  &.dx-popup-fullscreen {
-    .dx-formdialog-form {
-      min-width: 240px;
-    }
-  }
-}
-
-.dx-formdialog-field-target .dx-field-item-content {
-  text-align: end;
-}
-
-.dx-color-format,
-.dx-background-format {
-  .dx-icon-color,
-  .dx-icon-background {
-    border-bottom: 3px solid transparent;
-  }
-}
-
-.dx-htmleditor-toolbar-separator {
-  border-left: $transparent-border;
-}
-
-.dx-htmleditor-toolbar-menu-separator {
-  width: 100%;
-  border-top: $transparent-border;
-
-  &::before {
-    content: none;
-  }
-}
-
-.dx-resize-frame {
-  position: absolute;
-  box-sizing: content-box;
-  border: 1px dashed lightslategrey;
-  pointer-events: none;
-
-  .dx-resizable-handle {
-    pointer-events: auto;
-  }
-
-  .dx-resizable-handle-corner-top-right,
-  .dx-resizable-handle-corner-top-left,
-  .dx-resizable-handle-corner-bottom-right,
-  .dx-resizable-handle-corner-bottom-left {
-    border: 1px solid white;
-    width: $resize-handle-size;
-    height: $resize-handle-size;
-    border-radius: 0;
-
-    @at-root #{selector.append(".dx-touch-device", &)} {
-      width: $touch-resize-handle-size;
-      height: $touch-resize-handle-size;
-    }
-  }
-
-  .dx-resizable-handle-corner-top-right,
-  .dx-resizable-handle-corner-bottom-right {
-    right: -$half-resize-handle-size;
-
-    @at-root #{selector.append(".dx-touch-device", &)} {
-      right: -$half-touch-resize-handle-size;
-    }
-  }
-
-  .dx-resizable-handle-corner-top-left,
-  .dx-resizable-handle-corner-bottom-left {
-    left: -$half-resize-handle-size;
-
-    @at-root #{selector.append(".dx-touch-device", &)} {
-      left: -$half-touch-resize-handle-size;
-    }
-  }
-
-  .dx-resizable-handle-corner-top-right,
-  .dx-resizable-handle-corner-top-left {
-    top: -$half-resize-handle-size;
-
-    @at-root #{selector.append(".dx-touch-device", &)} {
-      top: -$half-touch-resize-handle-size;
-    }
-  }
-
-  .dx-resizable-handle-corner-bottom-right,
-  .dx-resizable-handle-corner-bottom-left {
-    bottom: -$half-resize-handle-size;
-
-    @at-root #{selector.append(".dx-touch-device", &)} {
-      bottom: -$half-touch-resize-handle-size;
-    }
-  }
-
-  .dx-resizable-handle-right,
-  .dx-resizable-handle-left,
-  .dx-resizable-handle-top,
-  .dx-resizable-handle-bottom {
-    &::after {
-      content: "";
-      position: absolute;
-      width: $resize-handle-size;
-      height: $resize-handle-size;
-      border: 1px solid white;
-
-      @at-root #{selector.append(".dx-touch-device", &)} {
-        width: $touch-resize-handle-size;
-        height: $touch-resize-handle-size;
-      }
-    }
-  }
-
-  .dx-resizable-handle-right,
-  .dx-resizable-handle-left {
-    &::after {
-      top: calc(50% - #{$half-resize-handle-size});
-
-      @at-root #{selector.append(".dx-touch-device", &)} {
-        top: calc(50% - #{$half-touch-resize-handle-size});
-      }
-    }
-  }
-
-  .dx-resizable-handle-top,
-  .dx-resizable-handle-bottom {
-    &::after {
-      left: calc(50% - #{$half-resize-handle-size});
-
-      @at-root #{selector.append(".dx-touch-device", &)} {
-        left: calc(50% - #{$half-touch-resize-handle-size});
-      }
-    }
-  }
-
-  .dx-resizable-handle-right::after {
-    right: -$half-resize-handle-size;
-
-    @at-root #{selector.append(".dx-touch-device", &)} {
-      right: -$half-touch-resize-handle-size;
-    }
-  }
-
-  .dx-resizable-handle-left::after {
-    left: -$half-resize-handle-size;
-
-    @at-root #{selector.append(".dx-touch-device", &)} {
-      left: -$half-touch-resize-handle-size;
-    }
-  }
-
-  .dx-resizable-handle-top::after {
-    top: -$half-resize-handle-size;
-
-    @at-root #{selector.append(".dx-touch-device", &)} {
-      top: -$half-touch-resize-handle-size;
-    }
-  }
-
-  .dx-resizable-handle-bottom::after {
-    bottom: -$half-resize-handle-size;
-
-    @at-root #{selector.append(".dx-touch-device", &)} {
-      bottom: -$half-touch-resize-handle-size;
-    }
-  }
-}
-
-.dx-mention {
-  padding: 1px 0;
-  border-radius: 2px;
-
-  .dx-template-wrapper {
-    white-space: nowrap;
-    display: inline-block;
-  }
-
-  & > span {
-    margin: 0 2px;
-  }
-}
-
-.dx-table-resize-frame {
-  position: absolute;
-  pointer-events: none;
-
-  > div {
-    position: absolute;
-    pointer-events: auto;
-    background-color: transparent;
-  }
-
-  .dx-htmleditor-column-resizer {
-    width: 5px;
-    top: 0;
-    height: 100%;
-    cursor: col-resize;
-  }
-
-  .dx-htmleditor-highlighted-column {
-    width: 3px;
-    top: 0;
-    height: 100%;
-  }
-
-  .dx-htmleditor-row-resizer {
-    height: 5px;
-    left: 0;
-    width: 100%;
-    cursor: row-resize;
-  }
-
-  .dx-htmleditor-highlighted-row {
-    height: 3px;
-    left: 0;
-    width: 100%;
-  }
-}
+@use "sass:list";
+@use "sass:math";
+@use "sass:selector";
+
+// adduse
+
+$list-style: decimal lower-alpha lower-roman;
+$list-style-width: 1.2em;
+$list-style-margin: 0.3em;
+$list-style-outer-width: $list-style-margin + $list-style-width;
+$max-indent: 9;
+$resize-handle-size: 11px;
+$touch-resize-handle-size: 15px;
+$half-resize-handle-size: math.div($resize-handle-size, 2);
+$half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2);
+
+$transparent-border: 1px solid transparent;
+
+@function add-counter-reset($counter, $start: 1) {
+  @if $counter > $start {
+    @return add-counter-reset($counter - 1, $start) + " " + list-#{$counter};
+  }
+
+  @return list-#{$counter};
+}
+
+@function add-counter-set($counter, $start: 1) {
+  @if $counter > $start {
+    @return add-counter-set($counter - 1, $start) + " " + list-#{$counter} + " 0";
+  }
+
+  @return list-#{$counter} + " 0";
+}
+
+@mixin if-less-then-max-indent($value) {
+  @if $value < $max-indent {
+    li.ql-indent-#{$value} {
+      counter-reset: add-counter-reset($max-indent, $value + 1);
+    }
+  }
+}
+
+@mixin add-indent-styles($counter) {
+  @if $counter > 0 {
+    @include add-indent-styles($counter - 1);
+
+    .ql-indent-#{$counter} {
+      padding-inline-start: 3 * $counter * 1em;
+    }
+
+    li.ql-indent-#{$counter} {
+      padding-inline-start: 3 * $counter + $list-style-outer-width;
+    }
+  }
+}
+
+@mixin add-counter($counter) {
+  @if $counter > 0 {
+    @include add-counter($counter - 1);
+
+    ol li[data-list=ordered].ql-indent-#{$counter} {
+      counter-increment: list-#{$counter};
+
+      &::before {
+        content: counter(list-#{$counter}, list.nth($list-style, ($counter % 3) + 1)) ". ";
+      }
+    }
+
+    @include if-less-then-max-indent($counter);
+  }
+}
+
+.dx-htmleditor {
+  display: flex;
+  flex-direction: column;
+  border: $transparent-border;
+
+  &:not(.dx-state-disabled) {
+    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;
+  flex: 1;
+  flex-basis: auto;
+  min-height: 1px;
+  margin: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.ql-clipboard { // stylelint-disable-line selector-class-pattern
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.dx-htmleditor-content {
+  box-sizing: border-box;
+  line-height: 1.42;
+  width: 100%;
+  outline: none;
+  overflow-y: auto;
+  padding: 12px 15px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+
+  .dx-variable {
+    & > span {
+      padding: 3px 6px;
+      border-radius: 8px;
+    }
+  }
+
+  > * {
+    cursor: text;
+  }
+
+  p,
+  ol,
+  ul,
+  pre,
+  blockquote,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    padding: 0;
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ul {
+    counter-reset: add-counter-reset($max-indent);
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  td,
+  th {
+    border: 1px solid #000;
+    padding: 2px 5px;
+  }
+
+  ol {
+    padding-inline-start: 1.5em;
+    counter-reset: add-counter-reset($max-indent);
+  }
+
+  ul {
+    padding-inline-start: 1.5em;
+  }
+
+  li {
+    list-style-type: none;
+    padding-inline-start: $list-style-outer-width;
+    position: relative;
+
+    &[data-list="bullet"]::before {
+      content: '\2022';
+    }
+
+    &[data-list="checked"]::before {
+      content: '\2611';
+    }
+
+    &[data-list="unchecked"]::before {
+      content: '\2610';
+    }
+
+    &::before {
+      display: inline-block;
+      margin-inline-start: -1 * $list-style-outer-width;
+      margin-inline-end: $list-style-margin;
+      text-align: end;
+      white-space: nowrap;
+      width: $list-style-width;
+    }
+
+    > .ql-ui { // stylelint-disable-line selector-class-pattern
+      visibility: hidden;
+    }
+
+    &[data-list="unchecked"],
+    &[data-list="checked"] {
+      > .ql-ui { // stylelint-disable-line selector-class-pattern
+        visibility: visible;
+      }
+    }
+  }
+
+  li[data-list="ordered"] {
+    counter-increment: list-0;
+
+    &::before {
+      content: counter(list-0, list.nth($list-style, 1)) ". ";
+    }
+  }
+
+  li[data-list="ordered"]:not([class*="ql-indent"]) {
+    counter-set: add-counter-set($max-indent);
+  }
+
+  @include add-counter($max-indent);
+  @include add-indent-styles($max-indent);
+
+  table { // stylelint-disable-line no-duplicate-selectors
+    table-layout: fixed;
+    width: 100%;
+
+    td,
+    th {
+      outline: none;
+    }
+  }
+
+  // stylelint-disable selector-class-pattern
+  .ql-code-block-container {
+    font-family: monospace;
+  }
+
+  code,
+  .ql-code-block-container {
+    background-color: rgba(191, 191, 191, 0.15);
+  }
+
+  .ql-video {
+    display: block;
+    max-width: 100%;
+  }
+
+  .ql-video.ql-align-center {
+    margin: 0 auto;
+  }
+
+  .ql-video.ql-align-right {
+    margin: 0 0 0 auto;
+  }
+
+  .ql-font-serif {
+    font-family: "Georgia", "Times New Roman", serif;
+  }
+
+  .ql-font-monospace {
+    font-family: "Monaco", "Courier New", monospace;
+  }
+
+  .ql-direction-rtl {
+    direction: rtl;
+    text-align: inherit;
+  }
+
+  &.ql-blank {
+    &::before {
+      color: rgba(0, 0, 0, 0.6);
+      content: attr(data-placeholder);
+      font-style: italic;
+      left: 15px;
+      pointer-events: none;
+      position: absolute;
+      right: 15px;
+    }
+
+    &::after {
+      content: attr(data-placeholder);
+      z-index: -1;
+      visibility: hidden;
+    }
+
+    &[data-placeholder] > p {
+      height: 0.1px;
+    }
+  }
+
+  // stylelint-enable selector-class-pattern
+
+  blockquote {
+    padding-inline-start: 12px;
+    border-inline-start: 4px solid;
+  }
+}
+
+.dx-suggestion-list-wrapper {
+  .dx-list {
+    min-height: 35px;
+
+    .dx-scrollable-content {
+      margin: 0;
+    }
+  }
+}
+
+.dx-suggestion-list {
+  min-width: 50px;
+
+  .dx-list-item {
+    display: block;
+  }
+
+  .dx-list-item-icon {
+    border-radius: 50%;
+    vertical-align: text-bottom;
+  }
+}
+
+.dx-formdialog-form {
+  min-width: 360px;
+}
+
+.dx-aidialog {
+  .dx-toolbar-after .dx-toolbar-item:nth-last-child(2) {
+    padding-inline-end: 0;
+  }
+}
+
+.dx-aidialog-controls {
+  display: flex;
+
+  .dx-selectbox {
+    flex: 1 0 0;
+  }
+}
+
+.dx-aidialog-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.dx-aidialog-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+}
+
+.dx-overlay-content {
+  &.dx-popup-fullscreen {
+    .dx-formdialog-form {
+      min-width: 240px;
+    }
+  }
+}
+
+.dx-formdialog-field-target .dx-field-item-content {
+  text-align: end;
+}
+
+.dx-color-format,
+.dx-background-format {
+  .dx-icon-color,
+  .dx-icon-background {
+    border-bottom: 3px solid transparent;
+  }
+}
+
+.dx-htmleditor-toolbar-separator {
+  border-left: $transparent-border;
+}
+
+.dx-htmleditor-toolbar-menu-separator {
+  width: 100%;
+  border-top: $transparent-border;
+
+  &::before {
+    content: none;
+  }
+}
+
+.dx-resize-frame {
+  position: absolute;
+  box-sizing: content-box;
+  border: 1px dashed lightslategrey;
+  pointer-events: none;
+
+  .dx-resizable-handle {
+    pointer-events: auto;
+  }
+
+  .dx-resizable-handle-corner-top-right,
+  .dx-resizable-handle-corner-top-left,
+  .dx-resizable-handle-corner-bottom-right,
+  .dx-resizable-handle-corner-bottom-left {
+    border: 1px solid white;
+    width: $resize-handle-size;
+    height: $resize-handle-size;
+    border-radius: 0;
+
+    @at-root #{selector.append(".dx-touch-device", &)} {
+      width: $touch-resize-handle-size;
+      height: $touch-resize-handle-size;
+    }
+  }
+
+  .dx-resizable-handle-corner-top-right,
+  .dx-resizable-handle-corner-bottom-right {
+    right: -$half-resize-handle-size;
+
+    @at-root #{selector.append(".dx-touch-device", &)} {
+      right: -$half-touch-resize-handle-size;
+    }
+  }
+
+  .dx-resizable-handle-corner-top-left,
+  .dx-resizable-handle-corner-bottom-left {
+    left: -$half-resize-handle-size;
+
+    @at-root #{selector.append(".dx-touch-device", &)} {
+      left: -$half-touch-resize-handle-size;
+    }
+  }
+
+  .dx-resizable-handle-corner-top-right,
+  .dx-resizable-handle-corner-top-left {
+    top: -$half-resize-handle-size;
+
+    @at-root #{selector.append(".dx-touch-device", &)} {
+      top: -$half-touch-resize-handle-size;
+    }
+  }
+
+  .dx-resizable-handle-corner-bottom-right,
+  .dx-resizable-handle-corner-bottom-left {
+    bottom: -$half-resize-handle-size;
+
+    @at-root #{selector.append(".dx-touch-device", &)} {
+      bottom: -$half-touch-resize-handle-size;
+    }
+  }
+
+  .dx-resizable-handle-right,
+  .dx-resizable-handle-left,
+  .dx-resizable-handle-top,
+  .dx-resizable-handle-bottom {
+    &::after {
+      content: "";
+      position: absolute;
+      width: $resize-handle-size;
+      height: $resize-handle-size;
+      border: 1px solid white;
+
+      @at-root #{selector.append(".dx-touch-device", &)} {
+        width: $touch-resize-handle-size;
+        height: $touch-resize-handle-size;
+      }
+    }
+  }
+
+  .dx-resizable-handle-right,
+  .dx-resizable-handle-left {
+    &::after {
+      top: calc(50% - #{$half-resize-handle-size});
+
+      @at-root #{selector.append(".dx-touch-device", &)} {
+        top: calc(50% - #{$half-touch-resize-handle-size});
+      }
+    }
+  }
+
+  .dx-resizable-handle-top,
+  .dx-resizable-handle-bottom {
+    &::after {
+      left: calc(50% - #{$half-resize-handle-size});
+
+      @at-root #{selector.append(".dx-touch-device", &)} {
+        left: calc(50% - #{$half-touch-resize-handle-size});
+      }
+    }
+  }
+
+  .dx-resizable-handle-right::after {
+    right: -$half-resize-handle-size;
+
+    @at-root #{selector.append(".dx-touch-device", &)} {
+      right: -$half-touch-resize-handle-size;
+    }
+  }
+
+  .dx-resizable-handle-left::after {
+    left: -$half-resize-handle-size;
+
+    @at-root #{selector.append(".dx-touch-device", &)} {
+      left: -$half-touch-resize-handle-size;
+    }
+  }
+
+  .dx-resizable-handle-top::after {
+    top: -$half-resize-handle-size;
+
+    @at-root #{selector.append(".dx-touch-device", &)} {
+      top: -$half-touch-resize-handle-size;
+    }
+  }
+
+  .dx-resizable-handle-bottom::after {
+    bottom: -$half-resize-handle-size;
+
+    @at-root #{selector.append(".dx-touch-device", &)} {
+      bottom: -$half-touch-resize-handle-size;
+    }
+  }
+}
+
+.dx-mention {
+  padding: 1px 0;
+  border-radius: 2px;
+
+  .dx-template-wrapper {
+    white-space: nowrap;
+    display: inline-block;
+  }
+
+  & > span {
+    margin: 0 2px;
+  }
+}
+
+.dx-table-resize-frame {
+  position: absolute;
+  pointer-events: none;
+
+  > div {
+    position: absolute;
+    pointer-events: auto;
+    background-color: transparent;
+  }
+
+  .dx-htmleditor-column-resizer {
+    width: 5px;
+    top: 0;
+    height: 100%;
+    cursor: col-resize;
+  }
+
+  .dx-htmleditor-highlighted-column {
+    width: 3px;
+    top: 0;
+    height: 100%;
+  }
+
+  .dx-htmleditor-row-resizer {
+    height: 5px;
+    left: 0;
+    width: 100%;
+    cursor: row-resize;
+  }
+
+  .dx-htmleditor-highlighted-row {
+    height: 3px;
+    left: 0;
+    width: 100%;
+  }
+}