devextreme-themebuilder 25.1.1-alpha → 25.1.2-beta

package/data/scss/widgets/base/_loadIndicator.scss

@@ -1,7 +1,5 @@
 @use "sass:math";
 
-// @use "../base/mixins" as *;
-
 // adduse
 
 $loadindicator-width: 32px;
@@ -43,13 +41,8 @@ $loadindicator-height: 32px;
   animation: dx-loadindicator-icon-custom-rotate 1.5s infinite linear;
 
   @keyframes dx-loadindicator-icon-custom-rotate {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
   }
 }
 
@@ -73,3 +66,84 @@ $loadindicator-height: 32px;
   height: 100%;
   position: relative;
 }
+
+@mixin loadindicator-animation-sparkle(
+  $bg-color1,
+  $bg-color2,
+  $bg-color3
+) {
+  .dx-loadindicator-content-sparkle {
+    .dx-loadindicator-segment {
+      position: absolute;
+      width: 37.5%;
+      height: 37.5%;
+      aspect-ratio: 1;
+      clip-path: polygon(
+        48.76% 3.14%,
+        51.24% 3.14%,
+        63.93% 35.32%,
+        64.68% 36.07%,
+        96.86% 48.76%,
+        96.86% 51.24%,
+        64.68% 63.93%,
+        63.93% 64.68%,
+        51.24% 96.86%,
+        48.76% 96.86%,
+        36.07% 64.68%,
+        35.32% 63.93%,
+        3.14% 51.24%,
+        3.14% 48.76%,
+        35.32% 36.07%,
+        36.07% 35.32%,
+        48.76% 3.14%
+      );
+      transform-origin: center;
+      transform: scale(0.33);
+      background-color: $bg-color3;
+      animation: dx-sparkle-scale 1.4s infinite linear;
+    }
+
+    .dx-loadindicator-segment0 {
+      left: 50%;
+      top: 9.375%;
+      background-color: $bg-color3;
+      animation-delay: 0s;
+    }
+
+    .dx-loadindicator-segment1 {
+      left: 9.375%;
+      top: 29.6875%;
+      background-color: $bg-color3;
+      animation-delay: 0.8s;
+    }
+
+    .dx-loadindicator-segment2 {
+      left: 40.625%;
+      top: 54.6875%;
+      background-color: $bg-color3;
+      animation-delay: 0.4s;
+    }
+  }
+
+  @keyframes dx-sparkle-scale {
+    0% {
+      transform: scale(0.33);
+      background-color: $bg-color3;
+    }
+
+    33% {
+      transform: scale(1);
+      background-color: $bg-color1;
+    }
+
+    66% {
+      transform: scale(0.66);
+      background-color: $bg-color2;
+    }
+
+    100% {
+      transform: scale(0.33);
+      background-color: $bg-color3;
+    }
+  }
+}

package/data/scss/widgets/base/_menuBase.scss

@@ -50,8 +50,7 @@
         display: inline;
         vertical-align: middle;
         white-space: nowrap;
-
-        @include dx-overflow(ellipsis);
+        text-overflow: ellipsis;
       }
 
       .dx-menu-item-text-with-url {

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

@@ -29,6 +29,7 @@
   background: $start-color;
   background: radial-gradient(circle closest-side at center, $start-color $start-position, $end-color $end-position);
 }
+
 @mixin flex-container($direction: row, $wrap: wrap) {
   display: flex;
   flex-flow: $direction $wrap;
@@ -132,5 +133,13 @@
   height: $indicator-size;
 }
 
