@progress/kendo-theme-bootstrap 10.1.0-dev.5 → 10.1.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 (43) 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 +6808 -1860
  15. package/dist/meta/sassdoc-raw-data.json +3360 -1160
  16. package/dist/meta/variables.json +515 -35
  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/button/_variables.scss +8 -8
  31. package/scss/checkbox/_variables.scss +2 -2
  32. package/scss/coloreditor/_variables.scss +147 -0
  33. package/scss/colorgradient/_variables.scss +105 -0
  34. package/scss/colorpalette/_variables.scss +40 -0
  35. package/scss/index.scss +3 -0
  36. package/scss/input/_variables.scss +12 -1
  37. package/scss/otp/_index.scss +18 -0
  38. package/scss/otp/_layout.scss +5 -0
  39. package/scss/otp/_theme.scss +5 -0
  40. package/scss/otp/_variables.scss +77 -0
  41. package/scss/radio/_variables.scss +1 -1
  42. package/scss/tabstrip/_variables.scss +77 -1
  43. package/scss/toolbar/_variables.scss +37 -9
package/lib/swatches/bootstrap-3-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 3 Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#000000",
package/lib/swatches/bootstrap-3.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 3",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/lib/swatches/bootstrap-4-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 4 Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#000000",
package/lib/swatches/bootstrap-4.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 4",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/lib/swatches/bootstrap-dataviz-v4.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Dataviz v4",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#0275d8",
package/lib/swatches/bootstrap-main-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Main Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#000000",
package/lib/swatches/bootstrap-main.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/lib/swatches/bootstrap-nordic.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Nordic",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/lib/swatches/bootstrap-turquoise-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Turquoise Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#000000",
package/lib/swatches/bootstrap-turquoise.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Turquoise",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/lib/swatches/bootstrap-urban.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Urban",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/lib/swatches/bootstrap-vintage.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Vintage",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "10.1.0-dev.5",
6
+ "version": "10.1.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-bootstrap",
3
3
  "description": "Bootstrap theme for Kendo UI",
4
- "version": "10.1.0-dev.5",
4
+ "version": "10.1.0",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -53,13 +53,13 @@
53
53
  },
54
54
  "dependencies": {
55
55
  "@progress/kendo-svg-icons": "^4.0.0",
56
- "@progress/kendo-theme-core": "10.1.0-dev.5",
57
- "@progress/kendo-theme-default": "10.1.0-dev.5",
58
- "@progress/kendo-theme-utils": "10.1.0-dev.5"
56
+ "@progress/kendo-theme-core": "10.1.0",
57
+ "@progress/kendo-theme-default": "10.1.0",
58
+ "@progress/kendo-theme-utils": "10.1.0"
59
59
  },
60
60
  "directories": {
61
61
  "doc": "docs",
62
62
  "lib": "lib"
63
63
  },
64
- "gitHead": "eb34275876107de0d5b4c79eab212296aa0d5b88"
64
+ "gitHead": "b4794dd83d2266af0047608c0c03f9851121fd37"
65
65
  }
package/scss/button/_variables.scss CHANGED
@@ -71,17 +71,17 @@ $kendo-button-lg-line-height: var( --kendo-line-height, normal ) !default;
71
71
 
72
72
  /// The calculated height of the Button.
73
73
  /// @group button
74
- $kendo-button-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
75
- $kendo-button-sm-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc(#{$kendo-button-sm-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
76
- $kendo-button-md-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc(#{$kendo-button-md-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
77
- $kendo-button-lg-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc(#{$kendo-button-lg-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
74
+ $kendo-button-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
75
+ $kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
76
+ $kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
77
+ $kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
78
78
 
79
79
  /// The calculated inner height of the Button excluding the border width.
80
80
  /// @group button
81
- $kendo-button-inner-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) ) !default;
82
- $kendo-button-sm-inner-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
83
- $kendo-button-md-inner-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) ) !default;
84
- $kendo-button-lg-inner-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
81
+ $kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) ) !default;
82
+ $kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
83
+ $kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
84
+ $kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
85
85
 
86
86
  /// The sizes map for the Button.
87
87
  /// @group button
package/scss/checkbox/_variables.scss CHANGED
@@ -159,10 +159,10 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
159
159
 
160
160
  /// The image for a checked CheckBox indicator.
