@repobit/dex-system-design 0.23.15 → 0.23.17
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/CHANGELOG.md +14 -0
- package/package.json +2 -2
- package/src/components/Button/Button.js +61 -33
- package/src/components/Button/button.css.js +63 -79
- package/src/components/anchor/anchor-nav.css.js +105 -91
- package/src/components/anchor/anchor-nav.js +209 -123
- package/src/components/anchor/anchor.stories.js +190 -83
- package/src/components/badge/badge.css.js +15 -38
- package/src/components/badge/badge.js +15 -35
- package/src/components/compare/compare.stories.js +6 -3
- package/src/components/link/link.css.js +38 -2
- package/src/components/link/link.js +20 -14
|
@@ -3,35 +3,35 @@ import { css } from "lit";
|
|
|
3
3
|
export const anchorNavStyles = css`
|
|
4
4
|
:host {
|
|
5
5
|
display: block;
|
|
6
|
-
position: sticky;
|
|
7
|
-
top: var(--spacing-0);
|
|
8
|
-
z-index: 1000;
|
|
9
|
-
border-top: var(--border-width-1) solid var(--color-neutral-100);
|
|
10
|
-
border-bottom: var(--border-width-1) solid var(--color-neutral-100);
|
|
11
|
-
padding-block: var(--spacing-10);
|
|
12
|
-
padding-inline: var(--layout-ensemble-inline-padding);
|
|
13
6
|
width: 100%;
|
|
14
|
-
box-sizing: border-box;
|
|
15
7
|
background: var(--color-neutral-0);
|
|
16
|
-
margin-bottom: var(--spacing-0);
|
|
17
8
|
--bd-accesibility-focus: var(--color-blue-500);
|
|
9
|
+
--anchor-nav-max-width: var(--layout-compare-grid-max, 100%);
|
|
18
10
|
}
|
|
19
11
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
12
|
+
:host(.is-sticky) {
|
|
13
|
+
position: fixed;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: var(--sticky-left, 0);
|
|
16
|
+
width: var(--sticky-width, 100%);
|
|
17
|
+
box-shadow: var(--shadow-sm);
|
|
18
|
+
z-index: 1000;
|
|
27
19
|
}
|
|
28
20
|
|
|
21
|
+
/* Border-urile sunt pe nav - full width */
|
|
29
22
|
nav {
|
|
30
23
|
display: block;
|
|
31
24
|
margin: var(--spacing-0);
|
|
32
25
|
padding: var(--spacing-0);
|
|
33
26
|
width: 100%;
|
|
34
27
|
box-sizing: border-box;
|
|
28
|
+
border-top: var(--border-width-1) solid var(--color-neutral-100);
|
|
29
|
+
border-bottom: var(--border-width-1) solid var(--color-neutral-100);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Când e sticky, păstrăm aceleași border-uri */
|
|
33
|
+
:host(.is-sticky) nav {
|
|
34
|
+
background: var(--color-neutral-0);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.bd-anchor-nav__inner {
|
|
@@ -41,11 +41,24 @@ export const anchorNavStyles = css`
|
|
|
41
41
|
align-items: center;
|
|
42
42
|
gap: var(--spacing-32);
|
|
43
43
|
width: 100%;
|
|
44
|
-
max-width: var(--
|
|
44
|
+
max-width: var(--anchor-nav-max-width);
|
|
45
|
+
padding-block: var(--spacing-10);
|
|
46
|
+
padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
|
|
45
47
|
margin-inline: auto;
|
|
46
48
|
box-sizing: border-box;
|
|
47
49
|
}
|
|
48
50
|
|
|
51
|
+
/* Restul codului tău CSS rămâne identic de aici în jos */
|
|
52
|
+
|
|
53
|
+
.anchor-link:focus-visible,
|
|
54
|
+
.bd-anchor-nav__cta:focus-visible,
|
|
55
|
+
.bd-anchor-nav__dropdown-toggle:focus-visible,
|
|
56
|
+
.bd-anchor-nav__dropdown-option:focus-visible {
|
|
57
|
+
outline: var(--spacing-2) solid var(--bd-accesibility-focus);
|
|
58
|
+
outline-offset: var(--spacing-2);
|
|
59
|
+
border-radius: var(--space-2xs);
|
|
60
|
+
}
|
|
61
|
+
|
|
49
62
|
.anchor-links {
|
|
50
63
|
position: relative;
|
|
51
64
|
display: flex;
|
|
@@ -57,8 +70,67 @@ export const anchorNavStyles = css`
|
|
|
57
70
|
min-width: 0;
|
|
58
71
|
}
|
|
59
72
|
|
|
60
|
-
.anchor-links--desktop {
|
|
61
|
-
|
|
73
|
+
.anchor-links--desktop { display: flex; }
|
|
74
|
+
|
|
75
|
+
.anchor-link {
|
|
76
|
+
position: relative;
|
|
77
|
+
text-decoration: none;
|
|
78
|
+
color: var(--color-neutral-900);
|
|
79
|
+
font-weight: var(--typography-fontWeight-normal);
|
|
80
|
+
padding: var(--spacing-10) var(--spacing-0);
|
|
81
|
+
display: inline-block;
|
|
82
|
+
font-size: var(--typography-body-regular-fontSize);
|
|
83
|
+
font-family: var(--typography-body-regular-fontFamily);
|
|
84
|
+
transition: color var(--transition-duration-fast) var(--transition-easing-smooth);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.anchor-link.active {
|
|
88
|
+
font-weight: var(--typography-fontWeight-semibold);
|
|
89
|
+
color: var(--color-neutral-900);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.anchor-link,
|
|
93
|
+
.anchor-link.bd-link,
|
|
94
|
+
.anchor-link.bd-link--primary,
|
|
95
|
+
.anchor-link.bd-link--secondary {
|
|
96
|
+
text-decoration: none !important;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.anchor-link:hover,
|
|
100
|
+
.anchor-link.bd-link:hover,
|
|
101
|
+
.anchor-link.bd-link--primary:hover,
|
|
102
|
+
.anchor-link.bd-link--secondary:hover {
|
|
103
|
+
text-decoration: none !important;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.anchor-link.bd-link--primary:hover {
|
|
107
|
+
color: var(--color-blue-500) !important;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.anchor-link.bd-link--secondary:hover {
|
|
111
|
+
color: var(--color-neutral-900) !important;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.anchor-link.active:hover,
|
|
115
|
+
.anchor-link.active.bd-link--primary:hover,
|
|
116
|
+
.anchor-link.active.bd-link--secondary:hover {
|
|
117
|
+
color: var(--color-neutral-900) !important;
|
|
118
|
+
text-decoration: none !important;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.anchor-link::after {
|
|
122
|
+
content: "";
|
|
123
|
+
position: absolute;
|
|
124
|
+
left: var(--spacing-0);
|
|
125
|
+
bottom: calc(-1 * var(--spacing-14));
|
|
126
|
+
width: 0%;
|
|
127
|
+
height: var(--border-width-3);
|
|
128
|
+
background-color: var(--color-blue-500);
|
|
129
|
+
transition: width var(--transition-duration-slow) var(--transition-easing-ease-out);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.anchor-link.active::after {
|
|
133
|
+
width: 100%;
|
|
62
134
|
}
|
|
63
135
|
|
|
64
136
|
.bd-anchor-nav__dropdown {
|
|
@@ -69,8 +141,6 @@ export const anchorNavStyles = css`
|
|
|
69
141
|
width: 100%;
|
|
70
142
|
}
|
|
71
143
|
|
|
72
|
-
/* ── Dropdown toggle ── */
|
|
73
|
-
|
|
74
144
|
.bd-anchor-nav__dropdown-toggle {
|
|
75
145
|
display: flex;
|
|
76
146
|
align-items: center;
|
|
@@ -104,7 +174,6 @@ export const anchorNavStyles = css`
|
|
|
104
174
|
.bd-anchor-nav__dropdown-toggle[aria-expanded="true"] {
|
|
105
175
|
background: var(--color-neutral-50);
|
|
106
176
|
border-color: var(--color-blue-200);
|
|
107
|
-
border-radius: var(--radius-lg) var(--radius-lg) var(--spacing-0) var(--spacing-0);
|
|
108
177
|
}
|
|
109
178
|
|
|
110
179
|
.bd-anchor-nav__dropdown-label {
|
|
@@ -128,8 +197,6 @@ export const anchorNavStyles = css`
|
|
|
128
197
|
color: var(--color-blue-500);
|
|
129
198
|
}
|
|
130
199
|
|
|
131
|
-
/* ── Dropdown panel ── */
|
|
132
|
-
|
|
133
200
|
.bd-anchor-nav__dropdown-panel {
|
|
134
201
|
position: absolute;
|
|
135
202
|
left: var(--spacing-0);
|
|
@@ -154,8 +221,6 @@ export const anchorNavStyles = css`
|
|
|
154
221
|
gap: var(--spacing-2);
|
|
155
222
|
}
|
|
156
223
|
|
|
157
|
-
/* ── Dropdown options ── */
|
|
158
|
-
|
|
159
224
|
.bd-anchor-nav__dropdown-option {
|
|
160
225
|
display: flex;
|
|
161
226
|
align-items: center;
|
|
@@ -194,50 +259,10 @@ export const anchorNavStyles = css`
|
|
|
194
259
|
background: var(--color-blue-50);
|
|
195
260
|
}
|
|
196
261
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
a {
|
|
200
|
-
position: relative;
|
|
201
|
-
text-decoration: none;
|
|
202
|
-
color: var(--color-neutral-900);
|
|
203
|
-
font-weight: var(--typography-fontWeight-normal);
|
|
204
|
-
padding: var(--spacing-10) var(--spacing-0);
|
|
205
|
-
display: inline-block;
|
|
206
|
-
font-size: var(--typography-body-regular-fontSize);
|
|
207
|
-
font-family: var(--typography-body-regular-fontFamily);
|
|
208
|
-
transition: color var(--transition-duration-fast) var(--transition-easing-smooth);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
a.active {
|
|
212
|
-
font-weight: var(--typography-fontWeight-semibold);
|
|
213
|
-
color: var(--color-neutral-900);
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
a:hover:not(.active) {
|
|
217
|
-
color: var(--color-blue-500);
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
a.active:hover {
|
|
221
|
-
color: var(--color-neutral-900);
|
|
262
|
+
::slotted([slot="cta"]) {
|
|
263
|
+
flex-shrink: 0;
|
|
222
264
|
}
|
|
223
265
|
|
|
224
|
-
a::after {
|
|
225
|
-
content: "";
|
|
226
|
-
position: absolute;
|
|
227
|
-
left: var(--spacing-0);
|
|
228
|
-
bottom: calc(-1 * var(--spacing-14));
|
|
229
|
-
width: 0%;
|
|
230
|
-
height: var(--border-width-3);
|
|
231
|
-
background-color: var(--color-blue-500);
|
|
232
|
-
transition: width var(--transition-duration-slow) var(--transition-easing-ease-out);
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
a.active::after {
|
|
236
|
-
width: 100%;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
/* ── CTA button ── */
|
|
240
|
-
|
|
241
266
|
.bd-anchor-nav__cta {
|
|
242
267
|
font-family: var(--typography-fontFamily-sans);
|
|
243
268
|
font-size: var(--typography-fontSize-lg);
|
|
@@ -249,32 +274,32 @@ export const anchorNavStyles = css`
|
|
|
249
274
|
cursor: pointer;
|
|
250
275
|
background: var(--color-red-500);
|
|
251
276
|
color: var(--color-neutral-0);
|
|
277
|
+
text-decoration: none !important;
|
|
252
278
|
transition: background var(--transition-duration-fast) var(--transition-easing-smooth);
|
|
253
279
|
}
|
|
254
280
|
|
|
255
281
|
.bd-anchor-nav__cta:hover {
|
|
256
282
|
background: var(--color-red-600);
|
|
283
|
+
color: var(--color-neutral-0);
|
|
284
|
+
text-decoration: none !important;
|
|
257
285
|
}
|
|
258
286
|
|
|
259
287
|
.bd-anchor-nav__cta:active {
|
|
260
288
|
background: var(--color-red-700);
|
|
289
|
+
color: var(--color-neutral-0);
|
|
261
290
|
}
|
|
262
291
|
|
|
263
|
-
|
|
292
|
+
.bd-anchor-nav__cta::after {
|
|
293
|
+
display: none;
|
|
294
|
+
}
|
|
264
295
|
|
|
265
296
|
@keyframes bd-anchor-nav-dropdown-label-swap {
|
|
266
|
-
from {
|
|
267
|
-
|
|
268
|
-
transform: translateY(var(--spacing-4));
|
|
269
|
-
}
|
|
270
|
-
to {
|
|
271
|
-
opacity: 1;
|
|
272
|
-
transform: translateY(var(--spacing-0));
|
|
273
|
-
}
|
|
297
|
+
from { opacity: 0.35; transform: translateY(var(--spacing-4)); }
|
|
298
|
+
to { opacity: 1; transform: translateY(var(--spacing-0)); }
|
|
274
299
|
}
|
|
275
300
|
|
|
276
301
|
@media (prefers-reduced-motion: reduce) {
|
|
277
|
-
|
|
302
|
+
.anchor-link::after,
|
|
278
303
|
.bd-anchor-nav__dropdown-chevron,
|
|
279
304
|
.bd-cta,
|
|
280
305
|
.bd-anchor-nav__dropdown-label--swap {
|
|
@@ -282,27 +307,16 @@ export const anchorNavStyles = css`
|
|
|
282
307
|
}
|
|
283
308
|
}
|
|
284
309
|
|
|
285
|
-
/* ── Mobile ── */
|
|
286
|
-
|
|
287
310
|
@media (max-width: 768px) {
|
|
288
|
-
:host {
|
|
289
|
-
padding-block: var(--spacing-10);
|
|
290
|
-
padding-inline: var(--layout-ensemble-inline-padding);
|
|
291
|
-
}
|
|
292
|
-
|
|
293
311
|
.bd-anchor-nav__inner {
|
|
294
312
|
flex-direction: column;
|
|
295
313
|
align-items: stretch;
|
|
296
314
|
gap: var(--spacing-16);
|
|
297
315
|
}
|
|
298
316
|
|
|
299
|
-
.anchor-links--desktop {
|
|
300
|
-
display: none !important;
|
|
301
|
-
}
|
|
317
|
+
.anchor-links--desktop { display: none !important; }
|
|
302
318
|
|
|
303
|
-
.bd-anchor-nav__dropdown {
|
|
304
|
-
display: block;
|
|
305
|
-
}
|
|
319
|
+
.bd-anchor-nav__dropdown { display: block; }
|
|
306
320
|
|
|
307
321
|
.bd-anchor-nav__dropdown-label.bd-anchor-nav__dropdown-label--swap {
|
|
308
322
|
animation: bd-anchor-nav-dropdown-label-swap var(--transition-duration-normal)
|