material-sass 0.0.3 → 0.0.4

data/app/assets/stylesheets/material/element/_progress-circular.scss

@@ -0,0 +1,165 @@
+.progress-circular {
+	height: ($line-height * 2);
+	margin-top: $line-height;
+	margin-bottom: $line-height;
+	overflow: hidden;
+	position: relative;
+	width: ($line-height * 2);
+}
+
+.progress-circular-center {
+	margin-right: auto;
+	margin-left: auto;
+}
+
+.progress-circular-gap {
+	border-top: ($base / 2) solid $link-color;
+	position: absolute;
+		top: 0;
+		right: ($line-height - 1);
+		bottom: 0;
+		left: ($line-height - 1);
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.progress-circular-gap {
+			.progress-circular-#{$color} & {
+				border-top-color: nth($palette-color, $i);
+			}
+		}
+	}
+
+.progress-circular-inline {
+	display: inline-block;
+	margin-right: $grid-gutter;
+	margin-left: $grid-gutter;
+}
+
+.progress-circular-inner {
+	animation: pcircular-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
+	height: ($line-height * 2);
+	position: relative;
+	width: ($line-height * 2);
+	will-change: transform;
+}
+
+.progress-circular-left,
+.progress-circular-right {
+	height: ($line-height * 2);
+	overflow: hidden;
+	position: absolute;
+		top: 0;
+	width: $line-height;
+}
+
+.progress-circular-left {
+	// position
+		left: 0;
+}
+
+.progress-circular-right {
+	// position
+		right: 0;
+}
+
+.progress-circular-spinner {
+	border: ($base / 2) solid $link-color;
+	border-bottom-color: transparent;
+	border-radius: 50%;
+	height: ($line-height * 2);
+	position: absolute;
+		top: 0;
+	width: ($line-height * 2);
+	will-change: transform;
+	.progress-circular-left & {
+		animation: pcircular-spinner-left 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
+		border-right-color: transparent;
+		// position
+			left: 0;
+	}
+	.progress-circular-right & {
+		animation: pcircular-spinner-right 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
+		border-left-color: transparent;
+		// position
+			right: 0;
+	}
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.progress-circular-spinner {
+			.progress-circular-#{$color} & {
+				border-top-color: nth($palette-color, $i);
+			}
+			.progress-circular-#{$color} .progress-circular-left & {
+				border-left-color: nth($palette-color, $i);
+			}
+			.progress-circular-#{$color} .progress-circular-right & {
+				border-right-color: nth($palette-color, $i);
+			}
+		}
+	}
+
+.progress-circular-wrapper {
+	animation: pcircular-wrapper-rotate 2.91667s linear infinite;
+	will-change: transform;
+}
+
+// animation
+	@keyframes pcircular-inner-rotate {
+		12.5% {
+			transform: rotate(135deg);
+		}
+		25% {
+			transform: rotate(270deg);
+		}
+		37.5% {
+			transform: rotate(405deg);
+		}
+		50% {
+			transform: rotate(540deg);
+		}
+		62.5% {
+			transform: rotate(675deg);
+		}
+		75% {
+			transform: rotate(810deg);
+		}
+		87.5% {
+			transform: rotate(945deg);
+		}
+		100% {
+			transform: rotate(1080deg);
+		}
+	}
+
+	@keyframes pcircular-spinner-left {
+		0%,
+		100% {
+			transform: rotate(130deg);
+		}
+		50% {
+			transform: rotate(-5deg);
+		}
+	}
+
+	@keyframes pcircular-spinner-right {
+		0%,
+		100% {
+			transform: rotate(-130deg);
+		}
+		50% {
+			transform: rotate(5deg);
+		}
+	}
+
+	@keyframes pcircular-wrapper-rotate {
+		100% {
+			transform: rotate(360deg);
+		}
+	}

data/app/assets/stylesheets/material/element/_progress-loadbar.scss

