material-sass 1.1.0 → 1.3.0

data/app/assets/stylesheets/material/components/_button.scss

@@ -46,15 +46,15 @@
 	&:focus:after {
 		opacity: 1;
 	}
-	&.waves-attach:after {
+	&.waves-attach:active:after {
 		background-color: transparent;
 	}
 	&.disabled,
 	&[disabled],
 	fieldset[disabled] & {
-		box-shadow: none !important;
+		box-shadow: none;
 		cursor: not-allowed;
-		opacity: 0.78;
+		opacity: 0.54;
 		&:after {
 			display: none;
 		}
@@ -70,12 +70,7 @@
 
 		.btn-#{$color} {
 			background-color: nth($palette-list-color, $i);
-			color: nth($palette-list-text, $i);
-			&:active,
-			&:focus,
-			&:hover {
-				color: nth($palette-list-text, $i);
-			}
+			color: nth($palette-list-text, $i) !important;
 		}
 	}
 

data/app/assets/stylesheets/material/components/_card.scss

@@ -1,19 +1,15 @@
 .card {
 	background-color: $white;
 	border-radius: 2px;
-	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 3px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.18);
-	display: block;
+	box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
 	display: flex;
 	margin-top: $margin-md;
 	margin-bottom: $margin-md;
-	position: relative;
 	&[href]:focus,
 	&[href]:hover {
+		outline: 0;
 		text-decoration: none;
 	}
-	.card-wrap & {
-		margin-top: 0;
-	}
 }
 
 // colour
@@ -34,10 +30,11 @@
 .card-action {
 	border-top: 1px solid $black-divider;
 	min-height: $nav-height;
-	position: relative;
 	@include clearfix();
-	&:first-child {
-		border-top: 0;
+	.card-main > & {
+		&:first-child {
+			border-top: 0;
+		}
 	}
 }
 
@@ -50,19 +47,20 @@
 }
 
 .card-header {
+	align-items: center;
 	border-bottom: 1px solid $black-divider;
 	display: flex;
 	min-height: $header-height;
-	position: relative;
-	&:last-child {
-		border-bottom: 0;
+	.card-main > & {
+		&:last-child {
+			border-bottom: 0;
+		}
 	}
 }
 
 .card-header-side {
-	min-width: 0;
-	padding-top: (($header-height - $line-height) / 2);
-	padding-bottom: (($header-height - $line-height) / 2);
+	margin-top: $margin-sm;
+	margin-bottom: $margin-sm;
 	&.pull-left {
 		order: -1;
 		padding-left: $grid-gutter;
@@ -89,11 +87,13 @@
 	display: block;
 	overflow: hidden;
 	position: relative;
-	&:first-child {
-		border-radius: 2px 2px 0 0;
-	}
-	&:last-child {
-		border-radius: 0 0 2px 2px;
+	.card-main > & {
+		&:first-child {
+			border-radius: 2px 2px 0 0;
+		}
+		&:last-child {
+			border-radius: 0 0 2px 2px;
+		}
 	}
 	img {
 		display: block;
@@ -104,28 +104,33 @@
 }
 
 .card-img-heading {
-	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
 	color: $white-text-solid;
-	font-size: $font-size-h4;
-	line-height: $line-height-h4;
 	margin: 0;
 	padding: $margin-sm $grid-gutter;
 	position: absolute;
 		bottom: 0;
 		left: 0;
 	width: 100%;
+	z-index: 1;
+	&:before {
+		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.2));
+		content: "";
+		display: block;
+		height: 300%;
+		position: absolute;
+			bottom: 0;
+			left: 0;
+		width: 100%;
+		z-index: -1;
+	}
 }
 
 .card-inner {
 	margin: $margin-md $grid-gutter;
-	min-width: 0;
-	position: relative;
 	.card-header & {
 		flex: 1;
-		font-size: $font-size-h5;
-		line-height: $line-height-h5;
-		margin-top: (($header-height - $line-height-h5) / 2);
-		margin-bottom: (($header-height - $line-height-h5) / 2);
+		margin-top: $margin-sm;
+		margin-bottom: $margin-sm;
 	}
 }
 
@@ -144,6 +149,7 @@
 		color: inherit;
 		&:focus,
 		&:hover {
+			outline: 0;
 			text-decoration: none;
 		}
 	}
@@ -167,9 +173,3 @@
 			color: nth($palette-list-text-dark, $i);
 		}
 	}
