-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathbase.css
123 lines (102 loc) · 2.58 KB
/
base.css
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
114
115
116
117
118
119
120
121
122
@charset "UTF-8";
/* VARIABLES -------------------------------------------------------------- */
:root {
--heading-font: 'Open Sans', sans-serif;
--main-font: 'Open Sans', sans-serif;
--minor-font: 'Open Sans', sans-serif;
--heading-color: rgba(0,0,50,.9);
--main-color: rgba(70,70,90,.9);
--minor-color: rgb(190,190,200);
--emphasis-color: rgb(27,211,165);
}
/* DEFAULTS --------------------------------------------------------------- */
html {
color: var(--main-color);
font-family: var(--main-font);
font-size: 16px;
font-weight: 400;
}
/* TYPOGRAPHY ------------------------------------------------------------- */
.primary-heading {
color: var(--heading-color);
font-family: var(--heading-font);
font-size: 2rem;
font-weight: 400;
}
/* LINKS & BUTTONS -------------------------------------------------------- */
/* LAYOUT ----------------------------------------------------------------- */
/* ring spinner ----------------------------------------------------------- */
.ring {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: var(--emphasis-color);
border-radius: 50%;
width: 25px;
height: 25px;
animation: ring-spin 1.2s linear infinite;
}
@keyframes ring-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* triple spinner ---------------------------------------------------------- */
.triple-spinner {
display: block;
position: relative;
width: 75px;
height: 75px;
border-radius: 50%;
border: 3px solid transparent;
border-top: 3px solid #FF5722;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.triple-spinner::before,
.triple-spinner::after {
content: "";
position: absolute;
border-radius: 50%;
border: 3px solid transparent;
}
.triple-spinner::before {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-top-color: #FF9800;
-webkit-animation: spin 3s linear infinite;
animation: spin 3.5s linear infinite;
}
.triple-spinner::after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #FFC107;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.75s linear infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}