material-sass 0.0.1

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

@@ -0,0 +1,35 @@
+@mixin clearfix() {
+	&:after,
+	&:before {
+		content: "";
+		display: table;
+		line-height: 0;
+	}
+	&:after {
+		clear: both;
+	}
+}
+
+@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;
+}
+
+@mixin img-responsive() {
+	display: block;
+	height: auto;
+	max-width: 100%;
+	width: 100% \9;
+}
+
+@mixin text-overflow() {
+	display: block;
+	line-height: inherit;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

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

@@ -0,0 +1,2 @@
+@import "mixin";
+@import "variable";

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

@@ -0,0 +1,79 @@
+.content {
+	padding-bottom: $line-height;
+	.searching & {
+		display: none;
+	}
+}
+
+.content-heading {
+	background-color: $brand-color;
+	color: $white;
+	overflow: hidden;
+	padding-top: ($line-height * 2);
+	position: relative;
+	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;
+	}
+}
+
+.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;
+	font-weight: 400;
+	line-height: $line-height-h4;
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.page-#{$color} & {
+			color: nth($palette-color, $i);
+		}
+	}
+}
+
+// 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;
+	}

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

@@ -0,0 +1,23 @@
+.footer {
+	background-color: $white-bg-light;
+	border-top: 1px solid $black-bg;
+	color: $black-hint;
+	text-align: center;
+	position: absolute;
+		bottom: 0;
+		left: 0;
+	width: 100%;
+	a {
+		color: $black-hint;
+		&:focus,
+		&:hover {
+			color: $black-text;
+		}
+	}
+}
+
+.footer-fix {
+	background-color: $white-bg;
+	position: fixed;
+	z-index: $header-base;
+}

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

