๐Ÿง‘๐ŸŽจ
Default styles
Some components have pre-defined css styling. Here is a list of some of the most relevant.
Note: This page only applies to the Old Rendering Engine - for the New Rendering Engine ask a Savvy Expert for help

Styles that apply to:

โ€‹
  • Entire flow:
1
box-sizing: border-box;
2
--primary-color: #6454F3;
3
--fail-color: red;
4
--spacing-xs: calc(var(--spacing) / 4);
5
--spacing-sm: calc(var(--spacing) / 2);
6
--spacing: 1rem;
7
--spacing-lg: calc(var(--spacing) * 2);
8
--spacing-xl: calc(var(--spacing) * 4);
9
--border-radius: 4px;
10
--border-radius-lg: calc(var(--border-radius) * 2);
11
--border-radius-xl: calc(var(--border-radius) * 4);
12
--input-width: 300px;
13
text-align: left;
14
position: relative;
15
font-family: 'Lato', sans-serif;
16
font-size: 16px;
17
font-weight: 300;
18
line-height: 1.5;
19
color: #555;
Copied!
โ€‹
  • Custom buttons:
1
border: 1px solid #ddd;
2
padding: 8px 30px;
3
border-radius: var(--border-radius);
4
background: white;
5
color: inherit;
6
transition: background-color 0.3s, color 0.3s;
7
cursor: pointer;
8
img {
9
max-width: 100%;
10
max-height: 50px;
11
}
12
.icon {
13
font-size: 40px;
14
color: #999;
15
}
16
&:hover {
17
background: #FAFAFA;
18
}
19
&:focus {
20
outline: none;
21
}
22
&.disabled {
23
cursor: default;
24
background: #eee;
25
pointer-events: none;
26
color: #aaa;
27
}
28
&.selected {
29
border-color: var(--primary-color);
30
.icon {
31
color: var(--primary-color);
32
}
33
}
Copied!
โ€‹
  • Option selectors:
1
.button_tiles,
2
&.buttons_wrapped {
3
.buttons {
4
margin-left: calc(-1 * var(--spacing-sm));
5
margin-right: calc(-1 * var(--spacing-sm));
6
.ButtonCard {
7
margin-left: var(--spacing-sm);
8
margin-right: var(--spacing-sm);
9
margin-bottom: var(--spacing);
10
}
11
}
12
}
13
&.button_tiles {
14
.ButtonCard {
15
padding: 30px 15px;
16
width: 140px;
17
min-width: 80px;
18
max-width: 160px;
19
min-height: 150px;
20
border-radius: var(--border-radius-lg);
21
}
22
}
23
&.horizontal_bars {
24
max-width: 420px;
25
width: 100%;
26
}
27
&.horizontal_bars,
28
&.buttons_wrapped { //ask
29
.ButtonCard {
30
flex-direction: row-reverse;
31
> div {
32
flex: 1;
33
}
34
.button-icon {
35
margin: 0;
36
font-size: 24px;
37
flex: 0 0 auto;
38
}
39
img {
40
max-height: 28px;
41
}
42
}
43
}
44
.ButtonCard {
45
padding: 8px 32px;
46
flex: 0 0 auto;
47
text-align: center;
48
box-sizing: border-box;
49
border: 1px solid #ddd;
50
border-radius: var(--border-radius);
51
cursor: pointer;
52
line-height: 1.3;
53
transition: transform 0.1s, border-color 0.5s, background-color 0.2s;
54
img {
55
max-width: 100%;
56
max-height: 50px;
57
}
58
&:hover {
59
background: #F9F9F9;
60
}
61
&.selected {
62
border-color: var(--primary-color);
63
.icon {
64
color: var(--primary-color);
65
}
66
}
67
.button-icon {
68
font-size: 3.2rem;
69
color: #999;
70
}
71
.description {
72
font-size: 0.85em;
73
opacity: 0.8;
74
}
75
> div.Checkbox {
76
flex: 0 0 auto;
77
padding: 0 1rem;
78
}
79
}
Copied!
  • Meeting booker:
1
position: relative;
2
width: 1060px;
3
max-width: 100%;
4
min-height: 680px;
5
overflow: hidden;
6
@media (max-width: 600px) {
7
width: calc(100vw - 80px);
8
}
9
.calendly-container {
10
position: absolute;
11
z-index: 1;
12
top: -20px;
13
bottom: 0;
14
left: -10px;
15
right: -10px;
16
}
Copied!
  • Stripe checkout:
1
text-align: center;
2
font-weight: 500;
3
font-size: 16px;
4
max-width: 460px;
5
width: 100%;
6
form#payment-form {
7
.stripe-box {
8
background: white;
9
box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.125), 0 8px 16px -8px rgba(0, 0, 0, 0.1),
10
0 -6px 16px -6px rgba(0, 0, 0, 0.025);
11
border-radius: 6px;
12
}
13
> button {
14
padding: 10px 20px;
15
background: var(--primary-color);
16
color: white;
17
border-radius: 6px;
18
border: none;
19
cursor: pointer;
20
transition: padding 0.3s;
21
&:hover:not([disabled]) {
22
opacity: 0.8;
23
padding: 10px 30px;
24
}
25
.Icon {
26
font-size: 0.8em;
27
margin: 0 0 0 0.375em;
28
}
29
}
30
.payment-messages {
31
padding: 15px;
32
.Icon {
33
margin: 0 0.25em -0.1em 0;
34
}
35
}
36
}
Copied!
  • Media embed:
1
position: relative;
2
width: 100%;
3
.video-play-button {
4
position: absolute;
5
top: 0;
6
bottom: 0;
7
left: 0;
8
right: 0;
9
margin: auto;
10
z-index: 10;
11
background-color: white;
12
border-radius: 100px;
13
width: 60px;
14
height: 60px;
15
font-size: 22px;
16
opacity: 0.5;
17
transition: opacity 0.3s;
18
&:hover {
19
opacity: 0.8;
20
}
21
.icon {
22
margin-right: -0.125em;
23
}
24
โ€‹
Copied!
  • Header, title and subtitle:
1
.heading-label,
2
.title,
3
.subtitle {
4
margin: var(--spacing) 0 var(--spacing-sm);
5
}
6
.title {
7
font-size: 2.4rem;
8
font-weight: 600;
9
}
10
.subtitle {
11
font-size: 1.4rem;
12
}
Copied!
  • Footer:
1
.footer {
2
position: relative;
3
z-index: 1;
4
> div {
5
font-size: 1.2em;
6
button,
7
a.button {
8
position: relative;
9
z-index: 4;
10
border: 1px solid #ddd;
11
padding: 5px 30px;
12
border-radius: var(--border-radius);
13
background: white;
14
color: inherit;
15
cursor: pointer;
16
&:hover {
17
background: #FAFAFA;
18
}
19
&:focus {
20
outline: none;
21
}
22
&[disabled] {
23
background: #ddd;
24
color: #aaa;
25
cursor: default;
26
}
27
&.hide {
28
opacity: 0;
29
pointer-events: none;
30
}
31
&.prev .icon {
32
margin-right: 4px;
33
}
34
&.next .icon {
35
margin-left: 4px;
36
}
37
}
38
}
39
}
Copied!
  • Input box:
1
input,
2
textarea {
3
padding: 8px 16px;
4
border: 1px solid #ddd;
5
width: 100%;
6
&::placeholder {
7
color: #aaa;
8
}
9
}
Copied!
โ€‹
  • Dropdown selectors:
1
.vs__dropdown-toggle {
2
padding-left: 10px;
3
padding-right: 10px;
4
background: white;
5
border-color: #ddd;
6
.vs__selected-options {
7
padding-top: 3px;
8
padding-bottom: 3px;
9
input.vs__search {
10
margin-top: 5px;
11
margin-left: 2px;
12
margin-bottom: 3px;
13
&::placeholder {
14
color: #aaa;
15
}
16
}
17
}
18
}
19
.vs__dropdown-menu {
20
.vs__no-options {
21
padding-left: 1em;
22
padding-right: 1em;
23
text-align: left;
24
}
25
li {
26
padding-top: 6px;
27
padding-bottom: 6px;
28
&:hover,
29
&.vs__dropdown-option--highlight {
30
background: #eee;
31
}
32
}
33
}
34
โ€‹
Copied!
  • Animations:
1
button.animate,
2
a.animate,
3
.button-animate {
4
transition: transform 0.1s, border-color 0.2s, background-color 0.2s;
5
&:hover {
6
transform: scale(1.02);
7
}
8
&:active {
9
transform: scale(0.98);
10
}
11
&.justClicked {
12
animation: selection_pulse 0.2s 1 ease-out;
13
}
14
}
Copied!
  • Icons & logo:
1
svg.Icon {
2
&.inline-icon {
3
margin-top: -0.15em;
4
margin-bottom: -0.15em;
5
margin-left: 0.1em;
6
margin-right: 0.1em;
7
}
8
}
9
div.logo,
10
a.logo {
11
flex: 0 0 50%;
12
margin: 10px 0 20px;
13
display: flex;
14
flex-direction: row;
15
align-items: center;
16
justify-content: space-between;
17
img {
18
max-width: 200px;
19
max-height: 35px;
20
}
21
}
Copied!
โ€‹
โ€‹
Copy link