material-sass 0.0.3 → 0.0.4

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

@@ -24,6 +24,7 @@
 	@import "element/avatar";
 	@import "element/breadcrumb";
 	@import "element/button";
+	@import "element/button-flat";
 	@import "element/button-float";
 	@import "element/card";
 	@import "element/dropdown";
@@ -37,6 +38,8 @@
 	@import "element/modal";
 	@import "element/nav";
 	@import "element/progress";
+	@import "element/progress-circular";
+	@import "element/progress-loadbar";
 	@import "element/sortable";
 	@import "element/tab";
 	@import "element/table";

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

@@ -37,7 +37,7 @@
 // colour
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
-		
+
 		.avatar-#{$color} {
 			background-color: nth($palette-color, $i);
 			color: $white;
@@ -64,4 +64,4 @@
 
 .avatar-transparent {
 	background-color: transparent;
-}
+}

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

@@ -9,7 +9,7 @@
 		+ li:before {
 			@extend .icon;
 			color: $black-hint;
-			content: unicode($mdicon-var-chevron-right);
+			content: "chevron_right";
 			display: inline-block;
 			line-height: $line-height;
 			margin-left: 0.4em;
@@ -24,4 +24,4 @@
 			text-decoration: none;
 		}
 	}
-}
+}

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

@@ -0,0 +1,32 @@
+.btn-flat {
+	background-color: transparent;
+	box-shadow: none;
+	&:active,
+	&:focus,
+	&:hover {
+		background-color: $black-bg;
+		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);
+			}
+		}
+	}

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

