@progress/kendo-theme-fluent 6.8.0-dev.0 → 6.8.0-dev.2
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 +273 -41
- package/dist/meta/sassdoc-data.json +26354 -24548
- package/dist/meta/sassdoc-raw-data.json +956 -56
- package/lib/swatches/all.json +1 -1
- package/lib/swatches/fluent-main.json +1 -1
- package/package.json +4 -4
- package/scss/core/_index.scss +1 -1
- package/scss/core/module-system/_components.scss +1 -0
- package/scss/dock-manager/_index.scss +29 -0
- package/scss/dock-manager/_layout.scss +224 -0
- package/scss/dock-manager/_theme.scss +47 -0
- package/scss/dock-manager/_variables.scss +119 -0
- package/scss/fab/_layout.scss +0 -1
- package/scss/index.scss +3 -1
- package/scss/pdf-viewer/_layout.scss +31 -50
- package/scss/pdf-viewer/_theme.scss +0 -4
- package/scss/pdf-viewer/_variables.scss +7 -8
- package/scss/splitter/_layout.scss +1 -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.8.0-dev.
|
|
4
|
+
"version": "6.8.0-dev.2",
|
|
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.9.0",
|
|
55
|
-
"@progress/kendo-theme-core": "6.8.0-dev.
|
|
56
|
-
"@progress/kendo-theme-utils": "6.8.0-dev.
|
|
55
|
+
"@progress/kendo-theme-core": "6.8.0-dev.2",
|
|
56
|
+
"@progress/kendo-theme-utils": "6.8.0-dev.2"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "1d0254882897f857ca96fd31477a6e2c18d18433"
|
|
59
59
|
}
|
package/scss/core/_index.scss
CHANGED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// Module meta
|
|
2
|
+
$_kendo-module-meta: (
|
|
3
|
+
name: "dock-manager",
|
|
4
|
+
dependencies: (
|
|
5
|
+
"splitter",
|
|
6
|
+
"toolbar",
|
|
7
|
+
"tabstrip"
|
|
8
|
+
)
|
|
9
|
+
);
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
// Component
|
|
13
|
+
@forward "./_variables.scss";
|
|
14
|
+
@use "./_layout.scss" as *;
|
|
15
|
+
@use "./_theme.scss" as *;
|
|
16
|
+
|
|
17
|
+
// Register
|
|
18
|
+
@use "../core/module-system/" as module;
|
|
19
|
+
@include module.register( $_kendo-module-meta... );
|
|
20
|
+
|
|
21
|
+
// Expose
|
|
22
|
+
@mixin dock-manager-styles() {
|
|
23
|
+
@include module.render( "dock-manager" ) {
|
|
24
|
+
@include kendo-dock-manager--layout();
|
|
25
|
+
@include kendo-dock-manager--theme();
|
|
26
|
+
@include kendo-dock-indicator--layout();
|
|
27
|
+
@include kendo-dock-indicator--theme();
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
@use "../core/_variables.scss" as *;
|
|
2
|
+
@use "./_variables.scss" as *;
|
|
3
|
+
|
|
4
|
+
@mixin kendo-dock-manager--layout() {
|
|
5
|
+
|
|
6
|
+
// DockManager
|
|
7
|
+
.k-dock-manager {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
border-width: var( --kendo-dock-manager-border-width, #{$kendo-dock-manager-border-width} );
|
|
11
|
+
border-style: var( --kendo-dock-manager-border-style, #{$kendo-dock-manager-border-style} );
|
|
12
|
+
position: relative;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-flow: row nowrap;
|
|
15
|
+
overflow: auto;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Toolbar
|
|
20
|
+
.k-dock-manager-toolbar {
|
|
21
|
+
border-width: 0 $kendo-dock-manager-border-width 0 0;
|
|
22
|
+
border-color: inherit;
|
|
23
|
+
flex-shrink: 0;
|
|
24
|
+
writing-mode: vertical-lr;
|
|
25
|
+
|
|
26
|
+
&::before {
|
|
27
|
+
height: 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.k-separator-horizontal {
|
|
31
|
+
width: $kendo-line-height-em;
|
|
32
|
+
height: 0;
|
|
33
|
+
border-width: var( --kendo-dock-manager-border-width, #{$kendo-dock-manager-border-width} ) 0 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Needed because of a bug in Chrome - Issue 1473554
|
|
37
|
+
// A fix will be shipped likely in milestone 118 and then we can revisit this
|
|
38
|
+
@supports (not (-ms-ime-mode: none)) and (not (overflow: -webkit-marquee)) and (not (-moz-appearance:none)) {
|
|
39
|
+
.k-toolbar-button {
|
|
40
|
+
padding-block: var(--INTERNAL--kendo-button-padding-y, 0 );
|
|
41
|
+
padding-inline: var(--INTERNAL--kendo-button-padding-x, 0 );
|
|
42
|
+
}
|
|
43
|
+
.k-toolbar-button .k-button-text {
|
|
44
|
+
writing-mode: vertical-lr;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Panes
|
|
50
|
+
.k-dock-manager-pane-container {
|
|
51
|
+
width: 100%;
|
|
52
|
+
height: 100%;
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-grow: 1;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// Splitter
|
|
59
|
+
.k-dock-manager-splitter,
|
|
60
|
+
.k-dock-manager-unpinned-container {
|
|
61
|
+
height: 100%;
|
|
62
|
+
border-width: 0;
|
|
63
|
+
align-items: stretch;
|
|
64
|
+
|
|
65
|
+
> .k-pane {
|
|
66
|
+
height: auto;
|
|
67
|
+
flex-direction: column;
|
|
68
|
+
border-color: inherit;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.k-pane-header {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
padding-block: var( --kendo-dock-manager-pane-header-padding-y, #{$kendo-dock-manager-pane-header-padding-y} );
|
|
76
|
+
padding-inline: var( --kendo-dock-manager-pane-header-padding-x, #{$kendo-dock-manager-pane-header-padding-x} );
|
|
77
|
+
border-block-end-width: var( --kendo-dock-manager-pane-header-border-width, #{$kendo-dock-manager-pane-header-border-width} );
|
|
78
|
+
border-block-end-style: var( --kendo-dock-manager-pane-header-border-style, #{$kendo-dock-manager-pane-header-border-style} );
|
|
79
|
+
border-color: inherit;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.k-pane-title {
|
|
83
|
+
padding-block: var( --kendo-dock-manager-pane-title-padding-y, #{$kendo-dock-manager-pane-title-padding-y} );
|
|
84
|
+
padding-inline: var( --kendo-dock-manager-pane-title-padding-x, #{$kendo-dock-manager-pane-title-padding-x} );
|
|
85
|
+
font-family: var( --kendo-dock-manager-pane-title-font-family, #{$kendo-font-family} );
|
|
86
|
+
font-size: var( --kendo-dock-manager-pane-title-font-size, #{$kendo-dock-manager-pane-title-font-size} );
|
|
87
|
+
line-height: var( --kendo-dock-manager-pane-title-line-height, #{$kendo-dock-manager-pane-title-line-height} );
|
|
88
|
+
font-weight: var( --kendo-dock-manager-pane-title-font-weight, #{$kendo-dock-manager-pane-title-font-weight} );
|
|
89
|
+
flex: 1 1 auto;
|
|
90
|
+
white-space: nowrap;
|
|
91
|
+
text-overflow: ellipsis;
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.k-pane-scrollable {
|
|
96
|
+
height: 100%;
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
border-color: inherit;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.k-pane-content {
|
|
103
|
+
height: 100%;
|
|
104
|
+
padding-block: var( --kendo-dock-manager-pane-content-padding-y, #{$kendo-dock-manager-pane-content-padding-y} );
|
|
105
|
+
padding-inline: var( --kendo-dock-manager-pane-content-padding-x, #{$kendo-dock-manager-pane-content-padding-x} );
|
|
106
|
+
overflow: auto;
|
|
107
|
+
flex: 1;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.k-pane-actions {
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-flow: row nowrap;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.k-pane-tabbed {
|
|
118
|
+
padding-block: var( --kendo-dock-manager-tabbed-pane-padding-y, #{$kendo-dock-manager-tabbed-pane-padding-y} );
|
|
119
|
+
padding-inline: var( --kendo-dock-manager-tabbed-pane-padding-x, #{$kendo-dock-manager-tabbed-pane-padding-x} );
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.k-splitbar {
|
|
123
|
+
border-width: 0 1px;
|
|
124
|
+
border-style: solid;
|
|
125
|
+
border-color: inherit;
|
|
126
|
+
}
|
|
127
|
+
.k-splitbar-vertical {
|
|
128
|
+
border-width: 1px 0;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// Unpinned pane
|
|
133
|
+
.k-dock-manager-unpinned-container {
|
|
134
|
+
width: var( --kendo-dock-manager-unpinned-container-width, #{$kendo-dock-manager-unpinned-container-width} );
|
|
135
|
+
position: absolute;
|
|
136
|
+
display: flex;
|
|
137
|
+
height: 100%;
|
|
138
|
+
border-color: inherit;
|
|
139
|
+
z-index: 20;
|
|
140
|
+
|
|
141
|
+
.k-pane {
|
|
142
|
+
display: inline-flex;
|
|
143
|
+
flex-direction: column;
|
|
144
|
+
position: relative;
|
|
145
|
+
flex: 1 1 auto;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.k-splitbar {
|
|
149
|
+
height: 100%;
|
|
150
|
+
position: relative;
|
|
151
|
+
flex: none;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// Docking preview
|
|
156
|
+
.k-docking-preview {
|
|
157
|
+
display: flex;
|
|
158
|
+
position: absolute;
|
|
159
|
+
width: 100%;
|
|
160
|
+
height: 100%;
|
|
161
|
+
top: 0;
|
|
162
|
+
left: 0;
|
|
163
|
+
border-width: var( --kendo-dock-manager-dock-preview-border-width, #{$kendo-dock-manager-dock-preview-border-width} );
|
|
164
|
+
border-style: var( --kendo-dock-manager-dock-preview-border-style, #{$kendo-dock-manager-dock-preview-border-style} );
|
|
165
|
+
border-radius: var( --kendo-dock-manager-dock-preview-border-radius, #{$kendo-dock-manager-dock-preview-border-radius} );
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
@mixin kendo-dock-indicator--layout() {
|
|
171
|
+
|
|
172
|
+
// DockNavigator
|
|
173
|
+
.k-dock-navigator-container {
|
|
174
|
+
width: 100%;
|
|
175
|
+
height: 100%;
|
|
176
|
+
display: flex;
|
|
177
|
+
flex-direction: column;
|
|
178
|
+
align-items: center;
|
|
179
|
+
position: absolute;
|
|
180
|
+
z-index: 10001;
|
|
181
|
+
pointer-events: none;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.k-dock-navigator {
|
|
185
|
+
display: grid;
|
|
186
|
+
grid-template-columns: repeat(3, auto);
|
|
187
|
+
grid-template-rows: repeat(3, auto);
|
|
188
|
+
justify-content: center;
|
|
189
|
+
position: absolute;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.k-dock-indicator {
|
|
193
|
+
padding: var( --kendo-dock-indicator-padding, #{$kendo-dock-indicator-padding} );
|
|
194
|
+
display: inline-flex;
|
|
195
|
+
align-items: center;
|
|
196
|
+
justify-content: center;
|
|
197
|
+
box-sizing: border-box;
|
|
198
|
+
position: relative;
|
|
199
|
+
pointer-events: all;
|
|
200
|
+
outline-width: var( --kendo-dock-indicator-outline-width, #{$kendo-dock-indicator-outline-width} );
|
|
201
|
+
outline-style: var( --kendo-dock-indicator-outline-style, #{$kendo-dock-indicator-outline-style} );
|
|
202
|
+
|
|
203
|
+
&.k-dock-indicator-middle {
|
|
204
|
+
box-shadow: none;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.k-dock-indicator-top {
|
|
209
|
+
grid-area: 1 / 2 / auto;
|
|
210
|
+
}
|
|
211
|
+
.k-dock-indicator-right {
|
|
212
|
+
grid-area: 2 / 3 / auto;
|
|
213
|
+
}
|
|
214
|
+
.k-dock-indicator-bottom {
|
|
215
|
+
grid-area: 3 / 2 / auto;
|
|
216
|
+
}
|
|
217
|
+
.k-dock-indicator-left {
|
|
218
|
+
grid-area: 2 / 1 / auto;
|
|
219
|
+
}
|
|
220
|
+
.k-dock-indicator-middle {
|
|
221
|
+
grid-area: 2 / 2 / auto;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
@use "./_variables.scss" as *;
|
|
2
|
+
|
|
3
|
+
@mixin kendo-dock-manager--theme() {
|
|
4
|
+
|
|
5
|
+
// DockManager
|
|
6
|
+
.k-dock-manager {
|
|
7
|
+
border-color: var( --kendo-dock-manager-border, #{$kendo-dock-manager-border} );
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.k-dock-manager-splitter .k-pane-header,
|
|
11
|
+
.k-dock-manager-unpinned-container .k-pane-header {
|
|
12
|
+
background-color: var( --kendo-dock-manager-pane-header-bg, #{$kendo-dock-manager-pane-header-bg} );
|
|
13
|
+
|
|
14
|
+
> .k-pane-title {
|
|
15
|
+
color: var( --kendo-dock-manager-pane-header-text, #{$kendo-dock-manager-pane-header-text} );
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.k-dock-manager-unpinned-container {
|
|
20
|
+
background-color: var( --kendo-dock-manager-unpinned-container-bg, #{$kendo-dock-manager-unpinned-container-bg} );
|
|
21
|
+
box-shadow: $kendo-dock-manager-unpinned-container-shadow;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Docking preview
|
|
25
|
+
.k-docking-preview {
|
|
26
|
+
background-color: var( --kendo-dock-manager-dock-preview-bg, #{$kendo-dock-manager-dock-preview-bg} );
|
|
27
|
+
border-color: var( --kendo-dock-manager-dock-preview-border, #{$kendo-dock-manager-dock-preview-border} );
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@mixin kendo-dock-indicator--theme() {
|
|
33
|
+
|
|
34
|
+
.k-dock-indicator {
|
|
35
|
+
background-color: var( --kendo-dock-indicator-bg, #{$kendo-dock-indicator-bg} );
|
|
36
|
+
color: var( --kendo-dock-indicator-text, #{$kendo-dock-indicator-text} );
|
|
37
|
+
outline-color: var( --kendo-dock-indicator-outline, #{$kendo-dock-indicator-outline} );
|
|
38
|
+
box-shadow: var( --kendo-dock-indicator-shadow, #{$kendo-dock-indicator-shadow} );
|
|
39
|
+
|
|
40
|
+
&:hover,
|
|
41
|
+
&.k-hover {
|
|
42
|
+
background-color: var( --kendo-dock-indicator-hover-bg, #{$kendo-dock-indicator-hover-bg} );
|
|
43
|
+
color: var( --kendo-dock-indicator-hover-text, #{$kendo-dock-indicator-hover-text} );
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "../core/" as *;
|
|
3
|
+
|
|
4
|
+
/// The width of the border around the DockManager component.
|
|
5
|
+
/// @group dock-manager
|
|
6
|
+
$kendo-dock-manager-border-width: 1px !default;
|
|
7
|
+
/// The style of the border around the DockManager component.
|
|
8
|
+
/// @group dock-manager
|
|
9
|
+
$kendo-dock-manager-border-style: solid !default;
|
|
10
|
+
/// The color of the border around the DockManager component.
|
|
11
|
+
/// @group dock-manager
|
|
12
|
+
$kendo-dock-manager-border: var( --kendo-component-border, inherit ) !default;
|
|
13
|
+
|
|
14
|
+
/// The vertical padding of the pane header in the DockManager component.
|
|
15
|
+
/// @group dock-manager
|
|
16
|
+
$kendo-dock-manager-pane-header-padding-y: map.get( $kendo-spacing, 1 ) !default;
|
|
17
|
+
/// The horizontal padding of the pane header in the DockManager component.
|
|
18
|
+
/// @group dock-manager
|
|
19
|
+
$kendo-dock-manager-pane-header-padding-x: map.get( $kendo-spacing, 6 ) !default;
|
|
20
|
+
/// The width of the border around the pane header in the DockManager component.
|
|
21
|
+
/// @group dock-manager
|
|
22
|
+
$kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !default;
|
|
23
|
+
/// The style of the border around the pane header in the DockManager component.
|
|
24
|
+
/// @group dock-manager
|
|
25
|
+
$kendo-dock-manager-pane-header-border-style: solid !default;
|
|
26
|
+
/// The background color of the pane header in the DockManager component.
|
|
27
|
+
/// @group dock-manager
|
|
28
|
+
$kendo-dock-manager-pane-header-bg: var( --kendo-component-bg, inherit ) !default;
|
|
29
|
+
/// The text color of the pane header in the DockManager component.
|
|
30
|
+
/// @group dock-manager
|
|
31
|
+
$kendo-dock-manager-pane-header-text: k-get-theme-color-var( primary-100 ) !default;
|
|
32
|
+
|
|
33
|
+
/// The vertical padding of the pane title in the DockManager component.
|
|
34
|
+
/// @group dock-manager
|
|
35
|
+
$kendo-dock-manager-pane-title-padding-y: null !default;
|
|
36
|
+
/// The horizontal padding of the pane title in the DockManager component.
|
|
37
|
+
/// @group dock-manager
|
|
38
|
+
$kendo-dock-manager-pane-title-padding-x: null !default;
|
|
39
|
+
/// The font family of the pane title in the DockManager component.
|
|
40
|
+
/// @group dock-manager
|
|
41
|
+
$kendo-dock-manager-pane-title-font-family: var( --kendo-font-family, inherit ) !default;
|
|
42
|
+
/// The font size of the pane title in the DockManager component.
|
|
43
|
+
/// @group dock-manager
|
|
44
|
+
$kendo-dock-manager-pane-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
|
|
45
|
+
/// The line height of the pane title in the DockManager component.
|
|
46
|
+
/// @group dock-manager
|
|
47
|
+
$kendo-dock-manager-pane-title-line-height: var( --kendo-line-height, normal ) !default;
|
|
48
|
+
/// The font weight of the pane title in the DockManager component.
|
|
49
|
+
/// @group dock-manager
|
|
50
|
+
$kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight, normal ) !default;
|
|
51
|
+
|
|
52
|
+
/// The horizontal padding of the pane content in the DockManager component.
|
|
53
|
+
/// @group dock-manager
|
|
54
|
+
$kendo-dock-manager-pane-content-padding-x: map.get( $kendo-spacing, 3 ) !default;
|
|
55
|
+
/// The vertical padding of the pane content in the DockManager component.
|
|
56
|
+
/// @group dock-manager
|
|
57
|
+
$kendo-dock-manager-pane-content-padding-y: map.get( $kendo-spacing, 3 ) !default;
|
|
58
|
+
|
|
59
|
+
/// The horizontal padding of the tabbed pane in the DockManager component.
|
|
60
|
+
/// @group dock-manager
|
|
61
|
+
$kendo-dock-manager-tabbed-pane-padding-y: null !default;
|
|
62
|
+
/// The horizontal padding of the tabbed pane in the DockManager component.
|
|
63
|
+
/// @group dock-manager
|
|
64
|
+
$kendo-dock-manager-tabbed-pane-padding-x: null !default;
|
|
65
|
+
|
|
66
|
+
/// The width of the unpinned pane container in the DockManager component.
|
|
67
|
+
/// @group dock-manager
|
|
68
|
+
$kendo-dock-manager-unpinned-container-width: 300px !default;
|
|
69
|
+
/// The background-color of the unpinned pane container in the DockManager component.
|
|
70
|
+
/// @group dock-manager
|
|
71
|
+
$kendo-dock-manager-unpinned-container-bg: $kendo-color-white !default;
|
|
72
|
+
/// The box shadow of the unpinned pane container in the DockManager component.
|
|
73
|
+
/// @group dock-manager
|
|
74
|
+
$kendo-dock-manager-unpinned-container-shadow: 25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18) !default;
|
|
75
|
+
|
|
76
|
+
/// The padding of the dock indicator in the DockManager component.
|
|
77
|
+
/// @group dock-manager
|
|
78
|
+
$kendo-dock-indicator-padding: map.get( $kendo-spacing, 1.5 ) !default;
|
|
79
|
+
/// The background color of the dock indicator in the DockManager component.
|
|
80
|
+
/// @group dock-manager
|
|
81
|
+
$kendo-dock-indicator-bg: $kendo-component-bg !default;
|
|
82
|
+
/// The text color of the dock indicator in the DockManager component.
|
|
83
|
+
/// @group dock-manager
|
|
84
|
+
$kendo-dock-indicator-text: k-get-theme-color-var( primary-100 ) !default;
|
|
85
|
+
/// The outline width of the dock indicator in the DockManager component.
|
|
86
|
+
/// @group dock-manager
|
|
87
|
+
$kendo-dock-indicator-outline-width: 1px !default;
|
|
88
|
+
/// The outline style of the dock indicator in the DockManager component.
|
|
89
|
+
/// @group dock-manager
|
|
90
|
+
$kendo-dock-indicator-outline-style: solid !default;
|
|
91
|
+
/// The outline color of the dock indicator in the DockManager component.
|
|
92
|
+
/// @group dock-manager
|
|
93
|
+
$kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
|
|
94
|
+
/// The box shadow of the dock indicator in the DockManager component.
|
|
95
|
+
/// @group dock-manager
|
|
96
|
+
$kendo-dock-indicator-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 5px -1px rgba(0, 0, 0, 0.20) !default;
|
|
97
|
+
|
|
98
|
+
/// The background color of the hovered dock indicator in the DockManager component.
|
|
99
|
+
/// @group dock-manager
|
|
100
|
+
$kendo-dock-indicator-hover-bg: k-get-theme-color-var( primary-110 ) !default;
|
|
101
|
+
/// The text color of the hovered dock indicator in the DockManager component.
|
|
102
|
+
/// @group dock-manager
|
|
103
|
+
$kendo-dock-indicator-hover-text: $kendo-color-white !default;
|
|
104
|
+
|
|
105
|
+
/// The width of the border around the dropping area in the DockManager component.
|
|
106
|
+
/// @group dock-manager
|
|
107
|
+
$kendo-dock-manager-dock-preview-border-width: 1px !default;
|
|
108
|
+
/// The style of the border around the dropping area in the DockManager component.
|
|
109
|
+
/// @group dock-manager
|
|
110
|
+
$kendo-dock-manager-dock-preview-border-style: dashed !default;
|
|
111
|
+
/// The border radius of the dropping area in the DockManager component.
|
|
112
|
+
/// @group dock-manager
|
|
113
|
+
$kendo-dock-manager-dock-preview-border-radius: var( --kendo-border-radius-md, 0) !default;
|
|
114
|
+
/// The background color of the dropping area in the DockManager component.
|
|
115
|
+
/// @group dock-manager
|
|
116
|
+
$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent) !default;
|
|
117
|
+
/// The border color of the dropping area in the DockManager component.
|
|
118
|
+
/// @group dock-manager
|
|
119
|
+
$kendo-dock-manager-dock-preview-border: k-get-theme-color-var( primary-100 ) !default;
|
package/scss/fab/_layout.scss
CHANGED
package/scss/index.scss
CHANGED
|
@@ -118,6 +118,7 @@
|
|
|
118
118
|
@forward "./panelbar";
|
|
119
119
|
@forward "./splitter";
|
|
120
120
|
@forward "./tilelayout";
|
|
121
|
+
@forward "./dock-manager";
|
|
121
122
|
|
|
122
123
|
|
|
123
124
|
// Editors
|
|
@@ -279,6 +280,7 @@
|
|
|
279
280
|
@use "./panelbar" as *;
|
|
280
281
|
@use "./splitter" as *;
|
|
281
282
|
@use "./tilelayout" as *;
|
|
283
|
+
@use "./dock-manager" as *;
|
|
282
284
|
|
|
283
285
|
|
|
284
286
|
// Data management
|
|
@@ -452,7 +454,7 @@
|
|
|
452
454
|
@include panelbar-styles();
|
|
453
455
|
@include splitter-styles();
|
|
454
456
|
@include tilelayout-styles();
|
|
455
|
-
|
|
457
|
+
@include dock-manager-styles();
|
|
456
458
|
|
|
457
459
|
// Data management
|
|
458
460
|
@include grid-styles();
|
|
@@ -34,36 +34,33 @@
|
|
|
34
34
|
background: none;
|
|
35
35
|
overflow: visible;
|
|
36
36
|
}
|
|
37
|
+
}
|
|
37
38
|
|
|
39
|
+
// Canvas
|
|
40
|
+
.k-pdf-viewer-canvas {
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
flex: 1 1 auto;
|
|
44
|
+
outline: none;
|
|
38
45
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
flex: 1 1 auto;
|
|
44
|
-
outline: none;
|
|
45
|
-
|
|
46
|
-
.k-enable-text-select,
|
|
47
|
-
&.k-enable-text-select {
|
|
48
|
-
user-select: text;
|
|
49
|
-
cursor: text;
|
|
50
|
-
}
|
|
46
|
+
&.k-enable-text-select {
|
|
47
|
+
user-select: text;
|
|
48
|
+
cursor: text;
|
|
49
|
+
}
|
|
51
50
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
.k-enable-panning span::selection,
|
|
57
|
-
&.k-enable-panning span::selection {
|
|
51
|
+
&.k-enable-panning {
|
|
52
|
+
cursor: grab;
|
|
53
|
+
|
|
54
|
+
span::selection {
|
|
58
55
|
background-color: transparent;
|
|
59
56
|
}
|
|
60
57
|
}
|
|
58
|
+
}
|
|
61
59
|
|
|
62
60
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
61
|
+
// Pages
|
|
62
|
+
.k-pdf-viewer-pages {
|
|
63
|
+
flex: 1 1 auto;
|
|
67
64
|
|
|
68
65
|
.k-page {
|
|
69
66
|
position: relative;
|
|
@@ -88,10 +85,6 @@
|
|
|
88
85
|
color: transparent;
|
|
89
86
|
}
|
|
90
87
|
|
|
91
|
-
mark {
|
|
92
|
-
color: transparent;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
88
|
.k-search-highlight-mark {
|
|
96
89
|
color: transparent;
|
|
97
90
|
}
|
|
@@ -115,23 +108,26 @@
|
|
|
115
108
|
background: none;
|
|
116
109
|
}
|
|
117
110
|
}
|
|
118
|
-
|
|
119
111
|
}
|
|
120
112
|
|
|
121
|
-
// Search
|
|
122
|
-
.k-pdf-viewer-search-dialog {
|
|
123
|
-
padding: 0 !important; // stylelint-disable-line declaration-no-important
|
|
124
|
-
}
|
|
125
113
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
114
|
+
// Search
|
|
115
|
+
.k-pdf-viewer-canvas > .k-search-panel {
|
|
116
|
+
width: max-content;
|
|
117
|
+
margin-block-start: var( --kendo-pdf-viewer-search-panel-margin-y, #{$kendo-pdf-viewer-search-panel-margin-y} );
|
|
118
|
+
padding-block: var( --kendo-pdf-viewer-search-panel-padding-y, #{$kendo-pdf-viewer-search-panel-padding-y} );
|
|
119
|
+
padding-inline: var( --kendo-pdf-viewer-search-panel-padding-x, #{$kendo-pdf-viewer-search-panel-padding-x} );
|
|
120
|
+
border-width: var( --kendo-pdf-viewer-search-panel-border-width, #{$kendo-pdf-viewer-search-panel-border-width} );
|
|
121
|
+
border-style: solid;
|
|
122
|
+
border-radius: var( --kendo-pdf-viewer-search-panel-border-radius, #{$kendo-pdf-viewer-search-panel-border-radius} );
|
|
129
123
|
display: flex;
|
|
130
|
-
gap: var( --kendo-pdf-viewer-search-
|
|
124
|
+
gap: var( --kendo-pdf-viewer-search-panel-spacing, #{$kendo-pdf-viewer-search-panel-spacing} );
|
|
131
125
|
flex-flow: row nowrap;
|
|
132
126
|
flex: 0 0 auto;
|
|
133
127
|
justify-content: flex-start;
|
|
134
128
|
align-items: center;
|
|
129
|
+
z-index: 10;
|
|
130
|
+
cursor: default;
|
|
135
131
|
|
|
136
132
|
.k-search-dialog-draghandle {
|
|
137
133
|
cursor: move;
|
|
@@ -153,19 +149,4 @@
|
|
|
153
149
|
}
|
|
154
150
|
}
|
|
155
151
|
|
|
156
|
-
.k-pdf-viewer-canvas > .k-search-panel {
|
|
157
|
-
width: max-content;
|
|
158
|
-
margin-block-start: var( --kendo-pdf-viewer-search-panel-margin-y, #{$kendo-pdf-viewer-search-panel-margin-y} );
|
|
159
|
-
border-width: var( --kendo-pdf-viewer-search-panel-border-width, #{$kendo-pdf-viewer-search-panel-border-width} );
|
|
160
|
-
border-style: solid;
|
|
161
|
-
border-radius: var( --kendo-pdf-viewer-search-panel-border-radius, #{$kendo-pdf-viewer-search-panel-border-radius} );
|
|
162
|
-
z-index: 10;
|
|
163
|
-
cursor: default;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
// Alias
|
|
167
|
-
.k-search-container {
|
|
168
|
-
@extend .k-search-panel !optional;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
152
|
}
|