@@ -0,0 +1,103 @@
+.load-bar {
+	float: right;
+	height: 100%;
+	overflow: hidden;
+	width: 50%;
+	&:first-child {
+		float: left;
+	}
+}
+
+.load-bar-base {
+	animation: load-bar-right-in 1s $timing 1 forwards;
+	background-color: $link-color;
+	float: left;
+	height: 100%;
+	overflow: hidden;
+	transform: translate3d(-100%, 0, 0);
+	transform-origin: top right;
+	width: 100%;
+	will-change: transform;
+	.load-bar:first-child & {
+		animation: load-bar-left-in 1s $timing 1 forwards;
+		transform: translate3d(100%, 0, 0);
+		transform-origin: top left;
+	}
+}
+
+// animation
+	@keyframes load-bar-left-in {
+		0% {
+			transform: translate(100%, 0);
+			transform: translate3d(100%, 0, 0);
+		}
+		100% {
+			transform: translate(0, 0);
+			transform: translate3d(0, 0, 0);
+		}
+	}
+
+	@keyframes load-bar-right-in {
+		0% {
+			transform: translate(-100%, 0);
+			transform: translate3d(-100%, 0, 0);
+		}
+		100% {
+			transform: translate(0, 0);
+			transform: translate3d(0, 0, 0);
+		}
+	}
+
+.load-bar-content {
+	animation: load-bar-right 4s linear infinite forwards;
+	animation-delay: 1s;
+	float: left;
+	height: 100%;
+	position: relative;
+	transform-origin: top center;
+	width: 400%;
+	will-change: transform;
+	.load-bar:first-child & {
+		animation: load-bar-left 4s linear infinite forwards;
+		animation-delay: 1s;
+	}
+}
+
+// animation
+	@keyframes load-bar-left {
+		0% {
+			transform: translate(0, 0);
+			transform: translate3d(0, 0, 0);
+		}
+		100% {
+			transform: translate(-100%, 0);
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+
+	@keyframes load-bar-right {
+		0% {
+			transform: translate(-100%, 0);
+			transform: translate3d(-100%, 0, 0);
+		}
+		100% {
+			transform: translate(0, 0);
+			transform: translate3d(0, 0, 0);
+		}
+	}
+
+.load-bar-progress {
+	background-color: transparent;
+	float: left;
+	height: 100%;
+	width: 25%;
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.load-bar-progress-#{$color} {
+			background-color: nth($palette-color, $i);
+		}
+	}

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

@@ -1,154 +1,3 @@
-.load-bar {
-	float: right;
-	height: 100%;
-	overflow: hidden;
-	width: 50%;
-	&:first-child {
-		float: left;
-	}
-}
-
-.load-bar-base {
-	background-color: $link-color;
-	float: left;
-	height: 100%;
-	overflow: hidden;
-	width: 100%;
-	@include animation(load-bar-right-in 1s $timing 1 forwards);
-	@include transform(translate3d(-100%, 0, 0));
-	-webkit-transform-origin: top right;
-	        transform-origin: top right;
-	.load-bar:first-child & {
-		@include animation(load-bar-left-in 1s $timing 1 forwards);
-		@include transform(translate3d(100%, 0, 0));
-		-webkit-transform-origin: top left;
-		        transform-origin: top left;
-	}
-}
-
-// animation
-	@-webkit-keyframes load-bar-left-in {
-		0% {
-			@include transform(translate(100%, 0));
-			@include transform(translate3d(100%, 0, 0));
-		}
-		100% {
-			@include transform(translate(0, 0));
-			@include transform(translate3d(0, 0, 0));
-		}
-	}
-
-	@keyframes load-bar-left-in {
-		0% {
-			@include transform(translate(100%, 0));
-			@include transform(translate3d(100%, 0, 0));
-		}
-		100% {
-			@include transform(translate(0, 0));
-			@include transform(translate3d(0, 0, 0));
-		}
-	}
-
-	@-webkit-keyframes load-bar-right-in {
-		0% {
-			@include transform(translate(-100%, 0));
-			@include transform(translate3d(-100%, 0, 0));
-		}
-		100% {
-			@include transform(translate(0, 0));
-			@include transform(translate3d(0, 0, 0));
-		}
-	}
-
-	@keyframes load-bar-right-in {
-		0% {
-			@include transform(translate(-100%, 0));
-			@include transform(translate3d(-100%, 0, 0));
-		}
-		100% {
-			@include transform(translate(0, 0));
-			@include transform(translate3d(0, 0, 0));
-		}
-	}
-
-.load-bar-content {
-	float: left;
-	height: 100%;
-	position: relative;
-	width: 400%;
-	@include animation(load-bar-right 4s linear infinite forwards);
-	-webkit-animation-delay: 1s;
-	        animation-delay: 1s;
-	-webkit-transform-origin: top center;
-	        transform-origin: top center;
-	.load-bar:first-child & {
-		@include animation(load-bar-left 4s linear infinite forwards);
-		-webkit-animation-delay: 1s;
-		        animation-delay: 1s;
-	}
-}
-
-// animation
-	@-webkit-keyframes load-bar-left {
-		0% {
-			@include transform(translate(0, 0));
-			@include transform(translate3d(0, 0, 0));
-		}
-		100% {
-			@include transform(translate(-100%, 0));
-			@include transform(translate3d(-100%, 0, 0));
-		}
-	}
-
-	@keyframes load-bar-left {
-		0% {
-			@include transform(translate(0, 0));
-			@include transform(translate3d(0, 0, 0));
-		}
-		100% {
-			@include transform(translate(-100%, 0));
-			@include transform(translate3d(-100%, 0, 0));
-		}
-	}
-
-	@-webkit-keyframes load-bar-right {
-		0% {
-			@include transform(translate(-100%, 0));
-			@include transform(translate3d(-100%, 0, 0));
-		}
-		100% {
-			@include transform(translate(0, 0));
-			@include transform(translate3d(0, 0, 0));
-		}
-	}
-
-	@keyframes load-bar-right {
-		0% {
-			@include transform(translate(-100%, 0));
-			@include transform(translate3d(-100%, 0, 0));
-		}
-		100% {
-			@include transform(translate(0, 0));
-			@include transform(translate3d(0, 0, 0));
-		}
-	}
-
-.load-bar-progress {
-	background-color: transparent;
-	float: left;
-	height: 100%;
-	width: 25%;
-}
-
-// color
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-		
-		.load-bar-progress-#{$color} {
-			background-color: nth($palette-color, $i);
-		}
-	}
-
 .progress {
 	background-color: lighten($link-color, 30%);
 	height: ($base / 2);
@@ -165,13 +14,13 @@
 	position: absolute;
 		top: 0;
 		left: 0;
-	@include transition(width 0.3s $timing);
+	transition: width 0.3s $timing;
 }
 
