materialize-sass 0.100.2.1 → 1.0.0.alpha1

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

@@ -1,4 +1,4 @@
-.side-nav {
+.sidenav {
   position: fixed;
   width: 300px;
   left: 0;
@@ -92,8 +92,7 @@
     line-height: $sidenav-line-height;
   }
 
-  .user-view,
-  .userView {
+  .user-view {
     position: relative;
     padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
     margin-bottom: $sidenav-padding / 2;
@@ -144,6 +143,11 @@
 
 // Touch interaction
 .drag-target {
+  // Right Align
+  &.right-aligned {
+    right: 0;
+  }
+
   height: 100%;
   width: 10px;
   position: fixed;
@@ -152,23 +156,23 @@
 }
 
 
-// Fixed side-nav shown
-.side-nav.fixed {
-  left: 0;
-  transform: translateX(0);
-  position: fixed;
-
+// Fixed Sidenav shown
+.sidenav.sidenav-fixed {
   // Right Align
   &.right-aligned {
     right: 0;
     left: auto;
   }
+
+  left: 0;
+  transform: translateX(0);
+  position: fixed;
 }
 
-// Fixed sideNav hide on smaller
+// Fixed Sidenav hide on smaller
 @media #{$medium-and-down} {
-  .side-nav {
-    &.fixed {
+  .sidenav {
+    &.sidenav-fixed {
       transform: translateX(-105%);
 
       &.right-aligned {
@@ -180,35 +184,33 @@
       padding: 0 $sidenav-padding;
     }
 
-    .user-view,
-    .userView {
+    .user-view {
       padding: $sidenav-padding $sidenav-padding 0;
     }
   }
 }
 
 
-.side-nav .collapsible-body > ul:not(.collapsible) > li.active,
-.side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
+.sidenav .collapsible-body > ul:not(.collapsible) > li.active,
+.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
   background-color: $primary-color;
   a {
     color: $sidenav-bg-color;
   }
 }
-.side-nav .collapsible-body {
+.sidenav .collapsible-body {
   padding: 0;
 }
 
 
-#sidenav-overlay {
+.sidenav-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-
+  opacity: 0;
   height: 120vh;
   background-color: rgba(0,0,0,.5);
   z-index: 997;
-
-  will-change: opacity;
+  display: none;
 }

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

@@ -13,7 +13,7 @@
     display: inline-block;
     font-weight: 300;
     color: #757575;
-    padding-left: 20px;
+    padding-left: 16px;
     height: 1.5rem;
     line-height: 1.5rem;
     letter-spacing: .4;
@@ -21,12 +21,12 @@
 
     &:hover {
       color: lighten(#757575, 20%);
-      padding-left: 19px;
+      padding-left: 15px;
       border-left: 1px solid $primary-color;
     }
     &.active {
       font-weight: 500;
-      padding-left: 18px;
+      padding-left: 14px;
       border-left: 2px solid $primary-color;
     }
   }

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

@@ -64,7 +64,7 @@
 
     &.disabled a,
     &.disabled a:hover {
-      color: rgba($tabs-text-color, .7);
+      color: rgba($tabs-text-color, .4);
       cursor: default;
     }
   }
@@ -77,7 +77,7 @@
   }
 }
 
-// Fixed sideNav hide on smaller
+// Fixed Sidenav hide on smaller
 @media #{$medium-and-down} {
   .tabs {
     display: flex;

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

@@ -0,0 +1,182 @@
+/* Timepicker Containers */
+.timepicker-modal {
+  max-width: 325px;
+}
+
+.timepicker-container.modal-content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.text-primary {
+	color: rgba(255, 255, 255, 1);
+}
+
+
+/* Clock Digital Display */
+.timepicker-digital-display {
+  flex: 1;
+  background-color: $secondary-color;
+  padding: 10px;
+  font-weight: 300;
+}
+
+.timepicker-text-container {
+	font-size: 4rem;
+	font-weight: bold;
+	text-align: center;
+	color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+	position: relative;
+  user-select: none;
+}
+
+.timepicker-span-hours,
+.timepicker-span-minutes,
+.timepicker-span-am-pm div {
+	cursor: pointer;
+}
+
+.timepicker-span-hours {
+  margin-right: 3px;
+}
+
+.timepicker-span-minutes {
+  margin-left: 3px;
+}
+
+.timepicker-display-am-pm {
+  font-size: 1.3rem;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  font-weight: 400;
+}
+
+
+/* Analog Clock Display */
+.timepicker-analog-display {
+  flex: 2.5;
+}
+
+.timepicker-plate {
+	background-color: $timepicker-clock-plate-bg;
+	border-radius: 50%;
+	width: 270px;
+	height: 270px;
+	overflow: visible;
+	position: relative;
+  margin: auto;
+  margin-top: 25px;
+  margin-bottom: 5px;
+	user-select: none;
+}
+
+.timepicker-canvas,
+.timepicker-dial {
+	position: absolute;
+	left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.timepicker-minutes {
+	visibility: hidden;
+}
+
+.timepicker-tick {
+	border-radius: 50%;
+	color: $timepicker-clock-color;
+	line-height: 40px;
+	text-align: center;
+	width: 40px;
+	height: 40px;
+	position: absolute;
+	cursor: pointer;
+  font-size: 15px;
+}
+
+.timepicker-tick.active,
+.timepicker-tick:hover {
+	background-color: transparentize($secondary-color, .75);
+}
+.timepicker-dial {
+	transition: transform 350ms, opacity 350ms;
+}
+.timepicker-dial-out {
+  &.timepicker-hours {
+	  transform: scale(1.1, 1.1);
+  }
+
+  &.timepicker-minutes {
+	  transform: scale(.8, .8);
+  }
+
+	opacity: 0;
+}
+.timepicker-canvas {
+	transition: opacity 175ms;
+
+  line {
+	  stroke: $secondary-color;
+	  stroke-width: 4;
+	  stroke-linecap: round;
+  }
+}
+.timepicker-canvas-out {
+	opacity: 0.25;
+}
+.timepicker-canvas-bearing {
+	stroke: none;
+	fill: $secondary-color;
+}
+.timepicker-canvas-bg {
+	stroke: none;
+	fill: $secondary-color;
+}
+
+
+/* Footer */
+.timepicker-footer {
+  margin: 0 auto;
+  padding: 5px 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.timepicker-clear {
+  color: $error-color;
+}
+
+.timepicker-close {
+  color: $secondary-color;
+}
+
+.timepicker-clear,
+.timepicker-close {
+  padding: 0 20px;
+}
+
+/* Media Queries */
+@media #{$medium-and-up} {
+  .timepicker-modal {
+    max-width: 600px;
+  }
+
+  .timepicker-container.modal-content {
+    flex-direction: row;
+  }
+
+  .timepicker-text-container {
+		top: 32%;
+	}
+
+	.timepicker-display-am-pm {
+	  position: relative;
+	  right: auto;
+	  bottom: auto;
+	  text-align: center;
+	  margin-top: 1.2rem;
+	}
+}

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

@@ -16,6 +16,7 @@
   top: 0;
   pointer-events: none;
   visibility: hidden;
+  background-color: #323232;
 }
 
 .backdrop {

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

@@ -18,23 +18,23 @@ html{
     font-size: 15px;
   }
 
-  font-family: "Roboto", sans-serif;
+  font-family: $font-stack;
   font-weight: normal;
   color: $off-black;
 }
 h1, h2, h3, h4, h5, h6 {
 	font-weight: 400;
-	line-height: 1.1;
+	line-height: 1.3;
 }
 
 // Header Styles
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
-h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 2) 0 ($h1-fontsize / 2.5) 0;}
-h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;}
-h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;}
-h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;}
-h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;}
-h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 2) 0 ($h6-fontsize / 2.5) 0;}
+h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 1.5) 0 ($h1-fontsize / 2.5) 0;}
+h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 1.5) 0 ($h2-fontsize / 2.5) 0;}
+h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 1.5) 0 ($h3-fontsize / 2.5) 0;}
+h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 1.5) 0 ($h4-fontsize / 2.5) 0;}
+h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 1.5) 0 ($h5-fontsize / 2.5) 0;}
+h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 1.5) 0 ($h6-fontsize / 2.5) 0;}
 
 // Text Styles
 em { font-style: italic; }

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

