@primer/brand-css 0.66.0 → 0.67.0-rc.6f52e887
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.
|
@@ -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,146 @@
|
|
|
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
|
+
}
|
|
95
|
+
|
|
96
|
+
/* First cell: don't overflow past container start (cards override below) */
|
|
97
|
+
.PricingOptions__label-cell--has-label:first-child::after {
|
|
98
|
+
inset-inline-start: 0;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Last cell: don't overflow past container end (cards override below) */
|
|
102
|
+
.PricingOptions__label-cell--has-label:last-child::after {
|
|
103
|
+
inset-inline-end: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* Default layout: extend accent border into container padding to reach the container edge */
|
|
107
|
+
.PricingOptions--layout-default .PricingOptions__label-cell--has-label:first-child::after {
|
|
108
|
+
inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.PricingOptions--layout-default .PricingOptions__label-cell--has-label:last-child::after {
|
|
112
|
+
inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* ---- Default layout labels ---- */
|
|
116
|
+
|
|
117
|
+
/* Continuous bottom border across entire labels row — uses ::after to extend into container padding */
|
|
118
|
+
.PricingOptions--layout-default .PricingOptions__labels {
|
|
119
|
+
position: relative;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.PricingOptions--layout-default .PricingOptions__labels::after {
|
|
123
|
+
content: '';
|
|
124
|
+
position: absolute;
|
|
125
|
+
inset-block-end: 0;
|
|
126
|
+
inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
|
|
127
|
+
inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
|
|
128
|
+
height: var(--brand-borderWidth-thin);
|
|
129
|
+
background-color: var(--brand-color-border-subtle);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.PricingOptions--layout-default .PricingOptions__label-cell {
|
|
133
|
+
padding-inline: 0;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Empty cells: transparent bg/borders but structurally visible so dividers show */
|
|
137
|
+
.PricingOptions--layout-default .PricingOptions__label-cell--empty {
|
|
138
|
+
background-color: transparent;
|
|
139
|
+
border-block-start-color: transparent;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Vertical dividers between label cells, centered in the gap */
|
|
143
|
+
.PricingOptions--layout-default .PricingOptions__label-cell + .PricingOptions__label-cell::before {
|
|
144
|
+
content: '';
|
|
145
|
+
position: absolute;
|
|
146
|
+
inset-block: 0;
|
|
147
|
+
width: var(--brand-borderWidth-thin);
|
|
148
|
+
inset-inline-start: calc(var(--brand-pricing-options-item-gap) / 2 * -1);
|
|
149
|
+
background-color: var(--brand-color-border-subtle);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.PricingOptions--layout-default.PricingOptions--appearance-gradient
|
|
153
|
+
.PricingOptions__label-cell
|
|
154
|
+
+ .PricingOptions__label-cell::before {
|
|
155
|
+
-webkit-mask-image: var(--brand-PricingOptions-borderMask);
|
|
156
|
+
mask-image: var(--brand-PricingOptions-borderMask);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* ---- Cards layout labels ---- */
|
|
160
|
+
|
|
161
|
+
.PricingOptions--layout-cards .PricingOptions__label-cell {
|
|
162
|
+
padding-inline: var(--base-size-28);
|
|
163
|
+
border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);
|
|
164
|
+
/* border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted); */
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.PricingOptions--layout-cards .PricingOptions__label-cell--empty {
|
|
168
|
+
opacity: 0;
|
|
169
|
+
pointer-events: none;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Cards: keep accent border inside the card boundary */
|
|
173
|
+
.PricingOptions--layout-cards .PricingOptions__label-cell--has-label::after {
|
|
174
|
+
inset-inline-start: 0;
|
|
175
|
+
inset-inline-end: 0;
|
|
176
|
+
}
|
|
40
177
|
}
|
|
41
178
|
|
|
42
179
|
/* ---------------------------------------------------------- */
|
|
@@ -45,11 +182,10 @@
|
|
|
45
182
|
|
|
46
183
|
.PricingOptions--layout-default {
|
|
47
184
|
position: relative;
|
|
48
|
-
border-radius: var(--brand-borderRadius-xlarge);
|
|
49
185
|
}
|
|
50
186
|
|
|
51
187
|
.PricingOptions--layout-default.PricingOptions--appearance-solid {
|
|
52
|
-
border: solid 1px var(--brand-color-border-
|
|
188
|
+
border: solid 1px var(--brand-color-border-subtle);
|
|
53
189
|
background-color: var(--brand-PricingOptions-item-bgColor-solid);
|
|
54
190
|
}
|
|
55
191
|
|
|
@@ -71,7 +207,7 @@
|
|
|
71
207
|
border-radius: inherit;
|
|
72
208
|
-webkit-mask-image: var(--brand-PricingOptions-borderMask);
|
|
73
209
|
mask-image: var(--brand-PricingOptions-borderMask);
|
|
74
|
-
border: var(--brand-borderWidth-thin) solid var(--brand-color-border-
|
|
210
|
+
border: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);
|
|
75
211
|
}
|
|
76
212
|
|
|
77
213
|
@media (min-width: 63.25rem) {
|
|
@@ -81,6 +217,8 @@
|
|
|
81
217
|
}
|
|
82
218
|
|
|
83
219
|
.PricingOptions--layout-default .PricingOptions__item {
|
|
220
|
+
--brand-pricing-options-item-padding-inline: var(--base-size-24);
|
|
221
|
+
|
|
84
222
|
position: relative; /* Used for positioning the divider between items */
|
|
85
223
|
padding-inline: var(--base-size-24);
|
|
86
224
|
padding-block: var(--base-size-20);
|
|
@@ -88,23 +226,25 @@
|
|
|
88
226
|
|
|
89
227
|
@media (min-width: 63.25rem) {
|
|
90
228
|
.PricingOptions--layout-default .PricingOptions__item {
|
|
229
|
+
--brand-pricing-options-item-padding-inline: 0;
|
|
230
|
+
|
|
91
231
|
padding-inline: 0;
|
|
92
232
|
padding-block: var(--base-size-40);
|
|
93
233
|
}
|
|
94
234
|
}
|
|
95
235
|
|
|
96
236
|
/* Horizontal divider between items on small viewports */
|
|
97
|
-
.PricingOptions--layout-default .PricingOptions__item
|
|
237
|
+
.PricingOptions--layout-default .PricingOptions__item + .PricingOptions__item::before {
|
|
98
238
|
content: '';
|
|
99
239
|
position: absolute;
|
|
100
240
|
inset-inline: 0;
|
|
101
241
|
height: 1px;
|
|
102
|
-
background-color: var(--brand-color-border-
|
|
242
|
+
background-color: var(--brand-color-border-subtle);
|
|
103
243
|
}
|
|
104
244
|
|
|
105
245
|
/* Vertical divider between items on larger viewports */
|
|
106
246
|
@media (min-width: 63.25rem) {
|
|
107
|
-
.PricingOptions--layout-default .PricingOptions__item
|
|
247
|
+
.PricingOptions--layout-default .PricingOptions__item + .PricingOptions__item::before {
|
|
108
248
|
inset-inline: 0;
|
|
109
249
|
inset-block: 0;
|
|
110
250
|
width: 1px;
|
|
@@ -113,7 +253,9 @@
|
|
|
113
253
|
margin-inline-start: calc(var(--brand-pricing-options-item-gap) / 2 * -1);
|
|
114
254
|
}
|
|
115
255
|
|
|
116
|
-
.PricingOptions--layout-default.PricingOptions--appearance-gradient
|
|
256
|
+
.PricingOptions--layout-default.PricingOptions--appearance-gradient
|
|
257
|
+
.PricingOptions__item
|
|
258
|
+
+ .PricingOptions__item::before {
|
|
117
259
|
-webkit-mask-image: var(--brand-PricingOptions-borderMask);
|
|
118
260
|
mask-image: var(--brand-PricingOptions-borderMask);
|
|
119
261
|
}
|
|
@@ -124,15 +266,16 @@
|
|
|
124
266
|
/* ---------------------------------------------------------- */
|
|
125
267
|
|
|
126
268
|
.PricingOptions--layout-cards .PricingOptions__item {
|
|
269
|
+
--brand-pricing-options-item-padding-inline: var(--base-size-32);
|
|
270
|
+
|
|
127
271
|
position: relative;
|
|
128
272
|
padding-inline: var(--base-size-32);
|
|
129
|
-
border-radius: var(--brand-borderRadius-xlarge);
|
|
130
273
|
padding-block: var(--base-size-32);
|
|
131
274
|
}
|
|
132
275
|
|
|
133
276
|
.PricingOptions--layout-cards.PricingOptions--appearance-solid .PricingOptions__item {
|
|
134
277
|
background-color: var(--brand-PricingOptions-item-bgColor-solid);
|
|
135
|
-
border: solid var(--brand-borderWidth-thin) var(--brand-color-border-
|
|
278
|
+
border: solid var(--brand-borderWidth-thin) var(--brand-color-border-subtle);
|
|
136
279
|
}
|
|
137
280
|
|
|
138
281
|
/* ---------------------------------------------------------- */
|
|
@@ -200,10 +343,6 @@
|
|
|
200
343
|
justify-content: center;
|
|
201
344
|
}
|
|
202
345
|
|
|
203
|
-
.PricingOptions__item--align-center .PricingOptions__label {
|
|
204
|
-
justify-self: center;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
346
|
/*
|
|
208
347
|
* Backwards compatibility for browsers that don't support subgrid.
|
|
209
348
|
* 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 +368,12 @@
|
|
|
229
368
|
row-gap: var(--base-size-16);
|
|
230
369
|
}
|
|
231
370
|
|
|
232
|
-
/* When item is left-aligned,
|
|
371
|
+
/* When item is left-aligned, keep the heading at the start of the card */
|
|
233
372
|
.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__header {
|
|
234
|
-
flex-wrap: wrap-reverse;
|
|
235
373
|
align-items: center;
|
|
236
|
-
-moz-column-gap: var(--base-size-16);
|
|
237
|
-
column-gap: var(--base-size-16);
|
|
238
374
|
margin-block-end: var(--base-size-16);
|
|
239
375
|
}
|
|
240
376
|
|
|
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
377
|
.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__heading {
|
|
250
378
|
margin-block: var(--base-size-16);
|
|
251
379
|
flex: 0 1 auto;
|
|
@@ -259,25 +387,15 @@
|
|
|
259
387
|
}
|
|
260
388
|
}
|
|
261
389
|
|
|
262
|
-
/* When item is centered,
|
|
390
|
+
/* When item is centered, center the heading */
|
|
263
391
|
.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;
|
|
392
|
+
justify-content: center;
|
|
275
393
|
}
|
|
276
394
|
|
|
277
395
|
.PricingOptions__item--align-center .PricingOptions__heading {
|
|
278
396
|
margin-block-start: 0;
|
|
279
397
|
margin-block-end: var(--base-size-16);
|
|
280
|
-
|
|
398
|
+
text-align: center;
|
|
281
399
|
}
|
|
282
400
|
|
|
283
401
|
.PricingOptions__leading-component {
|
|
@@ -285,16 +403,13 @@
|
|
|
285
403
|
}
|
|
286
404
|
|
|
287
405
|
.PricingOptions__label {
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
flex: 0 0 auto;
|
|
297
|
-
order: 2;
|
|
406
|
+
color: var(--brand-color-text-default);
|
|
407
|
+
font-family: var(--brand-fontStack-monospace);
|
|
408
|
+
font-size: var(--brand-text-size-100);
|
|
409
|
+
font-weight: var(--brand-text-weight-500);
|
|
410
|
+
letter-spacing: var(--brand-text-letterSpacing-100);
|
|
411
|
+
line-height: var(--brand-text-lineHeight-200);
|
|
412
|
+
text-transform: uppercase;
|
|
298
413
|
}
|
|
299
414
|
|
|
300
415
|
.PricingOptions__heading {
|
|
@@ -311,7 +426,7 @@
|
|
|
311
426
|
.PricingOptions__price {
|
|
312
427
|
display: flex;
|
|
313
428
|
flex-wrap: wrap;
|
|
314
|
-
align-
|
|
429
|
+
align-items: flex-start;
|
|
315
430
|
grid-row: price;
|
|
316
431
|
padding-block-start: var(--base-size-20);
|
|
317
432
|
padding-block-end: var(--base-size-8);
|
|
@@ -324,8 +439,14 @@
|
|
|
324
439
|
}
|
|
325
440
|
}
|
|
326
441
|
|
|
442
|
+
.PricingOptions__price-amount {
|
|
443
|
+
display: flex;
|
|
444
|
+
align-items: flex-end;
|
|
445
|
+
}
|
|
446
|
+
|
|
327
447
|
.PricingOptions__price-currency-code {
|
|
328
448
|
margin-inline-start: var(--base-size-4);
|
|
449
|
+
margin-block-end: var(--base-size-4);
|
|
329
450
|
color: var(--brand-color-text-muted);
|
|
330
451
|
}
|
|
331
452
|
|
|
@@ -354,6 +475,26 @@
|
|
|
354
475
|
padding-block-start: var(--base-size-20);
|
|
355
476
|
}
|
|
356
477
|
|
|
478
|
+
/* MenuAction: full-width ActionMenu wrapper */
|
|
479
|
+
.PricingOptions__menu-action {
|
|
480
|
+
width: 100%;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.PricingOptions__menu-action > * {
|
|
484
|
+
width: 100%;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
/* Force ActionMenu button container to stretch full width */
|
|
488
|
+
.PricingOptions__menu-action > * > * {
|
|
489
|
+
display: flex;
|
|
490
|
+
width: 100%;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
/* Make the primary button fill remaining space next to the chevron */
|
|
494
|
+
.PricingOptions__menu-action > * > * > :first-child {
|
|
495
|
+
flex: 1;
|
|
496
|
+
}
|
|
497
|
+
|
|
357
498
|
.PricingOptions__footnote {
|
|
358
499
|
grid-row: footnote;
|
|
359
500
|
display: block;
|
|
@@ -378,13 +519,52 @@
|
|
|
378
519
|
}
|
|
379
520
|
|
|
380
521
|
.PricingOptions__feature-list--has-divider {
|
|
381
|
-
|
|
522
|
+
position: relative;
|
|
382
523
|
margin: 0;
|
|
383
524
|
margin-block-start: var(--base-size-20);
|
|
384
525
|
padding-block-start: var(--base-size-40);
|
|
385
526
|
padding-inline: 0;
|
|
386
527
|
}
|
|
387
528
|
|
|
529
|
+
/* Edge-to-edge divider above feature list */
|
|
530
|
+
.PricingOptions__feature-list--has-divider::before {
|
|
531
|
+
content: '';
|
|
532
|
+
position: absolute;
|
|
533
|
+
inset-block-start: 0;
|
|
534
|
+
inset-inline-start: calc(var(--brand-pricing-options-item-padding-inline, 0px) * -1);
|
|
535
|
+
inset-inline-end: calc(var(--brand-pricing-options-item-padding-inline, 0px) * -1);
|
|
536
|
+
height: var(--brand-borderWidth-thin);
|
|
537
|
+
background-color: var(--brand-color-border-subtle);
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
/* Default layout: extend feature list divider into column gap */
|
|
541
|
+
@media (min-width: 63.25rem) {
|
|
542
|
+
.PricingOptions--layout-default .PricingOptions__feature-list--has-divider::before {
|
|
543
|
+
inset-inline-start: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);
|
|
544
|
+
inset-inline-end: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
/* First item: don't overflow past container start */
|
|
548
|
+
.PricingOptions--layout-default .PricingOptions__item:first-child .PricingOptions__feature-list--has-divider::before,
|
|
549
|
+
.PricingOptions--layout-default
|
|
550
|
+
.PricingOptions__labels
|
|
551
|
+
+ .PricingOptions__item
|
|
552
|
+
.PricingOptions__feature-list--has-divider::before {
|
|
553
|
+
inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
/* Last item: don't overflow past container end */
|
|
557
|
+
.PricingOptions--layout-default .PricingOptions__item:last-child .PricingOptions__feature-list--has-divider::before {
|
|
558
|
+
inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
.PricingOptions--layout-default.PricingOptions--appearance-gradient
|
|
562
|
+
.PricingOptions__feature-list--has-divider::before {
|
|
563
|
+
-webkit-mask-image: var(--brand-PricingOptions-borderMask);
|
|
564
|
+
mask-image: var(--brand-PricingOptions-borderMask);
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
|
|
388
568
|
.PricingOptions__feature-list-set:nth-child(n + 2) {
|
|
389
569
|
margin-block-start: var(--base-size-20);
|
|
390
570
|
}
|
|
@@ -399,6 +579,44 @@
|
|
|
399
579
|
color: var(--brand-color-text-muted);
|
|
400
580
|
}
|
|
401
581
|
|
|
582
|
+
/* Info tooltip button */
|
|
583
|
+
.PricingOptions__feature-list-item--has-info {
|
|
584
|
+
flex-wrap: nowrap;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.PricingOptions__feature-list-item--has-info > span {
|
|
588
|
+
flex: 1;
|
|
589
|
+
display: inline-flex;
|
|
590
|
+
align-items: baseline;
|
|
591
|
+
justify-content: space-between;
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
.PricingOptions__feature-list-item-info {
|
|
595
|
+
all: unset;
|
|
596
|
+
display: inline-flex;
|
|
597
|
+
align-items: center;
|
|
598
|
+
justify-content: center;
|
|
599
|
+
flex-shrink: 0;
|
|
600
|
+
cursor: pointer;
|
|
601
|
+
color: var(--brand-color-text-muted);
|
|
602
|
+
background-color: color-mix(in srgb, var(--brand-color-canvas-invert) 12%, transparent);
|
|
603
|
+
border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
|
|
604
|
+
border-radius: 50%;
|
|
605
|
+
margin-inline-start: var(--base-size-8);
|
|
606
|
+
vertical-align: middle;
|
|
607
|
+
padding: var(--base-size-4);
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.PricingOptions__feature-list-item-info svg {
|
|
611
|
+
width: var(--base-size-12);
|
|
612
|
+
height: var(--base-size-12);
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.PricingOptions__feature-list-item-info:focus-visible {
|
|
616
|
+
outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
|
|
617
|
+
outline-offset: 2px;
|
|
618
|
+
}
|
|
619
|
+
|
|
402
620
|
.PricingOptions__feature-list + .PricingOptions__feature-list-group-heading {
|
|
403
621
|
margin-block-start: var(--base-size-20);
|
|
404
622
|
}
|
|
@@ -437,6 +655,7 @@
|
|
|
437
655
|
.PricingOptions__feature-list-accordion-heading {
|
|
438
656
|
padding: var(--base-size-8) 0;
|
|
439
657
|
padding-inline-start: 0 !important; /* Fixes dotcom specificity issue */
|
|
658
|
+
padding-inline-end: 0 !important;
|
|
440
659
|
margin-block-start: calc(var(--base-size-16) * -1);
|
|
441
660
|
margin-block-end: var(--base-size-8);
|
|
442
661
|
}
|
|
@@ -447,8 +666,10 @@
|
|
|
447
666
|
line-height: var(--feature-list-line-height);
|
|
448
667
|
font-weight: var(--brand-text-subhead-weight-large);
|
|
449
668
|
gap: var(--base-size-8);
|
|
450
|
-
display: inline-flex;
|
|
451
669
|
align-items: center;
|
|
670
|
+
justify-content: space-between;
|
|
671
|
+
display: flex;
|
|
672
|
+
width: 100%;
|
|
452
673
|
}
|
|
453
674
|
|
|
454
675
|
/* Hide default icon */
|
|
@@ -463,6 +684,10 @@
|
|
|
463
684
|
padding-inline-start: 0 !important;
|
|
464
685
|
}
|
|
465
686
|
|
|
687
|
+
.PricingOptions__feature-list-accordion-chevron {
|
|
688
|
+
margin-inline-end: var(--base-size-4);
|
|
689
|
+
}
|
|
690
|
+
|
|
466
691
|
/* Chevron up icon */
|
|
467
692
|
.PricingOptions__feature-list-accordion[open] .PricingOptions__feature-list-accordion-chevron {
|
|
468
693
|
transform: rotate(180deg);
|
|
@@ -635,7 +635,16 @@
|
|
|
635
635
|
|
|
636
636
|
@media screen and (min-width: 63.25rem) {
|
|
637
637
|
.RiverBreakout--variant-gridline .River__visual--has-background {
|
|
638
|
+
align-items: flex-end;
|
|
638
639
|
padding: var(--base-size-64);
|
|
640
|
+
padding-block-end: 0;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
.RiverBreakout--variant-gridline .River__visual--has-background img,
|
|
644
|
+
.RiverBreakout--variant-gridline .River__visual--has-background picture,
|
|
645
|
+
.RiverBreakout--variant-gridline .River__visual--has-background video {
|
|
646
|
+
border-end-start-radius: 0;
|
|
647
|
+
border-end-end-radius: 0;
|
|
639
648
|
}
|
|
640
649
|
|
|
641
650
|
.RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {
|