@progress/kendo-theme-fluent 6.5.0-dev.2 → 6.5.1-dev.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.
@@ -3,7 +3,7 @@
3
3
  "name": "All",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "6.5.0-dev.2",
6
+ "version": "6.5.1-dev.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Fluent Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "6.5.0-dev.2",
6
+ "version": "6.5.1-dev.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
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": "6.5.0-dev.2",
4
+ "version": "6.5.1-dev.0",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -52,8 +52,8 @@
52
52
  },
53
53
  "dependencies": {
54
54
  "@progress/kendo-font-icons": "1.5.0",
55
- "@progress/kendo-theme-core": "6.5.0-dev.2",
56
- "@progress/kendo-theme-utils": "6.5.0-dev.2"
55
+ "@progress/kendo-theme-core": "6.5.1-dev.0",
56
+ "@progress/kendo-theme-utils": "6.5.1-dev.0"
57
57
  },
58
- "gitHead": "a2917c47e4830e54fac051c80e5ae9d26f894fa7"
58
+ "gitHead": "d93c9d337e921ccda4d10b095a847e52ebdddfce"
59
59
  }
@@ -1,4 +1,3 @@
1
- @use "sass:map";
2
1
  @use "../core/" as *;
3
2
  @use "./_variables.scss" as *;
4
3
 
@@ -15,8 +14,8 @@
15
14
  box-sizing: border-box;
16
15
  outline: 0;