@@ -1,6 +1,7 @@
 .fbtn {
 	background-color: $black-bg;
 	border-radius: 50%;
+	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
 	clear: both;
 	color: $black-text;
 	cursor: pointer;
@@ -10,25 +11,23 @@
 	padding: ($line-height / 2) 0;
 	position: relative;
 	text-align: center;
+	transition: all 0.3s $timing;
+	transition-property: box-shadow, opacity, transform;
 	width: ($line-height * 2);
-	@include box-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
-	@include transition(all 0.3s $timing);
-	-webkit-transition-property: box-shadow, opacity, -webkit-transform;
-	        transition-property: box-shadow, opacity, transform;
 }
 
 a.fbtn {
 	&:focus,
 	&:hover {
+		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5);
 		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;
@@ -49,12 +48,12 @@ a.fbtn {
 	}
 
 .fbtn-container {
+	backface-visibility: hidden;
 	position: fixed;
 		right: $grid-gutter;
 		bottom: ($line-height / 2);
+	transition: margin-bottom 0.3s $timing, right 0.3s $timing;
 	z-index: ($content-base + 1);
-	@include backface(hidden);
-	@include transition(margin-bottom 0.3s $timing, right 0.3s $timing);
 }
 
 .fbtn-dropdown {
@@ -65,67 +64,54 @@ a.fbtn {
 	position: absolute;
 		right: ($grid-gutter * -1);
 		bottom: 100%;
-	@include transition(max-height 0s 0.5s);
+	transition: max-height 0s 0.5s;
 	.fbtn-inner.open & {
 		max-height: 99999px;
 		overflow: visible;
-		@include transition(max-height 0s);
+		transition: max-height 0s;
 	}
 	.fbtn {
-		@include opacity(0);
-		@include transform(scale(0.5));
+		opacity: 0;
+		transform: scale(0.5);
 		&:nth-last-child(1) {
-			-webkit-transition-delay: 300ms;
-			        transition-delay: 300ms;
+			transition-delay: 300ms;
 		}
 		&:nth-last-child(2) {
-			-webkit-transition-delay: 250ms;
-			        transition-delay: 250ms;
+			transition-delay: 250ms;
 		}
 		&:nth-last-child(3) {
-			-webkit-transition-delay: 200ms;
-			        transition-delay: 200ms;
+			transition-delay: 200ms;
 		}
 		&:nth-last-child(4) {
-			-webkit-transition-delay: 150ms;
-			        transition-delay: 150ms;
+			transition-delay: 150ms;
 		}
 		&:nth-last-child(5) {
-			-webkit-transition-delay: 100ms;
-			        transition-delay: 100ms;
+			transition-delay: 100ms;
 		}
 		&:nth-last-child(6) {
-			-webkit-transition-delay: 50ms;
-			        transition-delay: 50ms;
+			transition-delay: 50ms;
 		}
 		.fbtn-inner.open & {
-			@include opacity(1);
-			@include transform(scale(1));
-			-webkit-transition-delay: 300ms;
-			        transition-delay: 300ms;
+			opacity: 1;
+			transform: scale(1);
+			transition-delay: 300ms;
 			&:nth-last-child(1) {
-				-webkit-transition-delay: 0s;
-				        transition-delay: 0s;
+				transition-delay: 0s;
 			}
 			&:nth-last-child(2) {
-				-webkit-transition-delay: 50ms;
-				        transition-delay: 50ms;
+				transition-delay: 50ms;
 			}
 			&:nth-last-child(3) {
-				-webkit-transition-delay: 100ms;
-				        transition-delay: 100ms;
+				transition-delay: 100ms;
 			}
 			&:nth-last-child(4) {
-				-webkit-transition-delay: 150ms;
-				        transition-delay: 150ms;
+				transition-delay: 150ms;
 			}
 			&:nth-last-child(5) {
-				-webkit-transition-delay: 200ms;
-				        transition-delay: 200ms;
+				transition-delay: 200ms;
 			}
 			&:nth-last-child(6) {
-				-webkit-transition-delay: 250ms;
-				        transition-delay: 250ms;
+				transition-delay: 250ms;
 			}
 		}
 	}
@@ -133,38 +119,39 @@ a.fbtn {
 
 .fbtn-ori,
 .fbtn-sub {
-	@include transition(all 0.3s $timing);
-	-webkit-transition-property: opacity, -webkit-transform;
-	        transition-property: opacity, transform;
+	transition: all 0.3s $timing;
+	transition-property: opacity, transform;
+	&.#{$mdicon-css-prefix} {
+		vertical-align: bottom;
+	}
 }
 
 .fbtn-ori {
 	.fbtn-inner.open & {
-		@include opacity(0);
-		@include transform(rotate(225deg));
+		opacity: 0;
+		transform: rotate(225deg);
 	}
 }
 
 .fbtn-rotate {
-	@include transition(all 0.3s $timing);
-	-webkit-transition-property: opacity, -webkit-transform;
-	        transition-property: opacity, transform;
+	transition: all 0.3s $timing;
+	transition-property: opacity, transform;
 	.fbtn-inner.open & {
-		@include transform(rotate(225deg));
+		transform: rotate(225deg);
 	}
 }
 
 .fbtn-sub {
+	opacity: 0;
 	position: absolute;
 		top: ($line-height / 2);
 		left: 0;
 	text-align: center;
+	transform: rotate(-225deg);
 	width: 100%;
-	@include opacity(0);
-	@include transform(rotate(-225deg));
 	.fbtn-inner.open & {
-		@include opacity(1);
-		@include transform(rotate(0));
+		opacity: 1;
+		transform: rotate(0);
 	}
 }
 
@@ -177,39 +164,39 @@ a.fbtn {
 	height: 0;
 	margin-top: ($line-height / -2);
 	margin-right: $grid-gutter;
+	opacity: 0;
 	overflow: hidden;
 	padding-right: ($grid-gutter / 2);
 	padding-left: ($grid-gutter / 2);
 	position: absolute;
 		top: 50%;
 		right: 100%;
+	transition: opacity 0.3s $timing;
 	white-space: nowrap;
 	width: 0;
-	@include opacity(0);
-	@include transition(opacity 0.3s $timing);
 	// touch & no touch
 		.no-touch .fbtn:hover & {
 			height: auto;
+			opacity: 1;
 			width: auto;
-			@include opacity(1);
 		}
 		.no-touch .fbtn-dropdown .fbtn:hover & {
 			height: 0;
+			opacity: 0;
 			width: 0;
-			@include opacity(0);
 		}
 		.no-touch .fbtn-inner.open .fbtn-dropdown .fbtn:hover & {
 			height: auto;
+			opacity: 1;
 			width: auto;
-			@include opacity(1);
 		}
 		.touch & {
 			display: none;
 			height: auto;
+			opacity: 1;
 			width: auto;
-			@include opacity(1);
 		}
 		.touch .fbtn-inner.open & {
 			display: block;
 		}
-}
+}

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

@@ -5,11 +5,12 @@
 	background-size: 100% 100%;
 	border: 1px solid transparent;
 	border-radius: 2px;
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15), 0 1px 5px 1px rgba(0, 0, 0, 0.15);
 	color: $black-text;
 	cursor: pointer;
 	display: inline-block;
 	font-size: $font-size;
-	font-weight: 400;
+	font-weight: $font-weight;
 	line-height: $line-height;
 	margin-bottom: 0;
 	max-width: 100%;
@@ -17,23 +18,22 @@
 	position: relative;
 	text-align: center;
 	text-transform: uppercase;
+	transition: background-color 0.3s $timing, box-shadow 0.3s $timing;
+	user-select: none;
 	vertical-align: middle;
 	white-space: nowrap;
-	@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,
 	&:hover {
+		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);
 		color: $black-text;
 		outline: 0;
 		text-decoration: none;
-		@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);
+		opacity: 0.5;
 	}
 	&.waves-effect {
 		border: 0;
@@ -44,7 +44,7 @@
 // colour
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
-		
+
 		.btn-#{$color} {
 			background-color: nth($palette-color, $i);
 			color: $white;
@@ -61,6 +61,15 @@
 	}
 
 // size
