material-sass 0.0.1

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

@@ -0,0 +1,77 @@
+.table {
+	margin-top: $line-height;
+	margin-bottom: $line-height;
+	width: 100%;
+	td,
+	th {
+		line-height: $line-height;
+		padding: (($cell-height - $line-height) / 2) $grid-gutter (($cell-height - $line-height) / 2 - 1);
+		vertical-align: top;
+		&.nowrap {
+			white-space: nowrap;
+			width: 1%;
+		}
+	}
+	> thead > td,
+	> thead > th {
+		vertical-align: bottom;
+	}
+}
+
+.table-bordered {
+	td,
+	th {
+		border-top: 1px solid $black-hint;
+	}
+	> tbody > tr {
+		&:nth-child(odd) {
+			> td,
+			> th {
+				background-color: $white-bg;
+			}
+		}
+	}
+	> thead > tr {
+		> td,
+		> th {
+			border-bottom: 2px solid $black-hint;
+		}
+	}
+	> thead:first-child > tr:first-child {
+		> td,
+		> th {
+			border-top: 0;
+		}
+	}
+}
+
+.table-simple {
+	td,
+	th {
+		padding-top: 0;
+		padding-right: 0;
+		padding-bottom: 0;
+		vertical-align: top;
+		&:first-child {
+			padding-left: 0;
+		}
+		&.nowrap .tag-block {
+			margin-top: 2px;
+		}
+	}
+}
+
+// responsive
+	.table-responsive {
+		margin-top: $line-height;
+		margin-bottom: $line-height;
+		min-height: 0.01%;
+		overflow-x: auto;
+		overflow-y: hidden;
+		-webkit-overflow-scrolling: touch;
+		    -ms-overflow-style: -ms-autohiding-scrollbar;
+		.table {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}

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

@@ -0,0 +1,154 @@
+.tile {
+	background-color: $white;
+	display: block;
+	position: relative;
+	@include box-shadow(0 0 1px rgba(0, 0, 0, 0.5));
+	@include clearfix();
+	&[href] {
+		color: $black-text;
+		&:focus,
+		&:hover {
+			color: $link-color;
+			text-decoration: none;
+		}
+	}
+	&.active {
+		margin-top: $line-height;
+		margin-bottom: $line-height;
+	}
+}
+
+// action
+	.tile-action {
+		float: right;
+		@include clearfix();
+		@include user-select(none);
+		.no-touch &,
+		.touch .tile-collapse & {
+			display: none;
+		}
+		.no-touch .tile:hover &,
+		.tile-collapse.active & {
+			display: block;
+		}
+		.nav {
+			margin-top: 0;
+			margin-bottom: 0;
+			> li {
+				> a {
+					color: $black-sec;
+					z-index: 1;
+					&:focus,
+					&:hover {
+						color: $link-color;
+					}
+				}
+				&.active > a,
+				&.open > a {
+					color: $link-color;
+				}
+			}
+		}
+	}
+
+// collapse
+	.tile-active-show {
+		@include transition(height 0.15s linear);
+	}
+
+	.tile-collapse {
+		@include transition(margin 0.15s linear);
+		&.active, {
+			margin-right: ($grid-gutter * -1 + 1);
+			margin-left: ($grid-gutter * -1 + 1);
+		}
+	}
+
+	.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: ($grid-gutter * -4 + 1);
+					margin-left: ($grid-gutter * -4 + 1);
+				}
+			}
+	}
+
+// content
+	.tile-inner {
+		padding: ($line-height / 2) $grid-gutter;
+		position: relative;
+		.tile-side ~ & {
+			overflow: hidden;
+		}
+	}
+
+	.tile-side {
+		padding-top: ($line-height / 2);
+		padding-bottom: ($line-height / 2);
+		&.pull-left {
+			padding-left: $grid-gutter;
+		}
+		&.pull-right {
+			padding-right: $grid-gutter;
+		}
+	}
+
+	.tile-sub {
+		display: inline-block;
+		padding-right: $grid-gutter;
+		padding-left: $grid-gutter;
+		position: relative;
+		width: 100%;
+		&:before {
+			border-top: 1px solid $black-bg;
+			content: '';
+			display: block;
+			position: absolute;
+				top: 0;
+				left: 0;
+			width: 100%;
+		}
+	}
+
+// footer
+	.tile-footer {
+		background-color: $white-bg;
+		position: relative;
+		@include clearfix();
+		&:before {
+			border-top: 1px solid $black-bg;
+			content: '';
+			display: block;
+			position: absolute;
+				top: 0;
+				left: 0;
+			width: 100%;
+		}
+		&:first-child {
+			border-top: 0;
+		}
+		.nav {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+
+// misc
+	.tile-toggle {
+		cursor: pointer;
+		@include clearfix();
+	}
+
+	.tile-wrap {
+		margin-top: $line-height;
+		margin-bottom: $line-height;
+		position: relative;
+	}

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

@@ -0,0 +1,61 @@
+.toast {
+	position: fixed;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	z-index: ($top-base + 1);
+	.tooltip {
+		position: static !important;
+	}
+	// 768
+		@include responsive(sm) {
+			margin-right: ($grid-gutter * 2 + $line-height * 2);
+			// position
+				right: auto;
+				bottom: $line-height;
+				left: $grid-gutter !important;
+		}
+}
+
+.toast-inner {
+	background-color: $black-text;
+	color: $white;
+	font-size: floor($font-size * 0.9);
+	padding: ($line-height / 2) $grid-gutter;
+	@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);
+	.toast-show & {
+		@include transform(translate3d(0, 0, 0));
+	}
+	// 768
+		@include responsive(sm) {
+			border-radius: 2px;
+			float: left;
+		}
+}
+
+// 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;
+		}
+	}
+
+// text
+	.toast-text {
+		overflow: hidden;
+	}

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

