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

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.
@@ -0,0 +1,8 @@
1
+ $series-a: #3f51b5;
2
+ $series-b: #2196f3;
3
+ $series-c: #43a047;
4
+ $series-d: #ffc107;
5
+ $series-e: #ff5722;
6
+ $series-f: #e91e63;
7
+
8
+ @import "all.scss";
@@ -0,0 +1,51 @@
1
+ {
2
+ "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
3
+ "name": "Material Dataviz v4",
4
+ "product": "kendo",
5
+ "base": "@progress/kendo-theme-material",
6
+ "previewColors": [
7
+ "#3f51b5",
8
+ "#2196f3",
9
+ "#43a047",
10
+ "#ffc107",
11
+ "#ff5722"
12
+ ],
13
+ "components": [],
14
+ "groups": [
15
+ {
16
+ "name": "Dataviz",
17
+ "variables": {
18
+ "series-a": {
19
+ "name": "Series A",
20
+ "type": "color",
21
+ "value": "#3f51b5"
22
+ },
23
+ "series-b": {
24
+ "name": "Series B",
25
+ "type": "color",
26
+ "value": "#2196f3"
27
+ },
28
+ "series-c": {
29
+ "name": "Series C",
30
+ "type": "color",
31
+ "value": "#43a047"
32
+ },
33
+ "series-d": {
34
+ "name": "Series D",
35
+ "type": "color",
36
+ "value": "#ffc107"
37
+ },
38
+ "series-e": {
39
+ "name": "Series E",
40
+ "type": "color",
41
+ "value": "#ff5722"
42
+ },
43
+ "series-f": {
44
+ "name": "Series F",
45
+ "type": "color",
46
+ "value": "#e91e63"
47
+ }
48
+ }
49
+ }
50
+ ]
51
+ }
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.3",
4
+ "version": "5.0.0-beta.4",
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.3"
53
+ "@progress/kendo-theme-default": "^5.0.0-beta.4"
54
54
  },
55
- "gitHead": "a508e10c60c1c14b569a908ef7f8584cf449a421"
55
+ "gitHead": "1e906bdc564c2df671a6c1552c81dd56bc08d1c4"
56
56
  }
@@ -2,7 +2,7 @@
2
2
  $appbar-margin-y: null !default;
3
3
  $appbar-margin-x: null !default;
4
4
  $appbar-padding-y: map-get( $spacing, 2 ) !default;
5
- $appbar-padding-x: map-get( $spacing, 6 ) !default;
5
+ $appbar-padding-x: map-get( $spacing, 2 ) !default;
6
6
  $appbar-border-width: 0px !default;
7
7
 
8
8
  $appbar-zindex: 1000 !default;
@@ -1,20 +1 @@
1
1
  // Autocomplete
2
- $autocomplete-bg: $kendo-input-bg !default;
3
- $autocomplete-text: $kendo-input-text !default;
4
- $autocomplete-border: $kendo-input-border !default;
5
- $autocomplete-shadow: $kendo-input-shadow !default;
6
-
7
- $autocomplete-hovered-bg: $kendo-input-hover-bg !default;
8
- $autocomplete-hovered-text: $kendo-input-hover-text !default;
9
- $autocomplete-hovered-border: $kendo-input-hover-border !default;
10
- $autocomplete-hovered-shadow: $kendo-input-hover-shadow !default;
11
-
12
- $autocomplete-focused-bg: $kendo-input-focus-bg !default;
13
- $autocomplete-focused-text: $kendo-input-focus-text !default;
14
- $autocomplete-focused-border: $kendo-input-focus-border !default;
15
- $autocomplete-focused-shadow: $kendo-input-focus-shadow !default;
16
-
17
- $autocomplete-disabled-bg: null !default;
18
- $autocomplete-disabled-text: null !default;
19
- $autocomplete-disabled-border: null !default;
20
- $autocomplete-disabled-shadow: null !default;
@@ -6,36 +6,48 @@
6
6
  .k-button {
7
7
  text-transform: uppercase;
8
8
  font-weight: 500;
9
- transition: $kendo-button-color-transition;
10
9
 
11
10
  &::before {
12
11
  display: block;
13
- transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
12
+ transition: opacity .4s cubic-bezier( .25, .8, .25, 1 );
14
13
  }
15
14
  &::after {
16
15
  display: none !important; // sass-lint:disable-line no-important
17
16
  }
17
+
18
+ &:disabled,
19
+ &[disabled],
20
+ &.k-disabled,
21
+ &.k-state-disabled {
22
+ opacity: 1;
23
+ filter: none;
24
+ }
18
25
  }
