devextreme-themebuilder 25.1.2-beta → 25.1.3

package/data/scss/widgets/base/_sortable.scss

@@ -23,7 +23,6 @@ $base-accent: null !default;
 }
 
 .dx-sortable-dragging.dx-sortable-clone * {
-  cursor: pointer;
   cursor: grabbing;
 }
 
@@ -39,8 +38,7 @@ $base-accent: null !default;
   position: absolute;
   top: 0;
   left: 0;
-  border: 1px solid transparent;
-  border-color: $base-accent;
+  border: 1px solid $base-accent;
   box-sizing: border-box;
   z-index: $max-integer;
 }

package/data/scss/widgets/base/_tabs.scss

@@ -74,7 +74,7 @@
   }
 }
 
-.dx-tabs:not(.dx-tabs-vertical) .dx-tabs-scrollable .dx-tab {
+.dx-tabs.dx-tabs-horizontal .dx-tabs-scrollable .dx-tab {
   flex-basis: 100%;
   min-width: max-content;
 }
@@ -124,7 +124,7 @@
 }
 
 .dx-rtl {
-  &.dx-tabs:not(.dx-tabs-vertical) {
+  &.dx-tabs.dx-tabs-horizontal{
     flex-direction: row-reverse;
   }
 }

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

@@ -8,8 +8,10 @@
 
 .dx-cardview {
   padding: $cardview-padding;
-  background-color: $cardview-background-color;
+  background-color: $cardview-bg-color;
   border-radius: $cardview-border-radius;
+  color: $cardview-text-color;
+  font-weight: $cardview-text-weight;
 
   .dx-link {
     text-decoration: underline;
@@ -28,7 +30,11 @@
 .dx-cardview-header-container {
   display: flex;
   flex-direction: column;
-  gap: $cardview-headers-container-gap;
+  gap: $cardview-header-gap;
+
+  .dx-toolbar {
+    background-color: transparent;
+  }
 }
 
 .dx-cardview-exclude-flexbox {

package/data/scss/widgets/base/cardView/_variables.scss

@@ -1,6 +1,8 @@
 $cardview-gap: null !default;
 $cardview-padding: null !default;
-$cardview-background-color: null !default;
+$cardview-bg-color: null !default;
 $cardview-border-radius: null !default;
-$cardview-headers-container-gap: null !default;
+$cardview-text-weight: null !default;
+$cardview-header-gap: null !default;
 $cardview-link-color: null !default;
+$cardview-text-color: null !default;

package/data/scss/widgets/base/cardView/column_chooser/_index.scss

@@ -7,8 +7,8 @@
     right: 0;
     bottom: 50%;
     position: absolute;
-    color: $cardview-columnchooser-message-color;
-    padding: 0 $cardview-column-chooser-empty-message-horizontal-padding;
+    color: $cardview-columnchooser--empty__message-color;
+    padding: 0 $cardview-column-chooser--empty__message-horizontal-padding;
   }
 }
 
@@ -18,7 +18,7 @@
   }
 
   .dx-treeview-select-all-item {
-    padding-left: $cardview-column-chooser-select-all-item-horizontal-padding;
-    padding-right: $cardview-column-chooser-select-all-item-horizontal-padding;
+    padding-left: $cardview-column-chooser__select-all-item-horizontal-padding;
+    padding-right: $cardview-column-chooser__select-all-item-horizontal-padding;
   }
 }

package/data/scss/widgets/base/cardView/column_chooser/_variables.scss

@@ -1,3 +1,3 @@
-$cardview-columnchooser-message-color: null !default;
-$cardview-column-chooser-empty-message-horizontal-padding: null !default;
-$cardview-column-chooser-select-all-item-horizontal-padding: null !default;
+$cardview-columnchooser--empty__message-color: null !default;
+$cardview-column-chooser--empty__message-horizontal-padding: null !default;
+$cardview-column-chooser__select-all-item-horizontal-padding: null !default;

package/data/scss/widgets/base/cardView/content_view/content/_index.scss

