@progress/kendo-theme-default 4.41.3-dev.1 → 4.41.3-dev.2

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 (12) hide show
  1. package/dist/all.css +414 -91
  2. package/dist/all.scss +502 -191
  3. package/package.json +2 -2
  4. package/scss/chip/_layout.scss +9 -15
  5. package/scss/chip/_theme.scss +302 -85
  6. package/scss/chip/_variables.scss +139 -50
  7. package/scss/core/mixins/_index.scss +1 -1
  8. package/scss/scheduler/_layout.scss +3 -0
  9. package/scss/styling/_index.scss +1 -1
  10. package/scss/utils/_border.scss +11 -2
  11. package/scss/utils/_index.scss +1 -0
  12. package/scss/{common/_decoration.scss → utils/_theme-colors.scss} +15 -19
package/scss/chip/_variables.scss CHANGED
@@ -21,81 +21,170 @@ $chip-remove-icon-font-size: 14px !default;
21
21
 
22
22
  $chip-avatar-size: 16px !default;
23
23
 
24
- $chip-filled-bg: #ebebeb !default;
25
- $chip-filled-text: $body-text !default;
26
- $chip-filled-border: rgba( black, .08 ) !default;
24
+ $chip-base-bg: get-base-hue( gray, 800 ) !default;
27
25
 
28
- $chip-filled-hovered-bg: try-shade( $chip-filled-bg, .5 ) !default;
29
- $chip-filled-hovered-text: null !default;
30
- $chip-filled-hovered-border: null !default;
26
+ $chip-solid-bg: rgba( $chip-base-bg, .08 ) !default;
27
+ $chip-solid-text: $chip-base-bg !default;
28
+ $chip-solid-border: rgba( $chip-base-bg, .3 ) !default;
31
29
 
32
- $chip-filled-focused-bg: $chip-filled-bg !default;
33
- $chip-filled-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
30
+ $chip-solid-hover-bg: rgba( $chip-base-bg, .16 ) !default;
31
+ $chip-solid-hover-text: null !default;
32
+ $chip-solid-hover-border: null !default;
34
33
 
35
- $chip-filled-selected-bg: try-shade( $chip-filled-bg, 1 ) !default;
36
- $chip-filled-selected-text: null !default;
37
- $chip-filled-selected-border: null !default;
34
+ $chip-solid-focus-bg: $chip-solid-bg !default;
35
+ $chip-solid-focus-shadow: 0 0 0 2px rgba( $chip-base-bg, .16 ) !default;
38
36
 
39
- $chip-filled-success-bg: rgba( $success, .12 ) !default;
40
- $chip-filled-success-text: $success !default;
41
- $chip-filled-success-border: rgba( $success, .3 ) !default;
37
+ $chip-solid-selected-bg: rgba( $chip-base-bg, .24 ) !default;
38
+ $chip-solid-selected-text: null !default;
39
+ $chip-solid-selected-border: null !default;
42
40
 
43
- $chip-filled-warning-bg: rgba( $warning, .12 ) !default;
44
- $chip-filled-warning-text: $warning !default;
45
- $chip-filled-warning-border: rgba($warning, .3 ) !default;
41
+ $chip-solid-success-bg: rgba( $success, .08 ) !default;
42
+ $chip-solid-success-text: $success !default;
43
+ $chip-solid-success-border: rgba( $success, .3 ) !default;
46
44
 
47
- $chip-filled-error-bg: rgba( $error, .12 ) !default;
48
- $chip-filled-error-text: $error !default;
49
- $chip-filled-error-border: rgba( $error, .3 ) !default;
45
+ $chip-solid-success-hover-bg: rgba( $success, .16 ) !default;
46
+ $chip-solid-success-hover-text: null !default;
47
+ $chip-solid-success-hover-border: null !default;
50
48
 
51
- $chip-filled-info-bg: rgba( $info, .12 ) !default;
52
- $chip-filled-info-text: $info !default;
53
- $chip-filled-info-border: rgba( $info, .3 ) !default;
49
+ $chip-solid-success-focus-bg: null !default;
50
+ $chip-solid-success-focus-text: null !default;
51
+ $chip-solid-success-focus-border: null !default;
54
52
 
55
- $chip-outline-bg: transparent !default;
56
- $chip-outline-text: $body-text !default;
57
- $chip-outline-border: $body-text !default;
53
+ $chip-solid-success-selected-bg: rgba( $success, .24 ) !default;
54
+ $chip-solid-success-selected-text: null !default;
55
+ $chip-solid-success-selected-border: null !default;
58
56
 
