@progress/kendo-theme-fluent 7.1.0-dev.6 → 7.1.0-dev.7
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/dist/all.css +165 -9
- package/dist/meta/sassdoc-data.json +412 -62
- package/dist/meta/sassdoc-raw-data.json +206 -31
- package/lib/swatches/all.json +1 -1
- package/lib/swatches/fluent-main.json +1 -1
- package/package.json +4 -4
- package/scss/drawer/_layout.scss +1 -0
- package/scss/dropdowntree/_layout.scss +16 -0
- package/scss/input/_layout.scss +59 -6
- package/scss/input/_theme.scss +73 -0
- package/scss/input/_variables.scss +25 -0
|
@@ -35774,15 +35774,15 @@
|
|
|
35774
35774
|
}
|
|
35775
35775
|
},
|
|
35776
35776
|
{
|
|
35777
|
-
"description": "The
|
|
35777
|
+
"description": "The color of the Input separator.\n",
|
|
35778
35778
|
"commentRange": {
|
|
35779
35779
|
"start": 631,
|
|
35780
35780
|
"end": 632
|
|
35781
35781
|
},
|
|
35782
35782
|
"context": {
|
|
35783
35783
|
"type": "variable",
|
|
35784
|
-
"name": "kendo-input-
|
|
35785
|
-
"value": "var(
|
|
35784
|
+
"name": "kendo-input-separator-text",
|
|
35785
|
+
"value": "k-get-theme-color-var( neutral-30 )",
|
|
35786
35786
|
"scope": "default",
|
|
35787
35787
|
"line": {
|
|
35788
35788
|
"start": 633,
|
|
@@ -35798,11 +35798,136 @@
|
|
|
35798
35798
|
"name": "_variables.scss"
|
|
35799
35799
|
}
|
|
35800
35800
|
},
|
|
35801
|
+
{
|
|
35802
|
+
"description": "The text color of the Input prefix.\n",
|
|
35803
|
+
"commentRange": {
|
|
35804
|
+
"start": 635,
|
|
35805
|
+
"end": 636
|
|
35806
|
+
},
|
|
35807
|
+
"context": {
|
|
35808
|
+
"type": "variable",
|
|
35809
|
+
"name": "kendo-input-prefix-text",
|
|
35810
|
+
"value": "k-get-theme-color-var( neutral-130 )",
|
|
35811
|
+
"scope": "default",
|
|
35812
|
+
"line": {
|
|
35813
|
+
"start": 637,
|
|
35814
|
+
"end": 637
|
|
35815
|
+
}
|
|
35816
|
+
},
|
|
35817
|
+
"group": [
|
|
35818
|
+
"input"
|
|
35819
|
+
],
|
|
35820
|
+
"access": "public",
|
|
35821
|
+
"file": {
|
|
35822
|
+
"path": "input/_variables.scss",
|
|
35823
|
+
"name": "_variables.scss"
|
|
35824
|
+
}
|
|
35825
|
+
},
|
|
35826
|
+
{
|
|
35827
|
+
"description": "The text color of the Input suffix.\n",
|
|
35828
|
+
"commentRange": {
|
|
35829
|
+
"start": 638,
|
|
35830
|
+
"end": 639
|
|
35831
|
+
},
|
|
35832
|
+
"context": {
|
|
35833
|
+
"type": "variable",
|
|
35834
|
+
"name": "kendo-input-suffix-text",
|
|
35835
|
+
"value": "k-get-theme-color-var( neutral-130 )",
|
|
35836
|
+
"scope": "default",
|
|
35837
|
+
"line": {
|
|
35838
|
+
"start": 640,
|
|
35839
|
+
"end": 640
|
|
35840
|
+
}
|
|
35841
|
+
},
|
|
35842
|
+
"group": [
|
|
35843
|
+
"input"
|
|
35844
|
+
],
|
|
35845
|
+
"access": "public",
|
|
35846
|
+
"file": {
|
|
35847
|
+
"path": "input/_variables.scss",
|
|
35848
|
+
"name": "_variables.scss"
|
|
35849
|
+
}
|
|
35850
|
+
},
|
|
35851
|
+
{
|
|
35852
|
+
"description": "The text color of the disabled Input prefix.\n",
|
|
35853
|
+
"commentRange": {
|
|
35854
|
+
"start": 642,
|
|
35855
|
+
"end": 643
|
|
35856
|
+
},
|
|
35857
|
+
"context": {
|
|
35858
|
+
"type": "variable",
|
|
35859
|
+
"name": "kendo-input-prefix-disabled-text",
|
|
35860
|
+
"value": "k-get-theme-color-var( neutral-60 )",
|
|
35861
|
+
"scope": "default",
|
|
35862
|
+
"line": {
|
|
35863
|
+
"start": 644,
|
|
35864
|
+
"end": 644
|
|
35865
|
+
}
|
|
35866
|
+
},
|
|
35867
|
+
"group": [
|
|
35868
|
+
"input"
|
|
35869
|
+
],
|
|
35870
|
+
"access": "public",
|
|
35871
|
+
"file": {
|
|
35872
|
+
"path": "input/_variables.scss",
|
|
35873
|
+
"name": "_variables.scss"
|
|
35874
|
+
}
|
|
35875
|
+
},
|
|
35876
|
+
{
|
|
35877
|
+
"description": "The text color of the disabled Input suffix.\n",
|
|
35878
|
+
"commentRange": {
|
|
35879
|
+
"start": 645,
|
|
35880
|
+
"end": 646
|
|
35881
|
+
},
|
|
35882
|
+
"context": {
|
|
35883
|
+
"type": "variable",
|
|
35884
|
+
"name": "kendo-input-suffix-disabled-text",
|
|
35885
|
+
"value": "k-get-theme-color-var( neutral-60 )",
|
|
35886
|
+
"scope": "default",
|
|
35887
|
+
"line": {
|
|
35888
|
+
"start": 647,
|
|
35889
|
+
"end": 647
|
|
35890
|
+
}
|
|
35891
|
+
},
|
|
35892
|
+
"group": [
|
|
35893
|
+
"input"
|
|
35894
|
+
],
|
|
35895
|
+
"access": "public",
|
|
35896
|
+
"file": {
|
|
35897
|
+
"path": "input/_variables.scss",
|
|
35898
|
+
"name": "_variables.scss"
|
|
35899
|
+
}
|
|
35900
|
+
},
|
|
35901
|
+
{
|
|
35902
|
+
"description": "The border color of the invalid Input components.\n",
|
|
35903
|
+
"commentRange": {
|
|
35904
|
+
"start": 649,
|
|
35905
|
+
"end": 650
|
|
35906
|
+
},
|
|
35907
|
+
"context": {
|
|
35908
|
+
"type": "variable",
|
|
35909
|
+
"name": "kendo-input-invalid-border",
|
|
35910
|
+
"value": "var( --kendo-invalid-border, #{$kendo-invalid-border} )",
|
|
35911
|
+
"scope": "default",
|
|
35912
|
+
"line": {
|
|
35913
|
+
"start": 651,
|
|
35914
|
+
"end": 651
|
|
35915
|
+
}
|
|
35916
|
+
},
|
|
35917
|
+
"group": [
|
|
35918
|
+
"input"
|
|
35919
|
+
],
|
|
35920
|
+
"access": "public",
|
|
35921
|
+
"file": {
|
|
35922
|
+
"path": "input/_variables.scss",
|
|
35923
|
+
"name": "_variables.scss"
|
|
35924
|
+
}
|
|
35925
|
+
},
|
|
35801
35926
|
{
|
|
35802
35927
|
"description": "The text color of the invalid Input components.\n",
|
|
35803
35928
|
"commentRange": {
|
|
35804
|
-
"start":
|
|
35805
|
-
"end":
|
|
35929
|
+
"start": 652,
|
|
35930
|
+
"end": 653
|
|
35806
35931
|
},
|
|
35807
35932
|
"context": {
|
|
35808
35933
|
"type": "variable",
|
|
@@ -35810,8 +35935,58 @@
|
|
|
35810
35935
|
"value": "var( --kendo-invalid-text, #{$kendo-invalid-text} )",
|
|
35811
35936
|
"scope": "default",
|
|
35812
35937
|
"line": {
|
|
35813
|
-
"start":
|
|
35814
|
-
"end":
|
|
35938
|
+
"start": 654,
|
|
35939
|
+
"end": 654
|
|
35940
|
+
}
|
|
35941
|
+
},
|
|
35942
|
+
"group": [
|
|
35943
|
+
"input"
|
|
35944
|
+
],
|
|
35945
|
+
"access": "public",
|
|
35946
|
+
"file": {
|
|
35947
|
+
"path": "input/_variables.scss",
|
|
35948
|
+
"name": "_variables.scss"
|
|
35949
|
+
}
|
|
35950
|
+
},
|
|
35951
|
+
{
|
|
35952
|
+
"description": "The border color of the valid Input components.\n",
|
|
35953
|
+
"commentRange": {
|
|
35954
|
+
"start": 656,
|
|
35955
|
+
"end": 657
|
|
35956
|
+
},
|
|
35957
|
+
"context": {
|
|
35958
|
+
"type": "variable",
|
|
35959
|
+
"name": "kendo-input-valid-border",
|
|
35960
|
+
"value": "var( --kendo-valid-border, #{$kendo-valid-border} )",
|
|
35961
|
+
"scope": "default",
|
|
35962
|
+
"line": {
|
|
35963
|
+
"start": 658,
|
|
35964
|
+
"end": 658
|
|
35965
|
+
}
|
|
35966
|
+
},
|
|
35967
|
+
"group": [
|
|
35968
|
+
"input"
|
|
35969
|
+
],
|
|
35970
|
+
"access": "public",
|
|
35971
|
+
"file": {
|
|
35972
|
+
"path": "input/_variables.scss",
|
|
35973
|
+
"name": "_variables.scss"
|
|
35974
|
+
}
|
|
35975
|
+
},
|
|
35976
|
+
{
|
|
35977
|
+
"description": "The text color of the valid Input components.\n",
|
|
35978
|
+
"commentRange": {
|
|
35979
|
+
"start": 659,
|
|
35980
|
+
"end": 660
|
|
35981
|
+
},
|
|
35982
|
+
"context": {
|
|
35983
|
+
"type": "variable",
|
|
35984
|
+
"name": "kendo-input-valid-text",
|
|
35985
|
+
"value": "var( --kendo-valid-text, #{$kendo-valid-text} )",
|
|
35986
|
+
"scope": "default",
|
|
35987
|
+
"line": {
|
|
35988
|
+
"start": 661,
|
|
35989
|
+
"end": 661
|
|
35815
35990
|
}
|
|
35816
35991
|
},
|
|
35817
35992
|
"group": [
|
|
@@ -35826,8 +36001,8 @@
|
|
|
35826
36001
|
{
|
|
35827
36002
|
"description": "The text color of the Input placeholder.\n",
|
|
35828
36003
|
"commentRange": {
|
|
35829
|
-
"start":
|
|
35830
|
-
"end":
|
|
36004
|
+
"start": 663,
|
|
36005
|
+
"end": 664
|
|
35831
36006
|
},
|
|
35832
36007
|
"context": {
|
|
35833
36008
|
"type": "variable",
|
|
@@ -35835,8 +36010,8 @@
|
|
|
35835
36010
|
"value": "k-get-theme-color-var( neutral-130 )",
|
|
35836
36011
|
"scope": "default",
|
|
35837
36012
|
"line": {
|
|
35838
|
-
"start":
|
|
35839
|
-
"end":
|
|
36013
|
+
"start": 665,
|
|
36014
|
+
"end": 665
|
|
35840
36015
|
}
|
|
35841
36016
|
},
|
|
35842
36017
|
"group": [
|
|
@@ -35851,8 +36026,8 @@
|
|
|
35851
36026
|
{
|
|
35852
36027
|
"description": "The opacity of the Input placeholder.\n",
|
|
35853
36028
|
"commentRange": {
|
|
35854
|
-
"start":
|
|
35855
|
-
"end":
|
|
36029
|
+
"start": 666,
|
|
36030
|
+
"end": 667
|
|
35856
36031
|
},
|
|
35857
36032
|
"context": {
|
|
35858
36033
|
"type": "variable",
|
|
@@ -35860,8 +36035,8 @@
|
|
|
35860
36035
|
"value": "1",
|
|
35861
36036
|
"scope": "default",
|
|
35862
36037
|
"line": {
|
|
35863
|
-
"start":
|
|
35864
|
-
"end":
|
|
36038
|
+
"start": 668,
|
|
36039
|
+
"end": 668
|
|
35865
36040
|
}
|
|
35866
36041
|
},
|
|
35867
36042
|
"group": [
|
|
@@ -35876,8 +36051,8 @@
|
|
|
35876
36051
|
{
|
|
35877
36052
|
"description": "The color of the Input clear value icon.\n",
|
|
35878
36053
|
"commentRange": {
|
|
35879
|
-
"start":
|
|
35880
|
-
"end":
|
|
36054
|
+
"start": 670,
|
|
36055
|
+
"end": 671
|
|
35881
36056
|
},
|
|
35882
36057
|
"context": {
|
|
35883
36058
|
"type": "variable",
|
|
@@ -35885,8 +36060,8 @@
|
|
|
35885
36060
|
"value": "k-get-theme-color-var( neutral-130 )",
|
|
35886
36061
|
"scope": "default",
|
|
35887
36062
|
"line": {
|
|
35888
|
-
"start":
|
|
35889
|
-
"end":
|
|
36063
|
+
"start": 672,
|
|
36064
|
+
"end": 672
|
|
35890
36065
|
}
|
|
35891
36066
|
},
|
|
35892
36067
|
"group": [
|
|
@@ -35901,8 +36076,8 @@
|
|
|
35901
36076
|
{
|
|
35902
36077
|
"description": "The opacity of the Input clear value icon.\n",
|
|
35903
36078
|
"commentRange": {
|
|
35904
|
-
"start":
|
|
35905
|
-
"end":
|
|
36079
|
+
"start": 673,
|
|
36080
|
+
"end": 674
|
|
35906
36081
|
},
|
|
35907
36082
|
"context": {
|
|
35908
36083
|
"type": "variable",
|
|
@@ -35910,8 +36085,8 @@
|
|
|
35910
36085
|
"value": ".6",
|
|
35911
36086
|
"scope": "default",
|
|
35912
36087
|
"line": {
|
|
35913
|
-
"start":
|
|
35914
|
-
"end":
|
|
36088
|
+
"start": 675,
|
|
36089
|
+
"end": 675
|
|
35915
36090
|
}
|
|
35916
36091
|
},
|
|
35917
36092
|
"group": [
|
|
@@ -35926,8 +36101,8 @@
|
|
|
35926
36101
|
{
|
|
35927
36102
|
"description": "The color of the hovered Input clear value icon.\n",
|
|
35928
36103
|
"commentRange": {
|
|
35929
|
-
"start":
|
|
35930
|
-
"end":
|
|
36104
|
+
"start": 676,
|
|
36105
|
+
"end": 677
|
|
35931
36106
|
},
|
|
35932
36107
|
"context": {
|
|
35933
36108
|
"type": "variable",
|
|
@@ -35935,8 +36110,8 @@
|
|
|
35935
36110
|
"value": "inherit",
|
|
35936
36111
|
"scope": "default",
|
|
35937
36112
|
"line": {
|
|
35938
|
-
"start":
|
|
35939
|
-
"end":
|
|
36113
|
+
"start": 678,
|
|
36114
|
+
"end": 678
|
|
35940
36115
|
}
|
|
35941
36116
|
},
|
|
35942
36117
|
"group": [
|
|
@@ -35951,8 +36126,8 @@
|
|
|
35951
36126
|
{
|
|
35952
36127
|
"description": "The opacity of the hovered Input clear value icon.\n",
|
|
35953
36128
|
"commentRange": {
|
|
35954
|
-
"start":
|
|
35955
|
-
"end":
|
|
36129
|
+
"start": 679,
|
|
36130
|
+
"end": 680
|
|
35956
36131
|
},
|
|
35957
36132
|
"context": {
|
|
35958
36133
|
"type": "variable",
|
|
@@ -35960,8 +36135,8 @@
|
|
|
35960
36135
|
"value": "1",
|
|
35961
36136
|
"scope": "default",
|
|
35962
36137
|
"line": {
|
|
35963
|
-
"start":
|
|
35964
|
-
"end":
|
|
36138
|
+
"start": 681,
|
|
36139
|
+
"end": 681
|
|
35965
36140
|
}
|
|
35966
36141
|
},
|
|
35967
36142
|
"group": [
|
package/lib/swatches/all.json
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-theme-fluent",
|
|
3
3
|
"description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
|
|
4
|
-
"version": "7.1.0-dev.
|
|
4
|
+
"version": "7.1.0-dev.7",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -53,12 +53,12 @@
|
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@progress/kendo-svg-icons": "2.1.0",
|
|
56
|
-
"@progress/kendo-theme-core": "7.1.0-dev.
|
|
57
|
-
"@progress/kendo-theme-utils": "7.1.0-dev.
|
|
56
|
+
"@progress/kendo-theme-core": "7.1.0-dev.7",
|
|
57
|
+
"@progress/kendo-theme-utils": "7.1.0-dev.7"
|
|
58
58
|
},
|
|
59
59
|
"directories": {
|
|
60
60
|
"doc": "docs",
|
|
61
61
|
"lib": "lib"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "4bacca4f18a86fbe5bd6cf1cbf192e82c5504709"
|
|
64
64
|
}
|
package/scss/drawer/_layout.scss
CHANGED
|
@@ -21,4 +21,20 @@
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
+
.k-multiselecttree {
|
|
25
|
+
.k-input-values {
|
|
26
|
+
width: auto;
|
|
27
|
+
max-width: 100%;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.k-input-inner::before {
|
|
31
|
+
content: "\200b";
|
|
32
|
+
width: 0px;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
flex: none;
|
|
35
|
+
display: inline-block;
|
|
36
|
+
vertical-align: top;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
24
40
|
}
|
package/scss/input/_layout.scss
CHANGED
|
@@ -143,6 +143,11 @@
|
|
|
143
143
|
&:invalid {
|
|
144
144
|
box-shadow: none;
|
|
145
145
|
}
|
|
146
|
+
|
|
147
|
+
// Valid
|
|
148
|
+
&:valid {
|
|
149
|
+
box-shadow: none;
|
|
150
|
+
}
|
|
146
151
|
}
|
|
147
152
|
span.k-input-inner {
|
|
148
153
|
white-space: nowrap;
|
|
@@ -207,23 +212,49 @@
|
|
|
207
212
|
// Input prefix and suffix
|
|
208
213
|
.k-input-prefix,
|
|
209
214
|
.k-input-suffix {
|
|
210
|
-
border:
|
|
215
|
+
border-color: inherit;
|
|
211
216
|
display: flex;
|
|
212
|
-
flex-flow: row nowrap;
|
|
213
217
|
align-items: center;
|
|
214
218
|
flex: none;
|
|
215
219
|
|
|
216
220
|
> * {
|
|
217
221
|
flex-shrink: 0;
|
|
222
|
+
border: none;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
&-vertical {
|
|
226
|
+
flex-flow: column wrap;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
&-horizontal {
|
|
230
|
+
flex-flow: row wrap;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
// Input separator
|
|
236
|
+
.k-input-separator {
|
|
237
|
+
margin: 0;
|
|
238
|
+
border-style: solid;
|
|
239
|
+
border-color: inherit;
|
|
240
|
+
height: auto;
|
|
241
|
+
align-self: stretch;
|
|
242
|
+
|
|
243
|
+
&-horizontal {
|
|
244
|
+
margin-inline: $kendo-input-md-padding-y;
|
|
245
|
+
border-width: 1px 0 0;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
&-vertical {
|
|
249
|
+
margin-block: $kendo-input-md-padding-y;
|
|
250
|
+
border-width: 0 0 0 1px;
|
|
218
251
|
}
|
|
219
252
|
}
|
|
220
253
|
|
|
221
254
|
// Input with icon styles
|
|
222
255
|
.k-input-icon,
|
|
223
256
|
.k-input-validation-icon,
|
|
224
|
-
.k-input-loading-icon
|
|
225
|
-
.k-input-prefix > .k-icon,
|
|
226
|
-
.k-input-suffix > .k-icon {
|
|
257
|
+
.k-input-loading-icon {
|
|
227
258
|
padding-inline: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
|
|
228
259
|
padding-block: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
|
|
229
260
|
flex: none;
|
|
@@ -283,7 +314,7 @@
|
|
|
283
314
|
}
|
|
284
315
|
|
|
285
316
|
|
|
286
|
-
//
|
|
317
|
+
// Clear value
|
|
287
318
|
.k-clear-value {
|
|
288
319
|
width: var( --INTERNAL--kendo-input-icon-size, min-content );
|
|
289
320
|
height: var( --INTERNAL--kendo-input-icon-size, min-content );
|
|
@@ -413,8 +444,11 @@
|
|
|
413
444
|
|
|
414
445
|
}
|
|
415
446
|
|
|
447
|
+
&.k-valid,
|
|
416
448
|
&.k-invalid,
|
|
449
|
+
&.ng-valid.ng-touched,
|
|
417
450
|
&.ng-invalid.ng-touched,
|
|
451
|
+
&.ng-valid.ng-dirty
|
|
418
452
|
&.ng-invalid.ng-dirty {
|
|
419
453
|
|
|
420
454
|
&:focus,
|
|
@@ -465,6 +499,25 @@
|
|
|
465
499
|
&.k-icon-picker .k-input-inner {
|
|
466
500
|
width: var( --kendo-input-icon-picker-width, #{$_button-width} );
|
|
467
501
|
}
|
|
502
|
+
|
|
503
|
+
.k-input-prefix > .k-icon,
|
|
504
|
+
.k-input-prefix > .k-input-prefix-text,
|
|
505
|
+
.k-input-suffix > .k-icon,
|
|
506
|
+
.k-input-suffix > .k-input-suffix-text {
|
|
507
|
+
padding-block: $_padding-y;
|
|
508
|
+
padding-inline: $_padding-y;
|
|
509
|
+
box-sizing: content-box;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.k-input-separator {
|
|
513
|
+
&-horizontal {
|
|
514
|
+
margin-inline: $_padding-y;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
&-vertical {
|
|
518
|
+
margin-block: $_padding-y;
|
|
519
|
+
}
|
|
520
|
+
}
|
|
468
521
|
}
|
|
469
522
|
}
|
|
470
523
|
|
package/scss/input/_theme.scss
CHANGED
|
@@ -46,6 +46,14 @@
|
|
|
46
46
|
--INTERNAL--kendo-input-text: var( --kendo-input-disabled-text );
|
|
47
47
|
--INTERNAL--kendo-input-bg: var( --kendo-input-disabled-bg );
|
|
48
48
|
--INTERNAL--kendo-input-border: var( --kendo-input-disabled-border );
|
|
49
|
+
|
|
50
|
+
.k-input-prefix {
|
|
51
|
+
color: var( --kendo-input-prefix-disabled-text, #{$kendo-input-prefix-disabled-text} );
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.k-input-suffix {
|
|
55
|
+
color: var( --kendo-input-prefix-disabled-text, #{$kendo-input-prefix-disabled-text} );
|
|
56
|
+
}
|
|
49
57
|
}
|
|
50
58
|
|
|
51
59
|
// Invalid
|
|
@@ -73,6 +81,45 @@
|
|
|
73
81
|
}
|
|
74
82
|
}
|
|
75
83
|
}
|
|
84
|
+
|
|
85
|
+
// Valid
|
|
86
|
+
&.k-valid,
|
|
87
|
+
&.ng-valid.ng-touched,
|
|
88
|
+
&.ng-valid.ng-dirty {
|
|
89
|
+
--INTERNAL--kendo-input-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
|
|
90
|
+
|
|
91
|
+
&::after {
|
|
92
|
+
border-color: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.k-input-validation-icon {
|
|
96
|
+
color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} );
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&:focus:hover,
|
|
100
|
+
&.k-focus:hover,
|
|
101
|
+
&:focus.k-hover,
|
|
102
|
+
&.k-focus.k-hover {
|
|
103
|
+
--INTERNAL--kendo-input-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
|
|
104
|
+
|
|
105
|
+
.k-input-validation-icon {
|
|
106
|
+
color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} );
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// Prefix & Suffix
|
|
112
|
+
.k-input-prefix {
|
|
113
|
+
color: var( --kendo-input-prefix-text, #{$kendo-input-prefix-text} );
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.k-input-suffix {
|
|
117
|
+
color: var( --kendo-input-suffix-text, #{$kendo-input-suffix-text} );
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.k-input-separator {
|
|
121
|
+
border-color: var( --kendo-input-separator-text, #{$kendo-input-separator-text} );
|
|
122
|
+
}
|
|
76
123
|
}
|
|
77
124
|
|
|
78
125
|
.k-picker {
|
|
@@ -145,6 +192,32 @@
|
|
|
145
192
|
}
|
|
146
193
|
}
|
|
147
194
|
}
|
|
195
|
+
|
|
196
|
+
// Valid
|
|
197
|
+
&.k-valid,
|
|
198
|
+
&.ng-valid.ng-touched,
|
|
199
|
+
&.ng-valid.ng-dirty {
|
|
200
|
+
--INTERNAL--kendo-picker-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
|
|
201
|
+
|
|
202
|
+
&::after {
|
|
203
|
+
border-color: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.k-input-validation-icon {
|
|
207
|
+
color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} );
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&:focus:hover,
|
|
211
|
+
&.k-focus:hover,
|
|
212
|
+
&:focus.k-hover,
|
|
213
|
+
&.k-focus.k-hover {
|
|
214
|
+
--INTERNAL--kendo-picker-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
|
|
215
|
+
|
|
216
|
+
.k-input-validation-icon {
|
|
217
|
+
color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} );
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|
|
148
221
|
}
|
|
149
222
|
|
|
150
223
|
@each $component, $fill-modes in $kendo-input-theme-colors {
|
|
@@ -628,6 +628,24 @@ $kendo-input-prefix-bg: k-get-theme-color-var( neutral-20 ) !default;
|
|
|
628
628
|
/// @group input
|
|
629
629
|
$kendo-input-suffix-bg: k-get-theme-color-var( neutral-20 ) !default;
|
|
630
630
|
|
|
631
|
+
/// The color of the Input separator.
|
|
632
|
+
/// @group input
|
|
633
|
+
$kendo-input-separator-text: k-get-theme-color-var( neutral-30 ) !default;
|
|
634
|
+
|
|
635
|
+
/// The text color of the Input prefix.
|
|
636
|
+
/// @group input
|
|
637
|
+
$kendo-input-prefix-text: k-get-theme-color-var( neutral-130 ) !default;
|
|
638
|
+
/// The text color of the Input suffix.
|
|
639
|
+
/// @group input
|
|
640
|
+
$kendo-input-suffix-text: k-get-theme-color-var( neutral-130 ) !default;
|
|
641
|
+
|
|
642
|
+
/// The text color of the disabled Input prefix.
|
|
643
|
+
/// @group input
|
|
644
|
+
$kendo-input-prefix-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
|
|
645
|
+
/// The text color of the disabled Input suffix.
|
|
646
|
+
/// @group input
|
|
647
|
+
$kendo-input-suffix-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
|
|
648
|
+
|
|
631
649
|
/// The border color of the invalid Input components.
|
|
632
650
|
/// @group input
|
|
633
651
|
$kendo-input-invalid-border: var( --kendo-invalid-border, #{$kendo-invalid-border} ) !default;
|
|
@@ -635,6 +653,13 @@ $kendo-input-invalid-border: var( --kendo-invalid-border, #{$kendo-invalid-borde
|
|
|
635
653
|
/// @group input
|
|
636
654
|
$kendo-input-invalid-text: var( --kendo-invalid-text, #{$kendo-invalid-text} ) !default;
|
|
637
655
|
|
|
656
|
+
/// The border color of the valid Input components.
|
|
657
|
+
/// @group input
|
|
658
|
+
$kendo-input-valid-border: var( --kendo-valid-border, #{$kendo-valid-border} ) !default;
|
|
659
|
+
/// The text color of the valid Input components.
|
|
660
|
+
/// @group input
|
|
661
|
+
$kendo-input-valid-text: var( --kendo-valid-text, #{$kendo-valid-text} ) !default;
|
|
662
|
+
|
|
638
663
|
/// The text color of the Input placeholder.
|
|
639
664
|
/// @group input
|
|
640
665
|
$kendo-input-placeholder-text: k-get-theme-color-var( neutral-130 ) !default;
|