materialize-sass 0.95.1

data/app/assets/stylesheets/components/_roboto.scss

@@ -0,0 +1,28 @@
+@font-face {
+    font-family: "Roboto";
+    src:  font-url("roboto/Roboto-Thin.ttf");
+    font-weight: 200;
+}
+@font-face {
+    font-family: "Roboto";
+    src: font-url("roboto/Roboto-Light.ttf");
+    font-weight: 300;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: font-url("roboto/Roboto-Regular.ttf");
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: font-url("roboto/Roboto-Medium.ttf");
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: font-url("roboto/Roboto-Bold.ttf");
+    font-weight: 700;
+}

data/app/assets/stylesheets/components/_sideNav.scss

@@ -0,0 +1,143 @@
+$sidenav-width: 240px;
+@media #{$medium-and-down} {
+  ul.side-nav {
+    position: fixed;
+    width: $sidenav-width;
+    left: -1 * ($sidenav-width + 10);
+    top: 0;
+    height: 100%;
+    height: calc(100% + 60px);
+    padding-bottom: 60px;
+    background-color: #FFF;
+    z-index: 999;
+
+    will-change: left;
+
+    // Right Align
+    &.right-aligned {
+      will-change: right;
+      right: -1 * ($sidenav-width + 10);
+      left: auto;
+    }
+
+    .collapsible{
+      margin: 0;
+    }
+
+
+    li {
+      float: none;
+      padding: 0 15px;
+      width: 240px;
+      &:hover, &.active { background-color: #ddd; }
+    }
+    a {
+      color: #444;
+    }
+  }
+
+}
+
+// Touch interaction
+.drag-target {
+  height: 100%;
+  width: 10px;
+  position: fixed;
+  top: 0;
+  z-index: 998;
+}
+
+
+// Hidden side-nav for all sizes
+ul.side-nav.full,
+ul.side-nav.fixed {
+  position: fixed;
+  width: $sidenav-width;
+  left: -1 * ($sidenav-width + 10);
+  top: 0;
+  margin: 0;
+  padding-bottom: 60px;
+  height: 100%;
+  height: calc(100% + 60px);
+  background-color: #FFF;
+  z-index: 999;
+  @extend .z-depth-1;
+
+  will-change: left;
+
+  // Right Align
+  &.right-aligned {
+    will-change: right;
+    right: -1 * ($sidenav-width + 10);
+    left: auto;
+  }
+
+  .collapsible{
+    margin: 0;
+  }
+
+  li {
+    float: none;
+    line-height: 64px;
+    padding: 0 15px;
+    width: $sidenav-width;
+
+    @include transition(background-color 0s);
+
+    &:hover, &.active { background-color: #ddd; }
+  }
+  a {
+    display: block;
+    padding: 0 15px;
+    color: #444;
+  }
+}
+
+
+// Fixed side-nav shown
+ul.side-nav.fixed {
+  left: 0;
+  position: fixed;
+
+  // Right Align
+  &.right-aligned {
+    will-change: right;
+    right: 0;
+    left: auto;
+  }
+}
+
+// Fixed sideNav hide on smaller
+@media #{$medium-and-down} {
+  ul.side-nav.fixed {
+    left: -1 * ($sidenav-width + 10);
+
+    &.right-aligned {
+      right: -1 * ($sidenav-width + 10);
+      left: auto;
+    }
+  }
+}
+
+
+ul.side-nav .collapsible-body li.active,
+ul.side-nav.fixed .collapsible-body li.active {
+  background-color: $primary-color;
+  a {
+    color: #fff;
+  }
+}
+
+
+#sidenav-overlay {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+
+  height: 120vh;
+  background-color: rgba(0,0,0,.5);
+  z-index: 997;
+
+  will-change: opacity;
+}

data/app/assets/stylesheets/components/_slider.scss

@@ -0,0 +1,87 @@
+.slider {
+  position: relative;
+  height: 440px;
+  width: 100%;
+
+  // Fullscreen slider
+  &.fullscreen {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    ul.slides {
+      height: 100%;
+    }
+
+    ul.indicators {
+      z-index: 2;
+      bottom: 30px;
+    }
+  }
+
+  ul.slides {
+    background-color: color('grey', 'base');
+    margin: 0;
+    height: 400px;
+
+    li {
+      @include opacity(0);
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: inherit;
+      overflow: hidden;
+
+      img { height: 100%; }
+
+      .caption {
+        color: #fff;
+        position: absolute;
+        top: 15%;
+        left: 15%;
+        width: 70%;
+        @include opacity(0);
+
+        p { color: color('grey', 'lighten-2'); }
+      }
+
+      &.active {
+        z-index: 2;
+      }
+    }
+  }
+
+
+  ul.indicators {
+    position: absolute;
+    text-align: center;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+
+    li.indicator-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 16px;
+      width: 16px;
+      margin: 0 12px;
+      background-color: color('grey', 'lighten-2');
+
+      @include transition(background-color .3s);
+      @include border-radius(50%);
+
+      &.active {
+        background-color: color('green', 'base');
+      }
+    }
+  }
+
+}

data/app/assets/stylesheets/components/_table_of_contents.scss

