@progress/kendo-theme-material 6.8.0-dev.2 → 7.0.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 (47) hide show
  1. package/dist/all.css +602 -4852
  2. package/dist/all.scss +346 -1338
  3. package/dist/meta/sassdoc-data.json +992 -590
  4. package/dist/meta/sassdoc-raw-data.json +417 -233
  5. package/dist/meta/variables.json +125 -137
  6. package/lib/swatches/material-aqua-dark.json +1 -1
  7. package/lib/swatches/material-arctic.json +1 -1
  8. package/lib/swatches/material-burnt-teal.json +1 -1
  9. package/lib/swatches/material-dataviz-v4.json +1 -1
  10. package/lib/swatches/material-eggplant.json +1 -1
  11. package/lib/swatches/material-lime-dark.json +1 -1
  12. package/lib/swatches/material-lime.json +1 -1
  13. package/lib/swatches/material-main-dark.json +1 -1
  14. package/lib/swatches/material-main.json +1 -1
  15. package/lib/swatches/material-nova.json +1 -1
  16. package/lib/swatches/material-pacific-dark.json +1 -1
  17. package/lib/swatches/material-pacific.json +1 -1
  18. package/lib/swatches/material-sky-dark.json +1 -1
  19. package/lib/swatches/material-sky.json +1 -1
  20. package/lib/swatches/material-smoke.json +1 -1
  21. package/package.json +6 -6
  22. package/scss/_variables.scss +32 -7
  23. package/scss/action-sheet/_variables.scss +1 -1
  24. package/scss/appbar/_variables.scss +2 -2
  25. package/scss/bottom-navigation/_variables.scss +2 -2
  26. package/scss/button/_variables.scss +1 -1
  27. package/scss/card/_variables.scss +2 -2
  28. package/scss/chat/_variables.scss +6 -6
  29. package/scss/coloreditor/_variables.scss +2 -2
  30. package/scss/colorgradient/_variables.scss +14 -8
  31. package/scss/common/_index.scss +1 -0
  32. package/scss/common/_indicators.scss +1 -0
  33. package/scss/core/_index.scss +6 -0
  34. package/scss/core/elevation/index.import.scss +53 -0
  35. package/scss/editor/_layout.scss +1 -2
  36. package/scss/fab/_variables.scss +3 -3
  37. package/scss/grid/_layout.scss +1 -2
  38. package/scss/grid/_theme.scss +2 -4
  39. package/scss/pdf-viewer/_variables.scss +1 -1
  40. package/scss/pivotgrid/_variables.scss +4 -4
  41. package/scss/popup/_variables.scss +1 -1
  42. package/scss/scheduler/_layout.scss +0 -6
  43. package/scss/scheduler/_variables.scss +1 -3
  44. package/scss/tabstrip/_variables.scss +1 -1
  45. package/scss/toolbar/_variables.scss +1 -1
  46. package/scss/tooltip/_variables.scss +2 -0
  47. package/scss/window/_variables.scss +2 -2
@@ -3,7 +3,7 @@
3
3
  "name": "Material Aqua Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#121212",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Arctic",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Burnt Teal",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Dataviz v4",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#3f51b5",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Eggplant",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Lime Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#121212",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Lime",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Main Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#121212",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Nova",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Pacific Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#121212",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Pacific Light",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Sky Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#121212",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Sky",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Material Smoke",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "6.8.0-dev.2",
6
+ "version": "7.0.0",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-material",
3
3
  "description": "Material theme for Kendo UI",
4
- "version": "6.8.0-dev.2",
4
+ "version": "7.0.0",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -51,10 +51,10 @@
51
51
  "postpublish": "echo 'no postpublish for material theme'"
52
52
  },
53
53
  "dependencies": {
54
- "@progress/kendo-font-icons": "1.9.0",
55
- "@progress/kendo-theme-core": "6.8.0-dev.2",
56
- "@progress/kendo-theme-default": "6.8.0-dev.2",
57
- "@progress/kendo-theme-utils": "6.8.0-dev.2"
54
+ "@progress/kendo-svg-icons": "2.0.0",
55
+ "@progress/kendo-theme-core": "7.0.0",
56
+ "@progress/kendo-theme-default": "7.0.0",
57
+ "@progress/kendo-theme-utils": "7.0.0"
58
58
  },
