@progress/kendo-theme-material 11.0.0-dev.0 → 11.0.0-dev.1

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 (184) hide show
  1. package/dist/all.css +1 -1
  2. package/dist/material-2-dark.css +1 -0
  3. package/dist/material-2-dark.scss +137 -0
  4. package/dist/material-2.css +1 -0
  5. package/dist/material-2.scss +132 -0
  6. package/dist/material-aqua-dark.css +1 -1
  7. package/dist/material-arctic.css +1 -1
  8. package/dist/material-burnt-teal.css +1 -1
  9. package/dist/material-dataviz-v4.css +1 -1
  10. package/dist/material-eggplant.css +1 -1
  11. package/dist/material-lime-dark.css +1 -1
  12. package/dist/material-lime.css +1 -1
  13. package/dist/material-main-dark.css +1 -1
  14. package/dist/material-main-dark.scss +97 -97
  15. package/dist/material-main.css +1 -1
  16. package/dist/material-nova.css +1 -1
  17. package/dist/material-pacific-dark.css +1 -1
  18. package/dist/material-pacific.css +1 -1
  19. package/dist/material-sky-dark.css +1 -1
  20. package/dist/material-sky.css +1 -1
  21. package/dist/material-smoke.css +1 -1
  22. package/dist/meta/sassdoc-data.json +11721 -9853
  23. package/dist/meta/sassdoc-raw-data.json +3880 -3030
  24. package/dist/meta/variables.json +2515 -2282
  25. package/lib/swatches/index.js +2 -0
  26. package/lib/swatches/material-2-dark.json +657 -0
  27. package/lib/swatches/material-2.json +632 -0
  28. package/lib/swatches/material-aqua-dark.json +1 -1
  29. package/lib/swatches/material-arctic.json +1 -1
  30. package/lib/swatches/material-burnt-teal.json +1 -1
  31. package/lib/swatches/material-dataviz-v4.json +1 -1
  32. package/lib/swatches/material-eggplant.json +1 -1
  33. package/lib/swatches/material-lime-dark.json +1 -1
  34. package/lib/swatches/material-lime.json +1 -1
  35. package/lib/swatches/material-main-dark.json +103 -103
  36. package/lib/swatches/material-main.json +6 -6
  37. package/lib/swatches/material-nova.json +1 -1
  38. package/lib/swatches/material-pacific-dark.json +1 -1
  39. package/lib/swatches/material-pacific.json +1 -1
  40. package/lib/swatches/material-sky-dark.json +1 -1
  41. package/lib/swatches/material-sky.json +1 -1
  42. package/lib/swatches/material-smoke.json +1 -1
  43. package/package.json +4 -4
  44. package/scss/action-buttons/_layout.scss +0 -23
  45. package/scss/action-buttons/_theme.scss +0 -13
  46. package/scss/action-buttons/_variables.scss +3 -3
  47. package/scss/action-sheet/_layout.scss +6 -0
  48. package/scss/action-sheet/_variables.scss +21 -22
  49. package/scss/appbar/_variables.scss +3 -3
  50. package/scss/badge/_layout.scss +0 -1
  51. package/scss/badge/_variables.scss +8 -8
  52. package/scss/bottom-navigation/_theme.scss +54 -3
  53. package/scss/bottom-navigation/_variables.scss +16 -16
  54. package/scss/breadcrumb/_variables.scss +19 -19
  55. package/scss/button/_layout.scss +0 -79
  56. package/scss/button/_theme.scss +114 -29
  57. package/scss/button/_variables.scss +28 -24
  58. package/scss/calendar/_layout.scss +13 -16
  59. package/scss/calendar/_theme.scss +29 -11
  60. package/scss/calendar/_variables.scss +75 -48
  61. package/scss/captcha/_variables.scss +3 -3
  62. package/scss/card/_variables.scss +15 -15
  63. package/scss/chat/_theme.scss +4 -0
  64. package/scss/chat/_variables.scss +4 -4
  65. package/scss/checkbox/_layout.scss +35 -0
  66. package/scss/checkbox/_theme.scss +113 -4
  67. package/scss/checkbox/_variables.scss +18 -15
  68. package/scss/chip/_layout.scss +10 -0
  69. package/scss/chip/_theme.scss +41 -61
  70. package/scss/chip/_variables.scss +36 -18
  71. package/scss/coloreditor/_variables.scss +8 -8
  72. package/scss/colorgradient/_variables.scss +3 -33
  73. package/scss/column-menu/_variables.scss +1 -1
  74. package/scss/core/color-system/_palettes.scss +243 -242
  75. package/scss/core/color-system/_swatch.scss +142 -142
  76. package/scss/core/elevation/index.import.scss +18 -27
  77. package/scss/core/typography/index.import.scss +8 -8
  78. package/scss/dataviz/_variables.scss +1 -1
  79. package/scss/dialog/_variables.scss +6 -1
  80. package/scss/dock-manager/_variables.scss +14 -14
  81. package/scss/draggable/_variables.scss +1 -1
  82. package/scss/drawer/_layout.scss +2 -0
  83. package/scss/drawer/_theme.scss +0 -11
  84. package/scss/drawer/_variables.scss +48 -23
  85. package/scss/dropzone/_variables.scss +2 -2
  86. package/scss/editor/_layout.scss +2 -12
  87. package/scss/editor/_variables.scss +4 -4
  88. package/scss/expansion-panel/_layout.scss +5 -0
  89. package/scss/expansion-panel/_variables.scss +6 -6
  90. package/scss/fab/_layout.scss +1 -1
  91. package/scss/fab/_theme.scss +13 -12
  92. package/scss/fab/_variables.scss +11 -11
  93. package/scss/filemanager/_theme.scss +4 -0
  94. package/scss/filemanager/_variables.scss +1 -1
  95. package/scss/filter/_variables.scss +2 -2
  96. package/scss/forms/_variables.scss +5 -5
  97. package/scss/gantt/_variables.scss +16 -16
  98. package/scss/grid/_layout.scss +6 -21
  99. package/scss/grid/_theme.scss +12 -55
  100. package/scss/grid/_variables.scss +13 -13
  101. package/scss/imageeditor/_variables.scss +2 -2
  102. package/scss/input/_layout.scss +10 -14
  103. package/scss/input/_variables.scss +35 -34
  104. package/scss/list/_theme.scss +1 -1
  105. package/scss/list/_variables.scss +100 -22
  106. package/scss/listbox/_variables.scss +1 -1
  107. package/scss/listgroup/_variables.scss +4 -4
  108. package/scss/listview/_theme.scss +0 -13
  109. package/scss/listview/_variables.scss +5 -5
  110. package/scss/loader/_variables.scss +2 -2
  111. package/scss/map/_variables.scss +2 -2
  112. package/scss/mediaplayer/_variables.scss +2 -2
  113. package/scss/menu/_layout.scss +4 -0
  114. package/scss/menu/_theme.scss +1 -26
  115. package/scss/menu/_variables.scss +47 -39
  116. package/scss/menu-button/_variables.scss +1 -1
  117. package/scss/messagebox/_layout.scss +5 -1
  118. package/scss/messagebox/_variables.scss +1 -1
  119. package/scss/notification/_layout.scss +5 -0
  120. package/scss/notification/_theme.scss +1 -0
  121. package/scss/notification/_variables.scss +18 -8
  122. package/scss/orgchart/_variables.scss +3 -3
  123. package/scss/pager/_variables.scss +4 -4
  124. package/scss/panel/_variables.scss +3 -3
  125. package/scss/panelbar/_layout.scss +29 -1
  126. package/scss/panelbar/_theme.scss +0 -1
  127. package/scss/panelbar/_variables.scss +23 -23
  128. package/scss/pdf-viewer/_variables.scss +3 -3
  129. package/scss/pivotgrid/_theme.scss +0 -12
  130. package/scss/pivotgrid/_variables.scss +4 -4
  131. package/scss/popover/_variables.scss +3 -3
  132. package/scss/popup/_variables.scss +5 -5
  133. package/scss/progressbar/_layout.scss +11 -4
  134. package/scss/progressbar/_variables.scss +2 -2
  135. package/scss/prompt/_layout.scss +4 -0
  136. package/scss/prompt/_variables.scss +8 -8
  137. package/scss/radio/_layout.scss +35 -0
  138. package/scss/radio/_theme.scss +109 -4
  139. package/scss/radio/_variables.scss +17 -14
  140. package/scss/rating/_variables.scss +3 -3
  141. package/scss/scheduler/_layout.scss +2 -89
  142. package/scss/scheduler/_variables.scss +4 -4
  143. package/scss/scrollview/_variables.scss +1 -1
  144. package/scss/slider/_layout.scss +11 -0
  145. package/scss/slider/_theme.scss +1 -10
  146. package/scss/slider/_variables.scss +16 -7
  147. package/scss/split-button/_layout.scss +12 -0
  148. package/scss/split-button/_variables.scss +4 -4
  149. package/scss/splitter/_variables.scss +3 -3
  150. package/scss/spreadsheet/_layout.scss +0 -35
  151. package/scss/spreadsheet/_theme.scss +3 -25
  152. package/scss/spreadsheet/_variables.scss +7 -7
  153. package/scss/stepper/_layout.scss +15 -1
  154. package/scss/stepper/_theme.scss +8 -0
  155. package/scss/stepper/_variables.scss +13 -13
  156. package/scss/switch/_layout.scss +20 -5
  157. package/scss/switch/_theme.scss +2 -9
  158. package/scss/switch/_variables.scss +50 -16
  159. package/scss/table/_layout.scss +6 -0
  160. package/scss/table/_variables.scss +9 -9
  161. package/scss/tabstrip/_layout.scss +100 -4
  162. package/scss/tabstrip/_variables.scss +16 -16
  163. package/scss/taskboard/_layout.scss +4 -0
  164. package/scss/taskboard/_variables.scss +8 -8
  165. package/scss/tilelayout/_layout.scss +7 -1
  166. package/scss/tilelayout/_variables.scss +2 -2
  167. package/scss/timeline/_variables.scss +2 -2
  168. package/scss/timeselector/_layout.scss +38 -0
  169. package/scss/timeselector/_theme.scss +8 -6
  170. package/scss/timeselector/_variables.scss +29 -23
  171. package/scss/toolbar/_layout.scss +0 -47
  172. package/scss/toolbar/_theme.scss +4 -44
  173. package/scss/toolbar/_variables.scss +14 -14
  174. package/scss/tooltip/_variables.scss +6 -6
  175. package/scss/treelist/_layout.scss +0 -19
  176. package/scss/treelist/_theme.scss +10 -15
  177. package/scss/treelist/_variables.scss +1 -1
  178. package/scss/treeview/_theme.scss +2 -31
  179. package/scss/treeview/_variables.scss +24 -24
  180. package/scss/typography/_variables.scss +21 -21
  181. package/scss/upload/_variables.scss +3 -3
  182. package/scss/window/_layout.scss +14 -0
  183. package/scss/window/_variables.scss +8 -8
  184. package/scss/wizard/_variables.scss +3 -3
