@primer/brand-css 0.68.1-rc.fa68148f → 0.69.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/components/Card/Card.css
CHANGED
|
@@ -389,8 +389,7 @@
|
|
|
389
389
|
|
|
390
390
|
margin-block-start: var(--base-size-20);
|
|
391
391
|
min-height: var(--base-size-40);
|
|
392
|
-
width:
|
|
393
|
-
width: fit-content;
|
|
392
|
+
width: auto;
|
|
394
393
|
min-inline-size: 0;
|
|
395
394
|
max-inline-size: calc(100% - var(--Card-arrowAction-endInset));
|
|
396
395
|
justify-content: flex-start;
|
|
@@ -22,20 +22,77 @@
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.RiverBreakoutTabs__sharedVisuals {
|
|
25
|
+
position: relative;
|
|
25
26
|
order: 1;
|
|
26
27
|
margin-block-end: var(--base-size-36);
|
|
27
28
|
width: 100%;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
border-radius: var(--brand-borderRadius-small);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* River removes the gridline top spacing when a subtle visual is present
|
|
34
|
+
(.RiverBreakout--variant-gridline:has(.River__visual--has-background)), bleeding the subtle
|
|
35
|
+
background up to the top gridline. Restore the top spacing so a non-full-bleed background is
|
|
36
|
+
inset from the top like the sides — only backgroundVisualFullBleed should reach the
|
|
37
|
+
top gridline. */
|
|
38
|
+
.RiverBreakoutTabs:has(:global([class*='River__visual--has-background'])) {
|
|
39
|
+
padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);
|
|
28
40
|
}
|
|
29
41
|
|
|
30
42
|
.RiverBreakoutTabs__accordionSharedVisuals {
|
|
43
|
+
position: relative;
|
|
31
44
|
margin-block-end: var(--base-size-16);
|
|
32
45
|
width: 100%;
|
|
33
46
|
}
|
|
34
47
|
|
|
35
48
|
.RiverBreakoutTabs__sharedVisualPanel {
|
|
49
|
+
position: relative;
|
|
50
|
+
z-index: 1;
|
|
36
51
|
min-width: 0;
|
|
37
52
|
}
|
|
38
53
|
|
|
54
|
+
.RiverBreakoutTabs__backgroundVisual {
|
|
55
|
+
position: absolute;
|
|
56
|
+
inset: 0;
|
|
57
|
+
z-index: 0;
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
pointer-events: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.RiverBreakoutTabs__accordionSharedVisual {
|
|
63
|
+
position: relative;
|
|
64
|
+
z-index: 1;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,
|
|
68
|
+
.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {
|
|
69
|
+
padding: var(--base-size-32);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@media screen and (min-width: 63.25rem) {
|
|
73
|
+
.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,
|
|
74
|
+
.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {
|
|
75
|
+
padding: var(--base-size-64);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* for imagePosition="block-end" */
|
|
80
|
+
.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__sharedVisualPanel,
|
|
81
|
+
.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__accordionSharedVisual {
|
|
82
|
+
padding-block-end: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* for backgroundVisualFullBleed — extend the backdrop to the gridline edges */
|
|
86
|
+
.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__sharedVisuals {
|
|
87
|
+
overflow: visible;
|
|
88
|
+
border-radius: 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__backgroundVisual {
|
|
92
|
+
inset-block-start: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock));
|
|
93
|
+
inset-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));
|
|
94
|
+
}
|
|
95
|
+
|
|
39
96
|
.RiverBreakoutTabs__sharedVisual :is(img, picture, video),
|
|
40
97
|
.RiverBreakoutTabs__accordionSharedVisual :is(img, picture, video) {
|
|
41
98
|
display: block;
|
|
@@ -123,7 +180,6 @@
|
|
|
123
180
|
display: flex;
|
|
124
181
|
flex-direction: column;
|
|
125
182
|
align-items: flex-start;
|
|
126
|
-
gap: var(--base-size-20);
|
|
127
183
|
cursor: pointer;
|
|
128
184
|
outline: none;
|
|
129
185
|
padding-inline: 0;
|
|
@@ -138,11 +194,17 @@
|
|
|
138
194
|
margin: 0;
|
|
139
195
|
}
|
|
140
196
|
|
|
197
|
+
/* 20px below the icon — only applies when an icon precedes the heading */
|
|
198
|
+
.RiverBreakoutTabs__tab > * + .RiverBreakoutTabs__tabHeading {
|
|
199
|
+
margin-block-start: var(--base-size-20);
|
|
200
|
+
}
|
|
201
|
+
|
|
141
202
|
.RiverBreakoutTabs__wideTabListContent {
|
|
142
203
|
display: flex;
|
|
143
204
|
flex-direction: column;
|
|
144
205
|
align-items: flex-start;
|
|
145
206
|
gap: var(--base-size-12);
|
|
207
|
+
margin-block-start: var(--base-size-12);
|
|
146
208
|
}
|
|
147
209
|
|
|
148
210
|
.RiverBreakoutTabs__wideTabListAction {
|
|
@@ -152,7 +214,7 @@
|
|
|
152
214
|
}
|
|
153
215
|
|
|
154
216
|
.RiverBreakoutTabs__wideTabListActionItem {
|
|
155
|
-
margin-block-start: var(--base-size-
|
|
217
|
+
margin-block-start: var(--base-size-16);
|
|
156
218
|
}
|
|
157
219
|
|
|
158
220
|
.RiverBreakoutTabs__content {
|