materialize-sass 0.97.8 → 1.0.0.1

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

@@ -0,0 +1,191 @@
+/* Modal */
+.datepicker-modal {
+  max-width: 325px;
+  min-width: 300px;
+  max-height: none;
+}
+
+.datepicker-container.modal-content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.datepicker-controls {
+  display: flex;
+  justify-content: space-between;
+  width: 280px;
+  margin: 0 auto;
+
+  .selects-container {
+    display: flex;
+  }
+
+  .select-wrapper {
+    input {
+      &:focus {
+        border-bottom: none;
+      }
+      border-bottom: none;
+      text-align: center;
+      margin: 0;
+    }
+
+    .caret {
+      display: none;
+    }
+  }
+
+  .select-year input {
+    width: 50px;
+  }
+
+  .select-month input {
+    width: 80px;
+  }
+}
+
+.month-prev, .month-next {
+  margin-top: 4px;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+
+/* Date Display */
+.datepicker-date-display {
+  flex: 1 auto;
+  background-color: $secondary-color;
+  color: #fff;
+  padding: 20px 22px;
+  font-weight: 500;
+
+  .year-text {
+    display: block;
+    font-size: 1.5rem;
+    line-height: 25px;
+    color: $datepicker-year;
+  }
+
+  .date-text {
+    display: block;
+    font-size: 2.8rem;
+    line-height: 47px;
+    font-weight: 500;
+  }
+}
+
+
+/* Calendar */
+.datepicker-calendar-container {
+  flex: 2.5 auto;
+}
+
+.datepicker-table {
+  width: 280px;
+  font-size: 1rem;
+  margin: 0 auto;
+
+  thead {
+    border-bottom: none;
+  }
+
+  th {
+    padding: 10px 5px;
+    text-align: center;
+  }
+
+  tr {
+    border: none;
+  }
+
+  abbr {
+    text-decoration: none;
+    color: $datepicker-calendar-header-color;
+  }
+
+  td {
+    &.is-today {
+      color: $secondary-color;
+    }
+
+    &.is-selected {
+      background-color: $secondary-color;
+      color: #fff;
+    }
+
+    &.is-outside-current-month,
+    &.is-disabled {
+      color: $datepicker-disabled-day-color;
+      pointer-events: none;
+    }
+
+    border-radius: 50%;
+    padding: 0;
+  }
+}
+
+.datepicker-day-button {
+  &:focus {
+    background-color: $datepicker-day-focus;
+  }
+
+  background-color: transparent;
+  border: none;
+  line-height: 38px;
+  display: block;
+  width: 100%;
+  border-radius: 50%;
+  padding: 0 5px;
+  cursor: pointer;
+  color: inherit;
+}
+
+
+/* Footer */
+.datepicker-footer {
+  width: 280px;
+  margin: 0 auto;
+  padding-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.datepicker-cancel,
+.datepicker-clear,
+.datepicker-today,
+.datepicker-done {
+  color: $secondary-color;
+  padding: 0 1rem;
+}
+
+.datepicker-clear {
+  color: $error-color;
+}
+
+
+/* Media Queries */
+@media #{$medium-and-up} {
+  .datepicker-modal {
+    max-width: 625px;
+  }
+
+  .datepicker-container.modal-content {
+    flex-direction: row;
+  }
+
+  .datepicker-date-display {
+    flex: 0 1 270px;
+  }
+
+  .datepicker-controls,
+  .datepicker-table,
+  .datepicker-footer {
+    width: 320px;
+  }
+
+  .datepicker-day-button {
+    line-height: 44px;
+  }
+}

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

@@ -1,32 +1,30 @@
 .dropdown-content {
+  &:focus {
+    outline: 0;
+  }
+
+
   @extend .z-depth-1;
   background-color: $dropdown-bg-color;
   margin: 0;
   display: none;
   min-width: 100px;
-  max-height: 650px;
   overflow-y: auto;
   opacity: 0;
   position: absolute;
-  z-index: 999;
-  will-change: width, height;
+  left: 0;
+  top: 0;
+  z-index: 9999; // TODO: Check if this doesn't break other things
+  transform-origin: 0 0;
 
-  li {
-    clear: both;
-    color: $off-black;
-    cursor: pointer;
-    min-height: $dropdown-item-height;
-    line-height: 1.5rem;
-    width: 100%;
-    text-align: left;
-    text-transform: none;
 
-    &:hover, &.active, &.selected {
+  li {
+    &:hover, &.active {
       background-color: $dropdown-hover-bg-color;
     }
 
-    &.active.selected {
-      background-color: darken($dropdown-hover-bg-color, 5%);
+    &:focus {
+      outline: none;
     }
 
     &.divider {
@@ -52,7 +50,25 @@
     & > 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%);
   }
 }
 
@@ -61,5 +77,9 @@
   top: 1px;
   left: 0;
   height: 18px;
+  transform: none;
 }
 
+.dropdown-trigger {
+  cursor: pointer;
+}

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

@@ -17,12 +17,20 @@ main {
   // flex: 1 0 auto;
 }
 
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: $font-stack;
+}
+
 ul {
   &:not(.browser-default) {
     padding-left: 0;
     list-style-type: none;
 
-    li {
+    & > li {
       list-style-type: none;
     }
   }
@@ -41,10 +49,6 @@ a {
 .valign-wrapper {
   display: flex;
   align-items: center;
-
-  .valign {
-    display: block;
-  }
 }
 
 
@@ -58,33 +62,51 @@ a {
 .z-depth-0 {
   box-shadow: none !important;
 }
+
+/* 2dp elevation modified*/
 .z-depth-1 {
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px 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 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.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);
 }
+
+/* 16dp elevation */
 .z-depth-4 {
-  box-shadow: 0 8px 10px 1px 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.3);
+  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 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
+  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 {
   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);
+  &:hover {
+    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  }
 }
 
 // Dividers
@@ -197,6 +219,7 @@ video.responsive-video {
 
 // Breadcrumbs
 .breadcrumb {
+  display: inline-block;
   font-size: 18px;
   color: rgba(255,255,255, .7);
 
@@ -219,6 +242,7 @@ video.responsive-video {
     font-size: 25px;
     margin: 0 10px 0 8px;
     -webkit-font-smoothing: antialiased;
+    float: left;
   }
 
   &:first-child:before {
@@ -230,32 +254,30 @@ video.responsive-video {
   }
 }
 
-
 // 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%);
+    }
   }
 }
 
@@ -309,6 +331,16 @@ 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: block !important;
@@ -344,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;
   }
 }
 
@@ -367,19 +401,22 @@ 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: 0;
+    > tbody {
+      > tr:nth-child(odd) {
+        background-color: $table-striped-color;
+      }
+
+      > tr > td {
+        border-radius: 0;
+      }
     }
   }
 