@@ -4,10 +4,10 @@
 .dx-cardview-content {
   display: grid;
   justify-items: center;
-  column-gap: $cardview-content-column-gap;
-  row-gap: $cardview-content-row-gap;
+  column-gap: $cardview-cards-column-gap;
+  row-gap: $cardview-cards-row-gap;
   grid-template-columns: repeat(var(--dx-cardview-cardsperrow), 1fr);
 
   // NOTE: This is default value for the cardCover.maxHeight option
-  --dx-cardview-card-cover-max-height: #{$cardview-content-card-cover-max-height-default};
+  --dx-cardview-card-cover-max-height: #{$cardview-card__cover-max-height};
 }

package/data/scss/widgets/base/cardView/content_view/content/_variables.scss

@@ -1,3 +1,3 @@
-$cardview-content-column-gap: null !default;
-$cardview-content-row-gap: null !default;
-$cardview-content-card-cover-max-height-default: null !default;
+$cardview-cards-column-gap: null !default;
+$cardview-cards-row-gap: null !default;
+$cardview-card__cover-max-height: null !default;

package/data/scss/widgets/base/cardView/content_view/content/card/_index.scss

@@ -7,17 +7,24 @@
   width: 100%;
   min-width: var(--dx-cardview-card-min-width, $cardview-card-min-width);
   max-width: var(--dx-cardview-card-max-width);
-  border: $cardview-card-border-size solid $cardview-card-border-color;
+  border: $cardview-card-border-width solid $cardview-card-border-color;
   border-radius: $cardview-card-border-radius;
-  background-color: $cardview-card-background-color;
+  background-color: $cardview-card-bg-color;
+  color: $cardview-card-text-color;
   overflow: hidden;
 
   & > div > :nth-child(2) {
     border-top: none;
   }
-}
 
+  &:focus-visible {
+    outline: 2px $cardview-card--focused-outline-color solid;
+    outline-offset: -2px;
+  }
+}
 
 .dx-cardview-card-selection {
-  background-color: $cardview-card-selection-background-color;
+  background-color: $cardview-card--selected-bg-color;
+  border-color: $cardview-card--selected-border-color;
+  color: $cardview-card--selected-text-color;
 }

package/data/scss/widgets/base/cardView/content_view/content/card/_variables.scss

@@ -1,7 +1,15 @@
-$cardview-card-border-color: null !default;
-
-$cardview-card-border-size: null !default;
+$cardview-card-border-width: null !default;
 $cardview-card-min-width: null !default;
 $cardview-card-border-radius: null !default;
-$cardview-card-background-color: null !default;
-$cardview-card-selection-background-color: null !default;
+
+$cardview-card-bg-color: null !default;
+$cardview-card-border-color: null !default;
+$cardview-card-divider-color: null !default;
+$cardview-card-text-color: null !default;
+
+$cardview-card--selected-bg-color: null !default;
+$cardview-card--selected-border-color: null !default;
+$cardview-card--selected-divider-color: null !default;
+$cardview-card--selected-text-color: null !default;
+
+$cardview-card--focused-outline-color: null !default;

package/data/scss/widgets/base/cardView/content_view/content/card/content/_index.scss