@@ -0,0 +1,103 @@
+.header {
+	background-color: $brand-color;
+	color: $white;
+	position: fixed;
+		top: 0;
+		left: 0;
+	width: 100%;
+	z-index: $header-base;
+	@include box-shadow(0 0 0 rgba(0, 0, 0, 0));
+	@include clearfix();
+	@include transition(background-color 0.3s $timing, box-shadow 0.15s linear);
+	&.fixed,
+	.menu-open & {
+		background-color: $brand-color-dark-m;
+		@include box-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
+	}
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.page-#{$color} & {
+			background-color: nth($palette-color, $i);
+			&.fixed {
+				background-color: nth($palette-color-dark-m, $i);
+			}
+		}
+		.menu-open.page-#{$color} & {
+			background-color: nth($palette-color-dark-m, $i);
+		}
+	}
+	a {
+		color: $white;
+	}
+	.dropdown.open .dropdown-toggle {
+		color: $black-text;
+	}
+	.dropdown-menu a {
+		color: $black-text;
+	}
+	.nav {
+		margin: 0;
+		> li {
+			> a {
+				.avatar,
+				.fa,
+				.icon {
+					@include transition(all 0.3s $timing);
+				}
+				.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));
+				}
+			}
+			&.active > a {
+				.avatar,
+				.fa,
+				.icon {
+					@include opacity(0);
+					@include transform(rotate(225deg));
+				}
+				.header-close {
+					@include opacity(1);
+					@include transform(rotate(0));
+				}
+			}
+		}
+	}
+}
+
+.header-btn {
+	display: block;
+	float: left;
+	height: ($line-height * 2);
+	padding: (($line-height * 2 - $line-height-h4) / 2) $grid-gutter;
+	text-align: center;
+	&:focus,
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+.header-logo,
+.header-text {
+	display: block;
+	float: left;
+	font-weight: 300;
+	height: ($line-height * 2);
+	line-height: $line-height-h4;
+	margin: 0;
+	padding: (($line-height * 2 - $line-height-h4) / 2) 0;
+	&:focus,
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+.header-logo {
+	font-size: $font-size-h4;
+}

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

@@ -0,0 +1,221 @@
+.menu {
+	position: fixed;
+		top: ($line-height * 2);
+		bottom: 0;
+		left: 0;
+	width: 100%;
+	z-index: ($header-base - 1);
+	@include box-shadow(0 0 0 rgba(0, 0, 0, 0));
+	@include transform(translate3d(-100%, 0, 0));
+	-webkit-transition: -webkit-box-shadow 0s linear 0.3s, -webkit-transform 0.3s $timing 0s;
+	        transition: box-shadow 0s linear 0.3s, transform 0.3s $timing 0s;
+	&.menu-right {
+		// position
+			right: 0;
+			left: auto;
+		@include transform(translate3d(100%, 0, 0));
+	}
+	&.open {
+		@include box-shadow(0 0 10px rgba(0, 0, 0, 0.5));
+		@include transform(translate3d(0, 0, 0));
+		-webkit-transition: -webkit-box-shadow 0s linear 0s, -webkit-transform 0.3s $timing 0s;
+		        transition: box-shadow 0s linear 0s, transform 0.3s $timing 0s;
+	}
+	// 480
+		@include responsive(xs) {
+			width: 320px;
+		}
+	// 992
+		@include responsive(md) {
+			width: 400px;
+		}
+	// no boxshadow
+		.no-boxshadow & {
+			border-right: 1px solid $black-hint;
+			&.menu-right {
+				border-right: 0;
+				border-left: 1px solid $black-hint;
+			}
+		}
+	// no csstransforms
+		.no-csstransforms & {
+			display: none;
+			&.open {
+				display: block;
+			}
+		}
+}
+
+.menu-content {
+	padding-top: $line-height;
+	padding-bottom: $line-height;
+	hr {
+		border-top-color: $black-bg;
+	}
+	.nav {
+		margin-top: 0;
+		margin-bottom: 0;
+		a {
+			color: $black-sec;
+			font-weight: 700;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			&:focus,
+			&:hover {
+				background-color: $white-bg-light;
+			}
+			.fa,
+			.icon {
+				margin-right: $grid-gutter;
+			}
+		}
+		li.active > a {
+			background-color: $white-bg;
+			color: $brand-color;
+			.page-blue & {
+				color: $palette-blue;
+			}
+			.page-green & {
+				color: $palette-green;
+			}
+			.page-purple & {
+				color: $palette-purple;
+			}
+			.page-red & {
+				color: $palette-red;
+			}
+			.page-yellow & {
+				color: $palette-yellow;
+			}
+		}
+		> li.active > a {
+			background-color: $white-bg-dark;
+		}
+		ul a {
+			font-weight: 400;
+			padding-left: ($grid-gutter * 3);
+		}
+	}
+	// 480
+		@include responsive(xs) {
+			width: 320px;
+		}
+	// 992
+		@include responsive(md) {
+			width: 400px;
+		}
+}
+
+.menu-content-inner {
+	padding-right: $grid-gutter;
+	padding-left: $grid-gutter;
+}
+
+.menu-scroll {
+	background-color: $white;
+	height: 100%;
+	overflow: hidden;
+	position: absolute;
+		top: 0;
+		left: 0;
+	width: 100%;
+	z-index: 1;
+}
+
+.menu-top {
+	background-color: $black-text;
+	color: $white-bg;
+	position: relative;
+	a {
+		color: $white-bg;
+		text-decoration: none;
+		&:focus,
+		&:hover {
+			color: $white;
+		}
+	}
+	// 480
+		@include responsive(xs) {
+			width: 320px;
+		}
+	// 992
+		@include responsive(md) {
+			width: 400px;
+		}
+}
+
+.menu-top-form {
+	margin-top: ($line-height / 4);
+	margin-bottom: ($line-height / 4);
+}
+
+.menu-top-img {
+	display: -webkit-box;
+	display:    -moz-box;
+	display:     -ms-flexbox;
+	display: -webkit-flex;
+	display:         flex;
+	height: 100%;
+	justify-content: center;
+	overflow: hidden;
+	position: absolute;
+		top: 0;
+		left: 0;
+	width: 100%;
+	-webkit-align-items: center;
+	        align-items: center;
+	img {
+		min-height: 100%;
+		width: 100%;
+		@include opacity(0.5);
+	}
+}
+
+.menu-top-info {
+	padding: ($line-height * 1.5) $grid-gutter;
+	position: relative;
+}
+
+.menu-top-user {
+	display: -webkit-box;
+	display:    -moz-box;
+	display:     -ms-flexbox;
+	display: -webkit-flex;
+	display:         flex;
+	-webkit-align-items: center;
+	        align-items: center;
+	@include clearfix();
+}
+
+.menu-wrap {
+	overflow-x: hidden;
+	overflow-y: auto;
+	position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	-webkit-overflow-scrolling: touch;
+	-ms-overflow-style: -ms-autohiding-scrollbar;
+	// 480
+		@include responsive(xs) {
+			padding-right: ($grid-gutter * 2);
+			// position
+				right: ($grid-gutter * -2);
+		}
+}
+
+// fbtn
+	.menu-right.open ~ .fbtn-container{
+		// 480
+			@include responsive(xs) {
+				// position
+					right: ($grid-gutter + 320);
+			}
+		// 992
+			@include responsive(md) {
+				// position
+					right: ($grid-gutter + 400);
+			}
+	}