@progress/kendo-theme-material 5.0.0-beta.2 → 5.0.0-beta.3

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 (35) hide show
  1. package/README.md +5 -5
  2. package/dist/all.css +1936 -1786
  3. package/dist/all.scss +3342 -2990
  4. package/package.json +3 -3
  5. package/scss/chat/_variables.scss +0 -2
  6. package/scss/checkbox/_index.scss +1 -1
  7. package/scss/checkbox/_variables.scss +2 -8
  8. package/scss/coloreditor/_variables.scss +3 -3
  9. package/scss/combobox/_variables.scss +1 -31
  10. package/scss/fab/_theme.scss +42 -46
  11. package/scss/fab/_variables.scss +129 -73
  12. package/scss/fab/index.md +0 -0
  13. package/scss/filter/_variables.scss +1 -1
  14. package/scss/grid/_layout.scss +0 -3
  15. package/scss/grid/_variables.scss +7 -7
  16. package/scss/imageeditor/_variables.scss +1 -0
  17. package/scss/index.scss +1 -0
  18. package/scss/input/_variables.scss +8 -8
  19. package/scss/list/_index.scss +1 -0
  20. package/scss/listbox/_variables.scss +1 -1
  21. package/scss/menu/_variables.scss +13 -1
  22. package/scss/orgchart/_variables.scss +2 -2
  23. package/scss/pager/_variables.scss +1 -1
  24. package/scss/pdf-viewer/_variables.scss +2 -5
  25. package/scss/radio/_index.scss +1 -1
  26. package/scss/radio/_variables.scss +2 -8
  27. package/scss/table/_variables.scss +5 -5
  28. package/scss/toolbar/_layout.scss +7 -1
  29. package/scss/toolbar/_variables.scss +2 -0
  30. package/scss/treeview/_theme.scss +31 -26
  31. package/scss/treeview/_variables.scss +33 -49
  32. package/scss/virtual-scroller/_index.scss +10 -0
  33. package/scss/virtual-scroller/_layout.scss +1 -0
  34. package/scss/virtual-scroller/_theme.scss +1 -0
  35. package/scss/virtual-scroller/_variables.scss +1 -0
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": "5.0.0-beta.2",
4
+ "version": "5.0.0-beta.3",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -50,7 +50,7 @@
50
50
  "postpublish": "echo 'no postpublish for material theme'"
51
51
  },
52
52
  "dependencies": {
53
- "@progress/kendo-theme-default": "^5.0.0-beta.2"
53
+ "@progress/kendo-theme-default": "^5.0.0-beta.3"
54
54
  },
55
- "gitHead": "13e32ba172a1fa6fc172c9d989974ebfccef19e6"
55
+ "gitHead": "a508e10c60c1c14b569a908ef7f8584cf449a421"
56
56
  }
package/scss/chat/_variables.scss CHANGED
@@ -75,5 +75,3 @@ $chat-message-box-bg: $component-bg !default;
75
75
  $chat-message-box-text: $kendo-input-text !default;
76
76
  $chat-message-box-border: inherit !default;
77
77
  $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
78
-
79
- $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
package/scss/checkbox/_index.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
  // Dependencies
5
- @import "../common/_index.scss";
5
+ @import "../typography/_variables.scss";
6
6
  @import "../list/_variables.scss";
7
7
 
8
8
 
package/scss/checkbox/_variables.scss CHANGED
@@ -130,21 +130,15 @@ $kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
130
130
 
131
131
  // Checkbox list
132
132
 
133
- /// The list margin checkbox.
134
- /// @group checkbox
135
- $kendo-checkbox-list-margin: 0px !default;
136
- /// The list padding checkbox.
133
+ /// The horizontal margin of list item of checkbox.
137
134
  /// @group checkbox
138
- $kendo-checkbox-list-padding: 0px !default;
135
+ $kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
139
136
  /// The horizontal list item padding of checkbox.
140
137
  /// @group checkbox
141
138
  $kendo-checkbox-list-item-padding-x: 0px !default;
142
139
  /// The vertical list item padding of checkbox.
143
140
  /// @group checkbox
144
141
  $kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
145
- /// The horizontal margin of list item of checkbox.
146
- /// @group checkbox
147
- $kendo-checkbox-list-horizontal-item-margin-x: 32px !default;
148
142
 