+@mixin dx-pending-indicator-centered() {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 $overlay-zindex: 1000;
 $max-integer: 2147483647;

package/data/scss/widgets/base/_recurrenceEditor.scss

@@ -1,16 +1,7 @@
-$recurrence-count-number-box-right-margin: 11px;
-$recurrence-count-number-box-left-margin: 16px;
-$recurrence-until-date-box-box-margin: 28px;
-$recurrence-label-line-height-margin: 36px;
-
 $recurrence-interval-number-box-margin-top: 25px;
 $recurrence-radio-group-item-padding: 10px;
 $recurrence-button-group-item-padding: 8px;
 
-.dx-recurrence-repeat-end-wrapper {
-  display: flex;
-}
-
 .dx-recurrence-repeat-on,
 .dx-recurrence-numberbox-interval-wrapper {
   .dx-layout-manager .dx-field-item {
@@ -38,10 +29,6 @@ $recurrence-button-group-item-padding: 8px;
   margin-top: $recurrence-interval-number-box-margin-top;
 }
 
-.dx-recurrence-repeat-end-label {
-  line-height: $recurrence-label-line-height-margin;
-}
-
 .dx-recurrence-radiogroup-repeat-type {
   margin: 0;
 
@@ -50,15 +37,6 @@ $recurrence-button-group-item-padding: 8px;
   }
 }
 
-.dx-recurrence-datebox-until-date {
-  margin-left: $recurrence-until-date-box-box-margin;
-}
-
-.dx-recurrence-numberbox-repeat-count {
-  margin-left: $recurrence-count-number-box-left-margin;
-  margin-right: $recurrence-count-number-box-right-margin;
-}
-
 .dx-recurrence-button-group {
   width: 100%;
 

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

@@ -0,0 +1,36 @@
+@use './content_view';
+@use './header_panel';
+@use './filter_panel';
+@use './column_chooser';
+@use './variables' as *;
+
+// adduse
+
+.dx-cardview {
+  padding: $cardview-padding;
+  background-color: $cardview-background-color;
+  border-radius: $cardview-border-radius;
+
+  .dx-link {
+    text-decoration: underline;
+    cursor: pointer;
+    color: $cardview-link-color;
+  }
+}
+
+.dx-cardview-root-container {
+  display: flex;
+  flex-direction: column;
+  gap: $cardview-gap;
+  height: 100%;
+}
+
+.dx-cardview-header-container {
+  display: flex;
+  flex-direction: column;
+  gap: $cardview-headers-container-gap;
+}
+
+.dx-cardview-exclude-flexbox {
+  position: absolute;
+}

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

@@ -0,0 +1,6 @@
+$cardview-gap: null !default;
+$cardview-padding: null !default;
+$cardview-background-color: null !default;
+$cardview-border-radius: null !default;
+$cardview-headers-container-gap: null !default;
+$cardview-link-color: null !default;

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

@@ -0,0 +1,24 @@
+@use './variables' as *;
+
+.dx-cardview-column-chooser-list {
+  .dx-empty-message {
+    text-align: center;
+    left: 0;
+    right: 0;
+    bottom: 50%;
+    position: absolute;
+    color: $cardview-columnchooser-message-color;
+    padding: 0 $cardview-column-chooser-empty-message-horizontal-padding;
+  }
+}
+
+.dx-cardview-column-chooser-plain {
+  .dx-treeview-expander-icon-stub {
+    display: none;
+  }
+
+  .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;
+  }
+}

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

@@ -0,0 +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;

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

@@ -0,0 +1,8 @@
+@use '../variables' as *;
+@use './content';
+@use './no_data';
+
+.dx-gridcore-contentview {
+  overflow: hidden;
+  flex-grow: 1;
+}

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

@@ -0,0 +1,13 @@
+@use './variables' as *;
+@use './card';
+
+.dx-cardview-content {
+  display: grid;
+  justify-items: center;
+  column-gap: $cardview-content-column-gap;
+  row-gap: $cardview-content-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};
+}

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

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

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

@@ -0,0 +1,23 @@
+@use './header';
+@use './content';
+@use './cover';
+@use './variables' as *;
+
+.dx-cardview-card {
+  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-radius: $cardview-card-border-radius;
+  background-color: $cardview-card-background-color;
+  overflow: hidden;
+
+  & > div > :nth-child(2) {
+    border-top: none;
+  }
+}
+
+
+.dx-cardview-card-selection {
+  background-color: $cardview-card-selection-background-color;
+}

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

@@ -0,0 +1,7 @@
+$cardview-card-border-color: null !default;
+
+$cardview-card-border-size: 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;

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

