material-sass 0.0.4 → 1.0.0

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

@@ -0,0 +1,94 @@
+.avatar {
+	background-color: $offwhite;
+	border-radius: 50%;
+	color: inherit;
+	display: block;
+	height: $avatar-height;
+	line-height: $avatar-height;
+	text-align: center;
+	width: $avatar-height;
+	&[href]:focus,
+	&[href]:hover {
+		color: inherit;
+		text-decoration: none;
+	}
+	.card-header-side > & {
+		&:first-child {
+			margin-top: (($avatar-height - $line-height) / -2);
+		}
+		&:last-child {
+			margin-bottom: (($avatar-height - $line-height) / -2);
+		}
+	}
+	.nav a > &,
+	.nav .a > & {
+		margin-top: (($avatar-height - $line-height) / -2);
+		margin-bottom: (($avatar-height - $line-height) / -2);
+	}
+	img {
+		border-radius: 50%;
+		height: 100%;
+		vertical-align: top;
+		width: 100%;
+	}
+	.fa {
+		display: block;
+		height: 100%;
+		line-height: inherit;
+		text-align: center;
+	}
+	.fa-text {
+		font-family: inherit;
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.avatar-#{$color} {
+			background-color: nth($palette-list-color, $i);
+			color: nth($palette-list-text, $i);
+			&:focus,
+			&:hover {
+				color: nth($palette-list-text, $i);
+			}
+		}
+	}
+
+// size
+	.avatar-lg {
+		height: ($avatar-height * 2);
+		line-height: ($avatar-height * 2);
+		width: ($avatar-height * 2);
+	}
+
+	.avatar-sm {
+		height: ($avatar-height * 0.8);
+		line-height: ($avatar-height * 0.8);
+		width: ($avatar-height * 0.8);
+		.card-header-side > & {
+			&:first-child {
+				margin-top: (($avatar-height * 0.8 - $line-height) / -2);
+			}
+			&:last-child {
+				margin-bottom: (($avatar-height * 0.8 - $line-height) / -2);
+			}
+		}
+		.nav a > &,
+		.nav .a > & {
+			margin-top: (($avatar-height * 0.8 - $line-height) / -2);
+			margin-bottom: (($avatar-height * 0.8 - $line-height) / -2);
+		}
+	}
+
+	.avatar-xs {
+		font-size: $font-size-h6;
+		height: $line-height;
+		line-height: $line-height;
+		width: $line-height;
+	}
+
+.avatar-inline {
+	display: inline-block;
+}

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