+	.btn-lg {
+		font-size: $font-size-h4;
+		line-height: $line-height-h4;
+		padding: (($base * 3 * 2.5 - $line-height-h4 - 2) / 2) ($grid-gutter * 1.5 - 1);
+		&.waves-effect {
+			padding: (($base * 3 * 2.5 - $line-height-h4) / 2) ($grid-gutter * 1.5);
+		}
+	}
+
 	.btn-sm {
 		font-size: $font-size-h6;
 		line-height: ($line-height - 2);
@@ -76,44 +85,11 @@
 	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);
-			}
-		}
-	}
-
 .btn-text {
 	color: $black-text;
 	display: inline-block;
 	font-size: $font-size;
-	font-weight: 400;
+	font-weight: $font-weight;
 	line-height: $line-height;
 	padding: (($btn-height - $line-height) / 2) 0;
-}
+}

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

@@ -1,16 +1,12 @@
 .card {
 	background-color: $white;
 	border-radius: 2px;
+	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
 	display: block;
-	display: -webkit-box;
-	display:    -moz-box;
-	display:     -ms-flexbox;
-	display: -webkit-flex;
-	display:         flex;
+	display: flex;
 	margin-bottom: $line-height;
+	transition: box-shadow 0.3s $timing;
 	position: relative;
-	@include box-shadow(0 1px 6px rgba(0, 0, 0, 0.3));
-	@include transition(box-shadow 0.3s $timing);
 	&[class*="-bg"] {
 		color: $white;
 	}
@@ -29,7 +25,7 @@
 		$i: index($palette-list, $color);
 
 		.card-#{$color} {
-			@include box-shadow(0 0 2px rgba(0, 0, 0, 0.3), 0 1px 6px rgba(red(nth($palette-color, $i)), green(nth($palette-color, $i)), blue(nth($palette-color, $i)), 0.3));
+			box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 1px 6px rgba(red(nth($palette-color, $i)), green(nth($palette-color, $i)), blue(nth($palette-color, $i)), 0.3);
 			// no boxshadow
 				.no-boxshadow & {
 					border-color: nth($palette-color-light, $i);
@@ -176,11 +172,7 @@
 }
 
 .card-main {
-	-webkit-box-flex: 1;
-	   -moz-box-flex: 1;
-	    -webkit-flex: 1;
-	        -ms-flex: 1;
-	            flex: 1;
+	flex: 1;
 }
 
 // colour
@@ -213,11 +205,7 @@
 	}
 	&.card-side-right {
 		border-radius: 0 2px 2px 0;
-		-webkit-box-ordinal-group: 2;
-		   -moz-box-ordinal-group: 2;
-		           -ms-flex-order: 2;
-		            -webkit-order: 2;
-		                    order: 2;
+		order: 2;
 	}
 }
 
@@ -254,4 +242,4 @@
 
 .card-wrap {
 	margin-top: $line-height;
-}
+}

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

@@ -1,9 +1,9 @@
 .dropdown {
 	position: relative;
-	@include transition(z-index 0s 0.3s);
+	transition: z-index 0s 0.3s;
 	&.open {
+		transition: z-index 0s;
 		z-index: ($content-base + 1);
-		@include transition(z-index 0s);
 	}
 	[data-toggle="dropdown"] {
 		cursor: pointer;
@@ -18,9 +18,11 @@
 	background-color: $white;
 	border: 1px solid $black-hint;
 	border-radius: 0 2px 2px 2px;
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15);
 	list-style: none;
 	margin: -1px 0 0 !important;
 	min-width: 100%;
+	opacity: 0;
 	padding-top: ($line-height / 2) !important;
 	padding-right: 0;
 	padding-bottom: ($line-height / 2) !important;
@@ -28,17 +30,13 @@
 	position: absolute;
 		top: 100%;
 		left: 0;
-	@include box-shadow(0 5px 10px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15));
-	@include opacity(0);
-	@include transform(scale(0.25, 0));
-	-webkit-transform-origin: 0 0;
-	        transform-origin: 0 0;
-	@include transition(all 0.3s $timing);
-	-webkit-transition-property: opacity, -webkit-transform;
-	        transition-property: opacity, transform;
+	transform: scale(0.25, 0);
+	transform-origin: 0 0;
+	transition: all 0.3s $timing;
+	transition-property: opacity, transform;
 	.dropdown.open & {
-		@include opacity(1);
-		@include transform(scale(1, 1));
+		opacity: 1;
+		transform: scale(1, 1);
 	}
 	&.dropdown-menu-right,
 	.dropdown.pull-right &,