@@ -13,22 +13,21 @@
 //  7. Chips
 //  8. Date + Time Picker
 //  9. Dropdown
-//  10. Fonts
-//  11. Forms
-//  12. Global
-//  13. Grid
-//  14. Navigation Bar
-//  15. Side Navigation
-//  16. Photo Slider
-//  17. Spinners | Loaders
-//  18. Tabs
-//  19. Tables
-//  20. Toasts
-//  21. Typography
-//  22. Footer
-//  23. Flow Text
-//  24. Collections
-//  25. Progress Bar
+//  10. Forms
+//  11. Global
+//  12. Grid
+//  13. Navigation Bar
+//  14. Side Navigation
+//  15. Photo Slider
+//  16. Spinners | Loaders
+//  17. Tabs
+//  18. Tables
+//  19. Toasts
+//  20. Typography
+//  21. Footer
+//  22. Flow Text
+//  23. Collections
+//  24. Progress Bar
 
 
 
@@ -129,6 +128,7 @@ $chip-margin: 5px !default;
 // ==========================================================================
 
 $datepicker-display-font-size: 2.8rem;
+$datepicker-calendar-header-color: #999;
 $datepicker-weekday-color: rgba(0, 0, 0, .87) !default;
 $datepicker-weekday-bg: darken($secondary-color, 7%) !default;
 $datepicker-date-bg: $secondary-color !default;