-// color
+// colour
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
-		
+
 		.progress-#{$color} {
 			background-color: nth($palette-color-light, $i);
 			.progress-bar {
@@ -195,34 +44,15 @@
 		will-change: left, right;
 	}
 	&:after {
-		@include animation(pbar-indeterminate-one 3s cubic-bezier(0.6, 0.8, 0.6, 0.4) infinite);
+		animation: pbar-indeterminate-one 3s cubic-bezier(0.6, 0.8, 0.6, 0.4) infinite;
 	}
 	&:before {
-		@include animation(pbar-indeterminate-two 3s cubic-bezier(0.2, 0.8, 0.2, 0.8) infinite);
-		-webkit-animation-delay: 1.5s;
-		        animation-delay: 1.5s;
+		animation: pbar-indeterminate-two 3s cubic-bezier(0.2, 0.8, 0.2, 0.8) infinite;
+		animation-delay: 1.5s;
 	}
 }
 
 // animation
-	@-webkit-keyframes pbar-indeterminate-one {
-		0% {
-			// position
-				right: 100%;
-				left: -35%;
-		}
-		60% {
-			// position
-				right: -90%;
-				left: 100%;
-		}
-		100% {
-			// position
-				right: -90%;
-				left: 100%;
-		}
-	}
-
 	@keyframes pbar-indeterminate-one {
 		0% {
 			// position
@@ -241,24 +71,6 @@
 		}
 	}
 
-	@-webkit-keyframes pbar-indeterminate-two {
-		0% {
-			// position
-				right: 100%;
-				left: -150%;
-		}
-		60% {
-			// position
-				right: -35%;
-				left: 135%;
-		}
-		100% {
-			// position
-				right: -35%;
-				left: 135%;
-		}
-	}
-
 	@keyframes pbar-indeterminate-two {
 		0% {
 			// position
@@ -277,222 +89,6 @@
 		}
 	}
 
