@progress/kendo-theme-default 5.4.2-dev.3 → 5.4.2-dev.6
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 +86 -39
- package/dist/all.scss +179 -84
- package/lib/swatches/default-blue.json +1 -1
- package/lib/swatches/default-dataviz-v4.json +1 -1
- package/lib/swatches/default-green.json +1 -1
- package/lib/swatches/default-main-dark.json +1 -1
- package/lib/swatches/default-main.json +1 -1
- package/lib/swatches/default-nordic.json +1 -1
- package/lib/swatches/default-ocean-blue.json +1 -1
- package/lib/swatches/default-orange.json +1 -1
- package/lib/swatches/default-purple.json +1 -1
- package/lib/swatches/default-turquoise.json +1 -1
- package/lib/swatches/default-urban.json +1 -1
- package/package.json +2 -2
- package/scss/colorgradient/_layout.scss +3 -0
- package/scss/core/mixins/_index.scss +0 -2
- package/scss/drawer/_layout.scss +15 -0
- package/scss/drawer/_variables.scss +3 -0
- package/scss/input/_layout.scss +1 -13
- package/scss/input/_theme.scss +123 -15
- package/scss/input/_variables.scss +22 -19
- package/scss/panelbar/_layout.scss +1 -1
- package/scss/panelbar/_variables.scss +1 -0
- package/scss/slider/_layout.scss +10 -0
- package/scss/core/mixins/_input-ripple.scss +0 -32
package/dist/all.css
CHANGED
|
@@ -13728,31 +13728,17 @@ textarea.k-input-inner {
|
|
|
13728
13728
|
|
|
13729
13729
|
.k-input-flat,
|
|
13730
13730
|
.k-picker-flat {
|
|
13731
|
-
border-radius: 0 !important;
|
|
13731
|
+
border-bottom-right-radius: 0 !important;
|
|
13732
|
+
border-bottom-left-radius: 0 !important;
|
|
13732
13733
|
border-width: 1px 0;
|
|
13733
13734
|
border-top-color: transparent !important;
|
|
13734
13735
|
background-image: none !important;
|
|
13735
13736
|
}
|
|
13736
13737
|
|
|
13737
|
-
.k-input-flat:focus, .k-input-flat.k-focus,
|
|
13738
|
-
.k-picker-flat:focus,
|
|
13739
|
-
.k-picker-flat.k-focus {
|
|
13740
|
-
border-radius: 4px 4px 0px 0px !important;
|
|
13741
|
-
}
|
|
13742
|
-
|
|
13743
|
-
.k-input-flat:focus-within,
|
|
13744
|
-
.k-picker-flat:focus-within {
|
|
13745
|
-
border-radius: 4px 4px 0px 0px !important;
|
|
13746
|
-
}
|
|
13747
|
-
|
|
13748
13738
|
.k-input-outline {
|
|
13749
13739
|
background: none !important;
|
|
13750
13740
|
}
|
|
13751
13741
|
|
|
13752
|
-
.k-picker.k-picker-flat {
|
|
13753
|
-
border-radius: 4px 4px 0px 0px !important;
|
|
13754
|
-
}
|
|
13755
|
-
|
|
13756
13742
|
.k-input-sm,
|
|
13757
13743
|
.k-picker-sm {
|
|
13758
13744
|
font-size: 14px;
|
|
@@ -13977,63 +13963,64 @@ textarea.k-input-inner {
|
|
|
13977
13963
|
animation-name: autoFillEnd;
|
|
13978
13964
|
}
|
|
13979
13965
|
|
|
13980
|
-
.k-input {
|
|
13966
|
+
.k-input-solid {
|
|
13981
13967
|
border-color: rgba(0, 0, 0, 0.08);
|
|
13982
13968
|
color: #424242;
|
|
13983
13969
|
background-color: #ffffff;
|
|
13984
13970
|
}
|
|
13985
13971
|
|
|
13986
|
-
.k-input:hover, .k-input.k-hover {
|
|
13972
|
+
.k-input-solid:hover, .k-input-solid.k-hover {
|
|
13987
13973
|
border-color: rgba(0, 0, 0, 0.16);
|
|
13988
13974
|
}
|
|
13989
13975
|
|
|
13990
|
-
.k-input:focus, .k-input.k-focus {
|
|
13976
|
+
.k-input-solid:focus, .k-input-solid.k-focus {
|
|
13991
13977
|
border-color: rgba(0, 0, 0, 0.16);
|
|
13992
13978
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
13993
13979
|
}
|
|
13994
13980
|
|
|
13995
|
-
.k-input:focus-within {
|
|
13981
|
+
.k-input-solid:focus-within {
|
|
13996
13982
|
border-color: rgba(0, 0, 0, 0.16);
|
|
13997
13983
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
13998
13984
|
}
|
|
13999
13985
|
|
|
14000
|
-
.k-input.k-invalid, .k-input.ng-invalid.ng-touched, .k-input.ng-invalid.ng-dirty {
|
|
13986
|
+
.k-input-solid.k-invalid, .k-input-solid.ng-invalid.ng-touched, .k-input-solid.ng-invalid.ng-dirty {
|
|
14001
13987
|
border-color: #f31700;
|
|
14002
13988
|
}
|
|
14003
13989
|
|
|
14004
|
-
.k-input.k-invalid .k-input-validation-icon, .k-input.ng-invalid.ng-touched .k-input-validation-icon, .k-input.ng-invalid.ng-dirty .k-input-validation-icon {
|
|
13990
|
+
.k-input-solid.k-invalid .k-input-validation-icon, .k-input-solid.ng-invalid.ng-touched .k-input-validation-icon, .k-input-solid.ng-invalid.ng-dirty .k-input-validation-icon {
|
|
14005
13991
|
color: #f31700;
|
|
14006
13992
|
}
|
|
14007
13993
|
|
|
14008
|
-
.k-picker {
|
|
13994
|
+
.k-picker-solid {
|
|
14009
13995
|
border-color: rgba(0, 0, 0, 0.08);
|
|
14010
13996
|
color: #424242;
|
|
14011
13997
|
background-color: #f5f5f5;
|
|
14012
13998
|
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
|
|
14013
13999
|
}
|
|
14014
14000
|
|
|
14015
|
-
.k-picker:hover, .k-picker.k-hover {
|
|
14001
|
+
.k-picker-solid:hover, .k-picker-solid.k-hover {
|
|
14016
14002
|
background-color: #ebebeb;
|
|
14017
14003
|
}
|
|
14018
14004
|
|
|
14019
|
-
.k-picker:focus, .k-picker.k-focus {
|
|
14005
|
+
.k-picker-solid:focus, .k-picker-solid.k-focus {
|
|
14020
14006
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14021
14007
|
}
|
|
14022
14008
|
|
|
14023
|
-
.k-picker:focus-within {
|
|
14009
|
+
.k-picker-solid:focus-within {
|
|
14024
14010
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14025
14011
|
}
|
|
14026
14012
|
|
|
14027
|
-
.k-picker.k-invalid, .k-picker.ng-invalid.ng-touched, .k-picker.ng-invalid.ng-dirty {
|
|
14013
|
+
.k-picker-solid.k-invalid, .k-picker-solid.ng-invalid.ng-touched, .k-picker-solid.ng-invalid.ng-dirty {
|
|
14028
14014
|
border-color: #f31700;
|
|
14029
14015
|
}
|
|
14030
14016
|
|
|
14031
|
-
.k-picker.k-invalid .k-input-validation-icon, .k-picker.ng-invalid.ng-touched .k-input-validation-icon, .k-picker.ng-invalid.ng-dirty .k-input-validation-icon {
|
|
14017
|
+
.k-picker-solid.k-invalid .k-input-validation-icon, .k-picker-solid.ng-invalid.ng-touched .k-input-validation-icon, .k-picker-solid.ng-invalid.ng-dirty .k-input-validation-icon {
|
|
14032
14018
|
color: #f31700;
|
|
14033
14019
|
}
|
|
14034
14020
|
|
|
14035
14021
|
.k-input-outline {
|
|
14036
14022
|
border-color: rgba(66, 66, 66, 0.5);
|
|
14023
|
+
color: #424242;
|
|
14037
14024
|
}
|
|
14038
14025
|
|
|
14039
14026
|
.k-input-outline > .k-input-button {
|
|
@@ -14054,7 +14041,10 @@ textarea.k-input-inner {
|
|
|
14054
14041
|
}
|
|
14055
14042
|
|
|
14056
14043
|
.k-input-outline:focus, .k-input-outline.k-focus {
|
|
14057
|
-
|
|
14044
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14045
|
+
}
|
|
14046
|
+
|
|
14047
|
+
.k-input-outline:focus-within {
|
|
14058
14048
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14059
14049
|
}
|
|
14060
14050
|
|
|
@@ -14067,24 +14057,22 @@ textarea.k-input-inner {
|
|
|
14067
14057
|
}
|
|
14068
14058
|
|
|
14069
14059
|
.k-picker-outline {
|
|
14070
|
-
border-color:
|
|
14071
|
-
|
|
14060
|
+
border-color: rgba(66, 66, 66, 0.5);
|
|
14061
|
+
color: #424242;
|
|
14072
14062
|
}
|
|
14073
14063
|
|
|
14074
14064
|
.k-picker-outline:hover, .k-picker-outline.k-hover {
|
|
14075
|
-
color: #
|
|
14065
|
+
border-color: #424242;
|
|
14066
|
+
color: white;
|
|
14076
14067
|
background-color: #424242;
|
|
14077
14068
|
}
|
|
14078
14069
|
|
|
14079
14070
|
.k-picker-outline:focus, .k-picker-outline.k-focus {
|
|
14080
|
-
border-color: #424242;
|
|
14081
|
-
background-color: transparent;
|
|
14082
14071
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14083
14072
|
}
|
|
14084
14073
|
|
|
14085
|
-
.k-picker-outline:focus
|
|
14086
|
-
|
|
14087
|
-
background-color: #424242;
|
|
14074
|
+
.k-picker-outline:focus-within {
|
|
14075
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14088
14076
|
}
|
|
14089
14077
|
|
|
14090
14078
|
.k-picker-outline.k-invalid, .k-picker-outline.ng-invalid.ng-touched, .k-picker-outline.ng-invalid.ng-dirty {
|
|
@@ -14098,7 +14086,18 @@ textarea.k-input-inner {
|
|
|
14098
14086
|
.k-input-flat {
|
|
14099
14087
|
border-color: rgba(0, 0, 0, 0.08);
|
|
14100
14088
|
color: #424242;
|
|
14101
|
-
|
|
14089
|
+
}
|
|
14090
|
+
|
|
14091
|
+
.k-input-flat:hover, .k-input-flat.k-hover {
|
|
14092
|
+
border-color: rgba(0, 0, 0, 0.16);
|
|
14093
|
+
}
|
|
14094
|
+
|
|
14095
|
+
.k-input-flat:focus, .k-input-flat.k-focus {
|
|
14096
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14097
|
+
}
|
|
14098
|
+
|
|
14099
|
+
.k-input-flat:focus-within {
|
|
14100
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14102
14101
|
}
|
|
14103
14102
|
|
|
14104
14103
|
.k-input-flat.k-invalid, .k-input-flat.ng-invalid.ng-touched, .k-input-flat.ng-invalid.ng-dirty {
|
|
@@ -14112,7 +14111,6 @@ textarea.k-input-inner {
|
|
|
14112
14111
|
.k-picker-flat {
|
|
14113
14112
|
border-color: rgba(0, 0, 0, 0.08);
|
|
14114
14113
|
color: #424242;
|
|
14115
|
-
background-color: transparent;
|
|
14116
14114
|
}
|
|
14117
14115
|
|
|
14118
14116
|
.k-picker-flat:hover, .k-picker-flat.k-hover {
|
|
@@ -14120,6 +14118,14 @@ textarea.k-input-inner {
|
|
|
14120
14118
|
background-color: rgba(66, 66, 66, 0.04);
|
|
14121
14119
|
}
|
|
14122
14120
|
|
|
14121
|
+
.k-picker-flat:focus, .k-picker-flat.k-focus {
|
|
14122
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14123
|
+
}
|
|
14124
|
+
|
|
14125
|
+
.k-picker-flat:focus-within {
|
|
14126
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14127
|
+
}
|
|
14128
|
+
|
|
14123
14129
|
.k-picker-flat.k-invalid, .k-picker-flat.ng-invalid.ng-touched, .k-picker-flat.ng-invalid.ng-dirty {
|
|
14124
14130
|
border-color: #f31700;
|
|
14125
14131
|
}
|
|
@@ -17766,6 +17772,16 @@ kendo-label > .k-label {
|
|
|
17766
17772
|
flex: 0 0 1px;
|
|
17767
17773
|
}
|
|
17768
17774
|
|
|
17775
|
+
.k-slider .k-slider-track-wrap .k-tick-horizontal {
|
|
17776
|
+
width: 1px;
|
|
17777
|
+
min-height: 100%;
|
|
17778
|
+
}
|
|
17779
|
+
|
|
17780
|
+
.k-slider .k-slider-track-wrap .k-tick-vertical {
|
|
17781
|
+
width: 100%;
|
|
17782
|
+
min-height: 1px;
|
|
17783
|
+
}
|
|
17784
|
+
|
|
17769
17785
|
.k-slider .k-slider-track-wrap .k-draghandle {
|
|
17770
17786
|
position: absolute;
|
|
17771
17787
|
}
|
|
@@ -19319,6 +19335,9 @@ kendo-label > .k-label {
|
|
|
19319
19335
|
}
|
|
19320
19336
|
|
|
19321
19337
|
.k-colorgradient-inputs .k-input-inner {
|
|
19338
|
+
padding-inline-start: 2px;
|
|
19339
|
+
padding-inline-end: 2px;
|
|
19340
|
+
text-align: center;
|
|
19322
19341
|
text-overflow: clip;
|
|
19323
19342
|
}
|
|
19324
19343
|
|
|
@@ -21933,6 +21952,7 @@ kendo-drawer .k-drawer-wrapper {
|
|
|
21933
21952
|
|
|
21934
21953
|
.k-drawer {
|
|
21935
21954
|
height: 100%;
|
|
21955
|
+
max-width: 100%;
|
|
21936
21956
|
border-width: 0;
|
|
21937
21957
|
border-style: solid;
|
|
21938
21958
|
box-sizing: border-box;
|
|
@@ -22077,6 +22097,33 @@ kendo-drawer .k-drawer-wrapper {
|
|
|
22077
22097
|
padding: 0 8px;
|
|
22078
22098
|
display: inline-block;
|
|
22079
22099
|
white-space: nowrap;
|
|
22100
|
+
overflow: hidden;
|
|
22101
|
+
text-overflow: ellipsis;
|
|
22102
|
+
}
|
|
22103
|
+
|
|
22104
|
+
.k-drawer-item .k-drawer-toggle {
|
|
22105
|
+
margin-inline-start: auto;
|
|
22106
|
+
cursor: pointer;
|
|
22107
|
+
}
|
|
22108
|
+
|
|
22109
|
+
.k-drawer-item.k-level-1 {
|
|
22110
|
+
padding-inline-start: 16px;
|
|
22111
|
+
}
|
|
22112
|
+
|
|
22113
|
+
.k-drawer-item.k-level-2 {
|
|
22114
|
+
padding-inline-start: 32px;
|
|
22115
|
+
}
|
|
22116
|
+
|
|
22117
|
+
.k-drawer-item.k-level-3 {
|
|
22118
|
+
padding-inline-start: 48px;
|
|
22119
|
+
}
|
|
22120
|
+
|
|
22121
|
+
.k-drawer-item.k-level-4 {
|
|
22122
|
+
padding-inline-start: 64px;
|
|
22123
|
+
}
|
|
22124
|
+
|
|
22125
|
+
.k-drawer-item.k-level-5 {
|
|
22126
|
+
padding-inline-start: 80px;
|
|
22080
22127
|
}
|
|
22081
22128
|
|
|
22082
22129
|
.k-drawer-separator {
|