@carbon/element-styles 0.3.12 → 0.3.13
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
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
@use "../../utilities/icons";
|
|
16
16
|
@use "../../utilities/guards";
|
|
17
17
|
@use "../../utilities/active-indicator";
|
|
18
|
+
@use "../../utilities/tokens";
|
|
18
19
|
|
|
19
20
|
$config: () !default;
|
|
20
21
|
|
|
@@ -39,12 +40,36 @@ $-default-config: (
|
|
|
39
40
|
overflow-y: auto;
|
|
40
41
|
box-sizing: border-box;
|
|
41
42
|
|
|
43
|
+
& section + section {
|
|
44
|
+
padding-block-start: layout.$density--padding;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
& header {
|
|
48
|
+
@include layout.mode--helper-text;
|
|
49
|
+
color: theme.$text-helper;
|
|
50
|
+
padding-block-start: layout.$size--padding-block-start;
|
|
51
|
+
padding-block-end: spacing.$spacing-03;
|
|
52
|
+
padding-inline: layout.$density--padding;
|
|
53
|
+
}
|
|
54
|
+
|
|
42
55
|
& ul {
|
|
43
56
|
margin: 0;
|
|
44
57
|
padding: 0;
|
|
45
58
|
list-style: none;
|
|
46
59
|
}
|
|
47
60
|
|
|
61
|
+
@for $i from 1 through 8 {
|
|
62
|
+
$nesting-selector: "& ul";
|
|
63
|
+
|
|
64
|
+
@for $_ from 1 to $i {
|
|
65
|
+
$nesting-selector: "#{$nesting-selector} ul";
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
#{$nesting-selector} {
|
|
69
|
+
@include tokens.set("side-navigation--level", $i);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
48
73
|
& li {
|
|
49
74
|
margin: 0;
|
|
50
75
|
padding: 0;
|
|
@@ -68,7 +93,10 @@ $-default-config: (
|
|
|
68
93
|
block-size: layout.$size--block-size;
|
|
69
94
|
padding-block-start: layout.$size--padding-block-start;
|
|
70
95
|
padding-block-end: layout.$size--padding-block-end;
|
|
71
|
-
padding-inline:
|
|
96
|
+
padding-inline-start: calc(
|
|
97
|
+
layout.$density--padding * tokens.get("side-navigation--level", 1)
|
|
98
|
+
);
|
|
99
|
+
padding-inline-end: layout.$density--padding;
|
|
72
100
|
cursor: pointer;
|
|
73
101
|
white-space: nowrap;
|
|
74
102
|
text-overflow: ellipsis;
|
|
@@ -113,7 +141,6 @@ $-default-config: (
|
|
|
113
141
|
|
|
114
142
|
& li > button[aria-expanded] + ul a {
|
|
115
143
|
@include layout.mode--body-compact;
|
|
116
|
-
padding-inline-start: calc(layout.$density--padding * 2);
|
|
117
144
|
}
|
|
118
145
|
|
|
119
146
|
& li > button[aria-expanded]:has(+ ul a[aria-current="page"]) {
|
|
@@ -146,11 +173,11 @@ $-default-config: (
|
|
|
146
173
|
margin-inline: layout.$density--padding;
|
|
147
174
|
}
|
|
148
175
|
|
|
149
|
-
&
|
|
176
|
+
& ul > li a:has(svg) {
|
|
150
177
|
padding-inline-end: calc(layout.$density--padding + 1rem + layout.$density--padding);
|
|
151
178
|
}
|
|
152
179
|
|
|
153
|
-
&
|
|
180
|
+
& ul > li a svg {
|
|
154
181
|
fill: currentColor;
|
|
155
182
|
block-size: 1rem;
|
|
156
183
|
inline-size: 1rem;
|
|
@@ -159,6 +186,10 @@ $-default-config: (
|
|
|
159
186
|
inset-block-start: layout.$size--padding-block-start;
|
|
160
187
|
}
|
|
161
188
|
|
|
189
|
+
& ul ul button[aria-expanded] {
|
|
190
|
+
@include layout.mode--body-compact;
|
|
191
|
+
}
|
|
192
|
+
|
|
162
193
|
& + main,
|
|
163
194
|
& + main + footer {
|
|
164
195
|
margin-inline-start: 16rem;
|