devextreme-themebuilder 25.2.2-beta → 25.2.3

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

@@ -5,7 +5,7 @@
 @use "../sizes" as *;
 @use "../button/sizes" as *;
 @use "../menuBase/sizes" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 
 // adduse
 @use "../menuBase" as *;

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

@@ -6,7 +6,7 @@
 @use "../menu/colors" as *;
 @use "../button/sizes" as *;
 @use "../common/mixins" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../../base/mixins" as *;
 @use "../../base/menuBase";
 

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

@@ -3,7 +3,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../textEditor/sizes" as *;
 @use "../textEditor/colors" as *;
 @use "../../base/numberBox";

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

@@ -3,7 +3,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../../base/pagination";
 @use "../gridBase/sizes" as *;
 

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

@@ -4,7 +4,7 @@
 @use "sizes" as *;
 @use "../sizes" as *;
 @use "../common/mixins" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../gridBase/colors" as *;
 @use "../treeView/sizes" as *;
 @use "../button/mixins" as *;

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

@@ -2,7 +2,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../overlay/colors" as *;
 @use "../toolbar/mixins" as *;
 @use "../toolbar/sizes" as *;

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

@@ -4,10 +4,11 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../radioGroup/sizes" as *;
 @use "../toolbar/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../../base/scheduler" as baseScheduler with (
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
@@ -41,8 +42,9 @@
   $agenda-appointment-text-color: $agenda-appointment-text-color,
   $agenda-appointment-title-font-size: $agenda-appointment-title-font-size,
 
-  $scheduler-days-of-week-button-size: $material-scheduler-days-of-week-button-size,
-  $scheduler-recurrence-end-item-height: $material-scheduler-recurrence-end-item-height
+  $scheduler-appointment-popup-icon-margin-top: $material-scheduler-appointment-popup-icon-margin-top,
+  $scheduler-appointment-popup-repeat-end-item-height: $material-scheduler-appointment-popup-repeat-end-item-height,
+  $scheduler-appointment-popup-repeat-end-item-vertical-margin: $material-radio-button-vertical-margin
 );
 @use "../button/colors" as *;
 @use "../button/mixins" as *;
@@ -171,6 +173,83 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 
     height: 2px;
   }
+
+  .dx-scheduler-appointment {
+    container-type: size;
+
+    &.dx-scheduler-appointment-recurrence {
+      @container (max-height: #{$material-scheduler-appointment-15min-height}) {
+        .dx-item-content.dx-scheduler-appointment-content {
+          padding-right: $material-scheduler-appointment-10min-recurrence-padding-right;
+        }
+      }
+
+      @container (min-height: #{$material-scheduler-appointment-15min-height}) and (max-height: #{$material-scheduler-appointment-20min-height}) {
+        .dx-item-content.dx-scheduler-appointment-content {
+          padding-right: $material-scheduler-appointment-15min-recurrence-padding-right;
+        }
+      }
+
+      @container (min-height: #{$material-scheduler-appointment-20min-height}) and (max-height: #{$material-scheduler-appointment-25min-height}) {
+        .dx-item-content.dx-scheduler-appointment-content {
+          padding-right: $material-scheduler-appointment-20min-recurrence-padding-right;
+        }
+      }
+    }
+
+    .dx-item-content.dx-scheduler-appointment-content {
+      @container (max-height: #{$material-scheduler-appointment-25min-height}) {
+        display: flex;
+        align-items: center;
+        padding: $material-scheduler-appointment-short-content-padding;
+
+        .dx-scheduler-appointment-content-details {
+          display: none;
+        }
+
+        .dx-scheduler-appointment-recurrence-icon {
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+
+    @container (max-height: #{$material-scheduler-appointment-15min-height}) {
+      .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-title {
+          font-size: $material-scheduler-appointment-10min-title-font-size;
+          line-height: $material-scheduler-appointment-10min-title-line-height;
+        }
+
+        .dx-scheduler-appointment-recurrence-icon {
+          right: $material-scheduler-appointment-10min-icon-right;
+          font-size: $material-scheduler-appointment-10min-icon-font-size;
+        }
+      }
+    }
+
+    @container (min-height: #{$material-scheduler-appointment-15min-height}) and (max-height: #{$material-scheduler-appointment-20min-height}) {
+      .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-title {
+          font-size: $material-scheduler-appointment-15min-title-font-size;
+          line-height: $material-scheduler-appointment-15min-title-line-height;
+        }
+
+        .dx-scheduler-appointment-recurrence-icon {
+          right: $material-scheduler-appointment-15min-icon-right;
+          font-size: $material-scheduler-appointment-15min-icon-font-size;
+        }
+      }
+    }
+
+    @container (min-height: #{$material-scheduler-appointment-20min-height}) and (max-height: #{$material-scheduler-appointment-25min-height}) {
+      .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-recurrence-icon {
+          right: $material-scheduler-appointment-20min-icon-right;
+        }
+      }
+    }
+  }
 }
 
 .dx-scheduler-header-panel {
@@ -585,60 +664,25 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
       color: $scheduler-appointment-base-color;
     }
 