59
- $chip-outline-hovered-bg: $body-text !default;
60
- $chip-outline-hovered-text: #ffffff !default;
61
- $chip-outline-hovered-border: rgba( black, .08 ) !default;
57
+ $chip-solid-warning-bg: rgba( $warning, .08 ) !default;
58
+ $chip-solid-warning-text: $warning !default;
59
+ $chip-solid-warning-border: rgba( $warning, .3 ) !default;
62
60
 
63
- $chip-outline-focused-bg: $chip-outline-bg !default;
64
- $chip-outline-focused-text: $chip-outline-text !default;
65
- $chip-outline-focused-border: $chip-outline-border !default;
66
- $chip-outline-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
61
+ $chip-solid-warning-hover-bg: rgba( $warning, .16 ) !default;
62
+ $chip-solid-warning-hover-text: null !default;
63
+ $chip-solid-warning-hover-border: null !default;
67
64
 
68
- $chip-outline-selected-bg: $body-text !default;
69
- $chip-outline-selected-text: #ffffff !default;
65
+ $chip-solid-warning-focus-bg: null !default;
66
+ $chip-solid-warning-focus-text: null !default;
67
+ $chip-solid-warning-focus-border: null !default;
70
68
 
71
- $chip-outline-success-bg: transparent !default;
69
+ $chip-solid-warning-selected-bg: rgba( $warning, .24 ) !default;
70
+ $chip-solid-warning-selected-text: null !default;
71
+ $chip-solid-warning-selected-border: null !default;
72
+
73
+ $chip-solid-error-bg: rgba( $error, .08 ) !default;
74
+ $chip-solid-error-text: $error !default;
75
+ $chip-solid-error-border: rgba( $error, .3 ) !default;
76
+
77
+ $chip-solid-error-hover-bg: rgba( $error, .16 ) !default;
78
+ $chip-solid-error-hover-text: null !default;
79
+ $chip-solid-error-hover-border: null !default;
80
+
81
+ $chip-solid-error-focus-bg: null !default;
82
+ $chip-solid-error-focus-text: null !default;
83
+ $chip-solid-error-focus-border: null !default;
84
+
85
+ $chip-solid-error-selected-bg: rgba( $error, .24 ) !default;
86
+ $chip-solid-error-selected-text: null !default;
87
+ $chip-solid-error-selected-border: null !default;
88
+
89
+ $chip-solid-info-bg: rgba( $info, .08 ) !default;
90
+ $chip-solid-info-text: $info !default;
91
+ $chip-solid-info-border: rgba( $info, .3 ) !default;
92
+
93
+ $chip-solid-info-hover-bg: rgba( $info, .16 ) !default;
94
+ $chip-solid-info-hover-text: null !default;
95
+ $chip-solid-info-hover-border: null !default;
96
+
97
+ $chip-solid-info-focus-bg: null !default;
98
+ $chip-solid-info-focus-text: null !default;
99
+ $chip-solid-info-focus-border: null !default;
100
+
101
+ $chip-solid-info-selected-bg: rgba( $info, .24 ) !default;
102
+ $chip-solid-info-selected-text: null !default;
103
+ $chip-solid-info-selected-border: null !default;
104
+
105
+ $chip-outline-bg: $body-bg !default;
106
+ $chip-outline-text: $chip-base-bg !default;
107
+ $chip-outline-border: $chip-base-bg !default;
108
+
109
+ $chip-outline-hover-bg: $chip-base-bg !default;
110
+ $chip-outline-hover-text: contrast-wcag( $chip-outline-hover-bg ) !default;
111
+ $chip-outline-hover-border: null !default;
112
+
113
+ $chip-outline-focus-bg: null !default;
114
+ $chip-outline-focus-text: null !default;
115
+ $chip-outline-focus-border: null !default;
116
+ $chip-outline-focus-shadow: 0 0 0 2px rgba( $black, .08 ) !default;
117
+
118
+ $chip-outline-selected-bg: $chip-outline-hover-bg !default;
119
+ $chip-outline-selected-text: $chip-outline-hover-text !default;
120
+
121
+ $chip-outline-success-bg: null !default;
72
122
  $chip-outline-success-text: $success !default;
73
- $chip-outline-success-border: rgba( $success, .54 ) !default;
123
+ $chip-outline-success-border: $success !default;
124
+
125
+ $chip-outline-success-hover-bg: $success !default;
126
+ $chip-outline-success-hover-text: contrast-wcag( $chip-outline-success-hover-bg ) !default;
127
+ $chip-outline-success-hover-border: null !default;
128
+
129
+ $chip-outline-success-focus-bg: nul !default;
130
+ $chip-outline-success-focus-text: null !default;
131
+ $chip-outline-success-focus-border: null !default;
74
132
 