59
- "gitHead": "1d0254882897f857ca96fd31477a6e2c18d18433"
59
+ "gitHead": "61d73126ecd6c97602f73d0adf12a12bdafe4d0a"
60
60
  }
@@ -93,23 +93,48 @@ $elevation: k-map-get( $theme, elevation ) !default;
93
93
  /// Shadow for switch.
94
94
  /// Equivalent to material elevation 1.
95
95
  /// @group shadows
96
- $box-shadow-depth-1: 0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 ) !default;
96
+ /// @deprecated Use the `$kendo-elevation` map instead.
97
+ $box-shadow-depth-1: k-elevation(1) !default;
97
98
  /// Shadow for resting state of button, card and other widgets.
98
99
  /// Equivalent to material elevation 2.
99
100
  /// @group shadows
100
- $box-shadow-depth-2: 0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 ) !default;
101
+ /// @deprecated Use the `$kendo-elevation` map instead.
102
+ $box-shadow-depth-2: k-elevation(2) !default;
101
103
  /// Shadow for menu, popups and raised state of button and card.
102
- /// Equivalent to material elevation 8.
104
+ /// Equivalent to material elevation 3.
103
105
  /// @group shadows
104
- $box-shadow-depth-3: 0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 ) !default;
106
+ /// @deprecated Use the `$kendo-elevation` map instead.
107
+ $box-shadow-depth-3: k-elevation(3) !default;
105
108
  /// Shadow for drawers and other overlaying elements.
109
+ /// Equivalent to material elevation 4.
110
+ /// @group shadows
111
+ /// @deprecated Use the `$kendo-elevation` map instead.
112
+ $box-shadow-depth-4: k-elevation(4) !default;
113
+ /// Shadow for window and dialog.
114
+ /// Equivalent to material elevation 6.
115
+ /// @group shadows
116
+ /// @deprecated Use the `$kendo-elevation` map instead.
117
+ $box-shadow-depth-5: k-elevation(5) !default;
118
+ /// Shadow for window and dialog.
119
+ /// Equivalent to material elevation 8.
120
+ /// @group shadows
121
+ /// @deprecated Use the `$kendo-elevation` map instead.
122
+ $box-shadow-depth-6: k-elevation(6) !default;
123
+ /// Shadow for window and dialog.
124
+ /// Equivalent to material elevation 12.
125
+ /// @group shadows
126
+ /// @deprecated Use the `$kendo-elevation` map instead.
127
+ $box-shadow-depth-7: k-elevation(7) !default;
128
+ /// Shadow for window and dialog.
106
129
  /// Equivalent to material elevation 16.
107
130
  /// @group shadows
108
- $box-shadow-depth-4: 0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 ) !default;
131
+ /// @deprecated Use the `$kendo-elevation` map instead.
132
+ $box-shadow-depth-8: k-elevation(8) !default;
109
133
  /// Shadow for window and dialog.
110
134
  /// Equivalent to material elevation 24.
111
135
  /// @group shadows
112
- $box-shadow-depth-5: 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 ) !default;
136
+ /// @deprecated Use the `$kendo-elevation` map instead.
137
+ $box-shadow-depth-9: k-elevation(9) !default;
113
138
 
114
139
 
115
140
  // Icons
@@ -414,4 +439,4 @@ $kendo-invalid-shadow: null !default;
414
439
 
415
440
  // Loading
416
441
  $kendo-loading-opacity: .3 !default;
417
- $kendo-zindex-loading: 100 !default;
442
+ $kendo-zindex-loading: 100 !default;
@@ -17,7 +17,7 @@ $kendo-actionsheet-line-height: k-math-div( 20, 14 ) !default;
17
17
  $kendo-actionsheet-bg: $kendo-component-bg !default;
18
18
  $kendo-actionsheet-text: $kendo-component-text !default;
19
19
  $kendo-actionsheet-border: $kendo-component-border !default;
20
- $kendo-actionsheet-shadow: $box-shadow-depth-4 !default;
20
+ $kendo-actionsheet-shadow: $box-shadow-depth-7 !default;
21
21
 
