@hashicorp/react-components 1.2.3 → 1.2.5
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
|
@@ -82,7 +82,7 @@ const ProductPanel = ({
|
|
|
82
82
|
isPromoOnTop={isPromoOnTop}
|
|
83
83
|
/>
|
|
84
84
|
) : null}
|
|
85
|
-
<NavPanel.Column isDevPortal={isDevPortal}>
|
|
85
|
+
<NavPanel.Column className={s.productColumn} isDevPortal={isDevPortal}>
|
|
86
86
|
<ul className={s.productCategories}>
|
|
87
87
|
{productCategories.map(({ group, title, products }) => {
|
|
88
88
|
return (
|
|
@@ -3,10 +3,22 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
@custom-media --dev-dot-viewport (min-width: 924px);
|
|
6
|
+
@custom-media --dev-dot-show-mobile-menu (max-width: 923px);
|
|
7
|
+
@custom-media --dev-dot-mobile only screen and (max-width: 728px);
|
|
8
|
+
@custom-media --dev-dot-tablet only screen and (min-width: 729px) and (max-width: 1000px);
|
|
9
|
+
@custom-media --dev-dot-tablet-down only screen and (max-width: 1000px);
|
|
6
10
|
|
|
7
11
|
.productPanel {
|
|
8
12
|
height: 100%;
|
|
9
13
|
|
|
14
|
+
@nest &.isDevPortal {
|
|
15
|
+
justify-content: flex-start;
|
|
16
|
+
|
|
17
|
+
@media (--dev-dot-show-mobile-menu) {
|
|
18
|
+
padding-top: 24px;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
10
22
|
@media (--large) {
|
|
11
23
|
&:not(.isDevPortal) {
|
|
12
24
|
display: grid;
|
|
@@ -32,6 +44,10 @@
|
|
|
32
44
|
display: grid;
|
|
33
45
|
margin: var(--mds-spacing-07) 0 0;
|
|
34
46
|
|
|
47
|
+
@nest .isDevPortal & {
|
|
48
|
+
margin: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
35
51
|
@nest .topPromo & {
|
|
36
52
|
margin-bottom: var(--mds-spacing-07);
|
|
37
53
|
}
|
|
@@ -58,6 +74,16 @@
|
|
|
58
74
|
border-bottom: 1px solid var(--mds-color-border-primary);
|
|
59
75
|
margin-bottom: var(--mds-spacing-05);
|
|
60
76
|
padding-bottom: var(--mds-spacing-05);
|
|
77
|
+
|
|
78
|
+
@nest .isDevPortal & {
|
|
79
|
+
margin-bottom: var(--mds-spacing-08) !important;
|
|
80
|
+
padding-bottom: var(--mds-spacing-08) !important;
|
|
81
|
+
|
|
82
|
+
@media (--dev-dot-mobile) {
|
|
83
|
+
margin-bottom: var(--mds-spacing-07) !important;
|
|
84
|
+
padding-bottom: var(--mds-spacing-05) !important;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
61
87
|
}
|
|
62
88
|
}
|
|
63
89
|
|
|
@@ -66,6 +92,14 @@
|
|
|
66
92
|
color: var(--mds-color-foreground-strong);
|
|
67
93
|
font-weight: var(--mds-typography-font-weight-semibold);
|
|
68
94
|
|
|
95
|
+
@nest .isDevPortal & {
|
|
96
|
+
padding-bottom: var(--mds-spacing-05);
|
|
97
|
+
|
|
98
|
+
@media (--dev-dot-mobile) {
|
|
99
|
+
padding-bottom: var(--mds-spacing-07);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
69
103
|
@media (--large) {
|
|
70
104
|
@nest :not(.isDevPortal) & {
|
|
71
105
|
padding-bottom: 0;
|
|
@@ -88,6 +122,22 @@
|
|
|
88
122
|
margin: 0;
|
|
89
123
|
padding: 0;
|
|
90
124
|
|
|
125
|
+
@nest .isDevPortal & {
|
|
126
|
+
@media (--dev-dot-show-mobile-menu) {
|
|
127
|
+
grid-template-columns: repeat(2, 1fr);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
@media (--dev-dot-mobile) {
|
|
131
|
+
grid-template-columns: 1fr;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
& > li {
|
|
135
|
+
@media (--dev-dot-mobile) {
|
|
136
|
+
margin-bottom: 8px;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
91
141
|
@media (--large) {
|
|
92
142
|
@nest :not(.isDevPortal) & {
|
|
93
143
|
padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
|
|
@@ -195,12 +245,53 @@
|
|
|
195
245
|
}
|
|
196
246
|
}
|
|
197
247
|
|
|
248
|
+
.productColumn {
|
|
249
|
+
@nest .isDevPortal & {
|
|
250
|
+
margin: 0;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
198
254
|
.mainPanel {
|
|
199
255
|
height: 100%;
|
|
200
256
|
display: flex;
|
|
201
257
|
justify-content: space-between;
|
|
202
258
|
flex-direction: column;
|
|
203
259
|
|
|
260
|
+
@nest .isDevPortal & {
|
|
261
|
+
@media (--dev-dot-show-mobile-menu) {
|
|
262
|
+
display: flex;
|
|
263
|
+
flex-direction: column-reverse;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
@media (--dev-dot-mobile) {
|
|
267
|
+
flex-direction: column;
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
/* Product Grid Section Sides */
|
|
272
|
+
@nest .isDevPortal & > div:first-child {
|
|
273
|
+
@media (--dev-dot-show-mobile-menu) {
|
|
274
|
+
margin: 0 var(--mds-spacing-10);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
@media (--dev-dot-mobile) {
|
|
278
|
+
margin: 0 var(--mds-spacing-07);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* Promo Banner within Product */
|
|
283
|
+
@nest .isDevPortal & > div:nth-child(2) {
|
|
284
|
+
@media (--dev-dot-show-mobile-menu) {
|
|
285
|
+
margin-top: 0;
|
|
286
|
+
margin-bottom: var(--mds-spacing-08);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
@media (--dev-dot-mobile) {
|
|
290
|
+
margin: var(--mds-spacing-07);
|
|
291
|
+
margin-bottom: var(--mds-spacing-09);
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
|
|
204
295
|
@nest .topPromo & {
|
|
205
296
|
justify-content: flex-start;
|
|
206
297
|
}
|
|
@@ -234,6 +325,12 @@
|
|
|
234
325
|
gap: var(--mds-spacing-05);
|
|
235
326
|
margin: 0;
|
|
236
327
|
padding: var(--mds-spacing-07) var(--mds-spacing-04) var(--mds-spacing-09) var(--mds-spacing-07);
|
|
328
|
+
|
|
329
|
+
@nest .isDevPortal & {
|
|
330
|
+
background: none;
|
|
331
|
+
padding-top: 0;
|
|
332
|
+
gap: 0;
|
|
333
|
+
}
|
|
237
334
|
}
|
|
238
335
|
|
|
239
336
|
.sidePanelItems {
|