17
16
  font-family: var( --kendo-breadcrumb-font-family, #{$kendo-breadcrumb-font-family} );
18
- font-size: var( --INTERNAL--kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
19
- line-height: var( --INTERNAL--kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
17
+ font-size: var( --kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
18
+ line-height: var( --kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
20
19
  display: flex;
21
20
  flex-direction: row;
22
21
  -webkit-touch-callout: none;
@@ -68,8 +67,8 @@
68
67
  .k-breadcrumb-link,
69
68
  .k-breadcrumb-root-link {
70
69
  @include border-radius( var( --kendo-breadcrumb-border-radius, #{$kendo-breadcrumb-link-border-radius} ) );
71
- padding-inline: var( --INTERNAL--kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
72
- padding-block: var( --INTERNAL--kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} );
70
+ padding-inline: var( --kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
71
+ padding-block: var( --kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} );
73
72
  color: var( --kendo-breadcrumb-link-initial-text, #{$kendo-breadcrumb-link-initial-text} );
74
73
  text-decoration: none;
75
74
  white-space: nowrap;
@@ -93,6 +92,10 @@
93
92
  }
94
93
  }
95
94
 
95
+ .k-breadcrumb-root-link {
96
+ margin-inline-end: var( --kendo-breadcrumb-root-link-spacing, #{$kendo-breadcrumb-root-link-spacing} );
97
+ }
98
+
96
99
  .k-breadcrumb-link > .k-image,
97
100
  .k-breadcrumb-icontext-link .k-icon,
98
101
  .k-breadcrumb-icontext-link .k-svg-icon {
@@ -100,8 +103,8 @@
100
103
  }
101
104
 
102
105
  .k-breadcrumb-icon-link {
103
- padding-inline: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
104
- padding-block: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
106
+ padding-inline: var( --kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
107
+ padding-block: var( --kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
105
108
  }
106
109
 
107
110
 
@@ -121,34 +124,4 @@
121
124
  }
122
125
  }
123
126
 
124
-
125
- // Sizing
126
- @each $size, $size-props in $kendo-breadcrumb-sizes {
127
- $_link-padding-x: map.get( $size-props, link-padding-x );
128
- $_link-padding-y: map.get( $size-props, link-padding-y );
129
- $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x );
130
- $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y );
131
- $_font-size: map.get( $size-props, font-size );
132
- $_line-height: map.get( $size-props, line-height );
133
-
134
- // Breadcrumb sizes
135
- .k-breadcrumb-#{$size} {
136
- --INTERNAL--kendo-breadcrumb-font-size: var( --kendo-breadcrumb-#{$size}-font-size, #{$_font-size} );
137
- --INTERNAL--kendo-breadcrumb-line-height: var( --kendo-breadcrumb-#{$size}-line-height, #{$_line-height} );
138
-
139
- // Breadcrumb links
140
- .k-breadcrumb-link,
141
- .k-breadcrumb-root-link {
142
- --INTERNAL--kendo-breadcrumb-link-padding-x: var( --kendo-breadcrumb-#{$size}-link-padding-x, #{$_link-padding-x} );
143
- --INTERNAL--kendo-breadcrumb-link-padding-y: var( --kendo-breadcrumb-#{$size}-link-padding-y, #{$_link-padding-y} );
144
- }
145
-
146
- // Breadcrumb icon links
147
- .k-breadcrumb-icon-link {
148
- --INTERNAL--kendo-breadcrumb-icon-link-padding-x: var( --kendo-breadcrumb-#{$size}-icon-link-padding-x, #{$_icon-link-padding-x} );
149
- --INTERNAL--kendo-breadcrumb-icon-link-padding-y: var( --kendo-breadcrumb-#{$size}-icon-link-padding-y, #{$_icon-link-padding-y} );
150
- }
151
- }
152
- }
153
-
154
127
  }
@@ -2,57 +2,34 @@
2
2
  @use "../core/" as *;
3
3
  @use "../icon/_variables.scss" as *;
4
4
 
5
- /// The horizontal margin of the Breadcrumb
5
+ /// The horizontal margin of the breadcrumb
6
6
  /// @group breadcrumb
7
7
  $kendo-breadcrumb-margin-x: 0px !default;
8
- /// The vertical margin of the Breadcrumb
8
+ /// The vertical margin of the breadcrumb
9
9
  /// @group breadcrumb
10
10
  $kendo-breadcrumb-margin-y: 0px !default;
11
- /// The horizontal padding of the Breadcrumb
11
+ /// The horizontal padding of the breadcrumb
12
12
  /// @group breadcrumb
13
13
  $kendo-breadcrumb-padding-x: 0px !default;
14
- /// The vertical padding of the Breadcrumb
14
+ /// The vertical padding of the breadcrumb
15
15
  /// @group breadcrumb
16
16
  $kendo-breadcrumb-padding-y: 0px !default;
17
-
18
- /// The width of the border around the Breadcrumb
17
+ /// The width of the border around the breadcrumb
19
18
  /// @group breadcrumb
20
19
  $kendo-breadcrumb-border-width: 0px !default;
21
-
22
- /// The font family of the Breadcrumb
20
+ /// The font family of the breadcrumb
23
21
  /// @group breadcrumb
24
22
  $kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
25
- /// The font size of the Breadcrumb
26
-
23
+ /// The font size of the breadcrumb
27
24
  /// @group breadcrumb
28
25
  $kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
29
- /// The font size of the small breadcrumb.
30
- /// @group breadcrumb
31
- $kendo-breadcrumb-sm-font-size: var( --kendo-font-size-md, inherit ) !default;
32
- /// The font size of the medium breadcrumb.
33
- /// @group breadcrumb
34
- $kendo-breadcrumb-md-font-size: var( --kendo-font-size-md, inherit ) !default;
35
- /// The font size of the large breadcrumb.
36
- /// @group breadcrumb
37
- $kendo-breadcrumb-lg-font-size: var( --kendo-font-size-md, inherit ) !default;
38
-
39
- /// The line height used along with the $kendo-font-size variable of the Breadcrumb.
26
+ /// The line height of the breadcrumb
40
27
  /// @group breadcrumb
41
28
  $kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
42
- /// The line height used along with the $kendo-font-size variable of the small breadcrumb.
43
- /// @group breadcrumb
44
- $kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default;
45
- /// The line height used along with the $kendo-font-size variable of the medium breadcrumb.
46
- /// @group breadcrumb
47
- $kendo-breadcrumb-md-line-height: var( --kendo-line-height, normal ) !default;
48
- /// The line height used along with the $kendo-font-size variable of the large breadcrumb.
49
- /// @group breadcrumb
50
- $kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
51
-
52
- /// The background color of the Breadcrumb
29
+ /// The background color of the breadcrumb
53
30
  /// @group breadcrumb
54
31
  $kendo-breadcrumb-bg: var( --kendo-component-bg, initial ) !default;
55
- /// The text color of the Breadcrumb
32
+ /// The text color of the breadcrumb
56
33
  /// @group breadcrumb
57
34
  $kendo-breadcrumb-text: k-get-theme-color-var( neutral-130 ) !default;
58
35
  /// The border color of the breadcrumb
@@ -62,42 +39,22 @@ $kendo-breadcrumb-border: transparent !default;
62
39
  /// @group breadcrumb
63
40
  $kendo-breadcrumb-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-30 ) !default;
64
41
 
65
- /// The horizontal padding of the Breadcrumb link
42
+ /// The horizontal padding of the breadcrumb link
66
43
  /// @group breadcrumb
67
44
  $kendo-breadcrumb-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
68
- /// The horizontal padding of the small Breadcrumb link.
69
- /// @group breadcrumb
70
- $kendo-breadcrumb-sm-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
71
- /// The horizontal padding of the medium Breadcrumb link.
72
- /// @group breadcrumb
73
- $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
74
- /// The horizontal padding of the large Breadcrumb link.
75
- /// @group breadcrumb
76
- $kendo-breadcrumb-lg-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
77
-
78
- /// The vertical padding of the Breadcrumb link
79
- /// @group breadcrumb
80
- $kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
81
- /// The vertical padding of the small Breadcrumb link.
45
+ /// The vertical padding of the breadcrumb link
82
46
  /// @group breadcrumb
83
- $kendo-breadcrumb-sm-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
84
- /// The vertical padding of the medium Breadcrumb link.
85
- /// @group breadcrumb
86
- $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
87
- /// The vertical padding of the large Breadcrumb link.
88
- /// @group breadcrumb
89
- $kendo-breadcrumb-lg-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
90
-
91
- /// The radius of the border around the Breadcrumb link
47
+ $kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
48
+ /// The radius of the border around the breadcrumb link
92
49
  /// @group breadcrumb
93
50
  $kendo-breadcrumb-link-border-radius: 0px !default;
94
- /// The initial text color of the Breadcrumb link
51
+ /// The initial text color of the breadcrumb link
95
52
  /// @group breadcrumb
96
53
  $kendo-breadcrumb-link-initial-text: inherit !default;
97
- /// The background color of the Breadcrumb link
54
+ /// The background color of the breadcrumb link
98
55
  /// @group breadcrumb
99
56
  $kendo-breadcrumb-link-bg: transparent !default;
100
- /// The text color of the Breadcrumb link
57
+ /// The text color of the breadcrumb link
101
58
  /// @group breadcrumb
102
59
  $kendo-breadcrumb-link-text: k-get-theme-color-var( neutral-130 ) !default;
103
60
  /// The borer color of the breadcrumb link
@@ -142,7 +99,7 @@ $kendo-breadcrumb-link-disabled-text: var( --kendo-disabled-text, initial ) !def
142
99
  /// The border color of the disabled breadcrumb link
143
100
  /// @group breadcrumb
144
101
  $kendo-breadcrumb-link-disabled-border: none !default;
145
- /// The background color of selected the Breadcrumb link
102
+ /// The background color of selected the breadcrumb link
146
103
  /// @group breadcrumb
147
104
  $kendo-breadcrumb-link-selected-bg: var( --kendo-component-bg, initial ) !default;
148
105
  /// The text color of the selected breadcrumb link
@@ -155,13 +112,13 @@ $kendo-breadcrumb-link-selected-border: transparent !default;
155
112
  /// @group breadcrumb
156
113
  $kendo-breadcrumb-link-selected-font-weight: var( --kendo-font-weight-bold, bold ) !default;
157
114
 
158
- /// The background color of the Breadcrumb root link
115
+ /// The background color of the breadcrumb root link
159
116
  /// @group breadcrumb
160
117
  $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-link-bg !default;
161
- /// The text color of the Breadcrumb root link
118
+ /// The text color of the breadcrumb root link
162
119
  /// @group breadcrumb
163
120
  $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-link-text !default;
164
- /// The border color of the Breadcrumb root link
121
+ /// The border color of the breadcrumb root link
165
122
  /// @group breadcrumb
166
123
  $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-link-border !default;
167
124
  /// The background color of the hovered breadcrumb root link
@@ -191,7 +148,7 @@ $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-link-focus-text !defau
191
148
  /// The border color of the focused breadcrumb root link
192
149
  /// @group breadcrumb
193
150
  $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
194
- /// The focus and hover background color of the Breadcrumb root link
151
+ /// The focus and hover background color of the breadcrumb root link
195
152
  /// @group breadcrumb
196
153
  $kendo-breadcrumb-root-link-focus-hover-bg: $kendo-breadcrumb-link-focus-hover-bg !default;
197
154
  /// The text color of the disabled breadcrumb root link
@@ -202,61 +159,13 @@ $kendo-breadcrumb-current-item-bg: null !default;
202
159
  $kendo-breadcrumb-current-item-text: null !default;
203
160
  $kendo-breadcrumb-current-item-border: null !default;
204
161
 
205
- /// The vertical padding of the Breadcrumb link icon
206
- /// @group breadcrumb
207
- $kendo-breadcrumb-icon-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
208
- /// The vertical padding of the small Breadcrumb link icon.
209
- /// @group breadcrumb
210
- $kendo-breadcrumb-sm-icon-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
211
- /// The vertical padding of the medium Breadcrumb link icon.
212
- /// @group breadcrumb
213
- $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
214
- /// The vertical padding of the large Breadcrumb link icon.
215
- /// @group breadcrumb
216
- $kendo-breadcrumb-lg-icon-link-padding-y: map.get( $kendo-spacing, 3 ) !default;
217
-
218
- /// The horizontal padding of the Breadcrumb link icon
219
- /// @group breadcrumb
220
- $kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
221
- /// The horizontal padding of the small Breadcrumb link icon.
162
+ /// The horizontal padding of the breadcrumb link icon
222
163
  /// @group breadcrumb
223
- $kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
224
- /// The horizontal padding of the medium Breadcrumb link icon.
164
+ $kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
165
+ /// The vertical padding of the breadcrumb link icon
225
166
  /// @group breadcrumb
226
- $kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
227
- /// The horizontal padding of the large Breadcrumb link icon.
228
- /// @group breadcrumb
229
- $kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
167
+ $kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
230
168
 
231
169
  // Root link spacing
170
+ $kendo-breadcrumb-root-link-spacing: 0px !default;
232
171
  $kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, #{$kendo-icon-spacing} ) !default;
233
-
234
-
235
- /// The sizes map for the Breadcrumb.
236
- /// @group breadcrumb
237
- $kendo-breadcrumb-sizes: (
238
- sm: (
239
- link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
240
- link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
241
- icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
242
- icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
243
- font-size: $kendo-breadcrumb-sm-font-size,
244
- line-height: $kendo-breadcrumb-sm-line-height
245
- ),
246
- md: (
247
- link-padding-x: $kendo-breadcrumb-md-link-padding-x,
248
- link-padding-y: $kendo-breadcrumb-md-link-padding-y,
249
- icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
250
- icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
251
- font-size: $kendo-breadcrumb-md-font-size,
252
- line-height: $kendo-breadcrumb-md-line-height
253
- ),
254
- lg: (
255
- link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
256
- link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
257
- icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
258
- icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
259
- font-size: $kendo-breadcrumb-lg-font-size,
260
- line-height: $kendo-breadcrumb-lg-line-height
261
- )
262
- ) !default;
@@ -99,6 +99,7 @@
99
99
  .k-treelist-toggle {
100
100
  margin-block: calc( var( --kendo-icon-padding ) * -1 );
101
101
  padding: var( --kendo-icon-padding, .25rem );
102
+ box-sizing: content-box;
102
103
  cursor: pointer;
103
104
  }
104
105