Bring in styles

NatalJS · Feb 17, 2020 · 6ae4075 · 6ae4075
1 parent 0aaed4c
commit 6ae4075
Show file tree

Hide file tree

Showing 4 changed files with 418 additions and 0 deletions.
diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Store from './Store';
 import Schedule from './components/Schedule';
+import './scss/index.scss';
 
 class ScheduleManager {
   constructor() {

diff --git a/src/scss/_schedule.scss b/src/scss/_schedule.scss
@@ -0,0 +1,369 @@
+.category-filter {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .schedule_category {
+    background: none;
+    padding: 0;
+    font-size: 12px;
+    margin-right: 10px;
+  }
+}
+
+.advanced-filters {
+  h2 {
+    font-size: 14px;
+    text-transform: uppercase;
+  }
+
+  h3 {
+    font-family: nunito;
+    font-size: 12px;
+    display: block;
+  }
+}
+
+.empty-message {
+  width: 100%;
+  margin-top: 20px;
+  text-align: center;
+  color: white;
+  font-size: 1.2em;
+}
+
+.Popover {
+  z-index: 9999;
+  width: 30vw;
+  min-width: 400px;
+  padding-right: 10px;
+  @media(max-width: 768px) {
+    width: 90vw;
+    min-width: auto;
+  }
+
+  .Popover-body {
+    border-radius: 2px;
+    background-color: white;
+    padding: 20px;
+  }
+
+  .Popover-tip {
+    fill: white;
+  }
+}
+
+.schedule_category {
+  background: $light-blue;
+  font-family: nunito;
+  font-size: 10px;
+  color: $dark-blue;
+  padding: 2px 5px 1px 5px;
+  border-radius: 2px;
+  margin-left: 5px;
+  white-space: nowrap;
+
+  &.pessoas {
+    background: #8b9ffc;
+  }
+
+  &.data-science {
+    background: #ce9bc4;
+  }
+
+  &.web {
+    background: #f5bc8b;
+  }
+
+  &.devops {
+    background: #3a8bbb;
+  }
+}
+
+.schedule-page {
+  padding: 24px 0;
+  background-color: $dark-blue;
+
+  .loading {
+    color: white;
+    text-align: center;
+  }
+
+  &__content {
+    padding: 0 70px;
+  }
+
+  .day-separator {
+    margin: 60px 0;
+    font-size: 30px;
+
+    span {
+      font-weight: 200;
+    }
+  }
+
+  .schedule_subtitle {
+    font-family: nunito;
+    font-size: 14px;
+    text-align: center;
+    color: white;
+    background: rgba(white, 0.1);
+    padding: 20px;
+  }
+
+  .schedule-page__title {
+    display: inline-block;
+    color: $color-yellow;
+    text-transform: uppercase;
+    font-size: 22px;
+    margin-bottom: 40px;
+    padding-bottom: 5px;
+    border-bottom: 4px solid $color-yellow;
+  }
+
+  .accordion-tabs {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    .tab-header-and-content {
+      list-style: none;
+      width: 20%;
+      display: inline-flex;
+      text-align: center;
+      align-items: center;
+      justify-content: center;
+    }
+
+    a {
+      color: $color-yellow;
+      text-transform: uppercase;
+      text-align: center;
+      padding-bottom: 5px;
+      line-height: normal;
+    }
+
+    a:hover {
+      color: $background-light;
+      text-decoration: none;
+    }
+  }
+
+  .tab-link {
+    color: $color-yellow;
+    text-transform: uppercase;
+    text-align: center;
+    padding-bottom: 5px;
+  }
+
+  .filters {
+    background-color: inherit;
+    color: white;
+    background-color: $dark-blue;
+    z-index: 999;
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 16px 0;
+
+    .filter-box {
+      width: 360px;
+      display: flex;
+      align-items: flex-start;
+
+      .filters-search {
+        width: 100%;
+        position: relative;
+        margin: 0;
+
+        input {
+          width: 100%;
+          color: white;
+          background-color: transparent;
+          border: none;
+          border-bottom: 1px solid white;
+          padding: 0 30px 10px 0;
+          outline: none;
+
+          &::-webkit-input-placeholder {
+            color: white;
+          }
+
+          &:focus {
+            border-color: $light-blue;
+
+            &::-webkit-input-placeholder {
+              color: rgba(white, 0.5);
+            }
+          }
+        }
+
+        .material-icons {
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+      }
+
+      button {
+        display: flex;
+        color: white;
+        line-height: normal;
+        background-color: transparent;
+        padding-left: 5px;
+        border: none;
+        padding-right: 5px;
+        outline: none;
+      }
+    }
+
+    .accordion-tabs {
+      width: 100%;
+    }
+  }
+
+  .schedule_category_type a {
+    font-size: 22px;
+    &.active {
+      border-bottom: 5px solid $color-yellow;
+    }
+  }
+
+  .schedule_category_days {
+    text-align: center;
+  }
+
+  .schedule_category_days a {
+    font-size: 22px;
+    color: white;
+    display: inline-block;
+    border-bottom: 2px solid transparent;
+
+    &.active {
+      color: $color-yellow;
+      border-bottom: 2px solid $color-yellow;
+    }
+  }
+
+  .schedule_article {
+    display: flex;
+    flex-direction: row;
+  }
+
+// .schedule_article:last-child .picture-container:after
+  .schedule_article:last-child .picture-container:before {
+    display: none;
+  }
+
+  .schedule_picture {
+    height: 60px;
+    width: 60px;
+    overflow: hidden;
+    border-radius: 50%;
+
+    img {
+      position: relative;
+      z-index: 9;
+    }
+  }
+
+  .picture-container {
+    position: relative;
+    width: 60px;
+
+    &:before {
+      content: '';
+      width: 1px;
+      height: 100%;
+      background: $light-blue;
+      display: block;
+      position: absolute;
+      left: 30px;
+      top: 10px;
+    }
+
+    &:after {
+      content: '';
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: $light-blue;
+      display: block;
+      position: absolute;
+      left: 22px;
+      top: 2px;
+    }
+  }
+
+  .schedule_info {
+    padding-left: 35px;
+    margin-bottom: 20px;
+  }
+
+  .schedule_time {
+    color: $light-blue;
+    font-size: 14px;
+    font-weight: 400;
+    padding-right: 35px;
+    width: 40px;
+  }
+
+  .schedule_name {
+    color: white;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+
+  .schedule-highlight .schedule_name {
+    color: $color-yellow;
+  }
+
+  .schedule_office {
+    font-family: nunito;
+    font-size: 14px;
+    font-weight: 200;
+    color: rgba($background-light, 0.6);
+  }
+
+  .schedule_location {
+    @extend .schedule_office;
+    @extend .d-flex;
+    @extend .align-items-center;
+    color: $color-yellow;
+    font-size: 11px;
+    text-transform: uppercase;
+
+    .material-icons {
+      font-size: inherit;
+      margin-right: 5px;
+      font-size: 20px;
+      color: $light-blue;
+    }
+  }
+
+  .schedule_speaker {
+    font-size: 14px;
+    font-weight: 400;
+    font-family: nunito;
+    color: $background-light;
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: $breakpoint-xs) {
+  .schedule-page {
+    &__content {
+      padding: 0 20px;
+    }
+    .filters {
+      flex-wrap: wrap;
+      justify-content: center;
+      .filter-box {
+        width: 100%;
+      }
+    }
+    .schedule_picture {
+      width: 30px;
+    }
+  }
+}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -0,0 +1,14 @@
+$dark-blue: #102E46;
+$light-blue: #7FC7CF;
+$color-blue: #7FC7CF;
+$color-platinum: #939596;
+$color-yellow: #EFC780;
+$background-light: #F9F8F4;
+$background-dark: #EAEAEA;
+
+// RESPONSIVE BREAKPOINTS
+$breakpoint-xs: 576px;
+$breakpoint-sm: 767px;
+$breakpoint-md: 991px;
+$breakpoint-lg: 1200px;
+$breakpoint-xl: 2000px;