-.progress-circular {
-	height: ($line-height * 2);
-	margin-top: $line-height;
-	margin-bottom: $line-height;
-	overflow: hidden;
-	position: relative;
-	width: ($line-height * 2);
-}
-
-.progress-circular-center {
-	margin-right: auto;
-	margin-left: auto;
-}
-
-.progress-circular-gap {
-	border-top: ($base / 2) solid $link-color;
-	position: absolute;
-		top: 0;
-		right: ($line-height - 1);
-		bottom: 0;
-		left: ($line-height - 1);
-}
-
-// colour
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-
-		.progress-circular-gap {
-			.progress-circular-#{$color} & {
-				border-top-color: nth($palette-color, $i);
-			}
-		}
-	}
-
-.progress-circular-inline {
-	display: inline-block;
-	margin-right: $grid-gutter;
-	margin-left: $grid-gutter;
-}
-
-.progress-circular-inner {
-	height: ($line-height * 2);
-	position: relative;
-	width: ($line-height * 2);
-	@include animation(cbar-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite);
-}
-
-.progress-circular-left,
-.progress-circular-right {
-	height: ($line-height * 2);
-	overflow: hidden;
-	position: absolute;
-		top: 0;
-	width: $line-height;
-}
-
-.progress-circular-left {
-	// position
-		left: 0;
-}
-
-.progress-circular-right {
-	// position
-		right: 0;
-}
-
-.progress-circular-spinner {
-	border: ($base / 2) solid $link-color;
-	border-bottom-color: transparent;
-	border-radius: 50%;
-	height: ($line-height * 2);
-	position: absolute;
-		top: 0;
-	width: ($line-height * 2);
-	.progress-circular-left & {
-		border-right-color: transparent;
-		// position
-			left: 0;
-		@include animation(cbar-spinner-left 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite);
-	}
-	.progress-circular-right & {
-		border-left-color: transparent;
-		// position
-			right: 0;
-		@include animation(cbar-spinner-right 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite);
-	}
-}
-
-// colour
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-
-		.progress-circular-spinner {
-			.progress-circular-#{$color} & {
-				border-top-color: nth($palette-color, $i);
-			}
-			.progress-circular-#{$color} .progress-circular-left & {
-				border-left-color: nth($palette-color, $i);
-			}
-			.progress-circular-#{$color} .progress-circular-right & {
-				border-right-color: nth($palette-color, $i);
-			}
-		}
-	}
-
-.progress-circular-wrapper {
-	@include animation(cbar-wrapper-rotate 2.91667s linear infinite);
-}
-
-// animation
-	@-webkit-keyframes cbar-inner-rotate {
-		12.5% {
-			@include transform(rotate(135deg));
-		}
-		25% {
-			@include transform(rotate(270deg));
-		}
-		37.5% {
-			@include transform(rotate(405deg));
-		}
-		50% {
-			@include transform(rotate(540deg));
-		}
-		62.5% {
-			@include transform(rotate(675deg));
-		}
-		75% {
-			@include transform(rotate(810deg));
-		}
-		87.5% {
-			@include transform(rotate(945deg));
-		}
-		100% {
-			@include transform(rotate(1080deg));
-		}
-	}
-
-	@keyframes cbar-inner-rotate {
-		12.5% {
-			@include transform(rotate(135deg));
-		}
-		25% {
-			@include transform(rotate(270deg));
-		}
-		37.5% {
-			@include transform(rotate(405deg));
-		}
-		50% {
-			@include transform(rotate(540deg));
-		}
-		62.5% {
-			@include transform(rotate(675deg));
-		}
-		75% {
-			@include transform(rotate(810deg));
-		}
-		87.5% {
-			@include transform(rotate(945deg));
-		}
-		100% {
-			@include transform(rotate(1080deg));
-		}
-	}
-
-	@-webkit-keyframes cbar-spinner-left {
-		0%,
-		100% {
-			@include transform(rotate(130deg));
-		}
-		50% {
-			@include transform(rotate(-5deg));
-		}
-	}
-
-	@keyframes cbar-spinner-left {
-		0%,
-		100% {
-			@include transform(rotate(130deg));
-		}
-		50% {
-			@include transform(rotate(-5deg));
-		}
-	}
-
-	@-webkit-keyframes cbar-spinner-right {
-		0%,
-		100% {
-			@include transform(rotate(-130deg));
-		}
-		50% {
-			@include transform(rotate(5deg));
-		}
-	}
-
-	@keyframes cbar-spinner-right {
-		0%,
-		100% {
-			@include transform(rotate(-130deg));
-		}
-		50% {
-			@include transform(rotate(5deg));
-		}
-	}
-
-	@-webkit-keyframes cbar-wrapper-rotate {
-		100% {
-			@include transform(rotate(360deg));
-		}
-	}
-
-	@keyframes cbar-wrapper-rotate {
-		100% {
-			@include transform(rotate(360deg));
-		}
-	}
-
 .progress-position-absolute-bottom,
 .progress-position-absolute-top,
 .progress-position-fixed-bottom,
@@ -523,4 +119,4 @@
 .progress-position-fixed-top,
 .progress-position-fixed-bottom {
 	position: fixed;
-}
+}

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

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