@@ -2,16 +2,20 @@
 @use '../variables' as *;
 
 .dx-cardview-card-content {
-  padding: $cardview-card-content-padding;
+  padding: $cardview-card__content-padding;
   display: grid;
   grid-template-columns: auto 1fr;
-  row-gap: $cardview-card-content-row-gap;
+  row-gap: $cardview-card__content-row-gap;
   width: 100%;
-  border-top: $cardview-card-border-size solid $cardview-card-border-color;
+  border-top: $cardview-card-border-width solid $cardview-card-divider-color;
 
   // NOTE: Override default fonts only in "material-compact"
-  font-size: $cardview-card-content-font-size;
-  line-height: $cardview-card-content-line-height;
+  font-size: $cardview-card__content-font-size;
+  line-height: $cardview-card__content-line-height;
+
+  .dx-cardview-card-selection & {
+    border-top-color: $cardview-card--selected-divider-color;
+  }
 }
 
 .dx-cardview-field-template {
@@ -21,7 +25,7 @@
 .dx-cardview-field-caption,
 .dx-cardview-field-value,
 .dx-cardview-field-template {
-  padding: $cardview-card-content-cell-padding-vertical $cardview-card-content-cell-padding-horizontal;
+  padding: $cardview-card__content__cell-padding-vertical $cardview-card__content__cell-padding-horizontal;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -32,7 +36,11 @@
 }
 
 .dx-cardview-field-caption {
-  font-weight: $cardview-card-content-field-caption-font-weight;
+  font-weight: $cardview-card__field-caption-weight;
+
+  .dx-cardview-card-selection & {
+    font-weight: $cardview-card--selected__field-caption-weight;
+  }
 }
 
 .dx-cardview-field-value {
@@ -50,12 +58,12 @@
 
   &__text-part {
     &--highlighted {
-      color: $cardview-card-content-field-value-highlight-color;
-      background: $cardview-card-content-field-value-highlight-background;
-      border-radius: $cardview-card-content-field-value-highlight-border-radius;
-      padding: $cardview-card-content-field-value-highlight-padding;
-      font-weight: $cardview-card-content-field-value-highlight-font-weight;
-      box-shadow: $cardview-card-content-field-value-highlight-box-shadow;
+      color: $cardview-card__content__field-value--highlighted-text-color;
+      background: $cardview-card__content__field-value--highlighted-bg-color;
+      border-radius: $cardview-card__content__field-value--highlighted-border-radius;
+      padding: $cardview-card__content__field-value--highlighted-border-padding;
+      font-weight: $cardview-card__content__field-value--highlighted-text-weight;
+      box-shadow: $cardview-card__content__field-value--highlighted-box-shadow;
     }
   }
 }

package/data/scss/widgets/base/cardView/content_view/content/card/content/_variables.scss

@@ -1,15 +1,16 @@
-$cardview-card-content-padding: null !default;
-$cardview-card-content-row-gap: null !default;
-$cardview-card-content-cell-padding-vertical: null !default;
-$cardview-card-content-cell-padding-horizontal: null !default;
+$cardview-card__content-padding: null !default;
+$cardview-card__content-row-gap: null !default;
+$cardview-card__content-font-size: null !default;
+$cardview-card__content-line-height: null !default;
+$cardview-card__content__cell-padding-vertical: null !default;
+$cardview-card__content__cell-padding-horizontal: null !default;
 
-$cardview-card-content-field-value-highlight-background: null !default;
-$cardview-card-content-field-value-highlight-color: null !default;
-$cardview-card-content-field-value-highlight-border-radius: null !default;
-$cardview-card-content-field-value-highlight-padding: null !default;
-$cardview-card-content-field-value-highlight-font-weight: null !default;
-$cardview-card-content-field-value-highlight-box-shadow: null !default;
-$cardview-card-content-field-caption-font-weight: null !default;
+$cardview-card__content__field-value--highlighted-bg-color: null !default;
+$cardview-card__content__field-value--highlighted-text-color: null !default;
+$cardview-card__content__field-value--highlighted-border-radius: null !default;
+$cardview-card__content__field-value--highlighted-border-padding: null !default;
+$cardview-card__content__field-value--highlighted-text-weight: null !default;
+$cardview-card__content__field-value--highlighted-box-shadow: null !default;
 
-$cardview-card-content-font-size: null !default;
-$cardview-card-content-line-height: null !default;
+$cardview-card__field-caption-weight: null !default;
+$cardview-card--selected__field-caption-weight: null !default;

package/data/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss

@@ -5,19 +5,32 @@
   overflow: hidden;
   display: flex;
   justify-content: center;
-  border-top: $cardview-card-border-size solid $cardview-card-border-color;
+  border-top: $cardview-card-border-width solid $cardview-card-divider-color;
   max-height: var(--dx-cardview-card-cover-max-height);
   aspect-ratio: var(--dx-cardview-card-cover-ratio);
   width: 100%;
-  background-color: $cardview-card-cover-background-color;
+  background-color: $cardview-card__cover-bg-color;
 
   &-noimage {
-    background-color: $cardview-card-cover-noimage-background-color;
+    background-color: $cardview-card__cover--noimage-bg-color;
     align-items: center;
 
     .dx-icon-imagethumbnail {
-      font-size: $cardview-card-cover-noimage-icon-size;
-      color: $cardview-card-cover-noimage-icon-color;
+      font-size: $cardview-card__cover--noimage__icon-size;
+      color: $cardview-card__cover--noimage__icon-color;
+    }
+  }
+}
+
+.dx-cardview-card-selection .dx-card-cover {
+  border-top-color: $cardview-card--selected-divider-color;
+  background-color: $cardview-card--selected__cover-bg-color;
+
+  &-noimage {
+    background-color: $cardview-card--selected__cover--noimage-bg-color;
+
+    .dx-icon-imagethumbnail {
+      color: $cardview-card--selected__cover--noimage__icon-color;
     }
   }
 }

