materialize-sass 0.97.0 → 1.0.0.1

data/assets/stylesheets/materialize/components/_dropdown.scss

@@ -0,0 +1,85 @@
+.dropdown-content {
+  &:focus {
+    outline: 0;
+  }
+
+
+  @extend .z-depth-1;
+  background-color: $dropdown-bg-color;
+  margin: 0;
+  display: none;
+  min-width: 100px;
+  overflow-y: auto;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 9999; // TODO: Check if this doesn't break other things
+  transform-origin: 0 0;
+
+
+  li {
+    &:hover, &.active {
+      background-color: $dropdown-hover-bg-color;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &.divider {
+      min-height: 0;
+      height: 1px;
+    }
+
+    & > a, & > span {
+      font-size: 16px;
+      color: $dropdown-color;
+      display: block;
+      line-height: 22px;
+      padding: (($dropdown-item-height - 22) / 2) 16px;
+    }
+
+    & > span > label {
+      top: 1px;
+      left: 0;
+      height: 18px;
+    }
+
+    // Icon alignment override
+    & > a > i {
+      height: inherit;
+      line-height: inherit;
+      float: left;
+      margin: 0 24px 0 0;
+      width: 24px;
+    }
+
+
+    clear: both;
+    color: $off-black;
+    cursor: pointer;
+    min-height: $dropdown-item-height;
+    line-height: 1.5rem;
+    width: 100%;
+    text-align: left;
+  }
+}
+
+body.keyboard-focused {
+  .dropdown-content li:focus {
+    background-color: darken($dropdown-hover-bg-color, 8%);
+  }
+}
+
+// Input field specificity bugfix
+.input-field.col .dropdown-content [type="checkbox"] + label {
+  top: 1px;
+  left: 0;
+  height: 18px;
+  transform: none;
+}
+
+.dropdown-trigger {
+  cursor: pointer;
+}

data/{app/assets → assets}/stylesheets/materialize/components/_global.scss

@@ -1,6 +1,3 @@
-@charset "UTF-8";
-
-
 //Default styles
 
 html {
@@ -20,8 +17,23 @@ main {
   // flex: 1 0 auto;
 }
 
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: $font-stack;
+}
+
 ul {
-	list-style-type: none;
+  &:not(.browser-default) {
+    padding-left: 0;
+    list-style-type: none;
+
+    & > li {
+      list-style-type: none;
+    }
+  }
 }
 
 a {
@@ -35,22 +47,11 @@ a {
 
 // Positioning
 .valign-wrapper {
-  @include flexbox();
-  @include align(center);
-
-  .valign {
-    display: block;
-  }
+  display: flex;
+  align-items: center;
 }
 
 
-ul {
-  padding: 0;
-  li {
-    list-style-type: none;
-  }
-}
-
 // classic clearfix
 .clearfix {
   clear: both;
@@ -61,28 +62,51 @@ ul {
 .z-depth-0 {
   box-shadow: none !important;
 }
-.z-depth-1{
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+/* 2dp elevation modified*/
+.z-depth-1 {
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
+              0 3px 1px -2px rgba(0,0,0,0.12),
+              0 1px 5px 0 rgba(0,0,0,0.2);
 }
-.z-depth-1-half{
-  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+.z-depth-1-half {
+  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
 }
-.z-depth-2{
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+/* 6dp elevation modified*/
+.z-depth-2 {
+  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),
+              0 1px 10px 0 rgba(0,0,0,0.12),
+              0 2px 4px -1px rgba(0,0,0,0.3);
 }
-.z-depth-3{
-  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+
+/* 12dp elevation modified*/
+.z-depth-3 {
+  box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),
+              0 3px 14px 2px rgba(0,0,0,0.12),
+              0 5px 5px -3px rgba(0, 0, 0, 0.2);
 }
-.z-depth-4{
-  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
+
+/* 16dp elevation */
+.z-depth-4 {
+  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),
+              0 6px 30px 5px rgba(0,0,0,0.12),
+              0 8px 10px -7px rgba(0,0,0,0.2);
 }
-.z-depth-5{
-  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
+
+/* 24dp elevation */
+.z-depth-5 {
+  box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),
+              0 9px 46px 8px rgba(0,0,0,0.12),
+              0 11px 15px -7px rgba(0,0,0,0.2);
 }
 
-.hoverable:hover {
+.hoverable {
   transition: box-shadow .25s;
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+  &:hover {
+    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  }
 }
 
 // Dividers
@@ -142,14 +166,19 @@ video.responsive-video {
 .pagination {
 
   li {
-    float: left;
-    font-size: 1.2rem;
-    padding: 0 10px;
-    line-height: 30px;
+    display: inline-block;
     border-radius: 2px;
     text-align: center;
-
-    a { color: #444; }
+    vertical-align: top;
+    height: 30px;
+
+    a {
+      color: #444;
+      display: inline-block;
+      font-size: 1.2rem;
+      padding: 0 10px;
+      line-height: 30px;
+    }
 
     &.active a { color: #fff; }
 
@@ -188,32 +217,67 @@ video.responsive-video {
   }
 }
 
+// Breadcrumbs
+.breadcrumb {
+  display: inline-block;
+  font-size: 18px;
+  color: rgba(255,255,255, .7);
+
+  i,
+  [class^="mdi-"], [class*="mdi-"],
+  i.material-icons {
+    display: inline-block;
+    float: left;
+    font-size: 24px;
+  }
+
+  &:before {
+    content: '\E5CC';
+    color: rgba(255,255,255, .7);
+    vertical-align: top;
+    display: inline-block;
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 25px;
+    margin: 0 10px 0 8px;
+    -webkit-font-smoothing: antialiased;
+    float: left;
+  }
+
+  &:first-child:before {
+    display: none;
+  }
+
+  &:last-child {
+    color: #fff;
+  }
+}
 
 // Parallax
 .parallax-container {
   position: relative;
   overflow: hidden;
   height: 500px;
-}
-
-.parallax {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
 
-  img {
-    display: none;
+  .parallax {
     position: absolute;
-    left: 50%;
+    top: 0;
+    left: 0;
+    right: 0;
     bottom: 0;
-    min-width: 100%;
-    min-height: 100%;
-    -webkit-transform: translate3d(0,0,0);
-            transform: translate3d(0,0,0);
-    transform: translateX(-50%);
+    z-index: -1;
+
+    img {
+      opacity: 0;
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      min-width: 100%;
+      min-height: 100%;
+      transform: translate3d(0,0,0);
+      transform: translateX(-50%);
+    }
   }
 }
 
@@ -267,29 +331,39 @@ ul.staggered-list li {
     display: none !important;
   }
 }
+.hide-on-extra-large-only {
+  @media #{$extra-large-and-up} {
+    display: none !important;
+  }
+}
+.show-on-extra-large {
+  @media #{$extra-large-and-up} {
+    display: block !important;
+  }
+}
 .show-on-large {
   @media #{$large-and-up} {
-    display: initial !important;
+    display: block !important;
   }
 }
 .show-on-medium {
   @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
-    display: initial !important;
+    display: block !important;
   }
 }
 .show-on-small {
   @media #{$small-and-down} {
-    display: initial !important;
+    display: block !important;
   }
 }
 .show-on-medium-and-up {
   @media #{$medium-and-up} {
-    display: initial !important;
+    display: block !important;
   }
 }
 .show-on-medium-and-down {
   @media #{$medium-and-down} {
-    display: initial !important;
+    display: block !important;
   }
 }
 
@@ -302,18 +376,20 @@ ul.staggered-list li {
 }
 
 // Footer
-footer.page-footer {
-  margin-top: 20px;
+.page-footer {
   padding-top: 20px;
+  color: $footer-font-color;
   background-color: $footer-bg-color;
 
   .footer-copyright {
     overflow: hidden;
-    height: 50px;
-    line-height: 50px;
-    color: rgba(255,255,255,.8);
-    background-color: rgba(51,51,51,.08);;
-    @extend .light;
+    min-height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0px;
+    color: $footer-copyright-font-color;
+    background-color: $footer-copyright-bg-color;
   }
 }
 
@@ -325,24 +401,27 @@ table, th, td {
 table {
   width:100%;
   display: table;
+  border-collapse: collapse;
+  border-spacing: 0;
 
-  &.bordered > thead > tr,
-  &.bordered > tbody > tr {
-    border-bottom: 1px solid $table-border-color;
-  }
-
-  &.striped > tbody {
-    > tr:nth-child(odd) {
-      background-color: $table-striped-color;
+  &.striped {
+    tr {
+      border-bottom: none;
     }
 
-    > tr > td {
-      border-radius: 0px;
+    > tbody {
+      > tr:nth-child(odd) {
+        background-color: $table-striped-color;
+      }
+
+      > tr > td {
+        border-radius: 0;
+      }
     }
   }
 
-  &.hoverable > tbody > tr {
-    @include transition(background-color .25s ease);
+  &.highlight > tbody > tr {
+    transition: background-color .25s ease;
     &:hover {
       background-color: $table-striped-color;
     }
@@ -351,13 +430,11 @@ table {
   &.centered {
     thead tr th, tbody tr td {
       text-align: center;
-
     }
   }
-
 }
 
-thead {
+tr {
   border-bottom: 1px solid $table-border-color;
 }
 
@@ -379,6 +456,10 @@ td, th{
     display: block;
     position: relative;
 
+    td:empty:before {
+      content: '\00a0';
+    }
+
     th,
     td {
       margin: 0;
@@ -420,21 +501,16 @@ td, th{
       min-height: 1.25em;
       text-align: left;
     }
-    tr { padding: 0 10px; }
+    tr {
+      border-bottom: none;
+      padding: 0 10px;
+    }
 
     /* sort out borders */
     thead {
       border: 0;
       border-right: 1px solid $table-border-color;
     }
-
-    &.bordered {
-      th { border-bottom: 0; border-left: 0; }
-      td { border-left: 0; border-right: 0; border-bottom: 0; }
-      tr { border: 0; }
-      tbody tr { border-right: 1px solid $table-border-color; }
-    }
-
   }
 
 }
@@ -450,7 +526,7 @@ td, th{
 
   .collection-item {
     background-color: $collection-bg-color;
-    line-height: 1.5rem;
+    line-height: $collection-line-height;
     padding: 10px 20px;
     margin: 0;
     border-bottom: 1px solid $collection-border-color;
@@ -461,7 +537,9 @@ td, th{
       padding-left: 72px;
       position: relative;
 
-      .circle {
+      // Don't style circles inside preloader classes.
+      &:not(.circle-clipper) > .circle,
+      :not(.circle-clipper) > .circle {
         position: absolute;
         width: 42px;
         height: 42px;
@@ -503,12 +581,16 @@ td, th{
     &.active {
       background-color: $collection-active-bg-color;
       color: $collection-active-color;
+
+      .secondary-content {
+        color: #fff;
+      }
     }
   }
   a.collection-item{
     display: block;
-    @include transition(.25s);
-    color: $secondary-color;
+    transition: .25s;
+    color: $collection-link-color;
     &:not(.active) {
       &:hover {
         background-color: $collection-hover-bg-color;
@@ -536,42 +618,19 @@ td, th{
   float: right;
   color: $secondary-color;
 }
+.collapsible .collection {
+  margin: 0;
+  border: none;
+}
 
 
-// Badges
-span.badge {
-  min-width: 3rem;
-  padding: 0 6px;
-  text-align: center;
-  font-size: 1rem;
-  line-height: inherit;
-  color: color('grey', 'darken-1');
-  position: absolute;
-  right: 15px;
-  @include box-sizing(border-box);
-
-  &.new {
-    font-weight: 300;
-    font-size: 0.8rem;
-    color: #fff;
-    background-color: $badge-bg-color;
-    border-radius: 2px;
-  }
-  &.new:after {
-    content: " new";
-  }
-}
 
 // Responsive Videos
 .video-container {
     position: relative;
     padding-bottom: 56.25%;
-    padding-top: 30px;
     height: 0;
     overflow: hidden;
-    &.no-controls {
-      padding-top: 0;
-    }
 
     iframe, object, embed {
       position: absolute;
@@ -594,12 +653,11 @@ span.badge {
     overflow: hidden;
   .determinate {
     position: absolute;
-    background-color: inherit;
     top: 0;
     left: 0;
     bottom: 0;
     background-color: $progress-bar-color;
-    @include transition(width .3s linear);
+    transition: width .3s linear;
   }
   .indeterminate {
     background-color: $progress-bar-color;
@@ -612,7 +670,7 @@ span.badge {
       bottom: 0;
       will-change: left, right;
       // Custom bezier
-      @include animation(indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite);
+      animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
 
     }
     &:after {
@@ -624,34 +682,34 @@ span.badge {
       bottom: 0;
       will-change: left, right;
       // Custom bezier
-      @include animation(indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite);
-      @include animation-delay(1.15s);
+      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
+      animation-delay: 1.15s;
     }
   }
 }
-@include keyframes(indeterminate) {
+@keyframes indeterminate {
     0% {
-            left: -35%;
-            right:100%;
-        }
+      left: -35%;
+      right:100%;
+    }
     60% {
-        left: 100%;
-        right: -90%;
+      left: 100%;
+      right: -90%;
     }
     100% {
-        left: 100%;
-        right: -90%;
+      left: 100%;
+      right: -90%;
     }
 }
 
-@include keyframes(indeterminate-short) {
+@keyframes indeterminate-short {
     0% {
-        left: -200%;
-        right: 100%;
+      left: -200%;
+      right: 100%;
     }
     60% {
-        left: 107%;
-        right: -8%;
+      left: 107%;
+      right: -8%;
     }
     100% {
       left: 107%;
@@ -688,11 +746,6 @@ span.badge {
 
 // No Text Select
 .no-select {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }