@primer/brand-css 0.73.0 → 0.74.0-rc.6f254662
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.
|
@@ -281,41 +281,21 @@
|
|
|
281
281
|
|
|
282
282
|
.CTABanner-heading code,
|
|
283
283
|
.CTABanner-description code {
|
|
284
|
-
font-size: inherit;
|
|
285
284
|
font-family: var(--brand-fontStack-monospace);
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
padding: 0 var(--base-size-4) 0;
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
.CTABanner-heading.CTABanner-heading:has(code) {
|
|
304
|
-
line-height: calc(1lh * 2);
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
@media screen and (min-width: 63.25rem) {
|
|
308
|
-
.CTABanner--variant-balanced .CTABanner-heading.CTABanner-heading:has(code) {
|
|
309
|
-
line-height: calc(1lh * 2.8);
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
.CTABanner--variant-minimal .CTABanner-heading.CTABanner-heading:has(code) {
|
|
314
|
-
line-height: calc(1lh * 1.9);
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
.CTABanner-description.CTABanner-description:has(code) {
|
|
318
|
-
line-height: calc(1lh * 1.25);
|
|
285
|
+
/* optical resize relative to parent. monospace tends to be a little taller than sans-serif */
|
|
286
|
+
font-size: calc(1em - 1px);
|
|
287
|
+
font-weight: var(--base-text-weight-regular);
|
|
288
|
+
/* Keep the background clear of adjacent lines when large text wraps. */
|
|
289
|
+
line-height: 1.6;
|
|
290
|
+
color: var(--brand-InlineCode-color-fg-default);
|
|
291
|
+
background-color: var(--brand-InlineCode-bgColor);
|
|
292
|
+
padding-block: 0;
|
|
293
|
+
padding-inline: var(--base-size-4);
|
|
294
|
+
border-radius: var(--base-size-2);
|
|
295
|
+
white-space: normal;
|
|
296
|
+
overflow-wrap: anywhere;
|
|
297
|
+
-webkit-box-decoration-break: clone;
|
|
298
|
+
box-decoration-break: clone;
|
|
319
299
|
}
|
|
320
300
|
|
|
321
301
|
.CTABanner-buttonGroup {
|
package/components/Card/Card.css
CHANGED
|
@@ -192,25 +192,21 @@
|
|
|
192
192
|
|
|
193
193
|
.Card__link code,
|
|
194
194
|
.Card__description code {
|
|
195
|
-
font-size: inherit;
|
|
196
195
|
font-family: var(--brand-fontStack-monospace);
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
.Card__description.Card__description:has(code) {
|
|
213
|
-
line-height: calc(1lh * 1.25);
|
|
196
|
+
/* optical resize relative to parent. monospace tends to be a little taller than sans-serif */
|
|
197
|
+
font-size: calc(1em - 1px);
|
|
198
|
+
font-weight: var(--base-text-weight-regular);
|
|
199
|
+
/* Keep the background clear of adjacent lines when large text wraps. */
|
|
200
|
+
line-height: 1.6;
|
|
201
|
+
color: var(--brand-InlineCode-color-fg-default);
|
|
202
|
+
background-color: var(--brand-InlineCode-bgColor);
|
|
203
|
+
padding-block: 0;
|
|
204
|
+
padding-inline: var(--base-size-4);
|
|
205
|
+
border-radius: var(--base-size-2);
|
|
206
|
+
white-space: normal;
|
|
207
|
+
overflow-wrap: anywhere;
|
|
208
|
+
-webkit-box-decoration-break: clone;
|
|
209
|
+
box-decoration-break: clone;
|
|
214
210
|
}
|
|
215
211
|
|
|
216
212
|
.Card--disableAnimation:hover .Card__link {
|
|
@@ -455,40 +451,6 @@
|
|
|
455
451
|
cursor: inherit;
|
|
456
452
|
}
|
|
457
453
|
|
|
458
|
-
.Card--skew:focus-within {
|
|
459
|
-
outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
|
|
460
|
-
}
|
|
461
|
-
|
|
462
|
-
.Card--skew:hover .Card__torch {
|
|
463
|
-
opacity: 0.85;
|
|
464
|
-
}
|
|
465
|
-
|
|
466
|
-
.Card__skew-bounding {
|
|
467
|
-
border-radius: var(--brand-borderRadius-medium);
|
|
468
|
-
position: relative;
|
|
469
|
-
overflow: hidden;
|
|
470
|
-
z-index: 1;
|
|
471
|
-
height: 100%;
|
|
472
|
-
background-color: var(--brand-Card-background-default);
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
.Card__torch {
|
|
476
|
-
width: 650px;
|
|
477
|
-
height: 650px;
|
|
478
|
-
background-color: var(--brand-color-accent-primary);
|
|
479
|
-
filter: blur(180px);
|
|
480
|
-
border-radius: 300px;
|
|
481
|
-
opacity: 0;
|
|
482
|
-
transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
483
|
-
mix-blend-mode: soft-light;
|
|
484
|
-
will-change: transform;
|
|
485
|
-
pointer-events: none;
|
|
486
|
-
position: absolute;
|
|
487
|
-
bottom: 0;
|
|
488
|
-
right: 0;
|
|
489
|
-
z-index: -1;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
454
|
.Card--expandableArrow {
|
|
493
455
|
margin-inline-start: var(--base-size-4);
|
|
494
456
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.InlineCode {
|
|
2
|
+
font-family: var(--brand-fontStack-monospace);
|
|
3
|
+
/* optical resize relative to parent. monospace tends to be a little taller than sans-serif */
|
|
4
|
+
font-size: calc(1em - 1px);
|
|
5
|
+
font-weight: var(--base-text-weight-regular);
|
|
6
|
+
/* Keep the background clear of adjacent lines when large text wraps. */
|
|
7
|
+
line-height: 1.6;
|
|
8
|
+
color: var(--brand-InlineCode-color-fg-default);
|
|
9
|
+
background-color: var(--brand-InlineCode-bgColor);
|
|
10
|
+
padding-block: 0;
|
|
11
|
+
padding-inline: var(--base-size-4);
|
|
12
|
+
border-radius: var(--base-size-2);
|
|
13
|
+
-webkit-box-decoration-break: clone;
|
|
14
|
+
box-decoration-break: clone;
|
|
15
|
+
white-space: normal;
|
|
16
|
+
overflow-wrap: anywhere;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.InlineCode.InlineCode--nowrap {
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
overflow-wrap: normal;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:where(h1, h2, h3, h4, h5, h6) .InlineCode {
|
|
25
|
+
border-radius: var(--base-size-4);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
:where(h1, h2, h3, h4, h5, h6) .InlineCode__text {
|
|
29
|
+
color: var(--brand-InlineCode-color-fg-heading);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.InlineCode__text {
|
|
33
|
+
position: relative;
|
|
34
|
+
/* TODO: this is some optical correction, but doesn't work well for uppercase. */
|
|
35
|
+
inset-block-start: -0.03em;
|
|
36
|
+
-webkit-font-smoothing: antialiased;
|
|
37
|
+
-moz-osx-font-smoothing: auto;
|
|
38
|
+
}
|
|
@@ -131,32 +131,21 @@
|
|
|
131
131
|
|
|
132
132
|
.River__heading code,
|
|
133
133
|
.River__text code {
|
|
134
|
-
font-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
line-height: calc(1lh * 1.8);
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
@media screen and (min-width: 64rem) {
|
|
153
|
-
.River__heading-inner:has(code) {
|
|
154
|
-
line-height: calc(1lh * 2.1);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.River__text:has(code) {
|
|
159
|
-
line-height: calc(1lh * 1.1);
|
|
134
|
+
font-family: var(--brand-fontStack-monospace);
|
|
135
|
+
/* optical resize relative to parent. monospace tends to be a little taller than sans-serif */
|
|
136
|
+
font-size: calc(1em - 1px);
|
|
137
|
+
font-weight: var(--base-text-weight-regular);
|
|
138
|
+
/* Keep the background clear of adjacent lines when large text wraps. */
|
|
139
|
+
line-height: 1.6;
|
|
140
|
+
color: var(--brand-InlineCode-color-fg-default);
|
|
141
|
+
background-color: var(--brand-InlineCode-bgColor);
|
|
142
|
+
padding-block: 0;
|
|
143
|
+
padding-inline: var(--base-size-4);
|
|
144
|
+
border-radius: var(--base-size-2);
|
|
145
|
+
white-space: normal;
|
|
146
|
+
overflow-wrap: anywhere;
|
|
147
|
+
-webkit-box-decoration-break: clone;
|
|
148
|
+
box-decoration-break: clone;
|
|
160
149
|
}
|
|
161
150
|
|
|
162
151
|
.River__leadingComponent :is(img, picture),
|