package/data/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss

@@ -1,4 +1,8 @@
-$cardview-card-cover-noimage-background-color: null !default;
-$cardview-card-cover-noimage-icon-color: null !default;
-$cardview-card-cover-noimage-icon-size: null !default;
-$cardview-card-cover-background-color: null !default;
+$cardview-card__cover-bg-color: null !default;
+$cardview-card__cover--noimage-bg-color: null !default;
+$cardview-card__cover--noimage__icon-color: null !default;
+$cardview-card__cover--noimage__icon-size: null !default;
+
+$cardview-card--selected__cover-bg-color: null !default;
+$cardview-card--selected__cover--noimage-bg-color: null !default;
+$cardview-card--selected__cover--noimage__icon-color: null !default;

package/data/scss/widgets/base/cardView/content_view/content/card/header/_index.scss

@@ -4,29 +4,30 @@
 .dx-cardview-card-header {
   display: flex;
   align-items: center;
-  height: $cardview-card-header-height;
+  height: $cardview-card__header-height;
 
   .dx-toolbar {
     padding: 0 12px;
-    border-radius: $cardview-card-header-border-radius $cardview-card-header-border-radius 0 0;
+    border-radius: $cardview-card-border-radius $cardview-card-border-radius 0 0;
+    background-color: transparent;
 
     .dx-toolbar-label {
-      font-size: $cardview-card-header-text-size;
+      font-size: $cardview-card__header-text-size;
     }
 
     .dx-toolbar-items-container {
-      height: $cardview-card-header-toolbar-override-height;
+      height: $cardview-card__header__toolbar-override-height;
     }
   }
 
   .dx-cardview-select-checkbox {
-    padding-right: $cardview-card-header-selection-checkbox-padding-right;
+    padding-right: $cardview-card__header__selection-checkbox-padding-right;
   }
 }
 
 .dx-cardview-card-selection {
   .dx-toolbar {
-    background-color: $cardview-card-selection-background-color;
+    background-color: $cardview-card--selected-bg-color;
   }
 }
 

package/data/scss/widgets/base/cardView/content_view/content/card/header/_variables.scss

@@ -1,5 +1,4 @@
-$cardview-card-header-text-size: null !default;
-$cardview-card-header-border-radius: null !default;
-$cardview-card-header-selection-checkbox-padding-right: null !default;
-$cardview-card-header-height: null !default;
-$cardview-card-header-toolbar-override-height: null !default;
+$cardview-card__header-height: null !default;
+$cardview-card__header-text-size: null !default;
+$cardview-card__header__toolbar-override-height: null !default;
+$cardview-card__header__selection-checkbox-padding-right: null !default;

package/data/scss/widgets/base/cardView/content_view/no_data/_index.scss

