@progress/kendo-theme-fluent 6.6.1-dev.0 → 6.7.0-dev.1
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 +126 -161
- package/dist/meta/sassdoc-data.json +2492 -1642
- package/dist/meta/sassdoc-raw-data.json +1246 -821
- package/lib/swatches/all.json +1 -1
- package/lib/swatches/fluent-main.json +1 -1
- package/package.json +4 -4
- package/scss/breadcrumb/_layout.scss +37 -10
- package/scss/breadcrumb/_variables.scss +124 -33
- package/scss/chat/_layout.scss +17 -22
- package/scss/chat/_theme.scss +6 -6
- package/scss/chat/_variables.scss +0 -6
- package/scss/grid/_layout.scss +0 -12
- package/scss/grid/_variables.scss +0 -4
- package/scss/pager/_layout.scss +7 -31
- package/scss/pager/_variables.scss +0 -4
- package/scss/scrollview/_layout.scss +13 -49
- package/scss/scrollview/_theme.scss +1 -3
- package/scss/tilelayout/_layout.scss +2 -0
- package/scss/tilelayout/_variables.scss +9 -0
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": "6.
|
|
4
|
+
"version": "6.7.0-dev.1",
|
|
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.8.0",
|
|
55
|
-
"@progress/kendo-theme-core": "6.
|
|
56
|
-
"@progress/kendo-theme-utils": "6.
|
|
55
|
+
"@progress/kendo-theme-core": "6.7.0-dev.1",
|
|
56
|
+
"@progress/kendo-theme-utils": "6.7.0-dev.1"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "70c85b28b2e861c628b47fffed4a0284bcf47923"
|
|
59
59
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@use "../core/" as *;
|
|
2
3
|
@use "./_variables.scss" as *;
|
|
3
4
|
|
|
@@ -14,8 +15,8 @@
|
|
|
14
15
|
box-sizing: border-box;
|
|
15
16
|
outline: 0;
|
|
16
17
|
font-family: var( --kendo-breadcrumb-font-family, #{$kendo-breadcrumb-font-family} );
|
|
17
|
-
font-size: var( --kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
|
|
18
|
-
line-height: var( --kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
|
|
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} );
|
|
19
20
|
display: flex;
|
|
20
21
|
flex-direction: row;
|
|
21
22
|
-webkit-touch-callout: none;
|
|
@@ -67,8 +68,8 @@
|
|
|
67
68
|
.k-breadcrumb-link,
|
|
68
69
|
.k-breadcrumb-root-link {
|
|
69
70
|
@include border-radius( var( --kendo-breadcrumb-border-radius, #{$kendo-breadcrumb-link-border-radius} ) );
|
|
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} );
|
|
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} );
|
|
72
73
|
color: var( --kendo-breadcrumb-link-initial-text, #{$kendo-breadcrumb-link-initial-text} );
|
|
73
74
|
text-decoration: none;
|
|
74
75
|
white-space: nowrap;
|
|
@@ -92,10 +93,6 @@
|
|
|
92
93
|
}
|
|
93
94
|
}
|
|
94
95
|
|
|
95
|
-
.k-breadcrumb-root-link {
|
|
96
|
-
margin-inline-end: var( --kendo-breadcrumb-root-link-spacing, #{$kendo-breadcrumb-root-link-spacing} );
|
|
97
|
-
}
|
|
98
|
-
|
|
99
96
|
.k-breadcrumb-link > .k-image,
|
|
100
97
|
.k-breadcrumb-icontext-link .k-icon,
|
|
101
98
|
.k-breadcrumb-icontext-link .k-svg-icon {
|
|
@@ -103,8 +100,8 @@
|
|
|
103
100
|
}
|
|
104
101
|
|
|
105
102
|
.k-breadcrumb-icon-link {
|
|
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} );
|
|
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} );
|
|
108
105
|
}
|
|
109
106
|
|
|
110
107
|
|
|
@@ -124,4 +121,34 @@
|
|
|
124
121
|
}
|
|
125
122
|
}
|
|
126
123
|
|
|
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
|
+
|
|
127
154
|
}
|
|
@@ -2,62 +2,105 @@
|
|
|
2
2
|
@use "../core/" as *;
|
|
3
3
|
@use "../icon/_variables.scss" as *;
|
|
4
4
|
|
|
5
|
-
/// The horizontal margin of the
|
|
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
|
|
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
|
|
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
|
|
14
|
+
/// The vertical padding of the Breadcrumb
|
|
15
15
|
/// @group breadcrumb
|
|
16
16
|
$kendo-breadcrumb-padding-y: 0px !default;
|
|
17
|
-
|
|
17
|
+
|
|
18
|
+
/// The width of the border around the Breadcrumb
|
|
18
19
|
/// @group breadcrumb
|
|
19
20
|
$kendo-breadcrumb-border-width: 0px !default;
|
|
20
|
-
|
|
21
|
+
|
|
22
|
+
/// The font family of the Breadcrumb
|
|
21
23
|
/// @group breadcrumb
|
|
22
24
|
$kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
|
|
23
|
-
/// The font size of the
|
|
25
|
+
/// The font size of the Breadcrumb
|
|
26
|
+
|
|
24
27
|
/// @group breadcrumb
|
|
25
28
|
$kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
|
|
26
|
-
/// The
|
|
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.
|
|
27
40
|
/// @group breadcrumb
|
|
28
41
|
$kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
|
|
29
|
-
/// The
|
|
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
|
|
30
53
|
/// @group breadcrumb
|
|
31
54
|
$kendo-breadcrumb-bg: var( --kendo-component-bg, initial ) !default;
|
|
32
|
-
/// The text color of the
|
|
55
|
+
/// The text color of the Breadcrumb
|
|
33
56
|
/// @group breadcrumb
|
|
34
|
-
$kendo-breadcrumb-text:
|
|
35
|
-
/// The border color of the
|
|
57
|
+
$kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default;
|
|
58
|
+
/// The border color of the Breadcrumb
|
|
36
59
|
/// @group breadcrumb
|
|
37
60
|
$kendo-breadcrumb-border: transparent !default;
|
|
38
61
|
/// The box shadow of the focused breadcrumb
|
|
39
62
|
/// @group breadcrumb
|
|
40
63
|
$kendo-breadcrumb-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-30 ) !default;
|
|
41
64
|
|
|
42
|
-
/// The horizontal padding of the
|
|
65
|
+
/// The horizontal padding of the Breadcrumb link
|
|
43
66
|
/// @group breadcrumb
|
|
44
67
|
$kendo-breadcrumb-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
|
|
45
|
-
/// The
|
|
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.
|
|
46
82
|
/// @group breadcrumb
|
|
47
|
-
$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
|
|
48
|
-
/// The
|
|
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
|
|
49
92
|
/// @group breadcrumb
|
|
50
93
|
$kendo-breadcrumb-link-border-radius: 0px !default;
|
|
51
|
-
/// The initial text color of the
|
|
94
|
+
/// The initial text color of the Breadcrumb link
|
|
52
95
|
/// @group breadcrumb
|
|
53
96
|
$kendo-breadcrumb-link-initial-text: inherit !default;
|
|
54
|
-
/// The background color of the
|
|
97
|
+
/// The background color of the Breadcrumb link
|
|
55
98
|
/// @group breadcrumb
|
|
56
99
|
$kendo-breadcrumb-link-bg: transparent !default;
|
|
57
|
-
/// The text color of the
|
|
100
|
+
/// The text color of the Breadcrumb link
|
|
58
101
|
/// @group breadcrumb
|
|
59
|
-
$kendo-breadcrumb-link-text:
|
|
60
|
-
/// The borer color of the
|
|
102
|
+
$kendo-breadcrumb-link-text: get-theme-color-var( neutral-130 ) !default;
|
|
103
|
+
/// The borer color of the Breadcrumb link
|
|
61
104
|
/// @group breadcrumb
|
|
62
105
|
$kendo-breadcrumb-link-border: transparent !default;
|
|
63
106
|
/// The background color of the hovered breadcrumb link
|
|
@@ -86,8 +129,8 @@ $kendo-breadcrumb-link-focus-bg: transparent !default;
|
|
|
86
129
|
$kendo-breadcrumb-link-focus-text: k-get-theme-color-var( neutral-190 ) !default;
|
|
87
130
|
/// The box shadow of the focused breadcrumb link
|
|
88
131
|
/// @group breadcrumb
|
|
89
|
-
$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px
|
|
90
|
-
/// The focus and hover background color of the
|
|
132
|
+
$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
|
|
133
|
+
/// The focus and hover background color of the Breadcrumb link
|
|
91
134
|
/// @group breadcrumb
|
|
92
135
|
$kendo-breadcrumb-link-focus-hover-bg: var( --kendo-hover-bg, initial ) !default;
|
|
93
136
|
/// The background color of the disabled breadcrumb link
|
|
@@ -99,7 +142,7 @@ $kendo-breadcrumb-link-disabled-text: var( --kendo-disabled-text, initial ) !def
|
|
|
99
142
|
/// The border color of the disabled breadcrumb link
|
|
100
143
|
/// @group breadcrumb
|
|
101
144
|
$kendo-breadcrumb-link-disabled-border: none !default;
|
|
102
|
-
/// The background color of selected the
|
|
145
|
+
/// The background color of selected the Breadcrumb link
|
|
103
146
|
/// @group breadcrumb
|
|
104
147
|
$kendo-breadcrumb-link-selected-bg: var( --kendo-component-bg, initial ) !default;
|
|
105
148
|
/// The text color of the selected breadcrumb link
|
|
@@ -112,13 +155,13 @@ $kendo-breadcrumb-link-selected-border: transparent !default;
|
|
|
112
155
|
/// @group breadcrumb
|
|
113
156
|
$kendo-breadcrumb-link-selected-font-weight: var( --kendo-font-weight-bold, bold ) !default;
|
|
114
157
|
|
|
115
|
-
/// The background color of the
|
|
158
|
+
/// The background color of the Breadcrumb root link
|
|
116
159
|
/// @group breadcrumb
|
|
117
160
|
$kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-link-bg !default;
|
|
118
|
-
/// The text color of the
|
|
161
|
+
/// The text color of the Breadcrumb root link
|
|
119
162
|
/// @group breadcrumb
|
|
120
163
|
$kendo-breadcrumb-root-link-text: $kendo-breadcrumb-link-text !default;
|
|
121
|
-
/// The border color of the
|
|
164
|
+
/// The border color of the Breadcrumb root link
|
|
122
165
|
/// @group breadcrumb
|
|
123
166
|
$kendo-breadcrumb-root-link-border: $kendo-breadcrumb-link-border !default;
|
|
124
167
|
/// The background color of the hovered breadcrumb root link
|
|
@@ -148,7 +191,7 @@ $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-link-focus-text !defau
|
|
|
148
191
|
/// The border color of the focused breadcrumb root link
|
|
149
192
|
/// @group breadcrumb
|
|
150
193
|
$kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
|
|
151
|
-
/// The focus and hover background color of the
|
|
194
|
+
/// The focus and hover background color of the Breadcrumb root link
|
|
152
195
|
/// @group breadcrumb
|
|
153
196
|
$kendo-breadcrumb-root-link-focus-hover-bg: $kendo-breadcrumb-link-focus-hover-bg !default;
|
|
154
197
|
/// The text color of the disabled breadcrumb root link
|
|
@@ -159,13 +202,61 @@ $kendo-breadcrumb-current-item-bg: null !default;
|
|
|
159
202
|
$kendo-breadcrumb-current-item-text: null !default;
|
|
160
203
|
$kendo-breadcrumb-current-item-border: null !default;
|
|
161
204
|
|
|
162
|
-
/// The
|
|
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.
|
|
163
222
|
/// @group breadcrumb
|
|
164
|
-
$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-
|
|
165
|
-
/// The
|
|
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.
|
|
166
225
|
/// @group breadcrumb
|
|
167
|
-
$kendo-breadcrumb-icon-link-padding-
|
|
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;
|
|
168
230
|
|
|
169
231
|
// Root link spacing
|
|
170
|
-
$kendo-breadcrumb-root-link-spacing: 0px !default;
|
|
171
232
|
$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;
|
package/scss/chat/_layout.scss
CHANGED
|
@@ -71,12 +71,12 @@
|
|
|
71
71
|
inset-inline-start: 0;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
.k-first .k-bubble,
|
|
75
|
-
.k-only .k-bubble {
|
|
74
|
+
.k-first .k-chat-bubble,
|
|
75
|
+
.k-only .k-chat-bubble {
|
|
76
76
|
border-end-start-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
|
|
77
77
|
}
|
|
78
|
-
.k-middle .k-bubble,
|
|
79
|
-
.k-last .k-bubble {
|
|
78
|
+
.k-middle .k-chat-bubble,
|
|
79
|
+
.k-last .k-chat-bubble {
|
|
80
80
|
border-end-start-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
|
|
81
81
|
}
|
|
82
82
|
}
|
|
@@ -93,12 +93,12 @@
|
|
|
93
93
|
inset-inline-end: 0;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
.k-first .k-bubble,
|
|
97
|
-
.k-only .k-bubble {
|
|
96
|
+
.k-first .k-chat-bubble,
|
|
97
|
+
.k-only .k-chat-bubble {
|
|
98
98
|
border-end-end-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
|
|
99
99
|
}
|
|
100
|
-
.k-middle .k-bubble,
|
|
101
|
-
.k-last .k-bubble {
|
|
100
|
+
.k-middle .k-chat-bubble,
|
|
101
|
+
.k-last .k-chat-bubble {
|
|
102
102
|
border-end-end-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
|
|
103
103
|
}
|
|
104
104
|
}
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
|
|
140
140
|
|
|
141
141
|
// Bubble
|
|
142
|
-
.k-bubble {
|
|
142
|
+
.k-chat-bubble {
|
|
143
143
|
@include border-radius( var( --kendo-chat-bubble-border-radius, #{ $kendo-chat-bubble-border-radius } ) );
|
|
144
144
|
padding-inline: var( --kendo-chat-bubble-padding-x, #{ $kendo-chat-bubble-padding-x } );
|
|
145
145
|
padding-block: var( --kendo-chat-bubble-padding-y, #{ $kendo-chat-bubble-padding-y } );
|
|
@@ -175,10 +175,7 @@
|
|
|
175
175
|
|
|
176
176
|
// Avatar
|
|
177
177
|
.k-avatar {
|
|
178
|
-
@include border-radius( 100% );
|
|
179
178
|
margin: 0;
|
|
180
|
-
width: var( --kendo-chat-avatar-size, #{ $kendo-chat-avatar-size } );
|
|
181
|
-
height: var( --kendo-chat-avatar-size, #{ $kendo-chat-avatar-size } );
|
|
182
179
|
position: absolute;
|
|
183
180
|
|
|
184
181
|
@at-root .k-message-group:not(.k-alt) > .k-avatar {
|
|
@@ -305,7 +302,7 @@
|
|
|
305
302
|
}
|
|
306
303
|
|
|
307
304
|
.k-rtl &,
|
|
308
|
-
|
|
305
|
+
[dir="rtl"] & {
|
|
309
306
|
transform: scaleX(-1);
|
|
310
307
|
}
|
|
311
308
|
}
|
|
@@ -318,6 +315,11 @@
|
|
|
318
315
|
margin: $kendo-chat-bubble-spacing 0 0;
|
|
319
316
|
}
|
|
320
317
|
|
|
318
|
+
.k-message-group.k-alt + .k-card-list,
|
|
319
|
+
.k-message-group.k-alt + kendo-chat-message-attachments.k-card-list {
|
|
320
|
+
align-self: flex-end;
|
|
321
|
+
}
|
|
322
|
+
|
|
321
323
|
.k-chat .k-card-deck {
|
|
322
324
|
max-width: calc( 100% + #{ $kendo-chat-message-list-padding-y * 2 } ); // prevent overflowing in the parent element
|
|
323
325
|
max-width: calc( 100% + var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y * 2} ) );
|
|
@@ -330,8 +332,7 @@
|
|
|
330
332
|
overflow-x: auto;
|
|
331
333
|
scroll-behavior: smooth;
|
|
332
334
|
}
|
|
333
|
-
.k-chat .k-card-deck .k-card
|
|
334
|
-
.k-chat .k-card-deck .k-card-wrap {
|
|
335
|
+
.k-chat .k-card-deck .k-card {
|
|
335
336
|
width: 200px;
|
|
336
337
|
}
|
|
337
338
|
|
|
@@ -402,16 +403,10 @@
|
|
|
402
403
|
|
|
403
404
|
@mixin kendo-chat-toolbar--layout() {
|
|
404
405
|
|
|
405
|
-
.k-chat-toolbar
|
|
406
|
-
.k-chat .k-toolbar-box {
|
|
407
|
-
padding-inline: var( --kendo-chat-toolbar-padding-x, #{ $kendo-chat-toolbar-padding-x } );
|
|
408
|
-
padding-block: var( --kendo-chat-toolbar-padding-y, #{ $kendo-chat-toolbar-padding-y } );
|
|
406
|
+
.k-chat-toolbar {
|
|
409
407
|
width: 100%;
|
|
410
408
|
border-width: 1px 0 0;
|
|
411
|
-
box-sizing: border-box;
|
|
412
409
|
flex: none;
|
|
413
|
-
overflow: hidden;
|
|
414
|
-
position: relative;
|
|
415
410
|
|
|
416
411
|
&::before {
|
|
417
412
|
display: none;
|
package/scss/chat/_theme.scss
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
// Bubbles
|
|
28
|
-
.k-bubble {
|
|
28
|
+
.k-chat-bubble {
|
|
29
29
|
@include fill(
|
|
30
30
|
var( --kendo-chat-bubble-text, #{ $kendo-chat-bubble-text } ),
|
|
31
31
|
var( --kendo-chat-bubble-bg, #{ $kendo-chat-bubble-bg } ),
|
|
@@ -38,14 +38,14 @@
|
|
|
38
38
|
a { color: var( --kendo-chat-link-text, #{ $kendo-chat-link-text } ) };
|
|
39
39
|
a:hover { color: var( --kendo-chat-link-hover-text, #{ $kendo-chat-link-hover-text } ) };
|
|
40
40
|
}
|
|
41
|
-
.k-bubble:hover {
|
|
41
|
+
.k-chat-bubble:hover {
|
|
42
42
|
@include box-shadow( var( --kendo-chat-bubble-hover-shadow, #{ $kendo-chat-bubble-hover-shadow } ) );
|
|
43
43
|
}
|
|
44
|
-
.k-selected .k-bubble {
|
|
44
|
+
.k-selected .k-chat-bubble {
|
|
45
45
|
@include box-shadow( var( --kendo-chat-bubble-selected-shadow, #{ $kendo-chat-bubble-selected-shadow } ) );
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
.k-alt .k-bubble {
|
|
48
|
+
.k-alt .k-chat-bubble {
|
|
49
49
|
@include fill(
|
|
50
50
|
var( --kendo-chat-alt-bubble-text, #{ $kendo-chat-alt-bubble-text } ),
|
|
51
51
|
var( --kendo-chat-alt-bubble-bg, #{ $kendo-chat-alt-bubble-bg } ),
|
|
@@ -53,10 +53,10 @@
|
|
|
53
53
|
);
|
|
54
54
|
@include box-shadow( var( --kendo-chat-alt-bubble-shadow, #{ $kendo-chat-alt-bubble-shadow } ) );
|
|
55
55
|
}
|
|
56
|
-
.k-alt .k-bubble:hover {
|
|
56
|
+
.k-alt .k-chat-bubble:hover {
|
|
57
57
|
@include box-shadow( var( --kendo-chat-alt-bubble-hover-shadow, #{ $kendo-chat-alt-bubble-hover-shadow } ) );
|
|
58
58
|
}
|
|
59
|
-
.k-alt .k-selected .k-bubble {
|
|
59
|
+
.k-alt .k-selected .k-chat-bubble {
|
|
60
60
|
@include box-shadow( var( --kendo-chat-alt-bubble-selected-shadow, #{ $kendo-chat-alt-bubble-selected-shadow } ) );
|
|
61
61
|
}
|
|
62
62
|
|
|
@@ -112,12 +112,6 @@ $kendo-chat-avatar-size: 32px !default;
|
|
|
112
112
|
/// @group chat
|
|
113
113
|
$kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;
|
|
114
114
|
|
|
115
|
-
/// The horizontal padding of the toolbar in the chat.
|
|
116
|
-
/// @group chat
|
|
117
|
-
$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
|
|
118
|
-
/// The vertical padding of the toolbar in the chat.
|
|
119
|
-
/// @group chat
|
|
120
|
-
$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
|
|
121
115
|
/// The spacing of the toolbar in the chat.
|
|
122
116
|
/// @group chat
|
|
123
117
|
$kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
|
package/scss/grid/_layout.scss
CHANGED
|
@@ -90,10 +90,6 @@
|
|
|
90
90
|
outline: none;
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
.k-placeholder-line {
|
|
94
|
-
width: var( --kendo-grid-cell-placeholder-width, #{$kendo-grid-cell-placeholder-width} );
|
|
95
|
-
}
|
|
96
|
-
|
|
97
93
|
> .k-radio,
|
|
98
94
|
> .k-radio-wrap,
|
|
99
95
|
> .k-checkbox,
|
|
@@ -713,14 +709,6 @@
|
|
|
713
709
|
border-width: 0 0 1px;
|
|
714
710
|
}
|
|
715
711
|
|
|
716
|
-
.k-pager-input {
|
|
717
|
-
.k-numerictextbox {
|
|
718
|
-
margin-block: 0;
|
|
719
|
-
margin-inline: calc( var( --kendo-font-size, 14px ) / 2 );
|
|
720
|
-
width: 5em;
|
|
721
|
-
}
|
|
722
|
-
}
|
|
723
|
-
|
|
724
712
|
.k-grid-virtual .k-grid-content {
|
|
725
713
|
.k-grid-table-wrap {
|
|
726
714
|
float: left;
|
|
@@ -319,10 +319,6 @@ $kendo-grid-cell-border-width-y: $kendo-grid-border-width !default;
|
|
|
319
319
|
/// Horizontal border width of the grid cell.
|
|
320
320
|
/// @group grid
|
|
321
321
|
$kendo-grid-cell-border-width-x: 0px !default;
|
|
322
|
-
/// Default width of the grid cell placeholder.
|
|
323
|
-
/// @group grid
|
|
324
|
-
$kendo-grid-cell-placeholder-width: 80% !default;
|
|
325
|
-
|
|
326
322
|
/// Font size of the grid sort index.
|
|
327
323
|
/// @group grid
|
|
328
324
|
$kendo-grid-sort-index-font-size: var( --kendo-font-size-sm, inherit ) !default;
|
package/scss/pager/_layout.scss
CHANGED
|
@@ -72,8 +72,7 @@
|
|
|
72
72
|
position: relative;
|
|
73
73
|
|
|
74
74
|
select.k-dropdown-list {
|
|
75
|
-
|
|
76
|
-
display: none;
|
|
75
|
+
width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
|
|
77
76
|
}
|
|
78
77
|
}
|
|
79
78
|
.k-pager-numbers {
|
|
@@ -109,9 +108,10 @@
|
|
|
109
108
|
// Pager input
|
|
110
109
|
.k-pager-input {
|
|
111
110
|
@extend %base-pager-section !optional;
|
|
111
|
+
gap: 1ex;
|
|
112
112
|
|
|
113
|
-
.k-textbox
|
|
114
|
-
|
|
113
|
+
.k-textbox,
|
|
114
|
+
.k-numerictextbox {
|
|
115
115
|
margin-block: 0;
|
|
116
116
|
width: var( --kendo-pager-input-width, #{$kendo-pager-input-width} );
|
|
117
117
|
}
|
|
@@ -121,10 +121,10 @@
|
|
|
121
121
|
// Pager sizes
|
|
122
122
|
.k-pager-sizes {
|
|
123
123
|
@extend %base-pager-section !optional;
|
|
124
|
+
gap: 1ex;
|
|
124
125
|
|
|
125
126
|
.k-dropdown-list,
|
|
126
127
|
> select {
|
|
127
|
-
margin-inline-end: 1ex;
|
|
128
128
|
width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
|
|
129
129
|
}
|
|
130
130
|
|
|
@@ -152,31 +152,6 @@
|
|
|
152
152
|
order: 10;
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
// Responsive
|
|
156
|
-
.k-pager-mobile-sm {
|
|
157
|
-
overflow: visible;
|
|
158
|
-
|
|
159
|
-
// Show native select
|
|
160
|
-
.k-pager-numbers-wrap {
|
|
161
|
-
select.k-dropdown-list {
|
|
162
|
-
@extend %base-pager-section !optional;
|
|
163
|
-
@if ($kendo-pager-section-spacing) {
|
|
164
|
-
margin-left: $kendo-pager-section-spacing;
|
|
165
|
-
margin-right: $kendo-pager-section-spacing;
|
|
166
|
-
}
|
|
167
|
-
width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
// Hide components
|
|
173
|
-
.k-pager-mobile-md .k-pager-info,
|
|
174
|
-
.k-pager-mobile-sm .k-pager-info,
|
|
175
|
-
.k-pager-mobile-sm .k-pager-sizes,
|
|
176
|
-
.k-pager-mobile-sm .k-pager-numbers {
|
|
177
|
-
display: none;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
155
|
// Pager sizes
|
|
181
156
|
@each $size, $size-props in $kendo-pager-sizes {
|
|
182
157
|
$_padding-x: map.get($size-props, padding-x);
|
|
@@ -188,7 +163,8 @@
|
|
|
188
163
|
--INTERNAL--kendo-pager-padding-y: var( --kendo-pager-#{$size}-padding-y, #{$_padding-y} );
|
|
189
164
|
--INTERNAL--kendo-pager-spacing: var( --kendo-pager-#{$size}-spacing, #{$_item-group-spacing} );
|
|
190
165
|
|
|
191
|
-
.k-pager-input
|
|
166
|
+
.k-pager-input,
|
|
167
|
+
select.k-dropdown-list {
|
|
192
168
|
margin-inline-start: var( --kendo-pager-input-margin-start, #{$_item-group-spacing} );
|
|
193
169
|
margin-inline-end: var( --kendo-pager-input-margin-end, #{$_item-group-spacing} );
|
|
194
170
|
}
|
|
@@ -61,10 +61,6 @@ $kendo-pager-focus-text: var( --kendo-pager-text, #{$kendo-pager-text}) !default
|
|
|
61
61
|
/// @group pager
|
|
62
62
|
$kendo-pager-focus-border: k-get-theme-color-var( neutral-130 ) !default;
|
|
63
63
|
|
|
64
|
-
/// The spacing between the Pager sections.
|
|
65
|
-
/// @group pager
|
|
66
|
-
$kendo-pager-section-spacing: 1em !default;
|
|
67
|
-
|
|
68
64
|
/// The border radius of the Pager items.
|
|
69
65
|
/// @group pager
|
|
70
66
|
$kendo-pager-item-border-radius: 0 !default;
|