material-sass 0.0.4 → 1.0.0

data/app/assets/stylesheets/material/{theme → elements}/_menu.scss

@@ -1,36 +1,14 @@
 .menu {
 	backface-visibility: hidden;
-	background-color: transparent;
-	height: 100%;
+	display: none;
 	overflow: hidden;
+	outline: 0;
 	position: fixed;
-	top: 0;
-	left: 0;
-	transition: background-color 0.3s $timing, width 0s 0.3s;
-	width: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
 	z-index: ($header-base + 1);
-	&.open {
-		background-color: rgba(0, 0, 0, 0.5);
-		transition: background-color 0.15s $timing, width 0s;
-		width: 100%;
-	}
-	&.menu-right {
-		// position
-			right: 0;
-			left: auto;
-	}
-	// 992
-		@include responsive(md) {
-			&.open {
-				background-color: transparent;
-				overflow: visible;
-				width: ($grid-gutter * 20);
-			}
-			&.menu-right.open ~ .fbtn-container {
-				// position
-					right: ($grid-gutter * 21);
-			}
-		}
 }
 
 .menu-collapse-toggle {
@@ -38,7 +16,7 @@
 	cursor: pointer;
 	display: block;
 	float: right;
-	padding: ($line-height / 2) $grid-gutter;
+	padding: (($nav-height - $line-height) / 2) $grid-gutter;
 	position: absolute;
 		top: 0;
 		right: 0;
@@ -50,15 +28,17 @@
 
 .menu-collapse-toggle-close {
 	margin-top: ($font-size / -2);
+	margin-left: ($font-size / -2);
 	opacity: 1;
 	position: absolute;
 		top: 50%;
-		left: 0;
+		left: 50%;
 	text-align: center;
 	transform: rotate(0);
-	transition: all 0.3s $timing;
+	transition-duration: 0.3s;
 	transition-property: opacity, transform;
-	width: 100%;
+	transition-timing-function: $timing;
+	width: $font-size;
 	.menu-collapse-toggle.collapsed & {
 		opacity: 0;
 		transform: rotate(-225deg);
@@ -68,8 +48,9 @@
 .menu-collapse-toggle-default {
 	opacity: 0;
 	transform: rotate(225deg);
-	transition: all 0.3s $timing;
+	transition-duration: 0.3s;
 	transition-property: opacity, transform;
+	transition-timing-function: $timing;
 	.menu-collapse-toggle.collapsed & {
 		opacity: 1;
 		transform: rotate(0);
@@ -77,26 +58,21 @@
 }
 
 .menu-content {
-	padding-top: ($line-height / 2);
-	padding-bottom: ($line-height / 2);
-	hr {
-		border-top-color: $black-bg;
-		margin-top: ($line-height / 2);
-		margin-bottom: ($line-height / 2);
-	}
+	padding-top: $margin-base;
+	padding-bottom: $margin-base;
 	.nav {
 		margin-top: 0;
 		margin-bottom: 0;
 		a,
 		.a {
-			color: $black-sec;
-			font-weight: $font-weight-bold;
+			color: $black-text-solid;
+			font-weight: $font-weight-medium;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			&:focus,
 			&:hover {
-				background-color: $white-bg;
+				background-color: $offwhite-solid;
 			}
 			.fa,
 			.icon {
@@ -112,41 +88,31 @@
 		ul {
 			a,
 			.a {
-				font-weight: $font-weight;
+				font-weight: $font-weight-normal;
 				padding-left: ($grid-gutter * 2);
 			}
 			ul {
 				a,
 				.a {
-					font-size: 90%;
+					font-size: $font-size-h6;
 					font-weight: $font-weight-light;
-					padding-top: ($line-height / 4);
-					padding-bottom: ($line-height / 4);
+					padding-top: (($nav-height - $line-height) / 4);
+					padding-bottom: (($nav-height - $line-height) / 4);
 					padding-left: ($grid-gutter * 3);
 				}
 			}
 		}
 	}
-	// no boxshadow
-		.nav  {
-			.no-boxshadow & {
-				margin-right: 1px;
-			}
-			.no-boxshadow .menu.menu-right & {
-				margin-right: 0;
-				margin-left: 1px;
-			}
-		}
 }
 
 // colour
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
 
 		.page-#{$color} .menu-content .nav li.active {
 			> a,
 			> .a {
-				color: nth($palette-color, $i);
+				color: nth($palette-list-color, $i);
 			}
 		}
 	}
@@ -156,20 +122,39 @@
 	padding-left: $grid-gutter;
 }
 
+.menu-backdrop {
+	backface-visibility: hidden;
+	background-color: $black;
+	opacity: 0;
+	position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	transition: opacity 0.3s $timing;
+	z-index: $header-base;
+	&.in {
+		opacity: 0.5;
+	}
+}
+
 .menu-logo {
 	@extend .header-logo;
-	border-bottom: 1px solid $black-bg;
-	color: $black-text;
+	border-bottom: 1px solid $black-divider-solid;
+	color: $black-text-solid;
 	float: none;
-	margin-bottom: ($line-height / 2);
+	height: $header-height;
+	margin-right: 0;
+	margin-bottom: $margin-base;
+	margin-left: 0;
+	padding: (($header-height - $line-height-h4) / 2) $grid-gutter (($header-height - $line-height-h4) / 2 - 1);
 	&:focus,
 	&:hover {
-		color: $black-text;
-		text-decoration: none;
+		color: $black-text-solid;
 	}
 	.menu-content > & {
 		&:first-child {
-			margin-top: ($line-height / -2);
+			margin-top: ($margin-base * -1);
 		}
 	}
 }
@@ -179,83 +164,43 @@
 	height: 100%;
 	max-width: 85%;
 	max-width: calc(100% - #{$grid-gutter * 4});
-	overflow: hidden;
-	position: absolute;
+	overflow-x: hidden;
+	overflow-y: auto;
+	position: fixed;
 		top: 0;
-		left: ($grid-gutter * -20);
-	transition: all 0.3s $timing;
-	transition-property: box-shadow, left;
+		left: 0;
+	transform: translateX(-100%);
+	transition: transform 0.3s $timing;
 	width: ($grid-gutter * 20);
 	z-index: 1;
-	.menu.open & {
-		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-		// left
-			left: 0;
-	}
+	-webkit-overflow-scrolling: touch;
+	-ms-overflow-style: none;
 	.menu-right & {
-		// position
-			right: ($grid-gutter * -20);
-			left: auto;
-		transition-property: box-shadow, right;
-	}
-	.menu-right.open & {
 		// position
 			right: 0;
 			left: auto;
+		transform: translateX(100%);
+	}
+	.menu.in & {
+		transform: translateX(0);
 	}
 	// 992
 		@include responsive(md) {
 			max-width: none;
 		}
-	// no boxshadow
-		.no-boxshadow & {
-			&:after {
-				background-color: $black-bg;
-				content: "";
-				display: block;
-				height: 100%;
-				position: absolute;
-					top: 0;
-					right: 0;
-				width: 1px;
-			}
-		}
-		.no-boxshadow .menu.menu-right & {
-			&:after {
-				// position
-					right: auto;
-					left: 0;
-			}
-		}
 }
 
 .menu-top {
-	background-color: $brand-color-dark-m;
-	color: $white-bg;
+	background-color: $black;
+	color: $white-text-solid;
 	position: relative;
 	z-index: 1;
-	a {
-		color: $white-bg;
+	a,
+	a:focus,
+	a:hover {
+		color: inherit;
 		text-decoration: none;
-		&:focus,
-		&:hover {
-			color: $white;
-		}
-	}
-}
-
-// colour
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-
-		.page-#{$color} .menu-top {
-			background-color: nth($palette-color-dark-m, $i);
-		}
 	}
-
-.menu-top-form {
-	margin-top: ($line-height / 4);
-	margin-bottom: ($line-height / 4);
 }
 
 .menu-top-img {
@@ -276,49 +221,41 @@
 }
 
 .menu-top-info {
-	padding: ($line-height * 1.5) $grid-gutter;
+	padding: $margin-sm $grid-gutter;
 	position: relative;
+	// 768
+		@include responsive(sm) {
+			padding-top: $margin-md;
+			padding-bottom: $margin-md;
+		}
 }
 
 .menu-top-info-sub {
 	font-weight: $font-weight-light;
-	padding: ($line-height / 2) $grid-gutter;
+	padding: $margin-sm $grid-gutter;
 	position: relative;
+	// 768
+		@include responsive(sm) {
+			padding-top: $margin-md;
+		}
 }
 
 .menu-top-user {
 	align-items: center;
 	display: flex;
-	@include clearfix();
-}
-
-.menu-wrap {
-	overflow-x: hidden;
-	overflow-y: auto;
-	position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	-webkit-overflow-scrolling: touch;
-	-ms-overflow-style: none;
-	// 480
-		@include responsive(xs) {
-			padding-right: ($grid-gutter * 2);
-			// position
-				right: ($grid-gutter * -2);
-		}
 }
 
 @mixin nav-drawer() {
 	background-color: transparent;
+	display: block !important;
 	overflow: visible;
 	width: ($grid-gutter * 15);
-	.menu-scroll {
-		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-		// left
-			left: 0;
-		width: ($grid-gutter * 15);
+	z-index: $header-base;
+	&.in ~ .menu-backdrop {
+		display: none;
+		~ .menu-backdrop {
+			display: block;
+		}
 	}
 	&.menu-left {
 		~ .content {
@@ -350,6 +287,11 @@
 				right: ($grid-gutter * 15);
 		}
 	}
+	.menu-scroll {
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+		transform: none;
+		width: ($grid-gutter * 15);
+	}
 }
 
 .nav-drawer {

data/app/assets/stylesheets/material/mixin/_grid.scss

@@ -4,14 +4,6 @@
 	padding-right: $grid-gutter;
 	padding-left: $grid-gutter;
 	@include clearfix();
-	// 992
-		@include responsive(md) {
-			max-width: ($screen-md - $grid-gutter * 2);
-		}
-	// 1440
-		@include responsive(lg) {
-			max-width: ($screen-lg - $grid-gutter * 2);
-		}
 }
 
 @mixin make-row() {
@@ -83,4 +75,4 @@
 		@include loop-col($grid-cols, $class, offset);
 		@include loop-col($grid-cols, $class, pull);
 		@include loop-col($grid-cols, $class, push);
-	}
+	}

data/app/assets/stylesheets/material/mixin/_responsive.scss

@@ -29,4 +29,4 @@
 				@content;
 			}
 		}
-}
+}

data/app/assets/stylesheets/material/mixin/_utilities.scss

@@ -33,4 +33,4 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-}
+}

data/app/assets/stylesheets/material/{_print.scss → utilities/_print.scss}

@@ -27,7 +27,7 @@
 
 	blockquote,
 	pre {
-		border: 1px solid $black-hint;
+		border: 1px solid $black-divider-solid;
 		page-break-inside: avoid;
 	}
 
@@ -65,7 +65,7 @@
 
 		.card,
 		.tile {
-			border: 1px solid $black-hint;
+			border: 1px solid $black-divider-solid;
 		}
 
 		.fbtn-container,
@@ -83,7 +83,7 @@
 		}
 
 		.tab-nav .nav > li.active > a {
-			border-bottom: 3px solid $black-text;
+			border-bottom: 3px solid $black-divider-solid;
 			padding-bottom: ($line-height / 2 - 3);
 		}
 }
@@ -116,4 +116,4 @@
 	.hidden-print {
 		display: none !important;
 	}
-}
+}