step8

scss/agenda.scss

@@ -1,3 +1,162 @@
-.agenda-view{
+.agenda-view
+{
+  background: $content-bg;
 
+  .tabs-striped .tabs
+  {
+    background-color: $top-bar-bg;
+
+    .tab-item
+    {
+      max-width: none;
+    }
+  }
+
+  .tab-title{
+    color: $top-bar-color;
+    @include cssCalc("font-size", "#{($font-size)} + 2px");
+    font-weight:400;
+  }
+
+  .tab-title.tab-item.tab-item-active{
+
+    border-color: $main-menu-bg;
+    margin-top: 0px;
+    border-width: 0px 0px 4px 0px !important;
+
+    .tab-title{
+      font-weight:600;
+    }
+
+  }
+
+  .event-time{
+    margin-top:10px;
+
+    .time-from{
+      display: block;
+      @include cssCalc("font-size", "#{($font-size)} + 2px");
+    }
+
+    .time-to{
+      @include cssCalc("font-size", "#{($font-size)} - 1px");
+      color: lighten($content-color, 10);
+      display: block;
+    }
+  }
+
+  .event-content
+  {
+    text-decoration: none;
+    background-color: darken($global-bg-color, 5);
+    background-size: 73vw;
+    background-position-y: 15%;
+    min-height: 40vw;
+    padding: 14px;
+    border-radius: 5px;
+    position: relative;
+    background-size: 100%;
+
+    &.global{
+      min-height: 20vw;
+    }
+
+    &.talk, &.workshop, &.keynote
+    {
+      margin-bottom: 25px;
+      border-radius: 5px 5px 0px 0px;
+
+      .event-title, .event-room{
+        color: $event-color;
+      }
+    }
+
+    &.talk:after, &.workshop:after, &.keynote:after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      border-radius: 5px 5px 0px 0px;
+    }
+
+    &.talk:after{
+      background-color: rgba($talk-bg-color, 0.6);
+    }
+    &.workshop:after{
+      background-color: rgba($workshop-bg-color, 0.6);
+    }
+    &.keynote:after{
+      background-color: rgba($keynote-bg-color, 0.6);
+    }
+
+
+    .event-title{
+      @include cssCalc("font-size", "#{($font-size)} + 4px");
+      font-weight:500;
+      margin:0px;
+      position:relative;
+      z-index: 100;
+    }
+
+    .event-room{
+      font-size:$font-size;
+      z-index: 100;
+      position:relative;
+      margin-bottom:0px;
+    }
+
+    .event-speakers
+    {
+      z-index: 100;
+      position:relative;
+      font-size:$font-size;
+      font-weight:500;
+      margin-bottom:0px;
+      *
+      {
+        color:$event-color;
+      }
+    }
+
+    .event-type-tag
+    {
+      position: absolute;
+      bottom: -25px;
+      left: 0px;
+      width: 100%;
+      border-radius: 0px 0px 4px 4px;
+      height: 25px;
+      line-height: 25px;
+      padding: 0px 14px;
+
+      &.keynote-event
+      {
+        background-color: darken($keynote-bg-color, 10);
+        text-transform: capitalize;
+        font-weight: 500;
+        color: $event-color;
+      }
+
+      &.talk-event
+      {
+        background: darken($talk-bg-color, 10);
+        text-transform: capitalize;
+        font-weight: 500;
+        color: $event-color;
+      }
+
+      &.workshop-event
+      {
+        background: darken($workshop-bg-color, 10);
+        text-transform: capitalize;
+        font-weight: 500;
+        color: $event-color;
+      }
+    }
+
+
+  }
 }

scss/event.scss

@@ -0,0 +1,58 @@
+.nav-bar-title{
+  text-transform: capitalize;
+}
+
+.icon.button.share-event::before
+{
+  margin-top:0px !important;
+}
+
+.event-view{
+  background: $content-bg;
+
+  .speaker-image{
+    height: 100vw;
+  }
+
+  .event-details{
+    min-height: 70px;
+    padding: 22px;
+    background-color: darken($content-color, 10);
+    margin-top: -8px;
+
+    .event-title{
+      color: $top-bar-color;
+      font-size: 16px;
+      @include cssCalc("font-size", "#{($font-size)} + 4px");
+      font-weight: 500;
+      display:block;
+    }
+    .event-speakers{
+      color: $main-menu-bg;
+      @include cssCalc("font-size", "#{($font-size)} + 2px");
+      font-weight: 400;
+      display:block;
+
+
+      .event-speaker{
+        color: inherit;
+        font-weight: 600;
+      }
+
+      .event-speaker-concat{
+        color: inherit;
+        font-weight: 400;
+      }
+    }
+  }
+  .event-description{
+    @include cssCalc("font-size", "#{($font-size)} + 2px");
+    padding:20px;
+
+    ul{
+      list-style: inherit;
+      // -webkit-padding-start: 40px;
+      padding-left: 40px;
+    }
+  }
+}

scss/ionic.app.scss

@@ -21,6 +21,10 @@ $ionicons-font-path: "../lib/ionic/fonts" !default;
 // Include all of Ionic
 @import "www/lib/ionic/scss/ionic";
 
-@import "speakers.scss";
-@import "venue.scss";
-@import "agenda.scss";
+// Include custom styles
+@import "scss/jsconfuy";
+@import "scss/main-menu";
+@import "scss/speakers";
+@import "scss/venue";
+@import "scss/agenda";
+@import "scss/event";

scss/jsconfuy.scss

@@ -0,0 +1,90 @@
+@mixin cssCalc($property, $expression) {
+  #{$property}: calc(#{$expression});
+}
+
+@mixin flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin flex-wrap($value) {
+  flex-wrap: $value;
+  -webkit-flex-wrap: $value;
+}
+
+
+$content-bg: #EAEAEA;
+$content-color: #444444;
+
+$top-bar-bg: #254164;
+$top-bar-color: #FFFFFF;
+
+$loading-color: #FFFFFF;
+
+$main-menu-bg: #FFC900;
+$main-menu-color: #FFFFFF;
+
+$loading-color: #FFFFFF;
+
+$speaker-actions-bg: #FFFFFF;
+
+$workshop-bg-color: #00B454;
+$talk-bg-color: #FF7C00;
+$keynote-bg-color: #FF3900;
+$global-bg-color: #DDDDDD;
+$event-color: #FFFFFF;
+
+$get-directions-btn-bg: #419e61;
+$get-directions-btn-color: #FFFFFF;
+
+//App settings
+$category-margin: 20px;
+$font-size:12px;
+$menu-title-font-size: 30px;
+$venue-map-porcentage: 65;
+
+*{
+  color: $content-color;
+}
+
+.bar.app-top-bar
+{
+  background-color: $top-bar-bg;
+
+  .title
+  {
+    color: $top-bar-color !important;
+    *
+    {
+      color: $top-bar-color !important;
+    }
+  }
+
+  .button
+  {
+    color: $top-bar-color !important;
+    *
+    {
+      color: $top-bar-color !important;
+    }
+  }
+}
+
+.menu-header-bar{
+  background-color: $top-bar-bg;
+
+  .menu-header-bar-title{
+    color: $top-bar-color;
+  }
+}
+
+.loading-container .loading
+{
+  *
+  {
+    color: $loading-color;
+  }
+}