@primer/brand-css 0.67.0-rc.f47a3983 → 0.67.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 +280 -42
- package/components/ExpandableArrow/ExpandableArrow.css +5 -2
- package/components/EyebrowText/EyebrowText.css +4 -0
- package/components/Icon/Icon.css +1 -1
- package/components/Link/Link.css +1 -0
- package/components/LogoSuite/LogoSuite.css +1 -1
- package/components/PricingOptions/PricingOptions.css +320 -52
- package/components/Testimonial/Testimonial.css +5 -5
- package/components/Token/Token.css +125 -0
- package/components/river/RiverBreakoutTabs/RiverBreakoutTabs.css +265 -0
- package/components/river/river-shared.css +40 -1
- package/package.json +1 -1
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
.PricingOptions {
|
|
6
6
|
--brand-pricing-options-item-gap: var(--brand-PricingOptions-items-gap);
|
|
7
7
|
--brand-pricing-options-container-padding-inline: 0;
|
|
8
|
+
--brand-pricing-options-column-count: 1;
|
|
8
9
|
|
|
9
10
|
/* prettier-ignore */
|
|
10
11
|
--brand-pricing-options-template-areas:
|
|
12
|
+
'labels'
|
|
11
13
|
'leadingComponent'
|
|
12
14
|
'header'
|
|
13
15
|
'description'
|
|
@@ -32,11 +34,154 @@
|
|
|
32
34
|
@media (min-width: 63.25rem) {
|
|
33
35
|
.PricingOptions {
|
|
34
36
|
grid-template-areas: var(--brand-pricing-options-template-areas);
|
|
35
|
-
grid-template-columns: repeat(
|
|
37
|
+
grid-template-columns: repeat(var(--brand-pricing-options-column-count), minmax(0, 1fr));
|
|
36
38
|
-moz-column-gap: var(--brand-pricing-options-item-gap, 0);
|
|
37
39
|
column-gap: var(--brand-pricing-options-item-gap, 0);
|
|
38
40
|
row-gap: 0;
|
|
39
41
|
}
|
|
42
|
+
|
|
43
|
+
.PricingOptions--items1 {
|
|
44
|
+
--brand-pricing-options-column-count: 1;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.PricingOptions--items2 {
|
|
48
|
+
--brand-pricing-options-column-count: 2;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.PricingOptions--items3 {
|
|
52
|
+
--brand-pricing-options-column-count: 3;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.PricingOptions--items4 {
|
|
56
|
+
--brand-pricing-options-column-count: 4;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.PricingOptions__labels {
|
|
61
|
+
display: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@media (min-width: 63.25rem) {
|
|
65
|
+
.PricingOptions__labels {
|
|
66
|
+
--brand-pricing-options-column-count: 1;
|
|
67
|
+
|
|
68
|
+
display: grid;
|
|
69
|
+
grid-column: 1 / -1;
|
|
70
|
+
grid-row: labels;
|
|
71
|
+
grid-template-columns: repeat(var(--brand-pricing-options-column-count), minmax(0, 1fr));
|
|
72
|
+
-moz-column-gap: var(--brand-pricing-options-item-gap, 0);
|
|
73
|
+
column-gap: var(--brand-pricing-options-item-gap, 0);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.PricingOptions__label-cell {
|
|
77
|
+
position: relative;
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
min-height: var(--base-size-54);
|
|
81
|
+
padding-block: var(--base-size-16);
|
|
82
|
+
background-color: var(--brand-PricingOptions-item-bgColor-solid);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Accent top border — uses ::after so it can overflow into the column gap */
|
|
86
|
+
.PricingOptions__label-cell--has-label::after {
|
|
87
|
+
content: '';
|
|
88
|
+
position: absolute;
|
|
89
|
+
inset-block-start: 0;
|
|
90
|
+
inset-inline-start: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);
|
|
91
|
+
inset-inline-end: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);
|
|
92
|
+
height: var(--brand-borderWidth-thin);
|
|
93
|
+
background-color: var(--brand-color-text-emphasized);
|
|
94
|
+
z-index: 1;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* First cell: don't overflow past container start (cards override below) */
|
|
98
|
+
.PricingOptions__label-cell--has-label:first-child::after {
|
|
99
|
+
inset-inline-start: 0;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Last cell: don't overflow past container end (cards override below) */
|
|
103
|
+
.PricingOptions__label-cell--has-label:last-child::after {
|
|
104
|
+
inset-inline-end: 0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.PricingOptions--layout-default .PricingOptions__label-cell--has-label::after {
|
|
108
|
+
inset-inline-start: 0;
|
|
109
|
+
inset-inline-end: 0;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* ---- Default layout labels ---- */
|
|
113
|
+
|
|
114
|
+
/* Continuous bottom border across entire labels row — uses ::after to extend into container padding */
|
|
115
|
+
.PricingOptions--layout-default .PricingOptions__labels {
|
|
116
|
+
position: relative;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.PricingOptions--layout-default .PricingOptions__labels::after {
|
|
120
|
+
content: '';
|
|
121
|
+
position: absolute;
|
|
122
|
+
inset-block-end: 0;
|
|
123
|
+
inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
|
|
124
|
+
inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
|
|
125
|
+
height: var(--brand-borderWidth-thin);
|
|
126
|
+
background-color: var(--brand-color-border-subtle);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.PricingOptions--layout-default .PricingOptions__label-cell {
|
|
130
|
+
margin-inline: calc(var(--brand-pricing-options-item-gap) / 2 * -1);
|
|
131
|
+
padding-inline: calc(var(--brand-pricing-options-item-gap) / 2);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.PricingOptions--layout-default .PricingOptions__label-cell:first-child {
|
|
135
|
+
margin-inline-start: calc(var(--brand-pricing-options-container-padding-inline) * -1);
|
|
136
|
+
padding-inline-start: var(--brand-pricing-options-container-padding-inline);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.PricingOptions--layout-default .PricingOptions__label-cell:last-child {
|
|
140
|
+
margin-inline-end: calc(var(--brand-pricing-options-container-padding-inline) * -1);
|
|
141
|
+
padding-inline-end: var(--brand-pricing-options-container-padding-inline);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Empty cells: transparent bg/borders but structurally visible so dividers show */
|
|
145
|
+
.PricingOptions--layout-default .PricingOptions__label-cell--empty {
|
|
146
|
+
background-color: transparent;
|
|
147
|
+
border-block-start-color: transparent;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* Vertical dividers between label cells, centered in the gap */
|
|
151
|
+
.PricingOptions--layout-default .PricingOptions__label-cell + .PricingOptions__label-cell::before {
|
|
152
|
+
content: '';
|
|
153
|
+
position: absolute;
|
|
154
|
+
inset-block: 0;
|
|
155
|
+
width: var(--brand-borderWidth-thin);
|
|
156
|
+
inset-inline-start: 0;
|
|
157
|
+
background-color: var(--brand-color-border-subtle);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.PricingOptions--layout-default.PricingOptions--appearance-gradient
|
|
161
|
+
.PricingOptions__label-cell
|
|
162
|
+
+ .PricingOptions__label-cell::before {
|
|
163
|
+
-webkit-mask-image: var(--brand-PricingOptions-borderMask);
|
|
164
|
+
mask-image: var(--brand-PricingOptions-borderMask);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* ---- Cards layout labels ---- */
|
|
168
|
+
|
|
169
|
+
.PricingOptions--layout-cards .PricingOptions__label-cell {
|
|
170
|
+
padding-inline: var(--base-size-28);
|
|
171
|
+
border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);
|
|
172
|
+
/* border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted); */
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.PricingOptions--layout-cards .PricingOptions__label-cell--empty {
|
|
176
|
+
opacity: 0;
|
|
177
|
+
pointer-events: none;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Cards: keep accent border inside the card boundary */
|
|
181
|
+
.PricingOptions--layout-cards .PricingOptions__label-cell--has-label::after {
|
|
182
|
+
inset-inline-start: 0;
|
|
183
|
+
inset-inline-end: 0;
|
|
184
|
+
}
|
|
40
185
|
}
|
|
41
186
|
|
|
42
187
|
/* ---------------------------------------------------------- */
|
|
@@ -45,11 +190,10 @@
|
|
|
45
190
|
|
|
46
191
|
.PricingOptions--layout-default {
|
|
47
192
|
position: relative;
|
|
48
|
-
border-radius: var(--brand-borderRadius-xlarge);
|
|
49
193
|
}
|
|
50
194
|
|
|
51
195
|
.PricingOptions--layout-default.PricingOptions--appearance-solid {
|
|
52
|
-
border: solid 1px var(--brand-color-border-
|
|
196
|
+
border: solid 1px var(--brand-color-border-subtle);
|
|
53
197
|
background-color: var(--brand-PricingOptions-item-bgColor-solid);
|
|
54
198
|
}
|
|
55
199
|
|
|
@@ -71,7 +215,7 @@
|
|
|
71
215
|
border-radius: inherit;
|
|
72
216
|
-webkit-mask-image: var(--brand-PricingOptions-borderMask);
|
|
73
217
|
mask-image: var(--brand-PricingOptions-borderMask);
|
|
74
|
-
border: var(--brand-borderWidth-thin) solid var(--brand-color-border-
|
|
218
|
+
border: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);
|
|
75
219
|
}
|
|
76
220
|
|
|
77
221
|
@media (min-width: 63.25rem) {
|
|
@@ -81,6 +225,8 @@
|
|
|
81
225
|
}
|
|
82
226
|
|
|
83
227
|
.PricingOptions--layout-default .PricingOptions__item {
|
|
228
|
+
--brand-pricing-options-item-padding-inline: var(--base-size-24);
|
|
229
|
+
|
|
84
230
|
position: relative; /* Used for positioning the divider between items */
|
|
85
231
|
padding-inline: var(--base-size-24);
|
|
86
232
|
padding-block: var(--base-size-20);
|
|
@@ -88,23 +234,25 @@
|
|
|
88
234
|
|
|
89
235
|
@media (min-width: 63.25rem) {
|
|
90
236
|
.PricingOptions--layout-default .PricingOptions__item {
|
|
237
|
+
--brand-pricing-options-item-padding-inline: 0;
|
|
238
|
+
|
|
91
239
|
padding-inline: 0;
|
|
92
240
|
padding-block: var(--base-size-40);
|
|
93
241
|
}
|
|
94
242
|
}
|
|
95
243
|
|
|
96
244
|
/* Horizontal divider between items on small viewports */
|
|
97
|
-
.PricingOptions--layout-default .PricingOptions__item
|
|
245
|
+
.PricingOptions--layout-default .PricingOptions__item + .PricingOptions__item::before {
|
|
98
246
|
content: '';
|
|
99
247
|
position: absolute;
|
|
100
248
|
inset-inline: 0;
|
|
101
249
|
height: 1px;
|
|
102
|
-
background-color: var(--brand-color-border-
|
|
250
|
+
background-color: var(--brand-color-border-subtle);
|
|
103
251
|
}
|
|
104
252
|
|
|
105
253
|
/* Vertical divider between items on larger viewports */
|
|
106
254
|
@media (min-width: 63.25rem) {
|
|
107
|
-
.PricingOptions--layout-default .PricingOptions__item
|
|
255
|
+
.PricingOptions--layout-default .PricingOptions__item + .PricingOptions__item::before {
|
|
108
256
|
inset-inline: 0;
|
|
109
257
|
inset-block: 0;
|
|
110
258
|
width: 1px;
|
|
@@ -113,7 +261,9 @@
|
|
|
113
261
|
margin-inline-start: calc(var(--brand-pricing-options-item-gap) / 2 * -1);
|
|
114
262
|
}
|
|
115
263
|
|
|
116
|
-
.PricingOptions--layout-default.PricingOptions--appearance-gradient
|
|
264
|
+
.PricingOptions--layout-default.PricingOptions--appearance-gradient
|
|
265
|
+
.PricingOptions__item
|
|
266
|
+
+ .PricingOptions__item::before {
|
|
117
267
|
-webkit-mask-image: var(--brand-PricingOptions-borderMask);
|
|
118
268
|
mask-image: var(--brand-PricingOptions-borderMask);
|
|
119
269
|
}
|
|
@@ -124,15 +274,16 @@
|
|
|
124
274
|
/* ---------------------------------------------------------- */
|
|
125
275
|
|
|
126
276
|
.PricingOptions--layout-cards .PricingOptions__item {
|
|
277
|
+
--brand-pricing-options-item-padding-inline: var(--base-size-32);
|
|
278
|
+
|
|
127
279
|
position: relative;
|
|
128
280
|
padding-inline: var(--base-size-32);
|
|
129
|
-
border-radius: var(--brand-borderRadius-xlarge);
|
|
130
281
|
padding-block: var(--base-size-32);
|
|
131
282
|
}
|
|
132
283
|
|
|
133
284
|
.PricingOptions--layout-cards.PricingOptions--appearance-solid .PricingOptions__item {
|
|
134
285
|
background-color: var(--brand-PricingOptions-item-bgColor-solid);
|
|
135
|
-
border: solid var(--brand-borderWidth-thin) var(--brand-color-border-
|
|
286
|
+
border: solid var(--brand-borderWidth-thin) var(--brand-color-border-subtle);
|
|
136
287
|
}
|
|
137
288
|
|
|
138
289
|
/* ---------------------------------------------------------- */
|
|
@@ -200,10 +351,6 @@
|
|
|
200
351
|
justify-content: center;
|
|
201
352
|
}
|
|
202
353
|
|
|
203
|
-
.PricingOptions__item--align-center .PricingOptions__label {
|
|
204
|
-
justify-self: center;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
354
|
/*
|
|
208
355
|
* Backwards compatibility for browsers that don't support subgrid.
|
|
209
356
|
* Once subgrid is supported in the last 3 major versions of Safari (i.e., when Safari 18 is released), it can be fully removed.
|
|
@@ -229,23 +376,12 @@
|
|
|
229
376
|
row-gap: var(--base-size-16);
|
|
230
377
|
}
|
|
231
378
|
|
|
232
|
-
/* When item is left-aligned,
|
|
379
|
+
/* When item is left-aligned, keep the heading at the start of the card */
|
|
233
380
|
.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__header {
|
|
234
|
-
flex-wrap: wrap-reverse;
|
|
235
381
|
align-items: center;
|
|
236
|
-
-moz-column-gap: var(--base-size-16);
|
|
237
|
-
column-gap: var(--base-size-16);
|
|
238
382
|
margin-block-end: var(--base-size-16);
|
|
239
383
|
}
|
|
240
384
|
|
|
241
|
-
.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__label {
|
|
242
|
-
--brand-Label-color: var(--brand-color-accent-primary);
|
|
243
|
-
--brand-Label-color-start: var(--brand-color-accent-primary-start);
|
|
244
|
-
--brand-Label-color-end: var(--brand-color-accent-primary-end);
|
|
245
|
-
flex: 0 0 auto;
|
|
246
|
-
order: 2;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
385
|
.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__heading {
|
|
250
386
|
margin-block: var(--base-size-16);
|
|
251
387
|
flex: 0 1 auto;
|
|
@@ -259,25 +395,15 @@
|
|
|
259
395
|
}
|
|
260
396
|
}
|
|
261
397
|
|
|
262
|
-
/* When item is centered,
|
|
398
|
+
/* When item is centered, center the heading */
|
|
263
399
|
.PricingOptions__item--align-center .PricingOptions__header {
|
|
264
|
-
|
|
265
|
-
align-items: center;
|
|
266
|
-
justify-content: flex-end;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
.PricingOptions__item--align-center .PricingOptions__label {
|
|
270
|
-
--brand-Label-color: var(--brand-color-accent-primary);
|
|
271
|
-
--brand-Label-color-start: var(--brand-color-accent-primary-start);
|
|
272
|
-
--brand-Label-color-end: var(--brand-color-accent-primary-end);
|
|
273
|
-
order: 1;
|
|
274
|
-
margin: 0 auto;
|
|
400
|
+
justify-content: center;
|
|
275
401
|
}
|
|
276
402
|
|
|
277
403
|
.PricingOptions__item--align-center .PricingOptions__heading {
|
|
278
404
|
margin-block-start: 0;
|
|
279
405
|
margin-block-end: var(--base-size-16);
|
|
280
|
-
|
|
406
|
+
text-align: center;
|
|
281
407
|
}
|
|
282
408
|
|
|
283
409
|
.PricingOptions__leading-component {
|
|
@@ -285,16 +411,13 @@
|
|
|
285
411
|
}
|
|
286
412
|
|
|
287
413
|
.PricingOptions__label {
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
flex: 0 0 auto;
|
|
297
|
-
order: 2;
|
|
414
|
+
color: var(--brand-color-text-default);
|
|
415
|
+
font-family: var(--brand-fontStack-monospace);
|
|
416
|
+
font-size: var(--brand-text-size-100);
|
|
417
|
+
font-weight: var(--brand-text-weight-500);
|
|
418
|
+
letter-spacing: var(--brand-text-letterSpacing-100);
|
|
419
|
+
line-height: var(--brand-text-lineHeight-200);
|
|
420
|
+
text-transform: uppercase;
|
|
298
421
|
}
|
|
299
422
|
|
|
300
423
|
.PricingOptions__heading {
|
|
@@ -311,7 +434,7 @@
|
|
|
311
434
|
.PricingOptions__price {
|
|
312
435
|
display: flex;
|
|
313
436
|
flex-wrap: wrap;
|
|
314
|
-
align-
|
|
437
|
+
align-items: flex-start;
|
|
315
438
|
grid-row: price;
|
|
316
439
|
padding-block-start: var(--base-size-20);
|
|
317
440
|
padding-block-end: var(--base-size-8);
|
|
@@ -324,8 +447,14 @@
|
|
|
324
447
|
}
|
|
325
448
|
}
|
|
326
449
|
|
|
450
|
+
.PricingOptions__price-amount {
|
|
451
|
+
display: flex;
|
|
452
|
+
align-items: flex-end;
|
|
453
|
+
}
|
|
454
|
+
|
|
327
455
|
.PricingOptions__price-currency-code {
|
|
328
456
|
margin-inline-start: var(--base-size-4);
|
|
457
|
+
margin-block-end: var(--base-size-4);
|
|
329
458
|
color: var(--brand-color-text-muted);
|
|
330
459
|
}
|
|
331
460
|
|
|
@@ -354,6 +483,61 @@
|
|
|
354
483
|
padding-block-start: var(--base-size-20);
|
|
355
484
|
}
|
|
356
485
|
|
|
486
|
+
.PricingOptions__actions-message {
|
|
487
|
+
display: flex;
|
|
488
|
+
gap: var(--base-size-12);
|
|
489
|
+
align-items: flex-start;
|
|
490
|
+
inline-size: 100%;
|
|
491
|
+
max-inline-size: 100%;
|
|
492
|
+
padding: var(--base-size-12);
|
|
493
|
+
border-block: var(--brand-borderWidth-thin) solid var(--brand-PricingOptions-actionsMessage-borderColor);
|
|
494
|
+
border-inline: 0;
|
|
495
|
+
border-radius: 0;
|
|
496
|
+
background-color: var(--brand-PricingOptions-actionsMessage-bgColor);
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.PricingOptions__actions-message-leading-component {
|
|
500
|
+
flex: 0 0 auto;
|
|
501
|
+
display: flex;
|
|
502
|
+
margin-block-start: var(--base-size-4);
|
|
503
|
+
color: var(--brand-PricingOptions-actionsMessage-accentColor);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
.PricingOptions__actions-message-leading-component :where(svg) {
|
|
507
|
+
display: block;
|
|
508
|
+
inline-size: var(--base-size-16);
|
|
509
|
+
block-size: var(--base-size-16);
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.PricingOptions__actions-message-content {
|
|
513
|
+
flex: 1 1 auto;
|
|
514
|
+
min-inline-size: 0;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.PricingOptions__actions-message-content :where(p) {
|
|
518
|
+
margin: 0;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
/* MenuAction: full-width ActionMenu wrapper */
|
|
522
|
+
.PricingOptions__menu-action {
|
|
523
|
+
width: 100%;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.PricingOptions__menu-action > * {
|
|
527
|
+
width: 100%;
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
/* Force ActionMenu button container to stretch full width */
|
|
531
|
+
.PricingOptions__menu-action > * > * {
|
|
532
|
+
display: flex;
|
|
533
|
+
width: 100%;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
/* Make the primary button fill remaining space next to the chevron */
|
|
537
|
+
.PricingOptions__menu-action > * > * > :first-child {
|
|
538
|
+
flex: 1;
|
|
539
|
+
}
|
|
540
|
+
|
|
357
541
|
.PricingOptions__footnote {
|
|
358
542
|
grid-row: footnote;
|
|
359
543
|
display: block;
|
|
@@ -378,13 +562,52 @@
|
|
|
378
562
|
}
|
|
379
563
|
|
|
380
564
|
.PricingOptions__feature-list--has-divider {
|
|
381
|
-
|
|
565
|
+
position: relative;
|
|
382
566
|
margin: 0;
|
|
383
567
|
margin-block-start: var(--base-size-20);
|
|
384
568
|
padding-block-start: var(--base-size-40);
|
|
385
569
|
padding-inline: 0;
|
|
386
570
|
}
|
|
387
571
|
|
|
572
|
+
/* Edge-to-edge divider above feature list */
|
|
573
|
+
.PricingOptions__feature-list--has-divider::before {
|
|
574
|
+
content: '';
|
|
575
|
+
position: absolute;
|
|
576
|
+
inset-block-start: 0;
|
|
577
|
+
inset-inline-start: calc(var(--brand-pricing-options-item-padding-inline, 0px) * -1);
|
|
578
|
+
inset-inline-end: calc(var(--brand-pricing-options-item-padding-inline, 0px) * -1);
|
|
579
|
+
height: var(--brand-borderWidth-thin);
|
|
580
|
+
background-color: var(--brand-color-border-subtle);
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
/* Default layout: extend feature list divider into column gap */
|
|
584
|
+
@media (min-width: 63.25rem) {
|
|
585
|
+
.PricingOptions--layout-default .PricingOptions__feature-list--has-divider::before {
|
|
586
|
+
inset-inline-start: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);
|
|
587
|
+
inset-inline-end: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
/* First item: don't overflow past container start */
|
|
591
|
+
.PricingOptions--layout-default .PricingOptions__item:first-child .PricingOptions__feature-list--has-divider::before,
|
|
592
|
+
.PricingOptions--layout-default
|
|
593
|
+
.PricingOptions__labels
|
|
594
|
+
+ .PricingOptions__item
|
|
595
|
+
.PricingOptions__feature-list--has-divider::before {
|
|
596
|
+
inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
/* Last item: don't overflow past container end */
|
|
600
|
+
.PricingOptions--layout-default .PricingOptions__item:last-child .PricingOptions__feature-list--has-divider::before {
|
|
601
|
+
inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
.PricingOptions--layout-default.PricingOptions--appearance-gradient
|
|
605
|
+
.PricingOptions__feature-list--has-divider::before {
|
|
606
|
+
-webkit-mask-image: var(--brand-PricingOptions-borderMask);
|
|
607
|
+
mask-image: var(--brand-PricingOptions-borderMask);
|
|
608
|
+
}
|
|
609
|
+
}
|
|
610
|
+
|
|
388
611
|
.PricingOptions__feature-list-set:nth-child(n + 2) {
|
|
389
612
|
margin-block-start: var(--base-size-20);
|
|
390
613
|
}
|
|
@@ -399,6 +622,44 @@
|
|
|
399
622
|
color: var(--brand-color-text-muted);
|
|
400
623
|
}
|
|
401
624
|
|
|
625
|
+
/* Info tooltip button */
|
|
626
|
+
.PricingOptions__feature-list-item--has-info {
|
|
627
|
+
flex-wrap: nowrap;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.PricingOptions__feature-list-item--has-info > span {
|
|
631
|
+
flex: 1;
|
|
632
|
+
display: inline-flex;
|
|
633
|
+
align-items: baseline;
|
|
634
|
+
justify-content: space-between;
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
.PricingOptions__feature-list-item-info {
|
|
638
|
+
all: unset;
|
|
639
|
+
display: inline-flex;
|
|
640
|
+
align-items: center;
|
|
641
|
+
justify-content: center;
|
|
642
|
+
flex-shrink: 0;
|
|
643
|
+
cursor: pointer;
|
|
644
|
+
color: var(--brand-color-text-muted);
|
|
645
|
+
background-color: color-mix(in srgb, var(--brand-color-canvas-invert) 12%, transparent);
|
|
646
|
+
border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
|
|
647
|
+
border-radius: 50%;
|
|
648
|
+
margin-inline-start: var(--base-size-8);
|
|
649
|
+
vertical-align: middle;
|
|
650
|
+
padding: var(--base-size-4);
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.PricingOptions__feature-list-item-info svg {
|
|
654
|
+
width: var(--base-size-12);
|
|
655
|
+
height: var(--base-size-12);
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
.PricingOptions__feature-list-item-info:focus-visible {
|
|
659
|
+
outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
|
|
660
|
+
outline-offset: 2px;
|
|
661
|
+
}
|
|
662
|
+
|
|
402
663
|
.PricingOptions__feature-list + .PricingOptions__feature-list-group-heading {
|
|
403
664
|
margin-block-start: var(--base-size-20);
|
|
404
665
|
}
|
|
@@ -437,6 +698,7 @@
|
|
|
437
698
|
.PricingOptions__feature-list-accordion-heading {
|
|
438
699
|
padding: var(--base-size-8) 0;
|
|
439
700
|
padding-inline-start: 0 !important; /* Fixes dotcom specificity issue */
|
|
701
|
+
padding-inline-end: 0 !important;
|
|
440
702
|
margin-block-start: calc(var(--base-size-16) * -1);
|
|
441
703
|
margin-block-end: var(--base-size-8);
|
|
442
704
|
}
|
|
@@ -447,8 +709,10 @@
|
|
|
447
709
|
line-height: var(--feature-list-line-height);
|
|
448
710
|
font-weight: var(--brand-text-subhead-weight-large);
|
|
449
711
|
gap: var(--base-size-8);
|
|
450
|
-
display: inline-flex;
|
|
451
712
|
align-items: center;
|
|
713
|
+
justify-content: space-between;
|
|
714
|
+
display: flex;
|
|
715
|
+
width: 100%;
|
|
452
716
|
}
|
|
453
717
|
|
|
454
718
|
/* Hide default icon */
|
|
@@ -463,6 +727,10 @@
|
|
|
463
727
|
padding-inline-start: 0 !important;
|
|
464
728
|
}
|
|
465
729
|
|
|
730
|
+
.PricingOptions__feature-list-accordion-chevron {
|
|
731
|
+
margin-inline-end: var(--base-size-4);
|
|
732
|
+
}
|
|
733
|
+
|
|
466
734
|
/* Chevron up icon */
|
|
467
735
|
.PricingOptions__feature-list-accordion[open] .PricingOptions__feature-list-accordion-chevron {
|
|
468
736
|
transform: rotate(180deg);
|
|
@@ -151,10 +151,7 @@
|
|
|
151
151
|
|
|
152
152
|
.Testimonial-from {
|
|
153
153
|
font-weight: var(--base-text-weight-normal);
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
.Testimonial-position {
|
|
157
|
-
font-family: var(--brand-fontStack-monospace);
|
|
154
|
+
text-transform: uppercase;
|
|
158
155
|
}
|
|
159
156
|
|
|
160
157
|
/* Expressive variant */
|
|
@@ -168,7 +165,7 @@
|
|
|
168
165
|
.Testimonial--variant-expressive {
|
|
169
166
|
flex-direction: row;
|
|
170
167
|
align-items: flex-end;
|
|
171
|
-
gap: var(--base-size-
|
|
168
|
+
gap: var(--base-size-96);
|
|
172
169
|
}
|
|
173
170
|
}
|
|
174
171
|
|
|
@@ -193,6 +190,7 @@
|
|
|
193
190
|
border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
|
|
194
191
|
padding-block-start: var(--base-size-24);
|
|
195
192
|
width: 100%;
|
|
193
|
+
gap: var(--base-size-8);
|
|
196
194
|
}
|
|
197
195
|
|
|
198
196
|
@media screen and (min-width: 48rem) {
|
|
@@ -236,6 +234,8 @@
|
|
|
236
234
|
|
|
237
235
|
.Testimonial--variant-expressive .Testimonial-quote {
|
|
238
236
|
font-family: var(--brand-fontStack-monospace);
|
|
237
|
+
line-height: var(--brand-text-lineHeight-400);
|
|
238
|
+
font-weight: var(--base-text-weight-normal);
|
|
239
239
|
}
|
|
240
240
|
|
|
241
241
|
.Testimonial-link {
|