@@ -1,23 +1,27 @@
 @use './variables' as *;
 
 .dx-gridcore-nodata-icon-container {
-  height: $cardview-nodata-icon-container-size;
-  width: $cardview-nodata-icon-container-size;
+  height: $cardview-nodata-view__icon-container-size;
+  width: $cardview-nodata-view__icon-container-size;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: $cardview-nodata-icon-container-background-color;
+  background-color: $cardview-nodata-view__icon-bg-color;
   border-radius: 999px;
-  margin: $cardview-nodata-icon-container-margin;
+  margin: $cardview-nodata-view__icon-container-margin;
 
   .dx-icon {
-    font-size: $cardview-nodata-icon-size;
+    font-size: $cardview-nodata-view__icon-size;
+    color: $cardview-nodata-view__icon-color;
   }
 }
 
 .dx-gridcore-nodata-element {
-  color: $cardview-nodata-text-color;
   text-align: center;
+
+  .dx-gridcore-nodata-text {
+    color: $cardview-nodata-view-text-color;
+  }
 }
 
 .dx-gridcore-nodata-container {
@@ -25,4 +29,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: $cardview-nodata-view-bg-color;
 }

package/data/scss/widgets/base/cardView/content_view/no_data/_variables.scss

@@ -1,7 +1,8 @@
-$cardview-nodata-text-color: null !default;
+$cardview-nodata-view__icon-container-size: null !default;
+$cardview-nodata-view__icon-container-margin: null !default;
+$cardview-nodata-view__icon-size: null !default;
 
-$cardview-nodata-icon-container-size: null !default;
-$cardview-nodata-icon-container-background-color: null !default;
-$cardview-nodata-icon-container-margin: null !default;
-
-$cardview-nodata-icon-size: null !default;
+$cardview-nodata-view-bg-color: null !default;
+$cardview-nodata-view-text-color: null !default;
+$cardview-nodata-view__icon-color: null !default;
+$cardview-nodata-view__icon-bg-color: null !default;

package/data/scss/widgets/base/cardView/filter_panel/_index.scss

@@ -1,7 +1,17 @@
-@use '../variables' as *;
+@use './variables' as *;
 
 .dx-cardview {
   .dx-datagrid-filter-panel {
-    background-color: $cardview-background-color;
+    background-color: $cardview-filter-panel-bg-color;
+    border-radius: $cardview-filter-panel-border-radius;
+    border-top-color: $cardview-filter-panel-border-color;
+
+    .dx-icon-filter {
+      color: $cardview-filter-panel__icon-color;
+    }
+
+    .dx-datagrid-filter-panel-text, .dx-datagrid-filter-panel-clear-filter {
+      color: $cardview-filter-panel-text-color;
+    }
   }
 }

package/data/scss/widgets/base/cardView/filter_panel/_variables.scss

@@ -0,0 +1,5 @@
+$cardview-filter-panel-bg-color: null !default;
+$cardview-filter-panel-border-radius: null !default;
+$cardview-filter-panel-border-color: null !default;
+$cardview-filter-panel-text-color: null !default;
+$cardview-filter-panel__icon-color: null !default;

package/data/scss/widgets/base/cardView/header_panel/_index.scss

@@ -1,56 +1,82 @@
 
 @use './item';
 @use './variables' as *;
