materialize-sass 0.100.2.1 → 1.0.0.alpha1

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

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 
-// Colors
+// Mixins
+@import "materialize/components/mixins";
 @import "materialize/components/color";
 
 // Variables;
@@ -15,7 +16,6 @@
 @import "materialize/components/icons-material-design";
 @import "materialize/components/grid";
 @import "materialize/components/navbar";
-@import "materialize/components/roboto";
 @import "materialize/components/typography";
 @import "materialize/components/transitions";
 @import "materialize/components/cards";
@@ -31,12 +31,11 @@
 @import "materialize/components/materialbox";
 @import "materialize/components/forms/forms";
 @import "materialize/components/table_of_contents";
-@import "materialize/components/sideNav";
+@import "materialize/components/sidenav";
 @import "materialize/components/preloader";
 @import "materialize/components/slider";
 @import "materialize/components/carousel";
 @import "materialize/components/tapTarget";
 @import "materialize/components/pulse";
-@import "materialize/components/date_picker/default";
-@import "materialize/components/date_picker/default.date";
-@import "materialize/components/date_picker/default.time";
+@import "materialize/components/datepicker";
+@import "materialize/components/timepicker";

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

@@ -42,6 +42,6 @@ nav ul a span.badge {
 .collapsible span.badge {
   margin-left: auto;
 }
-.side-nav span.badge {
+.sidenav span.badge {
   margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
 }

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

@@ -150,7 +150,9 @@ button.btn-floating {
     }
   }
 
-  &.horizontal {
+  // Directions
+  &.direction-left,
+  &.direction-right {
     padding: 0 0 0 15px;
 
     ul {
@@ -164,7 +166,37 @@ button.btn-floating {
 
       li {
         display: inline-block;
-        margin: 15px 15px 0 0;
+        margin: 7.5px 15px 0 0;
+      }
+    }
+  }
+
+  &.direction-right {
+    padding: 0 15px 0 0;
+
+    ul {
+      text-align: left;
+      direction: rtl;
+      left: 64px;
+      right: auto;
+
+      li {
+        margin: 7.5px 0 0 15px;
+      }
+    }
+  }
+
+  &.direction-bottom {
+    padding: 0 0 15px 0;
+
+    ul {
+      top: 64px;
+      bottom: auto;
+      display: flex;
+      flex-direction: column-reverse;
+
+      li {
+        margin: 15px 0 0 0;
       }
     }
   }

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

@@ -44,7 +44,7 @@
   transform-origin: 0% 50%;
 
   .carousel-item {
-    display: none;
+    visibility: hidden;
     width: $carousel-item-width;
     height: $carousel-item-height;
     position: absolute;

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

@@ -1,4 +1,10 @@
 .chip {
+  &:focus {
+    outline: none;
+    background-color: $chip-selected-color;
+    color: #fff;
+  }
+
   display: inline-block;
   height: 32px;
   font-size: 13px;
@@ -46,11 +52,6 @@
     cursor: text;
   }
 
-  .chip.selected {
-    background-color: $chip-selected-color;
-    color: #fff;
-  }
-
   .input {
     background: none;
     border: 0;

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

@@ -31,9 +31,9 @@
   padding: 2rem;
 }
 
-// sideNav collapsible styling
-.side-nav,
-.side-nav.fixed {
+// Sidenav collapsible styling
+.sidenav,
+.sidenav.fixed {
 
   .collapsible {
     border: none;

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

@@ -0,0 +1,180 @@
+/* Modal */
+.datepicker-modal {
+  max-width: 325px;
+  min-width: 300px;
+}
+
+.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: 70px;
+  }
+}
+
+.month-prev, .month-next {
+  margin-top: 4px;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+
+/* Date Display */
+.datepicker-date-display {
+  flex: 1;
+  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;
+}
+
+.datepicker-table {
+  width: 280px;
+  font-size: 1rem;
+  margin: 0 auto;
+
+  thead {
+    border-bottom: none;
+  }
+
+  th {
+    padding: 10px 5px;
+    text-align: center;
+  }
+
+  abbr {
+    text-decoration: none;
+    color: $datepicker-calendar-header-color;
+  }
+
+  td {
+    &.is-selected {
+      background-color: $secondary-color;
+      color: #fff;
+    }
+
+    &.is-today {
+      color: $secondary-color;
+    }
+
+    &.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%;
+  cursor: pointer;
+  color: inherit;
+}
+
+
+/* Footer */
+.datepicker-footer {
+  width: 280px;
+  margin: 0 auto;
+  padding-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.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-controls,
+  .datepicker-table,
+  .datepicker-footer {
+    width: 320px;
+  }
+
+  .datepicker-day-button {
+    line-height: 44px;
+  }
+}

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

@@ -4,29 +4,21 @@
   margin: 0;
   display: none;
   min-width: 100px;
-  max-height: 650px;
   overflow-y: auto;
   opacity: 0;
   position: absolute;
   z-index: 999;
-  will-change: width, height;
+  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;
+      background-color: darken($dropdown-hover-bg-color, 8%);
     }
 
     &.divider {
@@ -56,6 +48,15 @@
       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;
   }
 }
 
@@ -64,5 +65,5 @@
   top: 1px;
   left: 0;
   height: 18px;
+  transform: none;
 }
-

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

@@ -17,6 +17,14 @@ main {
   // flex: 1 0 auto;
 }
 
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: $font-stack;
+}
+
 ul {
   &:not(.browser-default) {
     padding-left: 0;
@@ -54,23 +62,43 @@ 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 {
@@ -239,7 +267,7 @@ video.responsive-video {
     z-index: -1;
 
     img {
-      display: none;
+      opacity: 0;
       position: absolute;
       left: 50%;
       bottom: 0;
@@ -346,10 +374,10 @@ ul.staggered-list li {
     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;
-    @extend .light;
   }
 }
 
@@ -361,19 +389,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: 0;
+    > tbody {
+      > tr:nth-child(odd) {
+        background-color: $table-striped-color;
+      }
+
+      > tr > td {
+        border-radius: 0;
+      }
     }
   }
 
@@ -389,10 +425,9 @@ table {
       text-align: center;
     }
   }
-
 }
 
-thead {
+tr {
   border-bottom: 1px solid $table-border-color;
 }