devextreme-themebuilder 25.1.1-alpha → 25.1.2-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (132) hide show
  1. package/data/metadata/dx-theme-builder-metadata.js +503 -33
  2. package/data/scss/widgets/base/_htmlEditor.scss +26 -0
  3. package/data/scss/widgets/base/_icons.scss +29 -1
  4. package/data/scss/widgets/base/_loadIndicator.scss +83 -9
  5. package/data/scss/widgets/base/_menuBase.scss +1 -2
  6. package/data/scss/widgets/base/_mixins.scss +9 -0
  7. package/data/scss/widgets/base/_recurrenceEditor.scss +0 -22
  8. package/data/scss/widgets/base/cardView/_index.scss +36 -0
  9. package/data/scss/widgets/base/cardView/_variables.scss +6 -0
  10. package/data/scss/widgets/base/cardView/column_chooser/_index.scss +24 -0
  11. package/data/scss/widgets/base/cardView/column_chooser/_variables.scss +3 -0
  12. package/data/scss/widgets/base/cardView/content_view/_index.scss +8 -0
  13. package/data/scss/widgets/base/cardView/content_view/content/_index.scss +13 -0
  14. package/data/scss/widgets/base/cardView/content_view/content/_variables.scss +3 -0
  15. package/data/scss/widgets/base/cardView/content_view/content/card/_index.scss +23 -0
  16. package/data/scss/widgets/base/cardView/content_view/content/card/_variables.scss +7 -0
  17. package/data/scss/widgets/base/cardView/content_view/content/card/content/_index.scss +61 -0
  18. package/data/scss/widgets/base/cardView/content_view/content/card/content/_variables.scss +15 -0
  19. package/data/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss +30 -0
  20. package/data/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss +4 -0
  21. package/data/scss/widgets/base/cardView/content_view/content/card/header/_index.scss +55 -0
  22. package/data/scss/widgets/base/cardView/content_view/content/card/header/_variables.scss +5 -0
  23. package/data/scss/widgets/base/cardView/content_view/no_data/_index.scss +28 -0
  24. package/data/scss/widgets/base/cardView/content_view/no_data/_variables.scss +7 -0
  25. package/data/scss/widgets/base/cardView/filter_panel/_index.scss +7 -0
  26. package/data/scss/widgets/base/cardView/header_panel/_index.scss +56 -0
  27. package/data/scss/widgets/base/cardView/header_panel/_variables.scss +13 -0
  28. package/data/scss/widgets/base/cardView/header_panel/item/_index.scss +39 -0
  29. package/data/scss/widgets/base/cardView/header_panel/item/_variables.scss +18 -0
  30. package/data/scss/widgets/base/chat/_index.scss +2 -0
  31. package/data/scss/widgets/base/chat/_mixins.scss +2 -0
  32. package/data/scss/widgets/base/chat/layout/chat/_index.scss +20 -0
  33. package/data/scss/widgets/base/chat/layout/chat-alertlist/_index.scss +0 -6
  34. package/data/scss/widgets/base/chat/layout/chat-alertlist/_mixins.scss +4 -10
  35. package/data/scss/widgets/base/chat/layout/chat-confirmationpopup/_index.scss +30 -0
  36. package/data/scss/widgets/base/chat/layout/chat-confirmationpopup/_mixins.scss +24 -0
  37. package/data/scss/widgets/base/chat/layout/chat-messagebox/_index.scss +6 -1
  38. package/data/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss +4 -0
  39. package/data/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss +37 -0
  40. package/data/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss +33 -0
  41. package/data/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss +25 -0
  42. package/data/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss +13 -0
  43. package/data/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss +11 -0
  44. package/data/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss +16 -1
  45. package/data/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss +34 -2
  46. package/data/scss/widgets/base/informer/_index.scss +25 -0
  47. package/data/scss/widgets/base/informer/_mixins.scss +29 -0
  48. package/data/scss/widgets/base/scheduler/_common.scss +10 -0
  49. package/data/scss/widgets/base/scheduler/layout/_header.scss +12 -18
  50. package/data/scss/widgets/base/scheduler/views/_index.scss +0 -1
  51. package/data/scss/widgets/base/stepper/_mixins.scss +0 -1
  52. package/data/scss/widgets/base/stepper/layout/connector/_index.scss +25 -17
  53. package/data/scss/widgets/base/stepper/layout/connector/_mixins.scss +16 -4
  54. package/data/scss/widgets/base/stepper/layout/step/_index.scss +4 -17
  55. package/data/scss/widgets/base/stepper/layout/step/_mixins.scss +189 -118
  56. package/data/scss/widgets/base/stepper/layout/stepper/_mixins.scss +2 -2
  57. package/data/scss/widgets/base/switch/_index.scss +1 -4
  58. package/data/scss/widgets/fluent/_index.scss +2 -0
  59. package/data/scss/widgets/fluent/cardView/_colors.scss +165 -0
  60. package/data/scss/widgets/fluent/cardView/_index.scss +5 -0
  61. package/data/scss/widgets/fluent/cardView/_sizes.scss +146 -0
  62. package/data/scss/widgets/fluent/chat/_colors.scss +7 -0
  63. package/data/scss/widgets/fluent/chat/_index.scss +25 -2
  64. package/data/scss/widgets/fluent/chat/_sizes.scss +31 -7
  65. package/data/scss/widgets/fluent/common/_mixins.scss +0 -4
  66. package/data/scss/widgets/fluent/contextMenu/_index.scss +14 -12
  67. package/data/scss/widgets/fluent/contextMenu/_sizes.scss +9 -3
  68. package/data/scss/widgets/fluent/gridBase/_index.scss +7 -4
  69. package/data/scss/widgets/fluent/htmlEditor/_index.scss +18 -0
  70. package/data/scss/widgets/fluent/htmlEditor/_sizes.scss +9 -0
  71. package/data/scss/widgets/fluent/informer/_colors.scss +15 -0
  72. package/data/scss/widgets/fluent/informer/_index.scss +16 -0
  73. package/data/scss/widgets/fluent/informer/_sizes.scss +24 -0
  74. package/data/scss/widgets/fluent/list/_index.scss +1 -0
  75. package/data/scss/widgets/fluent/list/_sizes.scss +0 -3
  76. package/data/scss/widgets/fluent/loadIndicator/_colors.scss +12 -0
  77. package/data/scss/widgets/fluent/loadIndicator/_index.scss +53 -47
  78. package/data/scss/widgets/fluent/recurrenceEditor/_index.scss +2 -4
  79. package/data/scss/widgets/fluent/recurrenceEditor/_sizes.scss +8 -2
  80. package/data/scss/widgets/fluent/scheduler/_index.scss +1 -1
  81. package/data/scss/widgets/fluent/scheduler/_sizes.scss +8 -3
  82. package/data/scss/widgets/fluent/stepper/_colors.scss +89 -29
  83. package/data/scss/widgets/fluent/stepper/_index.scss +24 -9
  84. package/data/scss/widgets/fluent/stepper/_sizes.scss +10 -5
  85. package/data/scss/widgets/generic/_index.scss +2 -1
  86. package/data/scss/widgets/generic/cardView/_colors.scss +205 -0
  87. package/data/scss/widgets/generic/cardView/_index.scss +5 -0
  88. package/data/scss/widgets/generic/cardView/_sizes.scss +155 -0
  89. package/data/scss/widgets/generic/chat/_colors.scss +7 -0
  90. package/data/scss/widgets/generic/chat/_index.scss +26 -2
  91. package/data/scss/widgets/generic/chat/_sizes.scss +32 -9
  92. package/data/scss/widgets/generic/gridBase/_index.scss +19 -2
  93. package/data/scss/widgets/generic/htmlEditor/_index.scss +25 -0
  94. package/data/scss/widgets/generic/htmlEditor/_sizes.scss +9 -0
  95. package/data/scss/widgets/generic/informer/_colors.scss +47 -0
  96. package/data/scss/widgets/generic/informer/_index.scss +16 -0
  97. package/data/scss/widgets/generic/informer/_sizes.scss +26 -0
  98. package/data/scss/widgets/generic/loadIndicator/_colors.scss +27 -2
  99. package/data/scss/widgets/generic/loadIndicator/_index.scss +25 -17
  100. package/data/scss/widgets/generic/recurrenceEditor/_index.scss +8 -0
  101. package/data/scss/widgets/generic/recurrenceEditor/_sizes.scss +8 -2
  102. package/data/scss/widgets/generic/scheduler/_index.scss +1 -1
  103. package/data/scss/widgets/generic/scheduler/_sizes.scss +7 -4
  104. package/data/scss/widgets/generic/stepper/_colors.scss +179 -15
  105. package/data/scss/widgets/generic/stepper/_index.scss +24 -9
  106. package/data/scss/widgets/generic/stepper/_sizes.scss +14 -9
  107. package/data/scss/widgets/generic/tabPanel/_index.scss +9 -0
  108. package/data/scss/widgets/material/_index.scss +2 -0
  109. package/data/scss/widgets/material/cardView/_colors.scss +167 -0
  110. package/data/scss/widgets/material/cardView/_index.scss +5 -0
  111. package/data/scss/widgets/material/cardView/_sizes.scss +162 -0
  112. package/data/scss/widgets/material/chat/_colors.scss +7 -0
  113. package/data/scss/widgets/material/chat/_index.scss +25 -2
  114. package/data/scss/widgets/material/chat/_sizes.scss +36 -7
  115. package/data/scss/widgets/material/common/_mixins.scss +1 -0
  116. package/data/scss/widgets/material/gridBase/_index.scss +13 -2
  117. package/data/scss/widgets/material/htmlEditor/_index.scss +31 -0
  118. package/data/scss/widgets/material/htmlEditor/_sizes.scss +12 -0
  119. package/data/scss/widgets/material/informer/_colors.scss +15 -0
  120. package/data/scss/widgets/material/informer/_index.scss +16 -0
  121. package/data/scss/widgets/material/informer/_sizes.scss +24 -0
  122. package/data/scss/widgets/material/loadIndicator/_colors.scss +15 -0
  123. package/data/scss/widgets/material/loadIndicator/_index.scss +52 -39
  124. package/data/scss/widgets/material/recurrenceEditor/_index.scss +2 -4
  125. package/data/scss/widgets/material/recurrenceEditor/_sizes.scss +8 -2
  126. package/data/scss/widgets/material/scheduler/_index.scss +1 -1
  127. package/data/scss/widgets/material/scheduler/_sizes.scss +8 -3
  128. package/data/scss/widgets/material/stepper/_colors.scss +103 -23
  129. package/data/scss/widgets/material/stepper/_index.scss +24 -9
  130. package/data/scss/widgets/material/stepper/_sizes.scss +12 -7
  131. package/package.json +1 -1
  132. package/data/scss/widgets/base/stepper/layout/step-list/_mixins.scss +0 -1
