@progress/kendo-theme-bootstrap 12.3.1-dev.9 → 13.0.0-dev.0

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 (78) hide show
  1. package/dist/all.css +1 -1
  2. package/dist/bootstrap-3-dark.css +1 -1
  3. package/dist/bootstrap-3.css +1 -1
  4. package/dist/bootstrap-4-dark.css +1 -1
  5. package/dist/bootstrap-4.css +1 -1
  6. package/dist/bootstrap-dataviz-v4.css +1 -1
  7. package/dist/bootstrap-main-dark.css +1 -1
  8. package/dist/bootstrap-main.css +1 -1
  9. package/dist/bootstrap-nordic.css +1 -1
  10. package/dist/bootstrap-turquoise-dark.css +1 -1
  11. package/dist/bootstrap-turquoise.css +1 -1
  12. package/dist/bootstrap-urban.css +1 -1
  13. package/dist/bootstrap-vintage.css +1 -1
  14. package/dist/meta/sassdoc-data.json +20507 -15833
  15. package/dist/meta/sassdoc-raw-data.json +10090 -7798
  16. package/dist/meta/variables.json +715 -465
  17. package/lib/swatches/bootstrap-3-dark.json +1 -1
  18. package/lib/swatches/bootstrap-3.json +1 -1
  19. package/lib/swatches/bootstrap-4-dark.json +1 -1
  20. package/lib/swatches/bootstrap-4.json +1 -1
  21. package/lib/swatches/bootstrap-dataviz-v4.json +1 -1
  22. package/lib/swatches/bootstrap-main-dark.json +1 -1
  23. package/lib/swatches/bootstrap-main.json +1 -1
  24. package/lib/swatches/bootstrap-nordic.json +1 -1
  25. package/lib/swatches/bootstrap-turquoise-dark.json +1 -1
  26. package/lib/swatches/bootstrap-turquoise.json +1 -1
  27. package/lib/swatches/bootstrap-urban.json +1 -1
  28. package/lib/swatches/bootstrap-vintage.json +1 -1
  29. package/package.json +5 -5
  30. package/scss/appbar/_variables.scss +6 -16
  31. package/scss/avatar/_variables.scss +37 -24
  32. package/scss/badge/_variables.scss +22 -43
  33. package/scss/bottom-navigation/_variables.scss +12 -17
  34. package/scss/breadcrumb/_variables.scss +6 -30
  35. package/scss/button/_variables.scss +22 -42
  36. package/scss/calendar/_variables.scss +9 -31
  37. package/scss/card/_variables.scss +7 -17
  38. package/scss/checkbox/_layout.scss +15 -9
  39. package/scss/checkbox/_variables.scss +13 -23
  40. package/scss/chip/_theme.scss +0 -2
  41. package/scss/chip/_variables.scss +38 -50
  42. package/scss/coloreditor/_variables.scss +9 -41
  43. package/scss/colorgradient/_variables.scss +11 -42
  44. package/scss/colorpalette/_variables.scss +7 -19
  45. package/scss/column-menu/_variables.scss +6 -25
  46. package/scss/datetimepicker/_variables.scss +6 -16
  47. package/scss/dialog/_variables.scss +7 -10
  48. package/scss/fab/_theme.scss +78 -72
  49. package/scss/fab/_variables.scss +21 -34
  50. package/scss/floating-label/_variables.scss +2 -2
  51. package/scss/forms/_variables.scss +7 -17
  52. package/scss/grid/_variables.scss +7 -41
  53. package/scss/icons/_variables.scss +6 -0
  54. package/scss/input/_layout.scss +8 -4
  55. package/scss/input/_variables.scss +36 -34
  56. package/scss/list/_variables.scss +6 -73
  57. package/scss/loader/_variables.scss +13 -17
  58. package/scss/menu/_variables.scss +6 -0
  59. package/scss/messagebox/_variables.scss +8 -17
  60. package/scss/notification/_functions.scss +1 -1
  61. package/scss/notification/_variables.scss +7 -13
  62. package/scss/otp/_variables.scss +1 -22
  63. package/scss/overlay/_variables.scss +6 -18
  64. package/scss/pager/_variables.scss +7 -26
  65. package/scss/radio/_variables.scss +7 -22
  66. package/scss/signature/_variables.scss +0 -21
  67. package/scss/split-button/_variables.scss +2 -2
  68. package/scss/spreadsheet/_variables.scss +1 -1
  69. package/scss/suggestion/_variables.scss +4 -45
  70. package/scss/switch/_variables.scss +101 -7
  71. package/scss/table/_variables.scss +6 -25
  72. package/scss/tabstrip/_variables.scss +6 -25
  73. package/scss/timeselector/_variables.scss +24 -42
  74. package/scss/toolbar/_variables.scss +16 -27
  75. package/scss/tooltip/_functions.scss +3 -3
  76. package/scss/tooltip/_variables.scss +1 -13
  77. package/scss/treeview/_variables.scss +8 -33
  78. package/scss/window/_variables.scss +12 -20
@@ -1,4 +1,5 @@
1
1
  @use "../core/_index.scss" as *;
2
+ @use "../core/functions/index.scss" as *;
2
3
  @use "./_variables.scss" as *;
3
4
  @use "@progress/kendo-theme-core/scss/components/fab/_theme.scss" as *;
4
5
 
@@ -6,80 +7,85 @@
6
7
 
7
8
  @mixin kendo-fab--theme() {
8
9
 
9
- // Normal state
10
- @each $name, $color in $kendo-fab-theme-colors {
11
- .k-fab-solid-#{$name} {
12
- @include box-shadow( $kendo-fab-shadow );
13
- outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
14
- outline-offset: -$kendo-fab-border-width;
15
- border-color: $color;
16
- color: k-color(on-#{$name});
17
- background-color: $color;
18
- }
19
- }
20
-
21
- // Hover state
22
- @each $name, $color in $kendo-fab-theme-colors {
23
- .k-fab-solid-#{$name}:hover,
24
- .k-fab-solid-#{$name}.k-hover {
25
- border-color: k-color(#{$name}-hover);
26
- color: k-color(on-#{$name});
27
- background-color: k-color(#{$name}-hover);
28
- }
29
- }
30
-
31
- // Focus state
32
- @each $name, $color in $kendo-fab-theme-colors {
33
- .k-fab-solid-#{$name}:focus,
34
- .k-fab-solid-#{$name}.k-focus {
35
- outline: $kendo-fab-outline-width $kendo-fab-outline-style color-mix(in srgb, k-color($name) 50%, transparent);
36
- }
37
- }
38
-
39
- // Active state
40
- @each $name, $color in $kendo-fab-theme-colors {
41
- .k-fab-solid-#{$name}:active,
42
- .k-fab-solid-#{$name}.k-active,
43
- .k-fab-solid-#{$name}.k-selected {
44
- @include box-shadow( $kendo-fab-active-shadow );
45
- border-color: k-color(#{$name}-active);
46
- color: k-color(on-#{$name});
47
- background-color: k-color(#{$name}-active);
48
- }
49
- }
50
-
51
- // Generating state
52
- .k-fab-solid-primary.k-generating {
53
-
54
- animation: k-fab-generating 1.5s ease-in-out 0.5s infinite;
55
-
56
- @keyframes k-fab-generating {
57
- 0% {
58
- background-color: k-color(primary-active);
59
- border: k-color(primary-active);
60
- outline-color: k-color(primary-active);
61
- }
62
- 50% {
63
- background-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
64
- border: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
65
- outline-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
10
+ .k-fab {
11
+ // Fillmode: solid
12
+ #{k-when-default($kendo-fab-default-fill-mode, "solid")}
13
+ &.k-fab-solid {
14
+
15
+ // Theme colors
16
+ @each $name in $kendo-fab-theme-colors {
17
+
18
+ // Normal state
19
+ #{k-when-default($kendo-fab-default-theme-color, $name)}
20
+ &.k-fab-#{$name} {
21
+ @include box-shadow( $kendo-fab-shadow );
22
+ outline: $kendo-fab-border-width $kendo-fab-outline-style k-color($name);
23
+ outline-offset: -$kendo-fab-border-width;
24
+ border-color: k-color($name);
25
+ color: k-color(on-#{$name});
26
+ background-color: k-color($name);
27
+
28
+ // Hover state
29
+ &:hover,
30
+ &.k-hover {
31
+ border-color: k-color(#{$name}-hover);
32
+ color: k-color(on-#{$name});
33
+ background-color: k-color(#{$name}-hover);
34
+ }
35
+
36
+ // Focus state
37
+ &:focus,
38
+ &.k-focus {
39
+ outline: $kendo-fab-outline-width $kendo-fab-outline-style color-mix(in srgb, k-color($name) 50%, transparent);
40
+ }
41
+
42
+ // Active state
43
+ &:active,
44
+ &.k-active,
45
+ &.k-selected {
46
+ @include box-shadow( $kendo-fab-active-shadow );
47
+ border-color: k-color(#{$name}-active);
48
+ color: k-color(on-#{$name});
49
+ background-color: k-color(#{$name}-active);
50
+ }
51
+
52
+ // Disabled state
53
+ &:disabled,
54
+ &.k-disabled {
55
+ @include box-shadow( $kendo-fab-disabled-shadow );
56
+ background-color: color-mix(in srgb, k-color($name) 65%, transparent);
57
+ color: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent);
58
+ opacity: 1;
59
+ }
60
+ }
66
61
  }
67
- 100% {
68
- background-color: k-color(primary-active);
69
- border: k-color(primary-active);
70
- outline-color: k-color(primary-active);
71
- }
72
- }
73
- }
74
62
 
75
- // Disabled state
76
- @each $name, $color in $kendo-fab-theme-colors {
77
- .k-fab-solid-#{$name}:disabled,
78
- .k-fab-solid-#{$name}.k-disabled {
79
- @include box-shadow( $kendo-fab-disabled-shadow );
80
- background-color: color-mix(in srgb, k-color($name) 65%, transparent);
81
- color: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent);
82
- opacity: 1;
63
+ // Generating state
64
+ #{k-when-default($kendo-fab-default-theme-color, "primary")}
65
+ &.k-fab-primary {
66
+
67
+ &.k-generating {
68
+ animation: k-fab-generating 1.5s ease-in-out 0.5s infinite;
69
+
70
+ @keyframes k-fab-generating {
71
+ 0% {
72
+ background-color: k-color(primary-active);
73
+ border: k-color(primary-active);
74
+ outline-color: k-color(primary-active);
75
+ }
76
+ 50% {
77
+ background-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
78
+ border: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
79
+ outline-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
80
+ }
81
+ 100% {
82
+ background-color: k-color(primary-active);
83
+ border: k-color(primary-active);
84
+ outline-color: k-color(primary-active);
85
+ }
86
+ }
87
+ }
88
+ }
83
89
  }
84
90
  }
85
91
 
@@ -5,6 +5,23 @@
5
5
 
6
6
  // Floating Action Button
7
7
 
8
+ /// The default theme color of the FAB.
9
+ /// @group floating-action-button
10
+ /// @role default
11
+ $kendo-fab-default-theme-color: "primary" !default;
12
+ /// The default fill mode of the FAB.
13
+ /// @group floating-action-button
14
+ /// @role default
15
+ $kendo-fab-default-fill-mode: "solid" !default;
16
+ /// The default roundness of the FAB.
17
+ /// @group floating-action-button
18
+ /// @role default
19
+ $kendo-fab-default-roundness: "full" !default;
20
+ /// The default size of the FAB.
21
+ /// @group floating-action-button
22
+ /// @role default
23
+ $kendo-fab-default-size: "md" !default;
24
+
8
25
  /// The width of the border around the FAB.
9
26
  /// @group floating-action-button
10
27
  $kendo-fab-border-width: 1px !default;
@@ -87,38 +104,6 @@ $kendo-fab-item-icon-border-width: 0 !default;
87
104
  /// @group floating-action-button
88
105
  $kendo-fab-item-icon-border-radius: 50% !default;
89
106
 
90
- /// The theme colors map for the FAB.
91
- /// @group floating-action-button
92
- $kendo-fab-theme-colors: (
93
- "primary": k-color(primary),
94
- "secondary": k-color(secondary),
95
- "tertiary": k-color(tertiary),
96
- "info": k-color(info),
97
- "success": k-color(success),
98
- "warning": k-color(warning),
99
- "error": k-color(error),
100
- "dark": k-color(dark),
101
- "light": k-color(light),
102
- "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
103
- ) !default;
104
-
105
- /// The size map for the FAB.
106
- /// @group floating-action-button
107
- $kendo-fab-sizes: (
108
- sm: (
109
- padding-x: $kendo-fab-sm-padding-x,
110
- padding-y: $kendo-fab-sm-padding-y
111
- ),
112
- md: (
113
- padding-x: $kendo-fab-md-padding-x,
114
- padding-y: $kendo-fab-md-padding-y
115
- ),
116
- lg: (
117
- padding-x: $kendo-fab-lg-padding-x,
118
- padding-y: $kendo-fab-lg-padding-y
119
- )
120
- ) !default;
121
-
122
107
  /// The base shadow of the FAB.
123
108
  /// @group floating-action-button
124
109
  $kendo-fab-shadow: k-elevation(5) !default;
@@ -180,6 +165,10 @@ $kendo-fab-generating-opacity: 40% !default;
180
165
 
181
166
 
182
167
  @forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with (
168
+ $kendo-fab-default-theme-color: $kendo-fab-default-theme-color,
169
+ $kendo-fab-default-fill-mode: $kendo-fab-default-fill-mode,
170
+ $kendo-fab-default-roundness: $kendo-fab-default-roundness,
171
+ $kendo-fab-default-size: $kendo-fab-default-size,
183
172
  $kendo-fab-border-width: $kendo-fab-border-width,
184
173
  $kendo-fab-font-family: $kendo-fab-font-family,
185
174
  $kendo-fab-font-size: $kendo-fab-font-size,
@@ -205,8 +194,6 @@ $kendo-fab-generating-opacity: 40% !default;
205
194
  $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-y,
206
195
  $kendo-fab-item-icon-border-width: $kendo-fab-item-icon-border-width,
207
196
  $kendo-fab-item-icon-border-radius: $kendo-fab-item-icon-border-radius,
208
- $kendo-fab-theme-colors: $kendo-fab-theme-colors,
209
- $kendo-fab-sizes: $kendo-fab-sizes,
210
197
  $kendo-fab-shadow: $kendo-fab-shadow,
211
198
  $kendo-fab-disabled-shadow: $kendo-fab-disabled-shadow,
212
199
  $kendo-fab-active-shadow: $kendo-fab-active-shadow,
@@ -8,13 +8,13 @@
8
8
  $kendo-floating-label-scale: 1 !default;
9
9
  /// The font size of the Floating Label.
10
10
  /// @group floating-label
11
- $kendo-floating-label-font-size: $kendo-input-font-size !default;
11
+ $kendo-floating-label-font-size: $kendo-input-md-font-size !default;
12
12
  /// The maximum width of the Floating Label.
13
13
  /// @group floating-label
14
14
  $kendo-floating-label-max-width: 90% !default;
15
15
  /// The line height of the Floating Label.
16
16
  /// @group floating-label
17
- $kendo-floating-label-line-height: $kendo-input-line-height !default;
17
+ $kendo-floating-label-line-height: $kendo-input-md-line-height !default;
18
18
  /// The height of the Floating Label.
19
19
  /// @group floating-label
20
20
  $kendo-floating-label-height: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) !default;
@@ -5,6 +5,11 @@
5
5
 
6
6
  // Forms
7
7
 
8
+ /// The default size of the Form.
9
+ /// @group form
10
+ /// @role default
11
+ $kendo-form-default-size: "md" !default;
12
+
8
13
  /// The padding of the inline Form.
9
14
  /// @group form
10
15
  $kendo-form-spacer: k-spacing(8) !default;
@@ -141,22 +146,8 @@ $kendo-form-field-info-margin: k-spacing(4) !default;
141
146
  /// @group form
142
147
  $kendo-fieldset-legend-text: unset !default;
143
148
 
144
- /// The sizes map for the Form.
145
- /// @group form
146
- $kendo-form-sizes: (
147
- sm: (
148
- form-rows-spacing: $kendo-form-sm-rows-spacing
149
- ),
150
- md: (
151
- form-rows-spacing: $kendo-form-md-rows-spacing
152
- ),
153
- lg: (
154
- form-rows-spacing: $kendo-form-lg-rows-spacing
155
- )
156
- ) !default;
157
-
158
-
159
149
  @forward "@progress/kendo-theme-core/scss/components/forms/_variables.scss" with (
150
+ $kendo-form-default-size: $kendo-form-default-size,
160
151
  $kendo-form-spacer: $kendo-form-spacer,
161
152
  $kendo-form-font-size: $kendo-form-font-size,
162
153
  $kendo-form-line-height: $kendo-form-line-height,
@@ -195,6 +186,5 @@ $kendo-form-sizes: (
195
186
  $kendo-fieldset-legend-margin: $kendo-fieldset-legend-margin,
196
187
  $kendo-form-alert-error-margin: $kendo-form-alert-error-margin,
197
188
  $kendo-form-field-info-margin: $kendo-form-field-info-margin,
198
- $kendo-fieldset-legend-text: $kendo-fieldset-legend-text,
199
- $kendo-form-sizes: $kendo-form-sizes
189
+ $kendo-fieldset-legend-text: $kendo-fieldset-legend-text
200
190
  );
@@ -11,6 +11,12 @@
11
11
 
12
12
 
13
13
  // Grid
14
+
15
+ /// The default size of the Grid.
16
+ /// @group grid
17
+ /// @role default
18
+ $kendo-grid-default-size: "md" !default;
19
+
14
20
  /// The width of the border around the Grid.
15
21
  /// @group grid
16
22
  $kendo-grid-border-width: 1px !default;
@@ -173,46 +179,6 @@ $kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-padding-y !default;
173
179
  $kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-padding-y !default;
174
180
 
175
181
 
176
- // Kendo Grid sizes
177
- /// The sizes of the Grid.
178
- /// @group grid
179
- $kendo-grid-sizes: (
180
- sm: (
181
- header-padding-x: $kendo-grid-sm-header-padding-x,
182
- header-padding-y: $kendo-grid-sm-header-padding-y,
183
- grouping-header-padding-x: $kendo-grid-sm-grouping-header-padding-x,
184
- grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-y,
185
- cell-padding-x: $kendo-grid-sm-cell-padding-x,
186
- cell-padding-y: $kendo-grid-sm-cell-padding-y,
187
- filter-cell-padding-x: $kendo-grid-sm-filter-cell-padding-x,
188
- filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-y,
189
- edit-cell-padding-x: $kendo-grid-sm-edit-cell-padding-x,
190
- edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
191
- button-padding-y: $kendo-button-sm-padding-y,
192
- button-calc-size: $kendo-button-sm-calc-size,
193
- group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
194
- selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x,
195
- selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y
196
- ),
197
- md: (
198
- header-padding-x: $kendo-grid-md-header-padding-x,
199
- header-padding-y: $kendo-grid-md-header-padding-y,
200
- grouping-header-padding-x: $kendo-grid-md-grouping-header-padding-x,
201
- grouping-header-padding-y: $kendo-grid-md-grouping-header-padding-y,
202
- cell-padding-x: $kendo-grid-md-cell-padding-x,
203
- cell-padding-y: $kendo-grid-md-cell-padding-y,
204
- filter-cell-padding-x: $kendo-grid-md-filter-cell-padding-x,
205
- filter-cell-padding-y: $kendo-grid-md-filter-cell-padding-y,
206
- edit-cell-padding-x: $kendo-grid-md-edit-cell-padding-x,
207
- edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
208
- button-padding-y: $kendo-button-md-padding-y,
209
- button-calc-size: $kendo-button-md-calc-size,
210
- group-dropclue-height: $kendo-grid-md-group-dropclue-height,
211
- selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
212
- selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y
213
- ),
214
- ) !default;
215
-
216
182
  /// The font size of the Grid header.
217
183
  /// @group grid
218
184
  $kendo-grid-header-font-size: null !default;
@@ -528,6 +494,7 @@ $kendo-grid-stack-expandable-shadow: k-elevation(2) !default;
528
494
 
529
495
 
530
496
  @forward "@progress/kendo-theme-core/scss/components/grid/_variables.scss" with (
497
+ $kendo-grid-default-size: $kendo-grid-default-size,
531
498
  $kendo-grid-border-width: $kendo-grid-border-width,
532
499
  $kendo-grid-font-family: $kendo-grid-font-family,
533
500
  $kendo-grid-font-size: $kendo-grid-font-size,
@@ -578,7 +545,6 @@ $kendo-grid-stack-expandable-shadow: k-elevation(2) !default;
578
545
  $kendo-grid-md-group-dropclue-height: $kendo-grid-md-group-dropclue-height,
579
546
  $kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
580
547
  $kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y,
581
- $kendo-grid-sizes: $kendo-grid-sizes,
582
548
  $kendo-grid-header-font-size: $kendo-grid-header-font-size,
583
549
  $kendo-grid-header-first-border: $kendo-grid-header-first-border,
584
550
  $kendo-grid-header-menu-icon-spacing: $kendo-grid-header-menu-icon-spacing,
@@ -1,5 +1,10 @@
1
1
  @use "../core/_index.scss" as *;
2
2
 
3
+ /// The default size of the Icon.
4
+ /// @group icon
5
+ /// @role default
6
+ $kendo-icon-default-size: "md" !default;
7
+
3
8
  /// Font sizes of the icons.
4
9
  /// @group icon
5
10
  $kendo-icon-size: 1rem !default;
@@ -35,6 +40,7 @@ $kendo-icon-spacing: k-spacing(2) !default;
35
40
  $kendo-icon-padding: k-spacing(1) !default;
36
41
 
37
42
  @forward "@progress/kendo-theme-core/scss/components/icons/_variables.scss" with (
43
+ $kendo-icon-default-size: $kendo-icon-default-size,
38
44
  $kendo-icon-size: $kendo-icon-size,
39
45
  $kendo-icon-size-xs: $kendo-icon-size-xs,
40
46
  $kendo-icon-size-sm: $kendo-icon-size-sm,
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "../core/_index.scss" as *;
3
+ @use "../core/functions/index.scss" as *;
3
4
  @use "./_variables.scss" as *;
4
5
  @use "@progress/kendo-theme-core/scss/components/input/_layout.scss" as *;
5
6
 
@@ -7,11 +8,13 @@
7
8
 
8
9
  @include kendo-input--layout-base();
9
10
 
10
- // Sizing
11
- @each $size, $size-props in $kendo-input-sizes {
12
- $_padding-x: map.get( $size-props, padding-x );
11
+ .k-input {
12
+ // Sizing
13
+ @each $size, $size-props in $kendo-input-sizes {
14
+ $_padding-x: map.get( $size-props, padding-x );
13
15
 
14
- .k-input-#{$size} {
16
+ #{k-when-default($kendo-input-default-size, $size)}
17
+ &.k-input-#{$size} {
15
18
  .k-input-prefix > .k-icon,
16
19
  .k-input-prefix > .k-icon-wrapper-host .k-icon,
17
20
  .k-input-prefix > .k-input-prefix-text,
@@ -22,5 +25,6 @@
22
25
  }
23
26
  }
24
27
  }
28
+ }
25
29
 
26
30
  }
@@ -5,6 +5,19 @@
5
5
 
6
6
  // Input
7
7
 
8
+ /// The default fill mode of the Input.
9
+ /// @group input
10
+ /// @role default
11
+ $kendo-input-default-fill-mode: "solid" !default;
12
+ /// The default roundness of the Input.
13
+ /// @group input
14
+ /// @role default
15
+ $kendo-input-default-roundness: "md" !default;
16
+ /// The default size of the Input.
17
+ /// @group input
18
+ /// @role default
19
+ $kendo-input-default-size: "md" !default;
20
+
8
21
  /// The default width of the Input components.
9
22
  /// @group input
10
23
  $kendo-input-default-width: 100% !default;
@@ -42,7 +55,7 @@ $kendo-input-font-family: var( --kendo-font-family, inherit ) !default;
42
55
 
43
56
  /// The font size of input components.
44
57
  /// @group input
45
- $kendo-input-font-size: var( --kendo-font-size, inherit ) !default;
58
+ $kendo-input-font-size: null !default;
46
59
  /// The font size of the small Input components.
47
60
  /// @group input
48
61
  $kendo-input-sm-font-size: var( --kendo-font-size-sm, inherit )!default;
@@ -55,7 +68,7 @@ $kendo-input-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
55
68
 
56
69
  /// The line height of input components.
57
70
  /// @group input
58
- $kendo-input-line-height: 1.5 !default;
71
+ $kendo-input-line-height: null !default;
59
72
  /// The line height of the small Input components.
60
73
  /// @group input
61
74
  $kendo-input-sm-line-height: math.div( 20, 14 ) !default;
@@ -70,35 +83,6 @@ $kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{
70
83
  $kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
71
84
  $kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
72
85
 
73
- /// The sizes map for the Input components.
74
- /// @group input
75
- $kendo-input-sizes: (
76
- sm: (
77
- padding-x: $kendo-input-sm-padding-x,
78
- padding-y: $kendo-input-sm-padding-y,
79
- font-size: $kendo-input-sm-font-size,
80
- line-height: $kendo-input-sm-line-height,
81
- button-padding-x: $kendo-input-sm-padding-y,
82
- button-padding-y: $kendo-input-sm-padding-y
83
- ),
84
- md: (
85
- padding-x: $kendo-input-md-padding-x,
86
- padding-y: $kendo-input-md-padding-y,
87
- font-size: $kendo-input-md-font-size,
88
- line-height: $kendo-input-md-line-height,
89
- button-padding-x: $kendo-input-md-padding-y,
90
- button-padding-y: $kendo-input-md-padding-y
91
- ),
92
- lg: (
93
- padding-x: $kendo-input-lg-padding-x,
94
- padding-y: $kendo-input-lg-padding-y,
95
- font-size: $kendo-input-lg-font-size,
96
- line-height: $kendo-input-lg-line-height,
97
- button-padding-x: $kendo-input-lg-padding-y,
98
- button-padding-y: $kendo-input-lg-padding-y
99
- )
100
- ) !default;
101
-
102
86
  /// The background color of the Input components.
103
87
  /// @group input
104
88
  $kendo-input-bg: k-color(surface-alt) !default;
@@ -276,6 +260,19 @@ $kendo-input-invalid-border: k-color(error-on-surface) !default;
276
260
  /// @group input
277
261
  $kendo-input-invalid-shadow: 0 0 0 .25rem color-mix(in srgb, k-color(error) 25%, transparent) !default;
278
262
 
263
+ /// The default fill mode of the Picker.
264
+ /// @group picker
265
+ /// @role default
266
+ $kendo-picker-default-fill-mode: "solid" !default;
267
+ /// The default roundness of the Picker.
268
+ /// @group picker
269
+ /// @role default
270
+ $kendo-picker-default-roundness: "md" !default;
271
+ /// The default size of the Picker.
272
+ /// @group picker
273
+ /// @role default
274
+ $kendo-picker-default-size: "md" !default;
275
+
279
276
  /// The background color of the Picker components.
280
277
  /// @group picker
281
278
  $kendo-picker-bg: k-color(surface-alt) !default;
@@ -342,7 +339,7 @@ $kendo-picker-disabled-shadow: null !default;
342
339
 
343
340
  /// The background color of the outline Picker components.
344
341
  /// @group picker
345
- $kendo-picker-outline-bg: null !default;
342
+ $kendo-picker-outline-bg: transparent !default;
346
343
  /// The text color of the outline Picker components.
347
344
  /// @group picker
348
345
  $kendo-picker-outline-text: $kendo-button-text !default;
@@ -384,7 +381,7 @@ $kendo-picker-outline-hover-focus-border: null !default;
384
381
 
385
382
  /// The background color of the flat Picker components.
386
383
  /// @group picker
387
- $kendo-picker-flat-bg: null !default;
384
+ $kendo-picker-flat-bg: transparent !default;
388
385
  /// The text color of the flat Picker components.
389
386
  /// @group picker
390
387
  $kendo-picker-flat-text: $kendo-button-text !default;
@@ -431,6 +428,9 @@ $kendo-use-input-spinner-icon-offset: false !default;
431
428
 
432
429
 
433
430
  @forward "@progress/kendo-theme-core/scss/components/input/_variables.scss" with (
431
+ $kendo-input-default-fill-mode: $kendo-input-default-fill-mode,
432
+ $kendo-input-default-roundness: $kendo-input-default-roundness,
433
+ $kendo-input-default-size: $kendo-input-default-size,
434
434
  $kendo-input-default-width: $kendo-input-default-width,
435
435
  $kendo-input-border-width: $kendo-input-border-width,
436
436
  $kendo-input-border-radius: $kendo-input-border-radius,
@@ -452,7 +452,6 @@ $kendo-use-input-spinner-icon-offset: false !default;
452
452
  $kendo-input-sm-calc-size: $kendo-input-sm-calc-size,
453
453
  $kendo-input-md-calc-size: $kendo-input-md-calc-size,
454
454
  $kendo-input-lg-calc-size: $kendo-input-lg-calc-size,
455
- $kendo-input-sizes: $kendo-input-sizes,
456
455
  $kendo-input-bg: $kendo-input-bg,
457
456
  $kendo-input-text: $kendo-input-text,
458
457
  $kendo-input-border: $kendo-input-border,
@@ -507,6 +506,9 @@ $kendo-use-input-spinner-icon-offset: false !default;
507
506
  $kendo-input-suffix-bg: $kendo-input-suffix-bg,
508
507
  $kendo-input-invalid-border: $kendo-input-invalid-border,
509
508
  $kendo-input-invalid-shadow: $kendo-input-invalid-shadow,
509
+ $kendo-picker-default-fill-mode: $kendo-picker-default-fill-mode,
510
+ $kendo-picker-default-roundness: $kendo-picker-default-roundness,
511
+ $kendo-picker-default-size: $kendo-picker-default-size,
510
512
  $kendo-picker-bg: $kendo-picker-bg,
511
513
  $kendo-picker-text: $kendo-picker-text,
512
514
  $kendo-picker-border: $kendo-picker-border,