@@ -136,9 +136,11 @@ $datepicker-year: rgba(255, 255, 255, .7) !default;
 $datepicker-focus: rgba(0,0,0, .05) !default;
 $datepicker-selected: $secondary-color !default;
 $datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
+$datepicker-day-focus: transparentize(desaturate($secondary-color, 5%), .75) !default;
+$datepicker-disabled-day-color: rgba(0, 0, 0, .3) !default;
 
 $timepicker-clock-color: rgba(0, 0, 0, .87) !default;
-$timepicker-clock-plate-bg: #eee;
+$timepicker-clock-plate-bg: #eee !default;
 
 
 // 9. Dropdown
@@ -150,13 +152,7 @@ $dropdown-color: $secondary-color !default;
 $dropdown-item-height: 50px !default;
 
 
-// 10. Fonts
-// ==========================================================================
-
-$roboto-font-path: "roboto/" !default;
-
-
-// 11. Forms
+// 10. Forms
 // ==========================================================================
 
 // Text Inputs + Textarea
@@ -168,7 +164,7 @@ $input-error-color: $error-color !default;
 $input-success-color: $success-color !default;
 $input-focus-color: $secondary-color !default;
 $input-font-size: 1rem !default;
-$input-margin-bottom: 20px;
+$input-margin-bottom: 8px;
 $input-margin: 0 0 $input-margin-bottom 0 !default;
 $input-padding: 0 !default;
 $input-transition: all .3s !default;
@@ -193,8 +189,9 @@ $track-height: 3px !default;
 $select-border: 1px solid #f2f2f2 !default;
 $select-background: rgba(255, 255, 255, 0.90) !default;
 $select-focus: 1px solid lighten($secondary-color, 47%) !default;
-$select-option-hover: rgba(0,0,0,.06) !default;
-$select-option-focus: rgba(0,0,0,.03) !default;
+$select-option-hover: rgba(0,0,0,.08) !default;
+$select-option-focus: rgba(0,0,0,.08) !default;
+$select-option-selected: rgba(0,0,0,.03) !default;
 $select-padding: 5px !default;
 $select-radius: 2px !default;
 $select-disabled-color: rgba(0,0,0,.3) !default;