@@ -0,0 +1,16 @@
1
+ @use "../../base/informer";
2
+ @use "colors" as *;
3
+ @use "sizes" as *;
4
+ @use "../../base/informer/mixins" as *;
5
+
6
+ // adduse
7
+
8
+ @include informer(
9
+ $informer-color,
10
+ $informer-background-color,
11
+ $informer-border-radius,
12
+ $informer-icon-size,
13
+ $informer-padding-inline,
14
+ $informer-padding-block,
15
+ $informer-column-gap,
16
+ );
@@ -0,0 +1,24 @@
1
+ @use "../common/sizes" as *;
2
+ @use "../sizes" as *;
3
+
4
+ // adduse
5
+
6
+ $informer-icon-size: $material-base-icon-size !default;
7
+ $informer-padding-inline: null !default;
8
+ $informer-padding-block: null !default;
9
+ $informer-column-gap: null !default;
10
+ $informer-border-radius: null !default;
11
+
12
+ @if $size == "default" {
13
+ $informer-padding-inline: 12px !default;
14
+ $informer-padding-block: 8px !default;
15
+ $informer-column-gap: 8px !default;
16
+ $informer-border-radius: 4px !default;
17
+ }
18
+
19
+ @else if $size == "compact" {
20
+ $informer-padding-inline: 8px !default;
21
+ $informer-padding-block: 6px !default;
22
+ $informer-column-gap: 4px !default;
23
+ $informer-border-radius: 3px !default;
24
+ }
@@ -6,6 +6,21 @@ $load-indicator-segment-bg-color: getCustomVar(("$load-indicator-segment-bg-colo
6
6
 
7
7
  // adduse
8
8
  $load-indicator-segment-bg-color: $base-accent !default;
9
+ $load-indicator-animation-sparkle-bg-color1: null !default;
10
+ $load-indicator-animation-sparkle-bg-color2: null !default;
11
+ $load-indicator-animation-sparkle-bg-color3: null !default;
12
+
13
+ @if $mode == "light" {
14
+ $load-indicator-animation-sparkle-bg-color1: lighten(desaturate($base-accent, 3.66), 12.94) !default;
15
+ $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 3.68), 25.88) !default;
16
+ $load-indicator-animation-sparkle-bg-color3: lighten(saturate(adjust-hue($base-accent, -1), 5.90), 34.31) !default;
17
+ }
18
+
19
+ @else if $mode == "dark" {
20
+ $load-indicator-animation-sparkle-bg-color1: lighten(desaturate($base-accent, 3.66), 12.94) !default;
21
+ $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 3.68), 25.88) !default;
22
+ $load-indicator-animation-sparkle-bg-color3: lighten(saturate(adjust-hue($base-accent, -1), 5.90), 34.31) !default;
23
+ }
9
24
  $never-used: collector((
10
25
  "$load-indicator-segment-bg-color": $load-indicator-segment-bg-color,
11
26
  ));