22
22
 
23
23
  // Actionsheet header
@@ -48,7 +48,7 @@ $kendo-appbar-dark-text: k-contrast-color( $kendo-color-dark ) !default;
48
48
 
49
49
  /// The box shadow of the AppBar.
50
50
  /// @group appbar
51
- $kendo-appbar-box-shadow: 0px 2px 3px rgba( black, .24 ) !default;
51
+ $kendo-appbar-box-shadow: $box-shadow-depth-4 !default;
52
52
  /// The box shadow of the AppBar with bottom position.
53
53
  /// @group appbar
54
- $kendo-appbar-bottom-box-shadow: 0px -2px 3px rgba( black, .24 ) !default;
54
+ $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;
@@ -49,7 +49,7 @@ $kendo-bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
49
49
 
50
50
  /// The box shadow of the BottomNavigation.
51
51
  /// @group bottom-navigation
52
- $kendo-bottom-nav-shadow: 0px 0px 5px rgba( black, .12 ) !default;
52
+ $kendo-bottom-nav-shadow: $box-shadow-depth-4 !default;
53
53
 
54
54
  /// The text color of the flat BottomNavigation.
55
55
  /// @group bottom-navigation
@@ -59,4 +59,4 @@ $kendo-bottom-nav-flat-text: $kendo-component-text !default;
59
59
  $kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
60
60
  /// The border color of the flat BottomNavigation.
61
61
  /// @group bottom-navigation
62
- $kendo-bottom-nav-flat-border: $kendo-component-border !default;
62
+ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
@@ -154,7 +154,7 @@ $kendo-button-active-border: null !default;
154
154
  $kendo-button-active-gradient: null !default;
155
155
  /// The base shadow of the active Button.
156
156
  /// @group button
157
- $kendo-button-active-shadow: $box-shadow-depth-3 !default;
157
+ $kendo-button-active-shadow: $box-shadow-depth-6 !default;
158
158
 
159
159
  /// The base background color of the selected Button.
160
160
  /// @group button
@@ -13,12 +13,12 @@ $kendo-card-deck-gap: k-map-get( $kendo-spacing, 4 ) !default;
13
13
  $kendo-card-bg: $kendo-component-bg !default;
14
14
  $kendo-card-text: $kendo-component-text !default;
15
15
  $kendo-card-border: $kendo-component-border !default;
16
- $kendo-card-shadow: $box-shadow-depth-2 !default;
16
+ $kendo-card-shadow: $box-shadow-depth-1 !default;
17
17
 
18
18
  $kendo-card-focus-bg: null !default;
19
19
  $kendo-card-focus-text: null !default;
20
20
  $kendo-card-focus-border: null !default;
21
- $kendo-card-focus-shadow: $box-shadow-depth-4 !default;
21
+ $kendo-card-focus-shadow: $box-shadow-depth-3 !default;
22
22
 
23
23
  $kendo-card-header-padding-x: $kendo-card-padding-x !default;
24
24
  $kendo-card-header-padding-y: $kendo-card-padding-y !default;
@@ -52,16 +52,16 @@ $kendo-chat-border: $kendo-component-border !default;
52
52
  $kendo-chat-bubble-bg: $kendo-component-bg !default;
53
53
  $kendo-chat-bubble-text: $kendo-component-text !default;
54
54
  $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
55
- $kendo-chat-bubble-shadow: 0 1px 2px rgba( black, .08 ) !default;
56
- $kendo-chat-bubble-hover-shadow: 0 1px 2px rgba( black, .16 ) !default;
57
- $kendo-chat-bubble-selected-shadow: 0 3px 10px rgba( black, .16 ) !default;
55
+ $kendo-chat-bubble-shadow: $box-shadow-depth-1 !default;
56
+ $kendo-chat-bubble-hover-shadow: $box-shadow-depth-2 !default;
57
+ $kendo-chat-bubble-selected-shadow: $box-shadow-depth-3 !default;
58
58
 
59
59
  $kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
60
60
  $kendo-chat-alt-bubble-text: k-contrast-color( $kendo-chat-alt-bubble-bg ) !default;
61
61
  $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