@@ -0,0 +1,33 @@
+/***************
+    Nav List
+***************/
+ul.table-of-contents {
+  &.fixed {
+      position: fixed;
+    }
+
+  li {
+    padding: 2px 0;
+  }
+  a {
+    display: inline-block;
+    font-weight: 300;
+    color: #757575;
+    padding-left: 20px;
+    height: 1.5rem;
+    line-height: 1.5rem;
+    letter-spacing: .4;
+    display: inline-block;
+
+    &:hover {
+      color: lighten(#757575, 20%);
+      padding-left: 19px;
+      border-left: 1px solid lighten(color("materialize-red", "base"),10%);
+    }
+    &.active {
+      font-weight: 500;
+      padding-left: 18px;
+      border-left: 2px solid lighten(color("materialize-red", "base"),10%);
+    }
+  }
+}

data/app/assets/stylesheets/components/_tabs.scss

@@ -0,0 +1,43 @@
+.tabs {
+  position: relative;
+  height: 48px;
+  background-color: #FFF;
+  margin: 0 auto;
+  width: 100%;
+  white-space: nowrap;
+
+  li.tab {
+    display: block;
+    float: left;
+    text-align: center;
+    background-color: #fff;
+    line-height: 48px;
+    height: 48px;
+    padding: 0 20px;
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: .8px;
+    width: 15%;
+
+    a {
+      color: $tabs-text-color;
+      display: block;
+      width: 100%;
+      height: 100%;
+      @include transition( color .28s ease);
+      &:hover {
+        color: lighten($tabs-text-color, 20%);
+      }
+    }
+  }
+  .indicator {
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: $tabs-underline-color;
+    will-change: left, right;
+  }
+}
+
+ul.tabs li.tab { padding: 0; }
+

data/app/assets/stylesheets/components/_toast.scss

@@ -0,0 +1,64 @@
+#toast-container {
+  display:block;
+  position: fixed;
+  z-index: 1001;
+
+  @media #{$small-and-down} {
+    min-width: 100%;
+    bottom: 0%;
+  }
+  @media #{$medium-only} {
+    min-width: 30%;
+    left: 5%;
+    bottom: 7%;
+  }
+  @media #{$large-and-up} {
+    min-width: 8%;
+    top: 10%;
+    right: 7%;
+  }
+}
+
+.toast {
+  @extend .z-depth-1;
+  @include border-radius(2px);
+  @include box-sizing(border-box);
+  top: 0px;
+  width: auto;
+  clear: both;
+  margin-top: 10px;
+  position: relative;
+  max-width:100%;
+  height: $toast-height;
+  line-height: $toast-height;
+  background-color: $toast-color;
+  padding: 0px 25px;
+  font-size: 1.1rem;
+  font-weight: 300;
+  color: $toast-text-color;
+
+  @include flexbox();
+  @include align(center);
+  @include justify-content(space-between);
+
+  .btn, .btn-flat {
+    margin: 0;
+    margin-left: 3rem;
+  }
+
+  &.rounded{
+    border-radius: 24px;
+  }
+
+  @media #{$small-and-down} {
+    width:100%;
+    @include border-radius(0px);
+  }
+  @media #{$medium-only} {
+    float: left;
+  }
+  @media #{$large-and-up} {
+    float: right;
+  }
+
+}

data/app/assets/stylesheets/components/_tooltip.scss

@@ -0,0 +1,34 @@
+.material-tooltip {
+    padding: 10px 8px;
+    font-size: 1rem;
+    z-index: 1000;
+    background-color: transparent;
+    @include border-radius(2px);
+    color: #fff;
+    min-height: 36px;
+    line-height: 1rem;
+    // max-width: 350px;
+    opacity: 0;
+    display: none;
+    position: absolute;
+    text-align: center;
+    overflow: hidden;
+    left:0;
+    top:0;
+
+    will-change: top, left;
+}
+
+.backdrop {
+  position: absolute;
+  opacity: 0;
+  display: none;
+  height: 7px;
+  width: 14px;
+  @include border-radius(0 0 14px 14px);
+  background-color: #323232;
+  z-index: -1;
+  @include transform-origin( 50% 10%);
+
+  will-change: transform, opacity;
+}

data/app/assets/stylesheets/components/_typography.scss

@@ -0,0 +1,55 @@
+a {
+  text-decoration: none;
+}
+
+html{
+  line-height: 1.5;
+  
+  @media only screen and (min-width: 0) {
+    font-size: 14px;
+  }
+  
+  @media only screen and (min-width: $medium-screen) {
+    font-size: 14.5px;
+  }
+  
+  @media only screen and (min-width: $large-screen) {
+    font-size: 15px;
+  }
+  
+  font-family: "Roboto", sans-serif;
+  font-weight: normal;
+  color: $off-black;
+}
+h1, h2, h3, h4, h5, h6 {
+	font-weight: 400;
+}
+
+// Header Styles
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
+h1 { font-size: $h1-fontsize; line-height: 1.1*$h1-fontsize; margin: ($h1-fontsize / 2) 0 ($h1-fontsize / 2.5) 0;}
+h2 { font-size: $h2-fontsize; line-height: 1.1*$h2-fontsize; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;}
+h3 { font-size: $h3-fontsize; line-height: 1.1*$h3-fontsize; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;}
+h4 { font-size: $h4-fontsize; line-height: 1.1*$h4-fontsize; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;}
+h5 { font-size: $h5-fontsize; line-height: 1.1*$h5-fontsize; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;}
+h6 { font-size: $h6-fontsize; line-height: 1.1*$h6-fontsize; margin: ($h6-fontsize / 2) 0 ($h6-fontsize / 2.5) 0;}
+
+// Text Styles
+em { font-style: italic; }
+strong { font-weight: 500; }
+small { font-size: 75%; }
+.light { font-weight: 300; }
+
+.flow-text{
+  font-weight: 300;
+  $i: 0;
+  @while $i <= $intervals {
+    @media only screen and (min-width : 360 + ($i * $interval-size)) {
+      font-size: 1.2rem * (1 + (.02 * $i));
+    }
+    @media only screen and (min-width : 0 + ($i * $interval-size)) {
+      line-height: .8rem * (1 + (.13 * $i));
+    }
+    $i: $i + 1;
+  }
+}