material-sass 0.0.4 → 1.0.0

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

@@ -0,0 +1,85 @@
+.tab-nav {
+	box-shadow: 0 1px 0 $black-divider;
+	margin-top: $margin-md;
+	margin-bottom: $margin-md;
+	position: relative;
+	.nav {
+		margin-top: 0 !important;
+		margin-bottom: 0 !important;
+		> li {
+			vertical-align: bottom;
+			> a,
+			> .a {
+				border-bottom: 2px solid transparent;
+				color: inherit;
+				padding-bottom: (($nav-height - $line-height) / 2 - 2);
+				text-transform: uppercase;
+				transition: border-bottom-color 0s;
+				&:focus,
+				&:hover {
+					border-bottom-color: lighten($link-color, 30%);
+					transition: border-bottom-color 0.3s $timing;
+				}
+			}
+			&.active > a,
+			&.active > .a {
+				border-bottom-color: $brand-color-accent;
+				color: $brand-color-accent;
+				transition: border-bottom-color 0s 0.45s;
+			}
+		}
+	}
+}
+
+.tab-nav-indicator {
+	background-color: transparent;
+	height: 2px;
+	position: absolute;
+		bottom: 0;
+	&.animate {
+		background-color: $brand-color-accent;
+		transition: left 0.225s $timing 0.225s, right 0.45s $timing;
+		will-change: left, right;
+		&.reverse {
+			transition: left 0.45s $timing, right 0.225s $timing 0.225s;
+		}
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		@if $color != "brand-accent" {
+			.tab-nav-#{$color} {
+				.nav {
+					> li {
+						> a,
+						> .a {
+							&:focus,
+							&:hover {
+								border-bottom-color: nth($palette-list-light, $i);
+							}
+						}
+						&.active > a,
+						&.active > .a {
+							border-bottom-color: nth($palette-list-color, $i);
+							color: nth($palette-list-color, $i);
+						}
+					}
+				}
+				.tab-nav-indicator.animate {
+					background-color: nth($palette-list-color, $i);
+				}
+			}
+		}
+	}
+
+.tab-pane {
+	display: none;
+	visibility: hidden;
+	&.active {
+		display: block;
+		visibility: visible;
+	}
+}

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

@@ -0,0 +1,82 @@
+.table {
+	background-color: $white;
+	border: 0;
+	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 3px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.18);
+	margin-top: $margin-md;
+	margin-bottom: $margin-md;
+	width: 100%;
+	.card-table > & {
+		box-shadow: none;
+		margin-right: ($grid-gutter * -1);
+		margin-left: ($grid-gutter * -1);
+		&:first-child {
+			margin-top: 0;
+		}
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+	> tbody {
+		&:first-child > tr:first-child {
+			td,
+			th {
+				border-top: 0;
+			}
+		}
+		> tr:hover {
+			background-color: $offwhite-solid;
+		}
+	}
+	td,
+	th {
+		border-top: 1px solid $black-divider-solid;
+		font-size: $font-size;
+		line-height: $line-height;
+		padding: (($cell-height - $line-height) / 2 - 1) $grid-gutter (($cell-height - $line-height) / 2);
+		vertical-align: top;
+		&.nowrap {
+			white-space: nowrap;
+			width: 1%;
+		}
+	}
+	> thead {
+		&:first-child > tr:first-child {
+			td,
+			th {
+				border-top: 0;
+			}
+		}
+		td,
+		th {
+			color: $black-hint-solid;
+			font-size: $font-size-h6;
+			vertical-align: bottom;
+		}
+	}
+}
+
+.table-responsive {
+	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 3px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.18);
+	margin-top: $margin-md;
+	margin-bottom: $margin-md;
+	min-height: 0.01%;
+	overflow-x: auto;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: touch;
+	-ms-overflow-style: -ms-autohiding-scrollbar;
+	.card-table > & {
+		box-shadow: none;
+		margin-right: ($grid-gutter * -1);
+		margin-left: ($grid-gutter * -1);
+		&:first-child {
+			margin-top: 0;
+		}
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+	> .table {
+		box-shadow: none;
+		margin: 0;
+	}
+}

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

@@ -0,0 +1,155 @@
+.tile {
+	background-color: $white;
+	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 3px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.18);
+	display: block;
+	display: flex;
+	min-height: $tile-height;
+	position: relative;
+	&[href]:focus,
+	&[href]:hover {
+		text-decoration: none;
+	}
+	&.active {
+		margin-top: $margin-md !important;
+		margin-bottom: $margin-md !important;
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.tile-#{$color} {
+			background-color: nth($palette-list-color, $i);
+			color: nth($palette-list-text, $i);
+			a,
+			a:focus,
+			a:hover {
+				color: inherit;
+			}
+		}
+	}
+
+.tile-action {
+	@extend .card-action;
+	border-top: 0;
+	float: right;
+	min-width: 0;
+	order: 1;
+	user-select: none;
+	html.no-touchevents & {
+		display: none;
+	}
+	html.no-touchevents .tile:hover & {
+		display: block;
+	}
+}
+
+.tile-action-show {
+	display: block !important;
+}
+
+.tile-active-show {
+	min-height: 0;
+	&.collapsing {
+		transition: height 0.15s linear;
+	}
+}
+
+.tile-collapse {
+	flex-direction: column;
+	transition: margin 0.15s linear;
+	&.active {
+		margin-right: ($grid-gutter / -2);
+		margin-left: ($grid-gutter / -2);
+	}
+}
+
+.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);
+			}
+		}
+}
+
+.tile-footer {
+	background-color: $offwhite-solid;
+	border-top: 1px solid $black-divider;
+	position: relative;
+	@include clearfix();
+	&:first-child {
+		border-top: 0;
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.tile-#{$color} .tile-footer {
+			background-color: nth($palette-list-dark, $i);
+			color: nth($palette-list-text-dark, $i);
+		}
+	}
+
+.tile-footer-btn {
+	@extend .card-action-btn;
+}
+
+.tile-inner {
+	flex: 1;
+	margin: (($tile-height - $line-height) / 2) $grid-gutter;
+	min-width: 0;
+	position: relative;
+}
+
+.tile-side {
+	@extend .card-header-side;
+	padding-top: (($tile-height - $line-height) / 2);
+	padding-bottom: (($tile-height - $line-height) / 2);
+}
+
+.tile-sub {
+	border-top: 1px solid $black-divider;
+	padding-right: $grid-gutter;
+	padding-left: $grid-gutter;
+	position: relative;
+	@include clearfix();
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.tile-#{$color} .tile-sub {
+			border-top-color: nth($palette-list-dark, $i);
+		}
+	}
+
+.tile-wrap {
+	margin-top: $margin-md;
+	margin-bottom: $margin-md;
+	position: relative;
+}
+
+div[data-toggle="tile"] {
+	cursor: pointer;
+	display: block;
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	[data-ignore="tile"] {
+		cursor: default;
+		cursor: initial;
+	}
+}

