devextreme-themebuilder 26.1.2-beta → 26.1.3

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

@@ -1,402 +1,402 @@
-@use "sass:math";
-@use "sass:color";
-@use "colors" as *;
-@use "../colors" as *;
-@use "sizes" as *;
-@use "../sizes" as *;
-@use "../../base/icon_fonts" as *;
-@use "../button/colors" as *;
-@use "../button/sizes" as *;
-@use "../button/mixins" as *;
-@use "../checkBox/colors" as *;
-@use "../../base/list";
-@use "../../base/list/mixins" as *;
-
-// adduse
-@use "../badge";
-
-$generic-list-border: $generic-list-border-width solid;
-$generic-list-item-border: $generic-list-item-border-width solid;
-$generic-list-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width;
-
-.dx-list-item-chevron {
-  @include dx-icon(chevronnext);
-  @include dx-icon-sizing($generic-base-icon-size);
-
-  margin-inline-start: -5px;
-  color: $list-item-chevron-icon-color;
-}
-
-.dx-list-item-badge-container {
-  padding-inline-end: 10px;
-}
-
-.dx-list-switchable-delete-button-inner-wrapper {
-  padding-inline-start: 1px;
-}
-
-.dx-list-item-icon-container {
-  width: $generic-base-icon-size + $generic-list-item-horizontal-padding;
-  height: $generic-base-icon-size;
-  vertical-align: top;
-}
-
-.dx-list-item-icon {
-  @include dx-icon-sizing($generic-base-icon-size);
-}
-
-.dx-list-search {
-  margin-bottom: $generic-list-searchbox-margin-bottom;
-}
-
-.dx-list-item-before-bag,
-.dx-list-item-after-bag {
-  display: table-cell;
-  width: 0;
-}
-
-@mixin item-states() {
-  &.dx-state-hover {
-    background-color: $list-item-hover-bg;
-    color: $list-item-hover-color;
-
-    .dx-list-item-icon-container .dx-icon {
-      color: $list-item-hover-color;
-    }
-
-    @include toggle-delete-icon($list-item-hover-color);
-  }
-
-  &.dx-list-item-selected {
-    background-color: $list-item-selected-bg;
-    color: $list-item-selected-color;
-
-    .dx-list-item-icon-container .dx-icon {
-      color: $list-item-selected-color;
-    }
-
-    &.dx-state-hover:not(.dx-state-focused) {
-      background-color: $list-item-selected-hover-bg;
-      color: $list-item-color;
-    }
-
-    @include toggle-delete-icon($list-item-selected-color);
-  }
-
-  &.dx-state-focused {
-    background-color: $list-focused-bg;
-    color: $list-item-focus-color;
-
-    .dx-list-item-icon-container .dx-icon {
-      color: $list-item-focus-color;
-    }
-
-    .dx-list-item-chevron {
-      border-color: $list-chevron-focus-color;
-    }
-
-    @include toggle-delete-icon($list-item-focus-color);
-  }
-
-  &.dx-state-focused.dx-list-item-selected {
-    background-color: $list-item-focused-selected-bg;
-    color: $base-inverted-text-color;
-  }
-
-  &.dx-state-active {
-    background-color: $list-item-active-bg;
-    color: $list-item-active-color;
-
-    .dx-list-item-icon-container .dx-icon {
-      color: $list-item-active-color;
-    }
-
-    .dx-list-slide-item-content {
-      background-color: $list-item-active-bg;
-      color: $list-item-active-color;
-    }
-
-    @include toggle-delete-icon($list-item-active-color);
-  }
-
-  .dx-list-static-delete-button .dx-icon {
-    color: $list-icon-color;
-  }
-
-  &.dx-state-active,
-  &.dx-state-focused {
-    .dx-list-static-delete-button .dx-icon {
-      color: $base-icon-color;
-    }
-  }
-}
-
-@mixin dx-list-sizing($item-horizontal-padding) {
-  .dx-list {
-    border: none;
-
-    &.dx-list-with-search .dx-scrollable-wrapper {
-      height: calc(100% - #{math.round($generic-list-search-editor-height + $generic-list-searchbox-margin-bottom)});
-    }
-
-    &.dx-list-select-decorator-enabled {
-      .dx-list-item,
-      .dx-list-select-all {
-        &.dx-state-hover {
-          .dx-radiobutton-icon,
-          .dx-checkbox-icon {
-            border-color: $checkbox-hover-border-color;
-          }
-        }
-
-        &.dx-state-focused {
-          .dx-radiobutton-icon,
-          .dx-checkbox-icon {
-            border: 1px solid;
-            border-color: $checkbox-border-color-focused;
-          }
-        }
-      }
-    }
-
-    &:not(.dx-list-select-decorator-enabled) {
-      .dx-list-item {
-        @include item-states();
-      }
-
-      .dx-list-group-header {
-        @include item-states();
-      }
-    }
-  }
-
-  .dx-list-group-header {
-    font-weight: bold;
-    padding: $generic-list-group-header-vertical-padding $item-horizontal-padding $generic-list-item-vertical-padding $item-horizontal-padding;
-    border-top: $generic-list-item-border;
-    border-top-color: $list-border-color;
-    border-bottom: $list-group-header-border-bottom;
-    border-bottom-color: $list-border-color;
-    background: $list-group-header-bg;
-    color: $list-group-color;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .dx-list-group:first-of-type & {
-      border-top: none;
-    }
-
-    .dx-list-group-collapsed .dx-list-group-header-indicator &::before {
-      border-bottom-color: $list-group-color;
-    }
-
-    .dx-list-group-header-indicator {
-      order: 1;
-
-      .dx-list-collapsible-groups &::before {
-        width: 0;
-        height: 0;
-        display: block;
-        border-style: solid;
-        border-color: transparent;
-        border-width: 5px 5px 0 5px;
-        border-top-color: $list-group-color;
-        content: ' ';
-      }
-
-      .dx-list-group-collapsed &::before {
-        border-bottom-color: $list-group-color;
-        border-width: 0 5px 5px 5px;
-      }
-    }
-  }
-
-  .dx-list-item {
-    &:first-of-type {
-      border-top: none;
-    }
-
-    &:last-of-type {
-      border-bottom: none;
-    }
-
-    .dx-icon-toggle-delete {
-      background-size: 100%;
-    }
-
-    @include toggle-delete-icon($list-icon-color);
-
-    &.dx-list-item-ghost-reordering {
-      &.dx-state-focused {
-        &.dx-state-hover {
-          color: $list-item-ghost-color;
-          background: $list-item-ghost-bg;
-          border-top: 1px solid;
-          border-top-color: color.change($list-item-ghost-border-color, $alpha: 0.5);
-          border-bottom: 1px solid;
-          border-bottom-color: color.change($list-item-ghost-border-color, $alpha: 0.5);
-          box-shadow: 0 0 1px color.change($list-item-ghost-shadow-color, $alpha: 0.1), 0 1px 3px color.change($list-item-ghost-shadow-color, $alpha: 0.2);
-        }
-      }
-    }
-  }
-
-  .dx-list-item,
-  .dx-list .dx-empty-message {
-    border-top: $generic-list-item-border;
-    border-top-color: $list-border-color;
-    color: $list-normal-color;
-
-    .dx-list-item-separator-hidden & {
-      border-top: none;
-      border-bottom: none;
-    }
-  }
-
-  .dx-list-item-content,
-  .dx-list .dx-empty-message {
-    padding: $generic-list-item-vertical-padding $item-horizontal-padding;
-  }
-
-  .dx-list-next-button .dx-button {
-    @include dx-button-withtext-sizing();
-  }
-
-  .dx-list-item-chevron-container {
-    display: table-cell;
-    vertical-align: middle;
-    width: 6px + $item-horizontal-padding;
-  }
-
-  .dx-list-border-visible {
-    border: $generic-list-border;
-    border-color: $list-border-color;
-
-    .dx-list-select-all {
-      border-bottom: $generic-list-border;
-      border-bottom-color: $list-border-color;
-    }
-  }
-
-  .dx-list-item-before-bag {
-    .dx-list-toggle-delete-switch {
-      display: block;
-      float: left;
-      padding: 3px 0;
-    }
-
-    &.dx-list-toggle-delete-switch-container {
-      width: $item-horizontal-padding + 19px;
-    }
-
-    &.dx-list-select-checkbox-container,
-    &.dx-list-select-radiobutton-container {
-      width: $item-horizontal-padding + 21px;
-    }
-
-    .dx-button.dx-list-toggle-delete-switch {
-      border: none;
-      background: transparent;
-      box-shadow: none;
-
-      .dx-button-content {
-        padding: 0;
-      }
-    }
-
-    .dx-icon-toggle-delete {
-      margin-top: math.div($generic-list-item-vertical-padding, 2);
-      margin-bottom: math.div($generic-list-item-vertical-padding, 2);
-      margin-inline-start: $item-horizontal-padding;
-      margin-inline-end: math.div($item-horizontal-padding, 2);
-      width: 9px + $generic-list-item-vertical-padding;
-      height: 9px + $generic-list-item-vertical-padding;
-    }
-
-    .dx-list-select-checkbox,
-    .dx-list-select-radiobutton {
-      margin-top: $generic-list-select-all-margin-top;
-      margin-bottom: -3px;
-      margin-inline-start: $item-horizontal-padding;
-    }
-  }
-
-  .dx-list-select-all {
-    padding: $generic-list-item-vertical-padding - 1px 0 $generic-list-item-vertical-padding - 2px;
-    border-bottom: $generic-list-item-border;
-    border-bottom-color: $list-border-color;
-  }
-
-  .dx-list-select-all-checkbox {
-    margin-top: -1px;
-    margin-bottom: -3px;
-    margin-inline-end: $generic-list-select-all-margin-right;
-    margin-inline-start: $item-horizontal-padding;
-  }
-
-  .dx-list-select-all-label {
-    line-height: $generic-list-select-all-label-line-height;
-    padding: 0 $generic-list-item-horizontal-padding;
-    margin-top: $generic-list-select-all-label-margin-top;
-  }
-
-  .dx-list-item-after-bag {
-    &.dx-list-static-delete-button-container {
-      width: $item-horizontal-padding + $generic-base-icon-size + $generic-list-deletebutton-padding * 2 + $generic-button-border-weight * 2;
-    }
-
-    &.dx-list-reorder-handle-container {
-      width: $item-horizontal-padding + $generic-base-icon-size * 1.3;
-    }
-
-    .dx-list-reorder-handle {
-      @include dx-icon(dragvertical);
-      @include dx-icon-sizing($generic-base-icon-size, $generic-base-icon-size * 1.6);
-    }
-  }
-
-  .dx-list-slide-menu-button {
-    bottom: 1px;
-  }
-
-  .dx-list-slide-menu-button-delete {
-    border: 1px solid transparent;
-    color: $list-menu-button-delete-color;
-    background-color: $list-menu-button-delete-bg;
-  }
-
-  .dx-list-slide-menu-button-menu {
-    border: 1px solid transparent;
-    color: $list-menu-button-default-color;
-    background-color: $list-menu-button-default-bg;
-  }
-
-  .dx-list-switchable-delete-button,
-  .dx-list-static-delete-button {
-    margin-inline-end: $item-horizontal-padding;
-    padding: 0;
-
-    .dx-button-content {
-      padding: $generic-list-deletebutton-padding;
-    }
-  }
-
-  .dx-list-context-menucontent {
-    background-color: $list-holdmenu-bg;
-    border: 1px solid;
-    border-color: $list-holdmenu-border-color;
-    border-radius: 0;
-    box-shadow: 0 3px 10px $list-holdmenu-shadow-color;
-  }
-
-  .dx-state-disabled {
-    &.dx-list-item,
-    .dx-list-item {
-      background-color: transparent;
-      opacity: 0.6;
-    }
-  }
-}
-
-@include dx-list-sizing($generic-list-item-horizontal-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 "../button/colors" as *;
+@use "../button/sizes" as *;
+@use "../button/mixins" as *;
+@use "../checkBox/colors" as *;
+@use "../../base/list";
+@use "../../base/list/mixins" as *;
+
+// adduse
+@use "../badge";
+
+$generic-list-border: $generic-list-border-width solid;
+$generic-list-item-border: $generic-list-item-border-width solid;
+$generic-list-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width;
+
+.dx-list-item-chevron {
+  @include dx-icon(chevronnext);
+  @include dx-icon-sizing($generic-base-icon-size);
+
+  margin-inline-start: -5px;
+  color: $list-item-chevron-icon-color;
+}
+
+.dx-list-item-badge-container {
+  padding-inline-end: 10px;
+}
+
+.dx-list-switchable-delete-button-inner-wrapper {
+  padding-inline-start: 1px;
+}
+
+.dx-list-item-icon-container {
+  width: $generic-base-icon-size + $generic-list-item-horizontal-padding;
+  height: $generic-base-icon-size;
+  vertical-align: top;
+}
+
+.dx-list-item-icon {
+  @include dx-icon-sizing($generic-base-icon-size);
+}
+
+.dx-list-search {
+  margin-bottom: $generic-list-searchbox-margin-bottom;
+}
+
+.dx-list-item-before-bag,
+.dx-list-item-after-bag {
+  display: table-cell;
+  width: 0;
+}
+
+@mixin item-states() {
+  &.dx-state-hover {
+    background-color: $list-item-hover-bg;
+    color: $list-item-hover-color;
+
+    .dx-list-item-icon-container .dx-icon {
+      color: $list-item-hover-color;
+    }
+
+    @include toggle-delete-icon($list-item-hover-color);
+  }
+
+  &.dx-list-item-selected {
+    background-color: $list-item-selected-bg;
+    color: $list-item-selected-color;
+
+    .dx-list-item-icon-container .dx-icon {
+      color: $list-item-selected-color;
+    }
+
+    &.dx-state-hover:not(.dx-state-focused) {
+      background-color: $list-item-selected-hover-bg;
+      color: $list-item-color;
+    }
+
+    @include toggle-delete-icon($list-item-selected-color);
+  }
+
+  &.dx-state-focused {
+    background-color: $list-focused-bg;
+    color: $list-item-focus-color;
+
+    .dx-list-item-icon-container .dx-icon {
+      color: $list-item-focus-color;
+    }
+
+    .dx-list-item-chevron {
+      border-color: $list-chevron-focus-color;
+    }
+
+    @include toggle-delete-icon($list-item-focus-color);
+  }
+
+  &.dx-state-focused.dx-list-item-selected {
+    background-color: $list-item-focused-selected-bg;
+    color: $base-inverted-text-color;
+  }
+
+  &.dx-state-active {
+    background-color: $list-item-active-bg;
+    color: $list-item-active-color;
+
+    .dx-list-item-icon-container .dx-icon {
+      color: $list-item-active-color;
+    }
+
+    .dx-list-slide-item-content {
+      background-color: $list-item-active-bg;
+      color: $list-item-active-color;
+    }
+
+    @include toggle-delete-icon($list-item-active-color);
+  }
+
+  .dx-list-static-delete-button .dx-icon {
+    color: $list-icon-color;
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-list-static-delete-button .dx-icon {
+      color: $base-icon-color;
+    }
+  }
+}
+
+@mixin dx-list-sizing($item-horizontal-padding) {
+  .dx-list {
+    border: none;
+
+    &.dx-list-with-search .dx-scrollable-wrapper {
+      height: calc(100% - #{math.round($generic-list-search-editor-height + $generic-list-searchbox-margin-bottom)});
+    }
+
+    &.dx-list-select-decorator-enabled {
+      .dx-list-item,
+      .dx-list-select-all {
+        &.dx-state-hover {
+          .dx-radiobutton-icon,
+          .dx-checkbox-icon {
+            border-color: $checkbox-hover-border-color;
+          }
+        }
+
+        &.dx-state-focused {
+          .dx-radiobutton-icon,
+          .dx-checkbox-icon {
+            border: 1px solid;
+            border-color: $checkbox-border-color-focused;
+          }
+        }
+      }
+    }
+
+    &:not(.dx-list-select-decorator-enabled) {
+      .dx-list-item {
+        @include item-states();
+      }
+
+      .dx-list-group-header {
+        @include item-states();
+      }
+    }
+  }
+
+  .dx-list-group-header {
+    font-weight: bold;
+    padding: $generic-list-group-header-vertical-padding $item-horizontal-padding $generic-list-item-vertical-padding $item-horizontal-padding;
+    border-top: $generic-list-item-border;
+    border-top-color: $list-border-color;
+    border-bottom: $list-group-header-border-bottom;
+    border-bottom-color: $list-border-color;
+    background: $list-group-header-bg;
+    color: $list-group-color;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .dx-list-group:first-of-type & {
+      border-top: none;
+    }
+
+    .dx-list-group-collapsed .dx-list-group-header-indicator &::before {
+      border-bottom-color: $list-group-color;
+    }
+
+    .dx-list-group-header-indicator {
+      order: 1;
+
+      .dx-list-collapsible-groups &::before {
+        width: 0;
+        height: 0;
+        display: block;
+        border-style: solid;
+        border-color: transparent;
+        border-width: 5px 5px 0 5px;
+        border-top-color: $list-group-color;
+        content: ' ';
+      }
+
+      .dx-list-group-collapsed &::before {
+        border-bottom-color: $list-group-color;
+        border-width: 0 5px 5px 5px;
+      }
+    }
+  }
+
+  .dx-list-item {
+    &:first-of-type {
+      border-top: none;
+    }
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+
+    .dx-icon-toggle-delete {
+      background-size: 100%;
+    }
+
+    @include toggle-delete-icon($list-icon-color);
+
+    &.dx-list-item-ghost-reordering {
+      &.dx-state-focused {
+        &.dx-state-hover {
+          color: $list-item-ghost-color;
+          background: $list-item-ghost-bg;
+          border-top: 1px solid;
+          border-top-color: color.change($list-item-ghost-border-color, $alpha: 0.5);
+          border-bottom: 1px solid;
+          border-bottom-color: color.change($list-item-ghost-border-color, $alpha: 0.5);
+          box-shadow: 0 0 1px color.change($list-item-ghost-shadow-color, $alpha: 0.1), 0 1px 3px color.change($list-item-ghost-shadow-color, $alpha: 0.2);
+        }
+      }
+    }
+  }
+
+  .dx-list-item,
+  .dx-list .dx-empty-message {
+    border-top: $generic-list-item-border;
+    border-top-color: $list-border-color;
+    color: $list-normal-color;
+
+    .dx-list-item-separator-hidden & {
+      border-top: none;
+      border-bottom: none;
+    }
+  }
+
+  .dx-list-item-content,
+  .dx-list .dx-empty-message {
+    padding: $generic-list-item-vertical-padding $item-horizontal-padding;
+  }
+
+  .dx-list-next-button .dx-button {
+    @include dx-button-withtext-sizing();
+  }
+
+  .dx-list-item-chevron-container {
+    display: table-cell;
+    vertical-align: middle;
+    width: 6px + $item-horizontal-padding;
+  }
+
+  .dx-list-border-visible {
+    border: $generic-list-border;
+    border-color: $list-border-color;
+
+    .dx-list-select-all {
+      border-bottom: $generic-list-border;
+      border-bottom-color: $list-border-color;
+    }
+  }
+
+  .dx-list-item-before-bag {
+    .dx-list-toggle-delete-switch {
+      display: block;
+      float: left;
+      padding: 3px 0;
+    }
+
+    &.dx-list-toggle-delete-switch-container {
+      width: $item-horizontal-padding + 19px;
+    }
+
+    &.dx-list-select-checkbox-container,
+    &.dx-list-select-radiobutton-container {
+      width: $item-horizontal-padding + 21px;
+    }
+
+    .dx-button.dx-list-toggle-delete-switch {
+      border: none;
+      background: transparent;
+      box-shadow: none;
+
+      .dx-button-content {
+        padding: 0;
+      }
+    }
+
+    .dx-icon-toggle-delete {
+      margin-top: math.div($generic-list-item-vertical-padding, 2);
+      margin-bottom: math.div($generic-list-item-vertical-padding, 2);
+      margin-inline-start: $item-horizontal-padding;
+      margin-inline-end: math.div($item-horizontal-padding, 2);
+      width: 9px + $generic-list-item-vertical-padding;
+      height: 9px + $generic-list-item-vertical-padding;
+    }
+
+    .dx-list-select-checkbox,
+    .dx-list-select-radiobutton {
+      margin-top: $generic-list-select-all-margin-top;
+      margin-bottom: -3px;
+      margin-inline-start: $item-horizontal-padding;
+    }
+  }
+
+  .dx-list-select-all {
+    padding: $generic-list-item-vertical-padding - 1px 0 $generic-list-item-vertical-padding - 2px;
+    border-bottom: $generic-list-item-border;
+    border-bottom-color: $list-border-color;
+  }
+
+  .dx-list-select-all-checkbox {
+    margin-top: -1px;
+    margin-bottom: -3px;
+    margin-inline-end: $generic-list-select-all-margin-right;
+    margin-inline-start: $item-horizontal-padding;
+  }
+
+  .dx-list-select-all-label {
+    line-height: $generic-list-select-all-label-line-height;
+    padding: 0 $generic-list-item-horizontal-padding;
+    margin-top: $generic-list-select-all-label-margin-top;
+  }
+
+  .dx-list-item-after-bag {
+    &.dx-list-static-delete-button-container {
+      width: $item-horizontal-padding + $generic-base-icon-size + $generic-list-deletebutton-padding * 2 + $generic-button-border-weight * 2;
+    }
+
+    &.dx-list-reorder-handle-container {
+      width: $item-horizontal-padding + $generic-base-icon-size * 1.3;
+    }
+
+    .dx-list-reorder-handle {
+      @include dx-icon(dragvertical);
+      @include dx-icon-sizing($generic-base-icon-size, $generic-base-icon-size * 1.6);
+    }
+  }
+
+  .dx-list-slide-menu-button {
+    bottom: 1px;
+  }
+
+  .dx-list-slide-menu-button-delete {
+    border: 1px solid transparent;
+    color: $list-menu-button-delete-color;
+    background-color: $list-menu-button-delete-bg;
+  }
+
+  .dx-list-slide-menu-button-menu {
+    border: 1px solid transparent;
+    color: $list-menu-button-default-color;
+    background-color: $list-menu-button-default-bg;
+  }
+
+  .dx-list-switchable-delete-button,
+  .dx-list-static-delete-button {
+    margin-inline-end: $item-horizontal-padding;
+    padding: 0;
+
+    .dx-button-content {
+      padding: $generic-list-deletebutton-padding;
+    }
+  }
+
+  .dx-list-context-menucontent {
+    background-color: $list-holdmenu-bg;
+    border: 1px solid;
+    border-color: $list-holdmenu-border-color;
+    border-radius: 0;
+    box-shadow: 0 3px 10px $list-holdmenu-shadow-color;
+  }
+
+  .dx-state-disabled {
+    &.dx-list-item,
+    .dx-list-item {
+      background-color: transparent;
+      opacity: 0.6;
+    }
+  }
+}
+
+@include dx-list-sizing($generic-list-item-horizontal-padding);