@@ -1,3 +1,5 @@
1
+ @use "sass:map";
2
+ @use "./_variables.scss" as *;
1
3
  @use "@progress/kendo-theme-core/scss/components/radio/_layout.scss" as *;
2
4
 
3
5
 
@@ -5,6 +7,39 @@
5
7
 
6
8
  @include kendo-radio--layout-base();
7
9
 
10
+ // RadioButton
11
+ // Hover and Focus indicator
12
+ .k-radio {
13
+ &:hover,
14
+ &.k-hover,
15
+ &:focus,
16
+ &.k-focus,
17
+ &.k-invalid {
18
+ position: relative;
19
+
20
+ &::after {
21
+ content: "";
22
+ display: block;
23
+ position: absolute;
24
+ left: 50%;
25
+ top: 50%;
26
+ border-radius: 100%;
27
+ z-index: -1;
28
+ transform: translate(-50%, -50%);
29
+ }
30
+ }
31
+ }
32
+
33
+ @each $size, $size-props in $kendo-radio-sizes {
34
+ $_size: map.get( $size-props, size );
35
+ $_indicator-size: map.get( $size-props, indicator-size );
36
+
37
+ .k-radio-#{$size}::after {
38
+ width: $_indicator-size;
39
+ height: $_indicator-size;
40
+ }
41
+ }
42
+
8
43
  .k-radio::before {
9
44
  transition: transform linear 280ms;
10
45
  transform-origin: 0 0;
@@ -1,3 +1,4 @@
1
+ @use "./_variables.scss" as *;
1
2
  @use "../core/_index.scss" as *;
2
3
  @use "@progress/kendo-theme-core/scss/components/radio/_theme.scss" as *;
3
4
 
@@ -6,12 +7,116 @@
6
7
 
7
8
  @include kendo-radio--theme-base();
8
9
 
10
+ .k-radio {
11
+ &:hover,
12
+ &.k-hover {
13
+ &::after {
14
+ opacity: .08;
15
+ background-color: k-color(on-app-surface);
16
+ }
17
+
18
+ &:checked,
19
+ &.k-checked {
20
+ &::after {
21
+ background-color: k-color(primary);
22
+ }
23
+ }
24
+
25
+ &.k-invalid::after {
26
+ background-color: k-color(error);
27
+ }
28
+ }
29
+
30
+ &:focus,
31
+ &.k-focus {
32
+ &::after {
33
+ opacity: .12;
34
+ background-color: k-color(on-app-surface);
35
+ }
36
+
37
+ &:checked,
38
+ &.k-checked {
39
+ &::after {
40
+ background-color: k-color(primary);
41
+ }
42
+ }
43
+
44
+ &.k-invalid::after {
45
+ background-color: k-color(error);
46
+ }
47
+ }
48
+
49
+ }
50
+
51
+ .k-ripple-focus.k-radio {
52
+
53
+ &:hover,
54
+ &.k-hover,
55
+ &:focus,
56
+ &.k-focus {
57
+ &::after,
58
+ &:checked::after,
59
+ &.k-checked::after,
60
+ &.k-invalid::after {
61
+ background: $kendo-radio-ripple-bg;
62
+ opacity: $kendo-radio-ripple-opacity;
63
+ }
64
+ }
65
+
66
+ /* Radio Ripple animation */
67
+
68
+ &::after {
69
+ animation: ripple-radio 225ms cubic-bezier(0, 0, 0.2, 1);
70
+ }
71
+
72
+ &:checked,
73
+ &.k-checked {
74
+ &::after {
75
+ animation: ripple-radio-checked 225ms cubic-bezier(0, 0, 0.2, 1);
76
+ }
77
+ }
78
+
79
+
80
+ @keyframes ripple-radio {
81
+ 0% {
82
+ background: radial-gradient(circle, $kendo-radio-ripple-bg 0%, k-color(primary) 50%);
83
+ opacity: 0.08;
84
+ }
85
+ 50% {
86
+ background: radial-gradient(circle, $kendo-radio-ripple-bg 50%, k-color(primary) 100%);
87
+ opacity: $kendo-radio-ripple-opacity;
88
+ }
89
+ 100% {
90
+ background: radial-gradient(circle, k-color(primary) 0%, k-color(primary) 100%);
91
+ opacity: .12;
92
+ }
93
+ }
94
+
95
+ @keyframes ripple-radio-checked {
96
+ 0% {
97
+ background: radial-gradient(circle, $kendo-radio-ripple-bg 0%, k-color(on-app-surface) 50%);
98
+ opacity: 0.08;
99
+ }
100
+ 50% {
101
+ background: radial-gradient(circle, $kendo-radio-ripple-bg 50%, k-color(on-app-surface) 100%);
102
+ opacity: $kendo-radio-ripple-opacity;
103
+ }
104
+ 100% {
105
+ background: radial-gradient(circle, k-color(on-app-surface) 0%, k-color(on-app-surface) 100%);
106
+ opacity: .12;
107
+ }
108
+ }
109
+ }
110
+
9
111
  // Radio
10
112
  // Disabled state
11
- .k-radio:disabled + .k-radio-label {
12
- color: k-color(subtle);
13
- opacity: 1;
14
- filter: none;
113
+ .k-radio {
114
+ &:disabled,
115
+ &.k-disabled {
116
+ &.k-invalid {
117
+ border-color: $kendo-radio-disabled-border;
118
+ }
119
+ }
15
120
  }
16
121
 
17
122
  }
@@ -15,7 +15,7 @@ $kendo-radio-border-width: 2px !default;
15
15
 
16
16
  /// The size of a small RadioButton.
17
17
  /// @group radio
18
- $kendo-radio-sm-size: k-spacing(3) !default;
18
+ $kendo-radio-sm-size: k-spacing(4) !default;
19
19
  /// The size of a medium RadioButton.
20
20
  /// @group radio
21
21
  $kendo-radio-md-size: k-spacing(4) !default;
@@ -35,13 +35,14 @@ $kendo-radio-lg-glyph-size: k-spacing(4.5) !default;
35
35
 
36
36
  /// The ripple size of a small RadioButton.
37
37
  /// @group radio
38
- $kendo-radio-sm-ripple-size: 300% !default;
38
+ $kendo-radio-sm-ripple-size: k-spacing(8) !default;
39
39
  /// The ripple size of a medium RadioButton.
40
40
  /// @group radio
41
- $kendo-radio-md-ripple-size: 300% !default;
41
+ $kendo-radio-md-ripple-size: k-spacing(10) !default;
42
42
  /// The ripple size of a large RadioButton.
43
43
  /// @group radio
44
- $kendo-radio-lg-ripple-size: 300% !default;
44
+ $kendo-radio-lg-ripple-size: k-spacing(12) !default;
45
+
45
46
 
46
47
  /// The map with the different RadioButton sizes.
47
48
  /// @group radio
@@ -49,17 +50,20 @@ $kendo-radio-sizes: (
49
50
  sm: (
50
51
  size: $kendo-radio-sm-size,
51
52
  glyph-size: $kendo-radio-sm-glyph-size,
52
- ripple-size: $kendo-radio-sm-ripple-size
53
+ ripple-size: $kendo-radio-sm-ripple-size,
54
+ indicator-size: k-spacing(8)
53
55
  ),
54
56
  md: (
55
57
  size: $kendo-radio-md-size,
56
58
  glyph-size: $kendo-radio-md-glyph-size,
57
- ripple-size: $kendo-radio-md-ripple-size
59
+ ripple-size: $kendo-radio-md-ripple-size,
60
+ indicator-size: k-spacing(10)
58
61
  ),
59
62
  lg: (
60
63
  size: $kendo-radio-lg-size,
61
64
  glyph-size: $kendo-radio-lg-glyph-size,
62
- ripple-size: $kendo-radio-lg-ripple-size
65
+ ripple-size: $kendo-radio-lg-ripple-size,
66
+ indicator-size: k-spacing(12)
63
67
  )
64
68
  ) !default;
65
69
 
@@ -99,7 +103,6 @@ $kendo-radio-focus-border: $kendo-checkbox-focus-border !default;
99
103
  /// The box shadow of the focused RadioButton.
100
104
  /// @group radio
101
105
  $kendo-radio-focus-shadow: $kendo-checkbox-focus-shadow !default;
102
-
103
106
  /// The border color of the focused and checked RadioButton.
104
107
  /// @group radio
105
108
  $kendo-radio-focus-checked-border: $kendo-checkbox-focus-checked-border !default;
@@ -109,20 +112,20 @@ $kendo-radio-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow !default
109
112
 
110
113
  /// The background color of the disabled RadioButton.
111
114
  /// @group radio
112
- $kendo-radio-disabled-bg: unset !default;
115
+ $kendo-radio-disabled-bg: null !default;
113
116
  /// The color of the disabled RadioButton.
114
117
  /// @group radio
115
- $kendo-radio-disabled-text: unset !default;
118
+ $kendo-radio-disabled-text: k-color(on-app-surface) !default;
116
119
  /// The border color of the disabled RadioButton.
117
120
  /// @group radio
118
- $kendo-radio-disabled-border: $kendo-checkbox-disabled-border !default;
121
+ $kendo-radio-disabled-border: k-color(on-app-surface) !default;
119
122
 
120
123
  /// The background color of the disabled and checked RadioButton.
121
124
  /// @group radio
122
- $kendo-radio-disabled-checked-bg: unset !default;
125
+ $kendo-radio-disabled-checked-bg: $kendo-radio-disabled-bg !default;
123
126
  /// The color of the disabled and checked RadioButton.
124
127
  /// @group radio
125
- $kendo-radio-disabled-checked-text: $kendo-radio-disabled-border !default;
128
+ $kendo-radio-disabled-checked-text: $kendo-radio-disabled-text !default;
126
129
  /// The border color of disabled and checked RadioButton.
127
130
  /// @group radio
128
131
  $kendo-radio-disabled-checked-border: $kendo-radio-disabled-border !default;
@@ -163,7 +166,7 @@ $kendo-radio-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg
163
166
 
164
167
  /// The horizontal margin of the RadioButton inside of a label.
165
168
  /// @group radio
166
- $kendo-radio-label-margin-x: k-spacing(1) !default;
169
+ $kendo-radio-label-margin-x: k-spacing(4) !default;
167
170
 
168
171
 
169
172
  // Radio list
@@ -14,11 +14,11 @@ $kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
14
14
 
15
15
  /// The horizontal margin of the Rating container.
16
16
  /// @group rating
17
- $kendo-rating-container-margin-x: calc( #{k-spacing(2)} / 2 ) !default;
17
+ $kendo-rating-container-margin-x: k-spacing(1) !default;
18
18
 
19
19
  /// The horizontal padding of the Rating item.
20
20
  /// @group rating
21
- $kendo-rating-item-padding-x: calc( #{k-spacing(2)} / 2 ) !default;
21
+ $kendo-rating-item-padding-x: k-spacing(1) !default;
22
22
  /// The vertical padding of the Rating item.
23
23
  /// @group rating
24
24
  $kendo-rating-item-padding-y: k-spacing(1) !default;
@@ -31,7 +31,7 @@ $kendo-rating-label-margin-x: k-spacing(2) !default;
31
31
  $kendo-rating-label-margin-y: k-spacing(1) !default;
32
32
  /// The line height of the Rating label.
33
33
  /// @group rating
34
- $kendo-rating-label-line-height: $kendo-line-height-lg !default;
34
+ $kendo-rating-label-line-height: var( --kendo-line-height-lg, normal ) !default;
35
35
 
36
36
  /// The text color of the Rating icon.
37
37
  /// @group rating
@@ -7,51 +7,13 @@
7
7
 
8
8
  @include kendo-scheduler--layout-base();
9
9
 
10
-
11
- .k-scheduler-footer {
12
- border-top-width: 1px;
13
- }
14
-
15
-
16
- // Scheduler navigation
17
- .k-scheduler-navigation {}
18
-
19
-
20
- // View switcher
21
- .k-scheduler-views {}
22
-
23
-
24
- // View header
25
- .k-scheduler-header {
26
- text-align: start;
27
-
28
- th,
29
- td {
30
- font-size: var( --kendo-font-size-sm, inherit );
31
- }
32
- }
33
-
34
-
35
- // Times header
36
- .k-scheduler-times {
37
- font-size: var( --kendo-font-size-sm, inherit );
38
- }
39
-
40
-
41
10
  // Appointments
42
11
  kendo-scheduler .k-event,
43
12
  .k-event {
44
13
 
45
- &.k-selected {
46
- &::before {
47
- display: block;
48
- }
49
- }
50
-
51
14
  // Angular fix for stronger selector and smaller padding
52
15
  .k-event-template {
53
16
  & { // stylelint-disable-line
54
- padding-block: k-spacing(0.5);
55
17
  padding-inline: k-spacing(2);
56
18
  }
57
19
  }
@@ -66,16 +28,9 @@
66
28
 
67
29
  .k-event {
68
30
  .k-event-delete {
31
+ margin-block-start: k-spacing(1);
69
32
  border-radius: 50%;
70
- display: inline-block;
71
- font-size: var( --kendo-font-size-sm, inherit );
72
- line-height: normal;
73
-
74
- .k-icon {
75
- padding: calc( var( --kendo-font-size, .875rem) - var( --kendo-font-size-sm, .75rem) );
76
- box-sizing: content-box;
77
- vertical-align: unset;
78
- }
33
+ display: flex;
79
34
  }
80
35
 
81
36
  .k-resize-handle {
@@ -108,52 +63,10 @@
108
63
 
109
64
  .k-more-events {
110
65
  border-width: 0;
111
- box-shadow: none;
112
66
  }
113
67
 
114
68
  .k-scheduler-layout-flex .k-scheduler-cell {
115
69
  min-height: $kendo-line-height-em;
116
70
  }
117
71
 
118
- // Month view
119
- .k-scheduler-monthview {
120
- .k-scheduler-table td {
121
- height: 85px;
122
- }
123
- }
124
-
125
-
126
- .k-scheduler-edit-form {
127
-
128
- .k-edit-label {
129
- width: auto;
130
- margin-bottom: .5em;
131
-
132
- label { margin-bottom: 0; }
133
- }
134
-
135
- .k-edit-field {
136
- width: auto;
137
- align-items: center;
138
- }
139
-
140
- }
141
-
142
- .k-edit-field .k-reset {
143
- width: 100%;
144
- }
145
- .k-edit-field .k-widget {
146
- font-size: inherit;
147
- }
148
- .k-edit-field .k-reset .k-widget {
149
- margin-right: 0;
150
- }
151
-
152
- .k-scheduler-timezones .k-edit-field > div {
153
- width: 100%;
154
- }
155
- .k-scheduler-timezones .k-edit-field .k-widget {
156
- width: 45%;
157
- }
158
-
159
72
  }
@@ -64,7 +64,7 @@ $kendo-scheduler-event-min-height: 25px !default;
64
64
  $kendo-scheduler-event-border-radius: k-border-radius(md) !default;
65
65
  /// The line height of the Scheduler event.
66
66
  /// @group scheduler
67
- $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{k-spacing(0.5)}) ) !default;
67
+ $kendo-scheduler-event-line-height: calc( $kendo-scheduler-event-min-height - k-spacing(1) )!default;
68
68
 
69
69
  /// The background color of the Scheduler event.
70
70
  /// @group scheduler
@@ -120,10 +120,10 @@ $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
120
120
 
121
121
  /// The horizontal padding of the Scheduler cell.
122
122
  /// @group scheduler
123
- $kendo-scheduler-cell-padding-x: k-spacing(2) !default;
123
+ $kendo-scheduler-cell-padding-x: k-spacing(3) !default;
124
124
  /// The vertical padding of the Scheduler cell.
125
125
  /// @group scheduler
126
- $kendo-scheduler-cell-padding-y: k-spacing(2) !default;
126
+ $kendo-scheduler-cell-padding-y: k-spacing(3) !default;
127
127
  /// The height of the Scheduler cell.
128
128
  /// @group scheduler
129
129
  $kendo-scheduler-cell-height: calc( var( --kendo-line-height, normal) * 1rem) !default;
@@ -200,7 +200,7 @@ $kendo-scheduler-tooltip-border-width: 0 !default;
200
200
  $kendo-scheduler-tooltip-bg: k-color(on-primary) !default;
201
201
  /// The text color of the Scheduler Tooltip.
202
202
  /// @group scheduler
203
- $kendo-scheduler-tooltip-text: k-color(on-app-surface) !default;
203
+ $kendo-scheduler-tooltip-text: k-color(on-base) !default;
204
204
  /// The border color of the Scheduler Tooltip.
205
205
  /// @group scheduler
206
206
  $kendo-scheduler-tooltip-border: null !default;
@@ -21,7 +21,7 @@ $kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;
21
21
  $kendo-scrollview-text: k-color(on-app-surface) !default;
22
22
  /// The background color of the ScrollView.
23
23
  /// @group scrollview
24
- $kendo-scrollview-bg: k-color(surface-alt) !default;
24
+ $kendo-scrollview-bg: k-color(surface) !default;
25
25
  /// The border color of the ScrollView.
26
26
  /// @group scrollview
27
27
  $kendo-scrollview-border: k-color(border) !default;
@@ -22,6 +22,7 @@
22
22
  top: 50%;
23
23
  left: 50%;
24
24
  margin: $tick-offset 0 0 $tick-offset;
25
+ border-radius: 50%;
25
26
  }
26
27
  }
27
28
 
@@ -31,6 +32,11 @@
31
32
  }
