@meshmakers/octo-ui 3.3.850 → 3.3.860
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/package.json +1 -1
- package/styles/_drawer.scss +0 -125
package/package.json
CHANGED
package/styles/_drawer.scss
DELETED
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
// ============================================================================
|
|
2
|
-
// KENDO DRAWER - HIERARCHY OVERRIDES
|
|
3
|
-
// Structural styling that gives Kendo's drawer a clear visual hierarchy
|
|
4
|
-
// (top-level groups vs nested children). Colors are theme-neutral by default
|
|
5
|
-
// and can be overridden by host applications via CSS custom properties.
|
|
6
|
-
//
|
|
7
|
-
// Usage in a host app:
|
|
8
|
-
//
|
|
9
|
-
// @use "@meshmakers/octo-ui/styles" as octo;
|
|
10
|
-
// @include octo.drawer();
|
|
11
|
-
//
|
|
12
|
-
// :root {
|
|
13
|
-
// --mm-drawer-top-color: #e2e8f0;
|
|
14
|
-
// --mm-drawer-child-color: #cbd5e1;
|
|
15
|
-
// --mm-drawer-deep-color: #a0aec0;
|
|
16
|
-
// --mm-drawer-accent: #64ceb9;
|
|
17
|
-
// ... (see variable list below)
|
|
18
|
-
// }
|
|
19
|
-
//
|
|
20
|
-
// Companion runtime markers come from `@meshmakers/shared-services`
|
|
21
|
-
// (CommandService.createDrawerItems sets `mm-drawer-top` / `mm-drawer-child`
|
|
22
|
-
// per item) so the hierarchy stays visible in mini/collapsed mode where
|
|
23
|
-
// Kendo strips its own k-level-N classes.
|
|
24
|
-
//
|
|
25
|
-
// Three or more nested levels are intentionally NOT styled (k-level-3+ falls
|
|
26
|
-
// back to Kendo defaults) — deeply nested sidebars are a UX smell.
|
|
27
|
-
// ============================================================================
|
|
28
|
-
|
|
29
|
-
@mixin drawer() {
|
|
30
|
-
// --------------------------------------------------------------------------
|
|
31
|
-
// Top-level groups (k-level-0)
|
|
32
|
-
// --------------------------------------------------------------------------
|
|
33
|
-
|
|
34
|
-
.k-drawer-item.k-level-0 {
|
|
35
|
-
font-weight: 600;
|
|
36
|
-
font-size: 12.5px;
|
|
37
|
-
text-transform: uppercase;
|
|
38
|
-
letter-spacing: 0.6px;
|
|
39
|
-
color: var(--mm-drawer-top-color, currentColor);
|
|
40
|
-
margin-top: 2px;
|
|
41
|
-
|
|
42
|
-
&.k-selected {
|
|
43
|
-
color: var(--mm-drawer-accent, var(--kendo-color-primary, currentColor));
|
|
44
|
-
background: var(--mm-drawer-accent-bg-top, transparent);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// --------------------------------------------------------------------------
|
|
49
|
-
// Nested items (k-level-1 + k-level-2)
|
|
50
|
-
// Shared rules; per-level overrides differ only in indent, font-size,
|
|
51
|
-
// color, icon scale and guide-line position.
|
|
52
|
-
// --------------------------------------------------------------------------
|
|
53
|
-
|
|
54
|
-
.k-drawer-item.k-level-1,
|
|
55
|
-
.k-drawer-item.k-level-2 {
|
|
56
|
-
font-weight: 400;
|
|
57
|
-
text-transform: none;
|
|
58
|
-
position: relative;
|
|
59
|
-
|
|
60
|
-
.k-icon,
|
|
61
|
-
svg {
|
|
62
|
-
opacity: var(--mm-drawer-scale, 0.85);
|
|
63
|
-
transform: scale(var(--mm-drawer-scale, 0.85));
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
&::before {
|
|
67
|
-
content: "";
|
|
68
|
-
position: absolute;
|
|
69
|
-
top: 0;
|
|
70
|
-
bottom: 0;
|
|
71
|
-
width: 1px;
|
|
72
|
-
left: var(--mm-drawer-guide-x, 22px);
|
|
73
|
-
background: var(--mm-drawer-guide-color, rgba(0, 0, 0, 0.1));
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
&:hover {
|
|
77
|
-
color: var(--mm-drawer-hover-color, currentColor);
|
|
78
|
-
background: var(--mm-drawer-hover-bg, rgba(0, 0, 0, 0.04));
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
&.k-selected {
|
|
82
|
-
color: var(--mm-drawer-accent, var(--kendo-color-primary, currentColor));
|
|
83
|
-
background: var(--mm-drawer-accent-bg, transparent);
|
|
84
|
-
box-shadow: inset 3px 0 0 var(--mm-drawer-accent, var(--kendo-color-primary, currentColor));
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.k-drawer-item.k-level-1 {
|
|
89
|
-
font-size: 13px;
|
|
90
|
-
color: var(--mm-drawer-child-color, var(--kendo-color-subtle, currentColor));
|
|
91
|
-
padding: 6px 12px 6px 36px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.k-drawer-item.k-level-2 {
|
|
95
|
-
font-size: 12.5px;
|
|
96
|
-
color: var(--mm-drawer-deep-color, var(--kendo-color-subtle, currentColor));
|
|
97
|
-
padding: 6px 12px 6px 60px;
|
|
98
|
-
--mm-drawer-scale: 0.75;
|
|
99
|
-
--mm-drawer-guide-x: 46px;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
// Hide Kendo's auto-generated separators — they create awkward gaps
|
|
103
|
-
// between logically grouped child items.
|
|
104
|
-
.k-drawer-item.k-drawer-separator {
|
|
105
|
-
display: none;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// --------------------------------------------------------------------------
|
|
109
|
-
// Mini drawer (collapsed)
|
|
110
|
-
// Kendo strips k-level-N here, so we rely on the mm-drawer-top /
|
|
111
|
-
// mm-drawer-child marker classes that come from shared-services
|
|
112
|
-
// (parent-id driven) to keep the hierarchy readable.
|
|
113
|
-
// --------------------------------------------------------------------------
|
|
114
|
-
|
|
115
|
-
.k-drawer-mini {
|
|
116
|
-
.k-drawer-item.mm-drawer-top:not(.k-selected) {
|
|
117
|
-
color: var(--mm-drawer-top-color, currentColor);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.k-drawer-item.mm-drawer-child:not(.k-selected) {
|
|
121
|
-
color: var(--mm-drawer-child-color, var(--kendo-color-subtle, currentColor));
|
|
122
|
-
opacity: 0.75;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|