-
-.dx-cardview-headerpanel-content {
-  display: flex;
-  gap: $cardview-headerpanel-content-gap;
-}
+$sortable-side-offset: 6px;
 
 .dx-cardview-header-item-sorting {
   display: flex;
 }
 
 .dx-cardview-headers {
-  margin: $cardview-headerpanel-vertical-margin 0;
-
-  .dx-sortable {
-    position: relative;
-    overflow: visible;
-
-    .dx-cardview-dropzone {
-      width: 100%;
-      height: $cardview-headerpanel-dropzone-height;
-      background-color: $cardview-dropzone-background-color;
-      text-align: center;
-      color: $cardview-dropzone-text-color;
-      position: absolute;
-      top: $cardview-headerpanel-dropzone-top;
-      left: 0;
-      border-width: $cardview-dropzone-border-width;
-      border-style: dashed;
-      border-color: $cardview-dropzone-border-color;
-      border-radius: $cardview-dropzone-border-radius;
-      pointer-events: none;
-      opacity: 0.0;
-      transition: opacity 0.3s ease-out;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
+  margin: $cardview-header-panel-vertical-margin 0;
+}
+
+.dx-cardview-sortable {
+  position: relative;
+  overflow: visible;
+  margin: 0 (-$sortable-side-offset);
+
+  .dx-cardview-dropzone {
+    width: calc(100% - (2 * $sortable-side-offset));
+    height: $cardview-header-panel__dropzone-height;
+    margin: 0 $sortable-side-offset;
+    background-color: $cardview-header-panel__dropzone-bg-color;
+    text-align: center;
+    position: absolute;
+    top: $cardview-header-panel__dropzone-top;
+    left: 0;
+    border-width: $cardview-header-panel__dropzone-border-width;
+    border-style: dashed;
+    border-color: $cardview-header-panel__dropzone-border-color;
+    border-radius: $cardview-header-panel__dropzone-border-radius;
+    pointer-events: none;
+    opacity: 0.0;
+    transition: opacity 0.3s ease-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+
+    .dx-icon {
+      color: $cardview-header-panel__dropzone__icon-color;
     }
 
-    .dx-cardview-dropzone-visible {
-      opacity: 1.0;
-      pointer-events: auto;
+    span {
+      color: $cardview-header-panel__dropzone-text-color;
     }
   }
 
-  .dx-cardview-headerpanel-text-empty {
-    line-height: $cardview-headerpanel-text-empty-line-height;
+  .dx-cardview-dropzone-visible {
+    opacity: 1.0;
+    pointer-events: auto;
   }
 }
 
-.dx-sortable-dragging.dx-cardview-column-sortable {
-  opacity: 1.0;
+.dx-cardview-headerpanel-text-empty {
+  line-height: $cardview-header-panel--empty-line-height;
 }
+
+.dx-cardview-headerpanel-content {
+  display: flex;
+  &--with-header-items {
+    margin: 0 ($sortable-side-offset - $cardview-header-item__right-padding) 0 ($sortable-side-offset - $cardview-header-item__left-padding);
+  }
+
+  &--empty {
+    margin: 0 $sortable-side-offset;
+  }
+}
+.dx-cardview-header-item-container {
+  min-width: fit-content;
+  padding: 0 $cardview-header-item__right-padding 0 $cardview-header-item__left-padding;
+
+  &:first-child {
+    padding: 0 $cardview-header-item__right-padding 0 $cardview-header-item__left-padding;
+  }
+}
+
+.dx-cardview-header-item-sort-indicator {
+  border: $cardview-header-item__sort-indicator__border-size solid $cardview-header-item__sort-indicator__border-color;
+  border-radius: $cardview-header-item__sort-indicator__border-radius;
+}
+

package/data/scss/widgets/base/cardView/header_panel/_variables.scss

@@ -1,13 +1,19 @@
-$cardview-headerpanel-content-gap: null !default;
-$cardview-headerpanel-vertical-margin: null !default;
+$cardview-header-panel-vertical-margin: null !default;
 
-$cardview-headerpanel-dropzone-height: null !default;
-$cardview-headerpanel-dropzone-top: null !default;
+$cardview-header-panel__dropzone-height: null !default;
+$cardview-header-panel__dropzone-top: null !default;
 
-$cardview-dropzone-text-color: null !default;
-$cardview-dropzone-background-color: null !default;
-$cardview-dropzone-border-width: null !default;
-$cardview-dropzone-border-color: null !default;
-$cardview-dropzone-border-radius: null !default;
+$cardview-header-panel__dropzone-bg-color: null !default;
+$cardview-header-panel__dropzone-border-width: null !default;
+$cardview-header-panel__dropzone-border-color: null !default;
+$cardview-header-panel__dropzone-border-radius: null !default;
+$cardview-header-panel__dropzone-text-color: null !default;
+$cardview-header-panel__dropzone__icon-color: null !default;
 
-$cardview-headerpanel-text-empty-line-height: null !default;
+$cardview-header-panel--empty-line-height: null !default;
+
+$cardview-header-item__left-padding: null !default;
+$cardview-header-item__right-padding: null !default;
+$cardview-header-item__sort-indicator__border-color: null !default;
+$cardview-header-item__sort-indicator__border-size: null !default;
+$cardview-header-item__sort-indicator__border-radius: null !default;