-
-.card-wrap {
-	margin-top: $margin-md;
-	margin-bottom: ($margin-md * -1);
-	@include clearfix();
-}

data/app/assets/stylesheets/material/components/_dropdown.scss

@@ -36,8 +36,7 @@
 		transform: scale(1, 1);
 	}
 	&.dropdown-menu-right,
-	.dropdown.pull-right &,
-	.nav.pull-right & {
+	.dropdown.pull-right & {
 		border-radius: 2px 0 2px 2px;
 		// position
 			right: 0;
@@ -87,17 +86,10 @@
 			left: 0;
 		transform: scale(1, 0);
 		&.dropdown-menu-right,
-		.dropdown.pull-right &,
-		.nav.pull-right & {
+		.dropdown.pull-right & {
 			// position
 				right: 0;
 				left: auto;
 		}
 	}
 }
-
-.dropdown-wrap {
-	margin-top: $line-height;
-	margin-bottom: $line-height;
-	@include clearfix();
-}

data/app/assets/stylesheets/material/components/{_form-adv-label.scss → _form-floating-label.scss}

@@ -32,7 +32,9 @@
 	.form-control {
 		position: relative;
 		z-index: 1;
-		@include placeholder(transparent);
+		&::placeholder {
+			color: transparent;
+		}
 	}
 	legend + & {
 		margin-top: ($margin-md / 2);

data/app/assets/stylesheets/material/components/_form.scss

@@ -51,13 +51,15 @@
 	line-height: $line-height;
 	padding: (($input-height - $line-height) / 2) 0 (($input-height - $line-height) / 2 - 1);
 	width: 100%;
-	@include placeholder($black-hint);
 	&:focus {
 		border-color: $link-color;
 		border-bottom-width: 2px;
 		outline: 0;
 		padding-bottom: (($input-height - $line-height) / 2 - 2);
 	}
+	&::placeholder {
+		color: $black-hint;
+	}
 	&[disabled],
 	&[readonly],
 	fieldset[disabled] & {

data/app/assets/stylesheets/material/components/_nav.scss

@@ -6,8 +6,10 @@
 	@include clearfix();
 	a,
 	.a {
-		display: block;
-		padding: (($nav-height - $line-height) / 2) $grid-gutter;
+		align-items: center;
+		display: flex;
+		min-height: $nav-height;
+		padding: 0 $grid-gutter;
 		position: relative;
 		&:focus,
 		&:hover {
@@ -37,6 +39,7 @@
 		flex-grow: 1;
 		> a,
 		> .a {
+			justify-content: center;
 			text-align: center;
 		}
 	}

data/app/assets/stylesheets/material/components/{_form-adv-datepicker.scss → _picker.scss}

@@ -5,17 +5,12 @@
 }
 
 .picker__box {
-	border-radius: 4px;
-	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5);
-	display: flex;
-	flex-direction: column;
-	outline: 0;
-	position: relative;
-	vertical-align: middle;
-	z-index: 1;
+	background-color: $white;
+	border-radius: 0 0 4px 4px;
+	flex: 1;
 	// 992
 		@include responsive(md) {
-			flex-direction: row;
+			border-radius: 0 4px 4px 0;
 		}
 }
 
@@ -35,6 +30,9 @@
 .picker__date-display-bottom {
 	font-size: $font-size-h2;
 	line-height: $line-height-h2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .picker__date-display-top {
@@ -42,16 +40,6 @@
 	margin-bottom: $margin-base;
 }
 
-.picker__date-inner {
-	background-color: $white;
-	border-radius: 0 0 4px 4px;
-	flex: 1;
-	// 992
-		@include responsive(md) {
-			border-radius: 0 4px 4px 0;
-		}
-}
-
 .picker__day {
 	border-radius: 50%;
 	display: inline-block;
@@ -289,5 +277,22 @@
 	// 992
 		@include responsive(md) {
 			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+}
+
+.picker__wrap {
+	border-radius: 4px;
+	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5);
+	display: flex;
+	flex-direction: column;
+	outline: 0;
+	position: relative;
+	vertical-align: middle;
+	z-index: 1;
+	// 992
+		@include responsive(md) {
+			flex-direction: row;
 		}
 }

data/app/assets/stylesheets/material/components/_snackbar.scss

@@ -3,7 +3,7 @@
 		right: 0;
 		bottom: 0;
 		left: 0;
-	z-index: ($content-base + 1);
+	z-index: ($top-base + 1);
 	a {
 		cursor: pointer;
 		&:focus,
@@ -46,12 +46,11 @@
 }
 
 .snackbar-text {
-	overflow: hidden;
+	min-width: 0;
 }
 
 [data-dismiss="snackbar"] {
 	cursor: pointer;
-	float: right;
 	font-weight: $font-weight-medium;
 	margin-left: $grid-gutter;
 	order: 1;

data/app/assets/stylesheets/material/components/_tab.scss

@@ -7,25 +7,30 @@
 		margin-top: 0 !important;
 		margin-bottom: 0 !important;
 		> li {
-			vertical-align: bottom;
 			> a,
 			> .a {
-				border-bottom: 2px solid transparent;
 				color: inherit;
-				padding-bottom: (($nav-height - $line-height) / 2 - 2);
 				text-transform: uppercase;
-				transition: border-bottom-color 0s;
-				&:focus,
-				&:hover {
-					border-bottom-color: lighten($link-color, 30%);
-					transition: border-bottom-color 0.3s $timing;
+				&:after {
+					border-bottom: 2px solid $brand-color-accent;
+					content: "";
+					display: block;
+					opacity: 0;
+					position: absolute;
+						bottom: 0;
+						left: 0;
+					transition: opacity 0.3s $timing;
+					width: 100%;
+				}
+				&:focus:after,
+				&:hover:after {
+					opacity: 0.3;
 				}
 			}
-			&.active > a,
-			&.active > .a {
-				border-bottom-color: $brand-color-accent;
-				color: $brand-color-accent;
-				transition: border-bottom-color 0s 0.45s;
+			&.active > a:after,
+			&.active > .a:after {
+				opacity: 1;
+				transition: opacity 0s 0.45s;
 			}
 		}
 	}
@@ -56,16 +61,10 @@
 					> li {
 						> a,
 						> .a {
-							&:focus,
-							&:hover {
-								border-bottom-color: nth($palette-list-light, $i);
+							&:after {
+								border-bottom-color: nth($palette-list-color, $i);
 							}
 						}
-						&.active > a,
-						&.active > .a {
-							border-bottom-color: nth($palette-list-color, $i);
-							color: nth($palette-list-color, $i);
-						}
 					}
 				}
 				.tab-nav-indicator.animate {

data/app/assets/stylesheets/material/components/_tile.scss

@@ -1,17 +1,16 @@
 .tile {
 	background-color: $white;
-	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 3px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.18);
-	display: block;
+	box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
 	display: flex;
 	min-height: $tile-height;
-	position: relative;
 	&[href]:focus,
 	&[href]:hover {
+		outline: 0;
 		text-decoration: none;
 	}
 	&.active {
-		margin-top: $margin-md !important;
-		margin-bottom: $margin-md !important;
+		margin-top: $margin-md;
+		margin-bottom: $margin-md;
 	}
 }
 
@@ -31,10 +30,7 @@
 	}
 
 .tile-action {
-	@extend .card-action;
-	border-top: 0;
-	float: right;
-	min-width: 0;
+	min-height: $tile-height;
 	order: 1;
 	user-select: none;
 	html.no-touchevents & {
@@ -46,11 +42,12 @@
 }
 
 .tile-action-show {
-	display: block !important;
+	html.no-touchevents & {
+		display: block;
+	}
 }
 
 .tile-active-show {
-	min-height: 0;
 	&.collapsing {
 		transition: height 0.15s linear;
 	}
@@ -63,21 +60,27 @@
 		margin-right: ($grid-gutter / -2);
 		margin-left: ($grid-gutter / -2);
 	}
+	> [data-toggle="tile"] {
+		cursor: pointer;
+		display: flex;
+		flex: 1;
+		[data-ignore="tile"] {
+			cursor: default;
+			cursor: initial;
+		}
+	}
 }
 
 .tile-collapse-full {
-	// 1056 - 1439
-		@media only screen and (min-width: ($grid-gutter * 4 + $screen-md)) and (max-width: ($screen-lg - 1)) {
-			&.active {
-				margin-right: ($grid-gutter * -4 + 1);
-				margin-left: ($grid-gutter * -4 + 1);
-			}
-		}
-	// 1504
-		@media only screen and (min-width: ($grid-gutter * 4 + $screen-lg)) {
+	&.active {
+		margin-right: calc(-50vw + 50% + 2px);
+		margin-left: calc(-50vw + 50% + 2px);
+	}
+	// 992
+		@include responsive(md) {
 			&.active {
-				margin-right: ($grid-gutter * -4 + 1);
-				margin-left: ($grid-gutter * -4 + 1);
+				margin-right: calc(-50vw + 50% + #{$grid-gutter});
+				margin-left: calc(-50vw + 50% + #{$grid-gutter});
 			}
 		}
 }
@@ -85,10 +88,13 @@
 .tile-footer {
 	background-color: $offwhite-solid;
 	border-top: 1px solid $black-divider;
-	position: relative;
+	min-height: $nav-height;
 	@include clearfix();
-	&:first-child {
-		border-top: 0;
+	.tile > &,
+	.tile-active-show > & {
+		&:first-child {
+			border-top: 0;
+		}
 	}
 }
 
@@ -103,27 +109,35 @@
 	}
 
 .tile-footer-btn {
-	@extend .card-action-btn;
+	margin: (($nav-height - $btn-height) / 2) ($grid-gutter / 2);
+	white-space: nowrap;
+	.btn + .btn {
+		margin-left: ($grid-gutter / 2);
+	}
 }
 
 .tile-inner {
 	flex: 1;
 	margin: (($tile-height - $line-height) / 2) $grid-gutter;
 	min-width: 0;
-	position: relative;
 }
 
 .tile-side {
-	@extend .card-header-side;
-	padding-top: (($tile-height - $line-height) / 2);
-	padding-bottom: (($tile-height - $line-height) / 2);
+	align-self: center;
+	&.pull-left {
+		order: -1;
+		margin-left: $grid-gutter;
+	}
+	&.pull-right {
+		order: 1;
+		margin-right: $grid-gutter;
+	}
 }
 
 .tile-sub {
 	border-top: 1px solid $black-divider;
 	padding-right: $grid-gutter;
 	padding-left: $grid-gutter;
-	position: relative;
 	@include clearfix();
 }
 
@@ -139,17 +153,4 @@
 .tile-wrap {
 	margin-top: $margin-md;
 	margin-bottom: $margin-md;
-	position: relative;
-}
-
-div[data-toggle="tile"] {
-	cursor: pointer;
-	display: block;
-	display: flex;
-	flex: 1;
-	min-height: 0;
-	[data-ignore="tile"] {
-		cursor: default;
-		cursor: initial;
-	}
 }