@materializecss/materialize 1.2.0 → 1.2.1

package/sass/_style.scss

@@ -1,929 +1,929 @@
-$border-color: rgba(0,0,0,.14);
-$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-
-/***************
-  HTML Styles
-***************/
-body {
-  //background-color: #fcfcfc;
-  color: $off-black;
-  line-height: 1.6;
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-}
-
-p.box {
-  padding: 20px;
-}
-p {
-  padding: 0;
-
-}
-
-h5 > span {
-  font-size: 14px;
-  margin-left: 15px;
-  color: #777;
-}
-
-nav {
-  // background-color: color("materialize-red", "lighten-2");
-
-  a {
-    color: rgba(0,0,0,.87);
-  }
-  ul li a:hover, ul li.active {
-    background-color: color("materialize-red", "lighten-1");
-  }
-}
-
-td, th {
-  padding: 15px 10px;
-}
-
-.header {
-  color: color("materialize-red", "lighten-2");
-  font-weight: 300;
-}
-
-.preview {
-  background-color: #FFF;
-  border: 1px solid #eee;
-  padding: 20px 20px;
-}
-
-.method-header {
-  font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace;
-  margin-top: 15px;
-  padding-top: 30px;
-}
-
-header, main, footer {
-  padding-left: 300px;
-}
-.parallax-demo header,
-.parallax-demo main,
-.parallax-demo footer {
-  padding-left: 0;
-}
-footer.example {
-  padding-left: 0;
-}
-
-@media #{$medium-and-down} {
-  header, main, footer {
-    padding-left: 0;
-  }
-  h5 > span {
-    display: block;
-    margin: 0 0 15px 0;
-  }
-
-}
-
-/********************
-  Index Page Styles
-********************/
-
-// custom styled sidebar
-ul.sidenav.sidenav-fixed li.logo {
-  text-align: center;
-  margin-top: 32px;
-  margin-bottom: 136px;
-
-  &:hover,
-  #logo-container:hover {
-    background-color: transparent;
-  }
-}
-ul.sidenav.sidenav-fixed {
-  overflow: hidden;
-  box-shadow: none;
-  border-right: 1px solid $border-color;
-
-  > li:last-child {
-      margin-bottom: 160px;
-    }
-
-
-  li {
-    line-height: 44px;
-
-    &.active {
-      background-color: rgba(50,50,50,.06);
-    }
-
-    a {
-      font-size: 13px;
-      line-height: 44px;
-      height: 44px;
-      padding: 0 30px;
-
-      .new.badge {
-        margin-top: calc(22px - 11px);
-      }
-    }
-  }
-
-  ul.collapsible-accordion {
-    background-color: #FFF;
-
-    a.collapsible-header {
-      padding: 0 30px;
-    }
-
-    .collapsible-body li a {
-      font-weight: 400;
-      padding: 0 37.5px 0 45px;
-    }
-  }
-
-  // Only show scrollbar on hover
-  &:hover {
-    overflow-y: auto;
-  }
-}
-
-.bold > a {
-  font-weight: bold;
-}
-
-#logo-container {
-  height: 57px;
-  margin-bottom: 32px;
-}
-
-.current-version-number {
-  color: rgba(0,0,0,0.53);
-}
-
-@media #{$medium-and-down} {
-  footer.page-footer .container {
-    text-align: center;
-  }
-}
-
-nav.top-nav {
-  height: 110px;
-  box-shadow: none;
-  border-bottom: 1px solid $border-color;
-  background-color: transparent;
-
-  h1.header {
-    margin: 0;
-    padding-top: 22px;
-  }
-}
-a.sidenav-trigger.top-nav {
-  position: absolute;
-  text-align: center;
-  height: 48px;
-  width: 48px;
-  top: 28px;
-  float: none;
-  margin-left: 1.5rem;
-  color: color("materialize-red", "lighten-3");
-  font-size: 36px;
-  z-index: 2;
-
-  i {
-    font-size: 32px;
-  }
-}
-
-@media #{$small-and-down} {
-  a.sidenav-trigger.top-nav {
-    left: 0;
-  }
-
-  ul.sidenav.sidenav-fixed {
-    border: 0;
-  }
-}
-
-@media #{$medium-and-down} {
-  nav .nav-wrapper {
-    text-align: center;
-
-    a.page-title {
-      font-size: 36px;
-    }
-  }
-}
-
-@media #{$medium-and-up} {
-  main > .container,
-  body > .page-footer > .container,
-  .top-nav > .container,
-  #index-banner > .container,
-  .github-commit > .container {
-    width: 100%;
-  }
-}
-
-
-#front-page-logo {
-  display: inline-block;
-  height: 100%;
-  pointer-events: none;
-}
-
-@media only screen and (max-width: 992px) {
-  #front-page-nav ul.sidenav {
-    li {
-      float: none;
-      padding: 0 15px;
-
-      &:hover { background-color: #ddd; }
-      .active { background-color: transparent; }
-    }
-    a {
-      color: #444;
-    }
-  }
-}
-
-
-#responsive-img {
-  width: 80%;
-  display:block;
-  margin: 0 auto;
-}
-
-#index-banner {
-  border-bottom: 1px solid $border-color;
-
-  .container {
-    position: relative;
-  }
-  .header {
-    // color: #FFF;
-  }
-  h4 {
-    margin-bottom: 40px;
-    line-height: 44px;
-    color: rgba(0,0,0,.7);
-  }
-  h1 {
-    margin-top: 16px;
-  }
-}
-@media #{$medium-and-down} {
-  #index-banner {
-    h1 {
-      margin-top: 60px;
-    }
-    h4 {
-      margin-bottom: 15px;
-    }
-  }
-}
-@media #{$small-and-down} {
-  #index-banner {
-    h4 {
-      margin-bottom: 0;
-    }
-  }
-}
-
-// Latest commit widget
-.github-commit {
-  color: rgba(0,0,0,0.53);
-  border-top: 1px solid $border-color;
-  padding: 14px 0;
-  height: 64px;
-  line-height: 36px;
-  font-size: .9rem;
-
-  .sha {
-    margin: 0 6px 0 6px;
-  }
-}
-@media #{$medium-and-down} {
-  .github-commit {
-    text-align: center;
-  }
-}
-
-#download-button,
-#upgrade-button {
-  &:hover {
-    background-color: lighten(color("materialize-red", "base"), 30%);
-  }
-  background-color: color("materialize-red", "lighten-2");
-  width: 260px;
-  height: 70px;
-  margin: 4px;
-  padding: 0;
-  line-height: 70px;
-  font-size: 18px;
-  font-weight: 400;
-}
-
-.promo{
-  width: 100%;
-
-  i {
-    margin: 40px 0;
-    color: color("materialize-red", "lighten-2");
-    font-size: 7rem;
-    display: block;
-  }
-}
-
-.promo-caption {
-  font-size: 1.7rem;
-  font-weight: 500;
-  margin-top: 5px;
-  margin-bottom: 0;
-
-}
-
-#front-page-nav {
-  background-color: #FFF;
-  position: relative;
-  a {
-      color: color("materialize-red", "lighten-2");
-    }
-  li {
-    &:hover {
-      background-color: color("materialize-red", "lighten-5");
-    }
-    &.active {
-      background-color: color("materialize-red", "lighten-5");
-    }
-  }
-  .container {
-    height: inherit;
-  }
-}
-
-// Grid doc styles
-
-.col.grid-example {
-  border: 1px solid #eee;
-  margin: 7px 0;
-  text-align: center;
-  line-height: 50px;
-  font-size: 28px;
-  background-color: tomato;
-  color: white;
-  padding: 0;
-
-  span {
-    font-weight: 100;
-    line-height: 50px;
-  }
-}
-
-.promo-example {
-  overflow: hidden;
-}
-
-
-/*******************
-  Flat Site Mockup
-*******************/
-
-#site-layout-example-left {
-  background-color: color("blue-grey", "lighten-2");
-  height: 300px;
-}
-#site-layout-example-right {
-  background-color: color("teal", "lighten-1");
-  height: 300px;
-}
-#site-layout-example-top {
-  background-color: color("red", "lighten-2");
-  height: 42px;
-}
-
-.flat-text-header {
-  height: 35px;
-  width: 80%;
-  background-color: rgba(255,255,255,.15);
-  display: block;
-  margin: 27px auto;
-}
-.flat-text {
-  height: 25px;
-  width: 80%;
-  background-color: rgba(0,0,0,.15);
-  display: block;
-  margin: 27px auto;
-  &.small {
-    width: 25%;
-    height: 25px;
-    background-color: rgba(0,0,0,.15);
-  }
-  &.full-width {
-    width: 100%;
-  }
-}
-
-/**********************
-**********************/
-
-/*****************
-  Chrome Browser
-*****************/
-$bottomColor: #E2E2E1;
-$topColor: lighten($bottomColor, 2%);
-
-$border: $bottomColor;
-
-$width: 100%;
-$height: auto;
-
-.browser-window {
-  text-align: left;
-  width: $width;
-  height: $height;
-  display: inline-block;
-  border-radius: 5px 5px 2px 2px;
-  background-color: #fff;
-  margin: 20px 0px;
-  overflow: hidden;
-
-    .top-bar {
-    height: 30px;
-    border-radius: 5px 5px 0 0;
-    border-top: thin solid lighten($topColor, 1%);
-    border-bottom: thin solid darken($bottomColor, 1%);
-    background: linear-gradient($topColor, $bottomColor);
-  }
-}
-
-.browser-window .circle {
-  height: 10px;
-  width: 10px;
-  display: inline-block;
-  border-radius: 50%;
-  background-color: lighten($topColor, 10%);
-  margin-right: 1px;
-}
-#close-circle {
-  background-color: #FF5C5A;
-}
-#minimize-circle {
-  background-color: #FFBB50;
-}
-#maximize-circle {
-  background-color: #1BC656;
-}
-.browser-window .circles { margin: 5px 12px; }
-.browser-window .content {
-  margin: 0;
-  width: 100%;
-  // min-height: 100%;
-  display: inline-block;
-  border-radius: 0 0 5px 5px;
-  background-color: #fafafa;
-}
-.browser-window .row {
-  margin: 0;
-}
-
-.clear { clear: both; }
-
-/**********************
-**********************/
-
-
-// Color Wheel
-.dynamic-color {
-
-  .red, .pink, .purple, .deep-purple, .indigo, .blue, .light-blue, .cyan, .teal, .green, .light-green, .lime, .yellow, .amber, .orange, .deep-orange, .brown , .grey,  .blue-grey, .black, .white, .transparent {
-    height: 55px;
-    width: 100%;
-    padding: 0 15px;
-    font-weight: 500;
-    font-size: 12px;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    box-sizing: border-box;
-  }
-  .col {
-    margin-bottom: 55px;
-  }
-}
-
-.center {
-  text-align: center;
-  vertical-align: middle;
-}
-
-// Icons
-.material-icons.icon-demo {
-  line-height: 50px;
-}
-.icon-container i {
-  font-size: 3em;
-  margin-bottom: 10px;
-}
-.icon-container .icon-preview {
-  height: 120px;
-  text-align: center;
-}
-.icon-container span {
-  display: block;
-}
-
-.icon-holder {
-  display: block;
-  text-align: center;
-  width: 150px;
-  height: 115px;
-
-  float: left;
-  margin: 0 0px 15px 0px;
-  p {
-    margin: 0 0;
-  }
-}
-
-// tabs
-.tabs-wrapper {
-  position: relative;
-  height: 48px;
-  @extend .hide-on-small-only;
-
-  .row.pinned {
-    position: fixed;
-    width: 100%;
-    top: 0;
-    z-index: 10;
-  }
-}
-
-
-// Tables
-thead {
-  color: rgba(0, 0, 0, .6);
-}
-
-
-// Shadow demo styling
-.shadow-demo {
-  background-color: color("teal", "lighten-1");
-  width: 100px;
-  height: 100px;
-  margin: 20px auto;
-
-  @media only screen and (max-width: $small-screen) {
-    width: 150px;
-    height: 150px;
-  }
-}
-
-// parallax demo
-.parallax-container {
-
-  .text-center {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    margin-top: -27px;
-  }
-
-}
-
-// Table of contents
-ul.table-of-contents {
-  margin-top: 0;
-  padding-top: 48px;
-
-  a {
-    &.active {
-      color: rgba(0,0,0,.8);
-    }
-    color: rgba(0,0,0,.55);
-    font-weight: 400;
-  }
-}
-
-
-
-// Prism Styling
-code, pre {
-  position: relative;
-  font-size: 1.1rem;
-}
-
-.directory-markup {
-  font-size: 1rem;
-  line-height: 1.1rem !important;
-}
-:not(pre) > code[class*="language-"] {
-  padding: .1em .25em;
-  border: solid 1px rgba(51,51,51,0.12);
-}
-
-// Styles code blocks
-pre[class*="language-"] {
-  &:before {
-    position: absolute;
-    padding: 1px 5px;
-    background: hsl(30, 10%, 90%);
-    top: 0;
-    left: 0;
-    font-family: $font-stack;
-    -webkit-font-smoothing: antialiased;
-    color: #555;
-    content:attr(class);
-    font-size: .9rem;
-    border: solid 1px rgba(51, 51, 51, 0.12);
-    border-top: none;
-    border-left: none;
-  }
-  padding: 25px 12px 7px 12px;
-  border: solid 1px rgba(51, 51, 51, 0.12);
-  background: rgba(246, 246, 246, .2);
-}
-
-pre[class*="language-"],
-code[class*="language-"] {
-  line-height: 1.3;
-}
-
-// Styles one-liners
-:not(pre) > code[class*="language-"] {
-  background: rgba(246, 246, 246, .3);
-}
-
-// copy code icons
-.copyMessage, .copyButton {
-  color: #757575; 
-  position: absolute; 
-}
-
-.copyMessage {
-  font-size: 14px;
-	transition: all 0.2s ease-in;
-	opacity: 0;
-	right: 45px;
-	top: 15px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,Cantarell, "Helvetica Neue", sans-serif;
-}
-
-.copyButton {
-  top: 10px; 
-  right: 10px; 
-  cursor: pointer;
-}
-
-.toc-wrapper {
-  &.pin-bottom {
-    margin-top: 84px;
-  }
-
-  position: relative;
-  margin-top: 42px;
-}
-
-// Footer styling
-footer{
-  font-size: .9rem;
-}
-body.parallax-demo footer {
-  margin-top: 0;
-}
-.docs-footer {
-  margin-top: 40px;
-  background-color: transparent;
-  border-top: 1px solid $border-color;
-  color: inherit;
-
-  .footer-copyright {
-    color: inherit;
-    background-color: transparent;
-  }
-}
-
-//About page styling
-.image-container {
-  width: 100%;
-  img {
-    max-width: 100%;
-  }
-}
-
-
-// Mobile page styling
-
-.mobile-image {
- @media #{$small-and-down} {
-  max-width: 100%;
- }
-}
-
-// Waves page styling
-.waves-color-demo {
-  .collection-item {
-    height: 37px;
-    line-height: 37px;
-    box-sizing: content-box;
-
-    code {
-      line-height: 37px;
-    }
-  }
-  .btn {
-    &:not(.waves-light) {
-    background-color: color("shades", "white");
-    color: #212121;
-    }
-  }
-}
-
-// Card Page styling
-.card-panel span, .card-content p{
-  -webkit-font-smoothing: antialiased;
-}
-
-#images .card-panel .row {
-  margin-bottom: 0;
-}
-
-// Pushpin Demo styles
-.pushpin-demo {
-  position: relative;
-  height: 100px;
-}
-#pushpin-demo-1 {
-  display: block;
-  height: inherit;
-  background-color: #ddd;
-}
-
-// Valign Demo
-.valign-demo {
-  height: 400px;
-  background-color: #ddd;
-}
-.talign-demo {
-  height: 100px;
-  background-color: #ddd;
-}
-
-// Transitions demos
-#staggered-test li,
-#image-test {
-  opacity: 0;
-
-}
-
-// Transifex Styling
-
-#tx-live-lang-container {
-  background-color: #fcfcfc;
-  z-index: 999;
-
-  #tx-live-lang-picker {
-    background-color: #fcfcfc;
-
-    li {
-      color: $off-black;
-      &:hover{
-      color: inherit;
-      background-color: color("materialize-red", "lighten-5");
-      }
-    }
-
-  }
-
-  .txlive-langselector-toggle {
-    border-bottom: 2px solid color("materialize-red", "lighten-2");
-  }
-
-  .txlive-langselector-current {
-    color: $off-black;
-  }
-
-  .txlive-langselector-marker {
-    border-bottom: 4px solid rgba(0,0,0,.61);
-  }
-
-
-}
-
-
-// Thanks for Downloading
-#download-thanks {
-  display: none;
-}
-
-
-// Twitter widget
-#twitter-widget-0 {
-  width: 300px !important;
-}
-
-// Version dropdown
-#nav-mobile li.version {
-  position: absolute;
-  top: 100px;
-  left: 0;
-  right: 0;
-  font-family: "Inconsolata";
-  text-align: center;
-
-  .dropdown-trigger {
-    font-family: "Inconsolata";
-    margin: 0 auto;
-    display: inline-block;
-    padding: 0 10px;
-    border-bottom: 1px solid rgba(0,0,0, .2);
-
-    .caret {
-      position: relative;
-      top: 10px;
-      fill: rgba(0,0,0,.6);
-    }
-  }
-}
-
-#version-dropdown {
-  text-align: left;
-
-  li > a {
-    padding: 0 10px;
-
-  }
-
-  a {
-    height: 50px;
-    line-height: 50px;
-  }
-
-}
-
-// Search
-#nav-mobile li.search {
-  &:hover { background-color: #fff; }
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 160px;
-  margin-top: 1px;
-  padding: 1px 0 0 0;
-  z-index: 2;
-
-  .search-wrapper {
-    &.focused .search-results:not(:empty) {
-      border-bottom: 1px solid $border-color;
-    }
-
-    color: #777;
-    margin-top: -1px;
-    border-top: 1px solid $border-color;
-    transition: margin .25s ease;
-
-    input#search {
-      &:focus {
-        outline: none;
-        box-shadow: none;
-      }
-
-      color: #777;
-      display: block;
-      font-size: 16px;
-      font-weight: 300;
-      width: 100%;
-      height: 62px;
-      margin: 0;
-      box-sizing: border-box;
-      padding: 0 45px 0 30px;
-      border: 0;
-    }
-
-    i.material-icons {
-      position: absolute;
-      top: 21px;
-      right: 10px;
-      cursor: pointer;
-    }
-  }
-
-
-  .search-results {
-    margin: 0;
-    border-top: 1px solid $border-color;
-    background-color: #fff;
-
-    a {
-      &:hover,
-      &.focused {
-        background-color: #eee;
-        outline: none;
-      }
-
-      font-size: 12px;
-      white-space: nowrap;
-      display: block;
-    }
-  }
-}
+$border-color: rgba(0,0,0,.14);
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+
+/***************
+  HTML Styles
+***************/
+body {
+  //background-color: #fcfcfc;
+  color: $off-black;
+  line-height: 1.6;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+}
+
+p.box {
+  padding: 20px;
+}
+p {
+  padding: 0;
+
+}
+
+h5 > span {
+  font-size: 14px;
+  margin-left: 15px;
+  color: #777;
+}
+
+nav {
+  // background-color: color("materialize-red", "lighten-2");
+
+  a {
+    color: rgba(0,0,0,.87);
+  }
+  ul li a:hover, ul li.active {
+    background-color: color("materialize-red", "lighten-1");
+  }
+}
+
+td, th {
+  padding: 15px 10px;
+}
+
+.header {
+  color: color("materialize-red", "lighten-2");
+  font-weight: 300;
+}
+
+.preview {
+  background-color: #FFF;
+  border: 1px solid #eee;
+  padding: 20px 20px;
+}
+
+.method-header {
+  font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace;
+  margin-top: 15px;
+  padding-top: 30px;
+}
+
+header, main, footer {
+  padding-left: 300px;
+}
+.parallax-demo header,
+.parallax-demo main,
+.parallax-demo footer {
+  padding-left: 0;
+}
+footer.example {
+  padding-left: 0;
+}
+
+@media #{$medium-and-down} {
+  header, main, footer {
+    padding-left: 0;
+  }
+  h5 > span {
+    display: block;
+    margin: 0 0 15px 0;
+  }
+
+}
+
+/********************
+  Index Page Styles
+********************/
+
+// custom styled sidebar
+ul.sidenav.sidenav-fixed li.logo {
+  text-align: center;
+  margin-top: 32px;
+  margin-bottom: 136px;
+
+  &:hover,
+  #logo-container:hover {
+    background-color: transparent;
+  }
+}
+ul.sidenav.sidenav-fixed {
+  overflow: hidden;
+  box-shadow: none;
+  border-right: 1px solid $border-color;
+
+  > li:last-child {
+      margin-bottom: 160px;
+    }
+
+
+  li {
+    line-height: 44px;
+
+    &.active {
+      background-color: rgba(50,50,50,.06);
+    }
+
+    a {
+      font-size: 13px;
+      line-height: 44px;
+      height: 44px;
+      padding: 0 30px;
+
+      .new.badge {
+        margin-top: calc(22px - 11px);
+      }
+    }
+  }
+
+  ul.collapsible-accordion {
+    background-color: #FFF;
+
+    a.collapsible-header {
+      padding: 0 30px;
+    }
+
+    .collapsible-body li a {
+      font-weight: 400;
+      padding: 0 37.5px 0 45px;
+    }
+  }
+
+  // Only show scrollbar on hover
+  &:hover {
+    overflow-y: auto;
+  }
+}
+
+.bold > a {
+  font-weight: bold;
+}
+
+#logo-container {
+  height: 57px;
+  margin-bottom: 32px;
+}
+
+.current-version-number {
+  color: rgba(0,0,0,0.53);
+}
+
+@media #{$medium-and-down} {
+  footer.page-footer .container {
+    text-align: center;
+  }
+}
+
+nav.top-nav {
+  height: 110px;
+  box-shadow: none;
+  border-bottom: 1px solid $border-color;
+  background-color: transparent;
+
+  h1.header {
+    margin: 0;
+    padding-top: 22px;
+  }
+}
+a.sidenav-trigger.top-nav {
+  position: absolute;
+  text-align: center;
+  height: 48px;
+  width: 48px;
+  top: 28px;
+  float: none;
+  margin-left: 1.5rem;
+  color: color("materialize-red", "lighten-3");
+  font-size: 36px;
+  z-index: 2;
+
+  i {
+    font-size: 32px;
+  }
+}
+
+@media #{$small-and-down} {
+  a.sidenav-trigger.top-nav {
+    left: 0;
+  }
+
+  ul.sidenav.sidenav-fixed {
+    border: 0;
+  }
+}
+
+@media #{$medium-and-down} {
+  nav .nav-wrapper {
+    text-align: center;
+
+    a.page-title {
+      font-size: 36px;
+    }
+  }
+}
+
+@media #{$medium-and-up} {
+  main > .container,
+  body > .page-footer > .container,
+  .top-nav > .container,
+  #index-banner > .container,
+  .github-commit > .container {
+    width: 100%;
+  }
+}
+
+
+#front-page-logo {
+  display: inline-block;
+  height: 100%;
+  pointer-events: none;
+}
+
+@media only screen and (max-width: 992px) {
+  #front-page-nav ul.sidenav {
+    li {
+      float: none;
+      padding: 0 15px;
+
+      &:hover { background-color: #ddd; }
+      .active { background-color: transparent; }
+    }
+    a {
+      color: #444;
+    }
+  }
+}
+
+
+#responsive-img {
+  width: 80%;
+  display:block;
+  margin: 0 auto;
+}
+
+#index-banner {
+  border-bottom: 1px solid $border-color;
+
+  .container {
+    position: relative;
+  }
+  .header {
+    // color: #FFF;
+  }
+  h4 {
+    margin-bottom: 40px;
+    line-height: 44px;
+    color: rgba(0,0,0,.7);
+  }
+  h1 {
+    margin-top: 16px;
+  }
+}
+@media #{$medium-and-down} {
+  #index-banner {
+    h1 {
+      margin-top: 60px;
+    }
+    h4 {
+      margin-bottom: 15px;
+    }
+  }
+}
+@media #{$small-and-down} {
+  #index-banner {
+    h4 {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Latest commit widget
+.github-commit {
+  color: rgba(0,0,0,0.53);
+  border-top: 1px solid $border-color;
+  padding: 14px 0;
+  height: 64px;
+  line-height: 36px;
+  font-size: .9rem;
+
+  .sha {
+    margin: 0 6px 0 6px;
+  }
+}
+@media #{$medium-and-down} {
+  .github-commit {
+    text-align: center;
+  }
+}
+
+#download-button,
+#upgrade-button {
+  &:hover {
+    background-color: lighten(color("materialize-red", "base"), 30%);
+  }
+  background-color: color("materialize-red", "lighten-2");
+  width: 260px;
+  height: 70px;
+  margin: 4px;
+  padding: 0;
+  line-height: 70px;
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.promo{
+  width: 100%;
+
+  i {
+    margin: 40px 0;
+    color: color("materialize-red", "lighten-2");
+    font-size: 7rem;
+    display: block;
+  }
+}
+
+.promo-caption {
+  font-size: 1.7rem;
+  font-weight: 500;
+  margin-top: 5px;
+  margin-bottom: 0;
+
+}
+
+#front-page-nav {
+  background-color: #FFF;
+  position: relative;
+  a {
+      color: color("materialize-red", "lighten-2");
+    }
+  li {
+    &:hover {
+      background-color: color("materialize-red", "lighten-5");
+    }
+    &.active {
+      background-color: color("materialize-red", "lighten-5");
+    }
+  }
+  .container {
+    height: inherit;
+  }
+}
+
+// Grid doc styles
+
+.col.grid-example {
+  border: 1px solid #eee;
+  margin: 7px 0;
+  text-align: center;
+  line-height: 50px;
+  font-size: 28px;
+  background-color: tomato;
+  color: white;
+  padding: 0;
+
+  span {
+    font-weight: 100;
+    line-height: 50px;
+  }
+}
+
+.promo-example {
+  overflow: hidden;
+}
+
+
+/*******************
+  Flat Site Mockup
+*******************/
+
+#site-layout-example-left {
+  background-color: color("blue-grey", "lighten-2");
+  height: 300px;
+}
+#site-layout-example-right {
+  background-color: color("teal", "lighten-1");
+  height: 300px;
+}
+#site-layout-example-top {
+  background-color: color("red", "lighten-2");
+  height: 42px;
+}
+
+.flat-text-header {
+  height: 35px;
+  width: 80%;
+  background-color: rgba(255,255,255,.15);
+  display: block;
+  margin: 27px auto;
+}
+.flat-text {
+  height: 25px;
+  width: 80%;
+  background-color: rgba(0,0,0,.15);
+  display: block;
+  margin: 27px auto;
+  &.small {
+    width: 25%;
+    height: 25px;
+    background-color: rgba(0,0,0,.15);
+  }
+  &.full-width {
+    width: 100%;
+  }
+}
+
+/**********************
+**********************/
+
+/*****************
+  Chrome Browser
+*****************/
+$bottomColor: #E2E2E1;
+$topColor: lighten($bottomColor, 2%);
+
+$border: $bottomColor;
+
+$width: 100%;
+$height: auto;
+
+.browser-window {
+  text-align: left;
+  width: $width;
+  height: $height;
+  display: inline-block;
+  border-radius: 5px 5px 2px 2px;
+  background-color: #fff;
+  margin: 20px 0px;
+  overflow: hidden;
+
+    .top-bar {
+    height: 30px;
+    border-radius: 5px 5px 0 0;
+    border-top: thin solid lighten($topColor, 1%);
+    border-bottom: thin solid darken($bottomColor, 1%);
+    background: linear-gradient($topColor, $bottomColor);
+  }
+}
+
+.browser-window .circle {
+  height: 10px;
+  width: 10px;
+  display: inline-block;
+  border-radius: 50%;
+  background-color: lighten($topColor, 10%);
+  margin-right: 1px;
+}
+#close-circle {
+  background-color: #FF5C5A;
+}
+#minimize-circle {
+  background-color: #FFBB50;
+}
+#maximize-circle {
+  background-color: #1BC656;
+}
+.browser-window .circles { margin: 5px 12px; }
+.browser-window .content {
+  margin: 0;
+  width: 100%;
+  // min-height: 100%;
+  display: inline-block;
+  border-radius: 0 0 5px 5px;
+  background-color: #fafafa;
+}
+.browser-window .row {
+  margin: 0;
+}
+
+.clear { clear: both; }
+
+/**********************
+**********************/
+
+
+// Color Wheel
+.dynamic-color {
+
+  .red, .pink, .purple, .deep-purple, .indigo, .blue, .light-blue, .cyan, .teal, .green, .light-green, .lime, .yellow, .amber, .orange, .deep-orange, .brown , .grey,  .blue-grey, .black, .white, .transparent {
+    height: 55px;
+    width: 100%;
+    padding: 0 15px;
+    font-weight: 500;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+  .col {
+    margin-bottom: 55px;
+  }
+}
+
+.center {
+  text-align: center;
+  vertical-align: middle;
+}
+
+// Icons
+.material-icons.icon-demo {
+  line-height: 50px;
+}
+.icon-container i {
+  font-size: 3em;
+  margin-bottom: 10px;
+}
+.icon-container .icon-preview {
+  height: 120px;
+  text-align: center;
+}
+.icon-container span {
+  display: block;
+}
+
+.icon-holder {
+  display: block;
+  text-align: center;
+  width: 150px;
+  height: 115px;
+
+  float: left;
+  margin: 0 0px 15px 0px;
+  p {
+    margin: 0 0;
+  }
+}
+
+// tabs
+.tabs-wrapper {
+  position: relative;
+  height: 48px;
+  @extend .hide-on-small-only;
+
+  .row.pinned {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 10;
+  }
+}
+
+
+// Tables
+thead {
+  color: rgba(0, 0, 0, .6);
+}
+
+
+// Shadow demo styling
+.shadow-demo {
+  background-color: color("teal", "lighten-1");
+  width: 100px;
+  height: 100px;
+  margin: 20px auto;
+
+  @media only screen and (max-width: $small-screen) {
+    width: 150px;
+    height: 150px;
+  }
+}
+
+// parallax demo
+.parallax-container {
+
+  .text-center {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    margin-top: -27px;
+  }
+
+}
+
+// Table of contents
+ul.table-of-contents {
+  margin-top: 0;
+  padding-top: 48px;
+
+  a {
+    &.active {
+      color: rgba(0,0,0,.8);
+    }
+    color: rgba(0,0,0,.55);
+    font-weight: 400;
+  }
+}
+
+
+
+// Prism Styling
+code, pre {
+  position: relative;
+  font-size: 1.1rem;
+}
+
+.directory-markup {
+  font-size: 1rem;
+  line-height: 1.1rem !important;
+}
+:not(pre) > code[class*="language-"] {
+  padding: .1em .25em;
+  border: solid 1px rgba(51,51,51,0.12);
+}
+
+// Styles code blocks
+pre[class*="language-"] {
+  &:before {
+    position: absolute;
+    padding: 1px 5px;
+    background: hsl(30, 10%, 90%);
+    top: 0;
+    left: 0;
+    font-family: $font-stack;
+    -webkit-font-smoothing: antialiased;
+    color: #555;
+    content:attr(class);
+    font-size: .9rem;
+    border: solid 1px rgba(51, 51, 51, 0.12);
+    border-top: none;
+    border-left: none;
+  }
+  padding: 25px 12px 7px 12px;
+  border: solid 1px rgba(51, 51, 51, 0.12);
+  background: rgba(246, 246, 246, .2);
+}
+
+pre[class*="language-"],
+code[class*="language-"] {
+  line-height: 1.3;
+}
+
+// Styles one-liners
+:not(pre) > code[class*="language-"] {
+  background: rgba(246, 246, 246, .3);
+}
+
+// copy code icons
+.copyMessage, .copyButton {
+  color: #757575; 
+  position: absolute; 
+}
+
+.copyMessage {
+  font-size: 14px;
+	transition: all 0.2s ease-in;
+	opacity: 0;
+	right: 45px;
+	top: 15px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,Cantarell, "Helvetica Neue", sans-serif;
+}
+
+.copyButton {
+  top: 10px; 
+  right: 10px; 
+  cursor: pointer;
+}
+
+.toc-wrapper {
+  &.pin-bottom {
+    margin-top: 84px;
+  }
+
+  position: relative;
+  margin-top: 42px;
+}
+
+// Footer styling
+footer{
+  font-size: .9rem;
+}
+body.parallax-demo footer {
+  margin-top: 0;
+}
+.docs-footer {
+  margin-top: 40px;
+  background-color: transparent;
+  border-top: 1px solid $border-color;
+  color: inherit;
+
+  .footer-copyright {
+    color: inherit;
+    background-color: transparent;
+  }
+}
+
+//About page styling
+.image-container {
+  width: 100%;
+  img {
+    max-width: 100%;
+  }
+}
+
+
+// Mobile page styling
+
+.mobile-image {
+ @media #{$small-and-down} {
+  max-width: 100%;
+ }
+}
+
+// Waves page styling
+.waves-color-demo {
+  .collection-item {
+    height: 37px;
+    line-height: 37px;
+    box-sizing: content-box;
+
+    code {
+      line-height: 37px;
+    }
+  }
+  .btn {
+    &:not(.waves-light) {
+    background-color: color("shades", "white");
+    color: #212121;
+    }
+  }
+}
+
+// Card Page styling
+.card-panel span, .card-content p{
+  -webkit-font-smoothing: antialiased;
+}
+
+#images .card-panel .row {
+  margin-bottom: 0;
+}
+
+// Pushpin Demo styles
+.pushpin-demo {
+  position: relative;
+  height: 100px;
+}
+#pushpin-demo-1 {
+  display: block;
+  height: inherit;
+  background-color: #ddd;
+}
+
+// Valign Demo
+.valign-demo {
+  height: 400px;
+  background-color: #ddd;
+}
+.talign-demo {
+  height: 100px;
+  background-color: #ddd;
+}
+
+// Transitions demos
+#staggered-test li,
+#image-test {
+  opacity: 0;
+
+}
+
+// Transifex Styling
+
+#tx-live-lang-container {
+  background-color: #fcfcfc;
+  z-index: 999;
+
+  #tx-live-lang-picker {
+    background-color: #fcfcfc;
+
+    li {
+      color: $off-black;
+      &:hover{
+      color: inherit;
+      background-color: color("materialize-red", "lighten-5");
+      }
+    }
+
+  }
+
+  .txlive-langselector-toggle {
+    border-bottom: 2px solid color("materialize-red", "lighten-2");
+  }
+
+  .txlive-langselector-current {
+    color: $off-black;
+  }
+
+  .txlive-langselector-marker {
+    border-bottom: 4px solid rgba(0,0,0,.61);
+  }
+
+
+}
+
+
+// Thanks for Downloading
+#download-thanks {
+  display: none;
+}
+
+
+// Twitter widget
+#twitter-widget-0 {
+  width: 300px !important;
+}
+
+// Version dropdown
+#nav-mobile li.version {
+  position: absolute;
+  top: 100px;
+  left: 0;
+  right: 0;
+  font-family: "Inconsolata";
+  text-align: center;
+
+  .dropdown-trigger {
+    font-family: "Inconsolata";
+    margin: 0 auto;
+    display: inline-block;
+    padding: 0 10px;
+    border-bottom: 1px solid rgba(0,0,0, .2);
+
+    .caret {
+      position: relative;
+      top: 10px;
+      fill: rgba(0,0,0,.6);
+    }
+  }
+}
+
+#version-dropdown {
+  text-align: left;
+
+  li > a {
+    padding: 0 10px;
+
+  }
+
+  a {
+    height: 50px;
+    line-height: 50px;
+  }
+
+}
+
+// Search
+#nav-mobile li.search {
+  &:hover { background-color: #fff; }
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 160px;
+  margin-top: 1px;
+  padding: 1px 0 0 0;
+  z-index: 2;
+
+  .search-wrapper {
+    &.focused .search-results:not(:empty) {
+      border-bottom: 1px solid $border-color;
+    }
+
+    color: #777;
+    margin-top: -1px;
+    border-top: 1px solid $border-color;
+    transition: margin .25s ease;
+
+    input#search {
+      &:focus {
+        outline: none;
+        box-shadow: none;
+      }
+
+      color: #777;
+      display: block;
+      font-size: 16px;
+      font-weight: 300;
+      width: 100%;
+      height: 62px;
+      margin: 0;
+      box-sizing: border-box;
+      padding: 0 45px 0 30px;
+      border: 0;
+    }
+
+    i.material-icons {
+      position: absolute;
+      top: 21px;
+      right: 10px;
+      cursor: pointer;
+    }
+  }
+
+
+  .search-results {
+    margin: 0;
+    border-top: 1px solid $border-color;
+    background-color: #fff;
+
+    a {
+      &:hover,
+      &.focused {
+        background-color: #eee;
+        outline: none;
+      }
+
+      font-size: 12px;
+      white-space: nowrap;
+      display: block;
+    }
+  }
+}