@@ -0,0 +1,61 @@
+@use './variables' as *;
+@use '../variables' as *;
+
+.dx-cardview-card-content {
+  padding: $cardview-card-content-padding;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: $cardview-card-content-row-gap;
+  width: 100%;
+  border-top: $cardview-card-border-size solid $cardview-card-border-color;
+
+  // NOTE: Override default fonts only in "material-compact"
+  font-size: $cardview-card-content-font-size;
+  line-height: $cardview-card-content-line-height;
+}
+
+.dx-cardview-field-template {
+  grid-column: span 2;
+}
+
+.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;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .dx-cardview-word-wrap-enabled & {
+    white-space: normal;
+  }
+}
+
+.dx-cardview-field-caption {
+  font-weight: $cardview-card-content-field-caption-font-weight;
+}
+
+.dx-cardview-field-value {
+  &--text-align-right {
+    text-align: right;
+  }
+
+  &--text-align-left {
+    text-align: left;
+  }
+
+  &--text-align-center {
+    text-align: center;
+  }
+
+  &__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;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+$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-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-font-size: null !default;
+$cardview-card-content-line-height: null !default;

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

@@ -0,0 +1,30 @@
+@use './variables' as *;
+@use '../variables' as *;
+
+.dx-card-cover {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  border-top: $cardview-card-border-size solid $cardview-card-border-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;
+
+  &-noimage {
+    background-color: $cardview-card-cover-noimage-background-color;
+    align-items: center;
+
+    .dx-icon-imagethumbnail {
+      font-size: $cardview-card-cover-noimage-icon-size;
+      color: $cardview-card-cover-noimage-icon-color;
+    }
+  }
+}
+
+.dx-card-cover-image {
+  object-fit: scale-down;
+  width: 100%;
+  height: 100%;
+}
+

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

@@ -0,0 +1,4 @@
+$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;

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

@@ -0,0 +1,55 @@
+@use './variables' as *;
+@use '../variables' as *;
+
+.dx-cardview-card-header {
+  display: flex;
+  align-items: center;
+  height: $cardview-card-header-height;
+
+  .dx-toolbar {
+    padding: 0 12px;
+    border-radius: $cardview-card-header-border-radius $cardview-card-header-border-radius 0 0;
+
+    .dx-toolbar-label {
+      font-size: $cardview-card-header-text-size;
+    }
+
+    .dx-toolbar-items-container {
+      height: $cardview-card-header-toolbar-override-height;
+    }
+  }
+
+  .dx-cardview-select-checkbox {
+    padding-right: $cardview-card-header-selection-checkbox-padding-right;
+  }
+}
+
+.dx-cardview-card-selection {
+  .dx-toolbar {
+    background-color: $cardview-card-selection-background-color;
+  }
+}
+
+.dx-cardview-select-checkboxes-hidden .dx-cardview-card:not(.dx-cardview-card-selection) .dx-cardview-select-checkbox {
+  .dx-checkbox {
+    display: none;
+  }
+
+  .dx-toolbar-item-content::before {
+    content: '';
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    pointer-events: none;
+  }
+
+  .dx-toolbar-item-content:hover {
+    &::before {
+      display: none;
+    }
+
+    .dx-checkbox {
+      display: inline-block;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+$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;

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

@@ -0,0 +1,28 @@
+@use './variables' as *;
+
+.dx-gridcore-nodata-icon-container {
+  height: $cardview-nodata-icon-container-size;
+  width: $cardview-nodata-icon-container-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $cardview-nodata-icon-container-background-color;
+  border-radius: 999px;
+  margin: $cardview-nodata-icon-container-margin;
+
+  .dx-icon {
+    font-size: $cardview-nodata-icon-size;
+  }
+}
+
+.dx-gridcore-nodata-element {
+  color: $cardview-nodata-text-color;
+  text-align: center;
+}
+
+.dx-gridcore-nodata-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,7 @@
+$cardview-nodata-text-color: 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;

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

@@ -0,0 +1,7 @@
+@use '../variables' as *;
+
+.dx-cardview {
+  .dx-datagrid-filter-panel {
+    background-color: $cardview-background-color;
+  }
+}

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

@@ -0,0 +1,56 @@
+
+@use './item';
+@use './variables' as *;
+
+.dx-cardview-headerpanel-content {
+  display: flex;
+  gap: $cardview-headerpanel-content-gap;
+}
+
+.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;
+    }
+
+    .dx-cardview-dropzone-visible {
+      opacity: 1.0;
+      pointer-events: auto;
+    }
+  }
+
+  .dx-cardview-headerpanel-text-empty {
+    line-height: $cardview-headerpanel-text-empty-line-height;
+  }
+}
+
+.dx-sortable-dragging.dx-cardview-column-sortable {
+  opacity: 1.0;
+}

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

@@ -0,0 +1,13 @@
+$cardview-headerpanel-content-gap: null !default;
+$cardview-headerpanel-vertical-margin: null !default;
+
+$cardview-headerpanel-dropzone-height: null !default;
+$cardview-headerpanel-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-headerpanel-text-empty-line-height: null !default;

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

@@ -0,0 +1,39 @@
+@use '../../../icons' as *;
+@use './variables' as *;
+
+.dx-cardview-header-item {
+  display: flex;
+  align-items: center;
+  padding: ($cardview-header-item-padding-vertical - $cardview-header-item-border-width) $cardview-header-item-padding-horizontal;
+  min-width: fit-content;
+  user-select: none;
+  gap: $cardview-header-item-content-gap;
+  border: solid $cardview-header-item-border-width $cardview-header-item-border-color;
+  border-radius: $cardview-header-item-border-radius;
+  background-color: $cardview-header-item-background-color;
+  line-height: $cardview-header-item-line-height;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $cardview-header-item-hovered-background-color;
+    border: solid $cardview-header-item-border-width $cardview-header-item-hovered-border-color;
+  }
+
+  .dx-icon-cursorprohibition {
+    color: $cardview-header-item-prohibition-icon-color;
+  }
+
+  .dx-icon {
+    font-size: $cardview-header-item-icon-size;
+  }
+}
+
+.dx-cardview {
+  .dx-header-filter-icon {
+    color: $cardview-header-filter-icon-empty-color;
+
+    &--selected {
+      color: $cardview-header-filter-icon-selected-color;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+$cardview-header-item-background-color: null !default;
+$cardview-header-item-border-color: null !default;
+
+$cardview-header-item-hovered-background-color: null !default;
+$cardview-header-item-hovered-border-color: null !default;
+
+$cardview-header-item-border-width: null !default;
+$cardview-header-item-border-radius: null !default;
+$cardview-header-item-padding-horizontal: null !default;
+$cardview-header-item-padding-vertical: null !default;
+
+$cardview-header-item-content-gap: 4px !default;
+$cardview-header-item-line-height: null !default;
+$cardview-header-item-icon-size: null !default;
+$cardview-header-filter-icon-empty-color: null !default;
+$cardview-header-filter-icon-selected-color: null !default;
+
+$cardview-header-item-prohibition-icon-color: null;