@@ -3,19 +3,17 @@
3
3
  @use "../colors" as *;
4
4
  @use "sizes" as *;
5
5
  @use "../sizes" as *;
6
- @use "../../base/loadIndicator";
6
+ @use "../../base/loadIndicator" as *;
7
7
 
8
8
  // adduse
9
9
 
10
10
  .dx-loadindicator {
11
- background-color: transparent;
12
11
  line-height: 100%;
13
12
  }
14
13
 
15
14
  .dx-loadindicator-content {
16
15
  height: 100%;
17
16
  width: 100%;
18
- animation: dx-content-rotation 1568ms linear infinite;
19
17
  }
20
18
 
21
19
  .dx-loadindicator-image {
@@ -25,10 +23,8 @@
25
23
  }
26
24
 
27
25
  .dx-loadindicator-icon {
28
- position: absolute;
29
26
  height: 100%;
30
27
  width: 100%;
31
- animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
32
28
  }
33
29
 
34
30
  .dx-loadindicator-segment {
@@ -48,53 +44,70 @@
48
44
  border-radius: 50%;
49
45
  }
50
46
 
51
- .dx-loadindicator-segment2,
52
- .dx-loadindicator-segment0 {
53
- width: 50%;
54
- height: 100%;
55
- overflow: hidden;
47
+ .dx-loadindicator-content-circle {
48
+ .dx-loadindicator-content {
49
+ animation: dx-content-rotation 1568ms linear infinite;
50
+ }
56
51
 
57
- .dx-loadindicator-segment-inner {
58
- width: 200%;
52
+ .dx-loadindicator-icon {
53
+ position: absolute;
54
+ animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
59
55
  }
60
- }
61
56
 
62
- .dx-loadindicator-segment2 {
63
- left: 0;
57
+ .dx-loadindicator-segment2,
58
+ .dx-loadindicator-segment0 {
59
+ width: 50%;
60
+ height: 100%;
61
+ overflow: hidden;
64
62
 
65
- .dx-loadindicator-segment-inner {
66
- border-right-color: transparent;
67
- transform: rotate(-129deg);
68
- animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
63
+ .dx-loadindicator-segment-inner {
64
+ width: 200%;
65
+ }
69
66
  }
70
- }
71
67
 
72
- .dx-loadindicator-segment0 {
73
- right: 0;
68
+ .dx-loadindicator-segment2 {
69
+ left: 0;
74
70
 
75
- .dx-loadindicator-segment-inner {
76
- left: -100%;
77
- border-left-color: transparent;
78
- transform: rotate(129deg);
79
- animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
71
+ .dx-loadindicator-segment-inner {
72
+ border-right-color: transparent;
73
+ transform: rotate(-129deg);
74
+ animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
75
+ }
80
76
  }
81
- }
82
77
 
83
- .dx-loadindicator-segment1 {
84
- position: absolute;
85
- top: 0;
86
- left: 45%;
87
- width: 10%;
88
- height: 100%;
89
- overflow: hidden;
90
- box-sizing: border-box;
78
+ .dx-loadindicator-segment0 {
79
+ right: 0;
91
80
 
92
- .dx-loadindicator-segment-inner {
93
- width: 1000%;
94
- left: -450%;
81
+ .dx-loadindicator-segment-inner {
82
+ left: -100%;
83
+ border-left-color: transparent;
84
+ transform: rotate(129deg);
85
+ animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
86
+ }
87
+ }
88
+
89
+ .dx-loadindicator-segment1 {
90
+ position: absolute;
91
+ top: 0;
92
+ left: 45%;
93
+ width: 10%;
94
+ height: 100%;
95
+ overflow: hidden;
96
+ box-sizing: border-box;
97
+
98
+ .dx-loadindicator-segment-inner {
99
+ width: 1000%;
100
+ left: -450%;
101
+ }
95
102
  }
96
103
  }
97
104
 
105
+ @include loadindicator-animation-sparkle(
106
+ $load-indicator-animation-sparkle-bg-color1,
107
+ $load-indicator-animation-sparkle-bg-color2,
108
+ $load-indicator-animation-sparkle-bg-color3
109
+ );
110
+
98
111
  @keyframes dx-content-rotation {
99
112
  to { transform: rotate(360deg); }
100
113
  }
@@ -12,7 +12,6 @@
12
12
  $material-recurrence-number-box-margin: 11px;
13
13
  $material-recurrence-button-group-padding: 6px;
14
14
  $material-recurrence-radio-group-margin: 15px;
15
- $material-recurrence-date-box-mergin-left: 23px;
16
15
 
17
16
  .dx-recurrence-numberbox-interval {
18
17
  margin-right: $material-recurrence-number-box-margin;
@@ -38,10 +37,9 @@ $material-recurrence-date-box-mergin-left: 23px;
38
37
  }
39
38
 
40
39
  .dx-recurrence-datebox-until-date {
41
- margin-left: $material-recurrence-date-box-mergin-left;
40
+ margin-top: $material-recurrence-until-date-box-top-margin;
42
41
  }
43
42
 
44
43
  .dx-recurrence-numberbox-repeat-count {
45
- margin: 0 $material-recurrence-number-box-margin 0 $material-recurrence-number-box-margin;
44
+ margin-top: $material-recurrence-count-number-box-top-margin;
46
45
  }
47
-
@@ -2,12 +2,18 @@
2
2
 
3
3
  // adduse
4
4
 
5
+ $material-recurrence-until-date-box-top-margin: null !default;
6
+ $material-recurrence-count-number-box-top-margin: null !default;
5
7
  $material-recurrence-interval-number-box-margin-top: null !default;
6
8
 
7
9
  @if $size == "default" {
8
- $material-recurrence-interval-number-box-margin-top: 40px !default;
10
+ $material-recurrence-until-date-box-top-margin: 60px !default;
11
+ $material-recurrence-count-number-box-top-margin: 100px !default;
12
+ $material-recurrence-interval-number-box-margin-top: 55px !default;
9
13
  }
10
14
 
11
15
  @else if $size == "compact" {
12
- $material-recurrence-interval-number-box-margin-top: 25px !default;
16
+ $material-recurrence-until-date-box-top-margin: 50px !default;
17
+ $material-recurrence-count-number-box-top-margin: 82px !default;
18
+ $material-recurrence-interval-number-box-margin-top: 33px !default;
13
19
  }
@@ -378,8 +378,8 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
378
378
  .dx-scheduler-header {
379
379
  @include header-sizes(
380
380
  $material-scheduler-header-height,
381
+ $material-scheduler-header-offset,
381
382
  $material-scheduler-toolbar-item-offset,
382
- baseScheduler.$scheduler-base-border,
383
383
  );
384
384
  @include header-buttons(
385
385
  $button-normal-bg,
@@ -39,7 +39,8 @@ $material-scheduler-workspace-month-header-height: 22px !default;
39
39
  $material-scheduler-workspace-month-timeline--time-height: 34px !default;
40
40
 
41
41
  $agenda-appointment-title-font-size: null !default;
42
- $material-scheduler-header-height: $material-toolbar-height + 2px !default;
42
+ $material-scheduler-header-height: null !default;
43
+ $material-scheduler-header-offset: null !default;
43
44
 
44
45
  $scheduler-timeline-cell-height: 50px !default;
45
46
 
@@ -47,9 +48,11 @@ $scheduler-timeline-cell-height: 50px !default;
47
48
  @if $size == "default" {
48
49
  $material-scheduler-workspace-date-table-cell-height: 38px !default;
49
50
 
50
- $material-scheduler-toolbar-item-offset: 0 16px !default;
51
51
  $material-scheduler-navigator-height: 36px !default;
52
52
  $material-scheduler-header-panel-day-font-size: 30px !default;
53
+ $material-scheduler-header-height: 54px !default;
54
+ $material-scheduler-header-offset: 2px 16px !default;
55
+ $material-scheduler-toolbar-item-offset: 4px !default;
53
56
 
54
57
  $material-scheduler-appointment-tooltip-title-font-size: 18px !default;
55
58
  $material-scheduler-appointment-tooltip-date-font-size: 14px !default;
@@ -74,9 +77,11 @@ $scheduler-timeline-cell-height: 50px !default;
74
77
  @else if $size == "compact" {
75
78
  $material-scheduler-workspace-date-table-cell-height: 28px !default;
76
79
 
77
- $material-scheduler-toolbar-item-offset: 0 11px !default;
78
80
  $material-scheduler-navigator-height: 28px !default;
79
81
  $material-scheduler-header-panel-day-font-size: 20px !default;
82
+ $material-scheduler-header-height: 38px !default;
83
+ $material-scheduler-header-offset: 0 8px !default;
84
+ $material-scheduler-toolbar-item-offset: 0 !default;
80
85
 
81
86
  $material-scheduler-appointment-tooltip-title-font-size: 14px !default;
82
87
  $material-scheduler-appointment-tooltip-date-font-size: 11px !default;
@@ -1,36 +1,116 @@
1
+ $stepper-step-accent-bg: getCustomVar(("$stepper-step-accent-bg")) !default;
2
+ $stepper-step-accent-hover-bg: getCustomVar(("$stepper-step-accent-hover-bg")) !default;
3
+ $stepper-step-danger-bg: getCustomVar(("$stepper-step-danger-bg")) !default;
4
+ $stepper-step-danger-hover-bg: getCustomVar(("$stepper-step-danger-hover-bg")) !default;
5
+ $stepper-step-shadow-color: getCustomVar(("$stepper-step-shadow-color")) !default;
6
+ $stepper-step-base-bg: getCustomVar(("$stepper-step-base-bg")) !default;
7
+ $stepper-step-base-hover-bg: getCustomVar(("$stepper-step-base-hover-bg")) !default;
8
+ $stepper-step-base-text-color: getCustomVar(("$stepper-step-base-text-color")) !default;
9
+ $stepper-step-base-label-color: getCustomVar(("$stepper-step-base-label-color")) !default;
10
+ $stepper-step-disabled-shadow: getCustomVar(("$stepper-step-disabled-shadow")) !default;
11
+ $stepper-step-disabled-bg: getCustomVar(("$stepper-step-disabled-bg")) !default;
12
+ $stepper-step-disabled-text-color: getCustomVar(("$stepper-step-disabled-text-color")) !default;
13
+ $stepper-connector-bg: getCustomVar(("$stepper-connector-bg")) !default;
14
+ $stepper-connector-value-bg: getCustomVar(("$stepper-connector-value-bg")) !default;
15
+ $stepper-step-base-border-color: getCustomVar(("$stepper-step-base-border-color")) !default;
16
+ $stepper-step-base-hover-border-color: getCustomVar(("$stepper-step-base-hover-border-color")) !default;
17
+ $stepper-step-selected-bg: getCustomVar(("$stepper-step-selected-bg")) !default;
18
+ $stepper-step-selected-hover-bg: getCustomVar(("$stepper-step-selected-hover-bg")) !default;
19
+ $stepper-step-selected-label-color: getCustomVar(("$stepper-step-selected-label-color")) !default;
20
+ $stepper-step-selected-text-color: getCustomVar(("$stepper-step-selected-text-color")) !default;
21
+ $stepper-step-invalid-bg: getCustomVar(("$stepper-step-invalid-bg")) !default;
22
+ $stepper-step-invalid-hover-bg: getCustomVar(("$stepper-step-invalid-hover-bg")) !default;
23
+ $stepper-step-invalid-border-color: getCustomVar(("$stepper-step-invalid-border-color")) !default;
24
+ $stepper-step-invalid-hover-border-color: getCustomVar(("$stepper-step-invalid-hover-border-color")) !default;
25
+ $stepper-step-invalid-text-color: getCustomVar(("$stepper-step-invalid-text-color")) !default;
26
+ $stepper-step-invalid-hover-text-color: getCustomVar(("$stepper-step-invalid-hover-text-color")) !default;
27
+ $stepper-step-invalid-label-color: getCustomVar(("$stepper-step-invalid-label-color")) !default;
28
+ $stepper-step-invalid-selected-bg: getCustomVar(("$stepper-step-invalid-selected-bg")) !default;
29
+ $stepper-step-invalid-selected-hover-bg: getCustomVar(("$stepper-step-invalid-selected-hover-bg")) !default;
30
+
1
31
  @use "sass:color";
2
32
  @use "../sizes" as *;
3
33
  @use "../colors" as *;
4
34
  @use "../button/colors" as *;
5
35
 
6
36
  // adduse
7
-
8
- $stepper-step-bg: $typography-bg !default;
9
- $stepper-step-hover-bg: $button-normal-hover-bg !default;
10
-
11
- $stepper-step-color-selected: $base-inverted-text-color !default;
12
- $stepper-step-selected-bg: $button-default-bg !default;
13
- $stepper-step-selected-hover-bg: $button-default-hover-bg !default;
14
-
15
- $stepper-step-invalid-bg: $button-danger-bg !default;
16
- $stepper-step-invalid-hover-bg: $button-danger-hover-bg !default;
17
-
18
- $stepper-step-border-color: $base-border-color !default;
19
- $stepper-step-hover-border-color: null !default;
20
-
21
- $stepper-step-focused-border-color: $stepper-step-selected-hover-bg !default;
22
- $stepper-step-selected-border-color: $base-accent !default;
23
-
37
+ $stepper-step-accent-bg: $base-accent !default;
38
+ $stepper-step-accent-hover-bg: null !default;
39
+ $stepper-step-danger-bg: $base-danger !default;
40
+ $stepper-step-danger-hover-bg: null !default;
41
+ $stepper-step-shadow-color: $base-bg !default;
42
+ $stepper-step-base-bg: null !default;
43
+ $stepper-step-base-hover-bg: null !default;
44
+ $stepper-step-base-text-color: $base-inverted-text-color !default;
45
+ $stepper-step-base-label-color: $base-label-color !default;
46
+ $stepper-step-disabled-shadow: $base-bg !default;
47
+ $stepper-step-disabled-bg: null !default;
48
+ $stepper-step-disabled-text-color: $base-disabled-color !default;
24
49
  $stepper-connector-bg: $base-border-color !default;
25
- $stepper-connector-value-bg: $base-accent !default;
26
-
27
- $stepper-step-disabled-text-color: color.change($base-text-color, $alpha: 0.38) !default;
28
- $stepper-step-disabled-bg: $base-border-color !default;
50
+ $stepper-connector-value-bg: $base-label-color !default;
29
51
 
30
52
  @if $mode == 'light' {
31
- $stepper-step-hover-border-color: darken($base-border-color, 6%) !default;
53
+ $stepper-step-base-bg: darken($base-bg, 38%) !default;
54
+ $stepper-step-base-hover-bg: darken($base-bg, 42%) !default;
55
+
56
+ $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 8.5%) !default;
57
+ $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 8.5%) !default;
58
+
59
+ $stepper-step-disabled-bg: darken($base-bg, 12%) !default;
32
60
  }
33
61
 
34
62
  @if $mode == 'dark' {
35
- $stepper-step-hover-border-color: lighten($base-border-color, 6%) !default;
63
+ $stepper-step-base-bg: lighten(desaturate($base-bg, 5.59), 29.22%) !default;
64
+ $stepper-step-base-hover-bg: lighten(desaturate($base-bg, 5.84), 32.16) !default;
65
+
66
+ $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 8.5%) !default;
67
+ $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 8.5%) !default;
68
+
69
+ $stepper-step-disabled-bg: lighten(desaturate($base-bg, 3.02), 9.22) !default;
36
70
  }
71
+ $stepper-step-base-border-color: $stepper-step-base-bg !default;
72
+ $stepper-step-base-hover-border-color: $stepper-step-base-hover-bg !default;
73
+ $stepper-step-selected-bg: $stepper-step-accent-bg !default;
74
+ $stepper-step-selected-hover-bg: $stepper-step-accent-hover-bg !default;
75
+ $stepper-step-selected-label-color: $base-text-color !default;
76
+ $stepper-step-selected-text-color: $base-inverted-text-color !default;
77
+ $stepper-step-invalid-bg: $stepper-step-danger-bg !default;
78
+ $stepper-step-invalid-hover-bg: $stepper-step-danger-hover-bg !default;
79
+ $stepper-step-invalid-border-color: $stepper-step-invalid-bg !default;
80
+ $stepper-step-invalid-hover-border-color: $stepper-step-invalid-hover-bg !default;
81
+ $stepper-step-invalid-text-color: $base-inverted-text-color !default;
82
+ $stepper-step-invalid-hover-text-color: $base-inverted-text-color !default;
83
+ $stepper-step-invalid-label-color: $base-text-color !default;
84
+ $stepper-step-invalid-selected-bg: $stepper-step-danger-bg !default;
85
+ $stepper-step-invalid-selected-hover-bg: $stepper-step-danger-hover-bg !default;
86
+ $never-used: collector((
87
+ "$stepper-step-accent-bg": $stepper-step-accent-bg,
88
+ "$stepper-step-accent-hover-bg": $stepper-step-accent-hover-bg,
89
+ "$stepper-step-danger-bg": $stepper-step-danger-bg,
90
+ "$stepper-step-danger-hover-bg": $stepper-step-danger-hover-bg,
91
+ "$stepper-step-shadow-color": $stepper-step-shadow-color,
92
+ "$stepper-step-base-bg": $stepper-step-base-bg,
93
+ "$stepper-step-base-hover-bg": $stepper-step-base-hover-bg,
94
+ "$stepper-step-base-text-color": $stepper-step-base-text-color,
95
+ "$stepper-step-base-label-color": $stepper-step-base-label-color,
96
+ "$stepper-step-disabled-shadow": $stepper-step-disabled-shadow,
97
+ "$stepper-step-disabled-bg": $stepper-step-disabled-bg,
98
+ "$stepper-step-disabled-text-color": $stepper-step-disabled-text-color,
99
+ "$stepper-connector-bg": $stepper-connector-bg,
100
+ "$stepper-connector-value-bg": $stepper-connector-value-bg,
101
+ "$stepper-step-base-border-color": $stepper-step-base-border-color,
102
+ "$stepper-step-base-hover-border-color": $stepper-step-base-hover-border-color,
103
+ "$stepper-step-selected-bg": $stepper-step-selected-bg,
104
+ "$stepper-step-selected-hover-bg": $stepper-step-selected-hover-bg,
105
+ "$stepper-step-selected-label-color": $stepper-step-selected-label-color,
106
+ "$stepper-step-selected-text-color": $stepper-step-selected-text-color,
107
+ "$stepper-step-invalid-bg": $stepper-step-invalid-bg,
108
+ "$stepper-step-invalid-hover-bg": $stepper-step-invalid-hover-bg,
109
+ "$stepper-step-invalid-border-color": $stepper-step-invalid-border-color,
110
+ "$stepper-step-invalid-hover-border-color": $stepper-step-invalid-hover-border-color,
111
+ "$stepper-step-invalid-text-color": $stepper-step-invalid-text-color,
112
+ "$stepper-step-invalid-hover-text-color": $stepper-step-invalid-hover-text-color,
113
+ "$stepper-step-invalid-label-color": $stepper-step-invalid-label-color,
114
+ "$stepper-step-invalid-selected-bg": $stepper-step-invalid-selected-bg,
115
+ "$stepper-step-invalid-selected-hover-bg": $stepper-step-invalid-selected-hover-bg,
116
+ ));
@@ -8,12 +8,14 @@
8
8
  // adduse
9
9
 
10
10
  @include stepper(
11
- $stepper-margin,
11
+ $stepper-padding,
12
12
  );
13
13
  @include connector(
14
14
  $stepper-connector-bg,
15
15
  $stepper-connector-value-bg,
16
- $stepper-connector-margin-start,
16
+ $stepper-connector-size,
17
+ $stepper-connector-padding,
18
+ $stepper-connector-thickness,
17
19
  );
18
20
  @include step(
19
21
  $stepper-step-min-size,
@@ -22,19 +24,32 @@
22
24
  $stepper-step-content-row-gap,
23
25
  $stepper-step-content-column-gap,
24
26
  $stepper-step-optional-mark-font-size,
27
+ $stepper-step-icon-size,
28
+ $stepper-step-transition-duration,
25
29
  );
26
30
  @include step-states(
27
- $stepper-step-bg,
28
- $stepper-step-hover-bg,
29
- $stepper-step-color-selected,
31
+ $stepper-step-shadow-color,
32
+ $stepper-step-base-bg,
33
+ $stepper-step-base-hover-bg,
34
+ $stepper-step-base-border-color,
35
+ $stepper-step-base-hover-border-color,
36
+ $stepper-step-base-text-color,
37
+ $stepper-step-base-label-color,
30
38
  $stepper-step-selected-bg,
31
39
  $stepper-step-selected-hover-bg,
32
- $stepper-step-border-color,
33
- $stepper-step-hover-border-color,
34
- $stepper-step-focused-border-color,
35
- $stepper-step-selected-border-color,
40
+ $stepper-step-selected-text-color,
41
+ $stepper-step-selected-label-color,
42
+ $stepper-step-selected-font-weight,
36
43
  $stepper-step-invalid-bg,
37
44
  $stepper-step-invalid-hover-bg,
45
+ $stepper-step-invalid-border-color,
46
+ $stepper-step-invalid-hover-border-color,
47
+ $stepper-step-invalid-text-color,
48
+ $stepper-step-invalid-hover-text-color,
49
+ $stepper-step-invalid-label-color,
50
+ $stepper-step-invalid-selected-bg,
51
+ $stepper-step-invalid-selected-hover-bg,
38
52
  $stepper-step-disabled-text-color,
39
53
  $stepper-step-disabled-bg,
54
+ $stepper-step-disabled-shadow,
40
55
  );
@@ -1,4 +1,3 @@
1
- @use "sass:math";
2
1
  @use "colors" as *;
3
2
  @use "../colors" as *;
4
3
  @use "../sizes" as *;
@@ -6,27 +5,33 @@
6
5
 
7
6
  // adduse
8
7
 
9
- $stepper-margin: null !default;
8
+ $stepper-padding: null !default;
10
9
  $stepper-step-min-size: null !default;
11
10
  $stepper-step-indicator-size: null !default;
12
11
  $stepper-step-content-row-gap: null !default;
13
12
  $stepper-step-content-column-gap: null !default;
14
13
  $stepper-step-optional-mark-font-size: $material-xs-font-size !default;
14
+ $stepper-step-icon-size: $material-button-icon-size !default;
15
+
16
+ $stepper-step-selected-font-weight: 500 !default;
17
+ $stepper-step-transition-duration: .2s !default;
15
18
 
16
19
  @if $size == "default" {
17
- $stepper-margin: 12px !default;
18
- $stepper-step-min-size: 48px !default;
19
- $stepper-step-indicator-size: 32px !default;
20
+ $stepper-padding: 12px !default;
21
+ $stepper-step-min-size: 46px !default;
22
+ $stepper-step-indicator-size: 30px !default;
20
23
  $stepper-step-content-row-gap: 8px !default;
21
24
  $stepper-step-content-column-gap: 12px !default;
22
25
  }
23
26
 
24
27
  @else if $size == "compact" {
25
- $stepper-margin: 8px !default;
28
+ $stepper-padding: 8px !default;
26
29
  $stepper-step-min-size: 40px !default;
27
30
  $stepper-step-indicator-size: 24px !default;
28
31
  $stepper-step-content-row-gap: 6px !default;
29
32
  $stepper-step-content-column-gap: 8px !default;
30
33
  }
31
34
 
32
- $stepper-connector-margin-start: math.div($stepper-step-indicator-size - $material-base-border-width * 2, 2);
35
+ $stepper-connector-thickness: 1px !default;
36
+ $stepper-connector-size: $stepper-step-indicator-size !default;
37
+ $stepper-connector-padding: $stepper-padding !default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "devextreme-themebuilder",
3
- "version": "25.1.1-alpha",
3
+ "version": "25.1.2-beta",
4
4
  "description": "DevExtreme ThemeBuilder",
5
5
  "keywords": [
6
6
  "devextreme",