@@ -1,17 +1,16 @@
 .breadcrumb {
 	list-style: none;
-	margin: $line-height 0;
-	padding: ($line-height / 2) 0;
+	margin: $margin-md 0;
+	padding: 0;
 	@include clearfix();
 	> li {
 		display: block;
 		float: left;
 		+ li:before {
 			@extend .icon;
-			color: $black-hint;
+			color: $black-sec;
 			content: "chevron_right";
 			display: inline-block;
-			line-height: $line-height;
 			margin-left: 0.4em;
 		}
 	}

data/app/assets/stylesheets/material/components/_button-flat.scss

@@ -0,0 +1,35 @@
+.btn-flat {
+	background-color: transparent;
+	box-shadow: none;
+	&:after {
+		background-color: $offwhite-dark;
+		box-shadow: none;
+		display: block !important;
+	}
+	&:active:after,
+	&:focus:after,
+	&:hover:after {
+		opacity: 0.5;
+	}
+	&:not(.waves-attach):active:after {
+		opacity: 1;
+	}
+	&.disabled,
+	&[disabled],
+	fieldset[disabled] & {
+		background-color: transparent !important;
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.btn-flat.btn-#{$color} {
+			color: nth($palette-list-color, $i);
+			&[disabled],
+			fieldset[disabled] & {
+				color: nth($palette-list-light, $i);
+			}
+		}
+	}

data/app/assets/stylesheets/material/components/_button-float.scss

@@ -0,0 +1,187 @@
+.fbtn {
+	background-color: $offwhite-solid;
+	border-radius: 50%;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
+	clear: both;
+	color: $black-text-solid;
+	cursor: pointer;
+	display: block;
+	font-size: $line-height;
+	height: $fbtn-height;
+	margin: $margin-sm auto;
+	padding: (($fbtn-height - $line-height) / 2) 0;
+	position: relative;
+	text-align: center;
+	transition-duration: 0.3s;
+	transition-property: opacity, transform;
+	transition-timing-function: $timing;
+	width: $fbtn-height;
+	&:active,
+	&:focus,
+	&:hover {
+		color: $black-text-solid;
+	}
+	&:after {
+		border-radius: 50%;
+		box-shadow: 0 6px 9px rgba(0, 0, 0, 0.15);
+		content: "";
+		display: block;
+		height: 100%;
+		opacity: 0;
+		position: absolute;
+			top: 0;
+			left: 0;
+		transition: opacity 0.3s $timing;
+		width: 100%;
+	}
+	&:active:after {
+		opacity: 1;
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.fbtn-#{$color} {
+			background-color: nth($palette-list-color, $i);
+			color: nth($palette-list-text, $i);
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: nth($palette-list-color, $i);
+				color: nth($palette-list-text, $i);
+			}
+		}
+	}
+
+// size
+	.fbtn-lg {
+		height: ($fbtn-height + $base * 2);
+		padding-top: (($fbtn-height + $base * 2 - $line-height) / 2);
+		padding-bottom: (($fbtn-height + $base * 2 - $line-height) / 2);
+		width: ($fbtn-height + $base * 2);
+		.fbtn-sub {
+			// position
+				top: (($fbtn-height + $base * 2 - $line-height) / 2);
+		}
+	}
+
+.fbtn-container {
+	backface-visibility: hidden;
+	position: fixed;
+		right: $grid-gutter;
+		bottom: $margin-sm;
+	transition: transform 0.3s $timing;
+	z-index: ($content-base + 1);
+	// 992
+		@include responsive(md) {
+			transform: translateY(0) !important;
+		}
+}
+
+.fbtn-dropdown {
+	position: absolute;
+		bottom: 100%;
+		left: 0;
+	transform: scale(0, 0);
+	transition: transform 0s 0.3s;
+	width: 100%;
+	.fbtn-inner.open & {
+		transform: scale(1, 1);
+		transition: none;
+	}
+	.fbtn {
+		opacity: 0;
+		transform: scale(0, 0);
+		.fbtn-inner.open & {
+			opacity: 1;
+			transform: scale(1, 1);
+		}
+	}
+}
+
+.fbtn-inner {
+	position: relative;
+}
+
+.fbtn-ori,
+.fbtn-sub {
+	transition-duration: 0.3s;
+	transition-property: opacity, transform;
+	transition-timing-function: $timing;
+	&.#{$mdicon-css-prefix} {
+		vertical-align: bottom;
+	}
+}
+
+.fbtn-ori {
+	.fbtn-inner.open & {
+		opacity: 0;
+		transform: rotate(225deg);
+	}
+}
+
+.fbtn-rotate {
+	transition-duration: 0.3s;
+	transition-property: opacity, transform;
+	transition-timing-function: $timing;
+	.fbtn-inner.open & {
+		transform: rotate(225deg);
+	}
+}
+
+.fbtn-sub {
+	margin-left: ($line-height / -2);
+	opacity: 0;
+	position: absolute;
+		top: (($fbtn-height - $line-height) / 2);
+		left: 50%;
+	text-align: center;
+	transform: rotate(-225deg);
+	width: $line-height;
+	.fbtn-inner.open & {
+		opacity: 1;
+		transform: rotate(0);
+	}
+}
+
+.fbtn-text {
+	background-color: $black-text;
+	border-radius: 2px;
+	color: $white-text-solid;
+	display: none;
+	font-size: $font-size-h6;
+	line-height: $line-height;
+	margin-top: ($line-height / -2 - 2);
+	margin-right: $grid-gutter;
+	padding: 2px ($grid-gutter / 2);
+	position: absolute;
+		top: 50%;
+		right: 100%;
+	white-space: nowrap;
+	.fbtn-inner.open & {
+		display: block;
+	}
+	// touch
+		html.no-touchevents & {
+			display: block;
+			opacity: 0;
+			transform: scale(0, 0);
+			transition: opacity 0.3s $timing, transform 0s 0.3s;
+		}
+		html.no-touchevents .fbtn:hover > & {
+			opacity: 1;
+			transform: scale(1, 1);
+			transition: opacity 0.3s $timing;
+		}
+}
+
+.fbtn-wave {
+	border-radius: 50%;
+	height: 100%;
+	position: absolute;
+		top: 0;
+		left: 0;
+	width: 100%;
+}

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

@@ -0,0 +1,86 @@
+.btn {
+	background-color: $offwhite;
+	background-image: none;
+	background-position: 50% 50%;
+	background-size: 100% 100%;
+	border: 0;
+	border-radius: 2px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+	color: inherit;
+	cursor: pointer;
+	display: inline-block;
+	font-size: $font-size;
+	font-weight: $font-weight-medium;
+	line-height: $line-height;
+	margin-bottom: 0;
+	max-width: 100%;
+	padding: (($btn-height - $line-height) / 2) ($grid-gutter / 2);
+	position: relative;
+	text-align: center;
+	text-transform: uppercase;
+	user-select: none;
+	vertical-align: middle;
+	white-space: nowrap;
+	&:active,
+	&:focus,
+	&:hover {
+		color: inherit;
+		outline: 0;
+		text-decoration: none;
+	}
+	&:after {
+		background-color: $offwhite;
+		border-radius: 2px;
+		box-shadow: 0 3px 9px rgba(0, 0, 0, 0.3);
+		content: "";
+		display: block;
+		height: 100%;
+		opacity: 0;
+		position: absolute;
+			top: 0;
+			left: 0;
+		transition: opacity 0.3s $timing;
+		width: 100%;
+	}
+	&:active:after,
+	&:focus:after {
+		opacity: 1;
+	}
+	&.waves-attach:after {
+		background-color: transparent;
+	}
+	&.disabled,
+	&[disabled],
+	fieldset[disabled] & {
+		box-shadow: none !important;
+		cursor: not-allowed;
+		opacity: 0.78;
+		&:after {
+			display: none;
+		}
+		.waves-ripple {
+			display: none;
+		}
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.btn-#{$color} {
+			background-color: nth($palette-list-color, $i);
+			color: nth($palette-list-text, $i);
+			&:active,
+			&:focus,
+			&:hover {
+				color: nth($palette-list-text, $i);
+			}
+		}
+	}
+
+.btn-block {
+	display: block;
+	white-space: normal;
+	width: 100%;
+}

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

@@ -0,0 +1,175 @@
+.card {
+	background-color: $white;
+	border-radius: 2px;
+	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;
+	margin-top: $margin-md;
+	margin-bottom: $margin-md;
+	position: relative;
+	&[href]:focus,
+	&[href]:hover {
+		text-decoration: none;
+	}
+	.card-wrap & {
+		margin-top: 0;
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.card-#{$color} {
+			background-color: nth($palette-list-color, $i);
+			color: nth($palette-list-text, $i);
+			a,
+			a:focus,
+			a:hover {
+				color: inherit;
+			}
+		}
+	}
+
+.card-action {
+	border-top: 1px solid $black-divider;
+	min-height: $nav-height;
+	position: relative;
+	@include clearfix();
+	&:first-child {
+		border-top: 0;
+	}
+}
+
+.card-action-btn {
+	margin: (($nav-height - $btn-height) / 2) ($grid-gutter / 2);
+	white-space: nowrap;
+	.btn + .btn {
+		margin-left: ($grid-gutter / 2);
+	}
+}
+
+.card-header {
+	border-bottom: 1px solid $black-divider;
+	display: flex;
+	min-height: $header-height;
+	position: relative;
+	&:last-child {
+		border-bottom: 0;
+	}
+}
+
+.card-header-side {
+	min-width: 0;
+	padding-top: (($header-height - $line-height) / 2);
+	padding-bottom: (($header-height - $line-height) / 2);
+	&.pull-left {
+		order: -1;
+		padding-left: $grid-gutter;
+	}
+	&.pull-right {
+		order: 1;
+		padding-right: $grid-gutter;
+	}
+}
+
+.card-heading {
+	display: block;
+	font-size: $font-size-h4;
+	line-height: $line-height-h4;
+	margin-top: $margin-md;
+	margin-bottom: $margin-md;
+	.card-header & {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
+
+.card-img {
+	display: block;
+	overflow: hidden;
+	position: relative;
+	&:first-child {
+		border-radius: 2px 2px 0 0;
+	}
+	&:last-child {
+		border-radius: 0 0 2px 2px;
+	}
+	img {
+		display: block;
+		height: auto;
+		margin-right: auto;
+		margin-left: auto;
+	}
+}
+
+.card-img-heading {
+	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
+	color: $white-text-solid;
+	font-size: $font-size-h4;
+	line-height: $line-height-h4;
+	margin: 0;
+	padding: $margin-sm $grid-gutter;
+	position: absolute;
+		bottom: 0;
+		left: 0;
+	width: 100%;
+}
+
+.card-inner {
+	margin: $margin-md $grid-gutter;
+	min-width: 0;
+	position: relative;
+	.card-header & {
+		flex: 1;
+		font-size: $font-size-h5;
+		line-height: $line-height-h5;
+		margin-top: (($header-height - $line-height-h5) / 2);
+		margin-bottom: (($header-height - $line-height-h5) / 2);
+	}
+}
+
+.card-main {
+	flex: 1;
+	min-width: 0;
+}
+
+.card-side {
+	background-color: $offwhite-solid;
+	border-radius: 2px 0 0 2px;
+	max-width: 33.33333%;
+	padding-right: $grid-gutter;
+	padding-left: $grid-gutter;
+	&[href] {
+		color: inherit;
+		&:focus,
+		&:hover {
+			text-decoration: none;
+		}
+	}
+	&.card-side-img {
+		overflow: hidden;
+		padding-right: 0;
+		padding-left: 0;
+	}
+	&.pull-right {
+		border-radius: 0 2px 2px 0;
+		order: 1;
+	}
+}
+
+// colour
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
+
+		.card-#{$color} .card-side {
+			background-color: nth($palette-list-dark, $i);
+			color: nth($palette-list-text-dark, $i);
+		}
+	}
+
+.card-wrap {
+	margin-top: $margin-md;
+	margin-bottom: ($margin-md * -1);
+	@include clearfix();
+}