@materializecss/materialize 1.2.2 → 2.0.1-alpha

package/sass/components/_global.scss

@@ -1,10 +1,9 @@
-//Default styles
-
 html {
- box-sizing: border-box;
+  box-sizing: border-box;
 }
+
 *, *:before, *:after {
- box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 button,
@@ -15,39 +14,24 @@ textarea {
   font-family: $font-stack;
 }
 
-ul {
-  &:not(.browser-default) {
-    padding-left: 0;
-    list-style-type: none;
-
-    & > li {
-      list-style-type: none;
-    }
-  }
-}
-
 a {
-	color: $link-color;
-	text-decoration: none;
-
+  color: $link-color;
+  text-decoration: none;
   // Gets rid of tap active state
   -webkit-tap-highlight-color: transparent;
 }
 
-
 // Positioning
 .valign-wrapper {
   display: flex;
   align-items: center;
 }
 
-
 // classic clearfix
 .clearfix {
   clear: both;
 }
 
-
 // Z-levels
 .z-depth-0 {
   box-shadow: none !important;
@@ -55,40 +39,41 @@ a {
 
 /* 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);
+  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 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);
 }
 
 /* 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);
+  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);
 }
 
 /* 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);
+  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);
 }
 
 /* 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);
+  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);
 }
 
 /* 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);
+  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 {
@@ -100,16 +85,14 @@ a {
 }
 
 // Dividers
-
 .divider {
   height: 1px;
   overflow: hidden;
-  background-color: color("grey", "lighten-2");
+  background-color: $divider-color;
 }
 
 
 //  Blockquote
-
 blockquote {
   margin: 20px 0;
   padding-left: 1.5rem;
@@ -117,7 +100,6 @@ blockquote {
 }
 
 // Icon Styles
-
 i {
   line-height: inherit;
 
@@ -125,19 +107,24 @@ i {
     float: left;
     margin-right: 15px;
   }
+
   &.right {
     float: right;
     margin-left: 15px;
   }
+
   &.tiny {
     font-size: 1rem;
   }
+
   &.small {
     font-size: 2rem;
   }
+
   &.medium {
     font-size: 4rem;
   }
+
   &.large {
     font-size: 6rem;
   }
@@ -150,9 +137,7 @@ video.responsive-video {
   height: auto;
 }
 
-
 // Pagination
-
 .pagination {
 
   li {
@@ -163,20 +148,29 @@ video.responsive-video {
     height: 30px;
 
     a {
-      color: #444;
+      color: $font-color-medium;
       display: inline-block;
       font-size: 1.2rem;
       padding: 0 10px;
       line-height: 30px;
     }
 
-    &.active a { color: #fff; }
+    &:hover:not(.disabled) {
+      background-color: $primary-color-hover-opaque;
+    }
+
+    &.active a {
+      color: $font-on-primary-color-main;
+    }
 
-    &.active { background-color: $primary-color; }
+    &.active,
+    &.active:hover {
+      background-color: $primary-color;
+    }
 
     &.disabled a {
       cursor: default;
-      color: #999;
+      color: $font-color-disabled;
     }
 
     i {
@@ -190,6 +184,7 @@ video.responsive-video {
     float: none;
   }
 }
+
 @media #{$medium-and-down} {
   .pagination {
     width: 100%;
@@ -211,19 +206,19 @@ video.responsive-video {
 .breadcrumb {
   display: inline-block;
   font-size: 18px;
-  color: rgba(255,255,255, .7);
+  color: $font-on-primary-color-medium;
 
   i,
   [class^="mdi-"], [class*="mdi-"],
   i.material-icons {
-    display: inline-block;
+    display: block;
     float: left;
     font-size: 24px;
   }
 
   &:before {
     content: '\E5CC';
-    color: rgba(255,255,255, .7);
+    color: $font-on-primary-color-medium;
     vertical-align: top;
     display: inline-block;
     font-family: 'Material Icons';
@@ -240,7 +235,7 @@ video.responsive-video {
   }
 
   &:last-child {
-    color: #fff;
+    color: $font-on-primary-color-main;
   }
 }
 
@@ -265,7 +260,7 @@ video.responsive-video {
       bottom: 0;
       min-width: 100%;
       min-height: 100%;
-      transform: translate3d(0,0,0);
+      transform: translate3d(0, 0, 0);
       transform: translateX(-50%);
     }
   }
@@ -275,6 +270,7 @@ video.responsive-video {
 .pin-top, .pin-bottom {
   position: relative;
 }
+
 .pinned {
   position: fixed !important;
 }
@@ -301,56 +297,67 @@ ul.staggered-list li {
     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-up) and (max-width: $medium-screen) {
     display: none !important;
   }
 }
+
 .hide-on-large-only {
   @media #{$large-and-up} {
     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: block !important;
   }
 }
+
 .show-on-medium {
   @media only screen and (min-width: $small-screen-up) and (max-width: $medium-screen) {
     display: block !important;
   }
 }
+
 .show-on-small {
   @media #{$small-and-down} {
     display: block !important;
   }
 }
+
 .show-on-medium-and-up {
   @media #{$medium-and-up} {
     display: block !important;
   }
 }
+
 .show-on-medium-and-down {
   @media #{$medium-and-down} {
     display: block !important;
@@ -371,7 +378,12 @@ ul.staggered-list li {
   color: $footer-font-color;
   background-color: $footer-bg-color;
 
-  .footer-copyright {
+  a {
+    color: $footer-font-color;
+  }
+
+  .footer-copyright,
+  .footer-copyright a {
     overflow: hidden;
     min-height: 50px;
     display: flex;
@@ -385,11 +397,11 @@ ul.staggered-list li {
 
 // Tables
 table, th, td {
-   border: none;
+  border: none;
 }
 
 table {
-  width:100%;
+  width: 100%;
   display: table;
   border-collapse: collapse;
   border-spacing: 0;
@@ -398,19 +410,23 @@ table {
     tr {
       border-bottom: none;
     }
-
-    > tbody > tr:nth-child(odd) {
+    tbody > tr:nth-child(odd) {
       background-color: $table-striped-color;
     }
   }
 
   &.highlight > tbody > tr {
     transition: background-color .25s ease;
+
     &:hover {
-      background-color: $table-striped-color;
+      background-color: $surface-hover-color-opaque;
     }
   }
 
+  thead {
+    color: $font-color-medium;
+  }
+
   &.centered {
     thead tr th, tbody tr td {
       text-align: center;
@@ -422,7 +438,7 @@ tr {
   border-bottom: 1px solid $table-border-color;
 }
 
-td, th{
+td, th {
   padding: 15px 5px;
   display: table-cell;
   text-align: left;
@@ -450,7 +466,10 @@ td, th{
       vertical-align: top;
     }
 
-    th { text-align: left; }
+    th {
+      text-align: left;
+    }
+
     thead {
       display: block;
       float: left;
@@ -464,6 +483,7 @@ td, th{
         }
       }
     }
+
     tbody {
       display: block;
       width: auto;
@@ -476,15 +496,18 @@ td, th{
         vertical-align: top;
       }
     }
+
     th {
       display: block;
       text-align: right;
     }
+
     td {
       display: block;
       min-height: 1.25em;
       text-align: left;
     }
+
     tr {
       border-bottom: none;
       padding: 0 10px;
@@ -502,30 +525,31 @@ td, th{
 
 // Responsive Videos
 .video-container {
-    position: relative;
-    padding-bottom: 56.25%;
-    height: 0;
-    overflow: hidden;
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
 
-    iframe, object, embed {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
+  iframe, object, embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 // Progress Bar
 .progress {
-    position: relative;
-    height: 4px;
-    display: block;
-    width: 100%;
-    background-color: lighten($progress-bar-color, 40%);
-    border-radius: 2px;
-    margin: $element-top-margin 0 $element-bottom-margin 0;
-    overflow: hidden;
+  position: relative;
+  height: 4px;
+  display: block;
+  width: 100%;
+  background-color: $progress-bar-track-color;
+  border-radius: 2px;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  overflow: hidden;
+
   .determinate {
     position: absolute;
     top: 0;
@@ -534,26 +558,29 @@ td, th{
     background-color: $progress-bar-color;
     transition: width .3s linear;
   }
+
   .indeterminate {
     background-color: $progress-bar-color;
+
     &:before {
       content: '';
       position: absolute;
       background-color: inherit;
       top: 0;
-      left:0;
+      left: 0;
       bottom: 0;
       will-change: left, right;
       // Custom bezier
       animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
 
     }
+
     &:after {
       content: '';
       position: absolute;
       background-color: inherit;
       top: 0;
-      left:0;
+      left: 0;
       bottom: 0;
       will-change: left, right;
       // Custom bezier
@@ -562,34 +589,35 @@ td, th{
     }
   }
 }
+
 @keyframes indeterminate {
-    0% {
-      left: -35%;
-      right:100%;
-    }
-    60% {
-      left: 100%;
-      right: -90%;
-    }
-    100% {
-      left: 100%;
-      right: -90%;
-    }
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
 }
 
 @keyframes indeterminate-short {
-    0% {
-      left: -200%;
-      right: 100%;
-    }
-    60% {
-      left: 107%;
-      right: -8%;
-    }
-    100% {
-      left: 107%;
-      right: -8%;
-    }
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
 }
 
 
@@ -600,7 +628,6 @@ td, th{
 .hide {
   display: none !important;
 }
-
 // Text Align
 .left-align {
   text-align: left;
@@ -611,36 +638,30 @@ td, th{
 .center, .center-align {
   text-align: center;
 }
-
 .left {
   float: left !important;
 }
 .right {
   float: right !important;
 }
-
 // No Text Select
 .no-select {
   user-select: none;
 }
-
 .circle {
   border-radius: 50%;
 }
-
 .center-block {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
-
 .truncate {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
 .no-padding {
   padding: 0 !important;
 }