62
- $kendo-chat-alt-bubble-shadow: 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 ) !default;
63
- $kendo-chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 ) !default;
64
- $kendo-chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $kendo-chat-alt-bubble-bg, .4 ) !default;
62
+ $kendo-chat-alt-bubble-shadow: $box-shadow-depth-1 !default;
63
+ $kendo-chat-alt-bubble-hover-shadow: $box-shadow-depth-2 !default;
64
+ $kendo-chat-alt-bubble-selected-shadow: $box-shadow-depth-3 !default;
65
65
 
66
66
  $kendo-chat-quick-reply-bg: transparent !default;
67
67
  $kendo-chat-quick-reply-text: $kendo-color-primary !default;
@@ -37,7 +37,7 @@ $kendo-color-editor-border: $kendo-component-border !default;
37
37
  $kendo-color-editor-focus-border: $kendo-hover-border !default;
38
38
  /// The box shadow of the focused ColorEditor.
39
39
  /// @group coloreditor
40
- $kendo-color-editor-focus-shadow: $box-shadow-depth-2 !default;
40
+ $kendo-color-editor-focus-shadow: $box-shadow-depth-3 !default;
41
41
 
42
42
  /// The vertical padding of the ColorEditor header.
43
43
  /// @group coloreditor
@@ -77,4 +77,4 @@ $kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !defau
77
77
  $kendo-color-editor-color-gradient-focus-outline: 2px !default;
78
78
  /// The outline offset of the focused ColorGradient.
79
79
  /// @group coloreditor
80
- $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
80
+ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
@@ -48,7 +48,7 @@ $kendo-color-gradient-border: $kendo-component-border !default;
48
48
  $kendo-color-gradient-focus-border: $kendo-hover-border !default;
49
49
  /// The box shadow of the focused ColorGradient.
50
50
  /// @group cologradient
51
- $kendo-color-gradient-focus-shadow: $box-shadow-depth-2 !default;
51
+ $kendo-color-gradient-focus-shadow: $box-shadow-depth-3 !default;
52
52
 
53
53
  /// The border radius of the ColorGradient canvas.
54
54
  /// @group cologradient
@@ -86,6 +86,9 @@ $kendo-color-gradient-draghandle-height: 14px !default;
86
86
  /// The width of the border around the ColorGradient canvas drag handle.
87
87
  /// @group cologradient
88
88
  $kendo-color-gradient-draghandle-border-width: 1px !default;
89
+ /// The width of the outline around the ColorGradient canvas drag handle.
90
+ /// @group cologradient
91
+ $kendo-color-gradient-draghandle-outline-width: 1px !default;
89
92
  /// The border radius of the ColorGradient canvas drag handle.
90
93
  /// @group cologradient
91
94
  $kendo-color-gradient-draghandle-border-radius: 50% !default;
@@ -98,15 +101,18 @@ $kendo-color-gradient-draghandle-bg: transparent !default;
98
101
  /// The color of the border around the ColorGradient canvas drag handle.
99
102
  /// @group cologradient
100
103
  $kendo-color-gradient-draghandle-border: rgba( white, .8 ) !default;
101
- /// The box shadow of the ColorGradient canvas drag handle.
104
+ /// The color of the outline around the ColorGradient canvas drag handle.
102
105
  /// @group cologradient
103
- $kendo-color-gradient-draghandle-shadow: 0 1px 4px rgba( black, .5 ) !default;
104
- /// The box shadow of the focused ColorGradient canvas drag handle.
106
+ $kendo-color-gradient-draghandle-shadow: rgba( $kendo-color-black, .5) !default;
107
+ /// The focus color of the outline around the ColorGradient canvas drag handle.
105
108
  /// @group cologradient
106
- $kendo-color-gradient-draghandle-focus-shadow: 0 1px 4px black !default;
107
- /// The box shadow of the hovered ColorGradient canvas drag handle.
109
+ $kendo-color-gradient-draghandle-focus-shadow: $kendo-color-black !default;
110
+ /// The outline color of the outline around the ColorGradient canvas drag handle.
111
+ /// @group cologradient
112
+ $kendo-color-gradient-draghandle-hover-shadow: $kendo-color-black !default;
113
+ /// The box shadow of the ColorGradient canvas drag handle.
108
114
  /// @group cologradient
