material-sass 0.0.4 → 1.0.0

data/app/assets/stylesheets/material/{element → components}/_nav.scss

@@ -1,13 +1,13 @@
 .nav {
 	list-style: none;
-	margin: $line-height 0;
+	margin: $margin-md 0;
 	padding: 0;
 	position: relative;
 	@include clearfix();
 	a,
 	.a {
 		display: block;
-		padding: ($line-height / 2) $grid-gutter;
+		padding: (($nav-height - $line-height) / 2) $grid-gutter;
 		position: relative;
 		&:focus,
 		&:hover {
@@ -24,20 +24,27 @@
 	}
 }
 
+.nav-justified,
+.nav-list {
+	align-items: flex-start;
+	display: flex;
+	justify-content: flex-start;
+}
+
 .nav-justified {
-	width: 100%;
+	flex-wrap: nowrap;
 	> li {
-		display: table-cell !important;
-		float: none !important;
-		width: 1% !important;
-		> a {
+		flex-grow: 1;
+		> a,
+		> .a {
 			text-align: center;
 		}
 	}
 }
 
 .nav-list {
+	flex-wrap: wrap;
 	> li {
 		float: left;
 	}
-}
+}

data/app/assets/stylesheets/material/{element → components}/_progress-circular.scss

@@ -1,10 +1,10 @@
 .progress-circular {
-	height: ($line-height * 2);
-	margin-top: $line-height;
-	margin-bottom: $line-height;
+	height: $pcircular-height;
+	margin-top: $margin-md;
+	margin-bottom: $margin-md;
 	overflow: hidden;
 	position: relative;
-	width: ($line-height * 2);
+	width: $pcircular-height;
 }
 
 .progress-circular-center {
@@ -13,21 +13,23 @@
 }
 
 .progress-circular-gap {
-	border-top: ($base / 2) solid $link-color;
+	border-top: 2px solid $brand-color-accent;
 	position: absolute;
 		top: 0;
-		right: ($line-height - 1);
+		right: ($pcircular-height / 2 - 1);
 		bottom: 0;
-		left: ($line-height - 1);
+		left: ($pcircular-height / 2 - 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);
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		@if $color != "brand-accent" {
+			.progress-circular-gap {
+				.progress-circular-#{$color} & {
+					border-top-color: nth($palette-list-color, $i);
+				}
 			}
 		}
 	}
@@ -40,19 +42,19 @@
 
 .progress-circular-inner {
 	animation: pcircular-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
-	height: ($line-height * 2);
+	height: $pcircular-height;
 	position: relative;
-	width: ($line-height * 2);
+	width: $pcircular-height;
 	will-change: transform;
 }
 
 .progress-circular-left,
 .progress-circular-right {
-	height: ($line-height * 2);
+	height: $pcircular-height;
 	overflow: hidden;
 	position: absolute;
 		top: 0;
-	width: $line-height;
+	width: ($pcircular-height / 2);
 }
 
 .progress-circular-left {
@@ -66,13 +68,13 @@
 }
 
 .progress-circular-spinner {
-	border: ($base / 2) solid $link-color;
+	border: ($base / 2) solid $brand-color-accent;
 	border-bottom-color: transparent;
 	border-radius: 50%;
-	height: ($line-height * 2);
+	height: $pcircular-height;
 	position: absolute;
 		top: 0;
-	width: ($line-height * 2);
+	width: $pcircular-height;
 	will-change: transform;
 	.progress-circular-left & {
 		animation: pcircular-spinner-left 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
@@ -89,18 +91,20 @@
 }
 
 // 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);
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		@if $color != "brand-accent" {
+			.progress-circular-spinner {
+				.progress-circular-#{$color} & {
+					border-top-color: nth($palette-list-color, $i);
+				}
+				.progress-circular-#{$color} .progress-circular-left & {
+					border-left-color: nth($palette-list-color, $i);
+				}
+				.progress-circular-#{$color} .progress-circular-right & {
+					border-right-color: nth($palette-list-color, $i);
+				}
 			}
 		}
 	}

data/app/assets/stylesheets/material/{element → components}/_progress-loadbar.scss

@@ -9,18 +9,18 @@
 }
 
 .load-bar-base {
-	animation: load-bar-right-in 1s $timing 1 forwards;
-	background-color: $link-color;
+	animation: load-bar-right-in 0.9s $timing 1 forwards;
+	background-color: $brand-color-accent;
 	float: left;
 	height: 100%;
 	overflow: hidden;
-	transform: translate3d(-100%, 0, 0);
+	transform: translate(-100%, 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);
+		animation: load-bar-left-in 0.9s $timing 1 forwards;
+		transform: translate(100%, 0);
 		transform-origin: top left;
 	}
 }
@@ -29,28 +29,24 @@
 	@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;
+	animation: load-bar-right 3.6s linear infinite forwards;
+	animation-delay: 0.9s;
 	float: left;
 	height: 100%;
 	position: relative;
@@ -58,8 +54,8 @@
 	width: 400%;
 	will-change: transform;
 	.load-bar:first-child & {
-		animation: load-bar-left 4s linear infinite forwards;
-		animation-delay: 1s;
+		animation: load-bar-left 3.6s linear infinite forwards;
+		animation-delay: 0.9s;
 	}
 }
 