@@ -0,0 +1,52 @@
+@mixin animation($animation...) {
+	-webkit-animation: $animation;
+	        animation: $animation;
+}
+
+@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;
+	}
+	&::-moz-placeholder {
+		color: $color;
+		opacity: 1;
+	}
+	&::-webkit-input-placeholder {
+		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/mixin/_grid.scss

@@ -0,0 +1,82 @@
+// col
+	@mixin calc-col($index, $class, $type) {
+		@if ($type == colwidth) and ($index > 0) {
+			.col-#{$class}-#{$index} {
+				width: percentage(($index / $grid-cols));
+			}
+		}
+		@if ($type == offset) {
+			.col-#{$class}-offset-#{$index} {
+				margin-left: percentage(($index / $grid-cols));
+			}
+		}
+		@if ($type == pull) {
+			.col-#{$class}-pull-#{$index} {
+				right: percentage(($index / $grid-cols));
+			}
+		}
+		@if ($type == push) {
+			.col-#{$class}-push-#{$index} {
+				left: percentage(($index / $grid-cols));
+			}
+		}
+	}
+	@mixin float-col($class) {
+		$i: 1;
+		$list: '';
+		$list: ".col-#{$class}-#{$i}";
+		@for $i from (1 + 1) through $grid-cols {
+			$list: "#{$list}, .col-#{$class}-#{$i}";
+		}
+		#{$list} {
+			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: ".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}";
+		}
+		#{$list} {
+			min-height: 1px;
+			position: relative;
+			padding-left: $grid-gutter;
+			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

@@ -0,0 +1,32 @@
+@mixin responsive($screen-size) {
+	// 480
+		@if $screen-size == xs {
+			@media only screen and (min-width: $screen-xs) {
+				@content;
+			}
+		}
+	// 768
+		@else if $screen-size == sm {
+			@media only screen and (min-width: $screen-sm) {
+				@content;
+			}
+		}
+	// 992
+		@else if $screen-size == md {
+			@media only screen and (min-width: $screen-md) {
+				@content;
+			}
+		}
+	// 1440
+		@else if $screen-size == lg {
+			@media only screen and (min-width: $screen-lg) {
+				@content;
+			}
+		}
+	// customised break point
+		@else {
+			@media only screen and ($screen-size) {
+				@content;
+			}
+		}
+}