@progress/kendo-theme-fluent 10.1.0-dev.5 → 10.1.0-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 +1 -1
- package/dist/fluent-main-dark.css +1 -1
- package/dist/fluent-main.css +1 -1
- package/dist/meta/sassdoc-data.json +2528 -694
- package/dist/meta/sassdoc-raw-data.json +1158 -333
- package/dist/meta/variables.json +202 -14
- 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/checkbox/_layout.scss +36 -11
- package/scss/checkbox/_variables.scss +7 -7
- package/scss/dock-manager/_layout.scss +4 -0
- package/scss/index.scss +3 -0
- package/scss/input/_layout.scss +53 -0
- package/scss/input/_variables.scss +7 -0
- package/scss/otp/_index.scss +18 -0
- package/scss/otp/_layout.scss +42 -0
- package/scss/otp/_theme.scss +12 -0
- package/scss/otp/_variables.scss +61 -0
- package/scss/radio/_layout.scss +17 -6
- package/scss/radio/_variables.scss +1 -1
- package/scss/tabstrip/_layout.scss +109 -1
- package/scss/tabstrip/_theme.scss +47 -0
- package/scss/tabstrip/_variables.scss +68 -1
- package/scss/toolbar/_layout.scss +86 -9
- package/scss/toolbar/_theme.scss +87 -6
- package/scss/toolbar/_variables.scss +29 -3
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// Dependencies
|
|
2
|
+
@use "../core/_index.scss" as *;
|
|
3
|
+
@use "../input/_index.scss" as *;
|
|
4
|
+
|
|
5
|
+
// Component
|
|
6
|
+
@forward "./_variables.scss";
|
|
7
|
+
@use "./_layout.scss" as *;
|
|
8
|
+
@use "./_theme.scss" as *;
|
|
9
|
+
|
|
10
|
+
// Expose
|
|
11
|
+
@mixin kendo-otp--styles() {
|
|
12
|
+
@include import-once( "otp" ) {
|
|
13
|
+
@include core-styles();
|
|
14
|
+
@include kendo-input--styles();
|
|
15
|
+
@include kendo-otp--layout();
|
|
16
|
+
@include kendo-otp--theme();
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "./_variables.scss" as *;
|
|
3
|
+
@use "../core/_index.scss" as *;
|
|
4
|
+
@use "../input/_variables.scss" as *;
|
|
5
|
+
|
|
6
|
+
@mixin kendo-otp--layout-base() {
|
|
7
|
+
// OTP
|
|
8
|
+
.k-otp {
|
|
9
|
+
display: flex;
|
|
10
|
+
width: min-content;
|
|
11
|
+
align-items: center;
|
|
12
|
+
flex-direction: row;
|
|
13
|
+
gap: var( --INTERNAL--kendo-otp-gap, 0 );
|
|
14
|
+
|
|
15
|
+
.k-otp-input > .k-input-inner {
|
|
16
|
+
text-align: center;
|
|
17
|
+
padding-inline: 0;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@each $size, $size-props in $kendo-otp-sizes {
|
|
22
|
+
$_gap: map.get($size-props, gap);
|
|
23
|
+
$_separator-padding-x: map.get($size-props, separator-padding-x);
|
|
24
|
+
$_input-width: map.get($size-props, input-width);
|
|
25
|
+
|
|
26
|
+
.k-otp-#{$size} {
|
|
27
|
+
--INTERNAL--kendo-otp-gap: var( --kendo-otp-#{$size}-gap, #{$_gap} );
|
|
28
|
+
|
|
29
|
+
.k-otp-input {
|
|
30
|
+
min-width: $_input-width;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.k-otp-separator:not(:empty) {
|
|
34
|
+
padding-inline: $_separator-padding-x;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@mixin kendo-otp--layout() {
|
|
41
|
+
@include kendo-otp--layout-base();
|
|
42
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
@use "../core/_index.scss" as *;
|
|
2
|
+
@use "../input/_variables.scss" as *;
|
|
3
|
+
|
|
4
|
+
// OTP
|
|
5
|
+
|
|
6
|
+
/// The gap between the items in the OTP.
|
|
7
|
+
/// @group one-time-password
|
|
8
|
+
$kendo-otp-gap: k-spacing(1.5) !default;
|
|
9
|
+
/// The gap between the items in the small OTP.
|
|
10
|
+
/// @group one-time-password
|
|
11
|
+
$kendo-otp-sm-gap: k-spacing(1) !default;
|
|
12
|
+
/// The gap between the items in the medium OTP.
|
|
13
|
+
/// @group one-time-password
|
|
14
|
+
$kendo-otp-md-gap: $kendo-otp-gap !default;
|
|
15
|
+
/// The gap between the items in the large OTP.
|
|
16
|
+
/// @group one-time-password
|
|
17
|
+
$kendo-otp-lg-gap: k-spacing(2) !default;
|
|
18
|
+
|
|
19
|
+
/// The horizontal padding of the OTP separator.
|
|
20
|
+
/// @group one-time-password
|
|
21
|
+
$kendo-otp-separator-padding-x: $kendo-otp-gap !default;
|
|
22
|
+
/// The horizontal padding of the small OTP separator.
|
|
23
|
+
/// @group one-time-password
|
|
24
|
+
$kendo-otp-sm-separator-padding-x: $kendo-otp-sm-gap !default;
|
|
25
|
+
/// The horizontal padding of the medium OTP separator.
|
|
26
|
+
/// @group one-time-password
|
|
27
|
+
$kendo-otp-md-separator-padding-x: $kendo-otp-separator-padding-x !default;
|
|
28
|
+
/// The horizontal padding of the large OTP separator.
|
|
29
|
+
/// @group one-time-password
|
|
30
|
+
$kendo-otp-lg-separator-padding-x: $kendo-otp-lg-gap !default;
|
|
31
|
+
|
|
32
|
+
/// The horizontal padding of the OTP separator.
|
|
33
|
+
/// @group one-time-password
|
|
34
|
+
$kendo-otp-input-width: $kendo-input-calc-size !default;
|
|
35
|
+
/// The horizontal padding of the small OTP separator.
|
|
36
|
+
/// @group one-time-password
|
|
37
|
+
$kendo-otp-sm-input-width: $kendo-input-sm-calc-size !default;
|
|
38
|
+
/// The horizontal padding of the medium OTP separator.
|
|
39
|
+
/// @group one-time-password
|
|
40
|
+
$kendo-otp-md-input-width: $kendo-otp-input-width !default;
|
|
41
|
+
/// The horizontal padding of the large OTP separator.
|
|
42
|
+
/// @group one-time-password
|
|
43
|
+
$kendo-otp-lg-input-width: $kendo-input-lg-calc-size !default;
|
|
44
|
+
|
|
45
|
+
$kendo-otp-sizes: (
|
|
46
|
+
sm: (
|
|
47
|
+
gap: $kendo-otp-sm-gap,
|
|
48
|
+
separator-padding-x: $kendo-otp-sm-separator-padding-x,
|
|
49
|
+
input-width: $kendo-otp-sm-input-width
|
|
50
|
+
),
|
|
51
|
+
md: (
|
|
52
|
+
gap: $kendo-otp-md-gap,
|
|
53
|
+
separator-padding-x: $kendo-otp-md-separator-padding-x,
|
|
54
|
+
input-width: $kendo-otp-md-input-width
|
|
55
|
+
),
|
|
56
|
+
lg: (
|
|
57
|
+
gap: $kendo-otp-lg-gap,
|
|
58
|
+
separator-padding-x: $kendo-otp-lg-separator-padding-x,
|
|
59
|
+
input-width: $kendo-otp-lg-input-width
|
|
60
|
+
)
|
|
61
|
+
) !default;
|
package/scss/radio/_layout.scss
CHANGED
|
@@ -25,10 +25,6 @@
|
|
|
25
25
|
position: relative;
|
|
26
26
|
cursor: pointer;
|
|
27
27
|
-webkit-appearance: none;
|
|
28
|
-
|
|
29
|
-
@if $kendo-radio-indicator-type == "image" {
|
|
30
|
-
background-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
|
|
31
|
-
}
|
|
32
28
|
}
|
|
33
29
|
|
|
34
30
|
|
|
@@ -61,6 +57,15 @@
|
|
|
61
57
|
top: 50%;
|
|
62
58
|
left: 50%;
|
|
63
59
|
}
|
|
60
|
+
|
|
61
|
+
@if $kendo-radio-indicator-type == "image" {
|
|
62
|
+
content: "";
|
|
63
|
+
display: block;
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100%;
|
|
66
|
+
mask-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
|
|
67
|
+
mask-repeat: no-repeat;
|
|
68
|
+
}
|
|
64
69
|
}
|
|
65
70
|
|
|
66
71
|
|
|
@@ -68,7 +73,10 @@
|
|
|
68
73
|
.k-radio:hover,
|
|
69
74
|
.k-radio.k-hover {
|
|
70
75
|
@if $kendo-radio-indicator-type == "image" {
|
|
71
|
-
|
|
76
|
+
&::before {
|
|
77
|
+
background-color: currentColor;
|
|
78
|
+
mask-image: var( --kendo-radio-hover-image, #{ $kendo-radio-hover-image } );
|
|
79
|
+
}
|
|
72
80
|
}
|
|
73
81
|
|
|
74
82
|
@if $kendo-radio-indicator-type == "pseudo" {
|
|
@@ -96,7 +104,10 @@
|
|
|
96
104
|
.k-radio:checked,
|
|
97
105
|
.k-radio.k-checked {
|
|
98
106
|
@if $kendo-radio-indicator-type == "image" {
|
|
99
|
-
|
|
107
|
+
&::before {
|
|
108
|
+
background-color: currentColor;
|
|
109
|
+
mask-image: var( --kendo-radio-checked-image, #{ $kendo-radio-checked-image } );
|
|
110
|
+
}
|
|
100
111
|
}
|
|
101
112
|
|
|
102
113
|
@if $kendo-radio-indicator-type == "pseudo" {
|
|
@@ -140,7 +140,7 @@ $kendo-radio-checked-glyph: "\e308" !default;
|
|
|
140
140
|
|
|
141
141
|
/// The image of the checked RadioButton indicator.
|
|
142
142
|
/// @group radio
|
|
143
|
-
$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#
|
|
143
|
+
$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#0078d4'/></svg>") ) !default;
|
|
144
144
|
/// The image of the disabled and checked RadioButton indicator.
|
|
145
145
|
/// @group radio
|
|
146
146
|
$kendo-radio-disabled-checked-image: null !default;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
|
|
2
|
+
@use "sass:map";
|
|
1
3
|
@use "../core/_index.scss" as *;
|
|
2
4
|
@use "./_variables.scss" as *;
|
|
3
5
|
|
|
@@ -160,15 +162,97 @@
|
|
|
160
162
|
// Scrolling
|
|
161
163
|
.k-tabstrip-scrollable {
|
|
162
164
|
> .k-tabstrip-items-wrapper {
|
|
163
|
-
|
|
164
165
|
> .k-tabstrip-items {
|
|
165
166
|
flex-wrap: nowrap;
|
|
166
167
|
white-space: nowrap;
|
|
167
168
|
overflow: hidden;
|
|
169
|
+
|
|
170
|
+
&.k-tabstrip-items-scroll {
|
|
171
|
+
scrollbar-width: none;
|
|
172
|
+
|
|
173
|
+
&::-webkit-scrollbar {
|
|
174
|
+
display: none;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
&.k-tabstrip-top,
|
|
180
|
+
&.k-tabstrip-bottom {
|
|
181
|
+
.k-tabstrip-items.k-tabstrip-items-scroll {
|
|
182
|
+
overflow-x: auto;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
&.k-tabstrip-left,
|
|
187
|
+
&.k-tabstrip-right {
|
|
188
|
+
.k-tabstrip-items.k-tabstrip-items-scroll {
|
|
189
|
+
overflow-y: auto;
|
|
190
|
+
}
|
|
168
191
|
}
|
|
169
192
|
}
|
|
170
193
|
}
|
|
171
194
|
|
|
195
|
+
.k-tabstrip-scrollable-overlay {
|
|
196
|
+
.k-tabstrip-items-wrapper {
|
|
197
|
+
&::before,
|
|
198
|
+
&::after {
|
|
199
|
+
content: '';
|
|
200
|
+
position: absolute;
|
|
201
|
+
z-index: 3;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
&.k-tabstrip-top,
|
|
206
|
+
&.k-tabstrip-bottom {
|
|
207
|
+
.k-tabstrip-items-wrapper {
|
|
208
|
+
&::before,
|
|
209
|
+
&::after {
|
|
210
|
+
height: 100%;
|
|
211
|
+
aspect-ratio: 1;
|
|
212
|
+
}
|
|
213
|
+
&::before {
|
|
214
|
+
inset-inline-start: 0;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
&::after {
|
|
218
|
+
inset-inline-end: 0;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
&.k-tabstrip-left,
|
|
224
|
+
&.k-tabstrip-right {
|
|
225
|
+
.k-tabstrip-items-wrapper {
|
|
226
|
+
&::before,
|
|
227
|
+
&::after {
|
|
228
|
+
width: 100%;
|
|
229
|
+
}
|
|
230
|
+
&::before {
|
|
231
|
+
inset-block-start: 0;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
&::after {
|
|
235
|
+
inset-block-end: 0;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
&.k-tabstrip-scrollable-start {
|
|
241
|
+
.k-tabstrip-items-wrapper {
|
|
242
|
+
&::before {
|
|
243
|
+
display: none;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
&.k-tabstrip-scrollable-end {
|
|
249
|
+
.k-tabstrip-items-wrapper {
|
|
250
|
+
&::after {
|
|
251
|
+
display: none;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
}
|
|
172
256
|
|
|
173
257
|
// Tabstrip orientation
|
|
174
258
|
.k-tabstrip-horizontal {
|
|
@@ -330,4 +414,28 @@
|
|
|
330
414
|
|
|
331
415
|
}
|
|
332
416
|
|
|
417
|
+
// TabStrip sizes
|
|
418
|
+
@each $size, $size-props in $kendo-tabstrip-sizes {
|
|
419
|
+
$_font-size: map.get( $size-props, font-size );
|
|
420
|
+
$_line-height: map.get( $size-props, line-height );
|
|
421
|
+
$_item-padding-x: map.get( $size-props, item-padding-x );
|
|
422
|
+
$_item-padding-y: map.get( $size-props, item-padding-y );
|
|
423
|
+
|
|
424
|
+
.k-tabstrip-#{$size} {
|
|
425
|
+
.k-tabstrip-items .k-link {
|
|
426
|
+
font-size: $_font-size;
|
|
427
|
+
line-height: $_line-height;
|
|
428
|
+
padding-block: $_item-padding-y;
|
|
429
|
+
padding-inline: $_item-padding-x;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
:is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){
|
|
433
|
+
&::before,
|
|
434
|
+
&::after {
|
|
435
|
+
height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) );
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
}
|
|
440
|
+
|
|
333
441
|
}
|
|
@@ -99,4 +99,51 @@
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
+
// Scrolling
|
|
103
|
+
.k-tabstrip-scrollable-overlay {
|
|
104
|
+
&.k-tabstrip-top,
|
|
105
|
+
&.k-tabstrip-bottom {
|
|
106
|
+
.k-tabstrip-items-wrapper {
|
|
107
|
+
&::before {
|
|
108
|
+
background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&::after {
|
|
112
|
+
background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&.k-tabstrip-left,
|
|
118
|
+
&.k-tabstrip-right {
|
|
119
|
+
.k-tabstrip-items-wrapper {
|
|
120
|
+
&::before {
|
|
121
|
+
background: linear-gradient(180deg, $kendo-tabstrip-scroll-overlay);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&::after {
|
|
125
|
+
background: linear-gradient(360deg, $kendo-tabstrip-scroll-overlay);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// RTL
|
|
132
|
+
.k-rtl,
|
|
133
|
+
[dir="rtl"] {
|
|
134
|
+
&.k-tabstrip-scrollable-overlay {
|
|
135
|
+
&.k-tabstrip-top,
|
|
136
|
+
&.k-tabstrip-bottom {
|
|
137
|
+
.k-tabstrip-items-wrapper {
|
|
138
|
+
&::before {
|
|
139
|
+
background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&::after {
|
|
143
|
+
background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
102
149
|
}
|
|
@@ -34,6 +34,26 @@ $kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
|
|
|
34
34
|
/// The border width around the TabStrip.
|
|
35
35
|
/// @group tabstrip
|
|
36
36
|
$kendo-tabstrip-border-width: 0px !default;
|
|
37
|
+
|
|
38
|
+
/// The font size of the small TabStrip.
|
|
39
|
+
/// @group tabstrip
|
|
40
|
+
$kendo-tabstrip-sm-font-size: $kendo-tabstrip-font-size !default;
|
|
41
|
+
/// The line height of the small TabStrip.
|
|
42
|
+
/// @group tabstrip
|
|
43
|
+
$kendo-tabstrip-sm-line-height: $kendo-tabstrip-line-height !default;
|
|
44
|
+
/// The font size of the medium TabStrip.
|
|
45
|
+
/// @group tabstrip
|
|
46
|
+
$kendo-tabstrip-md-font-size: $kendo-tabstrip-font-size !default;
|
|
47
|
+
/// The line height of the medium TabStrip.
|
|
48
|
+
/// @group tabstrip
|
|
49
|
+
$kendo-tabstrip-md-line-height: $kendo-tabstrip-line-height !default;
|
|
50
|
+
/// The font size of the large TabStrip.
|
|
51
|
+
/// @group tabstrip
|
|
52
|
+
$kendo-tabstrip-lg-font-size: $kendo-tabstrip-font-size !default;
|
|
53
|
+
/// The line height of the large TabStrip.
|
|
54
|
+
/// @group tabstrip
|
|
55
|
+
$kendo-tabstrip-lg-line-height: $kendo-tabstrip-line-height !default;
|
|
56
|
+
|
|
37
57
|
/// The background color of the TabStrip.
|
|
38
58
|
/// @group tabstrip
|
|
39
59
|
$kendo-tabstrip-bg: transparent !default;
|
|
@@ -49,7 +69,7 @@ $kendo-tabstrip-border: transparent !default;
|
|
|
49
69
|
$kendo-tabstrip-item-padding-x: k-spacing(2) !default;
|
|
50
70
|
/// The vertical padding of the TabStrip items.
|
|
51
71
|
/// @group tabstrip
|
|
52
|
-
$kendo-tabstrip-item-padding-y:
|
|
72
|
+
$kendo-tabstrip-item-padding-y: k-spacing(3) !default;
|
|
53
73
|
/// The border width around the TabStrip items.
|
|
54
74
|
/// @group tabstrip
|
|
55
75
|
$kendo-tabstrip-item-border-width: 0px !default;
|
|
@@ -59,6 +79,26 @@ $kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
|
|
|
59
79
|
/// The gap between the TabStrip items.
|
|
60
80
|
/// @group tabstrip
|
|
61
81
|
$kendo-tabstrip-item-gap: k-spacing(2) !default;
|
|
82
|
+
|
|
83
|
+
/// The horizontal padding of the small TabStrip items.
|
|
84
|
+
/// @group tabstrip
|
|
85
|
+
$kendo-tabstrip-sm-item-padding-x: k-spacing(2) !default;
|
|
86
|
+
/// The vertical padding of the small TabStrip items.
|
|
87
|
+
/// @group tabstrip
|
|
88
|
+
$kendo-tabstrip-sm-item-padding-y: k-spacing(2.5) !default;
|
|
89
|
+
/// The horizontal padding of the medium TabStrip items.
|
|
90
|
+
/// @group tabstrip
|
|
91
|
+
$kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-item-padding-x !default;
|
|
92
|
+
/// The vertical padding of the medium TabStrip items.
|
|
93
|
+
/// @group tabstrip
|
|
94
|
+
$kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-item-padding-y !default;
|
|
95
|
+
/// The horizontal padding of the large TabStrip items.
|
|
96
|
+
/// @group tabstrip
|
|
97
|
+
$kendo-tabstrip-lg-item-padding-x: k-spacing(2) !default;
|
|
98
|
+
/// The vertical padding of the large TabStrip items.
|
|
99
|
+
/// @group tabstrip
|
|
100
|
+
$kendo-tabstrip-lg-item-padding-y: k-spacing(3.5) !default;
|
|
101
|
+
|
|
62
102
|
/// The background color of the TabStrip items.
|
|
63
103
|
/// @group tabstrip
|
|
64
104
|
$kendo-tabstrip-item-bg: transparent !default;
|
|
@@ -149,3 +189,30 @@ $kendo-tabstrip-scrollable-button-padding-x: k-spacing(1) !default;
|
|
|
149
189
|
// The vertical button padding of the scrollable TabStrip.
|
|
150
190
|
/// @group tabstrip
|
|
151
191
|
$kendo-tabstrip-scrollable-button-padding-y: k-spacing(1) !default;
|
|
192
|
+
|
|
193
|
+
/// The left and right scroll overlay of the TabStrip.
|
|
194
|
+
/// @group tabstrip
|
|
195
|
+
$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
|
|
196
|
+
|
|
197
|
+
/// The size map of the TabStrip.
|
|
198
|
+
/// @group tabstrip
|
|
199
|
+
$kendo-tabstrip-sizes: (
|
|
200
|
+
sm: (
|
|
201
|
+
font-size: $kendo-tabstrip-sm-font-size,
|
|
202
|
+
line-height: $kendo-tabstrip-sm-line-height,
|
|
203
|
+
item-padding-x: $kendo-tabstrip-sm-item-padding-x,
|
|
204
|
+
item-padding-y: $kendo-tabstrip-sm-item-padding-y
|
|
205
|
+
),
|
|
206
|
+
md: (
|
|
207
|
+
font-size: $kendo-tabstrip-md-font-size,
|
|
208
|
+
line-height: $kendo-tabstrip-md-line-height,
|
|
209
|
+
item-padding-x: $kendo-tabstrip-md-item-padding-x,
|
|
210
|
+
item-padding-y: $kendo-tabstrip-md-item-padding-y
|
|
211
|
+
),
|
|
212
|
+
lg: (
|
|
213
|
+
font-size: $kendo-tabstrip-lg-font-size,
|
|
214
|
+
line-height: $kendo-tabstrip-lg-line-height,
|
|
215
|
+
item-padding-x: $kendo-tabstrip-lg-item-padding-x,
|
|
216
|
+
item-padding-y: $kendo-tabstrip-lg-item-padding-y
|
|
217
|
+
)
|
|
218
|
+
) !default;
|
|
@@ -39,6 +39,37 @@
|
|
|
39
39
|
flex-wrap: nowrap;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
+
&.k-toolbar-scrollable {
|
|
43
|
+
flex-wrap: nowrap;
|
|
44
|
+
position: relative;
|
|
45
|
+
margin-inline-start: calc( var( --INTERNAL--kendo-toolbar-spacing, 0 ) * -1 );
|
|
46
|
+
|
|
47
|
+
&.k-toolbar-scrollable-overlay {
|
|
48
|
+
&::before {
|
|
49
|
+
content: '';
|
|
50
|
+
height: 100%;
|
|
51
|
+
aspect-ratio: 1;
|
|
52
|
+
position: absolute;
|
|
53
|
+
inset-inline-start: 0;
|
|
54
|
+
z-index: 3;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&::after {
|
|
58
|
+
content: '';
|
|
59
|
+
height: 100%;
|
|
60
|
+
aspect-ratio: 1;
|
|
61
|
+
position: absolute;
|
|
62
|
+
inset-inline-end: 0;
|
|
63
|
+
z-index: 3;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&.k-toolbar-scrollable-start::before,
|
|
67
|
+
&.k-toolbar-scrollable-end::after {
|
|
68
|
+
display: none;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
42
73
|
> * {
|
|
43
74
|
flex-shrink: 0;
|
|
44
75
|
display: inline-flex;
|
|
@@ -60,19 +91,20 @@
|
|
|
60
91
|
width: min-content;
|
|
61
92
|
}
|
|
62
93
|
|
|
94
|
+
|
|
63
95
|
// Overflow anchor
|
|
64
96
|
.k-toolbar-overflow-button {
|
|
65
97
|
margin-inline-start: auto;
|
|
66
98
|
}
|
|
67
99
|
|
|
68
|
-
//
|
|
69
|
-
.k-separator
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
100
|
+
// Overflow separator
|
|
101
|
+
.k-toolbar-separator.k-toolbar-button-separator {
|
|
102
|
+
margin-inline-start: auto;
|
|
103
|
+
height: var( --INTERNAL--kendo-toolbar-separator-height, 100% );
|
|
104
|
+
|
|
105
|
+
+ .k-toolbar-overflow-button {
|
|
106
|
+
margin-inline-start: 0;
|
|
107
|
+
}
|
|
76
108
|
}
|
|
77
109
|
|
|
78
110
|
// Spacer
|
|
@@ -89,6 +121,47 @@
|
|
|
89
121
|
}
|
|
90
122
|
}
|
|
91
123
|
|
|
124
|
+
// Separator
|
|
125
|
+
.k-toolbar .k-separator,
|
|
126
|
+
.k-toolbar-separator {
|
|
127
|
+
width: 0;
|
|
128
|
+
height: calc( var( --kendo-toolbar-line-height, #{$kendo-toolbar-line-height} ) * 1em );
|
|
129
|
+
border-width: 0 0 0 1px;
|
|
130
|
+
border-style: solid;
|
|
131
|
+
align-self: center;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.k-toolbar-items {
|
|
135
|
+
display: flex;
|
|
136
|
+
flex-flow: row nowrap;
|
|
137
|
+
gap: var( --INTERNAL--kendo-toolbar-spacing, 0 );
|
|
138
|
+
align-items: center;
|
|
139
|
+
justify-content: flex-start;
|
|
140
|
+
flex: 1 1 auto;
|
|
141
|
+
overflow: hidden;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.k-toolbar-items-scroll {
|
|
145
|
+
overflow-x: auto;
|
|
146
|
+
scrollbar-width: none;
|
|
147
|
+
|
|
148
|
+
&::-webkit-scrollbar {
|
|
149
|
+
display: none;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.k-toolbar-items-list {
|
|
154
|
+
display: flex;
|
|
155
|
+
flex-flow: row wrap;
|
|
156
|
+
padding-inline: var( --INTERNAL--kendo-toolbar-padding-x, 0 );
|
|
157
|
+
padding-block: var( --INTERNAL--kendo-toolbar-padding-y, 0 );
|
|
158
|
+
gap: var( --INTERNAL--kendo-toolbar-spacing, 0 );
|
|
159
|
+
align-items: center;
|
|
160
|
+
justify-content: flex-start;
|
|
161
|
+
flex: 1 1 auto;
|
|
162
|
+
overflow: hidden;
|
|
163
|
+
}
|
|
164
|
+
|
|
92
165
|
// Outline Toolbar
|
|
93
166
|
.k-toolbar-outline {
|
|
94
167
|
border-width: var( --kendo-toolbar-outline-border-width, #{$kendo-toolbar-outline-border-width} );
|
|
@@ -115,13 +188,17 @@
|
|
|
115
188
|
$_padding-x: map.get( $size-props, padding-x );
|
|
116
189
|
$_padding-y: map.get( $size-props, padding-y );
|
|
117
190
|
$_spacing: map.get( $size-props, spacing );
|
|
191
|
+
$_separator-height: map.get( $size-props, separator-height );
|
|
118
192
|
|
|
119
|
-
.k-toolbar-#{$size}
|
|
193
|
+
.k-toolbar-#{$size},
|
|
194
|
+
.k-toolbar-items-list-#{$size} {
|
|
120
195
|
--INTERNAL--kendo-toolbar-padding-x: var( --kendo-toolbar-#{$size}-padding-x, #{$_padding-x} );
|
|
121
196
|
--INTERNAL--kendo-toolbar-padding-y: var( --kendo-toolbar-#{$size}-padding-y, #{$_padding-y} );
|
|
122
197
|
--INTERNAL--kendo-toolbar-spacing: var( --kendo-toolbar-#{$size}-spacing, #{$_spacing} );
|
|
198
|
+
--INTERNAL--kendo-toolbar-separator-height: var( --kendo-toolbar-#{$size}-separator-height, #{$_separator-height} );
|
|
123
199
|
}
|
|
124
200
|
}
|
|
201
|
+
|
|
125
202
|
// Remove once we decide to not size empty containers
|
|
126
203
|
.k-toolbar-sm::before {
|
|
127
204
|
height: var( --kendo-button-sm-inner-calc-size, #{$kendo-button-sm-inner-calc-size} );
|