@@ -395,10 +432,9 @@ table {
       text-align: center;
     }
   }
-
 }
 
-thead {
+tr {
   border-bottom: 1px solid $table-border-color;
 }
 
@@ -465,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; }
-    }
-
   }
 
 }
@@ -495,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;
@@ -506,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;
@@ -592,63 +625,6 @@ td, th{
 
 
 
-// Badges
-span.badge {
-  min-width: 3rem;
-  padding: 0 6px;
-  margin-left: 14px;
-  text-align: center;
-  font-size: 1rem;
-  line-height: inherit;
-  color: color('grey', 'darken-1');
-  float: right;
-  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";
-  }
-
-  &[data-badge-caption]::after {
-    content: " " attr(data-badge-caption);
-  }
-}
-nav ul a span.badge {
-  display: inline-block;
-  float: none;
-  margin-left: 4px;
-  line-height: 22px;
-  height: 22px;
-}
-.side-nav span.badge.new,
-.collapsible span.badge.new {
-  &::before {
-    content: '';
-    position: absolute;
-    top: 10px;
-    right: 0;
-    bottom: 10px;
-    left: 0;
-    background-color: $badge-bg-color;
-    border-radius: 2px;
-    z-index: -1;
-  }
-
-  position: relative;
-  background-color: transparent;
-}
-.collapsible span.badge.new {
-  z-index: 1;
-}
-
-
-
 // Responsive Videos
 .video-container {
     position: relative;
@@ -770,11 +746,6 @@ nav ul a 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;
 }