material-sass 0.0.3 → 0.0.4

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

@@ -1,29 +1,34 @@
 .tab-nav {
-	border-bottom: 1px solid $black-hint;
+	box-shadow: 0 1px 0 $black-bg;
 	margin-top: $line-height;
 	margin-bottom: $line-height;
 	position: relative;
 	.nav {
-		margin-top: 0;
-		margin-bottom: -1px;
+		margin-top: 0 !important;
+		margin-bottom: 0 !important;
 		> li {
 			vertical-align: bottom;
-			> a {
+			> a,
+			> .a {
+				border-bottom: 2px solid transparent;
 				color: $black-text;
 				padding-right: ($grid-gutter / 2);
+				padding-bottom: ($line-height / 2 - 2);
 				padding-left: ($grid-gutter / 2);
 				text-transform: uppercase;
-				@include transition(border-bottom 0s, padding-bottom 0s);
+				transition: border-bottom-color 0s;
 				&:focus,
 				&:hover {
+					border-bottom-color: lighten($link-color, 30%);
 					color: $link-color;
+					transition: border-bottom-color 0.3s $timing;
 				}
 			}
-			&.active > a {
-				border-bottom: 3px solid $link-color;
+			&.active > a,
+			&.active > .a {
+				border-bottom-color: $link-color;
 				color: $link-color;
-				padding-bottom: ($line-height / 2 - 3);
-				@include transition(border-bottom 0s 0.45s, padding-bottom 0s 0.45s);
+				transition: border-bottom-color 0s 0.45s;
 			}
 		}
 	}
@@ -31,29 +36,56 @@
 
 .tab-nav-indicator {
 	background-color: $link-color;
-	height: 3px;
+	height: 2px;
 	position: absolute;
-		bottom: -1px;
-	@include transition(left 0.3s $timing 0.15s, right 0.3s $timing);
+		bottom: 0;
+	transition: left 0.3s $timing 0.15s, right 0.3s $timing;
 	&.reverse {
-		@include transition(left 0.3s $timing, right 0.3s $timing 0.15s);
+		transition: left 0.3s $timing, right 0.3s $timing 0.15s;
 	}
 }
 
 // colour
+	.tab-nav-offwhite {
+		.nav {
+			> li {
+				> a,
+				> .a {
+					color: $white;
+					&:focus,
+					&:hover {
+						border-bottom-color: rgba(255, 255, 255, 0.5);
+						color: $white;
+					}
+				}
+				&.active > a,
+				&.active > .a {
+					border-bottom-color: $white;
+					color: $white;
+				}
+			}
+		}
+		.tab-nav-indicator {
+			background-color: $white;
+		}
+	}
+
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
-		
+
 		.tab-nav-#{$color} {
 			.nav {
 				> li {
-					> a {
+					> a,
+					> .a {
 						&:focus,
 						&:hover {
+							border-bottom-color: nth($palette-color-light, $i);
 							color: nth($palette-color, $i);
 						}
 					}
-					&.active > a {
+					&.active > a,
+					&.active > .a {
 						border-bottom-color: nth($palette-color, $i);
 						color: nth($palette-color, $i);
 					}
@@ -72,4 +104,4 @@
 		display: block;
 		visibility: visible;
 	}
-}
+}

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

@@ -1,8 +1,8 @@
 .tile {
 	background-color: $white;
+	box-shadow: 0 -1px 0 $black-bg, 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15);
 	display: block;
 	position: relative;
-	@include box-shadow(0 -1px 0 $black-bg, 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15));
 	@include clearfix();
 	&[href] {
 		color: $black-text;
@@ -18,14 +18,13 @@
 	}
 	.tile-wrap-animation & {
 		opacity: 0;
-		@include transform(translate(0, 100%));
-		@include transition(all 0.6s $timing);
-		-webkit-transition-property: opacity, -webkit-transform;
-		        transition-property: opacity, transform;
+		transform: translate(0, 100%);
+		transition: all 0.6s $timing;
+		transition-property: opacity, transform;
 	}
 	.tile-wrap-animation.isinview & {
 		opacity: 1;
-		@include transform(translate(0, 0) !important);
+		transform: translate(0, 0) !important;
 	}
 	// no boxshadow
 		.no-boxshadow & {
@@ -57,7 +56,7 @@
 	@extend .card-action;
 	border-top: 0;
 	float: right;
-	@include user-select(none);
+	user-select: none;
 	.no-touch &,
 	.touch .tile-collapse & {
 		display: none;
@@ -73,19 +72,18 @@
 }
 
 .tile-active-show {
-	@include transition(height 0.15s linear);
+	transition: height 0.15s linear;
 }
 
 .tile-collapse {
-	@include transition(margin 0.15s linear);
+	transition: margin 0.15s linear;
 	&.active {
 		margin-right: ($grid-gutter * -1 + 1);
 		margin-left: ($grid-gutter * -1 + 1);
 	}
 	.tile-wrap-animation & {
-		@include transition(all 0.6s $timing, margin 0.15s linear);
-		-webkit-transition-property: margin, opacity, -webkit-transform;
-		        transition-property: margin, opacity, transform;
+		transition: all 0.6s $timing, margin 0.15s linear;
+		transition-property: margin, opacity, transform;
 	}
 }
 
@@ -192,4 +190,4 @@
 	margin-top: $line-height;
 	margin-bottom: $line-height;
 	position: relative;
-}
+}

data/app/assets/stylesheets/material/element/_toast.scss

@@ -27,19 +27,18 @@
 }
 
 .toast-inner {
+	backface-visibility: hidden;
 	background-color: $black-text;
+	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
 	color: $white;
 	font-size: floor($font-size * 0.9);
 	padding: ($line-height / 2) $grid-gutter;
-	@include backface(hidden);
-	@include box-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
+	transform: translate3d(0, 200%, 0);
+	transition: all 0.3s $timing;
+	transition-property: transform;
 	@include clearfix();
-	@include transform(translate3d(0, 200%, 0));
-	@include transition(all 0.3s $timing);
-	-webkit-transition-property: -webkit-transform;
-	        transition-property: transform;
 	.toast-show & {
-		@include transform(translate3d(0, 0, 0));
+		transform: translate3d(0, 0, 0);
 	}
 	// 768
 		@include responsive(sm) {
@@ -48,10 +47,10 @@
 		}
 	// no transform3d
 		.no-csstransforms3d & {
-			@include opacity(0);
+			opacity: 0;
 		}
 		.no-csstransforms3d .toast-show & {
-			@include opacity(1);
+			opacity: 1;
 		}
 }
 
@@ -62,7 +61,7 @@
 [data-dismiss="toast"] {
 	cursor: pointer;
 	float: right;
-	font-weight: 700;
+	font-weight: $font-weight-bold;
 	margin-left: $grid-gutter;
 	text-transform: uppercase;
-}
+}

data/app/assets/stylesheets/material/mixin/_css3.scss

@@ -1,30 +1,3 @@
-@mixin animation($animation...) {
-	-webkit-animation: $animation;
-	        animation: $animation;
-}
-
-@mixin backface($backface) {
-	-webkit-backface-visibility: $backface;
-	        backface-visibility: $backface;
-}
-
-@mixin box-shadow($shadow...) {
-	-webkit-box-shadow: $shadow;
-	        box-shadow: $shadow;
-}
-
-@mixin box-sizing($sizing) {
-	-webkit-box-sizing: $sizing;
-	   -moz-box-sizing: $sizing;
-	        box-sizing: $sizing;
-}
-
-@mixin opacity($alpha) {
-	opacity: $alpha;
-	$alpha-ie: ($alpha * 100);
-	filter: #{alpha(opacity=$alpha-ie)};
-}
-
 @mixin placeholder($color) {
 	&:-ms-input-placeholder {
 		color: $color;
@@ -37,21 +10,3 @@
 		color: $color;
 	}
 }
-
-@mixin transform($transform...) {
-	-webkit-transform: $transform;
-	    -ms-transform: $transform;
-	        transform: $transform;
-}
-
-@mixin transition($transition...) {
-	-webkit-transition: $transition;
-	        transition: $transition;
-}
-
-@mixin user-select($select) {
-	-webkit-user-select: $select;
-	   -moz-user-select: $select;
-	    -ms-user-select: $select;
-	        user-select: $select;
-}

data/app/assets/stylesheets/material/theme/_content.scss

@@ -12,10 +12,10 @@
 	padding-right: $grid-gutter;
 	padding-left: $grid-gutter;
 	.content-fix.fixed & {
+		backface-visibility: hidden;
 		position: fixed;
 			top: ($line-height * 2);
 			bottom: 0;
-		@include backface(hidden);
 	}
 }
 
@@ -41,28 +41,28 @@
 	overflow: hidden;
 	padding-top: ($line-height * 2);
 	position: relative;
+	transition: background-color 0.3s $timing, color 0.3s $timing;
 	z-index: 1;
-	@include transition(background-color 0.3s $timing, color 0.3s $timing);
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
-		
+
 		.page-#{$color} & {
 			background-color: nth($palette-color, $i);
 		}
 	}
 	.heading {
-		font-weight: 300;
+		font-weight: $font-weight-light;
 	}
 }
 
 .content-sub-heading {
 	color: $brand-color;
 	font-size: $font-size-h4;
-	font-weight: 400;
+	font-weight: $font-weight;
 	line-height: $line-height-h4;
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
-		
+
 		.page-#{$color} & {
 			color: nth($palette-color, $i);
 		}
@@ -71,4 +71,4 @@
 
 .row-fix {
 	position: relative;
-}
+}

data/app/assets/stylesheets/material/theme/_header.scss

@@ -1,71 +1,22 @@
 .header {
+	backface-visibility: hidden;
 	background-color: $brand-color;
 	color: $white;
 	position: fixed;
 		top: 0;
 		right: 0;
 		left: 0;
+	transition: background-color 0.3s $timing, box-shadow 0.15s linear;
 	z-index: $header-base;
-	@include backface(hidden);
 	@include clearfix();
-	@include transition(background-color 0.3s $timing, box-shadow 0.15s linear);
 	&.fixed,
-	&.open,
-	.menu-open & {
+	&.open {
 		background-color: $brand-color-dark-m;
-		@include box-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
+		box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
 	}
-	// colour
-		@each $color in $palette-list {
-			$i: index($palette-list, $color);
-			
-			.page-#{$color} & {
-				background-color: nth($palette-color, $i);
-				&.fixed,
-				&.open {
-					background-color: nth($palette-color-dark-m, $i);
-				}
-			}
-			.menu-open.page-#{$color} & {
-				background-color: nth($palette-color-dark-m, $i);
-			}
-		}
 	a {
 		color: $white;
 	}
