@progress/kendo-theme-default 4.42.1-dev.4 → 4.43.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 (49) hide show
  1. package/dist/all.css +1631 -3185
  2. package/dist/all.scss +210 -236
  3. package/package.json +2 -2
  4. package/scss/action-buttons/_layout.scss +1 -0
  5. package/scss/adaptive/_layout.scss +6 -12
  6. package/scss/autocomplete/_theme.scss +7 -8
  7. package/scss/autocomplete/_variables.scss +0 -5
  8. package/scss/avatar/_layout.scss +4 -1
  9. package/scss/avatar/_variables.scss +1 -1
  10. package/scss/button/index.md +3 -0
  11. package/scss/calendar/_theme.scss +4 -0
  12. package/scss/chat/_layout.scss +3 -5
  13. package/scss/chat/_theme.scss +0 -10
  14. package/scss/chat/_variables.scss +0 -8
  15. package/scss/color-preview/_layout.scss +5 -1
  16. package/scss/colorgradient/_layout.scss +7 -0
  17. package/scss/colorpicker/_layout.scss +5 -14
  18. package/scss/colorpicker/_theme.scss +8 -0
  19. package/scss/colorpicker/_variables.scss +0 -2
  20. package/scss/combobox/_layout.scss +4 -7
  21. package/scss/combobox/_theme.scss +20 -21
  22. package/scss/combobox/_variables.scss +0 -1
  23. package/scss/core/functions/_colors.scss +4 -1
  24. package/scss/datetime/_layout.scss +11 -32
  25. package/scss/datetime/_theme.scss +24 -0
  26. package/scss/dropdownlist/_layout.scss +4 -5
  27. package/scss/dropdownlist/_theme.scss +8 -0
  28. package/scss/editor/_layout.scss +2 -23
  29. package/scss/editor/_variables.scss +1 -1
  30. package/scss/forms/_layout.scss +0 -50
  31. package/scss/gantt/_layout.scss +5 -3
  32. package/scss/grid/_layout.scss +1 -1
  33. package/scss/icons/_layout.scss +6 -0
  34. package/scss/icons/font/WebComponentsIcons.scss +1 -1
  35. package/scss/icons/font/WebComponentsIcons.ttf +0 -0
  36. package/scss/maskedtextbox/_layout.scss +1 -0
  37. package/scss/maskedtextbox/_theme.scss +4 -0
  38. package/scss/multiselect/_layout.scss +1 -1
  39. package/scss/multiselect/_theme.scss +12 -0
  40. package/scss/numerictextbox/_layout.scss +4 -8
  41. package/scss/numerictextbox/_theme.scss +8 -0
  42. package/scss/numerictextbox/_variables.scss +0 -4
  43. package/scss/pivotgrid/_layout.scss +0 -8
  44. package/scss/searchbox/_theme.scss +16 -0
  45. package/scss/spreadsheet/_layout.scss +2 -1
  46. package/scss/tabstrip/_layout.scss +10 -0
  47. package/scss/tabstrip/_theme.scss +1 -0
  48. package/scss/textarea/_theme.scss +4 -0
  49. package/scss/textbox/_theme.scss +5 -1
