materialize-sass 0.97.3 → 0.97.4

data/app/assets/stylesheets/materialize/components/_buttons.scss

@@ -44,7 +44,7 @@
   text-align: center;
   letter-spacing: .5px;
   @extend .z-depth-1;
-  @include transition(.2s ease-out);
+  transition: .2s ease-out;
   cursor: pointer;
 
   &:hover {
@@ -81,6 +81,7 @@
   }
 
   &:hover {
+    background-color: $button-color;
     @extend .z-depth-1-half;
   }
   &:before {

data/app/assets/stylesheets/materialize/components/_cards.scss

@@ -104,10 +104,10 @@
     border-top: 1px solid rgba(160,160,160,.2);
     padding: $card-padding;
 
-    a {
+    a:not(.btn):not(.btn-large):not(.btn-floating) {
       color: $card-link-color;
       margin-right: $card-padding;
-      @include transition(color .3s ease);
+      transition: color .3s ease;
       text-transform: uppercase;
 
       &:hover { color: $card-link-color-light; }

data/app/assets/stylesheets/materialize/components/_carousel.scss

@@ -3,11 +3,8 @@
   position: relative;
   width: 100%;
   height: 400px;
-
-
-  @include perspective(500px);
+  perspective: 500px;
   transform-style: preserve-3d;
-  -webkit-transform-style: preserve-3d;
   transform-origin: 0% 50%;
 
   .carousel-item {
@@ -35,4 +32,3 @@
     }
   }
 }
-

data/app/assets/stylesheets/materialize/components/_collapsible.scss

@@ -29,7 +29,7 @@
 .collapsible-body {
   display: none;
   border-bottom: 1px solid $collapsible-border-color;
-  @include box-sizing(border-box);
+  box-sizing: border-box;
 
   p {
     margin: 0;

data/app/assets/stylesheets/materialize/components/_form.scss

@@ -34,6 +34,7 @@ label {
 }
 
 // Text inputs
+input:not([type]),
 input[type=text],
 input[type=password],
 input[type=email],
@@ -59,7 +60,7 @@ textarea.materialize-textarea {
   margin: 0 0 15px 0;
   padding: 0;
   box-shadow: none;
-  @include box-sizing(content-box);
+  box-sizing: content-box;
   transition: all .3s;
 
 
@@ -131,11 +132,11 @@ textarea.materialize-textarea {
     left: $gutter-width / 2;
     font-size: 1rem;
     cursor: text;
-    @include transition(.2s ease-out);
+    transition: .2s ease-out;
   }
   label.active {
     font-size: $label-font-size;
-    @include transform(translateY(-140%));
+    transform: translateY(-140%);
   }
 
   // Prefix Icons
@@ -143,7 +144,7 @@ textarea.materialize-textarea {
     position: absolute;
     width: 3rem;
     font-size: 2rem;
-    @include transition(color .2s);
+    transition: color .2s;
 
     &.active { color: $input-focus-color; }
   }
@@ -252,12 +253,10 @@ textarea {
   height: 25px;
   line-height: 25px;
   font-size: 1rem;
-  @include transition(.28s ease);
+  transition: .28s ease;
 
-  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
-  -moz-user-select: none; /* mozilla browsers */
   -khtml-user-select: none; /* webkit (konqueror) browsers */
-  -ms-user-select: none; /* IE10+ */
+  user-select: none;
 }
 
 [type="radio"] + label:before,
@@ -270,7 +269,7 @@ textarea {
   width: 16px;
   height: 16px;
   z-index: 0;
-  @include transition(.28s ease);
+  transition: .28s ease;
 }
 
 /* Unchecked styles */
@@ -283,7 +282,7 @@ textarea {
   border: 2px solid $radio-empty-color;
   z-index: -1;
 
-  @include transform(scale(0));
+  transform: scale(0);
 }
 
 /* Checked styles */
@@ -296,7 +295,7 @@ textarea {
   border: 2px solid $radio-fill-color;
   background-color: $radio-fill-color;
   z-index: 0;
-  @include transform(scale(1.02));
+  transform: scale(1.02);
 }
 
 /* Radio With gap */
@@ -309,7 +308,7 @@ textarea {
   border: 2px solid $radio-fill-color;
   background-color: $radio-fill-color;
   z-index: 0;
-  @include transform(scale(.5));
+  transform: scale(.5);
 }
 
 /* Disabled Radio With gap */
@@ -390,7 +389,7 @@ form p:last-child {
     border: 2px solid $radio-empty-color;
     border-radius: 1px;
     margin-top: 2px;
-    @include transition(.2s);
+    transition: .2s;
   }
 
   &:not(:checked):disabled + label:before {
@@ -408,9 +407,9 @@ form p:last-child {
     border-left: 2px solid transparent;
     border-right: 2px solid $radio-fill-color;
     border-bottom: 2px solid $radio-fill-color;
-    @include transform(rotate(40deg));
-    -webkit-backface-visibility: hidden;
-    @include transform-origin(100% 100%);
+    transform: rotate(40deg);
+    backface-visibility: hidden;
+    transform-origin: 100% 100%;
   }
 
   &:disabled + label:before {
@@ -429,9 +428,9 @@ form p:last-child {
     border-left: none;
     border-right: 2px solid $radio-fill-color;
     border-bottom: none;
-    @include transform(rotate(90deg));
-    -webkit-backface-visibility: hidden;
-    @include transform-origin(100% 100%);
+    transform: rotate(90deg);
+    backface-visibility: hidden;
+    transform-origin: 100% 100%;
   }
 
   // Disabled indeterminate
@@ -778,8 +777,8 @@ input[type=range] + .thumb {
   top: 10px;
   margin-left: -6px;
 
-  @include transform-origin(50% 50%);
-  @include transform(rotate(-45deg));
+  transform-origin: 50% 50%;
+  transform: rotate(-45deg);
 
   .value {
     display: block;
@@ -787,7 +786,7 @@ input[type=range] + .thumb {
     text-align: center;
     color: $radio-fill-color;
     font-size: 0;
-    @include transform(rotate(45deg));
+    transform: rotate(45deg);
   }
 
   &.active {
@@ -827,7 +826,7 @@ input[type=range]::-webkit-slider-thumb {
   background-color: $radio-fill-color;
   transform-origin: 50% 50%;
   margin: -5px 0 0 0;
-  @include transition(.3s);
+  transition: .3s;
 }
 
 input[type=range]:focus::-webkit-slider-runnable-track {
@@ -916,4 +915,4 @@ select {
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
-}
+}

data/app/assets/stylesheets/materialize/components/_global.scss

@@ -32,8 +32,8 @@ a {
 
 // Positioning
 .valign-wrapper {
-  @include flexbox();
-  @include align(center);
+  display: flex;
+  align-items: center;
 
   .valign {
     display: block;
@@ -77,6 +77,11 @@ ul {
   box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
 }
 
+.hoverable {
+  transition: box-shadow .25s;
+  box-shadow: 0;
+}
+
 .hoverable:hover {
   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);
@@ -191,6 +196,14 @@ video.responsive-video {
   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);
@@ -294,27 +307,27 @@ ul.staggered-list li {
 }
 .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;
   }
 }
 
@@ -367,7 +380,7 @@ table {
   }
 
   &.highlight > tbody > tr {
-    @include transition(background-color .25s ease);
+    transition: background-color .25s ease;
     &:hover {
       background-color: $table-striped-color;
     }
@@ -536,7 +549,7 @@ td, th{
   }
   a.collection-item{
     display: block;
-    @include transition(.25s);
+    transition: .25s;
     color: $collection-link-color;
     &:not(.active) {
       &:hover {
@@ -582,7 +595,7 @@ span.badge {
   color: color('grey', 'darken-1');
   position: absolute;
   right: 15px;
-  @include box-sizing(border-box);
+  box-sizing: border-box;
 
   &.new {
     font-weight: 300;
@@ -634,7 +647,7 @@ nav ul a span.badge {
     left: 0;
     bottom: 0;
     background-color: $progress-bar-color;
-    @include transition(width .3s linear);
+    transition: width .3s linear;
   }
   .indeterminate {
     background-color: $progress-bar-color;
@@ -647,7 +660,7 @@ nav ul a 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 {
@@ -659,34 +672,34 @@ nav ul a 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%;

data/app/assets/stylesheets/materialize/components/_grid.scss

@@ -19,8 +19,8 @@
 }
 
 .section {
-	padding-top: 1rem;
-	padding-bottom: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 
   &.no-pad {
     padding: 0;
@@ -48,7 +48,7 @@
 
   .col {
     float: left;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     padding: 0 $gutter-width / 2;
 
     &[class*="push-"],
@@ -61,7 +61,16 @@
       $perc: unquote((100 / ($num-cols / $i)) + "%");
       &.s#{$i} {
         width: $perc;
+        margin-left: auto;
+        left: auto;
+        right: auto;
       }
+      $i: $i + 1;
+    }
+
+    $i: 1;
+    @while $i <= $num-cols {
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
       &.offset-s#{$i} {
         margin-left: $perc;
       }
@@ -81,7 +90,16 @@
         $perc: unquote((100 / ($num-cols / $i)) + "%");
         &.m#{$i} {
           width: $perc;
+          margin-left: auto;
+          left: auto;
+          right: auto;
         }
+        $i: $i + 1
+      }
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
         &.offset-m#{$i} {
           margin-left: $perc;
         }
@@ -102,7 +120,16 @@
         $perc: unquote((100 / ($num-cols / $i)) + "%");
         &.l#{$i} {
           width: $perc;
+          margin-left: auto;
+          left: auto;
+          right: auto;
         }
+        $i: $i + 1;
+      }
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
         &.offset-l#{$i} {
           margin-left: $perc;
         }

data/app/assets/stylesheets/materialize/components/_icons-material-design.scss

@@ -1,3 +1,9 @@
+/* This is needed for some mobile phones to display the Google Icon font properly */
+.material-icons {
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga';
+}
+
 $font-mdi   : 'Material-Design-Icons';
 $mdi-prefix : 'mdi-';