161
161
  /// @group checkbox
162
- $kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
162
+ $kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
163
163
  /// The image for a indeterminate CheckBox indicator.
164
164
  /// @group checkbox
165
- $kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
165
+ $kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#0d6efd' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
166
166
 
167
167
 
168
168
  // CheckBox label
package/scss/coloreditor/_variables.scss CHANGED
@@ -9,6 +9,16 @@ $kendo-color-editor-spacer: k-spacing(4) !default;
9
9
  /// The minimum width of the ColorEditor.
10
10
  /// @group color-editor
11
11
  $kendo-color-editor-min-width: 328px !default;
12
+ /// The minimum width of the ColorEditor.
13
+ /// @group color-editor
14
+ $kendo-color-editor-sm-min-width: 252px !default;
15
+ /// The minimum width of the ColorEditor.
16
+ /// @group color-editor
17
+ $kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
18
+ /// The minimum width of the ColorEditor.
19
+ /// @group color-editor
20
+ $kendo-color-editor-lg-min-width: 362px !default;
21
+
12
22
  /// The width of the border around the ColorEditor.
13
23
  /// @group color-editor
14
24
  $kendo-color-editor-border-width: 1px !default;
@@ -50,6 +60,25 @@ $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !defa
50
60
  /// The spacing between the ColorEditor header actions.
51
61
  /// @group color-editor
52
62
  $kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 2 ) !default;
63
+ /// The vertical padding of the small ColorEditor header.
64
+ /// @group color-editor
65
+ $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
66
+ /// The horizontal padding of the small ColorEditor header.
67
+ /// @group color-editor
68
+ $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
69
+ /// The vertical padding of the medium ColorEditor header.
70
+ /// @group color-editor
71
+ $kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
72
+ /// The horizontal padding of the medium ColorEditor header.
73
+ /// @group color-editor
74
+ $kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
75
+ /// The vertical padding of the large ColorEditor header.
76
+ /// @group color-editor
77
+ $kendo-color-editor-lg-header-padding-y: k-spacing(4.5) !default;
78
+ /// The horizontal padding of the large ColorEditor header.
79
+ /// @group color-editor
80
+ $kendo-color-editor-lg-header-padding-x: k-spacing(4.5) !default;
81
+
53
82
 
54
83
  /// The width of the ColorEditor preview.
55
84
  /// @group color-editor
@@ -60,6 +89,34 @@ $kendo-color-editor-color-preview-height: 12px !default;
60
89
  /// The spacing between the colors in the ColorEditor preview.
61
90
  /// @group color-editor
62
91
  $kendo-color-editor-preview-gap: k-spacing(1) !default;
92
+ /// The spacing between the colors in the small ColorEditor preview.
93
+ /// @group color-editor
94
+ $kendo-color-editor-sm-preview-gap: k-spacing(1) !default;
95
+ /// The spacing between the colors in the medium ColorEditor preview.
96
+ /// @group color-editor
97
+ $kendo-color-editor-md-preview-gap: $kendo-color-editor-preview-gap !default;
98
+ /// The spacing between the colors in the large ColorEditor preview.
99
+ /// @group color-editor
100
+ $kendo-color-editor-lg-preview-gap: k-spacing(1) !default;
101
+
102
+ /// The width of the small ColorEditor preview.
103
+ /// @group color-editor
104
+ $kendo-color-editor-sm-color-preview-width: 32px !default;
105
+ /// The height of the small ColorEditor preview.
106
+ /// @group color-editor
107
+ $kendo-color-editor-sm-color-preview-height: 10px !default;
108
+ /// The width of the medium ColorEditor preview.
109
+ /// @group color-editor
110
+ $kendo-color-editor-md-color-preview-width: $kendo-color-editor-color-preview-width !default;
111
+ /// The height of the medium ColorEditor preview.
112
+ /// @group color-editor
113
+ $kendo-color-editor-md-color-preview-height: $kendo-color-editor-color-preview-height !default;
114
+ /// The width of the large ColorEditor preview.
115
+ /// @group color-editor
116
+ $kendo-color-editor-lg-color-preview-width: 32px !default;
117
+ /// The height of the large ColorEditor preview.
118
+ /// @group color-editor
119
+ $kendo-color-editor-lg-color-preview-height: 12px !default;
63
120
 
