Skip to content

Commit 6ae4075

Browse files
ja0nja0n
committed
Bring in styles
1 parent 0aaed4c commit 6ae4075

File tree

4 files changed

+418
-0
lines changed

4 files changed

+418
-0
lines changed

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import ReactDOM from 'react-dom';
44
import Store from './Store';
55
import Schedule from './components/Schedule';
6+
import './scss/index.scss';
67

78
class ScheduleManager {
89
constructor() {

‎src/scss/_schedule.scss‎

Lines changed: 369 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,369 @@
1+
.category-filter {
2+
display: flex;
3+
align-items: center;
4+
flex-wrap: wrap;
5+
6+
.schedule_category {
7+
background: none;
8+
padding: 0;
9+
font-size: 12px;
10+
margin-right: 10px;
11+
}
12+
}
13+
14+
.advanced-filters {
15+
h2 {
16+
font-size: 14px;
17+
text-transform: uppercase;
18+
}
19+
20+
h3 {
21+
font-family: nunito;
22+
font-size: 12px;
23+
display: block;
24+
}
25+
}
26+
27+
.empty-message {
28+
width: 100%;
29+
margin-top: 20px;
30+
text-align: center;
31+
color: white;
32+
font-size: 1.2em;
33+
}
34+
35+
.Popover {
36+
z-index: 9999;
37+
width: 30vw;
38+
min-width: 400px;
39+
padding-right: 10px;
40+
@media(max-width: 768px) {
41+
width: 90vw;
42+
min-width: auto;
43+
}
44+
45+
.Popover-body {
46+
border-radius: 2px;
47+
background-color: white;
48+
padding: 20px;
49+
}
50+
51+
.Popover-tip {
52+
fill: white;
53+
}
54+
}
55+
56+
.schedule_category {
57+
background: $light-blue;
58+
font-family: nunito;
59+
font-size: 10px;
60+
color: $dark-blue;
61+
padding: 2px 5px 1px 5px;
62+
border-radius: 2px;
63+
margin-left: 5px;
64+
white-space: nowrap;
65+
66+
&.pessoas {
67+
background: #8b9ffc;
68+
}
69+
70+
&.data-science {
71+
background: #ce9bc4;
72+
}
73+
74+
&.web {
75+
background: #f5bc8b;
76+
}
77+
78+
&.devops {
79+
background: #3a8bbb;
80+
}
81+
}
82+
83+
.schedule-page {
84+
padding: 24px 0;
85+
background-color: $dark-blue;
86+
87+
.loading {
88+
color: white;
89+
text-align: center;
90+
}
91+
92+
&__content {
93+
padding: 0 70px;
94+
}
95+
96+
.day-separator {
97+
margin: 60px 0;
98+
font-size: 30px;
99+
100+
span {
101+
font-weight: 200;
102+
}
103+
}
104+
105+
.schedule_subtitle {
106+
font-family: nunito;
107+
font-size: 14px;
108+
text-align: center;
109+
color: white;
110+
background: rgba(white, 0.1);
111+
padding: 20px;
112+
}
113+
114+
.schedule-page__title {
115+
display: inline-block;
116+
color: $color-yellow;
117+
text-transform: uppercase;
118+
font-size: 22px;
119+
margin-bottom: 40px;
120+
padding-bottom: 5px;
121+
border-bottom: 4px solid $color-yellow;
122+
}
123+
124+
.accordion-tabs {
125+
display: flex;
126+
flex-direction: row;
127+
justify-content: center;
128+
129+
.tab-header-and-content {
130+
list-style: none;
131+
width: 20%;
132+
display: inline-flex;
133+
text-align: center;
134+
align-items: center;
135+
justify-content: center;
136+
}
137+
138+
a {
139+
color: $color-yellow;
140+
text-transform: uppercase;
141+
text-align: center;
142+
padding-bottom: 5px;
143+
line-height: normal;
144+
}
145+
146+
a:hover {
147+
color: $background-light;
148+
text-decoration: none;
149+
}
150+
}
151+
152+
.tab-link {
153+
color: $color-yellow;
154+
text-transform: uppercase;
155+
text-align: center;
156+
padding-bottom: 5px;
157+
}
158+
159+
.filters {
160+
background-color: inherit;
161+
color: white;
162+
background-color: $dark-blue;
163+
z-index: 999;
164+
display: flex;
165+
flex-wrap: nowrap;
166+
padding: 16px 0;
167+
168+
.filter-box {
169+
width: 360px;
170+
display: flex;
171+
align-items: flex-start;
172+
173+
.filters-search {
174+
width: 100%;
175+
position: relative;
176+
margin: 0;
177+
178+
input {
179+
width: 100%;
180+
color: white;
181+
background-color: transparent;
182+
border: none;
183+
border-bottom: 1px solid white;
184+
padding: 0 30px 10px 0;
185+
outline: none;
186+
187+
&::-webkit-input-placeholder {
188+
color: white;
189+
}
190+
191+
&:focus {
192+
border-color: $light-blue;
193+
194+
&::-webkit-input-placeholder {
195+
color: rgba(white, 0.5);
196+
}
197+
}
198+
}
199+
200+
.material-icons {
201+
position: absolute;
202+
right: 0;
203+
top: 0;
204+
}
205+
}
206+
207+
button {
208+
display: flex;
209+
color: white;
210+
line-height: normal;
211+
background-color: transparent;
212+
padding-left: 5px;
213+
border: none;
214+
padding-right: 5px;
215+
outline: none;
216+
}
217+
}
218+
219+
.accordion-tabs {
220+
width: 100%;
221+
}
222+
}
223+
224+
.schedule_category_type a {
225+
font-size: 22px;
226+
&.active {
227+
border-bottom: 5px solid $color-yellow;
228+
}
229+
}
230+
231+
.schedule_category_days {
232+
text-align: center;
233+
}
234+
235+
.schedule_category_days a {
236+
font-size: 22px;
237+
color: white;
238+
display: inline-block;
239+
border-bottom: 2px solid transparent;
240+
241+
&.active {
242+
color: $color-yellow;
243+
border-bottom: 2px solid $color-yellow;
244+
}
245+
}
246+
247+
.schedule_article {
248+
display: flex;
249+
flex-direction: row;
250+
}
251+
252+
// .schedule_article:last-child .picture-container:after
253+
.schedule_article:last-child .picture-container:before {
254+
display: none;
255+
}
256+
257+
.schedule_picture {
258+
height: 60px;
259+
width: 60px;
260+
overflow: hidden;
261+
border-radius: 50%;
262+
263+
img {
264+
position: relative;
265+
z-index: 9;
266+
}
267+
}
268+
269+
.picture-container {
270+
position: relative;
271+
width: 60px;
272+
273+
&:before {
274+
content: '';
275+
width: 1px;
276+
height: 100%;
277+
background: $light-blue;
278+
display: block;
279+
position: absolute;
280+
left: 30px;
281+
top: 10px;
282+
}
283+
284+
&:after {
285+
content: '';
286+
width: 16px;
287+
height: 16px;
288+
border-radius: 50%;
289+
background: $light-blue;
290+
display: block;
291+
position: absolute;
292+
left: 22px;
293+
top: 2px;
294+
}
295+
}
296+
297+
.schedule_info {
298+
padding-left: 35px;
299+
margin-bottom: 20px;
300+
}
301+
302+
.schedule_time {
303+
color: $light-blue;
304+
font-size: 14px;
305+
font-weight: 400;
306+
padding-right: 35px;
307+
width: 40px;
308+
}
309+
310+
.schedule_name {
311+
color: white;
312+
font-size: 18px;
313+
font-weight: 500;
314+
line-height: 1.2;
315+
}
316+
317+
.schedule-highlight .schedule_name {
318+
color: $color-yellow;
319+
}
320+
321+
.schedule_office {
322+
font-family: nunito;
323+
font-size: 14px;
324+
font-weight: 200;
325+
color: rgba($background-light, 0.6);
326+
}
327+
328+
.schedule_location {
329+
@extend .schedule_office;
330+
@extend .d-flex;
331+
@extend .align-items-center;
332+
color: $color-yellow;
333+
font-size: 11px;
334+
text-transform: uppercase;
335+
336+
.material-icons {
337+
font-size: inherit;
338+
margin-right: 5px;
339+
font-size: 20px;
340+
color: $light-blue;
341+
}
342+
}
343+
344+
.schedule_speaker {
345+
font-size: 14px;
346+
font-weight: 400;
347+
font-family: nunito;
348+
color: $background-light;
349+
margin-bottom: 0;
350+
}
351+
}
352+
353+
@media (max-width: $breakpoint-xs) {
354+
.schedule-page {
355+
&__content {
356+
padding: 0 20px;
357+
}
358+
.filters {
359+
flex-wrap: wrap;
360+
justify-content: center;
361+
.filter-box {
362+
width: 100%;
363+
}
364+
}
365+
.schedule_picture {
366+
width: 30px;
367+
}
368+
}
369+
}

‎src/scss/_variables.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
$dark-blue: #102E46;
2+
$light-blue: #7FC7CF;
3+
$color-blue: #7FC7CF;
4+
$color-platinum: #939596;
5+
$color-yellow: #EFC780;
6+
$background-light: #F9F8F4;
7+
$background-dark: #EAEAEA;
8+
9+
// RESPONSIVE BREAKPOINTS
10+
$breakpoint-xs: 576px;
11+
$breakpoint-sm: 767px;
12+
$breakpoint-md: 991px;
13+
$breakpoint-lg: 1200px;
14+
$breakpoint-xl: 2000px;

0 commit comments

Comments
 (0)