109
- $kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
115
+ $kendo-color-gradient-draghandle-shadow: k-elevation(2) !default;
110
116
 
111
117
  /// The vertical margin of the ColorGradient canvas drag handle.
112
118
  /// @group cologradient
@@ -133,4 +139,4 @@ $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
133
139
  $kendo-color-gradient-contrast-ratio-font-weight: $kendo-font-weight-medium !default;
134
140
  /// The spacing between the items in the ColorGradient contrast tool.
135
141
  /// @group cologradient
136
- $kendo-color-gradient-contrast-spacer: k-map-get( $kendo-spacing, 2 ) !default;
142
+ $kendo-color-gradient-contrast-spacer: k-map-get( $kendo-spacing, 2 ) !default;
@@ -1,4 +1,5 @@
1
1
  @import "./_base.scss";
2
2
  @import "./_animations.scss";
3
+ @import "./_indicators.scss";
3
4
  @import "./_resizing.scss";
4
5
  @import "./_scrollbar.scss";
@@ -0,0 +1 @@
1
+ @import "@progress/kendo-theme-default/scss/common/_indicators.scss";
@@ -3,6 +3,9 @@ $wcag-min-contrast-ratio: 4.5 !default;
3
3
  // Color system
4
4
  @import "./color-system/index.import.scss";
5
5
 
6
+ // Elevation
7
+ @import "./elevation/index.import.scss";
8
+
6
9
  // Variables
7
10
  @import "../_variables.scss";
8
11
 
@@ -11,4 +14,7 @@ $wcag-min-contrast-ratio: 4.5 !default;
11
14
  // Expose
12
15
  @include exports("kendo-core-styles") {
13
16
  @include kendo-core--styles();
17
+
18
+ // Elevation System
19
+ @include kendo-elevation--styles();
14
20
  }
@@ -0,0 +1,53 @@
1
+ $_default-elevation: (
2
+ 1: (
3
+ 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
4
+ 0px 2px 1px 0px rgba(0, 0, 0, 0.12),
5
+ 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
6
+ ),
7
+ 2: (
8
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
9
+ 0px 3px 1px 0px rgba(0, 0, 0, 0.12),
10
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
11
+ ),
12
+ 3: (
13
+ 0px 1px 8px 0px rgba(0, 0, 0, 0.2),
14
+ 0px 3px 3px 0px rgba(0, 0, 0, 0.12),
15
+ 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
16
+ ),
17
+ 4: (
18
+ 0px 2px 4px 0px rgba(0, 0, 0, 0.2),
19
+ 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
20
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
21
+ ),
22
+ 5: (
23
+ 0px 3px 5px 0px rgba(0, 0, 0, 0.2),
24
+ 0px 1px 18px 0px rgba(0, 0, 0, 0.12),
25
+ 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
26
+ ),
27
+ 6: (
28
+ 0px 5px 5px 0px rgba(0, 0, 0, 0.2),
29
+ 0px 3px 14px 0px rgba(0, 0, 0, 0.12),
30
+ 0px 8px 10px 0px rgba(0, 0, 0, 0.14),
31
+ ),
32
+ 7: (
33
+ 0px 7px 8px 0px rgba(0, 0, 0, 0.2),
34
+ 0px 5px 22px 0px rgba(0, 0, 0, 0.12),
35
+ 0px 12px 17px 0px rgba(0, 0, 0, 0.14),
36
+ ),
37
+ 8: (
38
+ 0px 8px 10px rgba(0, 0, 0, 0.2),
39
+ 0px 6px 30px rgba(0, 0, 0, 0.12),
40
+ 0px 16px 24px rgba(0, 0, 0, 0.14),
41
+ ),
42
+ 9: (
43
+ 0px 11px 15px rgba(0, 0, 0, 0.2),
44
+ 0px 9px 46px rgba(0, 0, 0, 0.12),
45
+ 0px 24px 38px rgba(0, 0, 0, 0.14),
46
+ ),
47
+ );
48
+
49
+ /// Global Elevation.
50
+ /// @group elevation
51
+ $kendo-elevation: $_default-elevation !default;
52
+
53
+ @import "@progress/kendo-theme-core/scss/elevation/index.import.scss";
@@ -18,8 +18,7 @@
18
18
  text-transform: uppercase;
