material-sass 0.0.1

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

@@ -0,0 +1,226 @@
+.form {
+	margin-top: $line-height;
+	margin-bottom: $line-height;
+}
+
+.form-control {
+	background-color: transparent;
+	background-image: none;
+	border: 0;
+	border-bottom: 1px solid $black-hint;
+	border-radius: 0;
+	color: $black-text;
+	display: block;
+	font-size: $font-size;
+	height: $input-height;
+	line-height: $line-height;
+	padding: (($input-height - $line-height) / 2) 0 (($input-height - $line-height) / 2 - 1);
+	width: 100%;
+	@include placeholder($black-hint);
+	@include transition(border-bottom-color 0.15s $timing);
+	&:focus {
+		border-bottom-color: $link-color;
+		border-bottom-width: 2px;
+		outline: 0;
+		padding-bottom: (($input-height - $line-height) / 2 - 2);
+	}
+	&[disabled],
+	&[readonly],
+	fieldset[disabled] & {
+		border-bottom-style: dashed;
+		color: $black-hint;
+		cursor: not-allowed;
+		opacity: 1;
+	}
+	&.form-control-inline {
+		display: inline-block;
+		vertical-align: middle;
+		width: auto;
+	}
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.form-group-#{$color} & {
+			border-bottom-color: nth($palette-color, $i);
+		}
+	}
+}
+
+select.form-control {
+	-webkit-appearance: none;
+	@include responsive('-webkit-min-device-pixel-ratio: 0') {
+		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAkCAMAAACg5NohAAAAZlBMVEUAAABlZWXLy8vg4OB6enrX19fg4OCdnZ2KiopsbGzn5+dzc3Pt7e3GxsbPz89ubm7u7u5ycnLY2NiJiYmGhoZoaGjq6up/f3+WlpaGhoaZmZllZWVhYWFYWFhaWlpdXV1bW1tWVlaZeqNTAAAAHHRSTlMA+WVC31BEqMzyNekpcGDpKNxJzcjkL9CjwZ/yNlWBeQAAALBJREFUKM/NztkWwiAMRdFQoNparR2cGf//J8UFNdXEd8/rXrkAq9rLoIGt3Vkn9A8xJoiaSqeSJGskuXlJNs2sFRPjWo7lptzVVEoO7VyEWofvoEn8NTUUxuZo2KyCPjo2+wB9m7ZM01zB/9feN2zXEVS0bLEHZQ1b6EE2jhNvDsBbMBWkampepJtizNpi4UPyGrEimBbhLT4L2nLnzR6+ksnIGm7iGjXv8xq14bSWJwymLjvMk/6KAAAAAElFTkSuQmCC);
+		background-position: 100% (($input-height - 12) / 2 - 1);
+		background-repeat: no-repeat;
+		background-size: auto 12px;
+		padding-right: 12px;
+		&[multiple],
+		&[size] {
+			background-image: none;
+			padding-right: 0;
+		}
+	}
+}
+
+textarea.form-control {
+	height: auto;
+}
+
+.form-control-inverse {
+	color: $white;
+	@include placeholder($white-bg);
+}
+
+.form-control-static {
+	border-bottom: 1px solid $black-hint;
+	display: block;
+	font-size: $font-size;
+	font-weight: 400;
+	line-height: $line-height;
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: (($input-height - $line-height) / 2);
+	padding-bottom: (($input-height - $line-height) / 2 - 1);
+}
+
+// checkbox & radio
+	.checkbox,
+	.radio {
+		display: block;
+		position: relative;
+		.form-group & {
+			margin-top: (($input-height - $line-height) / 2);
+			padding-bottom: (($input-height - $line-height) / 2);
+		}
+		label {
+			cursor: pointer;
+			margin: 0;
+			min-height: $font-size;
+			padding-left: $line-height;
+		}
+		&.disabled,
+		fieldset[disabled] & {
+			label {
+				color: $black-hint;
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	.checkbox input[type="checkbox"],
+	.radio input[type="radio"] {
+		margin-left: ($line-height * -1);
+		position: absolute;
+	}
+
+	.checkbox-inline,
+	.radio-inline {
+		display: inline-block;
+		margin-right: $grid-gutter;
+	}
+
+// group
+	.form-group {
+		margin-top: $line-height;
+		margin-bottom: $line-height;
+	}
+
+	.form-group-btn {
+		margin-bottom: $line-height;
+		.btn {
+			margin-top: $line-height;
+			margin-right: $grid-gutter;
+		}
+	}
+
+// help
+	.form-help {
+		display: block;
+		font-size: $font-size-h6;
+		font-weight: 400;
+		margin-top: ($line-height / 2);
+		margin-bottom: ($line-height / 2);
+		position: relative;
+	}
+
+	.form-help-icon {
+		position: absolute;
+			top: (($line-height - $font-size-h6) / 2);
+			right: 0;
+	}
+
+	.form-help-msg {
+		padding-right: (18em / 14);
+	}
+
+// label
+	.form-label {
+		display: block;
+		margin-top: ($line-height / 2);
+		@each $color in $palette-list {
+			$i: index($palette-list, $color);
+			
+			.form-group-#{$color} & {
+				color: nth($palette-color, $i);
+			}
+		}
+		// 480
+			@include responsive(xs) {
+				[class*="col-xs"] > & {
+					@include form-label();
+				}
+			}
+		// 768
+			@include responsive(sm) {
+				[class*="col-sm"] > & {
+					@include form-label();
+				}
+			}
+		// 992
+			@include responsive(md) {
+				[class*="col-md"] > & {
+					@include form-label();
+				}
+			}
+		// 1440
+			@include responsive(lg) {
+				[class*="col-lg"] > & {
+					@include form-label();
+				}
+			}
+}
+
+	.label {
+		margin-bottom: ($line-height / 2);
+	}
+
+// legend
+	legend {
+		&[class*="col-xx-"] {
+			padding-left: ($grid-gutter / 2);
+		}
+		// 480
+			@include responsive(xs) {
+				&[class*="col-xs-"] {
+					padding-left: ($grid-gutter / 2);
+				}
+			}
+		// 768
+			@include responsive(sm) {
+				&[class*="col-sm-"] {
+					padding-left: ($grid-gutter / 2);
+				}
+			}
+		// 992
+			@include responsive(md) {
+				&[class*="col-md-"] {
+					padding-left: ($grid-gutter / 2);
+				}
+			}
+		// 1440
+			@include responsive(lg) {
+				&[class*="col-lg-"] {
+					padding-left: ($grid-gutter / 2);
+				}
+			}
+	}

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

@@ -0,0 +1,121 @@
+.modal {
+	display: none;
+	overflow: hidden;
+	outline: 0;
+	position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	z-index: $top-base;
+	-webkit-overflow-scrolling: touch;
+	-ms-overflow-style: -ms-autohiding-scrollbar;
+	.modal-open & {
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+}
+
+.modal-backdrop {
+	background-color: $black;
+	position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	z-index: ($top-base - 1);
+	@include opacity(0);
+	@include transition(opacity 0.3s $timing);
+	&.fade.in {
+		@include opacity(0.5);
+	}
+}
+
+.modal-close {
+	color: $black-sec;
+	cursor: pointer;
+	float: right;
+	font-size: $font-size-h4;
+	line-height: $line-height-h4;
+	&:focus,
+	&:hover {
+		color: $link-color;
+		text-decoration: none;
+	}
+}
+
+.modal-content {
+	background-clip: padding-box;
+	background-color: $white;
+	border: 1px solid transparent;
+	border-radius: 4px;
+	outline: 0;
+	position: relative;
+	@include box-shadow(0 1px 30px rgba(0, 0, 0, 0.5));
+	.modal-uploader & {
+		height: 100%;
+	}
+}
+
+.modal-dialog {
+	margin: ($line-height * 2) $grid-gutter;
+	position: relative;
+	.modal.fade & {
+		@include transform(scale(0, 0));
+		-webkit-transition: -webkit-transform 0.3s $timing 0s;
+		        transition: transform 0.3s $timing 0s;
+	}
+	.modal.fade.in & {
+		@include transform(scale(1, 1));
+	}
+	// 480
+		@include responsive(xs) {
+			&.modal-xs {
+				margin-right: auto;
+				margin-left: auto;
+				width: ($screen-xs - $grid-gutter * 2);
+			}
+		}
+	// 992
+		@include responsive(md) {
+			margin-right: auto;
+			margin-left: auto;
+			width: ($screen-md - $grid-gutter * 4);
+		}
+	// 1440
+		@include responsive(lg) {
+			width: ($screen-lg - $grid-gutter * 4);
+		}
+}
+
+.modal-footer {
+	padding-right: ($grid-gutter * 2);
+	padding-left: ($grid-gutter * 2);
+	.btn + .btn {
+		margin-left: $grid-gutter;
+	}
+}
+
+.modal-heading {
+	padding-top: $line-height;
+	padding-right: ($grid-gutter * 2);
+	padding-left: ($grid-gutter * 2);
+	position: relative;
+}
+
+.modal-inner {
+	padding-right: ($grid-gutter * 2);
+	padding-left: ($grid-gutter * 2);
+}
+
+.modal-open {
+	overflow: hidden;
+}
+
+.modal-title {
+	font-size: $font-size-h4;
+	line-height: $line-height-h4;
+	margin-top: 0;
+	margin-right: ($grid-gutter + 12);
+	margin-bottom: $line-height;
+}

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

@@ -0,0 +1,40 @@
+.nav {
+	list-style: none;
+	margin: $line-height 0;
+	padding: 0;
+	position: relative;
+	@include clearfix();
+	a,
+	.a {
+		display: block;
+		padding: ($line-height / 2) $grid-gutter;
+		position: relative;
+		&:focus,
+		&:hover {
+			text-decoration: none;
+		}
+	}
+	li {
+		display: block;
+		position: relative;
+	}
+	ul {
+		margin: 0;
+		padding: 0;
+	}
+}
+
+.nav-justified {
+	width: 100%;
+	> li {
+		display: table-cell !important;
+		float: none !important;
+		width: 1% !important;
+	}
+}
+
+.nav-list {
+	> li {
+		float: left;
+	}
+}

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

@@ -0,0 +1,8 @@
+.sortable-ghost {
+	@include opacity(0.5);
+}
+
+.sortable-handle {
+	cursor: move;
+	cursor: -webkit-grab;
+}

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

@@ -0,0 +1,71 @@
+.tab-nav {
+	border-bottom: 1px solid $black-hint;
+	margin-top: $line-height;
+	margin-bottom: $line-height;
+	position: relative;
+	text-align: center;
+	.nav {
+		margin-top: 0;
+		margin-bottom: -1px;
+		> li {
+			vertical-align: bottom;
+			> a {
+				color: $black-text;
+				padding-right: ($grid-gutter / 2);
+				padding-left: ($grid-gutter / 2);
+				text-transform: uppercase;
+				&:focus,
+				&:hover {
+					color: $link-color;
+				}
+			}
+			&.active > a {
+				color: $link-color;
+			}
+		}
+	}
+}
+
+.tab-nav-indicator {
+	background-color: $link-color;
+	height: 3px;
+	position: absolute;
+		bottom: -1px;
+	@include transition(left 0.3s $timing 0.15s, right 0.3s $timing);
+	&.reverse {
+		@include transition(left 0.3s $timing, right 0.3s $timing 0.15s);
+	}
+}
+
+.tab-pane {
+	display: none;
+	visibility: hidden;
+	&.active {
+		display: block;
+		visibility: visible;
+	}
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.tab-nav-#{$color} {
+			.tab-nav-indicator {
+				background-color: nth($palette-color, $i);
+			}
+			.nav {
+				> li {
+					> a {
+						&:focus,
+						&:hover {
+							color: nth($palette-color, $i);
+						}
+					}
+					&.active > a {
+						color: nth($palette-color, $i);
+					}
+				}
+			}
+		}
+	}