@progress/kendo-theme-material 5.0.0-beta.0 → 5.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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.0",
4
+ "version": "5.0.0-beta.1",
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.0"
53
+ "@progress/kendo-theme-default": "^5.0.0-beta.1"
54
54
  },
55
- "gitHead": "cf3cf196b3134f227f04a272b4dc4a480b008a84"
55
+ "gitHead": "5f6c640b397e7dfb0481ea1eecd8fbce7abb967f"
56
56
  }
@@ -5,6 +5,7 @@
5
5
  @import "../common/_index.scss";
6
6
  @import "../list/_variables.scss";
7
7
 
8
+
8
9
  // Component
9
10
  @import "_variables.scss";
10
11
  @import "_layout.scss";
@@ -1,15 +1 @@
1
1
  @import "~@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss";
2
-
3
- @include exports("dropdowngrid/layout/material") {
4
-
5
- // TODO: Change to $line-height when Material line-height is changed.
6
- .k-grid-list > .k-outer-group-header {
7
- height: calc( #{$grid-header-padding-y * 2} + (#{$font-size} * (20 / 12)) );
8
- }
9
-
10
- .k-grid-list > .k-outer-group-header > strong {
11
- border-bottom-width: 1px;
12
- border-bottom-style: solid;
13
- }
14
-
15
- }
@@ -1,9 +1 @@
1
1
  @import "~@progress/kendo-theme-default/scss/dropdowngrid/_theme.scss";
2
-
3
- @include exports("dropdowngrid/theme/material") {
4
-
5
- .k-grid-list > .k-outer-group-header > strong {
6
- border-color: $grid-border;
7
- }
8
-
9
- }
@@ -3,7 +3,7 @@
3
3
 
4
4
  // Dependencies
5
5
  @import "../common/_index.scss";
6
- @import "../button/_variables.scss";
6
+ @import "../button/_index.scss";
7
7
 
8
8
 
9
9
  // Component
@@ -2,17 +2,36 @@
2
2
 
3
3
  @include exports("input/layout/material") {
4
4
 
5
- .k-input,
6
- .k-picker {
5
+ // Fill mode
6
+ .k-input-solid,
7
+ .k-picker-solid {
8
+ @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
7
9
  border-width: $kendo-input-border-width 0;
8
10
  border-top-color: transparent !important; // sass-lint:disable-line no-important
9
11
 
12
+ .k-input-button,
13
+ .k-input-spinner .k-spinner-increase,
14
+ .k-input-spinner .k-spinner-decrease {
15
+ background: none;
16
+ }
17
+ }
18
+
19
+ .k-input-flat,
20
+ .k-picker-flat {
21
+
22
+ .k-input-button,
23
+ .k-input-spinner .k-spinner-increase,
24
+ .k-input-spinner .k-spinner-decrease {
25
+ background: none;
26
+ }
27
+
10
28
  &:disabled,
11
29
  &.k-disabled {
12
30
  border-bottom-style: dashed;
13
31
  }
14
32
  }
15
33
 
34
+
16
35
  // Input ripple
17
36
  .k-floating-label-container {
18
37
  @include input-ripple();
@@ -5,11 +5,11 @@ $kendo-input-border-radius: null !default;
5
5
  $kendo-input-border-radius-sm: 0px !default;
6
6
  $kendo-input-border-radius-lg: 0px !default;
7
7
 
8
- $kendo-input-padding-x: 0px !default;
9
- $kendo-input-padding-y: 8px !default;
8
+ $kendo-input-padding-x: map-get( $spacing, 4 ) !default;
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-lg !default;
12
- $kendo-input-line-height: 1.125 !default;
11
+ $kendo-input-font-size: $font-size !default;
12
+ $kendo-input-line-height: (20 / 14) !default;
13
13
  $kendo-input-line-height-em: $kendo-input-line-height * 1em !default;
14
14
 
15
15
  $kendo-input-padding-x-sm: ($kendo-input-padding-x / 2) !default;
@@ -56,7 +56,7 @@ $kendo-input-sizes: (
56
56
  )
57
57
  ) !default;
58
58
 
59
- $kendo-input-bg: null !default;
59
+ $kendo-input-bg: try-shade( $component-bg, .5 ) !default;
60
60
  $kendo-input-text: $component-text !default;
61
61
  $kendo-input-border: $subtle-text !default;
62
62
  $kendo-input-shadow: null !default;
@@ -1,16 +1 @@
1
1
  @import "~@progress/kendo-theme-default/scss/list/_theme.scss";
2
-
3
- @include exports("list/theme/material") {
4
-
5
- .k-list .k-list-item,
6
- .k-list-optionlabel {
7
-
8
- // Focused state
9
- &:focus,
10
- &.k-focus {
11
- background: $kendo-list-item-hover-bg;
12
- }
13
-
14
- }
15
-
16
- }
@@ -1,81 +1,248 @@
1
1
  // List
2
2
 
3
- /// Horizontal padding of the list item.
3
+ /// Font size of the list component, if no size is set.
4
+ /// @group list
5
+ $kendo-list-font-size: null !default;
6
+ $kendo-list-font-size-sm: $font-size-sm !default;
7
+ $kendo-list-font-size-md: $font-size-md !default;
8
+ $kendo-list-font-size-lg: $font-size-md !default;
9
+
10
+ /// Line height of the list component, if no size is set.
11
+ /// @group list
12
+ $kendo-list-line-height: null !default;
13
+ $kendo-list-line-height-sm: 1.5 !default;
14
+ $kendo-list-line-height-md: 1.5 !default;
15
+ $kendo-list-line-height-lg: 1.5 !default;
16
+
17
+ /// Horizontal padding of list header, if no size is set.
18
+ /// @group list
19
+ $kendo-list-header-padding-x: null !default;
20
+ $kendo-list-header-padding-x-base: map-get( $spacing, 4 ) !default;
21
+ $kendo-list-header-padding-x-sm: ( $kendo-list-header-padding-x-base * .75 ) !default;
22
+ $kendo-list-header-padding-x-md: ( $kendo-list-header-padding-x-base * 1 ) !default;
23
+ $kendo-list-header-padding-x-lg: ( $kendo-list-header-padding-x-base * 1.25 ) !default;
24
+
25
+ /// Vertical padding of list header, if no size is set.
26
+ /// @group list
27
+ $kendo-list-header-padding-y: null !default;
28
+ $kendo-list-header-padding-y-base: map-get( $spacing, 1 ) !default;
29
+ $kendo-list-header-padding-y-sm: ( $kendo-list-header-padding-y-base * .75 ) !default;
30
+ $kendo-list-header-padding-y-md: ( $kendo-list-header-padding-y-base * 1 ) !default;
31
+ $kendo-list-header-padding-y-lg: ( $kendo-list-header-padding-y-base * 1.25 ) !default;
32
+
33
+ /// Border width of list header.
34
+ /// @group list
35
+ $kendo-list-header-border-width: 0 0 1px !default;
36
+
37
+ /// Font size of list header, if no size is set.
38
+ /// @group list
39
+ $kendo-list-header-font-size: null !default;
40
+ $kendo-list-header-font-size-sm: null !default;
41
+ $kendo-list-header-font-size-md: null !default;
42
+ $kendo-list-header-font-size-lg: null !default;
43
+
44
+ /// Line height of list header, if no size is set.
45
+ /// @group list
46
+ $kendo-list-header-line-height: null !default;
47
+ $kendo-list-header-line-height-sm: null !default;
48
+ $kendo-list-header-line-height-md: null !default;
49
+ $kendo-list-header-line-height-lg: null !default;
50
+
51
+ /// Font weight of list header.
52
+ /// @group list
53
+ $kendo-list-header-font-weight: null !default;
54
+
55
+ /// Horizontal padding of list items, when no size is set.
4
56
  /// @group list
5
57
  $kendo-list-item-padding-x: null !default;
6
- $kendo-list-item-padding-x-base: map-get( $spacing, 6 ) !default;
7
- $kendo-list-item-padding-x-sm: $kendo-list-item-padding-x-base * .75 !default;
8
- $kendo-list-item-padding-x-md: $kendo-list-item-padding-x-base * 1 !default;
9
- $kendo-list-item-padding-x-lg: $kendo-list-item-padding-x-base * 1.25 !default;
58
+ $kendo-list-item-padding-x-base: map-get( $spacing, 4 ) !default;
59
+ $kendo-list-item-padding-x-sm: ( $kendo-list-item-padding-x-base * .75 ) !default;
60
+ $kendo-list-item-padding-x-md: ( $kendo-list-item-padding-x-base * 1 ) !default;
61
+ $kendo-list-item-padding-x-lg: ( $kendo-list-item-padding-x-base * 1.25 ) !default;
10
62
 
11
- /// Vertical padding of the list item.
63
+ /// Vertical padding of list items, when no size is set.
12
64
  /// @group list
13
65
  $kendo-list-item-padding-y: null !default;
14
- $kendo-list-item-padding-y-base: map-get( $spacing, thin ) !default;
15
- $kendo-list-item-padding-y-sm: $kendo-list-item-padding-y-base * .75 !default;
16
- $kendo-list-item-padding-y-md: $kendo-list-item-padding-y-base * 1 !default;
17
- $kendo-list-item-padding-y-lg: $kendo-list-item-padding-y-base * 1.25 !default;
66
+ $kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
67
+ $kendo-list-item-padding-y-sm: ( $kendo-list-item-padding-y-base * .75 ) !default;
68
+ $kendo-list-item-padding-y-md: ( $kendo-list-item-padding-y-base * 1 ) !default;
69
+ $kendo-list-item-padding-y-lg: ( $kendo-list-item-padding-y-base * 1.25 ) !default;
18
70
 
19
- /// Font sizes of the list item.
71
+ /// Font size of list items, if no size is set.
20
72
  /// @group list
21
73
  $kendo-list-item-font-size: null !default;
22
- $kendo-list-item-font-size-sm: $font-size-sm !default;
23
- $kendo-list-item-font-size-md: $font-size-md !default;
24
- $kendo-list-item-font-size-lg: $font-size-lg !default;
74
+ $kendo-list-item-font-size-sm: null !default;
75
+ $kendo-list-item-font-size-md: null !default;
76
+ $kendo-list-item-font-size-lg: null !default;
77
+
78
+ /// Line height of list items, if no size is set.
79
+ /// @group list
80
+ $kendo-list-item-line-height: null !default;
81
+ $kendo-list-item-line-height-sm: null !default;
82
+ $kendo-list-item-line-height-md: null !default;
83
+ $kendo-list-item-line-height-lg: null !default;
84
+
85
+ /// Horizontal padding of list group items, when no size is set.
86
+ /// @group list
87
+ $kendo-list-group-item-padding-x: null !default;
88
+ $kendo-list-group-item-padding-x-base: map-get( $spacing, 4 ) !default;
89
+ $kendo-list-group-item-padding-x-sm: ( $kendo-list-group-item-padding-x-base * .75 ) !default;
90
+ $kendo-list-group-item-padding-x-md: ( $kendo-list-group-item-padding-x-base * 1 ) !default;
91
+ $kendo-list-group-item-padding-x-lg: ( $kendo-list-group-item-padding-x-base * 1.25 ) !default;
92
+
93
+ /// Vertical padding of list group items, when no size is set.
94
+ /// @group list
95
+ $kendo-list-group-item-padding-y: null !default;
96
+ $kendo-list-group-item-padding-y-base: map-get( $spacing, 1 ) !default;
97
+ $kendo-list-group-item-padding-y-sm: ( $kendo-list-group-item-padding-y-base * .75 ) !default;
98
+ $kendo-list-group-item-padding-y-md: ( $kendo-list-group-item-padding-y-base * 1 ) !default;
99
+ $kendo-list-group-item-padding-y-lg: ( $kendo-list-group-item-padding-y-base * 1.25 ) !default;
100
+
101
+ /// Border width of list group items.
102
+ /// @group list
103
+ $kendo-list-group-item-border-width: 1px 0 0 !default;
104
+
105
+ /// Font size of list group items, if no size is set.
106
+ /// @group list
107
+ $kendo-list-group-item-font-size: null !default;
108
+ $kendo-list-group-item-font-size-sm: null !default;
109
+ $kendo-list-group-item-font-size-md: null !default;
110
+ $kendo-list-group-item-font-size-lg: null !default;
25
111
 
26
- /// The background of the list item.
112
+ /// Line height of list group items, if no size is set.
113
+ /// @group list
114
+ $kendo-list-group-item-line-height: null !default;
115
+ $kendo-list-group-item-line-height-sm: null !default;
116
+ $kendo-list-group-item-line-height-md: null !default;
117
+ $kendo-list-group-item-line-height-lg: null !default;
118
+
119
+ /// Font weight of list group item.
120
+ /// @group list
121
+ $kendo-list-group-item-font-weight: null !default;
122
+
123
+
124
+ // Kendo list sizes
125
+ $kendo-list-sizes: (
126
+ sm: (
127
+ font-size: $kendo-list-font-size-sm,
128
+ line-height: $kendo-list-line-height-sm,
129
+ header-padding-x: $kendo-list-header-padding-x-sm,
130
+ header-padding-y: $kendo-list-header-padding-y-sm,
131
+ header-font-size: null,
132
+ header-line-height: null,
133
+ item-padding-x: $kendo-list-item-padding-x-sm,
134
+ item-padding-y: $kendo-list-item-padding-y-sm,
135
+ item-font-size: null,
136
+ item-line-height: null,
137
+ group-item-padding-x: $kendo-list-group-item-padding-x-sm,
138
+ group-item-padding-y: $kendo-list-group-item-padding-y-sm,
139
+ group-item-font-size: null,
140
+ group-item-line-height: null
141
+ ),
142
+ md: (
143
+ font-size: $kendo-list-font-size-md,
144
+ line-height: $kendo-list-line-height-md,
145
+ header-padding-x: $kendo-list-header-padding-x-md,
146
+ header-padding-y: $kendo-list-header-padding-y-md,
147
+ header-font-size: null,
148
+ header-line-height: null,
149
+ item-padding-x: $kendo-list-item-padding-x-md,
150
+ item-padding-y: $kendo-list-item-padding-y-md,
151
+ item-font-size: null,
152
+ item-line-height: null,
153
+ group-item-padding-x: $kendo-list-group-item-padding-x-md,
154
+ group-item-padding-y: $kendo-list-group-item-padding-y-md,
155
+ group-item-font-size: null,
156
+ group-item-line-height: null
157
+ ),
158
+ lg: (
159
+ font-size: $kendo-list-font-size-lg,
160
+ line-height: $kendo-list-line-height-lg,
161
+ header-padding-x: $kendo-list-header-padding-x-lg,
162
+ header-padding-y: $kendo-list-header-padding-y-lg,
163
+ header-font-size: null,
164
+ header-line-height: null,
165
+ item-padding-x: $kendo-list-item-padding-x-lg,
166
+ item-padding-y: $kendo-list-item-padding-y-lg,
167
+ item-font-size: null,
168
+ item-line-height: null,
169
+ group-item-padding-x: $kendo-list-group-item-padding-x-lg,
170
+ group-item-padding-y: $kendo-list-group-item-padding-y-lg,
171
+ group-item-font-size: null,
172
+ group-item-line-height: null
173
+ )
174
+ ) !default;
175
+
176
+
177
+ /// Background color of the list component.
178
+ /// @group list
179
+ $kendo-list-bg: $component-bg !default;
180
+ /// Text color of the list component.
181
+ /// @group list
182
+ $kendo-list-text: $component-text !default;
183
+ /// Border color of the list component.
184
+ /// @group list
185
+ $kendo-list-border: $component-border !default;
186
+
187
+
188
+ /// Background color of list header.
189
+ /// @group list
190
+ $kendo-list-header-bg: null !default;
191
+ /// Text color of list header.
192
+ /// @group list
193
+ $kendo-list-header-text: null !default;
194
+ /// Border color of list header.
195
+ /// @group list
196
+ $kendo-list-header-border: inherit !default;
197
+ /// Box shadow of list header.
198
+ /// @group list
199
+ $kendo-list-header-shadow: null !default;
200
+
201
+
202
+ /// Background color of list items.
27
203
  /// @group list
28
204
  $kendo-list-item-bg: null !default;
29
- /// The text color of the list item.
205
+ /// Text color of list items.
30
206
  /// @group list
31
- $kendo-list-item-text: $component-text !default;
207
+ $kendo-list-item-text: null !default;
32
208
 
33
- /// The background of hovered list item.
209
+ /// Background color of hovered list items.
34
210
  /// @group list
35
211
  $kendo-list-item-hover-bg: $hovered-bg !default;
36
- /// The text color of hovered list item.
212
+ /// Text color of hovered list items.
37
213
  /// @group list
38
214
  $kendo-list-item-hover-text: $hovered-text !default;
39
215
 
40
- /// The background of selected list item.
216
+ /// Background color of focused list items.
41
217
  /// @group list
42
- $kendo-list-item-selected-bg: $component-bg !default;
43
- /// The text color of selected list item.
218
+ $kendo-list-item-focus-bg: $kendo-list-item-hover-bg !default;
219
+ /// Text color of focused list items.
44
220
  /// @group list
45
- $kendo-list-item-selected-text: $secondary !default;
46
-
47
- /// The base shadow of focused list item.
221
+ $kendo-list-item-focus-text: null !default;
222
+ /// Box shadow of focused list items.
48
223
  /// @group list
49
224
  $kendo-list-item-focus-shadow: null !default;
50
225
 
51
- /// The text color of the 'No Data' text.
226
+ /// Background color of selected list items.
52
227
  /// @group list
53
- $kendo-list-container-no-data-text: rgba( $body-text, .5 ) !default;
54
-
55
- /// Padding of the list group header.
228
+ $kendo-list-item-selected-bg: $component-bg !default;
229
+ /// Text color of selected list items.
56
230
  /// @group list
57
- $kendo-list-group-header-padding: null !default;
58
- $kendo-list-group-header-padding-sm: ( map-get( $spacing, 1 ) * 1 ) $kendo-list-item-padding-x-sm !default;
59
- $kendo-list-group-header-padding-md: ( map-get( $spacing, 1 ) * 1.5 ) $kendo-list-item-padding-x-md !default;
60
- $kendo-list-group-header-padding-lg: ( map-get( $spacing, 1 ) * 2 ) $kendo-list-item-padding-x-lg !default;
231
+ $kendo-list-item-selected-text: $secondary !default;
61
232
 
62
- /// Font sizes of the list group header.
233
+ /// Background color of list group items.
63
234
  /// @group list
64
- $kendo-list-group-header-font-size: null !default;
65
- $kendo-list-group-header-font-size-sm: $font-size-xs !default;
66
- $kendo-list-group-header-font-size-md: $font-size-sm !default;
67
- $kendo-list-group-header-font-size-lg: $font-size-md !default;
68
-
69
- /// The text color of the list group header.
235
+ $kendo-list-group-item-bg: null !default;
236
+ /// Text color of list group items.
70
237
  /// @group list
71
- $kendo-list-group-header-text: $subtle-text !default;
72
- /// The border color of the list group header.
238
+ $kendo-list-group-item-text: null !default;
239
+ /// The border color of list group items.
73
240
  /// @group list
74
- $kendo-list-group-header-border: $grouping-header-border !default;
75
- /// The base shadow of the list group header.
241
+ $kendo-list-group-item-border: inherit !default;
242
+ /// The base shadow of list group items.
76
243
  /// @group list
77
- $kendo-list-group-header-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
244
+ $kendo-list-group-item-shadow: null !default;
78
245
 
79
- /// Border width of the stuck list group header.
246
+ /// Text color of the 'No Data' text.
80
247
  /// @group list
81
- $kendo-list-stuck-group-header-border-width: 1px !default;
248
+ $kendo-list-no-data-text: $subtle-text !default;
@@ -7,6 +7,7 @@
7
7
  @import "../popup/_index.scss";
8
8
  @import "../list/_index.scss";
9
9
  @import "../icons/_index.scss";
10
+ @import "../list/_index.scss";
10
11
 
11
12
 
12
13
  // Component
@@ -48,17 +48,17 @@ $menu-scroll-button-hover-gradient: null !default;
48
48
 
49
49
  // Menu popup
50
50
 
51
- /// Width of the border around the menu popup.
52
- /// @group menu-popup
53
- $kendo-menu-popup-border-width: $popup-border-width !default;
54
-
55
51
  /// Horizontal padding of the menu popup.
56
52
  /// @group menu-popup
57
- $kendo-menu-popup-padding-x: $popup-padding-x !default;
53
+ $kendo-menu-popup-padding-x: null !default;
58
54
 
59
55
  /// Vertical padding of the menu popup.
60
56
  /// @group menu-popup
61
- $kendo-menu-popup-padding-y: $popup-padding-y !default;
57
+ $kendo-menu-popup-padding-y: null !default;
58
+
59
+ /// Width of the border around the menu popup.
60
+ /// @group menu-popup
61
+ $kendo-menu-popup-border-width: $popup-border-width !default;
62
62
 
63
63
  /// Font sizes of the menu popup.
64
64
  /// @group menu-popup
@@ -3,6 +3,7 @@
3
3
 
4
4
  // Dependencies
5
5
  @import "../common/_index.scss";
6
+ @import "../forms/_variables.scss";
6
7
  @import "../button/_index.scss";
7
8
  @import "../input/_index.scss";
8
9
  @import "../chip/_index.scss";
@@ -10,7 +11,6 @@
10
11
  @import "../popup/_index.scss";
11
12
  @import "../list/_index.scss";
12
13
  @import "../icons/_index.scss";
13
- @import "../forms/_variables.scss";
14
14
 
15
15
 
16
16
  // Component
@@ -3,7 +3,6 @@
3
3
 
4
4
  // Dependencies
5
5
  @import "../common/_index.scss";
6
- @import "../list/_index.scss";
7
6
 
8
7
 
9
8
  // Component
@@ -1,6 +1,6 @@
1
1
  // Popup
2
- $popup-padding-x: 0px !default;
3
- $popup-padding-y: 0px !default;
2
+ $popup-padding-x: null !default;
3
+ $popup-padding-y: null !default;
4
4
  $popup-border-width: 0px !default;
5
5
  $popup-border-radius: null !default;
6
6
 
@@ -1,23 +1 @@
1
1
  @import "~@progress/kendo-theme-default/scss/table/_layout.scss";
2
-
3
- @include exports("table/layout/material") {
4
- .k-table .k-table-body .k-table-group-body,
5
- .k-table .k-table-list .k-table-group-body {
6
- border-width: 0 0 1px;
7
- }
8
-
9
- .k-table .k-table-body .k-table-row:last-child .k-table-cell,
10
- .k-table .k-table-list .k-table-row:last-child .k-table-cell {
11
- border-width: 0 0 0 1px;
12
- }
13
-
14
- .k-rtl,
15
- [dir="rtl"] {
16
- &.k-table .k-table-body .k-table-row:last-child .k-table-cell,
17
- &.k-table .k-table-list .k-table-row:last-child .k-table-cell,
18
- .k-table .k-table-body .k-table-row:last-child .k-table-cell,
19
- .k-table .k-table-list .k-table-row:last-child .k-table-cell {
20
- border-width: 0 1px 0 0;
21
- }
22
- }
23
- }
@@ -1,9 +1 @@
1
1
  @import "~@progress/kendo-theme-default/scss/table/_theme.scss";
2
-
3
- @include exports("table/theme/material") {
4
- .k-table-body .k-table-group-body,
5
- .k-table-list .k-table-group-body,
6
- .k-table-footer {
7
- color: $kendo-table-body-grouping-text-color;
8
- }
9
- }