19
19
  font-size: $kendo-font-size-md;
20
20
 
21
- .k-icon,
22
- .k-svg-icon {
21
+ .k-icon {
23
22
  margin-left: $kendo-editor-export-tool-icon-margin-x;
24
23
  }
25
24
  }
@@ -115,13 +115,13 @@ $kendo-fab-sizes: (
115
115
 
116
116
  /// The base shadow of the FAB.
117
117
  /// @group floating-action-button
118
- $kendo-fab-shadow: 0px 3px 5px -1px rgba( black, .2 ), 0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 ) !default;
118
+ $kendo-fab-shadow: $box-shadow-depth-5 !default;
119
119
  /// The shadow of the disabled FAB.
120
120
  /// @group floating-action-button
121
- $kendo-fab-disabled-shadow: 0px 3px 5px -1px k-try-tint( rgba( black, .2 ), .5 ), 0px 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0px 1px 18px k-try-tint( rgba( black, .12 ), .5 ) !default;
121
+ $kendo-fab-disabled-shadow: $box-shadow-depth-5 !default;
122
122
  /// The shadow of the active FAB.
123
123
  /// @group floating-action-button
124
- $kendo-fab-active-shadow: 0px 5px 5px -3px rgba( black, .2 ), 0px 8px 10px 1px rgba( black, .14 ), 0px 3px 14px 2px rgba( black, .12 ) !default;
124
+ $kendo-fab-active-shadow: $box-shadow-depth-7 !default;
125
125
 
126
126
  /// The base text color of the FAB item.
127
127
  /// @group floating-action-button
@@ -54,8 +54,7 @@
54
54
  .k-grid-filter,
55
55
  .k-header-column-menu,
56
56
  .k-grid-header-menu,
57
- .k-hierarchy-cell .k-icon,
58
- .k-hierarchy-cell .k-svg-icon {
57
+ .k-hierarchy-cell .k-icon {
59
58
  line-height: normal;
60
59
  }
61
60
  }