-	.breadcrumb {
-		color: $white;
-		margin-top: 0;
-		margin-bottom: 0;
-		max-height: ($line-height * 2);
-		overflow: hidden;
-		padding-right: $grid-gutter;
-		padding-left: $grid-gutter;
-		a,
-		.a {
-			text-decoration: none;
-		}
-		> .active {
-			color: $white;
-			font-weight: 300;
-			> a,
-			> .a {
-				color: $white;
-			}
-		}
-		// 0 - 767
-			@include responsive("(max-width: #{$screen-sm - 1})") {
-				> li {
-					display: none;
-				}
-				> .active {
-					display: block;
-					&:before {
-						display: none;
-					}
-				}
-			}
-	}
 	.dropdown-menu {
 		border-radius: 2px;
 		a {
@@ -75,29 +26,20 @@
 	.dropdown-toggle {
 		z-index: 1;
 		&:after {
-			background-color: $brand-color;
+			background-color: rgba(0, 0, 0, 0.3);
 			border-radius: 50%;
 			content: "";
 			display: block;
 			height: ($line-height * 1.5);
+			margin-left: ($line-height * -0.75);
 			position: absolute;
 				top: ($line-height * 0.25);
-				right: ($line-height * 0.25);
-				bottom: ($line-height * 0.25);
-				left: ($line-height * 0.25);
+				left: 50%;
+			transform: scale(0);
+			transition: all 0.3s $timing;
+			transition-property: background-color, transform;
+			width: ($line-height * 1.5);
 			z-index: -1;
-			@include transform(scale(0));
-			@include transition(all 0.3s $timing);
-			-webkit-transition-property: background-color, -webkit-transform;
-			        transition-property: background-color, transform;
-			// colour
-				@each $color in $palette-list {
-					$i: index($palette-list, $color);
-					
-					.page-#{$color} & {
-						background-color: nth($palette-color, $i);
-					}
-				}
 			// no csstransforms
 				.no-csstransforms & {
 					display: none;
@@ -107,7 +49,7 @@
 	.dropdown.open .dropdown-toggle {
 		background-color: transparent;
 		&:after {
-			@include transform(scale(1));
+			transform: scale(1);
 			// no csstransforms
 				.no-csstransforms & {
 					display: block;
@@ -116,71 +58,25 @@
 	}
 	.nav {
 		margin: 0;
-		> li {
-			> a {
-				.avatar,
-				.fa,
-				.icon {
-					@include transition(all 0.3s $timing);
-					-webkit-transition-property: opacity, -webkit-transform;
-					        transition-property: opacity, transform;
-				}
-				.header-close {
-					position: absolute;
-						top: ($line-height / 2 + ($line-height - $font-size) / 2);
-						left: 0;
-					text-align: center;
-					width: 100%;
-					@include opacity(0);
-					@include transform(rotate(-225deg));
-					&:after {
-						background-color: $brand-color;
-						border-radius: 50%;
-						content: "";
-						display: block;
-						height: ($line-height * 1.5);
-						margin-top: ($line-height * -0.75);
-						margin-left: ($line-height * -0.75);
-						position: absolute;
-							top: 50%;
-							left: 50%;
-						width: ($line-height * 1.5);
-						@include transform(scale(0));
-						@include transition(all 0.3s $timing);
-						-webkit-transition-property: -webkit-transform;
-						        transition-property: transform;
-						@each $color in $palette-list {
-							$i: index($palette-list, $color);
-							
-							.page-#{$color} & {
-								background-color: nth($palette-color, $i);
-							}
-						}
-					}
-					&:before {
-						position: relative;
-						z-index: 1;
-					}
-				}
-			}
-			&.active > a {
-				.avatar,
-				.fa,
-				.icon {
-					@include opacity(0);
-					@include transform(rotate(225deg));
-				}
-				.header-close {
-					@include opacity(1);
-					@include transform(rotate(0));
-					&:after {
-						@include transform(scale(1));
-					}
-				}
+	}
+	.tab-nav {
+		box-shadow: none;
+		margin: 0;
+	}
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.page-#{$color} .header {
+			background-color: nth($palette-color, $i);
+			&.fixed,
+			&.open {
+				background-color: nth($palette-color-dark-m, $i);
 			}
 		}
 	}
-}
 
 .header-btn {
 	display: block;
@@ -211,7 +107,7 @@
 .header-text {
 	display: block;
 	float: left;
-	font-weight: 300;
+	font-weight: $font-weight-light;
 	height: ($line-height * 2);
 	line-height: $line-height-h4;
 	margin: 0;
@@ -230,43 +126,3 @@
 		width: auto;
 	}
 }
-
-.header-nav-scroll {
-	height: ($line-height * 2);
-	overflow: hidden;
-	position: relative;
-	&.pull-down {
-		position: absolute;
-			top: 100%;
-			left: 0;
-		width: 100%;
-		@include transition(opacity 0.15s $timing 0.15s, top 0.3s $timing);
-		.header.fixed &,
-		.header.open &,
-		.menu-open & {
-			// position
-				top: 0;
-			z-index: -1;
-			@include opacity(0);
-			@include transition(opacity 0.15s $timing, top 0.3s $timing);
-		}
-	}
-}
-
-.header-nav-wrap {
-	height: 150%;
-	overflow-x: auto;
-	overflow-y: hidden;
-	padding-bottom: $line-height;
-	position: absolute;
-		top: 0;
-		left: 0;
-	white-space: nowrap;
-	width: 100%;
-	-webkit-overflow-scrolling: touch;
-	-ms-overflow-style: none;
-	.nav > li {
-		display: inline-block;
-		float: none;
-	}
-}