-    .dx-scheduler-form-description-group .dx-scheduler-form-icon,
-    .dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon,
-    .dx-scheduler-form-recurrence-settings-group .dx-scheduler-form-icon {
-      margin-top: $material-scheduler-appointment-popup-description-icon-margin-top;
-    }
-
     .dx-scheduler-days-of-week-buttons {
       height: $material-toolbar-height;
-      gap: $material-scheduler-days-of-week-buttons-gap;
+      gap: $material-scheduler-appointment-popup-days-of-week-buttons-gap;
     }
 
-    .dx-scheduler-form-group-with-icon.dx-scheduler-form-recurrence-end-group:has(.dx-scheduler-form-icon:not(.dx-hidden)) .dx-field-item-label {
-      height: $material-scheduler-appointment-popup-recurrence-end-group-label-height;
-    }
+    .dx-scheduler-form-recurrence-end-group {
+      .dx-field-item-label {
+        padding: 0;
 
-    .dx-scheduler-form-recurrence-end-group .dx-field-item-label {
-      padding: 0;
-      margin-bottom: $material-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom;
-
-      .dx-field-item-label-text {
-        color: $base-text-color;
+        .dx-field-item-label-text {
+          color: $base-text-color;
+        }
       }
-    }
-
-    .dx-scheduler-form-recurrence-end-editors {
-      .dx-item.dx-radiobutton {
-        height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height !important; // stylelint-disable-line declaration-no-important
 
+      .dx-radiogroup.dx-widget {
         .dx-radiobutton-icon::after {
           content: unset;
         }
       }
-
-      .dx-box-item {
-        height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height;
-
-        .dx-box-item-content {
-          height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height;
-        }
-      }
-
-      .dx-field-item,
-      .dx-empty-item {
-        height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height;
-
-        .dx-field-item-content {
-          height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height;
-        }
-      }
-
-      .dx-texteditor,
-      .dx-numberbox {
-        height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height;
-      }
     }
 
     .dx-field-item:not(.dx-first-col) {

package/data/scss/widgets/material/scheduler/_sizes.scss

@@ -25,6 +25,23 @@ $material-tooltip-marker-dimension: null !default;
 $material-scheduler-appointment-tooltip-title-margin-top: null !default;
 $material-scheduler-appointment-tooltip-remove-padding-top: null !default;
 
+$material-scheduler-appointment-short-content-padding: null !default;
+$material-scheduler-appointment-15min-height: null !default;
+$material-scheduler-appointment-20min-height: null !default;
+$material-scheduler-appointment-25min-height: null !default;
+$material-scheduler-appointment-10min-recurrence-padding-right: null !default;
+$material-scheduler-appointment-10min-title-font-size: null !default;
+$material-scheduler-appointment-10min-title-line-height: null !default;
+$material-scheduler-appointment-10min-icon-font-size: null !default;
+$material-scheduler-appointment-10min-icon-right: null !default;
+$material-scheduler-appointment-15min-recurrence-padding-right: null !default;
+$material-scheduler-appointment-15min-title-font-size: null !default;
+$material-scheduler-appointment-15min-title-line-height: null !default;
+$material-scheduler-appointment-15min-icon-font-size: null !default;
+$material-scheduler-appointment-15min-icon-right: null !default;
+$material-scheduler-appointment-20min-recurrence-padding-right: null !default;
+$material-scheduler-appointment-20min-icon-right: null !default;
+
 $scheduler-left-column-width: 65px !default;
 $material-scheduler-timeline-date-table-cell-height: 50px !default;
 $material-scheduler-navigator-icon-font-size: $material-base-icon-size;
@@ -51,18 +68,14 @@ $material-scheduler-appointment-popup-toolbar-label-size: null !default;
 $material-scheduler-appointment-popup-icon-size: null !default;
 $material-scheduler-appointment-popup-icon-container-height: null !default;
 $material-scheduler-appointment-popup-icon-padding-right: null !default;
-$material-scheduler-appointment-popup-description-icon-margin-top: null !default;
+$material-scheduler-appointment-popup-icon-margin-top: null !default;
 $material-scheduler-appointment-popup-item-padding-horizontal: null !default;
 $material-scheduler-appointment-popup-all-day-item-height: null !default;
 $material-scheduler-appointment-popup-all-day-item-padding-left: null !default;
 $material-scheduler-appointment-popup-all-day-item-font-size: null !default;
 $material-scheduler-appointment-popup-all-day-item-margin-bottom: null !default;
-$material-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: null !default;
-$material-scheduler-appointment-popup-recurrence-end-editors-item-height: null !default;
-$material-scheduler-appointment-popup-recurrence-end-group-label-height: null !default;
-$material-scheduler-days-of-week-button-size: null !default;
-$material-scheduler-days-of-week-buttons-gap: null !default;
-$material-scheduler-recurrence-end-item-height: null !default;
+$material-scheduler-appointment-popup-days-of-week-buttons-gap: null !default;
+$material-scheduler-appointment-popup-repeat-end-item-height: null !default;
 
 $scheduler-timeline-cell-height: 50px !default;
 
@@ -102,20 +115,36 @@ $scheduler-timeline-cell-height: 50px !default;
   $material-scheduler-appointment-popup-icon-size: 24px !default;
   $material-scheduler-appointment-popup-icon-container-height: 48px !default;
   $material-scheduler-appointment-popup-icon-padding-right: 8px !default;
-  $material-scheduler-appointment-popup-description-icon-margin-top: 37px !default;
+  $material-scheduler-appointment-popup-icon-margin-top: 37px !default;
   $material-scheduler-appointment-popup-item-padding-horizontal: 8px !default;
   $material-scheduler-appointment-popup-all-day-item-height: 54px !default;
   $material-scheduler-appointment-popup-all-day-item-padding-left: 16px !default;
   $material-scheduler-appointment-popup-all-day-item-font-size: 16px !default;
   $material-scheduler-appointment-popup-all-day-item-margin-bottom: 3px !default;
-  $material-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 12px !default;
-  $material-scheduler-appointment-popup-recurrence-end-editors-item-height: 48px !default;
-  $material-scheduler-appointment-popup-recurrence-end-group-label-height: 48px !default;
-  $material-scheduler-days-of-week-button-size: 32px !default;
-  $material-scheduler-days-of-week-buttons-gap: 8px !default;
-  $material-scheduler-recurrence-end-item-height: 32px !default;
+  $material-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default;
+  $material-scheduler-appointment-popup-repeat-end-item-height: 48px !default;
 
   $agenda-appointment-title-font-size: 14px;
+
+  $material-scheduler-appointment-short-content-padding: 0 7px !default;
+  $material-scheduler-appointment-15min-height: 17px !default;
+  $material-scheduler-appointment-20min-height: 24px !default;
+  $material-scheduler-appointment-25min-height: 32px !default;
+
+  $material-scheduler-appointment-10min-recurrence-padding-right: 14px !default;
+  $material-scheduler-appointment-10min-title-font-size: 8px !default;
+  $material-scheduler-appointment-10min-title-line-height: 12px !default;
+  $material-scheduler-appointment-10min-icon-font-size: 12px !default;
+  $material-scheduler-appointment-10min-icon-right: 2px !default;
+
+  $material-scheduler-appointment-15min-recurrence-padding-right: 18px !default;
+  $material-scheduler-appointment-15min-title-font-size: 12px !default;
+  $material-scheduler-appointment-15min-title-line-height: 18px !default;
+  $material-scheduler-appointment-15min-icon-font-size: 16px !default;
+  $material-scheduler-appointment-15min-icon-right: 2px !default;
+
+  $material-scheduler-appointment-20min-recurrence-padding-right: 25px !default;
+  $material-scheduler-appointment-20min-icon-right: 4px !default;
 }
 
 @else if $size == "compact" {
@@ -153,18 +182,34 @@ $scheduler-timeline-cell-height: 50px !default;
   $material-scheduler-appointment-popup-icon-size: 18px !default;
   $material-scheduler-appointment-popup-icon-container-height: 32px !default;
   $material-scheduler-appointment-popup-icon-padding-right: 6px !default;
-  $material-scheduler-appointment-popup-description-icon-margin-top: 22px !default;
+  $material-scheduler-appointment-popup-icon-margin-top: 22px !default;
   $material-scheduler-appointment-popup-item-padding-horizontal: 6px !default;
   $material-scheduler-appointment-popup-all-day-item-height: 38px !default;
   $material-scheduler-appointment-popup-all-day-item-padding-left: 12px !default;
   $material-scheduler-appointment-popup-all-day-item-font-size: 14px !default;
   $material-scheduler-appointment-popup-all-day-item-margin-bottom: 1px !default;
-  $material-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 4px !default;
-  $material-scheduler-appointment-popup-recurrence-end-editors-item-height: 32px !default;
-  $material-scheduler-appointment-popup-recurrence-end-group-label-height: 32px !default;
-  $material-scheduler-days-of-week-button-size: 24px !default;
-  $material-scheduler-days-of-week-buttons-gap: 4px !default;
-  $material-scheduler-recurrence-end-item-height: 32px !default;
+  $material-scheduler-appointment-popup-days-of-week-buttons-gap: 4px !default;
+  $material-scheduler-appointment-popup-repeat-end-item-height: 32px !default;
 
   $agenda-appointment-title-font-size: 13px;
+
+  $material-scheduler-appointment-short-content-padding: 0 7px !default;
+  $material-scheduler-appointment-15min-height: 17px !default;
+  $material-scheduler-appointment-20min-height: 24px !default;
+  $material-scheduler-appointment-25min-height: 32px !default;
+
+  $material-scheduler-appointment-10min-recurrence-padding-right: 14px !default;
+  $material-scheduler-appointment-10min-title-font-size: 8px !default;
+  $material-scheduler-appointment-10min-title-line-height: 12px !default;
+  $material-scheduler-appointment-10min-icon-font-size: 12px !default;
+  $material-scheduler-appointment-10min-icon-right: 2px !default;
+
+  $material-scheduler-appointment-15min-recurrence-padding-right: 14px !default;
+  $material-scheduler-appointment-15min-title-font-size: 12px !default;
+  $material-scheduler-appointment-15min-title-line-height: 12px !default;
+  $material-scheduler-appointment-15min-icon-font-size: 12px !default;
+  $material-scheduler-appointment-15min-icon-right: 2px !default;
+
+  $material-scheduler-appointment-20min-recurrence-padding-right: 25px !default;
+  $material-scheduler-appointment-20min-icon-right: 4px !default;
 }

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

@@ -3,7 +3,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../../base/splitter";
 @use "../../base/splitter/mixins" as *;
 

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

@@ -3,7 +3,7 @@
 @use "../sizes" as *;
 @use "../button/colors" as *;
 @use "../button/mixins" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../../base/tabs";
 @use "variables/colors" as *;
 @use "variables/sizes" as *;

package/data/scss/widgets/material/tabs/layout/navigation-button/_base.scss

@@ -3,7 +3,7 @@
 @use "../../../sizes" as *;
 @use "../../../button/colors" as *;
 @use "../../../button/mixins" as *;
-@use "../../../../base/icons" as *;
+@use "../../../../base/icon_fonts" as *;
 @use "../../../../base/tabs";
 @use "../../variables/colors" as *;
 @use "../../variables/sizes" as *;

package/data/scss/widgets/material/tabs/layout/tab/_base.scss

@@ -3,7 +3,7 @@
 @use "../../../sizes" as *;
 @use "../../../button/colors" as *;
 @use "../../../button/mixins" as *;
-@use "../../../../base/icons" as *;
+@use "../../../../base/icon_fonts" as *;
 @use "../../../../base/tabs";
 @use "../../variables/colors" as *;
 @use "../../variables/sizes" as *;

package/data/scss/widgets/material/tabs/layout/tab/styling-mode/_primary.scss

@@ -3,7 +3,7 @@
 @use "../../../../sizes" as *;
 @use "../../../../button/colors" as *;
 @use "../../../../button/mixins" as *;
-@use "../../../../../base/icons" as *;
+@use "../../../../../base/icon_fonts" as *;
 @use "../../../../../base/tabs";
 @use "../../../variables/colors" as *;
 @use "../../../variables/sizes" as *;

package/data/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss

@@ -3,7 +3,7 @@
 @use "../../../../sizes" as *;
 @use "../../../../button/colors" as *;
 @use "../../../../button/mixins" as *;
-@use "../../../../../base/icons" as *;
+@use "../../../../../base/icon_fonts" as *;
 @use "../../../../../base/tabs";
 @use "../../../variables/colors" as *;
 @use "../../../variables/sizes" as *;

package/data/scss/widgets/material/tabs/layout/tabs/_index.scss

@@ -3,7 +3,7 @@
 @use "../../../sizes" as *;
 @use "../../../button/colors" as *;
 @use "../../../button/mixins" as *;
-@use "../../../../base/icons" as *;
+@use "../../../../base/icon_fonts" as *;
 @use "../../../../base/tabs";
 @use "../../variables/colors" as *;
 @use "../../variables/sizes" as *;

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

@@ -4,7 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../textEditor" as *;
 @use "../common/sizes" as *;
 @use "../../base/tagBox";

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

@@ -4,7 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../textEditor/colors" as *;
 @use "../textEditor/sizes" as *;
 @use "../../base/textBox";

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

@@ -4,7 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../common/sizes" as *;
 @use "../button/sizes" as *;
 @use "../common/mixins" as *;

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

@@ -4,7 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../list/sizes" as *;
 @use "../button/mixins" as *;
 @use "../button/colors" as *;
@@ -12,7 +12,6 @@
 @use "../checkBox/sizes" as *;
 @use "mixins" as *;
 @use "../../base/toolbar";
-@use "../../base/icons" as *;
 
 // adduse
 @use "../dropDownMenu";

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

@@ -5,7 +5,7 @@
 @use "sizes" as *;
 @use "../sizes" as *;
 @use "../../base/mixins" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../gridBase" as *;
 @use "../gridBase/colors" as *;
 @use "../gridBase/sizes" as *;

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

@@ -5,7 +5,7 @@
 @use "sizes" as *;
 @use "../sizes" as *;
 @use "../../base/treeView" as *;
-@use "../../base/icons" as *;
+@use "../../base/icon_fonts" as *;
 @use "../checkBox/colors" as *;
 
 .dx-treeview-custom-expand-icon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-themebuilder",
-  "version": "25.2.2-beta",
+  "version": "25.2.3",
   "description": "DevExtreme ThemeBuilder",
   "keywords": [
     "devextreme",
@@ -16,7 +16,7 @@
     "bootstrap": "^5.3.8"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.21",
     "clean-css": "^5.3.0",
     "postcss": "^8.2.6",
     "sass-embedded": "1.66.0"