@@ -136,8 +136,7 @@
136
136
  .k-link:hover {
137
137
  color: $kendo-grid-text;
138
138
 
139
- > .k-icon,
140
- > .k-svg-icon {
139
+ > .k-icon {
141
140
  color: inherit;
142
141
  }
143
142
  }
@@ -145,8 +144,7 @@
145
144
  .k-grid-filter,
146
145
  .k-table-th-column-menu,
147
146
  .k-grid-header-menu,
148
- .k-hierarchy-cell .k-icon,
149
- .k-hierarchy-cell .k-svg-icon {
147
+ .k-hierarchy-cell .k-icon {
150
148
  &:hover {
151
149
  color: $kendo-grid-text;
152
150
  background-color: transparent;
@@ -23,7 +23,7 @@ $kendo-pdf-viewer-page-spacing: 30px !default;
23
23
  $kendo-pdf-viewer-page-bg: white !default;
24
24
  $kendo-pdf-viewer-page-text: $kendo-component-text !default;
25
25
  $kendo-pdf-viewer-page-border: $kendo-component-border !default;
26
- $kendo-pdf-viewer-page-shadow: 0 0 k-math-div( $kendo-pdf-viewer-page-spacing, 2 ) $kendo-pdf-viewer-page-border !default;
26
+ $kendo-pdf-viewer-page-shadow: $box-shadow-depth-3 !default;
27
27
 
28
28
  $kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
29
29
  $kendo-pdf-viewer-search-panel-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
@@ -70,10 +70,10 @@ $kendo-pivotgrid-configurator-header-bg: null !default;
70
70
  $kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default;
71
71
  $kendo-pivotgrid-configurator-header-border: null !default;
72
72
 
73
- $kendo-pivotgrid-configurator-end-shadow: -3px 0px 6px rgba( black, .16 ) !default;
74
- $kendo-pivotgrid-configurator-start-shadow: 3px 0px 6px rgba( black, .16 ) !default;
75
- $kendo-pivotgrid-configurator-top-shadow: 0px -3px 6px rgba( black, .16 ) !default;
76
- $kendo-pivotgrid-configurator-bottom-shadow: 0px 3px 6px rgba( black, .16 ) !default;
73
+ $kendo-pivotgrid-configurator-end-shadow: $box-shadow-depth-3 !default;
74
+ $kendo-pivotgrid-configurator-start-shadow: $box-shadow-depth-3 !default;
75
+ $kendo-pivotgrid-configurator-top-shadow: $box-shadow-depth-3 !default;
76
+ $kendo-pivotgrid-configurator-bottom-shadow: $box-shadow-depth-3 !default;
77
77
 
78
78
  $kendo-pivotgrid-configurator-button-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
79
79
  $kendo-pivotgrid-configurator-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
@@ -36,4 +36,4 @@ $kendo-popup-text: $kendo-component-text !default;
36
36
  $kendo-popup-border: $kendo-component-border !default;
37
37
  /// Box shadow of the popup.
38
38
  /// @group popup
39
- $kendo-popup-shadow: 0 2px 4px -1px rgba( $elevation, .2 ), 0 4px 5px 0 rgba( $elevation, .14 ), 0 1px 10px 0 rgba( $elevation, .12 ) !default;
39
+ $kendo-popup-shadow: $box-shadow-depth-4 !default;
@@ -74,12 +74,6 @@
74
74
  box-sizing: content-box;
75
75
  vertical-align: unset;
76
76
  }
77
-
78
- .k-svg-icon {
79
- padding: calc( #{$kendo-font-size-md} - #{$kendo-font-size-sm} );
80
- box-sizing: content-box;
81
- vertical-align: unset;
82
- }
83
77
  }
84
78
 
85
79
  .k-resize-handle {
@@ -48,8 +48,6 @@ $kendo-scheduler-cell-height: $kendo-line-height-md * 1rem !default;
48
48
  $kendo-scheduler-datecolumn-width: 12rem !default;
49
49
  $kendo-scheduler-timecolumn-width: 11rem !default;
50
50
 
51
- $kendo-scheduler-current-time-color: #ff0000 !default;
52
-
53
51
  $kendo-scheduler-nonwork-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
54
52
  $kendo-scheduler-nonwork-text: null !default;
55
53
 
@@ -77,7 +75,7 @@ $kendo-scheduler-tooltip-border-width: 0 !default;
77
75
  $kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
78
76
  $kendo-scheduler-tooltip-text: $kendo-base-text !default;
79
77
  $kendo-scheduler-tooltip-border: null !default;
80
- $kendo-scheduler-tooltip-shadow: 0px 0px 10px rgba( black, .2 ) !default;
78
+ $kendo-scheduler-tooltip-shadow: $box-shadow-depth-2 !default;
81
79
 
82
80
  $kendo-scheduler-tooltip-title-margin-y: k-map-get( $kendo-spacing, 2 ) !default;
83
81
  $kendo-scheduler-tooltip-month-font-size: $kendo-font-size-sm !default;
@@ -79,7 +79,7 @@ $kendo-tabstrip-item-selected-gradient: null !default;
79
79
 
80
80
  $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
81
81
 
82
- $kendo-tabstrip-item-dragging-shadow: 0 4px 5px 0 rgba( black, .14 ), 0 1px 10px 0 rgba( black, .12 ), 0 2px 4px -1px rgba( black, .2 ) !default;
82
+ $kendo-tabstrip-item-dragging-shadow: $box-shadow-depth-3 !default;
83
83
 
84
84
  $kendo-tabstrip-item-disabled-bg: null !default;
85
85
  $kendo-tabstrip-item-disabled-text: k-map-get( $theme, disabled-text ) !default;
@@ -70,7 +70,7 @@ $kendo-toolbar-border: null !default;
70
70
  $kendo-toolbar-gradient: null !default;
71
71
  /// The box shadow of the Toolbar.
72
72
  /// @group toolbar
73
- $kendo-toolbar-shadow: $box-shadow-depth-2 !default;
73
+ $kendo-toolbar-shadow: $box-shadow-depth-4 !default;
74
74
 
75
75
  /// The color of the separator border of the Toolbar.
76
76
  /// @group toolbar