@@ -67,22 +63,18 @@
 	@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);
 		}
 	}
 
@@ -94,10 +86,12 @@
 }
 
 // colour
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
 
-		.load-bar-progress-#{$color} {
-			background-color: nth($palette-color, $i);
+		@if $color != "brand-accent" {
+			.load-bar-progress-#{$color} {
+				background-color: nth($palette-list-color, $i);
+			}
 		}
 	}

data/app/assets/stylesheets/material/{element → components}/_progress.scss

@@ -1,14 +1,14 @@
 .progress {
-	background-color: lighten($link-color, 30%);
+	background-color: $brand-color-accent-light;
 	height: ($base / 2);
-	margin-top: ($line-height - $base / 4);
-	margin-bottom: ($line-height - $base / 4);
+	margin-top: $margin-md;
+	margin-bottom: $margin-md;
 	overflow: hidden;
 	position: relative;
 }
 
 .progress-bar {
-	background-color: $link-color;
+	background-color: $brand-color-accent;
 	border-radius: 0 1px 1px 0;
 	height: 100%;
 	position: absolute;
@@ -18,21 +18,26 @@
 }
 
 // colour
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
 
-		.progress-#{$color} {
-			background-color: nth($palette-color-light, $i);
-			.progress-bar {
-				background-color: nth($palette-color, $i);
+		@if $color != "brand-accent" {
+			.progress-#{$color} {
+				background-color: nth($palette-list-light, $i);
+				.progress-bar {
+					background-color: nth($palette-list-color, $i);
+				}
 			}
 		}
 	}
 
 .progress-bar-indeterminate {
-	background-color: $link-color;
+	background-color: $brand-color-accent;
 	&:after,
 	&:before {
+		animation-duration: 2.1s;
+		animation-iteration-count: infinite;
+		animation-timing-function: linear;
 		background-color: inherit;
 		border-radius: 1px;
 		content: '';
@@ -41,14 +46,18 @@
 			top: 0;
 			bottom: 0;
 			left: 0;
-		will-change: left, right;
+		transition: width 0.3s $timing;
+		will-change: left, width;
 	}
 	&:after {
-		animation: pbar-indeterminate-one 3s cubic-bezier(0.6, 0.8, 0.6, 0.4) infinite;
+		animation-name: pbar-indeterminate-one;
+		// position
+			left: 0;
 	}
 	&:before {
-		animation: pbar-indeterminate-two 3s cubic-bezier(0.2, 0.8, 0.2, 0.8) infinite;
-		animation-delay: 1.5s;
+		animation-name: pbar-indeterminate-two;
+		// position
+			right: 0;
 	}
 }
 
@@ -56,36 +65,37 @@
 	@keyframes pbar-indeterminate-one {
 		0% {
 			// position
-				right: 100%;
-				left: -35%;
+				left: 0%;
+			width: 0%;
 		}
-		60% {
+		50% {
 			// position
-				right: -90%;
-				left: 100%;
+				left: 25%;
+			width: 75%;
 		}
-		100% {
+		75% {
 			// position
-				right: -90%;
 				left: 100%;
+			width: 0%;
 		}
 	}
 
 	@keyframes pbar-indeterminate-two {
-		0% {
+		0%,
+		50% {
 			// position
-				right: 100%;
-				left: -150%;
+				left: 0%;
+			width: 0%;
 		}
-		60% {
+		75% {
 			// position
-				right: -35%;
-				left: 135%;
+				left: 0%;
+			width: 25%;
 		}
 		100% {
 			// position
-				right: -35%;
-				left: 135%;
+				left: 100%;
+			width: 0%;
 		}
 	}
 

data/app/assets/stylesheets/material/components/_snackbar.scss

@@ -0,0 +1,60 @@
+.snackbar {
+	position: fixed;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	z-index: ($content-base + 1);
+	a {
+		cursor: pointer;
+		&:focus,
+		&:hover {
+			text-decoration: none;
+		}
+	}
+	// 768
+		@include responsive(sm) {
+			padding-right: $grid-gutter;
+			padding-left: $grid-gutter;
+			// position
+				bottom: $margin-md;
+			.fbtn-container ~ & {
+				// position
+					right: ($base * 2 + $fbtn-height + $grid-gutter);
+			}
+		}
+}
+
+.snackbar-inner {
+	backface-visibility: hidden;
+	background-color: $black-text;
+	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
+	color: $white-text-solid;
+	display: flex;
+	max-width: 100%;
+	padding: $margin-sm $grid-gutter;
+	transform: translate(0, 200%);
+	transition: transform 0.3s $timing;
+	@include clearfix();
+	&.in {
+		transform: translate(0, 0);
+	}
+	// 768
+		@include responsive(sm) {
+			border-radius: 2px;
+			float: left;
+		}
+}
+
+.snackbar-text {
+	overflow: hidden;
+}
+
+[data-dismiss="snackbar"] {
+	cursor: pointer;
+	float: right;
+	font-weight: $font-weight-medium;
+	margin-left: $grid-gutter;
+	order: 1;
+	text-transform: uppercase;
+	white-space: nowrap;
+}