material-sass 0.0.1 → 0.0.2

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

@@ -1,16 +1,49 @@
-// 1. import mixins and variables
-	@import "mixin";
-	@import "variable";
+@charset "UTF-8";
 
-// 2. reset css
+@import "mixin/css3";
+@import "mixin/grid";
+@import "mixin/responsive";
+@import "mixin/utilities";
+
+@import "variable";
+
+// css reset
 	@import "reset";
 
-// 3. ui elements
-	@import "addon";
+// elements
+	@import "addon/material-design-icon";
+	@import "addon/waves";
+
 	@import "code";
 	@import "grid";
-	@import "utilitise";
+	@import "print";
+	@import "utilities";
+	@import "utilities-responsive";
+
+// theme elements
+	@import "element/avatar";
+	@import "element/breadcrumb";
+	@import "element/button";
+	@import "element/button-float";
+	@import "element/card";
+	@import "element/dropdown";
+	@import "element/form";
+	@import "element/form-adv-checkbox";
+	@import "element/form-adv-datepicker";
+	@import "element/form-adv-label";
+	@import "element/form-adv-switch";
+	@import "element/form-adv-textarea";
+	@import "element/label";
+	@import "element/modal";
+	@import "element/nav";
+	@import "element/progress";
+	@import "element/sortable";
+	@import "element/tab";
+	@import "element/table";
+	@import "element/tile";
+	@import "element/toast";
 
-// 4. theme elements
-	@import "element";
-	@import "theme";
+	@import "theme/content";
+	@import "theme/footer";
+	@import "theme/header";
+	@import "theme/menu";

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

@@ -11,24 +11,6 @@
 	&: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;
 	}
@@ -60,4 +42,26 @@
 			background-color: nth($palette-color, $i);
 			color: $white;
 		}
-	}
+	}
+
+.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;
+}

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

@@ -0,0 +1,27 @@
+.breadcrumb {
+	list-style: none;
+	margin: $line-height 0;
+	padding: ($line-height / 2) 0;
+	@include clearfix();
+	> li {
+		display: block;
+		float: left;
+		+ li:before {
+			@extend .icon;
+			color: $black-hint;
+			content: unicode($mdicon-var-chevron-right);
+			display: inline-block;
+			line-height: $line-height;
+			margin-left: 0.4em;
+		}
+	}
+	> .active {
+		color: $black-text;
+		> a,
+		> .a {
+			color: $black-text;
+			cursor: text;
+			text-decoration: none;
+		}
+	}
+}

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

@@ -2,7 +2,7 @@
 	background-color: $black-bg;
 	border-radius: 50%;
 	clear: both;
-	color: $white;
+	color: $black-text;
 	cursor: pointer;
 	display: block;
 	font-size: $line-height;
@@ -11,12 +11,69 @@
 	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 transition(all 0.3s $timing);
+	-webkit-transition-property: box-shadow, opacity, -webkit-transform;
+	        transition-property: box-shadow, opacity, transform;
+}
+
+a.fbtn {
+	&:focus,
+	&:hover {
+		color: $black-text;
+		@include box-shadow(0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5));
+	}
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.fbtn-#{$color} {
+			background-color: nth($palette-color, $i);
+			color: $white !important;
+		}
+	}
+
+// size
+	.fbtn-lg {
+		padding: ($line-height * 0.75) 0;
+		width: ($line-height * 2.5);
+		.fbtn-sub {
+			// position
+				top: ($line-height * 0.75);
+		}
+		~ .fbtn-dropdown {
+			min-width: ($grid-gutter * 2 + $line-height * 2.5);
+		}
+	}
+
+.fbtn-container {
+	position: fixed;
+		right: $grid-gutter;
+		bottom: $line-height;
+	z-index: ($content-base + 1);
+	@include backface(hidden);
+	@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 0.5s);
+	.fbtn-inner.open & {
+		max-height: 99999px;
+		overflow: visible;
+		@include transition(max-height 0s);
+	}
+	.fbtn {
+		margin: ($line-height / 2) auto;
 		@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;
@@ -74,72 +131,85 @@
 	}
 }
 
-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-ori,
+.fbtn-sub {
+	@include transition(all 0.3s $timing);
+	-webkit-transition-property: opacity, -webkit-transform;
+	        transition-property: opacity, transform;
 }
 
