Skip to content

Commit 59147e9

Browse files
constintconstint
committed
wip sass
1 parent 7c0d216 commit 59147e9

File tree

106 files changed

+14030
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

106 files changed

+14030
-0
lines changed

‎_sass/_base/_config.scss

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
$white: #FFFFFF;
2+
3+
// Grays
4+
$black: #000000;
5+
$shark: #262A30;
6+
$mako: #464B55;
7+
$mantee: #8F96A2;
8+
$alabaster: #F8F8F8;
9+
$waterloo: #7E8491;
10+
$regent-gray: #929EA9;
11+
$mine-shaft: #333333;
12+
13+
// Tertiary color palette
14+
$shamrock: #3DD1A5;
15+
$lima: #83C21D;
16+
$apple: #64B44D;
17+
$malibu: #8089FF;
18+
$jaffa: #EB8244;
19+
$fire-bush: #E89626;
20+
$buttercup: #F2AE25;
21+
$picton-blue: #42ADF7;
22+
$pickled-bluewood: #2E465B;
23+
$ship-cove: #7C98C4;
24+
$terracotta: #DB7B53;
25+
$boston-blue: #3891B1;
26+
$buddha-gold: #CF8F00;
27+
$ocean-green: #40B97E;
28+
$de-york: #79CA86;
29+
30+
// Nav color palette
31+
$velvet: #585E68;
32+
$fox: #484E58;
33+
$charcoal: #393D46;
34+
$night: #25282F;
35+
$citrus: #D49922;
36+
37+
// Media queries
38+
$xs-up: 'only screen and (min-width: 480px)';
39+
$sm-up: 'only screen and (min-width: 768px)';
40+
$md-up: 'only screen and (min-width: 992px)';
41+
$lg-up: 'only screen and (min-width: 1200px)';
42+
$nav-up:'only screen and (min-width: 1300px)';
43+
$xl-up: 'only screen and (min-width: 1600px)';
44+
45+
$xs-only: 'only screen and (min-width: 320px) and (max-width: 767px)';
46+
$sm-only: 'only screen and (min-width: 768px) and (max-width: 991px)';
47+
$md-only: 'only screen and (min-width: 992px) and (max-width: 1199px)';
48+
$lg-only: 'only screen and (min-width: 1200px) and (max-width: 1599px)';

‎_sass/_base/_general.scss