data/app/assets/stylesheets/material/elements/_content.scss

@@ -0,0 +1,42 @@
+.content-heading {
+	background-color: $offwhite-solid;
+	color: $black-text-solid;
+	overflow: hidden;
+	padding-top: $margin-sm;
+	padding-bottom: $margin-sm;
+	position: relative;
+	z-index: 1;
+	.heading {
+		font-weight: $font-weight-light;
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.page-#{$color} .content-heading {
+			background-color: nth($palette-list-color, $i);
+			color: nth($palette-list-text, $i);
+		}
+	}
+
+.content-inner {
+	margin-top: $margin-lg;
+	margin-bottom: $margin-lg;
+}
+
+.content-sub-heading {
+	font-size: $font-size-h4;
+	font-weight: $font-weight-medium;
+	line-height: $line-height-h4;
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.page-#{$color} .content-sub-heading {
+			color: nth($palette-list-color, $i);
+		}
+	}

data/app/assets/stylesheets/material/elements/_footer.scss

@@ -0,0 +1,10 @@
+.footer {
+	border-top: 1px solid $black-divider;
+	text-align: center;
+	padding-top: $margin-sm;
+	padding-bottom: $margin-sm;
+	position: absolute;
+		bottom: 0;
+		right: 0;
+		left: 0;
+}

data/app/assets/stylesheets/material/elements/_header.scss

@@ -0,0 +1,145 @@
+.header {
+	backface-visibility: hidden;
+	background-color: $offwhite-solid;
+	color: $black-text-solid;
+	min-height: $header-height;
+	padding-top: (($header-height - $nav-height) / 2);
+	padding-bottom: (($header-height - $nav-height) / 2);
+	z-index: $header-base;
+	&:after {
+		box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
+		content: "";
+		display: block;
+		height: 100%;
+		opacity: 0;
+		position: absolute;
+			top: 0;
+			left: 0;
+		transition: opacity 0.3s $timing;
+		width: 100%;
+		z-index: -1;
+	}
+	&.affix:after {
+		opacity: 1;
+	}
+	a {
+		color: inherit;
+		z-index: 1;
+	}
+	.nav {
+		margin: 0;
+	}
+	.tab-nav {
+		box-shadow: none;
+		margin-top: (($header-height - $nav-height) / -2);
+		margin-bottom: (($header-height - $nav-height) / -2);
+		.nav > li {
+			> a,
+			> .a {
+				padding-top: (($header-height - $line-height) / 2);
+				padding-bottom: (($header-height - $line-height) / 2 - 2);
+			}
+		}
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.header-#{$color} {
+			background-color: nth($palette-list-color, $i);
+			color: nth($palette-list-text, $i);
+		}
+	}
+
+.header-affix {
+	max-height: $nav-height;
+	overflow: hidden;
+	position: static !important;
+	width: 0;
+	&.affix {
+		overflow: visible;
+		width: auto;
+	}
+}
+
+.header-affix-hide {
+	position: static !important;
+	&.affix {
+		max-height: $nav-height;
+		overflow: hidden;
+		width: 0;
+	}
+}
+
+.header-logo,
+.header-text {
+	display: block;
+	float: left;
+	font-weight: $font-weight-light;
+	height: $nav-height;
+	line-height: $line-height-h4;
+	margin: 0 $grid-gutter;
+	padding: (($nav-height - $line-height-h4) / 2) 0;
+	&:focus,
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+.header-logo {
+	font-size: $font-size-h4;
+	img {
+		display: block;
+		max-height: $line-height-h4;
+		width: auto;
+	}
+}
+
+.header-seamed,
+.header-standard,
+.header-waterfall {
+	position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+}
+
+.header-standard {
+	&:after {
+		opacity: 1;
+	}
+}
+
+.header-transparent {
+	background-color: transparent;
+	&:before {
+		background-color: $offwhite-solid;
+		content: "";
+		display: block;
+		height: 100%;
+		opacity: 0;
+		position: absolute;
+			top: 0;
+			left: 0;
+		transition: opacity 0.3s $timing;
+		width: 100%;
+		z-index: -1;
+	}
+	&.affix:before {
+		opacity: 1;
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.page-#{$color} .header-transparent {
+			color: nth($palette-list-text, $i);
+			&:before {
+				background-color: nth($palette-list-color, $i);
+			}
+		}
+	}