material-sass 0.0.1

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

@@ -0,0 +1,16 @@
+// 1. import mixins and variables
+	@import "mixin";
+	@import "variable";
+
+// 2. reset css
+	@import "reset";
+
+// 3. ui elements
+	@import "addon";
+	@import "code";
+	@import "grid";
+	@import "utilitise";
+
+// 4. theme elements
+	@import "element";
+	@import "theme";

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

@@ -0,0 +1,63 @@
+.avatar {
+	background-color: $black-bg;
+	border-radius: 50%;
+	color: $black-text;
+	display: block;
+	height: ($line-height * 2);
+	line-height: ($line-height * 2);
+	text-align: center;
+	width: ($line-height * 2);
+	&:focus,
+	&:hover {
+		text-decoration: none;
+	}
+	&.avatar-inline {
+		display: inline-block;
+	}
+	&.avatar-lg {
+		height: ($line-height * 4);
+		line-height: ($line-height * 4);
+		width: ($line-height * 4);
+	}
+	&.avatar-sm {
+		height: ($line-height * 1.5);
+		line-height: ($line-height * 1.5);
+		margin-top: ($line-height * -0.25);
+		margin-bottom: ($line-height * -0.25);
+		width: ($line-height * 1.5);
+	}
+	&.avatar-transparent {
+		background-color: transparent;
+	}
+	&.pull-left {
+		margin-right: $grid-gutter;
+	}
+	&.pull-right {
+		margin-left: $grid-gutter;
+	}
+	img {
+		border-radius: 50%;
+		height: 100%;
+		vertical-align: top;
+		width: 100%;
+	}
+	.fa {
+		display: block;
+		height: 100%;
+		line-height: inherit;
+		text-align: center;
+	}
+	.fa-text {
+		font-family: inherit;
+	}
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.avatar-#{$color} {
+			background-color: nth($palette-color, $i);
+			color: $white;
+		}
+	}

data/app/assets/stylesheets/material/element/_button-float.scss

@@ -0,0 +1,145 @@
+.fbtn {
+	background-color: $black-bg;
+	border-radius: 50%;
+	clear: both;
+	color: $white;
+	cursor: pointer;
+	display: block;
+	font-size: $line-height;
+	padding: ($line-height / 2) 0;
+	position: relative;
+	text-align: center;
+	width: ($line-height * 2);
+	@include box-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
+	.fbtn-dropdown & {
+		margin-bottom: ($line-height / 2);
+		@include opacity(0);
+		@include transform(scale(0.5));
+		-webkit-transition: opacity 0.15s $timing 0s, -webkit-transform 0.15s $timing 0s;
+		        transition: opacity 0.15s $timing 0s, transform 0.15s $timing 0s;
+		&:nth-last-child(1) {
+			-webkit-transition-delay: 300ms;
+			        transition-delay: 300ms;
+		}
+		&:nth-last-child(2) {
+			-webkit-transition-delay: 250ms;
+			        transition-delay: 250ms;
+		}
+		&:nth-last-child(3) {
+			-webkit-transition-delay: 200ms;
+			        transition-delay: 200ms;
+		}
+		&:nth-last-child(4) {
+			-webkit-transition-delay: 150ms;
+			        transition-delay: 150ms;
+		}
+		&:nth-last-child(5) {
+			-webkit-transition-delay: 100ms;
+			        transition-delay: 100ms;
+		}
+		&:nth-last-child(6) {
+			-webkit-transition-delay: 50ms;
+			        transition-delay: 50ms;
+		}
+		.fbtn-inner.open & {
+			@include opacity(1);
+			@include transform(scale(1));
+			-webkit-transition-delay: 300ms;
+			        transition-delay: 300ms;
+			&:nth-last-child(1) {
+				-webkit-transition-delay: 0s;
+				        transition-delay: 0s;
+			}
+			&:nth-last-child(2) {
+				-webkit-transition-delay: 50ms;
+				        transition-delay: 50ms;
+			}
+			&:nth-last-child(3) {
+				-webkit-transition-delay: 100ms;
+				        transition-delay: 100ms;
+			}
+			&:nth-last-child(4) {
+				-webkit-transition-delay: 150ms;
+				        transition-delay: 150ms;
+			}
+			&:nth-last-child(5) {
+				-webkit-transition-delay: 200ms;
+				        transition-delay: 200ms;
+			}
+			&:nth-last-child(6) {
+				-webkit-transition-delay: 250ms;
+				        transition-delay: 250ms;
+			}
+		}
+	}
+}
+
+a.fbtn {
+	&:focus,
+	&:hover {
+		color: $white;
+		@include box-shadow(0 3px 10px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.5));
+	}
+}
+
+.fbtn-container {
+	position: fixed;
+		right: $grid-gutter;
+		bottom: $line-height;
+	z-index: ($header-base + 1);
+	@include transition(margin-bottom 0.3s $timing, right 0.3s $timing);
+}
+
+.fbtn-dropdown {
+	max-height: 0;
+	overflow: hidden;
+	padding-right: $grid-gutter;
+	padding-left: $grid-gutter;
+	position: absolute;
+		right: ($grid-gutter * -1);
+		bottom: 100%;
+	@include transition(max-height 0s linear 0.5s);
+	.fbtn-inner.open & {
+		max-height: 99999px;
+		overflow: visible;
+		@include transition(max-height 0s linear 0s);
+	}
+}
+
+.fbtn-rotate {
+	@include transform(rotate(0deg));
+	-webkit-transition: -webkit-transform 0.3s $timing 0s;
+	        transition: transform 0.3s $timing 0s;
+	.fbtn-inner.open & {
+		@include transform(rotate(225deg));
+	}
+}
+
+.fbtn-text {
+	background-color: $black-text;
+	background-color: rgba(0, 0, 0, 0.8);
+	border-radius: 2px;
+	display: none;
+	font-size: $font-size-h6;
+	margin-top: ($line-height / -2);
+	margin-right: $grid-gutter;
+	padding-right: ($grid-gutter / 2);
+	padding-left: ($grid-gutter / 2);
+	position: absolute;
+		top: 50%;
+		right: 100%;
+	white-space: nowrap;
+	.no-touch .fbtn-inner.open .fbtn:hover &,
+	.touch .fbtn-inner.open & {
+		display: block;
+	}
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.fbtn-#{$color} {
+			background-color: nth($palette-color, $i);
+		}
+	}

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