75
- $chip-outline-warning-bg: transparent !default;
133
+ $chip-outline-success-selected-bg: $chip-outline-success-hover-bg !default;
134
+ $chip-outline-success-selected-text: $chip-outline-success-hover-text !default;
135
+ $chip-outline-success-selected-border: null !default;
136
+
137
+ $chip-outline-warning-bg: null !default;
76
138
  $chip-outline-warning-text: $warning !default;
77
- $chip-outline-warning-border: rgba( $warning, .54 ) !default;
139
+ $chip-outline-warning-border: $warning !default;
140
+
141
+ $chip-outline-warning-hover-bg: $warning !default;
142
+ $chip-outline-warning-hover-text: $white !default;
143
+ $chip-outline-warning-hover-border: null !default;
144
+
145
+ $chip-outline-warning-focus-bg: nul !default;
146
+ $chip-outline-warning-focus-text: null !default;
147
+ $chip-outline-warning-focus-border: null !default;
78
148
 
79
- $chip-outline-error-bg: transparent !default;
149
+ $chip-outline-warning-selected-bg: $chip-outline-warning-hover-bg !default;
150
+ $chip-outline-warning-selected-text: $chip-outline-warning-hover-text !default;
151
+ $chip-outline-warning-selected-border: null !default;
152
+
153
+ $chip-outline-error-bg: null !default;
80
154
  $chip-outline-error-text: $error !default;
81
- $chip-outline-error-border: rgba( $error, .54 ) !default;
155
+ $chip-outline-error-border: $error !default;
156
+
157
+ $chip-outline-error-hover-bg: $error !default;
158
+ $chip-outline-error-hover-text: contrast-wcag( $chip-outline-error-hover-bg ) !default;
159
+ $chip-outline-error-hover-border: null !default;
160
+
161
+ $chip-outline-error-focus-bg: nul !default;
162
+ $chip-outline-error-focus-text: null !default;
163
+ $chip-outline-error-focus-border: null !default;
82
164
 
83
- $chip-outline-info-bg: transparent !default;
165
+ $chip-outline-error-selected-bg: $chip-outline-error-hover-bg !default;
166
+ $chip-outline-error-selected-text: $chip-outline-error-hover-text !default;
167
+ $chip-outline-error-selected-border: null !default;
168
+
169
+ $chip-outline-info-bg: null !default;
84
170
  $chip-outline-info-text: $info !default;
85
- $chip-outline-info-border: rgba( $info, .54 ) !default;
171
+ $chip-outline-info-border: $info !default;
172
+
173
+ $chip-outline-info-hover-bg: $info !default;
174
+ $chip-outline-info-hover-text: contrast-wcag( $chip-outline-info-hover-bg ) !default;
175
+ $chip-outline-info-hover-border: null !default;
86
176
 
87
- $chip-filled-single-selected-bg: rgba( $primary, .08 ) !default;
88
- $chip-filled-single-selected-text: $primary !default;
89
- $chip-filled-single-selected-border: rgba( $primary, .2 ) !default;
177
+ $chip-outline-info-focus-bg: nul !default;
178
+ $chip-outline-info-focus-text: null !default;
179
+ $chip-outline-info-focus-border: null !default;
90
180
 
91
- $chip-outline-single-selected-bg: transparent !default;
92
- $chip-outline-single-selected-text: $primary !default;
93
- $chip-outline-single-selected-border: rgba( $primary, .2 ) !default;
181
+ $chip-outline-info-selected-bg: $chip-outline-info-hover-bg !default;
182
+ $chip-outline-info-selected-text: $chip-outline-info-hover-text !default;
183
+ $chip-outline-info-selected-border: null !default;
94
184
 
95
185
  $chip-multiple-selected-icon-bg: rgba( black, .44 ) !default;
96
186
  $chip-multiple-selected-icon-text: #ffffff !default;
97
187
 
98
-
99
188
  $chip-primary-focus-shadow: 0 0 0 2px rgba( $primary, .16 ) !default;
100
189
  $chip-secondary-focus-shadow: 0 0 0 2px rgba( $secondary, .16 ) !default;
101
190
  $chip-info-focus-shadow: 0 0 0 2px rgba( $info, .16 ) !default;
package/scss/core/mixins/_index.scss CHANGED
@@ -6,8 +6,8 @@
6
6
  // Utils
7
7
  @import "_border-radius.scss";
