materialize-sass 0.97.8 → 1.0.0.1

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

@@ -22,10 +22,7 @@
     display: flex;
 
     .tab {
-      -webkit-box-flex: 1;
-      -webkit-flex-grow: 1;
-          -ms-flex-positive: 1;
-              flex-grow: 1;
+      flex-grow: 1;
     }
   }
 
@@ -48,6 +45,12 @@
     text-transform: uppercase;
 
     a {
+      &:focus,
+      &:focus.active {
+        background-color: transparentize($tabs-underline-color, .8);
+        outline: none;
+      }
+
       &:hover,
       &.active {
         background-color: transparent;
@@ -62,12 +65,12 @@
       font-size: 14px;
       text-overflow: ellipsis;
       overflow: hidden;
-      transition: color .28s ease;
+      transition: color .28s ease, background-color .28s ease;
     }
 
     &.disabled a,
     &.disabled a:hover {
-      color: rgba($tabs-text-color, .7);
+      color: rgba($tabs-text-color, .4);
       cursor: default;
     }
   }
@@ -80,15 +83,12 @@
   }
 }
 
-// Fixed sideNav hide on smaller
+// Fixed Sidenav hide on smaller
 @media #{$medium-and-down} {
   .tabs {
     display: flex;
 
     .tab {
-      -webkit-box-flex: 1;
-      -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
       flex-grow: 1;
 
       a {

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

@@ -0,0 +1,103 @@
+.tap-target-wrapper {
+  width: 800px;
+  height: 800px;
+  position: fixed;
+  z-index: 1000;
+  visibility: hidden;
+  transition: visibility 0s .3s;
+}
+
+.tap-target-wrapper.open {
+  visibility: visible;
+  transition: visibility 0s;
+
+  .tap-target {
+    transform: scale(1);
+    opacity: .95;
+    transition:
+      transform .3s cubic-bezier(.42,0,.58,1),
+      opacity .3s cubic-bezier(.42,0,.58,1);
+  }
+
+  .tap-target-wave::before {
+    transform: scale(1);
+  }
+  .tap-target-wave::after {
+    visibility: visible;
+    animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+    transition:
+      opacity .3s,
+      transform .3s,
+      visibility 0s 1s;
+  }
+}
+
+.tap-target {
+  position: absolute;
+  font-size: 1rem;
+  border-radius: 50%;
+  background-color: $primary-color;
+  box-shadow: 0 20px 20px 0 rgba(0,0,0,0.14), 0 10px 50px 0 rgba(0,0,0,0.12), 0 30px 10px -20px rgba(0,0,0,0.2);
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transform: scale(0);
+  transition:
+    transform .3s cubic-bezier(.42,0,.58,1),
+    opacity .3s cubic-bezier(.42,0,.58,1);
+}
+
+.tap-target-content {
+  position: relative;
+  display: table-cell;
+}
+
+.tap-target-wave {
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #ffffff;
+  }
+  &::before {
+    transform: scale(0);
+    transition: transform .3s;
+  }
+  &::after {
+    visibility: hidden;
+    transition:
+      opacity .3s,
+      transform .3s,
+      visibility 0s;
+    z-index: -1;
+  }
+
+  position: absolute;
+  border-radius: 50%;
+  z-index: 10001;
+}
+
+.tap-target-origin {
+  &:not(.btn),
+  &:not(.btn):hover {
+    background: none;
+  }
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+
+  z-index: 10002;
+  position: absolute !important;
+}
+
+@media only screen and (max-width: 600px) {
+  .tap-target, .tap-target-wrapper {
+    width: 600px;
+    height: 600px;
+  }
+}

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

@@ -0,0 +1,183 @@
+/* Timepicker Containers */
+.timepicker-modal {
+  max-width: 325px;
+  max-height: none;
+}
+
+.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 auto;
+  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 auto;
+}
+
+.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/_toast.scss

@@ -22,28 +22,28 @@
 .toast {
   @extend .z-depth-1;
   border-radius: 2px;
-  top: 0;
+  top: 35px;
   width: auto;
-  clear: both;
   margin-top: 10px;
   position: relative;
   max-width:100%;
   height: auto;
   min-height: $toast-height;
   line-height: 1.5em;
-  word-break: break-all;
   background-color: $toast-color;
   padding: 10px 25px;
   font-size: 1.1rem;
   font-weight: 300;
   color: $toast-text-color;
-
   display: flex;
   align-items: center;
   justify-content: space-between;
+  cursor: default;
 
-  .btn, .btn-flat {
-    margin: 0;
+  .toast-action {
+    color: $toast-action-color;
+    font-weight: 500;
+    margin-right: -25px;
     margin-left: 3rem;
   }
 
@@ -52,14 +52,7 @@
   }
 
   @media #{$small-and-down} {
-    width:100%;
+    width: 100%;
     border-radius: 0;
   }
-  @media #{$medium-only} {
-    float: left;
-  }
-  @media #{$large-and-up} {
-    float: right;
-  }
-
 }

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

@@ -8,7 +8,6 @@
   min-height: 36px;
   line-height: 120%;
   opacity: 0;
-  display: none;
   position: absolute;
   text-align: center;
   max-width: calc(100% - 4px);
@@ -16,17 +15,18 @@
   left: 0;
   top: 0;
   pointer-events: none;
+  visibility: hidden;
+  background-color: #323232;
 }
 
 .backdrop {
   position: absolute;
   opacity: 0;
-  display: none;
   height: 7px;
   width: 14px;
   border-radius: 0 0 50% 50%;
   background-color: #323232;
   z-index: -1;
   transform-origin: 50% 0%;
-  transform: translate3d(0,0,0);
+  visibility: hidden;
 }

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

@@ -0,0 +1,13 @@
+// Scale transition
+.scale-transition {
+  &.scale-out {
+    transform: scale(0);
+    transition: transform .2s !important;
+  }
+
+  &.scale-in {
+    transform: scale(1);
+  }
+
+  transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+}

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; }
@@ -45,7 +45,6 @@ small { font-size: 75%; }
 
 
 .flow-text{
-  font-weight: 300;
   $i: 0;
   @while $i <= $intervals {
     @media only screen and (min-width : 360 + ($i * $interval-size)) {