32
33
 
33
34
  .k-slider-horizontal {
35
+
36
+ .k-slider-track-wrap {
37
+ padding-inline: $kendo-slider-tick-size;
38
+ }
39
+
34
40
  .k-tick {
35
41
  &.k-first::after {
36
42
  left: 0;
@@ -43,6 +49,11 @@
43
49
  }
44
50
 
45
51
  .k-slider-vertical {
52
+
53
+ .k-slider-track-wrap {
54
+ padding-block: $kendo-slider-tick-size;
55
+ }
56
+
46
57
  .k-tick {
47
58
  &.k-last::after {
48
59
  top: 0;
@@ -10,21 +10,12 @@
10
10
  .k-slider {
11
11
  cursor: pointer;
12
12
 
13
- .k-slider-track,
14
- .k-slider-selection {
15
- border-radius: 0;
16
- }
17
-
18
13
  .k-tick::after {
19
- @include fill( $bg: k-color(on-app-surface) );
14
+ @include fill( $bg: $kendo-slider-tick-marker-bg );
20
15
  }
21
16
 
22
17
  .k-draghandle {
23
18
  box-sizing: border-box;
24
-
25
- &:focus {
26
- @include box-shadow( $kendo-slider-draghandle-focus-shadow );
27
- }
28
19
  }
29
20
 
30
21
  &.k-disabled {
@@ -24,10 +24,10 @@ $kendo-slider-line-height: var( --kendo-line-height, normal ) !default;
24
24
 
25
25
  /// The offset of the Slider Buttons.
26
26
  /// @group slider
27
- $kendo-slider-button-offset: 22px !default;
27
+ $kendo-slider-button-offset: k-spacing(5.5) !default;
28
28
  /// The size of the Slider Buttons.
29
29
  /// @group slider
30
- $kendo-slider-button-size: 36px !default;
30
+ $kendo-slider-button-size: k-spacing(9) !default;
31
31
  /// The spacing of the Slider Buttons.
32
32
  /// @group slider
33
33
  $kendo-slider-button-spacing: ($kendo-slider-button-size + $kendo-slider-button-offset) !default;
@@ -37,10 +37,10 @@ $kendo-slider-button-focus-shadow: null !default;
37
37
 
38
38
  /// The thickness of the Slider track.
39
39
  /// @group slider
40
- $kendo-slider-track-thickness: 2px !default;
40
+ $kendo-slider-track-thickness: k-spacing(1) !default;
41
41
  /// The size of the Slider drag handle.
42
42
  /// @group slider
43
- $kendo-slider-draghandle-size: 14px !default;
43
+ $kendo-slider-draghandle-size: k-spacing(5) !default;
44
44
  /// The border width of the Slider drag handle.
45
45
  /// @group slider
46
46
  $kendo-slider-draghandle-border-width: 0px !default;
@@ -49,7 +49,7 @@ $kendo-slider-draghandle-border-width: 0px !default;
49
49
  $kendo-slider-draghandle-active-scale: 1 !default;
50
50
  /// The size of the active Slider drag handle.
51
51
  /// @group slider
52
- $kendo-slider-draghandle-active-size: 20px !default;
52
+ $kendo-slider-draghandle-active-size: k-spacing(5) !default;
53
53
 
54
54
  /// The background color of the Slider drag handle.
55
55
  /// @group slider
@@ -76,6 +76,9 @@ $kendo-slider-draghandle-hover-border: k-color(primary) !default;
76
76
  /// The gradient of the hovered Slider drag handle.
77
77
  /// @group slider
78
78
  $kendo-slider-draghandle-hover-gradient: null !default;
79
+ /// The shadow of the hovered Slider drag handle.
80
+ /// @group slider
81
+ $kendo-slider-draghandle-hover-shadow: 0 0 0 k-spacing(2.5) color-mix(in srgb, k-color(primary) 8%, transparent) !default;
79
82
 
80
83
  /// The background color of the active Slider drag handle.
81
84
  /// @group slider
@@ -92,7 +95,7 @@ $kendo-slider-draghandle-pressed-gradient: null !default;
92
95
 
93
96
  /// The shadow of the focused Slider drag handle.
94
97
  /// @group slider
95
- $kendo-slider-draghandle-focus-shadow: 0 0 0 11px color-mix(in srgb, k-color(primary) 25%, transparent) !default;
98
+ $kendo-slider-draghandle-focus-shadow: 0 0 0 k-spacing(2.5) color-mix(in srgb, k-color(primary) 20%, transparent) !default;
96
99
 
97
100
  /// The transition speed of the Slider.
98
101
  /// @group slider
@@ -124,6 +127,10 @@ $kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5
124
127
  /// @group slider
125
128
  $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" !default;
126
129
 
130
+ /// The background color of the Slider tick marker.
131
+ /// @group slider
132
+ $kendo-slider-tick-marker-bg: k-color(primary-emphasis) !default;
133
+
127
134
  @forward "@progress/kendo-theme-core/scss/components/slider/_variables.scss" with (
128
135
  $kendo-slider-size: $kendo-slider-size,
129
136
  $kendo-slider-tick-size: $kendo-slider-tick-size,
@@ -148,6 +155,7 @@ $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BA
148
155
  $kendo-slider-draghandle-hover-text: $kendo-slider-draghandle-hover-text,
149
156
  $kendo-slider-draghandle-hover-border: $kendo-slider-draghandle-hover-border,
150
157
  $kendo-slider-draghandle-hover-gradient: $kendo-slider-draghandle-hover-gradient,
158
+ $kendo-slider-draghandle-hover-shadow: $kendo-slider-draghandle-hover-shadow,
151
159
  $kendo-slider-draghandle-pressed-bg: $kendo-slider-draghandle-pressed-bg,
152
160
  $kendo-slider-draghandle-pressed-text: $kendo-slider-draghandle-pressed-text,
153
161
  $kendo-slider-draghandle-pressed-border: $kendo-slider-draghandle-pressed-border,
@@ -161,5 +169,6 @@ $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BA
161
169
  $kendo-slider-selection-bg: $kendo-slider-selection-bg,
162
170
  $kendo-slider-disabled-opacity: $kendo-slider-disabled-opacity,
163
171
  $kendo-slider-tick-horizontal-image: $kendo-slider-tick-horizontal-image,
164
- $kendo-slider-tick-vertical-image: $kendo-slider-tick-vertical-image
172
+ $kendo-slider-tick-vertical-image: $kendo-slider-tick-vertical-image,
173
+ $kendo-slider-tick-marker-bg: $kendo-slider-tick-marker-bg
165
174
  );
@@ -1,6 +1,18 @@
1
+ @use "sass:map";
2
+ @use "../button/_variables.scss" as *;
1
3
  @use "@progress/kendo-theme-core/scss/components/split-button/_layout.scss" as *;
2
4
 
3
5
 
4
6
  @mixin kendo-split-button--layout() {
5
7
  @include kendo-split-button--layout-base();
8
+
9
+ @each $size, $size-props in $kendo-button-sizes {
10
+ $_padding-x: map.get( $size-props, padding-x );
11
+
12
+ .k-split-button {
13
+ .k-button-#{$size}:not(.k-split-button-arrow) {
14
+ padding-inline: calc( $_padding-x / 2) ;
15
+ }
16
+ }
17
+ }
6
18
  }
@@ -9,16 +9,16 @@ $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
9
9
 
10
10
  /// The horizontal padding of the arrow Button.
11
11
  /// @group split-button
12
- $kendo-split-button-arrow-padding-x: k-spacing(1) !default;
12
+ $kendo-split-button-arrow-padding-x: calc( k-spacing(5.5) / 2 ) !default;
13
13
  /// The horizontal padding of the small arrow Button.
14
14
  /// @group split-button
15
- $kendo-split-button-sm-arrow-padding-x: k-spacing(1) !default;
15
+ $kendo-split-button-sm-arrow-padding-x: calc( k-spacing(4.5) / 2 ) !default;
16
16
  /// The horizontal padding of the medium arrow Button.
17
17
  /// @group split-button
18
- $kendo-split-button-md-arrow-padding-x: k-spacing(1) !default;
18
+ $kendo-split-button-md-arrow-padding-x: calc( k-spacing(5.5) / 2 ) !default;
19
19
  /// The horizontal padding of the large arrow Button.
20
20
  /// @group split-button
21
- $kendo-split-button-lg-arrow-padding-x: k-spacing(1) !default;
21
+ $kendo-split-button-lg-arrow-padding-x: calc( k-spacing(6.5) / 2 ) !default;
22
22
 
23
23
  /// The vertical padding of the arrow Button.
24
24
  /// @group split-button
@@ -18,7 +18,7 @@ $kendo-splitter-line-height: var( --kendo-line-height, normal ) !default;
18
18
 
19
19
  /// The background color of the Splitter.
20
20
  /// @group splitter
21
- $kendo-splitter-bg: k-color(surface-alt) !default;
21
+ $kendo-splitter-bg: k-color(surface) !default;
22
22
  /// The text color of the Splitter.
23
23
  /// @group splitter
24
24
  $kendo-splitter-text: k-color(on-app-surface) !default;
@@ -37,7 +37,7 @@ $kendo-splitter-drag-handle-length: 20px !default;
37
37
  $kendo-splitter-drag-handle-thickness: 2px !default;
38
38
  /// The margin of the Splitter drag handle icon.
39
39
  /// @group splitter
40
- $kendo-splitter-drag-icon-margin: k-spacing(2) !default;
40
+ $kendo-splitter-drag-icon-margin: calc( #{k-spacing(3.5)} / 2 ) !default;
41
41
  /// The horizontal padding of the collapse icon in the Splitter.
42
42
  /// @group splitter
43
43
  $kendo-splitter-collapse-icon-padding-x: null !default;
@@ -54,7 +54,7 @@ $kendo-splitbar-text: k-color(subtle) !default;
54
54
 
55
55
  /// The hover background color of the Splitter split bar.
56
56
  /// @group splitter
57
- $kendo-splitbar-hover-bg: k-color(base-hover) !default;
57
+ $kendo-splitbar-hover-bg: k-color(base-subtle-hover) !default;
58
58
  /// The hover text color of the Splitter split bar.
59
59
  /// @group splitter
60
60
  $kendo-splitbar-hover-text: $kendo-splitbar-text !default;