149
143
 
150
144
  // Checkbox ripple
package/scss/coloreditor/_variables.scss CHANGED
@@ -18,9 +18,9 @@ $coloreditor-header-padding-y: $coloreditor-spacer !default;
18
18
  $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
19
19
  $coloreditor-header-actions-gap: map-get( $spacing, 2 ) !default;
20
20
 
21
- $coloreditor-preview-gap: 2px !default;
22
- $coloreditor-color-preview-width: 34px !default;
23
- $coloreditor-color-preview-height: 14px !default;
21
+ $coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
22
+ $coloreditor-color-preview-width: 32px !default;
23
+ $coloreditor-color-preview-height: 12px !default;
24
24
 
25
25
  $coloreditor-views-padding-y: $coloreditor-spacer !default;
26
26
  $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
package/scss/combobox/_variables.scss CHANGED
@@ -1,31 +1 @@
1
- // Comboboxes
2
- $combobox-select-padding-x: ($kendo-button-padding-y / 2) !default;
3
- $combobox-select-padding-y: $kendo-button-padding-y !default;
4
-
5
- $combobox-bg: $kendo-input-bg !default;
6
- $combobox-text: $kendo-input-text !default;
7
- $combobox-border: $kendo-input-border !default;
8
-
9
- $combobox-hovered-bg: $kendo-input-hover-bg !default;
10
- $combobox-hovered-text: $kendo-input-hover-text !default;
11
- $combobox-hovered-border: $kendo-input-hover-border !default;
12
-
13
- $combobox-focused-bg: $kendo-input-focus-bg !default;
14
- $combobox-focused-text: $kendo-input-focus-text !default;
15
- $combobox-focused-border: $kendo-input-focus-border !default;
16
- $combobox-focused-shadow: $kendo-input-focus-shadow !default;
17
-
18
- $combobox-select-bg: null !default;
19
- $combobox-select-text: $subtle-text !default;
20
- $combobox-select-border: null !default;
21
- $combobox-select-gradient: null !default;
22
-
23
- $combobox-select-hovered-bg: null !default;
24
- $combobox-select-hovered-text: $kendo-input-text !default;
25
- $combobox-select-hovered-border: null !default;
26
- $combobox-select-hovered-gradient: null !default;
27
-
28
- $combobox-select-pressed-bg: null !default;
29
- $combobox-select-pressed-text: null !default;
30
- $combobox-select-pressed-border: null !default;
31
- $combobox-select-pressed-gradient: null !default;
1
+ // Combobox
package/scss/fab/_theme.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  @include exports( "fab/theme/material" ) {
2
2
 
3
3
  // Normal state
4
- @each $name, $color in $fab-theme-colors {
5
- .k-fab-#{$name} {
6
- @include box-shadow($fab-shadow);
4
+ @each $name, $color in $kendo-fab-theme-colors {
5
+ .k-fab-solid-#{$name} {
6
+ @include box-shadow($kendo-fab-shadow);
7
7
  border-color: $color;
8
8
  color: contrast-wcag( $color );
9
9
  background-color: $color;
@@ -11,41 +11,39 @@
11
11
  }
12
12
 
13
13
  // Hover state
14
- @each $name, $color in $fab-theme-colors {
15
- .k-state-hover.k-fab-#{$name},
16
- .k-state-hovered.k-fab-#{$name},
17
- .k-fab-#{$name}:hover {
14
+ @each $name, $color in $kendo-fab-theme-colors {
15
+ .k-hover.k-fab-solid-#{$name},
16
+ .k-fab-solid-#{$name}:hover {
18
17
  border-color: true-mix( #ffffff, $color, 8%);
19
18
  background-color: true-mix( #ffffff, $color, 8%);
20
19
  }
21
20
  }
22
21
 
23
22
  // Focus state
24
- @each $name, $color in $fab-theme-colors {
25
- .k-state-focus.k-fab-#{$name},
26
- .k-state-focused.k-fab-#{$name},
27
- .k-fab-#{$name}:focus {
23
+ @each $name, $color in $kendo-fab-theme-colors {
24
+ .k-focus.k-fab-solid-#{$name},
25
+ .k-fab-solid-#{$name}:focus {
28
26
  border-color: true-mix( #ffffff, $color, 12%);
29
27
  background-color: true-mix( #ffffff, $color, 12%);
30
28
  }
31
29
  }
32
30
 
33
31
  // Active state
34
- @each $name, $color in $fab-theme-colors {
35
- .k-state-active.k-fab-#{$name},
36
- .k-state-selected.k-fab-#{$name},
37
- .k-fab-#{$name}:active {
32
+ @each $name, $color in $kendo-fab-theme-colors {
33
+ .k-active.k-fab-solid-#{$name},
34
+ .k-selected.k-fab-solid-#{$name},
35
+ .k-fab-solid-#{$name}:active {
38
36
  border-color: true-mix( #ffffff, $color, 16%);
39
37
  background-color: true-mix( #ffffff, $color, 16%);
40
- box-shadow: $fab-active-shadow;
38
+ box-shadow: $kendo-fab-active-shadow;
41
39
  }
42
40
  }
43
41
 
44
42
  // Disabled state
45
- @each $name, $color in $fab-theme-colors {
46
- .k-state-disabled.k-fab-#{$name},
47
- .k-fab-#{$name}:disabled {
48
- @include box-shadow($fab-disabled-shadow);
43
+ @each $name, $color in $kendo-fab-theme-colors {
44
+ .k-disabled.k-fab-solid-#{$name},
45
+ .k-fab-solid-#{$name}:disabled {
46
+ @include box-shadow($kendo-fab-disabled-shadow);
49
47
  border-color: try-tint( try-shade( $body-bg, 12% ), 5);
50
48
  background-color: try-tint( try-shade( $body-bg, 12% ), 5);
51
49
  color: tint( $disabled-text, 4);
@@ -56,57 +54,55 @@
56
54
  // Items
57
55
  .k-fab-item-text {
58
56
  @include fill(
59
- $fab-item-text,
60
- $fab-item-bg,
61
- $fab-item-border
57
+ $kendo-fab-item-text,
58
+ $kendo-fab-item-bg,
59
+ $kendo-fab-item-border
62
60
  );
63
- @include box-shadow($fab-item-shadow);
61
+ @include box-shadow($kendo-fab-item-shadow);
64
62
  }
65
63
  .k-fab-item-icon {
66
64
  @include fill(
67
- $fab-item-icon-text,
68
- $fab-item-icon-bg,
69
- $fab-item-icon-border
65
+ $kendo-fab-item-icon-text,
66
+ $kendo-fab-item-icon-bg,
67
+ $kendo-fab-item-icon-border
70
68
  );
71
- @include box-shadow($fab-item-shadow);
69
+ @include box-shadow($kendo-fab-item-shadow);
72
70
  }
73
71
 
74
72
  // Hover state
75
- .k-fab-item.k-state-hover .k-fab-item-icon,
76
- .k-fab-item.k-state-hovered .k-fab-item-icon,
73
+ .k-fab-item.k-hover .k-fab-item-icon,
77
74
  .k-fab-item:hover .k-fab-item-icon {
78
- border-color: true-mix( #000000, $fab-item-icon-border, 8%);
79
- background-color: true-mix( #000000, $fab-item-icon-bg, 8%);
80
- color: true-mix( #000000, $fab-item-icon-text, 8%);
75
+ border-color: true-mix( #000000, $kendo-fab-item-icon-border, 8%);
76
+ background-color: true-mix( #000000, $kendo-fab-item-icon-bg, 8%);
77
+ color: true-mix( #000000, $kendo-fab-item-icon-text, 8%);
81
78
  }
82
79
 
83
80
  // Focus state
84
81
  .k-fab-item:focus .k-fab-item-icon,
85
- .k-fab-item.k-state-focus .k-fab-item-icon,
86
- .k-fab-item.k-state-focused .k-fab-item-icon {
87
- border-color: true-mix( #000000, $fab-item-icon-border, 12%);
88
- background-color: true-mix( #000000, $fab-item-icon-bg, 12%);
89
- color: true-mix( #000000, $fab-item-icon-text, 12%);
82
+ .k-fab-item.k-focus .k-fab-item-icon {
83
+ border-color: true-mix( #000000, $kendo-fab-item-icon-border, 12%);
84
+ background-color: true-mix( #000000, $kendo-fab-item-icon-bg, 12%);
85
+ color: true-mix( #000000, $kendo-fab-item-icon-text, 12%);
90
86
  }
91
87
 
92
88
  // Active state
93
- .k-fab-item.k-state-active .k-fab-item-icon,
89
+ .k-fab-item.k-active .k-fab-item-icon,
94
90
  .k-fab-item:active .k-fab-item-icon {
95
- @include box-shadow($fab-item-active-shadow);
96
- border-color: true-mix( #ffffff, $fab-item-icon-border, 12%);
97
- background-color: true-mix( #ffffff, $fab-item-icon-bg, 12%);
91
+ @include box-shadow($kendo-fab-item-active-shadow);
92
+ border-color: true-mix( #ffffff, $kendo-fab-item-icon-border, 12%);
93
+ background-color: true-mix( #ffffff, $kendo-fab-item-icon-bg, 12%);
98
94
  }
99
95
 
100
96
  // Disabled state
101
- .k-fab-item.k-state-disabled,
97
+ .k-fab-item.k-disabled,
102
98
  .k-fab-item:disabled {
103
99
  opacity: 1;
104
100
 
105
101
  .k-fab-item-text,
106
102
  .k-fab-item-icon {
107
- @include box-shadow($fab-item-disabled-shadow);
108
- background-color: try-tint( $fab-item-bg, 8 );
109
- color: try-tint( $fab-item-text, 8 );
103
+ @include box-shadow($kendo-fab-item-disabled-shadow);
104
+ background-color: try-tint( $kendo-fab-item-bg, 8 );
105
+ color: try-tint( $kendo-fab-item-text, 8 );
110
106
  }
111
107
  }
112
108
 
package/scss/fab/_variables.scss CHANGED
@@ -1,75 +1,131 @@
1
1
  // Floating Action Button
2
- $fab-padding-x: $padding-x !default;
3
- $fab-padding-y: $fab-padding-x !default;
4
- $fab-border-width: 0px !default;
5
- $fab-border-radius: $border-radius !default;
6
- $fab-font-family: $font-family !default;
7
- $fab-font-size: $font-size !default;
8
- $fab-line-height: (20 / 14) !default;
9
2
 
10
- $fab-padding-x-sm: ( $fab-padding-x / 2 ) !default;
11
- $fab-padding-y-sm: ( $fab-padding-y / 2 ) !default;
12
-
13
- $fab-padding-x-md: $fab-padding-x !default;
14
- $fab-padding-y-md: $fab-padding-y !default;
15
-
16
- $fab-padding-x-lg: ( $fab-padding-x * 1.5 ) !default;
17
- $fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;
18
-
19
- $fab-icon-width: 20px !default;
20
- $fab-icon-height: $fab-icon-width !default;
21
- $fab-icon-spacing: map-get( $spacing, 1 ) * 1.5 !default;
22
-
23
- $fab-items-padding-x: 0px !default;
24
- $fab-items-padding-y: map-get( $spacing, 4 ) !default;
25
-
26
- $fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
27
- $fab-item-text-padding-y: $fab-item-text-padding-x !default;
28
- $fab-item-text-border-width: 1px !default;
29
- $fab-item-text-border-radius: 2px !default;
30
- $fab-item-text-font-size: $font-size-xs !default;
31
- $fab-item-text-line-height: 1.2 !default;
32
-
33
- $fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
34
- $fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
35
- $fab-item-icon-border-width: 0 !default;
36
- $fab-item-icon-border-radius: 50% !default;
37
- $fab-item-icon-width: 20px !default;
38
- $fab-item-icon-height: $fab-item-icon-width !default;
39
-
40
- $fab-sizes: (
41
- sm: map-get( $spacing, 4 ),
42
- md: map-get( $spacing, 8 ),
43
- lg: map-get( $spacing, 16 )
44
- ) !default;
45
-
46
- $fab-theme-colors: $theme-colors !default;
47
-
48
- $fab-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12) !default;
49
- $fab-disabled-shadow: 0px 3px 5px -1px try-tint(rgba(0, 0, 0, .2), .5), 0px 6px 10px try-tint(rgba(0, 0, 0, .14), .5), 0px 1px 18px try-tint(rgba(0, 0, 0, .12), .5) !default;
50
- $fab-active-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12) !default;
51
-
52
- $fab-item-text: $component-text !default;
53
- $fab-item-bg: $component-bg !default;
54
- $fab-item-border: $component-border !default;
55
-
56
- $fab-item-icon-text: $kendo-button-text !default;
57
- $fab-item-icon-bg: $kendo-button-bg !default;
58
- $fab-item-icon-border: $kendo-button-border !default;
59
-
60
- $fab-item-shadow: $fab-shadow !default;
61
- $fab-item-disabled-shadow: $fab-disabled-shadow !default;
62
- $fab-item-active-shadow: $fab-active-shadow !default;
63
- $fab-item-disabled-focus-shadow: 0 1px 10px rgba(#000000, .12), 0 4px 5px rgba(#000000, .12), 0 2px 4px rgba(#000000, .08) !default;
64
-
65
- $fab-border-width-sm: $fab-border-width !default;
66
- $fab-line-height-sm: $fab-line-height !default;
67
- $fab-size-sm: calc( #{$fab-line-height-sm * 1em} + #{$fab-padding-y-sm * 2} + #{$fab-border-width-sm * 2} ) !default;
68
-
69
- $fab-border-width-md: $fab-border-width !default;
70
- $fab-line-height-md: $fab-line-height !default;
71
- $fab-size-md: calc( #{$fab-line-height-md * 1em} + #{$fab-padding-y-md * 2} + #{$fab-border-width-md * 2} ) !default;
72
-
73
- $fab-border-width-lg: $fab-border-width !default;
74
- $fab-line-height-lg: $fab-line-height !default;
75
- $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{$fab-border-width-lg * 2} ) !default;
3
+ /// Width of the border around the FAB.
4
+ /// @group floating-action-button
5
+ $kendo-fab-border-width: 0px !default;
6
+ /// Border radius of the FAB.
7
+ /// @group floating-action-button
8
+ $kendo-fab-border-radius: $border-radius !default;
9
+
10
+ /// Font family of the FAB.
11
+ /// @group floating-action-button
12
+ $kendo-fab-font-family: $font-family !default;
13
+ /// Font size of the FAB.
14
+ /// @group floating-action-button
15
+ $kendo-fab-font-size: $font-size !default;
16
+ /// Line height of the FAB.
17
+ /// @group floating-action-button
18
+ $kendo-fab-line-height: (20 / 14) !default;
19
+
20
+ /// Horizontal padding of the FAB.
21
+ /// @group floating-action-button
22
+ $kendo-fab-padding-x: $padding-x !default;
23
+ $kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
24
+ $kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
25
+ $kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
26
+
27
+ /// Vertical padding of the FAB.
28
+ /// @group floating-action-button
29
+ $kendo-fab-padding-y: $kendo-fab-padding-x !default;
30
+ $kendo-fab-padding-y-sm: ( $kendo-fab-padding-y / 2 ) !default;
31
+ $kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
32
+ $kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
33
+
34
+ /// FAB icon width.
35
+ /// @group floating-action-button
36
+ $kendo-fab-icon-width: 20px !default;
37
+ /// FAB icon height.
38
+ /// @group floating-action-button
39
+ $kendo-fab-icon-height: $kendo-fab-icon-width !default;
40
+ /// FAB icon spacing.
41
+ /// @group floating-action-button
42
+ $kendo-fab-icon-spacing: map-get( $spacing, 1 ) * 1.5 !default;
43
+
44
+ /// FAB items horizontal padding.
45
+ /// @group floating-action-button
46
+ $kendo-fab-items-padding-x: 0px !default;
47
+ /// FAB items vertical padding.
48
+ /// @group floating-action-button
49
+ $kendo-fab-items-padding-y: map-get( $spacing, 4 ) !default;
50
+
51
+ /// FAB item text horizontal padding.
52
+ /// @group floating-action-button
53
+ $kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
54
+ /// FAB item text vertical padding.
55
+ /// @group floating-action-button
56
+ $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
57
+ /// Width of the FAB item text border.
58
+ /// @group floating-action-button
59
+ $kendo-fab-item-text-border-width: 1px !default;
60
+ /// Border radius of the FAB item text.
61
+ /// @group floating-action-button
62
+ $kendo-fab-item-text-border-radius: 2px !default;
63
+ /// Font size of the FAB item text.
64
+ /// @group floating-action-button
65
+ $kendo-fab-item-text-font-size: $font-size-xs !default;
66
+ /// Line height of the FAB item text.
67
+ /// @group floating-action-button
68
+ $kendo-fab-item-text-line-height: 1.2 !default;
69
+
70
+ /// FAB item icon horizontal padding.
71
+ /// @group floating-action-button
72
+ $kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
73
+ /// FAB item icon vertical padding.
74
+ /// @group floating-action-button
75
+ $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
76
+ /// Width of the FAB item icon border.
77
+ /// @group floating-action-button
78
+ $kendo-fab-item-icon-border-width: 0 !default;
79
+ /// Border radius of the FAB item icon.
80
+ /// @group floating-action-button
81
+ $kendo-fab-item-icon-border-radius: 50% !default;
82
+ /// Width of the FAB item icon.
83
+ /// @group floating-action-button
84
+ $kendo-fab-item-icon-width: 20px !default;
85
+ /// Height of the FAB item icon.
86
+ /// @group floating-action-button
87
+ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
88
+
89
+ /// Theme colors map for the FAB.
90
+ /// @group floating-action-button
91
+ $kendo-fab-theme-colors: $theme-colors !default;
92
+
93
+ /// The base shadow of the FAB.
94
+ /// @group floating-action-button
95
+ $kendo-fab-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12) !default;
96
+ /// The disabled shadow of the FAB.
97
+ /// @group floating-action-button
98
+ $kendo-fab-disabled-shadow: 0px 3px 5px -1px try-tint(rgba(0, 0, 0, .2), .5), 0px 6px 10px try-tint(rgba(0, 0, 0, .14), .5), 0px 1px 18px try-tint(rgba(0, 0, 0, .12), .5) !default;
99
+ /// The active shadow of the FAB.
100
+ /// @group floating-action-button
101
+ $kendo-fab-active-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12) !default;
102
+
103
+ /// The base text color of the FAB item.
104
+ /// @group floating-action-button
105
+ $kendo-fab-item-text: $component-text !default;
106
+ /// The base background color of the FAB item.
107
+ /// @group floating-action-button
108
+ $kendo-fab-item-bg: $component-bg !default;
109
+ /// The base border color of the FAB item.
110
+ /// @group floating-action-button
111
+ $kendo-fab-item-border: $component-border !default;
112
+
113
+ /// The base text color of the FAB item icon.
114
+ /// @group floating-action-button
115
+ $kendo-fab-item-icon-text: $kendo-button-text !default;
116
+ /// The base background color of the FAB item icon.
117
+ /// @group floating-action-button
118
+ $kendo-fab-item-icon-bg: $kendo-button-bg !default;
119
+ /// The base border color of the FAB item icon.
120
+ /// @group floating-action-button
121
+ $kendo-fab-item-icon-border: $kendo-button-border !default;
122
+
123
+ /// The base shadow of the FAB item.
124
+ /// @group floating-action-button
125
+ $kendo-fab-item-shadow: $kendo-fab-shadow !default;
126
+ /// The disabled shadow of the FAB item.
127
+ /// @group floating-action-button
128
+ $kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
129
+ /// The active shadow of the FAB item.
130
+ /// @group floating-action-button
131
+ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
package/scss/fab/index.md ADDED
File without changes
package/scss/filter/_variables.scss CHANGED
@@ -5,7 +5,7 @@ $filter-padding-y: $filter-padding-x !default;
5
5
  $filter-bottom-margin: 2.1em !default;
6
6
  $filter-line-size: 1px !default;
7
7
 
8
- $filter-operator-dropdown-width: 19em !default;
8
+ $filter-operator-dropdown-width: 15em !default;
9
9
 
10
10
  $filter-preview-field-text: $primary !default;
11
11
  $filter-preview-operator-text: $subtle-text !default;
package/scss/grid/_layout.scss CHANGED
@@ -16,9 +16,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
16
16
  @import "~@progress/kendo-theme-default/scss/grid/_layout.scss";
17
17
 
18
18
  @include exports ("grid/layout/material") {
19
- $text-field-border-width: 2px;
20
- $text-field-radius: $text-field-border-width + 1px;
21
- $text-field-padding: (2 * $grid-cell-padding-x / 3);
22
19
 
23
20
  .k-grid {
24
21
  .k-checkbox-label,
package/scss/grid/_variables.scss CHANGED
@@ -133,21 +133,21 @@ $grid-sticky-selected-alt-bg: $grid-sticky-selected-bg !default;
133
133
  $grid-sticky-hovered-bg: try-shade($grid-bg, 7%) !default;
134
134
  $grid-sticky-selected-hovered-bg: try-shade($grid-sticky-selected-bg, .87) !default;
135
135
 
136
- $grid-filter-menu-width: 250px !default;
136
+ $grid-column-menu-width: 250px !default;
137
137
 
138
138
  $grid-filter-menu-check-all-border-bottom-width: 0 !default;
139
139
 
140
140
  $grid-filter-menu-item-spacing-x: map-get( $spacing, 4 ) !default;
141
141
  $grid-filter-menu-item-spacing-y: map-get( $spacing, 2 ) !default;
142
142
 
143
- $grid-column-menu-popup-padding-x: 0 !default;
144
- $grid-column-menu-popup-padding-y: $padding-y-lg !default;
143
+ $grid-column-menu-popup-padding-x: null !default;
144
+ $grid-column-menu-popup-padding-y: null !default;
145
145
 
146
- $grid-column-menu-item-padding-x: $padding-x !default;
147
- $grid-column-menu-item-padding-y: $padding-y-lg !default;
146
+ $grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x-md !default;
147
+ $grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y-md !default;
148
148
 
149
- $grid-column-menu-list-item-padding-x: $padding-x !default;
150
- $grid-column-menu-list-item-padding-y: $padding-y-sm !default;
149
+ $grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
150
+ $grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
151
151
 
152
152
  $grid-column-menu-items-wrap-padding-x: 0 !default;
153
153
  $grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;
package/scss/imageeditor/_variables.scss CHANGED
@@ -13,6 +13,7 @@ $imageeditor-content-border-width: 1px !default;
13
13
 
14
14
  $imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
15
15
  $imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
16
+ $imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
16
17
 
17
18
  $imageeditor-crop-border-width: 1px !default;
18
19
  $imageeditor-crop-border-style: dashed !default;
package/scss/index.scss CHANGED
@@ -21,6 +21,7 @@
21
21
  @import "popup/_index.scss";
22
22
  @import "ripple/_index.scss";
23
23
  @import "table/_index.scss";
24
+ @import "virtual-scroller/_index.scss";
24
25
 
25
26
 
26
27
  // Indicators
package/scss/input/_variables.scss CHANGED
@@ -8,23 +8,23 @@ $kendo-input-border-radius: null !default;
8
8
  $kendo-input-padding-x: map-get( $spacing, 4 ) !default;
9
9
  $kendo-input-padding-y: map-get( $spacing, 2 ) !default;
10
10
  $kendo-input-font-family: $font-family !default;
11
- $kendo-input-font-size: $font-size !default;
12
- $kendo-input-line-height: (20 / 14) !default;
11
+ $kendo-input-font-size: $font-size-lg !default;
12
+ $kendo-input-line-height: 1.25 !default;
13
13
 
14
14
  $kendo-input-padding-x-sm: ($kendo-input-padding-x / 2) !default;
15
15
  $kendo-input-padding-y-sm: ($kendo-input-padding-y / 2) !default;
16
- $kendo-input-font-size-sm: $font-size !default;
17
- $kendo-input-line-height-sm: (20 / 14) !default;
16
+ $kendo-input-font-size-sm: $font-size-lg !default;
17
+ $kendo-input-line-height-sm: 1.25 !default;
18
18
 
19
19
  $kendo-input-padding-x-md: $kendo-input-padding-x !default;
20
20
  $kendo-input-padding-y-md: $kendo-input-padding-y !default;
21
- $kendo-input-font-size-md: $font-size !default;
22
- $kendo-input-line-height-md: (20 / 14) !default;
21
+ $kendo-input-font-size-md: $font-size-lg !default;
22
+ $kendo-input-line-height-md: 1.25 !default;
23
23
 
24
24
  $kendo-input-padding-x-lg: ($kendo-input-padding-x * 1.5) !default;
25
25
  $kendo-input-padding-y-lg: ($kendo-input-padding-y * 1.5) !default;
26
- $kendo-input-font-size-lg: $font-size !default;
27
- $kendo-input-line-height-lg: (20 / 14) !default;
26
+ $kendo-input-font-size-lg: $font-size-lg !default;
27
+ $kendo-input-line-height-lg: 1.25 !default;
28
28
 
29
29
  $kendo-input-sizes: (
30
30
  sm: (
package/scss/list/_index.scss CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  // Dependencies
5
5
  @import "../common/_index.scss";
6
+ @import "../checkbox/_index.scss";
6
7
 
7
8
 
8
9
  // Component
package/scss/listbox/_variables.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // Listbox
2
2
  $listbox-margin: 12px !default;
3
3
  $listbox-button-margin: 8px !default;
4
- $listbox-width: 12.4em !default;
4
+ $listbox-width: 10em !default;
5
5
  $listbox-default-height: 200px !default;
6
6
 
7
7
  $listbox-border-width: 1px !default;
package/scss/menu/_variables.scss CHANGED
@@ -33,7 +33,7 @@ $menu-item-expanded-gradient: null !default;
33
33
 
34
34
  $menu-item-focus-shadow: null !default;
35
35
 
36
- $menu-separator-spacing: 0px !default;
36
+ $menu-separator-spacing: map-get( $spacing, 1 ) !default;
37
37
 
38
38
  $menu-scroll-button-bg: $component-bg !default;
39
39
  $menu-scroll-button-text: $subtle-text !default;
@@ -114,6 +114,18 @@ $kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-
114
114
  $kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$icon-size} ) !default;
115
115
  $kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$icon-size} ) !default;
116
116
 
117
+ /// The start margin of the menu item expand icon.
118
+ /// @group menu-popup-item
119
+ $kendo-menu-popup-item-icon-margin-start-sm: $kendo-menu-popup-item-padding-x-sm !default;
120
+ $kendo-menu-popup-item-icon-margin-start: $kendo-menu-popup-item-padding-x-md !default;
121
+ $kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg !default;
122
+
123
+ /// The end margin of the menu item expand icon.
124
+ /// @group menu-popup-item
125
+ $kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) ) !default;
126
+ $kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{$kendo-menu-popup-item-padding-x-md / 2}) ) !default;
127
+ $kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{$kendo-menu-popup-item-padding-x-lg / 2}) ) !default;
128
+
117
129
  /// The spacing between the menu items in popup.
118
130
  /// @group menu-popup-item
119
131
  $kendo-menu-popup-item-spacing: 0px !default;
package/scss/orgchart/_variables.scss CHANGED
@@ -40,10 +40,10 @@ $orgchart-card-shadow: none !default;
40
40
  $orgchart-card-focus-shadow: $orgchart-node-group-focus-shadow !default;
41
41
 
42
42
  $orgchart-card-title-margin-bottom: 0px !default;
43
- $orgchart-card-title-font-size: $font-size-xl !default;
43
+ $orgchart-card-title-font-size: null !default;
44
44
 
45
45
  $orgchart-card-subtitle-margin-bottom: 0px !default;
46
- $orgchart-card-subtitle-font-size: $font-size-md !default;
46
+ $orgchart-card-subtitle-font-size: null !default;
47
47
 
48
48
  $orgchart-card-body-border-width: 2px 0 0 !default;
49
49
  $orgchart-card-body-border-color: transparent !default;
package/scss/pager/_variables.scss CHANGED
@@ -62,5 +62,5 @@ $pager-number-focus-opacity: .12 !default;
62
62
  $pager-number-focus-bg: rgba($pager-number-text, $pager-number-focus-opacity) !default;
63
63
  $pager-number-focus-shadow: null !default;
64
64
 
65
- $pager-input-width: 3em !default;
65
+ $pager-input-width: 5em !default;
66
66
  $pager-dropdown-width: 5em !default;