@@ -1,5 +1,6 @@
1
1
  @include exports("maskedtextbox/layout") {
2
2
 
3
+ // Masked textbox
3
4
  .k-maskedtextbox {
4
5
  width: $input-default-width;
5
6
  font-family: $input-font-family;
@@ -13,6 +13,10 @@
13
13
  border-color: $invalid-border;
14
14
  }
15
15
 
16
+ .k-input-validation-icon {
17
+ color: $invalid-text;
18
+ }
19
+
16
20
  &:focus,
17
21
  &.k-state-focused {
18
22
  .k-textbox {
@@ -1,6 +1,6 @@
1
1
  @include exports("multiselect/layout") {
2
2
 
3
- // Base
3
+ // Multiselect
4
4
  .k-multiselect {
5
5
  @include border-radius( $input-border-radius );
6
6
  width: $multiselect-width;
@@ -90,6 +90,10 @@
90
90
  &.k-invalid:hover,
91
91
  &.k-state-invalid {
92
92
  border-color: $invalid-border;
93
+
94
+ .k-input-validation-icon {
95
+ color: $invalid-text;
96
+ }
93
97
  }
94
98
  }
95
99
 
@@ -99,6 +103,10 @@
99
103
  &.ng-invalid.ng-dirty {
100
104
  .k-multiselect-wrap {
101
105
  border-color: $invalid-border;
106
+
107
+ .k-input-validation-icon {
108
+ color: $invalid-text;
109
+ }
102
110
  }
103
111
  }
104
112
  }
@@ -129,6 +137,10 @@
129
137
  &.k-invalid {
130
138
  .k-multiselect-wrap {
131
139
  border-color: $invalid-border;
140
+
141
+ .k-input-validation-icon {
142
+ color: $invalid-text;
143
+ }
132
144
  }
133
145
  }
134
146
 
@@ -1,6 +1,6 @@
1
1
  @include exports("numerictextbox/layout") {
2
2
 
3
- // Base
3
+ // Numeric textbox
4
4
  .k-numerictextbox {
5
5
  width: $input-default-width;
6
6
  border-width: 0;
@@ -31,6 +31,7 @@
31
31
  outline: 0;
32
32
  display: flex;
33
33
  flex-flow: row nowrap;
34
+ overflow: hidden;
34
35
  }
35
36
 
36
37
 
@@ -42,10 +43,10 @@
42
43
 
43
44
  // Select
44
45
  .k-select {
45
- @include border-right-radius-only( $input-border-radius );
46
46
  padding: 0;
47
47
  width: if( $use-picker-select-width, $spinner-width, null );
48
- border-width: 0 0 0 $picker-select-border-width;
48
+ border-width: 0;
49
+ border-inline-start-width: $picker-select-border-width;
49
50
  border-style: solid;
50
51
  box-sizing: border-box;
51
52
  display: flex;
@@ -86,11 +87,6 @@
86
87
  .k-rtl &,
87
88
  &[dir="rtl"] {
88
89
  text-align: right;
89
-
90
- .k-select {
91
- @include border-left-radius-only( $input-border-radius );
92
- border-width: 0 $picker-select-border-width 0 0;
93
- }
94
90
  }
95
91
  }
96
92
 
@@ -43,6 +43,10 @@
43
43
  &.k-state-invalid {
44
44
  border-color: $invalid-border;
45
45
 
46
+ .k-input-validation-icon {
47
+ color: $invalid-text;
48
+ }
49
+
46
50
  &:focus,
47
51
  &.k-state-focused {
48
52
  @include box-shadow($invalid-shadow);
@@ -90,6 +94,10 @@
90
94
  .k-numeric-wrap {
91
95
  border-color: $invalid-border;
92
96
 
97
+ .k-input-validation-icon {
98
+ color: $invalid-text;
99
+ }
100
+
93
101
  &.k-state-focused {
94
102
  @include box-shadow($invalid-shadow);
95
103
  }
@@ -12,10 +12,6 @@ $numeric-focused-text: $input-focused-text !default;
12
12
  $numeric-focused-border: $input-focused-border !default;
13
13
  $numeric-focused-shadow: $input-focused-shadow !default;
14
14
 
15
- $numeric-invalid-bg: null !default;
16
- $numeric-invalid-text: $invalid-text !default;
17
- $numeric-invalid-border: $invalid-border !default;
18
-
19
15
  $numeric-button-bg: $button-bg !default;
20
16
  $numeric-button-text: $button-text !default;
21
17
  $numeric-button-border: $button-border !default;
@@ -671,14 +671,6 @@
671
671
  width: 77%;
672
672
  }
673
673
 
674
- .k-edit-buttons {
675
- > input,
676
- > label {
677
- float: left;
678
- margin-top: .4em;
679
- }
680
- }
681
-
682
674
 
683
675
  // List container
684
676
  .k-list-container {
@@ -47,5 +47,21 @@
47
47
  @include disabled( $disabled-styling );
48
48
  }
49
49
 
50
+
51
+ // Invalid
52
+ &.k-invalid,
53
+ &.k-state-invalid {
54
+ border-color: $invalid-border;
55
+
56
+ .k-input-validation-icon {
57
+ color: $invalid-text;
58
+ }
59
+
60
+ &:focus,
61
+ &.k-state-focus {
62
+ @include box-shadow($invalid-shadow);
63
+ }
64
+ }
65
+
50
66
  }
51
67
  }
@@ -73,7 +73,8 @@
73
73
  .k-spreadsheet-tabstrip .k-loading {
74
74
  display: none;
75
75
  }
76
- .k-spreadsheet-tabstrip .k-content {
76
+ .k-spreadsheet-tabstrip .k-content,
77
+ .k-spreadsheet-tabstrip .k-tabstrip-content {
77
78
  @include border-radius( 0 );
78
79
  padding: 0;
79
80
  border-width: 0;
@@ -155,6 +155,10 @@
155
155
  border-bottom-width: $tabstrip-border-width;
156
156
  margin-bottom: -$tabstrip-content-border-width;
157
157
 
158
+ > .k-tabstrip-items {
159
+ width: 100%;
160
+ }
161
+
158
162
  .k-item {
159
163
  @include border-top-radius( $tabstrip-item-border-radius );
160
164
  margin-bottom: -$tabstrip-border-width;
@@ -180,6 +184,10 @@
180
184
  border-top-width: $tabstrip-border-width;
181
185
  margin-top: -$tabstrip-content-border-width;
182
186
 
187
+ > .k-tabstrip-items {
188
+ width: 100%;
189
+ }
190
+
183
191
  .k-item {
184
192
  @include border-bottom-radius( $tabstrip-item-border-radius );
185
193
  margin-top: -$tabstrip-border-width;
@@ -208,6 +216,7 @@
208
216
  margin-right: -$tabstrip-content-border-width;
209
217
 
210
218
  > .k-tabstrip-items {
219
+ height: 100%;
211
220
  display: inline-flex;
212
221
  flex-direction: column;
213
222
  }
@@ -242,6 +251,7 @@
242
251
  margin-left: -$tabstrip-content-border-width;
243
252
 
244
253
  > .k-tabstrip-items {
254
+ height: 100%;
245
255
  display: inline-flex;
246
256
  flex-direction: column;
247
257
  }
@@ -59,6 +59,7 @@
59
59
 
60
60
 
61
61
  // Content
62
+ .k-tabstrip-content,
62
63
  .k-tabstrip > .k-content {
63
64
  @include fill(
64
65
  $tabstrip-content-text,
@@ -55,6 +55,10 @@
55
55
  &.ng-invalid.ng-dirty {
56
56
  border-color: $invalid-border;
57
57
 
58
+ .k-input-validation-icon {
59
+ color: $invalid-text;
60
+ }
61
+
58
62
  &:focus,
59
63
  // &:focus-within,
60
64
  &.k-state-focus,
@@ -58,7 +58,11 @@
58
58
  &.k-state-invalid,
59
59
  &.ng-invalid.ng-touched,
60
60
  &.ng-invalid.ng-dirty {
61
- @include fill( $border: $invalid-border );
61
+ border-color: $invalid-border;
62
+
63
+ .k-input-validation-icon {
64
+ color: $invalid-text;
65
+ }
62
66
 
63
67
  &:focus,
64
68
  // &:focus-within,