@@ -0,0 +1,131 @@
+.btn {
+	background-color: $white;
+	background-image: none;
+	background-position: 50% 50%;
+	background-size: 100% 100%;
+	border: 1px solid transparent;
+	border-radius: 2px;
+	color: $black-text;
+	cursor: pointer;
+	display: inline-block;
+	font-size: $font-size;
+	font-weight: 400;
+	line-height: $line-height;
+	margin-bottom: 0;
+	max-width: 100%;
+	padding: (($btn-height - $line-height - 2) / 2) $grid-gutter;
+	position: relative;
+	text-align: center;
+	text-transform: uppercase;
+	vertical-align: middle;
+	white-space: nowrap;
+	@include box-shadow(0 1px 5px rgba(0, 0, 0, 0.15), 0 1px 5px rgba(0, 0, 0, 0.15));
+	@include transition(all 0.45s $timing, background-color 0.3s linear 0s);
+	@include user-select(none);
+	&:active,
+	&:focus,
+	&:hover {
+		color: $black-text;
+		outline: 0;
+		text-decoration: none;
+		@include box-shadow(0 5px 10px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15));
+	}
+	&:active {
+		background-color: $white-bg;
+		@include transition(all 0.45s $timing, background-color 0s linear 0.45s);
+	}
+	&[disabled],
+	fieldset[disabled] & {
+		cursor: not-allowed;
+		@include opacity(0.5);
+	}
+	&.btn-active {
+		background-image: -webkit-radial-gradient(circle, $white-bg 10%, $white 11%);
+		background-image:         radial-gradient(circle, $white-bg 10%, $white 11%);
+		background-size: 900% 900%;
+	}
+}
+
+.btn-block {
+	display: block;
+	white-space: normal;
+	width: 100%;
+}
+
+.btn-sm {
+	padding: 0 ($grid-gutter / 2);
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.btn-#{$color} {
+			background-color: nth($palette-color, $i);
+			color: $white;
+			&:active,
+			&:focus,
+			&:hover {
+				color: $white;
+			}
+			&:active {
+				background-color: nth($palette-color-light-m, $i);
+			}
+			&[disabled],
+			fieldset[disabled] & {
+				background-color: nth($palette-color, $i);
+			}
+			&.btn-active {
+				background-image: -webkit-radial-gradient(circle, nth($palette-color-light-m, $i) 10%, nth($palette-color, $i) 11%);
+				background-image:         radial-gradient(circle, nth($palette-color-light-m, $i) 10%, nth($palette-color, $i) 11%);
+			}
+		}
+	}
+
+// flat
+	.btn-flat {
+		background-color: transparent;
+		@include box-shadow(none);
+		&[disabled],
+		fieldset[disabled] & {
+			color: $black-text;
+		}
+	}
+	
+	// flat colour
+		@each $color in $palette-list {
+			$i: index($palette-list, $color);
+
+			.btn-flat.btn-#{$color} {
+				color: nth($palette-color, $i);
+				&:active {
+					background-color: nth($palette-color-light, $i);
+				}
+				&[disabled],
+				fieldset[disabled] & {
+					color: nth($palette-color, $i);
+				}
+				&.btn-active {
+					background-image: -webkit-radial-gradient(circle, nth($palette-color-light, $i) 10%, $white 11%);
+					background-image:         radial-gradient(circle, nth($palette-color-light, $i) 10%, $white 11%);
+				}
+			}
+		}
+
+// size
+	.btn-sm {
+		font-size: $font-size-h6;
+		line-height: ($line-height - 2);
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+
+// text
+	.btn-text {
+		color: $black-text;
+		display: inline-block;
+		font-size: $font-size;
+		font-weight: 400;
+		line-height: $line-height;
+		padding: (($btn-height - $line-height) / 2) 0;
+	}

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

@@ -0,0 +1,203 @@
+.card {
+	background-color: $white;
+	border-radius: 2px;
+	display: block;
+	display: -webkit-box;
+	display:    -moz-box;
+	display:     -ms-flexbox;
+	display: -webkit-flex;
+	display:         flex;
+	margin-bottom: $line-height;
+	position: relative;
+	@include box-shadow(0 0 1px rgba(0, 0, 0, 0.5));
+	@include transition(box-shadow 0.3s $timing);
+	&:focus,
+	&:hover {
+		@include box-shadow(0 0 5px rgba(0, 0, 0, 0.25));
+	}
+}
+
+.card-action {
+	position: relative;
+	@include clearfix();
+	&:before {
+		border-top: 1px solid $black-bg;
+		content: '';
+		display: block;
+		position: absolute;
+			top: 0;
+			left: 0;
+		width: 100%;
+		.card-header + & {
+			display: none;
+		}
+	}
+	.nav {
+		margin-top: 0;
+		margin-bottom: 0;
+		> li {
+			> a {
+				color: $black-sec;
+				&:focus,
+				&:hover {
+					color: $link-color;
+				}
+			}
+			&.active > a,
+			&.open > a {
+				color: $link-color;
+			}
+		}
+	}
+}
+
+.card-header {
+	padding-top: ($line-height / 4);
+	padding-bottom: ($line-height / 4);
+	position: relative;
+	@include clearfix();
+	&:before {
+		border-bottom: 1px solid $black-bg;
+		content: '';
+		display: block;
+		position: absolute;
+			bottom: 0;
+			left: 0;
+		width: 100%;
+	}
+}
+
+.card-heading {
+	display: block;
+	font-size: $font-size-h4;
+	line-height: $line-height-h4;
+	margin-top: $line-height;
+	margin-bottom: $line-height;
+	.card-header & {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
+
+.card-img {
+	position: relative;
+	img {
+		display: block;
+		height: auto;
+		width: 100%;
+	}
+}
+
+.card-img-heading {
+	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
+	color: $white;
+	font-size: $font-size-h4;
+	line-height: $line-height-h4;
+	margin: 0;
+	padding: ($line-height / 2) $grid-gutter;
+	position: absolute;
+		bottom: 0;
+		left: 0;
+	width: 100%;
+}
+
+.card-inner {
+	padding-right: $grid-gutter;
+	padding-left: $grid-gutter;
+	position: relative;
+	z-index: 1;
+	.card-header & {
+		padding-top: ($line-height / 2);
+		padding-bottom: ($line-height / 2);
+	}
+}
+
+.card-main {
+	-webkit-box-flex: 1;
+	   -moz-box-flex: 1;
+	    -webkit-flex: 1;
+	        -ms-flex: 1;
+	            flex: 1;
+}
+
+.card-side {
+	background-color: $white-bg;
+	max-width: 33.33333%;
+	padding-right: $grid-gutter;
+	padding-left: $grid-gutter;
+	&[href] {
+		color: $black-text;
+		&:focus,
+		&:hover {
+			background-color: $white-bg-dark;
+			text-decoration: none;
+		}
+	}
+	&.card-side-img {
+		overflow: hidden;
+		padding-right: 0;
+		padding-left: 0;
+	}
+	&.card-side-right {
+		-webkit-box-ordinal-group: 2;
+		   -moz-box-ordinal-group: 2;
+		           -ms-flex-order: 2;
+		            -webkit-order: 2;
+		                    order: 2;
+	}
+}
+
+.card-wrap {
+	margin-top: $line-height;
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.card-#{$color} {
+			@include box-shadow(0 0 1px nth($palette-color, $i));
+			&:focus,
+			&:hover {
+				@include box-shadow(0 0 5px nth($palette-color, $i));
+			}
+			.card-action:before {
+				border-top-color: nth($palette-color-light, $i);
+			}
+			.card-side {
+				background-color: nth($palette-color, $i);
+				color: $white;
+				&[href] {
+					&:focus,
+					&:hover {
+						background-color: nth($palette-color-dark-m, $i);
+					}
+				}
+			}
+		}
+
+		.card-#{$color}-bg {
+			background-color: nth($palette-color, $i);
+			.card-side {
+				background-color: nth($palette-color-dark-m, $i);
+				&[href] {
+					&:focus,
+					&:hover {
+						background-color: nth($palette-color-dark, $i);
+					}
+				}
+			}
+		}
+	}
+
+	.card[class*="-bg"] {
+		color: $white;
+		.card-action .nav > li {
+			> a {
+				color: $white;
+			}
+			&.open > a {
+				color: $black-text;
+			}
+		}
+	}