@trintel/zooy 1.2.0 → 1.3.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/package.json +1 -1
- package/src/sass/lists.scss +38 -0
- package/src/sass/main.scss +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// ============================================================================
|
|
2
|
+
// Zooy List Styles
|
|
3
|
+
// ============================================================================
|
|
4
|
+
// Styles for Carbon list variants used by zooy panels. Currently houses the
|
|
5
|
+
// "current page" indicator for <cds-contained-list> used as a navigation list.
|
|
6
|
+
//
|
|
7
|
+
// Example usage in Django template:
|
|
8
|
+
// <cds-contained-list kind="on-page" aria-label="Ops navigation">
|
|
9
|
+
// <cds-contained-list-item clickable event="overview" ... >…</cds-contained-list-item>
|
|
10
|
+
// …
|
|
11
|
+
// </cds-contained-list>
|
|
12
|
+
//
|
|
13
|
+
// and from JS, toggle aria-current="page" on the item representing the
|
|
14
|
+
// current route (e.g. from the view's setActiveRoute helper):
|
|
15
|
+
// item.toggleAttribute('aria-current', isActive ? 'page' : null);
|
|
16
|
+
// ============================================================================
|
|
17
|
+
|
|
18
|
+
// Navigation "current page" indicator.
|
|
19
|
+
//
|
|
20
|
+
// Three visual cues stacked on the host:
|
|
21
|
+
// 1. A subtle background tint via --cds-background-selected.
|
|
22
|
+
// 2. A 3px inline-start indicator bar via --cds-border-interactive, drawn
|
|
23
|
+
// as an inset box-shadow so it stays inside the host box and doesn't
|
|
24
|
+
// shift any of the sibling items' layout.
|
|
25
|
+
// 3. Bold text, which cascades through the flat tree into the slotted
|
|
26
|
+
// label content inside cds-contained-list-item's shadow DOM.
|
|
27
|
+
//
|
|
28
|
+
// Caveat: cds-contained-list-item's hover background lives in shadow DOM on
|
|
29
|
+
// .cds--contained-list-item__content, which paints over the host. While
|
|
30
|
+
// actively hovering the current item the tint and stripe are temporarily
|
|
31
|
+
// covered; both return as soon as the pointer leaves. Styling inside the
|
|
32
|
+
// shadow button is not reachable from here without ::part (which Carbon
|
|
33
|
+
// doesn't expose on this element), so this hover quirk is accepted.
|
|
34
|
+
cds-contained-list-item[aria-current="page"] {
|
|
35
|
+
background-color: var(--cds-background-selected, hsla(0, 0%, 55%, 0.2));
|
|
36
|
+
box-shadow: inset 3px 0 0 0 var(--cds-border-interactive, #0f62fe);
|
|
37
|
+
font-weight: 600;
|
|
38
|
+
}
|