materialize-sass 0.97.0 → 1.0.0.1

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

@@ -0,0 +1,90 @@
+.chip {
+  &:focus {
+    outline: none;
+    background-color: $chip-selected-color;
+    color: #fff;
+  }
+
+  display: inline-block;
+  height: 32px;
+  font-size: 13px;
+  font-weight: 500;
+  color: rgba(0,0,0,.6);
+  line-height: 32px;
+  padding: 0 12px;
+  border-radius: 16px;
+  background-color: $chip-bg-color;
+  margin-bottom: $chip-margin;
+  margin-right: $chip-margin;
+
+  > img {
+    float: left;
+    margin: 0 8px 0 -12px;
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+  }
+
+  .close {
+    cursor: pointer;
+    float: right;
+    font-size: 16px;
+    line-height: 32px;
+    padding-left: 8px;
+  }
+}
+
+.chips {
+  border: none;
+  border-bottom: 1px solid $chip-border-color;
+  box-shadow: none;
+  margin: $input-margin;
+  min-height: 45px;
+  outline: none;
+  transition: all .3s;
+
+  &.focus {
+    border-bottom: 1px solid $chip-selected-color;
+    box-shadow: 0 1px 0 0 $chip-selected-color;
+  }
+
+  &:hover {
+    cursor: text;
+  }
+
+  .input {
+    background: none;
+    border: 0;
+    color: rgba(0,0,0,.6);
+    display: inline-block;
+    font-size: $input-font-size;
+    height: $input-height;
+    line-height: 32px;
+    outline: 0;
+    margin: 0;
+    padding: 0 !important;
+    width: 120px !important;
+  }
+
+  .input:focus {
+    border: 0 !important;
+    box-shadow: none !important;
+  }
+
+  // Autocomplete
+  .autocomplete-content {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+// Form prefix
+.prefix ~ .chips {
+  margin-left: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+.chips:empty ~ label  {
+  font-size: 0.8rem;
+  transform: translateY(-140%);
+}

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

@@ -7,38 +7,40 @@
 }
 
 .collapsible-header {
-  display: block;
+  &:focus {
+    outline: 0
+  }
+
+  display: flex;
   cursor: pointer;
-  height: $collapsible-height;
-  line-height: $collapsible-height;
-  padding: 0 1rem;
+  -webkit-tap-highlight-color: transparent;
+  line-height: 1.5;
+  padding: 1rem;
   background-color: $collapsible-header-color;
   border-bottom: 1px solid $collapsible-border-color;
 
   i {
     width: 2rem;
     font-size: 1.6rem;
-    line-height: $collapsible-height;
-    display: block;
-    float: left;
+    display: inline-block;
     text-align: center;
     margin-right: 1rem;
   }
 }
+.keyboard-focused .collapsible-header:focus {
+  background-color: #eee;
+}
 
 .collapsible-body {
   display: none;
   border-bottom: 1px solid $collapsible-border-color;
-  @include box-sizing(border-box);
-
-  p {
-    margin: 0;
-    padding: 2rem;
-  }
+  box-sizing: border-box;
+  padding: 2rem;
 }
 
-// sideNav collapsible styling
-.side-nav {
+// Sidenav collapsible styling
+.sidenav,
+.sidenav.sidenav-fixed {
 
   .collapsible {
     border: none;
@@ -52,8 +54,9 @@
     border: none;
     line-height: inherit;
     height: inherit;
-    margin: 0 1rem;
+    padding: 0 $sidenav-padding;
 
+    &:hover { background-color: rgba(0,0,0,.05); }
     i { line-height: inherit; }
   }
 
@@ -61,7 +64,10 @@
     border: 0;
     background-color: $collapsible-header-color;
 
-    li a { margin: 0 1rem 0 2rem; }
+    li a {
+      padding: 0 (7.5px + $sidenav-padding)
+               0 (15px + $sidenav-padding);
+    }
   }
 
 }

data/assets/stylesheets/materialize/components/_color-classes.scss

@@ -0,0 +1,32 @@
+// Color Classes
+
+@each $color_name, $color in $colors {
+  @each $color_type, $color_value in $color {
+    @if $color_type == "base" {
+      .#{$color_name} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text {
+        color: $color_value !important;
+      }
+    }
+    @else if $color_name != "shades" {
+      .#{$color_name}.#{$color_type} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text.text-#{$color_type} {
+        color: $color_value !important;
+      }
+    }
+  }
+}
+
+// Shade classes
+@each $color, $color_value in $shades {
+  .#{$color} {
+    background-color: $color_value !important;
+  }
+  .#{$color}-text {
+    color: $color_value !important;
+  }
+}

