@progress/kendo-theme-fluent 10.1.0-dev.4 → 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/pdf-viewer/_layout.scss +15 -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
package/scss/toolbar/_theme.scss
CHANGED
|
@@ -5,11 +5,6 @@
|
|
|
5
5
|
|
|
6
6
|
// Theme
|
|
7
7
|
.k-toolbar {
|
|
8
|
-
// Separator
|
|
9
|
-
.k-separator,
|
|
10
|
-
.k-toolbar-separator {
|
|
11
|
-
border-color: var( --kendo-toolbar-separator-border, #{$kendo-toolbar-separator-border} );
|
|
12
|
-
}
|
|
13
8
|
|
|
14
9
|
// Template item
|
|
15
10
|
.k-toolbar-item:focus,
|
|
@@ -19,6 +14,16 @@
|
|
|
19
14
|
|
|
20
15
|
}
|
|
21
16
|
|
|
17
|
+
// Separator
|
|
18
|
+
.k-toolbar .k-separator,
|
|
19
|
+
.k-toolbar-separator {
|
|
20
|
+
border-color: var( --kendo-toolbar-separator-border, #{$kendo-toolbar-separator-border} );
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.k-toolbar-items {
|
|
24
|
+
border-color: inherit;
|
|
25
|
+
}
|
|
26
|
+
|
|
22
27
|
// Solid Toolbar
|
|
23
28
|
.k-toolbar-solid {
|
|
24
29
|
@include fill (
|
|
@@ -26,6 +31,20 @@
|
|
|
26
31
|
var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} ),
|
|
27
32
|
var( --kendo-toolbar-border, #{$kendo-toolbar-border} )
|
|
28
33
|
);
|
|
34
|
+
|
|
35
|
+
&.k-toolbar-scrollable-overlay {
|
|
36
|
+
&::before {
|
|
37
|
+
background: linear-gradient(90deg, var( --kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay} ));
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&::after {
|
|
41
|
+
background: linear-gradient(270deg, var( --kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay} ));
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.k-toolbar-items-list-solid {
|
|
47
|
+
border-color: var( --kendo-toolbar-border, #{$kendo-toolbar-border} );
|
|
29
48
|
}
|
|
30
49
|
|
|
31
50
|
// Outline Toolbar
|
|
@@ -34,6 +53,20 @@
|
|
|
34
53
|
$color: var( --kendo-toolbar-outline-text, #{$kendo-toolbar-outline-text} ),
|
|
35
54
|
$border: var( --kendo-toolbar-outline-border, #{$kendo-toolbar-outline-border} )
|
|
36
55
|
);
|
|
56
|
+
|
|
57
|
+
&.k-toolbar-scrollable-overlay {
|
|
58
|
+
&::before {
|
|
59
|
+
background: linear-gradient(90deg, var( --kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay} ));
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&::after {
|
|
63
|
+
background: linear-gradient(270deg, var( --kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay} ));
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.k-toolbar-items-list-outline {
|
|
69
|
+
border-color: var( --kendo-toolbar-outline-border, #{$kendo-toolbar-outline-border} );
|
|
37
70
|
}
|
|
38
71
|
|
|
39
72
|
// Flat Toolbar
|
|
@@ -43,9 +76,24 @@
|
|
|
43
76
|
$border: var( --kendo-toolbar-flat-border, #{$kendo-toolbar-flat-border} )
|
|
44
77
|
);
|
|
45
78
|
|
|
46
|
-
> .k-separator
|
|
79
|
+
> .k-separator,
|
|
80
|
+
.k-toolbar-separator {
|
|
47
81
|
border-inline-color: var( --kendo-toolbar-flat-border, #{$kendo-toolbar-flat-border} );
|
|
48
82
|
}
|
|
83
|
+
|
|
84
|
+
&.k-toolbar-scrollable-overlay {
|
|
85
|
+
&::before {
|
|
86
|
+
background: linear-gradient(90deg, var( --kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay} ));
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&::after {
|
|
90
|
+
background: linear-gradient(270deg, var( --kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay} ));
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.k-toolbar-items-list-flat {
|
|
96
|
+
border-color: var( --kendo-toolbar-flat-border, #{$kendo-toolbar-flat-border} );
|
|
49
97
|
}
|
|
50
98
|
|
|
51
99
|
// stylelint-disable selector-class-pattern
|
|
@@ -95,7 +143,40 @@
|
|
|
95
143
|
color: inherit;
|
|
96
144
|
}
|
|
97
145
|
}
|
|
146
|
+
}
|
|
98
147
|
|
|
148
|
+
// RTL
|
|
149
|
+
.k-rtl,
|
|
150
|
+
[dir="rtl"] {
|
|
151
|
+
.k-toolbar-scrollable-overlay {
|
|
152
|
+
&::before {
|
|
153
|
+
background: linear-gradient(270deg, var( --kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay} ));
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
&::after {
|
|
157
|
+
background: linear-gradient(90deg, var( --kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay} ));
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
&.k-toolbar-outline {
|
|
161
|
+
&::before {
|
|
162
|
+
background: linear-gradient(270deg, var( --kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay} ));
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&::after {
|
|
166
|
+
background: linear-gradient(90deg, var( --kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay} ));
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&.k-toolbar-flat {
|
|
171
|
+
&::before {
|
|
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
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
99
180
|
}
|
|
100
181
|
|
|
101
182
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
2
|
@use "../core/_index.scss" as *;
|
|
3
|
+
@use "../button/_variables.scss" as *;
|
|
3
4
|
|
|
4
5
|
/// The horizontal padding of the small Toolbar.
|
|
5
6
|
/// @group toolbar
|
|
@@ -31,6 +32,16 @@ $kendo-toolbar-md-spacing: k-spacing(2) !default;
|
|
|
31
32
|
/// @group toolbar
|
|
32
33
|
$kendo-toolbar-lg-spacing: k-spacing(2) !default;
|
|
33
34
|
|
|
35
|
+
/// The height of the small Toolbar button separator.
|
|
36
|
+
/// @group toolbar
|
|
37
|
+
$kendo-toolbar-sm-separator-height: $kendo-button-sm-calc-size !default;
|
|
38
|
+
/// The height of the medium Toolbar button separator.
|
|
39
|
+
/// @group toolbar
|
|
40
|
+
$kendo-toolbar-md-separator-height: $kendo-button-md-calc-size !default;
|
|
41
|
+
/// The height of the large Toolbar button separator.
|
|
42
|
+
/// @group toolbar
|
|
43
|
+
$kendo-toolbar-lg-separator-height: $kendo-button-lg-calc-size !default;
|
|
44
|
+
|
|
34
45
|
/// The width of the border around the Toolbar.
|
|
35
46
|
/// @group toolbar
|
|
36
47
|
$kendo-toolbar-border-width: 1px !default;
|
|
@@ -54,6 +65,10 @@ $kendo-toolbar-text: var( --kendo-component-text, inherit ) !default;
|
|
|
54
65
|
/// The color of the border around the Toolbar.
|
|
55
66
|
/// @group toolbar
|
|
56
67
|
$kendo-toolbar-border: var( --kendo-component-border, initial ) !default;
|
|
68
|
+
/// The left and right scroll overlay of the Toolbar.
|
|
69
|
+
/// @group toolbar
|
|
70
|
+
$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
|
|
71
|
+
|
|
57
72
|
|
|
58
73
|
/// The text color of the outline Toolbar.
|
|
59
74
|
/// @group toolbar
|
|
@@ -64,6 +79,10 @@ $kendo-toolbar-outline-border: k-color(border) !default;
|
|
|
64
79
|
/// The width of the border around the outline Toolbar.
|
|
65
80
|
/// @group toolbar
|
|
66
81
|
$kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
|
|
82
|
+
/// The left and right scroll overlay of the outline Toolbar.
|
|
83
|
+
/// @group toolbar
|
|
84
|
+
$kendo-toolbar-outline-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
|
|
85
|
+
|
|
67
86
|
|
|
68
87
|
/// The text color of the flat Toolbar.
|
|
69
88
|
/// @group toolbar
|
|
@@ -74,6 +93,10 @@ $kendo-toolbar-flat-border: $kendo-toolbar-border !default;
|
|
|
74
93
|
/// Border width of the flat Toolbar.
|
|
75
94
|
/// @group toolbar
|
|
76
95
|
$kendo-toolbar-flat-border-width: 1px !default;
|
|
96
|
+
/// The left and right scroll overlay of the flat Toolbar.
|
|
97
|
+
/// @group toolbar
|
|
98
|
+
$kendo-toolbar-flat-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
|
|
99
|
+
|
|
77
100
|
|
|
78
101
|
/// The color of the separator border of the Toolbar.
|
|
79
102
|
/// @group toolbar
|
|
@@ -99,16 +122,19 @@ $kendo-toolbar-sizes: (
|
|
|
99
122
|
sm: (
|
|
100
123
|
padding-x: $kendo-toolbar-sm-padding-x,
|
|
101
124
|
padding-y: $kendo-toolbar-sm-padding-y,
|
|
102
|
-
spacing: $kendo-toolbar-sm-spacing
|
|
125
|
+
spacing: $kendo-toolbar-sm-spacing,
|
|
126
|
+
separator-height: $kendo-toolbar-sm-separator-height
|
|
103
127
|
),
|
|
104
128
|
md: (
|
|
105
129
|
padding-x: $kendo-toolbar-md-padding-x,
|
|
106
130
|
padding-y: $kendo-toolbar-md-padding-y,
|
|
107
|
-
spacing: $kendo-toolbar-md-spacing
|
|
131
|
+
spacing: $kendo-toolbar-md-spacing,
|
|
132
|
+
separator-height: $kendo-toolbar-md-separator-height
|
|
108
133
|
),
|
|
109
134
|
lg: (
|
|
110
135
|
padding-x: $kendo-toolbar-lg-padding-x,
|
|
111
136
|
padding-y: $kendo-toolbar-lg-padding-y,
|
|
112
|
-
spacing: $kendo-toolbar-lg-spacing
|
|
137
|
+
spacing: $kendo-toolbar-lg-spacing,
|
|
138
|
+
separator-height: $kendo-toolbar-lg-separator-height
|
|
113
139
|
)
|
|
114
140
|
) !default;
|