material-sass 0.0.1 → 0.0.2

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

@@ -3,7 +3,16 @@
 		right: 0;
 		bottom: 0;
 		left: 0;
-	z-index: ($top-base + 1);
+	z-index: ($content-base + 1);
+	a {
+		color: lighten($link-color, 30%);
+		cursor: pointer;
+		&:focus,
+		&:hover {
+			color: lighten($link-color, 15%);
+			text-decoration: none;
+		}
+	}
 	.tooltip {
 		position: static !important;
 	}
@@ -22,10 +31,13 @@
 	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));
 	@include clearfix();
 	@include transform(translate3d(0, 200%, 0));
-	@include transition(transform 0.3s $timing);
+	@include transition(all 0.3s $timing);
+	-webkit-transition-property: -webkit-transform;
+	        transition-property: transform;
 	.toast-show & {
 		@include transform(translate3d(0, 0, 0));
 	}
@@ -34,28 +46,23 @@
 			border-radius: 2px;
 			float: left;
 		}
+	// no transform3d
+		.no-csstransforms3d & {
+			@include opacity(0);
+		}
+		.no-csstransforms3d .toast-show & {
+			@include opacity(1);
+		}
 }
 
-// action
-	[data-dismiss="toast"] {
-		cursor: pointer;
-		float: right;
-		font-weight: 700;
-		margin-left: $grid-gutter;
-		text-transform: uppercase;
-	}
-
-	.toast a {
-		color: lighten($link-color, 30%);
-		cursor: pointer;
-		&:focus,
-		&:hover {
-			color: lighten($link-color, 15%);
-			text-decoration: none;
-		}
-	}
+.toast-text {
+	overflow: hidden;
+}
 
-// text
-	.toast-text {
-		overflow: hidden;
-	}
+[data-dismiss="toast"] {
+	cursor: pointer;
+	float: right;
+	font-weight: 700;
+	margin-left: $grid-gutter;
+	text-transform: uppercase;
+}

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

@@ -3,6 +3,11 @@
 	        animation: $animation;
 }
 
+@mixin backface($backface) {
+	-webkit-backface-visibility: $backface;
+	        backface-visibility: $backface;
+}
+
 @mixin box-shadow($shadow...) {
 	-webkit-box-shadow: $shadow;
 	        box-shadow: $shadow;

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

@@ -1,3 +1,25 @@
+@mixin make-container() {
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: $grid-gutter;
+	padding-left: $grid-gutter;
+	@include clearfix();
+	// 992
+		@include responsive(md) {
+			max-width: ($screen-md - $grid-gutter * 2);
+		}
+	// 1440
+		@include responsive(lg) {
+			max-width: ($screen-lg - $grid-gutter * 2);
+		}
+}
+
+@mixin make-row() {
+	margin-right: ($grid-gutter * -1);
+	margin-left: ($grid-gutter * -1);
+	@include clearfix();
+}
+
 // col
 	@mixin calc-col($index, $class, $type) {
 		@if ($type == colwidth) and ($index > 0) {
@@ -21,9 +43,10 @@
 			}
 		}
 	}
+
 	@mixin float-col($class) {
 		$i: 1;
-		$list: '';
+		$list: "";
 		$list: ".col-#{$class}-#{$i}";
 		@for $i from (1 + 1) through $grid-cols {
 			$list: "#{$list}, .col-#{$class}-#{$i}";
@@ -32,14 +55,16 @@
 			float: left;
 		}
 	}
+
 	@mixin loop-col($columns, $class, $type) {
 		@for $i from 0 through $columns {
 			@include calc-col($i, $class, $type);
 		}
 	}
+
 	@mixin make-col() {
 		$i: 1;
-		$list: '';
+		$list: "";
 		$list: ".col-xx-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
 		@for $i from (1 + 1) through $grid-cols {
 			$list: "#{$list}, .col-xx-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
@@ -51,32 +76,11 @@
 			padding-right: $grid-gutter;
 		}
 	}