64
121
  /// The vertical padding of the ColorEditor views container.
65
122
  /// @group color-editor
@@ -70,6 +127,33 @@ $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !defaul
70
127
  /// The spacing of the ColorEditor views container.
71
128
  /// @group color-editor
72
129
  $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
130
+ /// The vertical padding of the small ColorEditor views container.
131
+ /// @group color-editor
132
+ $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-spacer !default;
133
+ /// The horizontal padding of the small ColorEditor views container.
134
+ /// @group color-editor
135
+ $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
136
+ /// The spacing of the small ColorEditor views container.
137
+ /// @group color-editor
138
+ $kendo-color-editor-sm-views-gap: $kendo-color-editor-spacer !default;
139
+ /// The vertical padding of the medium ColorEditor views container.
140
+ /// @group color-editor
141
+ $kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
142
+ /// The horizontal padding of the medium ColorEditor views container.
143
+ /// @group color-editor
144
+ $kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
145
+ /// The spacing of the medium ColorEditor views container.
146
+ /// @group color-editor
147
+ $kendo-color-editor-md-views-gap: $kendo-color-editor-views-gap !default;
148
+ /// The vertical padding of the large ColorEditor views container.
149
+ /// @group color-editor
150
+ $kendo-color-editor-lg-views-padding-y: k-spacing(4.5) !default;
151
+ /// The horizontal padding of the large ColorEditor views container.
152
+ /// @group color-editor
153
+ $kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
154
+ /// The spacing of the large ColorEditor views container.
155
+ /// @group color-editor
156
+ $kendo-color-editor-lg-views-gap: k-spacing(4.5) !default;
73
157
 
74
158
  /// The outline color of the focused ColorGradient.
75
159
  /// @group color-editor
@@ -82,9 +166,48 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
82
166
  $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
83
167
 
84
168
 
