materialize-sass 0.95.1 → 0.95.2

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

@@ -21,12 +21,12 @@ main {
 }
 
 ul {
-	list-style-type: none;
+  list-style-type: none;
 }
 
 a {
-	color: $link-color;
-	text-decoration: none;
+  color: $link-color;
+  text-decoration: none;
 }
 
 
@@ -49,6 +49,11 @@ ul {
   }
 }
 
+// classic clearfix
+.clearfix {
+  clear: both;
+}
+
 
 // Z-levels
 
@@ -116,12 +121,15 @@ i {
 }
 
 // Images
-img.responsive-img {
+img.responsive-img,
+video.responsive-video {
   max-width: 100%;
   height: auto;
 }
 
 
+
+
 // parallax
 .parallax-container {
   position: relative;
@@ -164,41 +172,77 @@ img.responsive-img {
   position: relative;
 }
 .pinned {
-  position: fixed;
+  position: fixed !important;
 }
 
+/*********************
+  Transition Classes
+**********************/
 
+ul.staggered-list li {
+  @include opacity(0);
+}
 
-// Browser Size Dependent Visibility
+.fade-in {
+  @include opacity(0);
+  transform-origin: 0 50%;
+}
+
+
+/*********************
+  Media Query Classes
+**********************/
 .hide-on-small-only, .hide-on-small-and-down {
   @media #{$small-and-down} {
     display: none !important;
   }
 }
-
 .hide-on-med-and-down {
   @media #{$medium-and-down} {
     display: none !important;
   }
 }
-
 .hide-on-med-and-up {
   @media #{$medium-and-up} {
     display: none !important;
   }
 }
-
 .hide-on-med-only {
   @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
     display: none !important;
   }
 }
-
 .hide-on-large-only {
   @media #{$large-and-up} {
     display: none !important;
   }
 }
+.show-on-large {
+  @media #{$large-and-up} {
+    display: initial !important;
+  }
+}
+.show-on-medium {
+  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
+    display: initial !important;
+  }
+}
+.show-on-small {
+  @media #{$small-and-down} {
+    display: initial !important;
+  }
+}
+.show-on-medium-and-up {
+  @media #{$medium-and-up} {
+    display: initial !important;
+  }
+}
+.show-on-medium-and-down {
+  @media #{$medium-and-down} {
+    display: initial !important;
+  }
+}
+
 
 // Center text on mobile
 .center-on-small-only {
@@ -207,13 +251,11 @@ img.responsive-img {
   }
 }
 
-
 // Footer
-
 footer.page-footer {
   margin-top: 20px;
   padding-top: 20px;
-  background-color: color("materialize-red", "lighten-2");
+  background-color: $footer-bg-color;
 
   .footer-copyright {
     overflow: hidden;
@@ -538,6 +580,8 @@ span.badge {
       right: -8%;
     }
 }
+
+
 /*******************
   Utility Classes
 *******************/
@@ -580,3 +624,9 @@ span.badge {
   margin-left: auto;
   margin-right: auto;
 }
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -1,10 +1,10 @@
 @font-face {
     font-family: "Material-Design-Icons";
-    src:font-url("material-design-icons/Material-Design-Icons.eot?-g7cqhn");
-    src:font-url("material-design-icons/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"),
-        font-url("material-design-icons/Material-Design-Icons.woff?-g7cqhn") format("woff"),
-        font-url("material-design-icons/Material-Design-Icons.ttf?-g7cqhn") format("truetype"),
-        font-url("material-design-icons/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg");
+    src:font-url("#{$icons-font-path}Material-Design-Icons.eot?-g7cqhn");
+    src:font-url("#{$icons-font-path}Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"),
+        font-url("#{$icons-font-path}Material-Design-Icons.woff?-g7cqhn") format("woff"),
+        font-url("#{$icons-font-path}Material-Design-Icons.ttf?-g7cqhn") format("truetype"),
+        font-url("#{$icons-font-path}Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg");
     font-weight: normal;
     font-style: normal;
 }

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

@@ -6,7 +6,7 @@
   left: 0;
   right: 0;
   background-color: #eee;
-  padding: 24px;
+  padding: 0;
   max-height: 70%;
   width: 55%;
   margin: auto;
@@ -18,12 +18,28 @@
   will-change: top, opacity;
 
   @media #{$medium-and-down} {
-   max-width: 80%;
+   width: 80%;
   }
 
   h1,h2,h3,h4 {
     margin-top: 0;
   }