+
 	@mixin make-grid($class) {
 		@include float-col($class);
 		@include loop-col($grid-cols, $class, colwidth);
 		@include loop-col($grid-cols, $class, offset);
 		@include loop-col($grid-cols, $class, pull);
 		@include loop-col($grid-cols, $class, push);
-	}
-
-// container and row
-	@mixin make-container() {
-		margin-right: auto;
-		margin-left: auto;
-		padding-right: $grid-gutter;
-		padding-left: $grid-gutter;
-		@include clearfix();
-		// 992
-			@include responsive(md) {
-				width: ($screen-md - $grid-gutter * 2);
-			}
-		// 1440
-			@include responsive(lg) {
-				width: ($screen-lg - $grid-gutter * 2);
-			}
-	}
-	@mixin make-row() {
-		margin-right: ($grid-gutter * -1);
-		margin-left: ($grid-gutter * -1);
-		@include clearfix();
 	}

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

@@ -25,7 +25,7 @@
 		}
 	// customised break point
 		@else {
-			@media only screen and ($screen-size) {
+			@media only screen and #{$screen-size} {
 				@content;
 			}
 		}

data/app/assets/stylesheets/material/mixin/{_utilitise.scss → _utilities.scss}

@@ -1,3 +1,7 @@
+@function unicode($str){
+	@return unquote("\"") + $str + unquote("\"");
+}
+
 @mixin clearfix() {
 	&:after,
 	&:before {
@@ -11,9 +15,6 @@
 }
 
 @mixin form-label() {
-	line-height: $line-height;
-	margin-top: 0;
-	margin-bottom: 0;
 	padding-top: (($input-height - $line-height) / 2);
 	padding-bottom: (($input-height - $line-height) / 2);
 	text-align: right;

data/app/assets/stylesheets/material/project.scss

@@ -1,2 +1,8 @@
-@import "mixin";
-@import "variable";
+@import "mixin/css3";
+@import "mixin/grid";
+@import "mixin/responsive";
+@import "mixin/utilities";
+
+@import "variable";
+
+// project css

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

@@ -5,6 +5,36 @@
 	}
 }
 
+.content-fix-scroll {
+	margin-right: ($grid-gutter * -1);
+	margin-left: ($grid-gutter * -1);
+	overflow: hidden;
+	padding-right: $grid-gutter;
+	padding-left: $grid-gutter;
+	.content-fix.fixed & {
+		position: fixed;
+			top: ($line-height * 2);
+			bottom: 0;
+		@include backface(hidden);
+	}
+}
+
+.content-fix-wrap {
+	.content-fix.fixed & {
+		overflow-x: hidden;
+		overflow-y: auto;
+		padding-right: ($grid-gutter * 2);
+		padding-left: ($grid-gutter * 2);
+		position: absolute;
+			top: 0;
+			right: ($grid-gutter * -1);
+			bottom: 0;
+			left: ($grid-gutter * -1);
+		-webkit-overflow-scrolling: touch;
+		-ms-overflow-style: none;
+	}
+}
+
 .content-heading {
 	background-color: $brand-color;
 	color: $white;
@@ -25,11 +55,6 @@
 	}
 }
 
-.content-nav {
-	background-color: $white;
-	@include box-shadow(0 0 1px rgba(0, 0, 0, 0.5));
-}
-
 .content-sub-heading {
 	color: $brand-color;
 	font-size: $font-size-h4;
@@ -44,36 +69,6 @@
 	}
 }
 
-// fixed left/right hand side column
-	.content-fix.fixed {
-		.content-fix-wrap {
-			overflow-x: hidden;
-			overflow-y: auto;
-			padding-right: ($grid-gutter * 2);
-			padding-left: ($grid-gutter * 2);
-			position: absolute;
-				top: 0;
-				right: ($grid-gutter * -1);
-				bottom: 0;
-				left: ($grid-gutter * -1);
-			-webkit-overflow-scrolling: touch;
-			-ms-overflow-style: -ms-autohiding-scrollbar;
-		}
-		.content-fix-scroll {
-			position: fixed;
-				top: ($line-height * 2);
-				bottom: 0;
-		}
-	}
-
-	.content-fix-scroll {
-		margin-right: ($grid-gutter * -1);
-		margin-left: ($grid-gutter * -1);
-		overflow: hidden;
-		padding-right: $grid-gutter;
-		padding-left: $grid-gutter;
-	}
-
-	.row-fix {
-		position: relative;
-	}
+.row-fix {
+	position: relative;
+}

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

