material-sass 0.0.1 → 0.0.2

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

@@ -3,7 +3,6 @@
 	margin-top: $line-height;
 	margin-bottom: $line-height;
 	position: relative;
-	text-align: center;
 	.nav {
 		margin-top: 0;
 		margin-bottom: -1px;
@@ -14,13 +13,17 @@
 				padding-right: ($grid-gutter / 2);
 				padding-left: ($grid-gutter / 2);
 				text-transform: uppercase;
+				@include transition(border-bottom 0s, padding-bottom 0s);
 				&:focus,
 				&:hover {
 					color: $link-color;
 				}
 			}
 			&.active > a {
+				border-bottom: 3px solid $link-color;
 				color: $link-color;
+				padding-bottom: ($line-height / 2 - 3);
+				@include transition(border-bottom 0s 0.45s, padding-bottom 0s 0.45s);
 			}
 		}
 	}
@@ -37,23 +40,11 @@
 	}
 }
 
-.tab-pane {
-	display: none;
-	visibility: hidden;
-	&.active {
-		display: block;
-		visibility: visible;
-	}
-}
-
 // colour
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
 		
 		.tab-nav-#{$color} {
-			.tab-nav-indicator {
-				background-color: nth($palette-color, $i);
-			}
 			.nav {
 				> li {
 					> a {
@@ -63,9 +54,22 @@
 						}
 					}
 					&.active > a {
+						border-bottom-color: nth($palette-color, $i);
 						color: nth($palette-color, $i);
 					}
 				}
 			}
+			.tab-nav-indicator {
+				background-color: nth($palette-color, $i);
+			}
 		}
-	}
+	}
+
+.tab-pane {
+	display: none;
+	visibility: hidden;
+	&.active {
+		display: block;
+		visibility: visible;
+	}
+}

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

@@ -1,9 +1,11 @@
 .table {
+	background-color: $white;
 	margin-top: $line-height;
 	margin-bottom: $line-height;
 	width: 100%;
 	td,
 	th {
+		border: 1px solid $black-bg;
 		line-height: $line-height;
 		padding: (($cell-height - $line-height) / 2) $grid-gutter (($cell-height - $line-height) / 2 - 1);
 		vertical-align: top;
@@ -12,53 +14,22 @@
 			width: 1%;
 		}
 	}
-	> thead > td,
-	> thead > th {
-		vertical-align: bottom;
+	> thead {
+		td,
+		th {
+			background-color: $white-bg;
+			color: $black-sec;
+			vertical-align: bottom;
+		}
 	}
 }
 
-.table-bordered {
-	td,
-	th {
-		border-top: 1px solid $black-hint;
-	}
-	> tbody > tr {
-		&:nth-child(odd) {
-			> td,
-			> th {
-				background-color: $white-bg;
-			}
-		}
-	}
-	> thead > tr {
-		> td,
-		> th {
-			border-bottom: 2px solid $black-hint;
-		}
-	}
-	> thead:first-child > tr:first-child {
-		> td,
-		> th {
-			border-top: 0;
-		}
-	}
+.table-stripe > tbody > tr:nth-child(odd) {
+	background-color: $white-bg-light;
 }
 
-.table-simple {
-	td,
-	th {
-		padding-top: 0;
-		padding-right: 0;
-		padding-bottom: 0;
-		vertical-align: top;
-		&:first-child {
-			padding-left: 0;
-		}
-		&.nowrap .tag-block {
-			margin-top: 2px;
-		}
-	}
+.table-hover > tbody > tr:hover {
+	background-color: $white-bg-dark;
 }
 
 // responsive
@@ -69,7 +40,7 @@
 		overflow-x: auto;
 		overflow-y: hidden;
 		-webkit-overflow-scrolling: touch;
-		    -ms-overflow-style: -ms-autohiding-scrollbar;
+		-ms-overflow-style: -ms-autohiding-scrollbar;
 		.table {
 			margin-top: 0;
 			margin-bottom: 0;

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

@@ -2,7 +2,7 @@
 	background-color: $white;
 	display: block;
 	position: relative;
-	@include box-shadow(0 0 1px rgba(0, 0, 0, 0.5));
+	@include box-shadow(0 -1px 0 $black-bg, 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15));
 	@include clearfix();
 	&[href] {
 		color: $black-text;
@@ -13,142 +13,183 @@
 		}
 	}
 	&.active {
-		margin-top: $line-height;
-		margin-bottom: $line-height;
+		margin-top: $line-height !important;
+		margin-bottom: $line-height !important;
 	}
+	.tile-wrap-animation & {
+		opacity: 0;
+		@include transform(translate(0, 100%));
+		@include transition(all 0.6s $timing);
+		-webkit-transition-property: opacity, -webkit-transform;
+		        transition-property: opacity, transform;
+	}
+	.tile-wrap-animation.isinview & {
+		opacity: 1;
+		@include transform(translate(0, 0) !important);
+	}
+	// no boxshadow
+		.no-boxshadow & {
+			border: 1px solid $black-bg;
+			+ .tile {
+				margin-top: -1px;
+			}
+		}
 }
 
-// action
-	.tile-action {
-		float: right;
-		@include clearfix();
-		@include user-select(none);
-		.no-touch &,
-		.touch .tile-collapse & {
-			display: none;
-		}
-		.no-touch .tile:hover &,
-		.tile-collapse.active & {
-			display: block;
-		}
-		.nav {
-			margin-top: 0;
-			margin-bottom: 0;
-			> li {
-				> a {
-					color: $black-sec;
-					z-index: 1;
-					&:focus,
-					&:hover {
-						color: $link-color;
-					}
-				}
-				&.active > a,
-				&.open > a {
-					color: $link-color;
-				}
+// colour
+	.tile-offwhite {
+		background-color: $white-bg;
+	}
+
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.tile-#{$color} {
+			background-color: nth($palette-color, $i);
+			color: $white;
+			a {
+				color: nth($palette-color-light, $i);
 			}
 		}
 	}
 
-// collapse
-	.tile-active-show {
-		@include transition(height 0.15s linear);
+.tile-action {
+	@extend .card-action;
+	border-top: 0;
+	float: right;
+	@include user-select(none);
+	.no-touch &,
+	.touch .tile-collapse & {
+		display: none;
+	}
+	.no-touch .tile:hover &,
+	.tile-collapse.active & {
+		display: block;
 	}
+}
 
-	.tile-collapse {
-		@include transition(margin 0.15s linear);
-		&.active, {
-			margin-right: ($grid-gutter * -1 + 1);
-			margin-left: ($grid-gutter * -1 + 1);
-		}
+.tile-action-show {
+	display: block !important;
+}
+
+.tile-active-show {
+	@include transition(height 0.15s linear);
+}
+
+.tile-collapse {
+	@include transition(margin 0.15s linear);
+	&.active {
+		margin-right: ($grid-gutter * -1 + 1);
+		margin-left: ($grid-gutter * -1 + 1);
+	}
+	.tile-wrap-animation & {
+		@include transition(all 0.6s $timing, margin 0.15s linear);
+		-webkit-transition-property: margin, opacity, -webkit-transform;
+		        transition-property: margin, opacity, transform;
 	}
+}
 
-	.tile-collapse-full {
-		// 1056 - 1439
-			@media only screen and (min-width: ($grid-gutter * 4 + $screen-md)) and (max-width: ($screen-lg - 1)) {
-				&.active {
-					margin-right: ($grid-gutter * -4 + 1);
-					margin-left: ($grid-gutter * -4 + 1);
-				}
+.tile-collapse-full {
+	// 1056 - 1439
+		@media only screen and (min-width: ($grid-gutter * 4 + $screen-md)) and (max-width: ($screen-lg - 1)) {
+			&.active {
+				margin-right: ($grid-gutter * -4 + 1);
+				margin-left: ($grid-gutter * -4 + 1);
 			}
-		// 1504
-			@media only screen and (min-width: ($grid-gutter * 4 + $screen-lg)) {
-				&.active {
-					margin-right: ($grid-gutter * -4 + 1);
-					margin-left: ($grid-gutter * -4 + 1);
-				}
+		}
+	// 1504
+		@media only screen and (min-width: ($grid-gutter * 4 + $screen-lg)) {
+			&.active {
+				margin-right: ($grid-gutter * -4 + 1);
+				margin-left: ($grid-gutter * -4 + 1);
 			}
+		}
+}
+
+.tile-footer {
+	background-color: $white-bg;
+	border-top: 1px solid $black-bg;
+	position: relative;
+	@include clearfix();
+	&:first-child {
+		border-top: 0;
 	}
+	.nav {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
 
-// content
-	.tile-inner {
-		padding: ($line-height / 2) $grid-gutter;
-		position: relative;
-		.tile-side ~ & {
-			overflow: hidden;
-		}
+// colour
+	.tile-offwhite .tile-footer {
+		background-color: $white-bg-dark;
 	}
 
-	.tile-side {
-		padding-top: ($line-height / 2);
-		padding-bottom: ($line-height / 2);
-		&.pull-left {
-			padding-left: $grid-gutter;
-		}
-		&.pull-right {
-			padding-right: $grid-gutter;
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.tile-#{$color} .tile-footer {
+			background-color: nth($palette-color-dark-m, $i);
+			border-top-color: nth($palette-color-dark-m, $i);
+			.nav > li {
+				> a,
+				> .a {
+					color: $white;
+				}
+			}
 		}
 	}
 
-	.tile-sub {
-		display: inline-block;
-		padding-right: $grid-gutter;
-		padding-left: $grid-gutter;
-		position: relative;
+.tile-inner {
+	padding: ($line-height / 2) $grid-gutter;
+	position: relative;
+	.tile-action ~ &,
+	.tile-side ~ & {
+		overflow: hidden;
+	}
+}
+
+.tile-side {
+	@extend .card-inner-side;
+}
+
+.tile-side-container {
+	padding: 0 !important;
+}
+
+.tile-sub {
+	display: inline-block;
+	padding-right: $grid-gutter;
+	padding-left: $grid-gutter;
+	position: relative;
+	width: 100%;
+	&:before {
+		border-top: 1px solid $black-bg;
+		content: "";
+		display: block;
+		position: absolute;
+			top: 0;
+			left: 0;
 		width: 100%;
-		&:before {
-			border-top: 1px solid $black-bg;
-			content: '';
-			display: block;
-			position: absolute;
-				top: 0;
-				left: 0;
-			width: 100%;
-		}
 	}
+}
 
-// footer
-	.tile-footer {
-		background-color: $white-bg;
-		position: relative;
-		@include clearfix();
-		&:before {
-			border-top: 1px solid $black-bg;
-			content: '';
-			display: block;
-			position: absolute;
-				top: 0;
-				left: 0;
-			width: 100%;
-		}
-		&:first-child {
-			border-top: 0;
-		}
-		.nav {
-			margin-top: 0;
-			margin-bottom: 0;
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.tile-#{$color} .tile-sub:before {
+			border-top-color: nth($palette-color-dark-m, $i);
 		}
 	}
 
-// misc
-	.tile-toggle {
-		cursor: pointer;
-		@include clearfix();
-	}
+.tile-toggle {
+	cursor: pointer;
+	@include clearfix();
+}
 
-	.tile-wrap {
-		margin-top: $line-height;
-		margin-bottom: $line-height;
-		position: relative;
-	}
+.tile-wrap {
+	margin-top: $line-height;
+	margin-bottom: $line-height;
+	position: relative;
+}