19
26
 
20
- // Outline Buttons
27
+ // Outline button
21
28
  .k-button-outline {
22
29
  background-color: transparent !important; // sass-lint:disable-line no-important
23
-
24
- &::after {
25
- display: block !important; // sass-lint:disable-line no-important
26
- box-shadow: inset 0 0 0 1px currentColor;
27
- opacity: 1;
28
- }
30
+ box-shadow: none !important; // sass-lint:disable-line no-important
29
31
  }
30
32
 
31
33
 
32
- // Link Buttons
34
+ // Link button
33
35
  .k-button-link {
34
- &::before {
35
- display: none !important; // sass-lint:disable-line no-important
36
+ &:hover,
37
+ &.k-hover,
38
+ &:active,
39
+ &.k-active,
40
+ &.k-selected {
41
+ &::before {
42
+ opacity: 0;
43
+ }
36
44
  }
37
- &::after {
38
- display: block !important; // sass-lint:disable-line no-important
45
+
46
+ &:focus,
47
+ &.k-focus {
48
+ &::before {
49
+ opacity: $kendo-flat-button-focus-opacity;
50
+ }
39
51
  }
40
52
  }
41
53
 
@@ -2,95 +2,47 @@
2
2
 
3
3
  @include exports( "button/theme/material" ) {
4
4
 
5
- // Solid Buttons
5
+ // Solid button
6
6
  @each $name, $color in $kendo-button-theme-colors {
7
7
  .k-button-solid-#{$name} {
8
- @if ($name != "base") {
9
- background-image: none;
10
- @include box-shadow( $kendo-button-shadow );
11
-
12
- // Hover state
13
- &:hover,
14
- &.k-hover {
15
- background-color: $color;
16
- border-color: $color;
17
- }
18
-
19
- // Focus state
20
- &:focus,
21
- &.k-focus {
22
- @include box-shadow( $kendo-button-shadow );
23
- }
24
-
25
- // Active state
26
- &:active,
27
- &.k-active {
28
- @include box-shadow( $kendo-button-active-shadow );
29
- background-color: $color;
30
- border-color: $color;
31
- }
32
-
33
- // Selected
34
- &.k-selected {
35
- background-color: $color;
36
- border-color: $color;
37
- }
38
- }
8
+ color: if( $name == "base", $kendo-button-text, contrast-wcag( $color ) );
9
+ background-color: if( $name == "base", $kendo-button-bg, $color );
39
10
  }
40
11
  }
41
12
 
42
13
 
43
- // Outline Buttons
14
+ // Outline button
44
15
  @each $name, $color in $kendo-button-theme-colors {
45
16
  .k-button-outline-#{$name} {
46
- @if ($name == "base") {
47
-
48
- // Hover state
49
- &:hover,
50
- &.k-hover {
51
- color: $kendo-button-text;
52
- }
53
-
54
- // Active state
55
- &:active,
56
- &.k-active {
57
- color: $kendo-button-text;
58
- }
59
-
60
- // Selected state
61
- &.k-selected {
62
- color: $kendo-button-text;
63
- }
64
- } @else {
65
- // Hover state
66
- &:hover,
67
- &.k-hover {
68
- color: $color;
69
- }
70
-
71
- // Active state
72
- &:active,
73
- &.k-active {
74
- color: $color;
75
- }
76
-
77
- // Selected state
78
- &.k-selected {
79
- color: $color;
80
- }
17
+ color: if( $name == "base", $kendo-button-text, $color );
18
+
19
+ &:hover,
20
+ &.k-hover,
21
+ &:focus,
22
+ &.k-focus,
23
+ &:active,
24
+ &.k-active
25
+ &.k-selected {
26
+ color: if( $name == "base", $kendo-button-text, $color );
27
+ }
28
+
29
+ // Disabled state
30
+ &:disabled,
31
+ &.k-disabled {
32
+ color: $kendo-button-disabled-text;
81
33
  }
82
34
  }
83
35
  }
84
36
 
85
37
 
86
- // Link Buttons
38
+ // Link button
87
39
  @each $name, $color in $kendo-button-theme-colors {
88
40
  .k-button-link-#{$name} {
89
41
 
90
42
  // Disabled state
91
43
  &:disabled,
92
44
  &.k-disabled {
93
- background: none;
45
+ color: $kendo-button-disabled-text;
94
46
  }
95
47
  }
96
48
  }
@@ -100,29 +52,6 @@
100
52
  .k-menu-button {}
101
53
 
102
54
 
103
- // Button group
104
- .k-button-group {
105
-
106
- .k-button:focus,
107
- .k-button.k-focus,
108
- .k-button-outline:focus,
109
- .k-button-outline.k-focus {
110
- @include box-shadow( $kendo-button-group-focus-shadow );
111
- }
112
-
113
- }
114
-
115
-
116
- // Split button
117
- .k-split-button:focus,
118
- .k-split-button.k-focus {
119
- @include box-shadow( $kendo-button-focus-shadow );
120
- }
121
-
122
- }
123
-
124
-
125
- @include exports( "button/theme/material/legacy" ) {
126
55
  // Button group
127
56
  .k-button-group {
128
57
  @include box-shadow( $kendo-button-shadow );
@@ -131,46 +60,25 @@
131
60
  @include box-shadow( none );
132
61
  }
133
62
 
63
+ // Disabled state
134
64
  &:disabled,
65
+ &[disabled],
135
66
  &.k-disabled {
136
67
  @include box-shadow( none );
137
- opacity: 1;
138
68
  }
139
69
  }