169
+ /// The size map of the ColorEditor.
170
+ /// @group color-editor
171
+ $kendo-color-editor-sizes: (
172
+ sm: (
173
+ min-width: $kendo-color-editor-sm-min-width,
174
+ header-padding-x: $kendo-color-editor-sm-header-padding-x,
175
+ header-padding-y: $kendo-color-editor-sm-header-padding-y,
176
+ views-padding-x: $kendo-color-editor-sm-views-padding-x,
177
+ views-padding-y: $kendo-color-editor-sm-views-padding-y,
178
+ preview-gap: $kendo-color-editor-sm-preview-gap,
179
+ preview-width: $kendo-color-editor-sm-color-preview-width,
180
+ preview-height: $kendo-color-editor-sm-color-preview-height,
181
+
182
+ ),
183
+ md: (
184
+ min-width: $kendo-color-editor-md-min-width,
185
+ header-padding-x: $kendo-color-editor-md-header-padding-x,
186
+ header-padding-y: $kendo-color-editor-md-header-padding-y,
187
+ views-padding-x: $kendo-color-editor-md-views-padding-x,
188
+ views-padding-y: $kendo-color-editor-md-views-padding-y,
189
+ preview-gap: $kendo-color-editor-md-preview-gap,
190
+ preview-width: $kendo-color-editor-md-color-preview-width,
191
+ preview-height: $kendo-color-editor-md-color-preview-height,
192
+ ),
193
+ lg: (
194
+ min-width: $kendo-color-editor-lg-min-width,
195
+ header-padding-x: $kendo-color-editor-lg-header-padding-x,
196
+ header-padding-y: $kendo-color-editor-lg-header-padding-y,
197
+ views-padding-x: $kendo-color-editor-lg-views-padding-x,
198
+ views-padding-y: $kendo-color-editor-lg-views-padding-y,
199
+ preview-gap: $kendo-color-editor-lg-preview-gap,
200
+ preview-width: $kendo-color-editor-lg-color-preview-width,
201
+ preview-height: $kendo-color-editor-lg-color-preview-height,
202
+ )
203
+ ) !default;
204
+
85
205
  @forward "@progress/kendo-theme-default/scss/coloreditor/_variables.scss" with (
86
206
  $kendo-color-editor-spacer: $kendo-color-editor-spacer,
87
207
  $kendo-color-editor-min-width: $kendo-color-editor-min-width,
208
+ $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width,
209
+ $kendo-color-editor-md-min-width: $kendo-color-editor-md-min-width,
210
+ $kendo-color-editor-lg-min-width: $kendo-color-editor-lg-min-width,
88
211
  $kendo-color-editor-border-width: $kendo-color-editor-border-width,
89
212
  $kendo-color-editor-border-radius: $kendo-color-editor-border-radius,
90
213
  $kendo-color-editor-font-family: $kendo-color-editor-font-family,
@@ -97,13 +220,37 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
97
220
  $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow,
98
221
  $kendo-color-editor-header-padding-y: $kendo-color-editor-header-padding-y,
99
222
  $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-x,
223
+ $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-sm-header-padding-y,
224
+ $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-sm-header-padding-x,
225
+ $kendo-color-editor-md-header-padding-y: $kendo-color-editor-md-header-padding-y,
226
+ $kendo-color-editor-md-header-padding-x: $kendo-color-editor-md-header-padding-x,
227
+ $kendo-color-editor-lg-header-padding-y: $kendo-color-editor-lg-header-padding-y,
228
+ $kendo-color-editor-lg-header-padding-x: $kendo-color-editor-lg-header-padding-x,
100
229
  $kendo-color-editor-header-actions-gap: $kendo-color-editor-header-actions-gap,
101
230
  $kendo-color-editor-color-preview-width: $kendo-color-editor-color-preview-width,
102
231
  $kendo-color-editor-color-preview-height: $kendo-color-editor-color-preview-height,
103
232
  $kendo-color-editor-preview-gap: $kendo-color-editor-preview-gap,
233
+ $kendo-color-editor-sm-preview-gap: $kendo-color-editor-sm-preview-gap,
234
+ $kendo-color-editor-md-preview-gap: $kendo-color-editor-md-preview-gap,
235
+ $kendo-color-editor-lg-preview-gap: $kendo-color-editor-lg-preview-gap,
236
+ $kendo-color-editor-sm-color-preview-width: $kendo-color-editor-sm-color-preview-width,
237
+ $kendo-color-editor-sm-color-preview-height: $kendo-color-editor-sm-color-preview-height,
238
+ $kendo-color-editor-md-color-preview-width: $kendo-color-editor-md-color-preview-width,
239
+ $kendo-color-editor-md-color-preview-height: $kendo-color-editor-md-color-preview-height,
240
+ $kendo-color-editor-lg-color-preview-width: $kendo-color-editor-lg-color-preview-width,
241
+ $kendo-color-editor-lg-color-preview-height: $kendo-color-editor-lg-color-preview-height,
104
242
  $kendo-color-editor-views-padding-y: $kendo-color-editor-views-padding-y,
105
243
  $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-x,
106
244
  $kendo-color-editor-views-gap: $kendo-color-editor-views-gap,
245
+ $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-sm-views-padding-y,
246
+ $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-sm-views-padding-x,
247
+ $kendo-color-editor-sm-views-gap: $kendo-color-editor-sm-views-gap,
248
+ $kendo-color-editor-md-views-padding-y: $kendo-color-editor-md-views-padding-y,
249
+ $kendo-color-editor-md-views-padding-x: $kendo-color-editor-md-views-padding-x,
250
+ $kendo-color-editor-md-views-gap: $kendo-color-editor-md-views-gap,
251
+ $kendo-color-editor-lg-views-padding-y: $kendo-color-editor-lg-views-padding-y,
252
+ $kendo-color-editor-lg-views-padding-x: $kendo-color-editor-lg-views-padding-x,
253
+ $kendo-color-editor-lg-views-gap: $kendo-color-editor-lg-views-gap,
107
254
  $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color,
108
255
  $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline,
109
256
  $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset
package/scss/colorgradient/_variables.scss CHANGED
@@ -44,6 +44,26 @@ $kendo-color-gradient-bg: $kendo-component-bg !default;
44
44
  /// @group color-gradient
45
45
  $kendo-color-gradient-border: $kendo-component-border !default;
46
46
 
47
+ /// The width of the small ColorGradient.
48
+ /// @group color-gradient
49
+ $kendo-color-gradient-sm-width: 266px !default;
50
+ /// The width of the medium ColorGradient.
51
+ /// @group color-gradient
52
+ $kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
53
+ /// The width of the large ColorGradient.
54
+ /// @group color-gradient
55
+ $kendo-color-gradient-lg-width: 362px !default;
56
+
57
+ /// The spacing between the sections of the small ColorGradient.
58
+ /// @group color-gradient
59
+ $kendo-color-gradient-sm-gap: $kendo-color-gradient-gap !default;
60
+ /// The spacing between the sections of the medium ColorGradient.
61
+ /// @group color-gradient
62
+ $kendo-color-gradient-md-gap: $kendo-color-gradient-gap !default;
63
+ /// The spacing between the sections of the large ColorGradient.
64
+ /// @group color-gradient
65
+ $kendo-color-gradient-lg-gap: k-spacing(4.5) !default;
66
+
47
67
  /// The border color of the focused ColorGradient.
48
68
  /// @group color-gradient
49
69
  $kendo-color-gradient-focus-border: $kendo-hover-border !default;
@@ -60,6 +80,25 @@ $kendo-color-gradient-canvas-gap: k-spacing(3) !default;
60
80
  /// The height the ColorGradient canvas hsv rectangle.
61
81
  /// @group color-gradient
62
82
  $kendo-color-gradient-canvas-rectangle-height: 180px !default;
83
+ /// The height the small ColorGradient canvas hsv rectangle.
84
+ /// @group color-gradient
85
+ $kendo-color-gradient-sm-canvas-rectangle-height: 186px !default;
86
+ /// The height the medium ColorGradient canvas hsv rectangle.
87
+ /// @group color-gradient
88
+ $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
89
+ /// The height the large ColorGradient canvas hsv rectangle.
90
+ /// @group color-gradient
91
+ $kendo-color-gradient-lg-canvas-rectangle-height: 268px !default;
92
+
93
+ /// The spacing between the items of the small ColorGradient canvas.
94
+ /// @group color-gradient
95
+ $kendo-color-gradient-sm-canvas-gap: k-spacing(3) !default;
96
+ /// The spacing between the items of the medium ColorGradient canvas.
97
+ /// @group color-gradient
98
+ $kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-canvas-gap !default;
99
+ /// The spacing between the items of the large ColorGradient canvas.
100
+ /// @group color-gradient
101
+ $kendo-color-gradient-lg-canvas-gap: k-spacing(4.5) !default;
63
102
 
64
103
  /// The width of the ColorGradient slider.
65
104
  /// @group color-gradient
@@ -80,6 +119,15 @@ $kendo-color-gradient-slider-horizontal-size: 100% !default;
80
119
  /// The background image of the ColorGradient alpha slider.
81
120
  /// @group color-gradient
82
121
  $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
122
+ /// The height of the small ColorGradient vertical slider.
123
+ /// @group color-gradient
124
+ $kendo-color-gradient-sm-slider-vertical-size: 186px !default;
125
+ /// The height of the medium ColorGradient vertical slider.
126
+ /// @group color-gradient
127
+ $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
128
+ /// The height of the large ColorGradient vertical slider.
129
+ /// @group color-gradient
130
+ $kendo-color-gradient-lg-slider-vertical-size: 268px !default;
83
131
 
84
132
  /// The width of the ColorGradient canvas drag handle.
85
133
  /// @group color-gradient
@@ -135,6 +183,16 @@ $kendo-color-gradient-input-label-gap: k-spacing(1) !default;
135
183
  /// @group color-gradient
136
184
  $kendo-color-gradient-input-label-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
137
185
 
186
+ /// The width of the small ColorGradient input.
187
+ /// @group color-gradient
188
+ $kendo-color-gradient-sm-input-width: 42px !default;
189
+ /// The width of the medium ColorGradient input.
190
+ /// @group color-gradient
191
+ $kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
192
+ /// The width of the large ColorGradient input.
193
+ /// @group color-gradient
194
+ $kendo-color-gradient-lg-input-width: 62.5px !default;
195
+
138
196
  /// The font weight of the ColorGradient contrast ratio text.
139
197
  /// @group color-gradient
140
198
  $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
@@ -142,10 +200,45 @@ $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold,
142
200
  /// @group color-gradient
143
201
  $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;
144
202
 
203
+ /// The size map of the ColorGradient.
204
+ /// @group color-gradient
205
+ $kendo-color-gradient-sizes: (
206
+ sm: (
207
+ width: $kendo-color-gradient-sm-width,
208
+ vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
209
+ rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
210
+ input-width: $kendo-color-gradient-sm-input-width,
211
+ gap: $kendo-color-gradient-sm-gap,
212
+ canvas-gap: $kendo-color-gradient-sm-canvas-gap
213
+ ),
214
+ md: (
215
+ width: $kendo-color-gradient-md-width,
216
+ vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
217
+ rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
218
+ input-width: $kendo-color-gradient-md-input-width,
219
+ gap: $kendo-color-gradient-md-gap,
220
+ canvas-gap: $kendo-color-gradient-md-canvas-gap
221
+ ),
222
+ lg: (
223
+ width: $kendo-color-gradient-lg-width,
224
+ vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
225
+ rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
226
+ input-width: $kendo-color-gradient-lg-input-width,
227
+ gap: $kendo-color-gradient-lg-gap,
228
+ canvas-gap: $kendo-color-gradient-lg-canvas-gap
229
+ )
230
+ ) !default;
231
+
145
232
 
146
233
  @forward "@progress/kendo-theme-default/scss/colorgradient/_variables.scss" with (
147
234
  $kendo-color-gradient-spacer: $kendo-color-gradient-spacer,
148
235
  $kendo-color-gradient-width: $kendo-color-gradient-width,
236
+ $kendo-color-gradient-sm-width: $kendo-color-gradient-sm-width,
237
+ $kendo-color-gradient-md-width: $kendo-color-gradient-md-width,
238
+ $kendo-color-gradient-lg-width: $kendo-color-gradient-lg-width,
239
+ $kendo-color-gradient-sm-gap: $kendo-color-gradient-sm-gap,
240
+ $kendo-color-gradient-md-gap: $kendo-color-gradient-md-gap,
241
+ $kendo-color-gradient-lg-gap: $kendo-color-gradient-lg-gap,
149
242
  $kendo-color-gradient-border-width: $kendo-color-gradient-border-width,
150
243
  $kendo-color-gradient-border-radius: $kendo-color-gradient-border-radius,
151
244
  $kendo-color-gradient-padding-y: $kendo-color-gradient-padding-y,
@@ -162,12 +255,21 @@ $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 2
162
255
  $kendo-color-gradient-canvas-border-radius: $kendo-color-gradient-canvas-border-radius,
163
256
  $kendo-color-gradient-canvas-gap: $kendo-color-gradient-canvas-gap,
164
257
  $kendo-color-gradient-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height,
258
+ $kendo-color-gradient-sm-canvas-rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
259
+ $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
260
+ $kendo-color-gradient-lg-canvas-rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
261
+ $kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-sm-canvas-gap,
262
+ $kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-md-canvas-gap,
263
+ $kendo-color-gradient-lg-canvas-gap: $kendo-color-gradient-lg-canvas-gap,
165
264
  $kendo-color-gradient-slider-track-size: $kendo-color-gradient-slider-track-size,
166
265
  $kendo-color-gradient-slider-border-radius: $kendo-color-gradient-slider-border-radius,
167
266
  $kendo-color-gradient-slider-draghandle-border-width: $kendo-color-gradient-slider-draghandle-border-width,
168
267
  $kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-slider-vertical-size,
169
268
  $kendo-color-gradient-slider-horizontal-size: $kendo-color-gradient-slider-horizontal-size,
170
269
  $kendo-color-gradient-slider-alpha-bgr: $kendo-color-gradient-slider-alpha-bgr,
270
+ $kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-sm-slider-vertical-size,
271
+ $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-md-slider-vertical-size,
272
+ $kendo-color-gradient-lg-slider-vertical-size: $kendo-color-gradient-lg-slider-vertical-size,
171
273
  $kendo-color-gradient-draghandle-width: $kendo-color-gradient-draghandle-width,
172
274
  $kendo-color-gradient-draghandle-height: $kendo-color-gradient-draghandle-height,
173
275
  $kendo-color-gradient-draghandle-border-width: $kendo-color-gradient-draghandle-border-width,
@@ -186,6 +288,9 @@ $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 2
186
288
  $kendo-color-gradient-input-gap: $kendo-color-gradient-input-gap,
187
289
  $kendo-color-gradient-input-label-gap: $kendo-color-gradient-input-label-gap,
188
290
  $kendo-color-gradient-input-label-text: $kendo-color-gradient-input-label-text,
291
+ $kendo-color-gradient-sm-input-width: $kendo-color-gradient-sm-input-width,
292
+ $kendo-color-gradient-md-input-width: $kendo-color-gradient-md-input-width,
293
+ $kendo-color-gradient-lg-input-width: $kendo-color-gradient-lg-input-width,
189
294
  $kendo-color-gradient-contrast-ratio-font-weight: $kendo-color-gradient-contrast-ratio-font-weight,
190
295
  $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer
191
296
  );
package/scss/colorpalette/_variables.scss CHANGED
@@ -18,6 +18,24 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
18
18
  /// The height of the ColorPalette tile.
19
19
  /// @group color-palette
20
20
  $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
21
+ // The width of the small ColorPalette tile.
22
+ /// @group color-palette
23
+ $kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
24
+ /// The height of the small ColorPalette tile.
25
+ /// @group color-palette
26
+ $kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
27
+ /// The width of the medium ColorPalette tile.
28
+ /// @group color-palette
29
+ $kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
30
+ /// The height of the medium ColorPalette tile.
31
+ /// @group color-palette
32
+ $kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
33
+ /// The width of the large ColorPalette tile.
34
+ /// @group color-palette
35
+ $kendo-color-palette-tile-lg-width: k-spacing(8) !default;
36
+ /// The height of the large ColorPalette tile.
37
+ /// @group color-palette
38
+ $kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
21
39
  /// The shadow of the ColorPalette focused tile.
22
40
  /// @group color-palette
23
41
  $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
@@ -28,6 +46,22 @@ $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0
28
46
  /// @group color-palette
29
47
  $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
30
48
 
49
+ /// The size map of the ColorPalette.
50
+ /// @group color-palette
51
+ $kendo-color-palette-sizes: (
52
+ sm: (
53
+ width: $kendo-color-palette-tile-sm-width,
54
+ height: $kendo-color-palette-tile-sm-height
55
+ ),
56
+ md: (
57
+ width: $kendo-color-palette-tile-md-width,
58
+ height: $kendo-color-palette-tile-md-height
59
+ ),
60
+ lg: (
61
+ width: $kendo-color-palette-tile-lg-width,
62
+ height: $kendo-color-palette-tile-lg-height
63
+ )
64
+ ) !default;
31
65
 
32
66
  @forward "@progress/kendo-theme-default/scss/colorpalette/_variables.scss" with (
33
67
  $kendo-color-palette-font-family: $kendo-color-palette-font-family,
@@ -35,6 +69,12 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
35
69
  $kendo-color-palette-line-height: $kendo-color-palette-line-height,
36
70
  $kendo-color-palette-tile-width: $kendo-color-palette-tile-width,
37
71
  $kendo-color-palette-tile-height: $kendo-color-palette-tile-height,
72
+ $kendo-color-palette-tile-sm-width: $kendo-color-palette-tile-sm-width,
73
+ $kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-height,
74
+ $kendo-color-palette-tile-md-width: $kendo-color-palette-tile-md-width,
75
+ $kendo-color-palette-tile-md-height: $kendo-color-palette-tile-md-height,
76
+ $kendo-color-palette-tile-lg-width: $kendo-color-palette-tile-lg-width,
77
+ $kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-height,
38
78
  $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
39
79
  $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
40
80
  $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow
package/scss/index.scss CHANGED
@@ -114,6 +114,7 @@
114
114
  @forward "./map/_index.scss";
115
115
  @forward "./orgchart/_index.scss";
116
116
  @forward "./signature/_index.scss";
117
+ @forward "./otp/_index.scss";
117
118
 
118
119
 
119
120
  // Use component modules
@@ -202,6 +203,7 @@
202
203
  @use "./switch/_index.scss" as *;
203
204
  @use "./upload/_index.scss" as *;
204
205
  @use "./dropzone/_index.scss" as *;
206
+ @use "./otp/_index.scss" as *;
205
207
  // Command interfaces
206
208
 
207
209
  @use "./action-buttons/_index.scss" as *;
@@ -375,6 +377,7 @@
375
377
  @include kendo-switch--styles();
376
378
  @include kendo-upload--styles();
377
379
  @include kendo-dropzone--styles();
380
+ @include kendo-otp--styles();
378
381
 
379
382
 
380
383
  // Command interfaces