+
+  .modal-content {
+    padding: 24px;
+  }
+
+  .modal-footer {
+    background-color: #eee;
+    padding: 4px 6px;
+    height: 56px;
+    width: 100%;
+
+    .btn, .btn-flat {
+      float: right;
+      margin: 6px 0;
+    }
+  }
 }
 #lean-overlay {
     position: fixed;
@@ -40,11 +56,21 @@
     will-change: opacity;
 }
 
-.action-bar {
-  text-align: right;
-    margin-top: 10px;
-}
+.modal.modal-fixed-footer {
+  padding: 0;
+  height: 70%;
 
-.modal-action {
-  margin-bottom: 0px;
+  .modal-content {
+    position: fixed;
+    max-height: 100%;
+    padding-bottom: 64px;
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  .modal-footer {
+    border-top: 1px solid rgba(0,0,0,.1);
+    position: fixed;
+    bottom: 0;
+  }
 }

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

@@ -13,9 +13,13 @@ nav {
 
   a { color: #fff; }
 
+  @media #{$large-and-up} {
+    a.button-collapse { display: none; }
+  }
+
+
   a.button-collapse {
     float: left;
-    @extend .hide-on-large-only;
     position: relative;
     z-index: 1;
     height: $navbar-height-mobile;
@@ -49,7 +53,6 @@ nav {
 
   ul {
     margin: 0;
-    float: right;
 
     li {
       float: left;
@@ -63,7 +66,7 @@ nav {
     a {
       font-size: 1rem;
       color: #fff;
-      display: block;
+      display: inline-block;
       padding: 0px 15px;
     }
 
@@ -74,6 +77,8 @@ nav {
 
   // Navbar Search Form
   .input-field {
+    margin: 0;
+
     input {
       height: 100%;
       font-size: 1.2rem;
@@ -126,4 +131,4 @@ nav {
   .navbar-fixed {
     height: $navbar-height;
   }
-}
+}

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

@@ -117,13 +117,13 @@
 
 // Keyframes
 @mixin keyframes($animation-name) {
-  @-webkit-keyframes $animation-name {
+  @-webkit-keyframes #{$animation-name} {
     @content;
   }
-  @-moz-keyframes $animation-name {
+  @-moz-keyframes #{$animation-name} {
     @content;
   }
-  @keyframes $animation-name {
+  @keyframes #{$animation-name} {
     @content;
   }
 }
@@ -414,4 +414,3 @@
     -ms-transition-timing-function: $function;
     transition-timing-function: $function;
 }
-

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

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

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

@@ -1,74 +1,22 @@
-$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;
+ul.side-nav {
   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);
+  width: 240px;
+  left: -105%;
   top: 0;
   margin: 0;
-  padding-bottom: 60px;
   height: 100%;
   height: calc(100% + 60px);
+  padding-bottom: 60px;
   background-color: #FFF;
   z-index: 999;
-  @extend .z-depth-1;
 
+  @extend .z-depth-1;
   will-change: left;
 
   // Right Align
   &.right-aligned {
     will-change: right;
-    right: -1 * ($sidenav-width + 10);
+    right: -105%;
     left: auto;
   }
 
@@ -76,16 +24,30 @@ ul.side-nav.fixed {
     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 {
+    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.fixed {
   a {
     display: block;
     padding: 0 15px;
@@ -101,7 +63,6 @@ ul.side-nav.fixed {
 
   // Right Align
   &.right-aligned {
-    will-change: right;
     right: 0;
     left: auto;
   }
@@ -110,10 +71,10 @@ ul.side-nav.fixed {
 // Fixed sideNav hide on smaller
 @media #{$medium-and-down} {
   ul.side-nav.fixed {
-    left: -1 * ($sidenav-width + 10);
+    left: -105%;
 
     &.right-aligned {
-      right: -1 * ($sidenav-width + 10);
+      right: -105%;
       left: auto;
     }
   }
@@ -140,4 +101,4 @@ ul.side-nav.fixed .collapsible-body li.active {
   z-index: 997;
 
   will-change: opacity;
-}
+}