+272
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
// Config
2+
$font-family-base: 'Source Sans Pro', sans-serif !default;
3+
$font-size-base: 16px !default;
4+
$body-text-color: $mako !default;
5+
$body-line-height: floor(($font-size-base * 1.5)); //24
6+
7+
$link-hover-decoration: none;
8+
9+
// Default
10+
html body {
11+
color: $body-text-color;
12+
font-family: $font-family-base;
13+
font-size: $font-size-base;
14+
font-weight: 400;
15+
line-height: $body-line-height;
16+
-webkit-font-smoothing: antialiased;
17+
-moz-osx-font-smoothing: grayscale;
18+
}
19+
20+
a {
21+
&:hover,
22+
&:focus {
23+
text-decoration: $link-hover-decoration;
24+
}
25+
}
26+
27+
img {
28+
max-width: 100%;
29+
}
30+
31+
table {
32+
font-size: 15px;
33+
34+
@extend .table;
35+
@extend .table-bordered;
36+
37+
> thead {
38+
background-color: $alabaster;
39+
40+
> tr > th {
41+
border-bottom-width: 0 !important;
42+
}
43+
}
44+
}
45+
46+
main {
47+
overflow: hidden;
48+
}
49+
50+
section {
51+
padding-top: 10px;
52+
padding-bottom: 60px;
53+
54+
&.extra-padding {
55+
padding-top: 71px;
56+
padding-bottom: 149px;
57+
}
58+
}
59+
60+
.section-bg-grey {
61+
background-color: $alabaster;
62+
}
63+
64+
.section-bg-blue {
65+
background-color: $pickled-bluewood;
66+
}
67+
68+
.section-bg-mako {
69+
background-color: $mako;
70+
}
71+
72+
.section-bg-white {
73+
background-color: $white;
74+
}
75+
76+
/*.skew-top-grey {
77+
position: relative;
78+
z-index: 1;
79+
width: 100%;
80+
overflow:hidden;
81+
background-color: $white;
82+
83+
&:before {
84+
content: "";
85+
width: 100%;
86+
display: block;
87+
height: 100%;
88+
position: absolute;
89+
top: 10%;
90+
transform: skewY(-4deg);
91+
background-color: $alabaster;
92+
z-index: -1;
93+
}
94+
}*/
95+
96+
.skew-top-grey {
97+
position: relative;
98+
z-index: 1;
99+
width: 100%;
100+
padding: 0 0 150px;
101+
102+
&:before {
103+
content: "";
104+
width: 100%;
105+
display: block;
106+
height: 100%;
107+
position: absolute;
108+
top: -67px;
109+
transform: skewY(-4deg);
110+
background-color: #f8f8f8;
111+
z-index: -1;
112+
}
113+
}
114+
115+
.skew-top-white{
116+
position: relative;
117+
z-index: 1;
118+
width: 100%;
119+
background-color: $white;
120+
padding: 0 0 150px;
121+
122+
&:before {
123+
content: "";
124+
width: 100%;
125+
display: block;
126+
height: 50%;
127+
position: absolute;
128+
top: -67px;
129+
transform: skewY(-4deg);
130+
background-color: $white;
131+
z-index: -1;
132+
}
133+
}
134+
135+
.skew-top-blue {
136+
position: relative;
137+
z-index: 1;
138+
width: 100%;
139+
background-color: $pickled-bluewood;
140+
padding: 0 0 150px;
141+
142+
&:before {
143+
content: "";
144+
width: 100%;
145+
display: block;
146+
height: 50%;
147+
position: absolute;
148+
top: -67px;
149+
transform: skewY(-4deg);
150+
background-color: $pickled-bluewood;
151+
z-index: -1;
152+
}
153+
}
154+
155+
.skew-top-black {
156+
position: relative;
157+
z-index: 1;
158+
width: 100%;
159+
background-color: $shark;
160+
padding: 0;
161+
162+
&:before {
163+
content: "";
164+
width: 100%;
165+
display: block;
166+
height: 50%;
167+
position: absolute;
168+
top: -67px;
169+
transform: skewY(-2deg);
170+
background-color: $shark;
171+
z-index: -1;
172+
}
173+
}
174+
175+
.m-top-30 {
176+
margin-top: 30px;
177+
}
178+
179+
.m-top-40 {
180+
margin-top: 40px;
181+
}
182+
183+
.m-top-50 {
184+
margin-top: 50px !important;
185+
}
186+
187+
.m-bottom-50 {
188+
margin-bottom: 50px;
189+
}
190+
191+
.m-bottom-30 {
192+
margin-bottom: 30px;
193+
}
194+
195+
.eq-height {
196+
@media #{$sm-up} {
197+
display: flex;
198+
}
199+
200+
.flex-item {
201+
display: flex;
202+
flex: 1;
203+
>div {
204+
flex: 1;
205+
}
206+
}
207+
}
208+
209+
.center-flex {
210+
justify-content: center;
211+
}
212+
213+
.flex-wrap {
214+
flex-wrap: wrap;
215+
}
216+
.abs-hv-center {
217+
position: absolute;
218+
top: 50%;
219+
left: 50%;
220+
transform: translate(-50%,-50%);
221+
}
222+
223+
.sparky-happy {
224+
background: url(../images/shared/sparky-happy.svg) no-repeat;
225+
background-size: contain;
226+
display: none;
227+
position: absolute;
228+
top: -140px;
229+
left: 0;
230+
width: 162px;
231+
height: 197px;
232+
233+
@media #{$sm-up} {
234+
display: inline-block;
235+
}
236+
}
237+
238+
.orbit-bg {
239+
background-image: url(../images/shared/sections/orbites.png);
240+
background-repeat: no-repeat;
241+
background-position: center;
242+
background-size: 70%;
243+
}
244+
245+
.content-wrapper {
246+
width: 100%;
247+
position: relative;
248+
}
249+
250+
.flex-inline {
251+
display: flex;
252+
flex-direction: column;
253+
@media #{$sm-up} {
254+
flex-direction: row;
255+
align-items: flex-start;
256+
}
257+
}
258+
259+
iframe {
260+
border: none;
261+
display: block;
262+
}
263+
264+
#map {
265+
margin: 0 0 20px;
266+
@media #{$xs-up} {
267+
margin: 0 0 10px;
268+
}
269+
@media #{$sm-up} {
270+
margin: 0;
271+
}
272+
}

‎_sass/_base/_mixins.scss

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@mixin m-card {
2+
border-radius: 8px;
3+
display: flex;
4+
flex-direction: column;
5+
box-shadow: 0 16px 24px 0 rgba(0,0,0,0.15);
6+
background-color: #fff;
7+
margin: 0 0 20px;
8+
9+
&.m-card--square {
10+
border-radius: 0;
11+
12+
@media #{$sm-up} {
13+
margin: 0 0 20px;
14+
}
15+
}
16+
17+
&.card__flat {
18+
border-radius: 0;
19+
box-shadow: none;
20+
padding: 30px;
21+
22+
.card__body {
23+
padding: 0;
24+
25+
ul {
26+
@media #{$lg-up} {
27+
padding-right: 60px;
28+
}
29+
}
30+
}
31+
}
32+
33+
&.card__grey {
34+
background-color: $alabaster;
35+
}
36+
37+
@media #{$sm-up} {
38+
margin: 10px;
39+
}
40+
}
41+
42+
@mixin card__figure {
43+
margin: 0;
44+
min-height: 112px;
45+
padding: 0;
46+
position: relative;
47+
overflow: hidden;
48+
49+
> img {
50+
vertical-align: top;
51+
max-width: 100%;
52+
}
53+
}
54+
55+
@mixin card__body {
56+
background-color: $alabaster;
57+
padding: 30px;
58+
flex: 1 0 auto;
59+
60+
&.card__body_white {
61+
background-color: $white;
62+
}
63+
64+
cite {
65+
display: block;
66+
}
67+
}

0 commit comments

Comments
 (0)