forked from Azim-Ahmed/Automation-workflow
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.scss
113 lines (99 loc) · 3.5 KB
/
index.scss
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/* prettier-ignore */
:root {
/* 1. The Contactlab Marketing Cloud color palette */
--color-accent: #1890ff;
--color-accent100: #e6f7ff;
--color-accent200: #bae7ff;
--color-accent300: #91d5ff;
--color-accent400: #69c0ff;
--color-accent500: #40a9ff;
--color-accent600: #1890ff;
--color-accent700: #096dd9;
--color-accent800: #0050b3;
--color-accent900: #003a8c;
--color-base: #141414;
--color-base100: #fafafa;
--color-base200: #f5f5f5;
--color-base300: #f0f0f0;
--color-base400: #d9d9d9;
--color-base500: #bfbfbf;
--color-base600: #8c8c8c;
--color-base700: #595959;
--color-base800: #434343;
--color-base900: #141414;
--color-info: #1890ff;
--color-success: #52c41a;
--color-warning: #faad14;
--color-error: #f5222d;
--color-white: #fff;
--color-black: #000;
--color-fluo-base300: #e9e8ff;
--color-fluo-base600: #b4afff;
--color-fluo-base900: #7168ff;
--color-fluo-accent300: #e1f9ef;
--color-fluo-accent600: #9bebd0;
--color-fluo-accent900: #00c9bd;
/* 2. The Contactlab Marketing Cloud elevations */
--elevation-z1: 0 1px 3px 0 rgba(0, 20, 32, 0.12);
--elevation-z2: 0 3px 6px 0 rgba(0, 20, 32, 0.04),
0 3px 6px 0 rgba(0, 20, 32, 0.12);
--elevation-z3: 0 6px 6px 0 rgba(0, 20, 32, 0.09),
0 10px 20px 0 rgba(0, 20, 32, 0.13);
--elevation-z4: 0 10px 10px 0 rgba(0, 20, 32, 0.05),
0 14px 28px 0 rgba(0, 20, 32, 0.16);
--elevation-z5: 0 19px 38px 0 rgba(0, 20, 32, 0.16),
0 15px 12px 0 rgba(0, 20, 32, 0.12);
--elevation-accent-z1: 0 1px 3px 0 rgba(3, 145, 236, 0.12);
--elevation-accent-z2: 0 3px 6px 0 rgba(3, 145, 236, 0.04),
0 3px 6px 0 rgba(3, 145, 236, 0.12);
--elevation-accent-z3: 0 6px 6px 0 rgba(3, 145, 236, 0.09),
0 10px 20px 0 rgba(3, 145, 236, 0.13);
--elevation-accent-z4: 0 10px 10px 0 rgba(3, 145, 236, 0.05),
0 14px 28px 0 rgba(3, 145, 236, 0.16);
--elevation-accent-z5: 0 19px 38px 0 rgba(3, 145, 236, 0.16),
0 15px 12px 0 rgba(3, 145, 236, 0.12);
/* 3. The Contactlab Marketing Cloud transitions */
--elevation-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* 4. Document styles */
--mc-body-foreground: var(--color-base);
--mc-body-background: var(--color-base100);
--mc-scroll-padding: 100px;
--mc-scroll-behavior: smooth;
/* 5. a11y */
--mc-selection-foreground: var(--color-white);
--mc-selection-background: rgba(24, 144, 255, 0.8);
/* 6. Headings */
--mc-heading-foreground: var(--color-base);
--mc-subheading-foreground: var(--color-base800);
/* 7. Links */
--mc-link-foreground: var(--color-accent);
--mc-link-active-foreground: var(--color-accent500);
/* 8. <code> */
--mc-code-border-radius: 2px;
--mc-code-background: var(--color-base300);
/* 9. <hr> */
--mc-hr-background: var(--color-base300);
/* 10. <mark> */
--mc-mark-foreground: var(--color-white);
--mc-mark-background: var(--color-accent);
/* 11. <small> */
--mc-small-foreground: var(--color-base600);
}
.App {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}