8
8
  @import "_box-shadow.scss";
9
- @import "_decoration.scss";
10
9
  @import "_disabled.scss";
10
+ @import "_decoration.scss";
11
11
  @import "_gradients.scss";
12
12
  @import "_typography.scss";
13
13
  @import "_hide-scrollbar.scss";
package/scss/scheduler/_layout.scss CHANGED
@@ -126,6 +126,9 @@
126
126
  }
127
127
  }
128
128
 
129
+ &.k-scheduler-timeline-view .k-scheduler-body .k-scheduler-cell {
130
+ flex-basis: auto;
131
+ }
129
132
 
130
133
 
131
134
  .k-more-events {
package/scss/styling/_index.scss CHANGED
@@ -2,4 +2,4 @@
2
2
 
3
3
 
4
4
  // Dependencies
5
- @import "../common/_decoration.scss";
5
+ @import "../utils/_theme-colors.scss";
package/scss/utils/_border.scss CHANGED
@@ -33,12 +33,21 @@
33
33
  top: ( border-top-left-radius, border-top-right-radius ),
34
34
  right: ( border-top-right-radius, border-bottom-right-radius ),
35
35
  bottom: ( border-bottom-left-radius, border-bottom-right-radius ),
36
- left: ( border-bottom-left-radius, border-top-left-radius )
36
+ left: ( border-bottom-left-radius, border-top-left-radius ),
37
+ top-left: border-top-left-radius,
38
+ top-right: border-top-right-radius,
39
+ bottom-left: border-bottom-left-radius,
40
+ bottom-right: border-bottom-right-radius
37
41
  ) !default;
38
42
 
39
43
  $utils-border-radius: (
40
44
  default: map-get( $spacing, 1 ),
41
- 0: 0
45
+ 0: 0,
46
+ sm: map-get( $spacing, 1 ) / 2,
47
+ md: map-get( $spacing, 1 ),
48
+ lg: map-get( $spacing, 2 ),
49
+ circle: 50%,
50
+ pill: 9999px
42
51
  ) !default;
43
52
 
44
53
 
package/scss/utils/_index.scss CHANGED
@@ -20,6 +20,7 @@
20
20
  @import "_spacer.scss";
21
21
  @import "_table-layout.scss";
22
22
  @import "_text.scss";
23
+ @import "_theme-colors.scss";
23
24
  @import "_touch-action.scss";
24
25
  @import "_transform.scss";
25
26
  @import "_user-select.scss";
package/scss/{common/_decoration.scss → utils/_theme-colors.scss} RENAMED
@@ -3,15 +3,12 @@
3
3
  // sass-lint:disable-block no-important
4
4
  // stylelint-disable block-opening-brace-space-before
5
5
 
6
- .k-text-primary { color: $primary !important; }
7
- .k-text-info { color: $info !important; }
8
- .k-text-success { color: $success !important; }
9
- .k-text-warning { color: $warning !important; }
10
- .k-text-error { color: $error !important; }
11
-
12
- .k-text-base { color: $base-text; }
6
+ .k-text-base,
7
+ .k-color-base {
8
+ color: $base-text;
9
+ }
13
10
 
14
- .k-color-inherit { color: inherit; }
11
+ .k-color-inherit { color: inherit; }
15
12
 
16
13
  @each $name, $color in $theme-colors {
17
14
  .k-text-#{$name},
@@ -27,11 +24,11 @@
27
24
 
28
25
  // sass-lint:disable-block no-important
29
26
 
30
- .k-bg-primary { background-color: $primary !important; }
31
- .k-bg-info { background-color: $info !important; }
32
- .k-bg-success { background-color: $success !important; }
33
- .k-bg-warning { background-color: $warning !important; }
34
- .k-bg-error { background-color: $error !important; }
27
+ @each $name, $bg-color in $theme-colors {
28
+ .k-bg-#{$name} {
29
+ background-color: $bg-color !important;
30
+ }
31
+ }
35
32
 
36
33
  }
37
34
 
@@ -44,12 +41,11 @@
44
41
 
45
42
  @include exports( "common/decoration/variant" ) {
46
43
 
47
- .k-state-primary { @include variant( $primary ); }
48
- .k-state-info { @include variant( $info ); }
49
- .k-state-success { @include variant( $success ); }
50
- .k-state-warning { @include variant( $warning ); }
51
- .k-state-error { @include variant( $error ); }
52
-
44
+ @each $name, $variant in $theme-colors {
45
+ .k-state-#{$name} {
46
+ @include variant( $variant );
47
+ }
48
+ }
53
49
  }
54
50
 
55
51