@uncinq/css-components 0.1.0 → 0.1.1
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/css/component/nav-title.css +12 -0
- package/css/component/nav.css +17 -31
- package/css/index.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/* components/nav-title.css */
|
|
2
|
+
/*
|
|
3
|
+
* .nav-title — navigation title.
|
|
4
|
+
*/
|
|
5
|
+
@layer components {
|
|
6
|
+
.nav-title {
|
|
7
|
+
font-size: var(--nav-font-size-title);
|
|
8
|
+
font-weight: var(--nav-font-weight-title);
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: var(--nav-padding-y) var(--nav-padding-x);
|
|
11
|
+
}
|
|
12
|
+
}
|
package/css/component/nav.css
CHANGED
|
@@ -2,32 +2,25 @@
|
|
|
2
2
|
/*
|
|
3
3
|
* .nav — base navigation list, vertical by default.
|
|
4
4
|
*
|
|
5
|
-
* Variants:
|
|
6
|
-
* .nav-title — bold group heading (not a link)
|
|
7
|
-
* .nav-social — icon-only social links
|
|
8
|
-
* .nav-language — compact language switcher
|
|
9
|
-
*
|
|
10
5
|
* Structure:
|
|
11
|
-
* <nav>
|
|
12
|
-
* <
|
|
13
|
-
* <
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* </ul>
|
|
17
|
-
* </nav>
|
|
6
|
+
* <ul|ol class="nav">
|
|
7
|
+
* <li>
|
|
8
|
+
* <a href="...">...</a>
|
|
9
|
+
* </li>
|
|
10
|
+
* </ul>
|
|
18
11
|
*
|
|
19
12
|
* Direction is set by context (e.g. header sets flex-direction: row).
|
|
20
13
|
*/
|
|
21
14
|
@layer components {
|
|
22
15
|
.nav {
|
|
16
|
+
&,
|
|
23
17
|
ul,
|
|
24
18
|
ol {
|
|
25
19
|
display: flex;
|
|
26
|
-
flex-direction: column;
|
|
20
|
+
flex-direction: var(--nav-direction, column);
|
|
27
21
|
gap: var(--nav-gap);
|
|
28
22
|
list-style: none;
|
|
29
23
|
margin: 0;
|
|
30
|
-
padding: 0;
|
|
31
24
|
}
|
|
32
25
|
|
|
33
26
|
/* ── Nav item ────────────────────────────────────────────────── */
|
|
@@ -56,25 +49,18 @@
|
|
|
56
49
|
display: block;
|
|
57
50
|
padding: var(--nav-padding-y) var(--nav-padding-x);
|
|
58
51
|
}
|
|
59
|
-
}
|
|
60
52
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
.nav-title {
|
|
64
|
-
font-size: var(--nav-font-size-title);
|
|
65
|
-
font-weight: var(--nav-font-weight-title);
|
|
66
|
-
margin: 0;
|
|
67
|
-
padding: var(--nav-padding-y) var(--nav-padding-x);
|
|
68
|
-
}
|
|
53
|
+
/* ── Item highlighted ───────────────────────────────────────────────────── */
|
|
69
54
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
55
|
+
.nav-item-highlighted {
|
|
56
|
+
line-height: 1.2;
|
|
57
|
+
margin-inline: var(--nav-padding-x);
|
|
58
|
+
&:first-child {
|
|
59
|
+
margin-inline-start: 0;
|
|
60
|
+
}
|
|
61
|
+
&:last-child {
|
|
62
|
+
margin-inline-end: 0;
|
|
63
|
+
}
|
|
78
64
|
}
|
|
79
65
|
}
|
|
80
66
|
}
|
package/css/index.css
CHANGED