blob: e1eed58e9c4d32901d3959b4faed0fdf255b6d33 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
@use 'sass:math';
.pocket-logged-in-cta {
$max-button-width: 130px;
$min-button-height: 18px;
font-size: 13px;
margin-inline-end: 20px;
display: flex;
align-items: flex-start;
.pocket-cta-button {
white-space: nowrap;
background: var(--newtab-primary-action-background);
letter-spacing: -0.34px;
color: $white;
border-radius: 4px;
cursor: pointer;
max-width: $max-button-width;
// The button height is 2px taller than the rest of the cta text.
// So I move it up by 1px to align with the rest of the cta text.
margin-top: -1px;
min-height: $min-button-height;
padding: 0 8px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 11px;
margin-inline-end: 10px;
}
.cta-text {
font-weight: normal;
font-size: 13px;
line-height: math.div(16, 13); // (16 / 13) -> 16px computed
}
.pocket-cta-button,
.cta-text {
vertical-align: top;
}
}
|