@@ -207,7 +204,7 @@ $switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
 $switch-radius: 15px !default;
 
 
-// 12. Global
+// 11. Global
 // ==========================================================================
 
 // Media Query Ranges
@@ -226,7 +223,7 @@ $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
 $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
 
 
-// 13. Grid
+// 12. Grid
 // ==========================================================================
 
 $num-cols: 12 !default;
@@ -235,7 +232,7 @@ $element-top-margin: $gutter-width/3 !default;
 $element-bottom-margin: ($gutter-width*2)/3 !default;
 
 
-// 14. Navigation Bar
+// 13. Navigation Bar
 // ==========================================================================
 
 $navbar-height: 64px !default;
@@ -246,7 +243,7 @@ $navbar-font-size: 1rem !default;
 $navbar-font-color: #fff !default;
 $navbar-brand-font-size: 2.1rem !default;
 
-// 15. Side Navigation
+// 14. Side Navigation
 // ==========================================================================
 
 $sidenav-font-size: 14px !default;
@@ -257,7 +254,7 @@ $sidenav-item-height: 48px !default;
 $sidenav-line-height: $sidenav-item-height !default;
 
 
-// 16. Photo Slider
+// 15. Photo Slider
 // ==========================================================================
 
 $slider-bg-color: color('grey', 'base') !default;
@@ -265,13 +262,13 @@ $slider-bg-color-light: color('grey', 'lighten-2') !default;
 $slider-indicator-color: color('green', 'base') !default;
 
 
-// 17. Spinners | Loaders
+// 16. Spinners | Loaders
 // ==========================================================================
 
 $spinner-default-color: $secondary-color !default;
 
 
-// 18. Tabs
+// 17. Tabs
 // ==========================================================================
 
 $tabs-underline-color: $primary-color-light !default;
@@ -279,14 +276,14 @@ $tabs-text-color: $primary-color !default;
 $tabs-bg-color: #fff !default;
 
 
-// 19. Tables
+// 18. Tables
 // ==========================================================================
 
-$table-border-color: #d0d0d0 !default;
-$table-striped-color: #f2f2f2 !default;
+$table-border-color: rgba(0,0,0,.12) !default;
+$table-striped-color: rgba(242, 242, 242, 0.5) !default;
 
 
-// 20. Toasts
+// 19. Toasts
 // ==========================================================================
 
 $toast-height: 48px !default;
@@ -295,9 +292,10 @@ $toast-text-color: #fff !default;
 $toast-action-color: #eeff41;
 
 
-// 21. Typography
+// 20. Typography
 // ==========================================================================
 
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
 $off-black: rgba(0, 0, 0, 0.87) !default;
 // Header Styles
 $h1-fontsize: 4.2rem !default;
@@ -305,10 +303,10 @@ $h2-fontsize: 3.56rem !default;
 $h3-fontsize: 2.92rem !default;
 $h4-fontsize: 2.28rem !default;
 $h5-fontsize: 1.64rem !default;
-$h6-fontsize: 1rem !default;
+$h6-fontsize: 1.15rem !default;
 
 
-// 22. Footer
+// 21. Footer
 // ==========================================================================
 
 $footer-font-color: #fff !default;
@@ -317,7 +315,7 @@ $footer-copyright-font-color: rgba(255,255,255,.8) !default;
 $footer-copyright-bg-color: rgba(51,51,51,.08) !default;
 
 
-// 23. Flow Text
+// 22. Flow Text
 // ==========================================================================
 
 $range : $large-screen - $small-screen !default;
@@ -325,7 +323,7 @@ $intervals: 20 !default;
 $interval-size: $range / $intervals !default;
 
 
-// 24. Collections
+// 23. Collections
 // ==========================================================================
 
 $collection-border-color: #e0e0e0 !default;
@@ -337,7 +335,7 @@ $collection-link-color: $secondary-color !default;
 $collection-line-height: 1.5rem !default;
 
 
-// 25. Progress Bar
+// 24. Progress Bar
 // ==========================================================================
 
 $progress-bar-color: $secondary-color !default;