@meshmakers/octo-ui 3.3.840 → 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.
|
@@ -2470,17 +2470,78 @@
|
|
|
2470
2470
|
|
|
2471
2471
|
// Separator styling
|
|
2472
2472
|
&.k-drawer-separator {
|
|
2473
|
-
|
|
2474
|
-
min-height: 1px;
|
|
2475
|
-
padding: 0;
|
|
2476
|
-
margin: 8px 12px;
|
|
2477
|
-
background: linear-gradient(90deg, var(--octo-mint-30), transparent);
|
|
2473
|
+
display: none;
|
|
2478
2474
|
}
|
|
2479
2475
|
}
|
|
2480
2476
|
|
|
2477
|
+
// Hierarchy — top-level groups (k-level-0)
|
|
2478
|
+
.k-drawer-item.k-level-0 {
|
|
2479
|
+
color: var(--octo-text-color);
|
|
2480
|
+
text-transform: uppercase;
|
|
2481
|
+
font-weight: 600;
|
|
2482
|
+
letter-spacing: 0.6px;
|
|
2483
|
+
font-size: 12.5px;
|
|
2484
|
+
margin-top: 2px;
|
|
2485
|
+
}
|
|
2486
|
+
|
|
2487
|
+
// Hierarchy — nested items (k-level-1 and k-level-2 share most rules;
|
|
2488
|
+
// per-level overrides set indent, font-size, text colour and the
|
|
2489
|
+
// locally-scoped --guide-x / --icon-scale below).
|
|
2490
|
+
.k-drawer-item.k-level-1,
|
|
2491
|
+
.k-drawer-item.k-level-2 {
|
|
2492
|
+
--guide-x: 22px;
|
|
2493
|
+
--icon-scale: 0.85;
|
|
2494
|
+
|
|
2495
|
+
font-weight: 400;
|
|
2496
|
+
text-transform: none;
|
|
2497
|
+
position: relative;
|
|
2498
|
+
|
|
2499
|
+
.k-icon, .k-svg-icon, kendo-svgicon, svg {
|
|
2500
|
+
transform: scale(var(--icon-scale));
|
|
2501
|
+
opacity: var(--icon-scale);
|
|
2502
|
+
}
|
|
2503
|
+
|
|
2504
|
+
&::before {
|
|
2505
|
+
content: "";
|
|
2506
|
+
position: absolute;
|
|
2507
|
+
top: 0;
|
|
2508
|
+
bottom: 0;
|
|
2509
|
+
left: var(--guide-x);
|
|
2510
|
+
width: 1px;
|
|
2511
|
+
background: color-mix(in srgb, var(--octo-text-color) 10%, transparent);
|
|
2512
|
+
}
|
|
2513
|
+
|
|
2514
|
+
&:hover {
|
|
2515
|
+
color: var(--octo-text-color);
|
|
2516
|
+
background: color-mix(in srgb, var(--octo-text-color) 4%, transparent);
|
|
2517
|
+
}
|
|
2518
|
+
|
|
2519
|
+
&.k-selected {
|
|
2520
|
+
color: var(--octo-mint);
|
|
2521
|
+
background: var(--octo-mint-10);
|
|
2522
|
+
box-shadow: inset 3px 0 0 var(--octo-mint);
|
|
2523
|
+
border-left: none;
|
|
2524
|
+
}
|
|
2525
|
+
}
|
|
2526
|
+
|
|
2527
|
+
.k-drawer-item.k-level-1 {
|
|
2528
|
+
font-size: 13px;
|
|
2529
|
+
color: color-mix(in srgb, var(--octo-text-color) 75%, transparent);
|
|
2530
|
+
padding: 6px 12px 6px 36px;
|
|
2531
|
+
}
|
|
2532
|
+
|
|
2533
|
+
.k-drawer-item.k-level-2 {
|
|
2534
|
+
font-size: 12.5px;
|
|
2535
|
+
color: color-mix(in srgb, var(--octo-text-color) 60%, transparent);
|
|
2536
|
+
padding: 6px 12px 6px 60px;
|
|
2537
|
+
--guide-x: 46px;
|
|
2538
|
+
--icon-scale: 0.75;
|
|
2539
|
+
}
|
|
2540
|
+
|
|
2481
2541
|
// Collapsed state (mini mode)
|
|
2482
2542
|
&[style*="flex-basis: 50px"],
|
|
2483
|
-
&[style*="flex-basis:50px"]
|
|
2543
|
+
&[style*="flex-basis:50px"],
|
|
2544
|
+
&.k-drawer-mini {
|
|
2484
2545
|
.k-drawer-item {
|
|
2485
2546
|
justify-content: center;
|
|
2486
2547
|
padding: 10px 0;
|
|
@@ -2498,6 +2559,18 @@
|
|
|
2498
2559
|
padding-left: 0;
|
|
2499
2560
|
}
|
|
2500
2561
|
}
|
|
2562
|
+
|
|
2563
|
+
.k-drawer-item.mm-drawer-level-0:not(.k-selected) {
|
|
2564
|
+
color: var(--octo-text-color);
|
|
2565
|
+
}
|
|
2566
|
+
.k-drawer-item.mm-drawer-level-1:not(.k-selected) {
|
|
2567
|
+
color: color-mix(in srgb, var(--octo-text-color) 75%, transparent);
|
|
2568
|
+
opacity: 0.85;
|
|
2569
|
+
}
|
|
2570
|
+
.k-drawer-item.mm-drawer-level-2:not(.k-selected) {
|
|
2571
|
+
color: color-mix(in srgb, var(--octo-text-color) 60%, transparent);
|
|
2572
|
+
opacity: 0.7;
|
|
2573
|
+
}
|
|
2501
2574
|
}
|
|
2502
2575
|
}
|
|
2503
2576
|
|