@@ -47,8 +45,7 @@
 		// position
 			right: 0;
 			left: auto;
-		-webkit-transform-origin: 100% 0;
-		        transform-origin: 100% 0;
+		transform-origin: 100% 0;
 	}
 	a,
 	.a {
@@ -84,7 +81,7 @@
 }
 
 .dropdown-toggle {
-	@include transition(background-color 0.3s $timing);
+	transition: background-color 0.3s $timing;
 	.dropdown.open & {
 		background-color: $black-bg;
 		border-radius: 2px 2px 0 0;
@@ -107,8 +104,8 @@
 	z-index: 1;
 	.dropdown.open & {
 		background-color: $white;
+		box-shadow: none;
 		color: $black-text;
-		@include box-shadow(none);
 	}
 	~ .dropdown-menu {
 		min-width: 101%;
@@ -117,7 +114,7 @@
 		// position
 			top: ($line-height / -2);
 			left: -1px;
-		@include transform(scale(1, 0));
+		transform: scale(1, 0);
 		&.dropdown-menu-right,
 		.dropdown.pull-right &,
 		.nav.pull-right & {
@@ -132,4 +129,4 @@
 	margin-top: $line-height;
 	margin-bottom: $line-height;
 	@include clearfix();
-}
+}

data/app/assets/stylesheets/material/element/_form-adv-checkbox.scss

@@ -11,7 +11,7 @@
 	}
 	.circle {
 		border: 2px solid $black-sec;
-		@include transition(border-color 0.3s $timing);
+		transition: border-color 0.3s $timing;
 	}
 	&.disabled,
 	fieldset[disabled] & {
@@ -27,21 +27,20 @@
 	}
 	.circle-check {
 		background-color: transparent;
-		@include transform(scale(0));
-		@include transition(all 0.3s $timing);
-		-webkit-transition-property: background-color, -webkit-transform;
-		        transition-property: background-color, transform;
+		transform: scale(0);
+		transition: all 0.3s $timing;
+		transition-property: background-color, transform;
 		&:after {
 			background-color: $brand-color;
 			border-radius: 50%;
 			content: "";
 			display: block;
 			height: ($font-size * 5);
+			opacity: 0;
 			position: absolute;
 				top: ($font-size * -2);
 				left: ($font-size * -2);
 			width: ($font-size * 5);
-			@include opacity(0);
 		}
 	}
 	&.disabled,
@@ -51,18 +50,17 @@
 		}
 	}
 	input.access-hide:checked ~ .circle-check {
-		@include transform(scale(0.5));
+		transform: scale(0.5);
 		&:after {
-			@include animation(circle-check 0.6s);
+			animation: circle-check 0.6s;
 		}
 	}
 	.circle-icon {
 		background-color: transparent;
 		color: transparent;
-		@include transform(scale(0.5));
-		@include transition(all 0.3s $timing);
-		-webkit-transition-property: background-color, color, -webkit-transform;
-		        transition-property: background-color, color, transform;
+		transform: scale(0.5);
+		transition: all 0.3s $timing;
+		transition-property: background-color, color, transform;
 		&:before {
 			// position
 				top: auto;
@@ -71,7 +69,7 @@
 	input.access-hide:checked ~ .circle-icon {
 		background-color: $brand-color;
 		color: $white;
-		@include transform(scale(1));
+		transform: scale(1);
 	}
 	&.disabled,
 	fieldset[disabled] & {
@@ -98,18 +96,6 @@
 }
 
 // animation
-	@-webkit-keyframes circle-check {
-		0% {
-			opacity: 0;
-		}
-		25% {
-			opacity: 0.25;
-		}
-		100% {
-			opacity: 0;
-		}
-	}
-
 	@keyframes circle-check {
 		0% {
 			opacity: 0;
@@ -120,4 +106,4 @@
 		100% {
 			opacity: 0;
 		}
-	}
+	}