@@ -5,8 +5,8 @@
 	text-align: center;
 	position: absolute;
 		bottom: 0;
+		right: 0;
 		left: 0;
-	width: 100%;
 	a {
 		color: $black-hint;
 		&:focus,
@@ -14,10 +14,4 @@
 			color: $black-text;
 		}
 	}
-}
-
-.footer-fix {
-	background-color: $white-bg;
-	position: fixed;
-	z-index: $header-base;
 }

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

@@ -3,13 +3,14 @@
 	color: $white;
 	position: fixed;
 		top: 0;
+		right: 0;
 		left: 0;
-	width: 100%;
 	z-index: $header-base;
-	@include box-shadow(0 0 0 rgba(0, 0, 0, 0));
+	@include backface(hidden);
 	@include clearfix();
 	@include transition(background-color 0.3s $timing, box-shadow 0.15s linear);
 	&.fixed,
+	&.open,
 	.menu-open & {
 		background-color: $brand-color-dark-m;
 		@include box-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
@@ -19,7 +20,8 @@
 		
 		.page-#{$color} & {
 			background-color: nth($palette-color, $i);
-			&.fixed {
+			&.fixed,
+			&.open {
 				background-color: nth($palette-color-dark-m, $i);
 			}
 		}
@@ -30,11 +32,85 @@
 	a {
 		color: $white;
 	}
-	.dropdown.open .dropdown-toggle {
-		color: $black-text;
+	.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 a {
-		color: $black-text;
+	.dropdown-menu {
+		border-radius: 2px;
+		a {
+			color: $black-text;
+		}
+	}
+	.dropdown-toggle {
+		z-index: 1;
+		&:after {
+			background-color: $brand-color;
+			border-radius: 50%;
+			content: "";
+			display: block;
+			height: ($line-height * 1.5);
+			position: absolute;
+				top: ($line-height * 0.25);
+				right: ($line-height * 0.25);
+				bottom: ($line-height * 0.25);
+				left: ($line-height * 0.25);
+			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;
+			@each $color in $palette-list {
+				$i: index($palette-list, $color);
+				
+				.page-#{$color} & {
+					background-color: nth($palette-color, $i);
+				}
+			}
+			// no csstransforms
+				.no-csstransforms & {
+					display: none;
+				}
+		}
+	}
+	.dropdown.open .dropdown-toggle {
+		background-color: transparent;
+		&:after {
+			@include transform(scale(1));
+			// no csstransforms
+				.no-csstransforms & {
+					display: block;
+				}
+		}
 	}
 	.nav {
 		margin: 0;
@@ -44,6 +120,8 @@
 				.fa,
 				.icon {
 					@include transition(all 0.3s $timing);
+					-webkit-transition-property: opacity, -webkit-transform;
+					        transition-property: opacity, transform;
 				}
 				.header-close {
 					position: absolute;
@@ -53,6 +131,34 @@
 					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 {
@@ -65,6 +171,9 @@
 				.header-close {
 					@include opacity(1);
 					@include transform(rotate(0));
+					&:after {
+						@include transform(scale(1));
+					}
 				}
 			}
 		}
@@ -83,6 +192,19 @@
 	}
 }
 
+.header-fix-hide {
+	.header.fixed & {
+		display: none !important;
+	}
+}
+
+.header-fix-show {
+	display: none !important;
+	.header.fixed & {
+		display: block !important;
+	}
+}
+
 .header-logo,
 .header-text {
 	display: block;
@@ -91,7 +213,7 @@
 	height: ($line-height * 2);
 	line-height: $line-height-h4;
 	margin: 0;
-	padding: (($line-height * 2 - $line-height-h4) / 2) 0;
+	padding: (($line-height * 2 - $line-height-h4) / 2) $grid-gutter;
 	&:focus,
 	&:hover {
 		text-decoration: none;
@@ -100,4 +222,49 @@
 
 .header-logo {
 	font-size: $font-size-h4;
+	img {
+		display: block;
+		max-height: $line-height-h4;
+		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;
+	}
 }