material-sass 0.0.1 → 0.0.2

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

@@ -0,0 +1,22 @@
+.label {
+	background-color: $black-sec;
+	border-radius: 2px;
+	color: $white;
+	display: inline;
+	font-size: 75%;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 1;
+	padding: 0.2em 0.6em;
+	vertical-align: baseline;
+	white-space: nowrap;
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.label-#{$color} {
+			background-color: nth($palette-color, $i);
+		}
+	}

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

@@ -10,6 +10,7 @@
 	z-index: $top-base;
 	-webkit-overflow-scrolling: touch;
 	-ms-overflow-style: -ms-autohiding-scrollbar;
+	@include backface(hidden);
 	.modal-open & {
 		overflow-x: hidden;
 		overflow-y: auto;
@@ -24,6 +25,7 @@
 		bottom: 0;
 		left: 0;
 	z-index: ($top-base - 1);
+	@include backface(hidden);
 	@include opacity(0);
 	@include transition(opacity 0.3s $timing);
 	&.fade.in {
@@ -34,9 +36,13 @@
 .modal-close {
 	color: $black-sec;
 	cursor: pointer;
+	display: block;
 	float: right;
 	font-size: $font-size-h4;
 	line-height: $line-height-h4;
+	margin-right: ($grid-gutter / -2);
+	padding-right: ($grid-gutter / 2);
+	padding-left: ($grid-gutter / 2);
 	&:focus,
 	&:hover {
 		color: $link-color;
@@ -58,12 +64,25 @@
 }
 
 .modal-dialog {
-	margin: ($line-height * 2) $grid-gutter;
+	margin-right: auto;
+	margin-left: auto;
+	padding: ($line-height * 2) $grid-gutter;
 	position: relative;
+	&.modal-full {
+		height: 100%;
+		.modal-content {
+			height: 100%;
+			overflow-x: hidden;
+			overflow-y: auto;
+			-webkit-overflow-scrolling: touch;
+			-ms-overflow-style: -ms-autohiding-scrollbar;
+		}
+	}
 	.modal.fade & {
 		@include transform(scale(0, 0));
-		-webkit-transition: -webkit-transform 0.3s $timing 0s;
-		        transition: transform 0.3s $timing 0s;
+		@include transition(all 0.3s $timing);
+		-webkit-transition-property: -webkit-transform;
+		        transition-property: transform;
 	}
 	.modal.fade.in & {
 		@include transform(scale(1, 1));
@@ -71,20 +90,16 @@
 	// 480
 		@include responsive(xs) {
 			&.modal-xs {
-				margin-right: auto;
-				margin-left: auto;
-				width: ($screen-xs - $grid-gutter * 2);
+				width: $screen-xs;
 			}
 		}
 	// 992
 		@include responsive(md) {
-			margin-right: auto;
-			margin-left: auto;
-			width: ($screen-md - $grid-gutter * 4);
+			width: ($screen-md - $grid-gutter * 2);
 		}
 	// 1440
 		@include responsive(lg) {
-			width: ($screen-lg - $grid-gutter * 4);
+			width: ($screen-lg - $grid-gutter * 2);
 		}
 }
 

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

@@ -30,6 +30,9 @@
 		display: table-cell !important;
 		float: none !important;
 		width: 1% !important;
+		> a {
+			text-align: center;
+		}
 	}
 }
 

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

@@ -0,0 +1,504 @@
+.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);
+	margin-top: ($line-height - $base / 4);
+	margin-bottom: ($line-height - $base / 4);
+	overflow: hidden;
+	position: relative;
+}
+
+.progress-bar {
+	background-color: $link-color;
+	border-radius: 0 1px 1px 0;
+	height: 100%;
+	position: absolute;
+		top: 0;
+		left: 0;
+	@include transition(width 0.3s $timing);
+}
+
+// color
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.progress-#{$color} {
+			background-color: nth($palette-color-light, $i);
+			.progress-bar {
+				background-color: nth($palette-color, $i);
+			}
+		}
+	}
+
+.progress-bar-indeterminate {
+	background-color: $link-color;
+	&:after,
+	&:before {
+		background-color: inherit;
+		border-radius: 1px;
+		content: '';
+		display: block;
+		position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+		will-change: left, right;
+	}
+	&:after {
+		@include 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
+	@-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
+				right: 100%;
+				left: -35%;
+		}
+		60% {
+			// position
+				right: -90%;
+				left: 100%;
+		}
+		100% {
+			// position
+				right: -90%;
+				left: 100%;
+		}
+	}
+
+	@-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
+				right: 100%;
+				left: -150%;
+		}
+		60% {
+			// position
+				right: -35%;
+				left: 135%;
+		}
+		100% {
+			// position
+				right: -35%;
+				left: 135%;
+		}
+	}
+
+.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-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-#{$color} {
+			border-top-color: nth($palette-color, $i);
+			.progress-circular-left & {
+				border-left-color: nth($palette-color, $i);
+			}
+			.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,
+.progress-position-fixed-top {
+	margin: 0;
+	// position
+		left: 0;
+	width: 100%;
+}
+
+.progress-position-absolute-bottom,
+.progress-position-absolute-top {
+	position: absolute;
+}
+
+.progress-position-absolute-bottom,
+.progress-position-fixed-bottom {
+	// position
+		bottom: 0;
+}
+
+.progress-position-absolute-top,
+.progress-position-fixed-top {
+	// position
+		top: 0;
+}
+
+.progress-position-fixed-top,
+.progress-position-fixed-bottom {
+	position: fixed;
+}