@progress/kendo-theme-fluent 10.2.0-dev.1 → 10.2.0-dev.3
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 +1 -1
- package/dist/fluent-main-dark.css +1 -1
- package/dist/fluent-main.css +1 -1
- package/dist/meta/variables.json +20 -20
- package/lib/swatches/all.json +1 -1
- package/lib/swatches/fluent-main-dark.json +1 -1
- package/lib/swatches/fluent-main.json +1 -1
- package/package.json +4 -4
- package/scss/chart-wizard/_layout.scss +0 -1
- package/scss/chip/_layout.scss +4 -5
- package/scss/colorgradient/_layout.scss +4 -0
- package/scss/core/_index.scss +3 -3
- package/scss/core/motion/_index.scss +2 -0
- package/scss/dock-manager/_layout.scss +1 -1
- package/scss/grid/_layout.scss +5 -0
- package/scss/input/_layout.scss +2 -2
- package/scss/input/_variables.scss +4 -0
- package/scss/tabstrip/_layout.scss +1 -0
- package/scss/tabstrip/_theme.scss +10 -13
- package/scss/toolbar/_theme.scss +18 -21
- package/scss/core/_variables.scss +0 -15
package/dist/meta/variables.json
CHANGED
|
@@ -35,26 +35,6 @@
|
|
|
35
35
|
"type": "String",
|
|
36
36
|
"value": "var(--kendo-elevation-8, none)"
|
|
37
37
|
},
|
|
38
|
-
"kendo-enable-typography": {
|
|
39
|
-
"type": "Bool",
|
|
40
|
-
"value": "false"
|
|
41
|
-
},
|
|
42
|
-
"kendo-use-input-button-width": {
|
|
43
|
-
"type": "Bool",
|
|
44
|
-
"value": "true"
|
|
45
|
-
},
|
|
46
|
-
"kendo-use-input-spinner-width": {
|
|
47
|
-
"type": "Bool",
|
|
48
|
-
"value": "true"
|
|
49
|
-
},
|
|
50
|
-
"kendo-use-input-spinner-icon-offset": {
|
|
51
|
-
"type": "Bool",
|
|
52
|
-
"value": "false"
|
|
53
|
-
},
|
|
54
|
-
"kendo-transition": {
|
|
55
|
-
"type": "List",
|
|
56
|
-
"value": "(color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out)"
|
|
57
|
-
},
|
|
58
38
|
"kendo-enable-color-system": {
|
|
59
39
|
"type": "Bool",
|
|
60
40
|
"value": "true"
|
|
@@ -91,6 +71,10 @@
|
|
|
91
71
|
"type": "Number",
|
|
92
72
|
"value": "4.5"
|
|
93
73
|
},
|
|
74
|
+
"kendo-enable-typography": {
|
|
75
|
+
"type": "Bool",
|
|
76
|
+
"value": "false"
|
|
77
|
+
},
|
|
94
78
|
"equilateral-index": {
|
|
95
79
|
"type": "Number",
|
|
96
80
|
"value": "1.7320508076"
|
|
@@ -1254,6 +1238,10 @@
|
|
|
1254
1238
|
"full": "9999px"
|
|
1255
1239
|
}
|
|
1256
1240
|
},
|
|
1241
|
+
"kendo-transition": {
|
|
1242
|
+
"type": "List",
|
|
1243
|
+
"value": "(color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out)"
|
|
1244
|
+
},
|
|
1257
1245
|
"kendo-body-bg": {
|
|
1258
1246
|
"type": "String",
|
|
1259
1247
|
"value": "var(--kendo-color-app-surface, #ffffff)"
|
|
@@ -5571,6 +5559,18 @@
|
|
|
5571
5559
|
"type": "Number",
|
|
5572
5560
|
"value": "1"
|
|
5573
5561
|
},
|
|
5562
|
+
"kendo-use-input-button-width": {
|
|
5563
|
+
"type": "Bool",
|
|
5564
|
+
"value": "true"
|
|
5565
|
+
},
|
|
5566
|
+
"kendo-use-input-spinner-width": {
|
|
5567
|
+
"type": "Bool",
|
|
5568
|
+
"value": "true"
|
|
5569
|
+
},
|
|
5570
|
+
"kendo-use-input-spinner-icon-offset": {
|
|
5571
|
+
"type": "Bool",
|
|
5572
|
+
"value": "false"
|
|
5573
|
+
},
|
|
5574
5574
|
"kendo-floating-label-scale": {
|
|
5575
5575
|
"type": "Number",
|
|
5576
5576
|
"value": "1"
|
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": "10.2.0-dev.
|
|
4
|
+
"version": "10.2.0-dev.3",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -54,12 +54,12 @@
|
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
57
|
-
"@progress/kendo-theme-core": "10.2.0-dev.
|
|
58
|
-
"@progress/kendo-theme-utils": "10.2.0-dev.
|
|
57
|
+
"@progress/kendo-theme-core": "10.2.0-dev.3",
|
|
58
|
+
"@progress/kendo-theme-utils": "10.2.0-dev.3"
|
|
59
59
|
},
|
|
60
60
|
"directories": {
|
|
61
61
|
"doc": "docs",
|
|
62
62
|
"lib": "lib"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "082662582bfa2df1e3ee8bbeab7d395ec47d944f"
|
|
65
65
|
}
|
package/scss/chip/_layout.scss
CHANGED
|
@@ -55,15 +55,10 @@
|
|
|
55
55
|
|
|
56
56
|
// Chip content
|
|
57
57
|
.k-chip-content {
|
|
58
|
-
padding-block: .5em;
|
|
59
|
-
padding-inline: 0;
|
|
60
|
-
margin-block: -.5em;
|
|
61
|
-
margin-inline: 0;
|
|
62
58
|
min-width: 0;
|
|
63
59
|
display: flex;
|
|
64
60
|
flex-flow: row nowrap;
|
|
65
61
|
align-items: center;
|
|
66
|
-
overflow: hidden;
|
|
67
62
|
flex: 1 1 auto;
|
|
68
63
|
|
|
69
64
|
// Adjustment for kendo-icon-wrapper
|
|
@@ -82,6 +77,10 @@
|
|
|
82
77
|
// Chip text
|
|
83
78
|
.k-chip-text,
|
|
84
79
|
.k-chip-label {
|
|
80
|
+
padding-block: .5em;
|
|
81
|
+
padding-inline: 0;
|
|
82
|
+
margin-block: -.5em;
|
|
83
|
+
margin-inline: 0;
|
|
85
84
|
white-space: nowrap;
|
|
86
85
|
text-overflow: ellipsis;
|
|
87
86
|
overflow: hidden;
|
|
@@ -64,6 +64,10 @@
|
|
|
64
64
|
flex-shrink: 0;
|
|
65
65
|
gap: var( --kendo-color-gradient-canvas-spacing, #{$kendo-color-gradient-canvas-spacing} );
|
|
66
66
|
}
|
|
67
|
+
|
|
68
|
+
&.k-vstack {
|
|
69
|
+
padding-inline: calc( ($kendo-color-gradient-draghandle-width + $kendo-color-gradient-draghandle-border-width) / 2 );
|
|
70
|
+
}
|
|
67
71
|
}
|
|
68
72
|
|
|
69
73
|
// DragHandle
|
package/scss/core/_index.scss
CHANGED
|
@@ -16,8 +16,7 @@
|
|
|
16
16
|
// Radii
|
|
17
17
|
@use "./border-radii/_index.scss" as *;
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
@forward "./_variables.scss";
|
|
19
|
+
@use "./motion/_index.scss" as *;
|
|
21
20
|
|
|
22
21
|
@forward "@progress/kendo-theme-core/scss/index.scss" with (
|
|
23
22
|
$kendo-enable-color-system: $kendo-enable-color-system !default,
|
|
@@ -47,7 +46,8 @@
|
|
|
47
46
|
$kendo-spacing: $kendo-spacing !default,
|
|
48
47
|
// Radii
|
|
49
48
|
$_default-border-radii: $kendo-border-radii,
|
|
50
|
-
$kendo-border-radii: $kendo-border-radii !default
|
|
49
|
+
$kendo-border-radii: $kendo-border-radii !default,
|
|
50
|
+
$kendo-transition: $kendo-transition !default,
|
|
51
51
|
);
|
|
52
52
|
|
|
53
53
|
@forward "./color-system/_swatch-legacy.scss";
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
@use "../core/_variables.scss" as *;
|
|
2
1
|
@use "./_variables.scss" as *;
|
|
3
2
|
@use "../core/typography/_index.scss" as *;
|
|
4
3
|
|
|
@@ -132,6 +131,7 @@
|
|
|
132
131
|
flex-direction: column;
|
|
133
132
|
position: relative;
|
|
134
133
|
flex: 1 1 auto;
|
|
134
|
+
width: 100%;
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
.k-splitbar {
|
package/scss/grid/_layout.scss
CHANGED
package/scss/input/_layout.scss
CHANGED
|
@@ -193,7 +193,7 @@
|
|
|
193
193
|
|
|
194
194
|
// Icon picker
|
|
195
195
|
.k-icon-picker {
|
|
196
|
-
.k-input-inner {
|
|
196
|
+
> .k-input-inner {
|
|
197
197
|
padding: 0;
|
|
198
198
|
box-sizing: content-box;
|
|
199
199
|
justify-content: center;
|
|
@@ -548,7 +548,7 @@
|
|
|
548
548
|
width: if( $kendo-use-input-spinner-width, var( --kendo-input-spinner-width, #{$_button-width} ), auto );
|
|
549
549
|
}
|
|
550
550
|
|
|
551
|
-
&.k-icon-picker .k-input-inner {
|
|
551
|
+
&.k-icon-picker > .k-input-inner {
|
|
552
552
|
width: var( --kendo-input-icon-picker-width, #{$_button-width} );
|
|
553
553
|
}
|
|
554
554
|
|
|
@@ -660,3 +660,7 @@ $kendo-input-clear-value-hover-text: inherit !default;
|
|
|
660
660
|
/// The opacity of the hovered Input clear value icon.
|
|
661
661
|
/// @group input
|
|
662
662
|
$kendo-input-clear-value-hover-opacity: 1 !default;
|
|
663
|
+
|
|
664
|
+
$kendo-use-input-button-width: true !default;
|
|
665
|
+
$kendo-use-input-spinner-width: true !default;
|
|
666
|
+
$kendo-use-input-spinner-icon-offset: false !default;
|
|
@@ -129,19 +129,16 @@
|
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
// RTL
|
|
132
|
-
.k-rtl,
|
|
133
|
-
|
|
134
|
-
&.k-tabstrip-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
&::after {
|
|
143
|
-
background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
|
|
144
|
-
}
|
|
132
|
+
:is(.k-rtl .k-tabstrip-scrollable-overlay, [dir="rtl"] .k-tabstrip-scrollable-overlay, .k-tabstrip-scrollable-overlay.k-rtl, .k-tabstrip-scrollable-overlay[dir="rtl"] ) {
|
|
133
|
+
&.k-tabstrip-top,
|
|
134
|
+
&.k-tabstrip-bottom {
|
|
135
|
+
.k-tabstrip-items-wrapper {
|
|
136
|
+
&::before {
|
|
137
|
+
background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&::after {
|
|
141
|
+
background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
|
|
145
142
|
}
|
|
146
143
|
}
|
|
147
144
|
}
|
package/scss/toolbar/_theme.scss
CHANGED
|
@@ -146,35 +146,32 @@
|
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
// RTL
|
|
149
|
-
.k-rtl,
|
|
150
|
-
|
|
151
|
-
|
|
149
|
+
:is(.k-rtl .k-toolbar-scrollable-overlay, [dir="rtl"] .k-toolbar-scrollable-overlay, .k-toolbar-scrollable-overlay.k-rtl, .k-toolbar-scrollable-overlay[dir="rtl"] ) {
|
|
150
|
+
&::before {
|
|
151
|
+
background: linear-gradient(270deg, var(--kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay}));
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&::after {
|
|
155
|
+
background: linear-gradient(90deg, var(--kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay}));
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
&.k-toolbar-outline {
|
|
152
159
|
&::before {
|
|
153
|
-
background: linear-gradient(270deg, var(
|
|
160
|
+
background: linear-gradient(270deg, var(--kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay}));
|
|
154
161
|
}
|
|
155
162
|
|
|
156
163
|
&::after {
|
|
157
|
-
background: linear-gradient(90deg, var(
|
|
164
|
+
background: linear-gradient(90deg, var(--kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay}));
|
|
158
165
|
}
|
|
166
|
+
}
|
|
159
167
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
&::after {
|
|
166
|
-
background: linear-gradient(90deg, var( --kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay} ));
|
|
167
|
-
}
|
|
168
|
+
&.k-toolbar-flat {
|
|
169
|
+
&::before {
|
|
170
|
+
background: linear-gradient(270deg, var(--kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay}));
|
|
168
171
|
}
|
|
169
172
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
background: linear-gradient(270deg, var( --kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay} ));
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
&::after {
|
|
176
|
-
background: linear-gradient(90deg, var( --kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay} ));
|
|
177
|
-
}
|
|
173
|
+
&::after {
|
|
174
|
+
background: linear-gradient(90deg, var(--kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay}));
|
|
178
175
|
}
|
|
179
176
|
}
|
|
180
177
|
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
// Options
|
|
2
|
-
$kendo-enable-typography: false !default;
|
|
3
|
-
|
|
4
|
-
$kendo-use-input-button-width: true !default;
|
|
5
|
-
$kendo-use-input-spinner-width: true !default;
|
|
6
|
-
$kendo-use-input-spinner-icon-offset: false !default;
|
|
7
|
-
|
|
8
|
-
// Default transition
|
|
9
|
-
$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default;
|
|
10
|
-
|
|
11
|
-
@mixin kendo-transition--styles() {
|
|
12
|
-
:root {
|
|
13
|
-
--kendo-transition: #{$kendo-transition};
|
|
14
|
-
}
|
|
15
|
-
}
|