140
70
 
141
71
 
142
72
  // Split button
143
- .k-split-button {
144
- @include box-shadow( $kendo-button-shadow );
145
-
146
- .k-button {
147
- @include box-shadow( none );
148
- }
149
-
150
- > .k-button:last-child,
151
- > .k-split-button-arrow {
152
- color: $subtle-text;
153
- }
154
-
155
- > .k-button:last-child:hover,
156
- > .k-split-button-arrow:hover {
157
- color: $kendo-button-text;
158
- }
159
-
160
- &:disabled,
161
- &.k-disabled {
162
- @include box-shadow( none );
163
- opacity: 1;
164
- }
165
-
166
- &.k-flat {
167
- @include box-shadow( none );
168
- }
73
+ .k-split-button:focus,
74
+ .k-split-button.k-focus {
75
+ // @include box-shadow( $kendo-button-focus-shadow );
169
76
  }
170
77
 
171
78
 
172
79
  // Variant button group
173
80
  .k-button-group-flat,
81
+ .k-button-group-link,
174
82
  .k-button-group-outline {
175
83
  @include box-shadow( none );
176
84
  }
@@ -2,31 +2,25 @@
2
2
 
3
3
  /// Width of the border around the button.
4
4
  /// @group button
5
- $kendo-button-border-width: 0px !default;
5
+ $kendo-button-border-width: 1px !default;
6
6
 
7
7
  /// Border radius of the button.
8
8
  /// @group button
9
- $kendo-button-border-radius: ( map-get( $spacing, 1 ) / 2 ) !default;
10
- $kendo-button-border-radius-sm: ( map-get( $spacing, 1 ) / 4 ) !default;
11
- $kendo-button-border-radius-md: ( map-get( $spacing, 1 ) / 2 ) !default;
12
- $kendo-button-border-radius-lg: map-get( $spacing, 1 ) !default;
13
-
9
+ $kendo-button-border-radius: null !default;
14
10
 
15
11
  /// Horizontal padding of the button.
16
12
  /// @group button
17
13
  $kendo-button-padding-x: map-get( $spacing, 4 ) !default;
18
- $kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
14
+ $kendo-button-padding-x-sm: map-get( $spacing, 4 ) !default;
19
15
  $kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
20
- $kendo-button-padding-x-lg: map-get( $spacing, 6 ) !default;
21
-
16
+ $kendo-button-padding-x-lg: map-get( $spacing, 4 ) !default;
22
17
 
23
18
  /// Vertical padding of the button.
24
19
  /// @group button
25
- $kendo-button-padding-y: $kendo-button-padding-x / 2 !default;
26
- $kendo-button-padding-y-sm: $kendo-button-padding-x-sm / 2 !default;
27
- $kendo-button-padding-y-md: $kendo-button-padding-x-md / 2 !default;
28
- $kendo-button-padding-y-lg: $kendo-button-padding-x-lg / 2 !default;
29
-
20
+ $kendo-button-padding-y: map-get( $spacing, 2 ) !default;
21
+ $kendo-button-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
22
+ $kendo-button-padding-y-md: map-get( $spacing, 2 ) !default;
23
+ $kendo-button-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
30
24
 
31
25
  /// Font family of the button.
32
26
  /// @group button
@@ -34,17 +28,17 @@ $kendo-button-font-family: $font-family !default;
34
28
 
35
29
  /// Font sizes of the button.
36
30
  /// @group button
37
- $kendo-button-font-size: $font-size !default;
38
- $kendo-button-font-size-sm: $font-size-sm !default;
39
- $kendo-button-font-size-md: $font-size !default;
40
- $kendo-button-font-size-lg: $font-size-lg !default;
31
+ $kendo-button-font-size: $font-size-md !default;
32
+ $kendo-button-font-size-sm: $font-size-md !default;
33
+ $kendo-button-font-size-md: $font-size-md !default;
34
+ $kendo-button-font-size-lg: $font-size-md !default;
41
35
 
42
36
  /// Line heights used along with $font-size.
43
37
  /// @group button
44
- $kendo-button-line-height: (20 / 14) !default;
45
- $kendo-button-line-height-sm: (20 / 14) !default;
46
- $kendo-button-line-height-md: (20 / 14) !default;
47
- $kendo-button-line-height-lg: $line-height-lg !default;
38
+ $kendo-button-line-height: ( 20 / 14 ) !default;
39
+ $kendo-button-line-height-sm: ( 20 / 14 ) !default;
40
+ $kendo-button-line-height-md: ( 20 / 14 ) !default;
41
+ $kendo-button-line-height-lg: ( 20 / 14 ) !default;
48
42
 
49
43
  /// Calculated height of the button.
50
44
  /// @group button
@@ -54,9 +48,15 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
54
48
  /// @group button
55
49
  $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
56
50
 
51
+ $kendo-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
52
+ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
53
+
57
54
  /// Theme colors map for the button.
58
55
  /// @group button
59
- $kendo-button-theme-colors: map-merge((base: $base-bg), $theme-colors ) !default;
56
+ $kendo-button-theme-colors: map-merge(
57
+ $theme-colors,
58
+ ( "base": $base-bg )
59
+ ) !default;
60
60
 
61
61
  /// The base background of the button.
62
62
  /// @group button
@@ -146,7 +146,7 @@ $kendo-button-disabled-bg: try-shade( $body-bg, 12% ) !default;
146
146
  $kendo-button-disabled-text: $disabled-text !default;
147
147
  /// The base border color of disabled button.
148
148
  /// @group button
149
- $kendo-button-disabled-border: null !default;
149
+ $kendo-button-disabled-border: $kendo-button-disabled-bg !default;
150
150
  /// The base background gradient of disabled button.
151
151
  /// @group button
152
152
  $kendo-button-disabled-gradient: null !default;
@@ -154,6 +154,35 @@ $kendo-button-disabled-gradient: null !default;
154
154
  /// @group button
155
155
  $kendo-button-disabled-shadow: none !default;
156
156
 
157
+ // Solid button
158
+ $kendo-solid-button-gradient: null !default;
159
+ $kendo-solid-button-shade-function: "try-shade";
160
+ $kendo-solid-button-shade-text-amount: null !default;
161
+ $kendo-solid-button-shade-bg-amount: 0 !default;
162
+ $kendo-solid-button-shade-border-amount: 0 !default;
163
+ $kendo-solid-button-hover-shade-text-amount: null !default;
164
+ $kendo-solid-button-hover-shade-bg-amount: null !default;
165
+ $kendo-solid-button-hover-shade-border-amount: null !default;
166
+ $kendo-solid-button-active-shade-text-amount: null !default;
167
+ $kendo-solid-button-active-shade-bg-amount: null !default;
168
+ $kendo-solid-button-active-shade-border-amount: null !default;
169
+ $kendo-solid-button-shadow: null !default;
170
+ $kendo-solid-button-shadow-blur: null !default;
171
+ $kendo-solid-button-shadow-spread: null !default;
172
+ $kendo-solid-button-shadow-opacity: null !default;
173
+
174
+ // Outline button
175
+ $kendo-outline-button-shadow: null !default;
176
+ $kendo-outline-button-shadow-blur: null !default;
177
+ $kendo-outline-button-shadow-spread: null !default;
178
+ $kendo-outline-button-shadow-opacity: null !default;
179
+
180
+ // link button
181
+ $kendo-link-button-shadow: null !default;
182
+ $kendo-link-button-shadow-blur: null !default;
183
+ $kendo-link-button-shadow-spread: null !default;
184
+ $kendo-link-button-shadow-opacity: null !default;
185
+
157
186
  /// The overlay opacity of hovered flat button. Used to create background for the flat button.
158
187
  /// @group button
159
188
  $kendo-flat-button-hover-opacity: .08 !default;
@@ -167,10 +196,6 @@ $kendo-flat-button-active-opacity: .16 !default;
167
196
  /// @group button
168
197
  $kendo-flat-button-selected-opacity: .22 !default;
169
198
 
170
- /// The color transition of the button.
171
- /// @group button
172
- $kendo-button-color-transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1) !default;
173
-
174
- /// The base shadow of focused button group.
199
+ /// The transition of the button.
175
200
  /// @group button
176
- $kendo-button-group-focus-shadow: null !default;
201
+ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default;
@@ -70,8 +70,3 @@ $chat-quick-reply-border: $primary !default;
70
70
  $chat-quick-reply-hover-bg: $primary !default;
71
71
  $chat-quick-reply-hover-text: $primary-contrast !default;
72
72
  $chat-quick-reply-hover-border: $primary !default;
73
-
74
- $chat-message-box-bg: $component-bg !default;
75
- $chat-message-box-text: $kendo-input-text !default;
76
- $chat-message-box-border: inherit !default;
77
- $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
@@ -1,6 +1,6 @@
1
1
  @import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss";
2
2
 
3
- @include exports("checkbox/theme/material") {
3
+ @include exports( "checkbox/theme/material" ) {
4
4
 
5
5
  // Checkbox
6
6
  .k-checkbox-label {
@@ -11,13 +11,6 @@
11
11
  opacity: 1;
12
12
  filter: none;
13
13
  }
14
-
15
-
16
- // Ripple
17
- .k-ripple-blob {
18
- opacity: .2;
19
- background-color: $kendo-checkbox-checked-bg;
20
- }
21
-
22
14
  }
15
+
23
16
  }