data/{app/assets/stylesheets/materialize/components/_color.scss → assets/stylesheets/materialize/components/_color-variables.scss}

@@ -1,19 +1,12 @@
-// Utility Color Classes
-
-//.success {
-//
-//}
-
 // Google Color Palette defined: http://www.google.com/design/spec/style/color.html
 
-
 $materialize-red: (
+  "base":       #e51c23,
   "lighten-5":  #fdeaeb,
   "lighten-4":  #f8c1c3,
   "lighten-3":  #f3989b,
   "lighten-2":  #ee6e73,
   "lighten-1":  #ea454b,
-  "base":       #e51c23,
   "darken-1":   #d0181e,
   "darken-2":   #b9151b,
   "darken-3":   #a21318,
@@ -21,12 +14,12 @@ $materialize-red: (
 );
 
 $red: (
+  "base":       #F44336,
   "lighten-5":  #FFEBEE,
   "lighten-4":  #FFCDD2,
   "lighten-3":  #EF9A9A,
   "lighten-2":  #E57373,
   "lighten-1":  #EF5350,
-  "base":       #F44336,
   "darken-1":   #E53935,
   "darken-2":   #D32F2F,
   "darken-3":   #C62828,
@@ -38,12 +31,12 @@ $red: (
 );
 
 $pink: (
+  "base":       #e91e63,
   "lighten-5":  #fce4ec,
   "lighten-4":  #f8bbd0,
   "lighten-3":  #f48fb1,
   "lighten-2":  #f06292,
   "lighten-1":  #ec407a,
-  "base":       #e91e63,
   "darken-1":   #d81b60,
   "darken-2":   #c2185b,
   "darken-3":   #ad1457,
@@ -55,12 +48,12 @@ $pink: (
 );
 
 $purple: (
+  "base":       #9c27b0,
   "lighten-5":  #f3e5f5,
   "lighten-4":  #e1bee7,
   "lighten-3":  #ce93d8,
   "lighten-2":  #ba68c8,
   "lighten-1":  #ab47bc,
-  "base":       #9c27b0,
   "darken-1":   #8e24aa,
   "darken-2":   #7b1fa2,
   "darken-3":   #6a1b9a,
@@ -72,12 +65,12 @@ $purple: (
 );
 
 $deep-purple: (
+  "base":       #673ab7,
   "lighten-5":  #ede7f6,
   "lighten-4":  #d1c4e9,
   "lighten-3":  #b39ddb,
   "lighten-2":  #9575cd,
   "lighten-1":  #7e57c2,
-  "base":       #673ab7,
   "darken-1":   #5e35b1,
   "darken-2":   #512da8,
   "darken-3":   #4527a0,
@@ -89,12 +82,12 @@ $deep-purple: (
 );
 
 $indigo: (
+  "base":       #3f51b5,
   "lighten-5":  #e8eaf6,
   "lighten-4":  #c5cae9,
   "lighten-3":  #9fa8da,
   "lighten-2":  #7986cb,
   "lighten-1":  #5c6bc0,
-  "base":       #3f51b5,
   "darken-1":   #3949ab,
   "darken-2":   #303f9f,
   "darken-3":   #283593,
@@ -106,12 +99,12 @@ $indigo: (
 );
 
 $blue: (
+  "base":       #2196F3,
   "lighten-5":  #E3F2FD,
   "lighten-4":  #BBDEFB,
   "lighten-3":  #90CAF9,
   "lighten-2":  #64B5F6,
   "lighten-1":  #42A5F5,
-  "base":       #2196F3,
   "darken-1":   #1E88E5,
   "darken-2":   #1976D2,
   "darken-3":   #1565C0,
@@ -123,12 +116,12 @@ $blue: (
 );
 
 $light-blue: (
+  "base":       #03a9f4,
   "lighten-5":  #e1f5fe,
   "lighten-4":  #b3e5fc,
   "lighten-3":  #81d4fa,
   "lighten-2":  #4fc3f7,
   "lighten-1":  #29b6f6,
-  "base":       #03a9f4,
   "darken-1":   #039be5,
   "darken-2":   #0288d1,
   "darken-3":   #0277bd,
@@ -140,12 +133,12 @@ $light-blue: (
 );
 
 $cyan: (
+  "base":       #00bcd4,
   "lighten-5":  #e0f7fa,
   "lighten-4":  #b2ebf2,
   "lighten-3":  #80deea,
   "lighten-2":  #4dd0e1,
   "lighten-1":  #26c6da,
-  "base":       #00bcd4,
   "darken-1":   #00acc1,
   "darken-2":   #0097a7,
   "darken-3":   #00838f,
@@ -157,12 +150,12 @@ $cyan: (
 );
 
 $teal: (
+  "base":       #009688,
   "lighten-5":  #e0f2f1,
   "lighten-4":  #b2dfdb,
   "lighten-3":  #80cbc4,
   "lighten-2":  #4db6ac,
   "lighten-1":  #26a69a,
-  "base":       #009688,
   "darken-1":   #00897b,
   "darken-2":   #00796b,
   "darken-3":   #00695c,
@@ -174,12 +167,12 @@ $teal: (
 );
 
 $green: (
+  "base":       #4CAF50,
   "lighten-5":  #E8F5E9,
   "lighten-4":  #C8E6C9,
   "lighten-3":  #A5D6A7,
   "lighten-2":  #81C784,
   "lighten-1":  #66BB6A,
-  "base":       #4CAF50,
   "darken-1":   #43A047,
   "darken-2":   #388E3C,
   "darken-3":   #2E7D32,
@@ -191,12 +184,12 @@ $green: (
 );
 
 $light-green: (
+  "base":       #8bc34a,
   "lighten-5":  #f1f8e9,
   "lighten-4":  #dcedc8,
   "lighten-3":  #c5e1a5,
   "lighten-2":  #aed581,
   "lighten-1":  #9ccc65,
-  "base":       #8bc34a,
   "darken-1":   #7cb342,
   "darken-2":   #689f38,
   "darken-3":   #558b2f,
@@ -208,12 +201,12 @@ $light-green: (
 );
 
 $lime: (
+  "base":       #cddc39,
   "lighten-5":  #f9fbe7,
   "lighten-4":  #f0f4c3,
   "lighten-3":  #e6ee9c,
   "lighten-2":  #dce775,
   "lighten-1":  #d4e157,
-  "base":       #cddc39,
   "darken-1":   #c0ca33,
   "darken-2":   #afb42b,
   "darken-3":   #9e9d24,
@@ -225,12 +218,12 @@ $lime: (
 );
 
 $yellow: (
+  "base":       #ffeb3b,
   "lighten-5":  #fffde7,
   "lighten-4":  #fff9c4,
   "lighten-3":  #fff59d,
   "lighten-2":  #fff176,
   "lighten-1":  #ffee58,
-  "base":       #ffeb3b,
   "darken-1":   #fdd835,
   "darken-2":   #fbc02d,
   "darken-3":   #f9a825,
@@ -242,12 +235,12 @@ $yellow: (
 );
 
 $amber: (
+  "base":       #ffc107,
   "lighten-5":  #fff8e1,
   "lighten-4":  #ffecb3,
   "lighten-3":  #ffe082,
   "lighten-2":  #ffd54f,
   "lighten-1":  #ffca28,
-  "base":       #ffc107,
   "darken-1":   #ffb300,
   "darken-2":   #ffa000,
   "darken-3":   #ff8f00,
@@ -259,12 +252,12 @@ $amber: (
 );
 
 $orange: (
+  "base":       #ff9800,
   "lighten-5":  #fff3e0,
   "lighten-4":  #ffe0b2,
   "lighten-3":  #ffcc80,
   "lighten-2":  #ffb74d,
   "lighten-1":  #ffa726,
-  "base":       #ff9800,
   "darken-1":   #fb8c00,
   "darken-2":   #f57c00,
   "darken-3":   #ef6c00,
@@ -276,12 +269,12 @@ $orange: (
 );
 
 $deep-orange: (
+  "base":       #ff5722,
   "lighten-5":  #fbe9e7,
   "lighten-4":  #ffccbc,
   "lighten-3":  #ffab91,
   "lighten-2":  #ff8a65,
   "lighten-1":  #ff7043,
-  "base":       #ff5722,
   "darken-1":   #f4511e,
   "darken-2":   #e64a19,
   "darken-3":   #d84315,
@@ -293,12 +286,12 @@ $deep-orange: (
 );
 
 $brown: (
+  "base":       #795548,
   "lighten-5":  #efebe9,
   "lighten-4":  #d7ccc8,
   "lighten-3":  #bcaaa4,
   "lighten-2":  #a1887f,
   "lighten-1":  #8d6e63,
-  "base":       #795548,
   "darken-1":   #6d4c41,
   "darken-2":   #5d4037,
   "darken-3":   #4e342e,
@@ -306,12 +299,12 @@ $brown: (
 );
 
 $blue-grey: (
+  "base":       #607d8b,
   "lighten-5":  #eceff1,
   "lighten-4":  #cfd8dc,
   "lighten-3":  #b0bec5,
   "lighten-2":  #90a4ae,
   "lighten-1":  #78909c,
-  "base":       #607d8b,
   "darken-1":   #546e7a,
   "darken-2":   #455a64,
   "darken-3":   #37474f,
@@ -319,12 +312,12 @@ $blue-grey: (
 );
 
 $grey: (
+  "base":       #9e9e9e,
   "lighten-5":  #fafafa,
   "lighten-4":  #f5f5f5,
   "lighten-3":  #eeeeee,
   "lighten-2":  #e0e0e0,
   "lighten-1":  #bdbdbd,
-  "base":       #9e9e9e,
   "darken-1":   #757575,
   "darken-2":   #616161,
   "darken-3":   #424242,
@@ -359,41 +352,7 @@ $colors: (
   "blue-grey": $blue-grey,
   "grey": $grey,
   "shades": $shades
-);
-
-
-// Color Classes
-
-@each $color_name, $color in $colors {
-  @each $color_type, $color_value in $color {
-    @if $color_type == "base" {
-      .#{$color_name} {
-        background-color: $color_value !important;
-      }
-      .#{$color_name}-text {
-        color: $color_value !important;
-      }
-    }
-    @else {
-      .#{$color_name}.#{$color_type} {
-        background-color: $color_value !important;
-      }
-      .#{$color_name}-text.text-#{$color_type} {
-        color: $color_value !important;
-      }
-    }
-  }
-}
-
-// Shade classes
-@each $color, $color_value in $shades {
-  .#{$color} {
-    background-color: $color_value !important;
-  }
-  .#{$color}-text {
-    color: $color_value !important;
-  }
-}
+) !default;
 
 
 // usage: color("name_of_color", "type_of_color")
@@ -406,7 +365,6 @@ $colors: (
       @return map-get($curr_color, $type);
     }
   }
-  @warn "Unknown `#{$color} #{$type}` in $colors.";
+  @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
   @return null;
 }
-

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;
+  }
+}