@deque/cauldron-styles 7.0.0 → 7.1.0
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/index.css +70 -0
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -6430,6 +6430,76 @@ button.Accordion__trigger {
|
|
|
6430
6430
|
color: var(--action-list-item-disabled-text-color);
|
|
6431
6431
|
}
|
|
6432
6432
|
|
|
6433
|
+
:root {
|
|
6434
|
+
--tree-view-padding: 1rem;
|
|
6435
|
+
--tree-view-focus-ring-color: var(--focus-light);
|
|
6436
|
+
--tree-view-highlight-background: var(--accent-light);
|
|
6437
|
+
}
|
|
6438
|
+
|
|
6439
|
+
.cauldron--theme-dark {
|
|
6440
|
+
--tree-view-focus-ring-color: var(--focus-dark);
|
|
6441
|
+
--tree-view-highlight-background: var(--accent-dark);
|
|
6442
|
+
}
|
|
6443
|
+
|
|
6444
|
+
.TreeView {
|
|
6445
|
+
display: flex;
|
|
6446
|
+
flex-direction: column;
|
|
6447
|
+
gap: var(--space-quarter);
|
|
6448
|
+
overflow: auto;
|
|
6449
|
+
padding: var(--space-half);
|
|
6450
|
+
outline: none;
|
|
6451
|
+
box-sizing: border-box;
|
|
6452
|
+
}
|
|
6453
|
+
|
|
6454
|
+
.TreeView[data-focus-visible] {
|
|
6455
|
+
outline: 2px solid var(--tree-view-focus-ring-color);
|
|
6456
|
+
outline-offset: -1px;
|
|
6457
|
+
}
|
|
6458
|
+
|
|
6459
|
+
.TreeView .TreeView__item {
|
|
6460
|
+
display: flex;
|
|
6461
|
+
align-items: center;
|
|
6462
|
+
gap: 0.571rem;
|
|
6463
|
+
min-height: 28px;
|
|
6464
|
+
padding: 0.286rem 0.286rem 0.286rem 0.571rem;
|
|
6465
|
+
outline: none;
|
|
6466
|
+
position: relative;
|
|
6467
|
+
transform: translateZ(0);
|
|
6468
|
+
}
|
|
6469
|
+
|
|
6470
|
+
.TreeView .TreeView__item .TreeView__chevron {
|
|
6471
|
+
all: unset;
|
|
6472
|
+
display: flex;
|
|
6473
|
+
visibility: hidden;
|
|
6474
|
+
align-items: center;
|
|
6475
|
+
justify-content: center;
|
|
6476
|
+
width: 1.3rem;
|
|
6477
|
+
height: 100%;
|
|
6478
|
+
padding-left: calc((var(--tree-item-level) - 1) * var(--tree-view-padding));
|
|
6479
|
+
}
|
|
6480
|
+
|
|
6481
|
+
.TreeView .TreeView__item .TreeView__chevron svg {
|
|
6482
|
+
transform: rotate(0deg);
|
|
6483
|
+
transition: transform 200ms;
|
|
6484
|
+
}
|
|
6485
|
+
|
|
6486
|
+
.TreeView .TreeView__item[data-has-child-items] .TreeView__chevron {
|
|
6487
|
+
visibility: visible;
|
|
6488
|
+
}
|
|
6489
|
+
|
|
6490
|
+
.TreeView .TreeView__item[data-expanded] .TreeView__chevron svg {
|
|
6491
|
+
transform: rotate(90deg);
|
|
6492
|
+
}
|
|
6493
|
+
|
|
6494
|
+
.TreeView .TreeView__item[data-focus-visible] {
|
|
6495
|
+
outline: 2px solid var(--tree-view-focus-ring-color);
|
|
6496
|
+
outline-offset: -2px;
|
|
6497
|
+
}
|
|
6498
|
+
|
|
6499
|
+
.TreeView .TreeView__item[aria-selected='true'] {
|
|
6500
|
+
background: var(--tree-view-highlight-background);
|
|
6501
|
+
}
|
|
6502
|
+
|
|
6433
6503
|
/**
|
|
6434
6504
|
* Compact density preset for constrained viewports.
|
|
6435
6505
|
*
|