-.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-ori {
 	.fbtn-inner.open & {
-		max-height: 99999px;
-		overflow: visible;
-		@include transition(max-height 0s linear 0s);
+		@include opacity(0);
+		@include transform(rotate(225deg));
 	}
 }
 
 .fbtn-rotate {
-	@include transform(rotate(0deg));
-	-webkit-transition: -webkit-transform 0.3s $timing 0s;
-	        transition: transform 0.3s $timing 0s;
+	@include transition(all 0.3s $timing);
+	-webkit-transition-property: opacity, -webkit-transform;
+	        transition-property: opacity, transform;
 	.fbtn-inner.open & {
 		@include transform(rotate(225deg));
 	}
 }
 
+.fbtn-sub {
+	position: absolute;
+		top: ($line-height / 2);
+		left: 0;
+	text-align: center;
+	width: 100%;
+	@include opacity(0);
+	@include transform(rotate(-225deg));
+	.fbtn-inner.open & {
+		@include opacity(1);
+		@include transform(rotate(0));
+	}
+}
+
 .fbtn-text {
 	background-color: $black-text;
 	background-color: rgba(0, 0, 0, 0.8);
 	border-radius: 2px;
-	display: none;
+	color: $white;
 	font-size: $font-size-h6;
+	height: 0;
 	margin-top: ($line-height / -2);
 	margin-right: $grid-gutter;
+	overflow: hidden;
 	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);
+	width: 0;
+	@include opacity(0);
+	@include transition(opacity 0.3s $timing);
+	// touch & no touch
+		.no-touch .fbtn:hover & {
+			height: auto;
+			width: auto;
+			@include opacity(1);
+		}
+		.no-touch .fbtn-dropdown .fbtn:hover & {
+			height: 0;
+			width: 0;
+			@include opacity(0);
+		}
+		.no-touch .fbtn-inner.open .fbtn-dropdown .fbtn:hover & {
+			height: auto;
+			width: auto;
+			@include opacity(1);
+		}
+		.touch & {
+			display: none;
+			height: auto;
+			width: auto;
+			@include opacity(1);
+		}
+		.touch .fbtn-inner.open & {
+			display: block;
 		}
-	}
+}

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

@@ -13,14 +13,14 @@
 	line-height: $line-height;
 	margin-bottom: 0;
 	max-width: 100%;
-	padding: (($btn-height - $line-height - 2) / 2) $grid-gutter;
+	padding: (($btn-height - $line-height - 2) / 2) ($grid-gutter - 1);
 	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 box-shadow(0 1px 5px rgba(0, 0, 0, 0.15), 0 1px 5px 1px rgba(0, 0, 0, 0.15));
+	@include transition(background-color 0.3s $timing, box-shadow 0.3s $timing);
 	@include user-select(none);
 	&:active,
 	&:focus,
@@ -28,34 +28,19 @@
 		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);
+		@include box-shadow(0 1px 5px rgba(0, 0, 0, 0.15), 0 5px 10px 1px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15));
 	}
 	&[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%;
+	&.waves-effect {
+		border: 0;
+		padding: (($btn-height - $line-height) / 2) $grid-gutter;
 	}
 }
 
-.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);
@@ -68,64 +53,67 @@
 			&: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;
+// size
+	.btn-sm {
+		font-size: $font-size-h6;
+		line-height: ($line-height - 2);
+		padding: 0 ($grid-gutter / 2 - 1);
+		&.waves-effect {
+			padding: 1px ($grid-gutter / 2);
 		}
 	}
-	
-	// flat colour
-		@each $color in $palette-list {
-			$i: index($palette-list, $color);
 
-			.btn-flat.btn-#{$color} {
+.btn-block {
+	display: block;
+	white-space: normal;
+	width: 100%;
+}
+
+.btn-flat {
+	background-color: transparent;
+	@include box-shadow(none);
+	&:active,
+	&:focus,
+	&:hover {
+		background-color: $black-bg;
+		@include box-shadow(none);
+	}
+	&[disabled],
+	fieldset[disabled] & {
+		color: $black-text;
+	}
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.btn-flat.btn-#{$color} {
+			color: nth($palette-color, $i);
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: nth($palette-color-light, $i);
+			}
+			&[disabled],
+			fieldset[disabled] & {
 				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;
-	}
+.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;
+}