@materializecss/materialize 1.2.0 → 1.2.2

package/sass/_style.scss

@@ -1,929 +0,0 @@
-$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;
-    }
-  }
-}