material-sass 1.1.0 → 1.3.0

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

@@ -1,26 +1,26 @@
-.content-heading {
+.content-header {
 	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 {
+		.content-header-#{$color},
+		.page-#{$color} .content-header {
 			background-color: nth($palette-list-color, $i);
 			color: nth($palette-list-text, $i);
 		}
 	}
 
+.content-heading {
+	font-weight: $font-weight-light;
+}
+
 .content-inner {
 	margin-top: $margin-lg;
 	margin-bottom: $margin-lg;

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

@@ -3,8 +3,6 @@
 	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);
@@ -27,19 +25,17 @@
 		z-index: 1;
 	}
 	.nav {
-		margin: 0;
+		margin-top: 0;
+		margin-bottom: 0;
+		> li > a,
+		> li > .a {
+			height: $header-height;
+		}
 	}
 	.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);
-			}
-		}
+		margin-top: 0;
+		margin-bottom: 0;
 	}
 }
 
@@ -54,36 +50,36 @@
 	}
 
 .header-affix {
-	max-height: $nav-height;
+	max-height: $header-height;
 	overflow: hidden;
-	position: static !important;
 	width: 0;
 	&.affix {
-		overflow: visible;
 		width: auto;
 	}
 }
 
 .header-affix-hide {
-	position: static !important;
+	max-height: $header-height;
+	overflow: hidden;
+	width: auto;
 	&.affix {
-		max-height: $nav-height;
-		overflow: hidden;
 		width: 0;
 	}
 }
 
 .header-logo,
 .header-text {
-	display: block;
+	align-items: center;
+	display: flex;
 	float: left;
 	font-weight: $font-weight-light;
-	height: $nav-height;
+	height: $header-height;
 	line-height: $line-height-h4;
 	margin: 0 $grid-gutter;
-	padding: (($nav-height - $line-height-h4) / 2) 0;
+	white-space: nowrap;
 	&:focus,
 	&:hover {
+		outline: 0;
 		text-decoration: none;
 	}
 }
@@ -92,7 +88,7 @@
 	font-size: $font-size-h4;
 	img {
 		display: block;
-		max-height: $line-height-h4;
+		max-height: ($header-height * 0.75);
 		width: auto;
 	}
 }

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

@@ -12,33 +12,40 @@
 }
 
 .menu-collapse-toggle {
-	background-color: transparent !important;
+	align-items: center;
 	cursor: pointer;
-	display: block;
-	float: right;
-	padding: (($nav-height - $line-height) / 2) $grid-gutter;
+	display: flex;
+	height: 100%;
+	padding: 0 $grid-gutter;
 	position: absolute;
 		top: 0;
 		right: 0;
 	z-index: 1;
+	&:focus,
 	&:hover {
-		color: $link-color !important;
+		outline: 0;
+		text-decoration: none;
 	}
 }
 
+.menu-collapse-toggle-close,
+.menu-collapse-toggle-default {
+	transition-duration: 0.3s;
+	transition-property: opacity, transform;
+	transition-timing-function: $timing;
+}
+
 .menu-collapse-toggle-close {
-	margin-top: ($font-size / -2);
-	margin-left: ($font-size / -2);
+	align-items: center;
+	display: flex;
+	height: 100%;
+	justify-content: center;
 	opacity: 1;
 	position: absolute;
-		top: 50%;
-		left: 50%;
-	text-align: center;
+		top: 0;
+		left: 0;
 	transform: rotate(0);
-	transition-duration: 0.3s;
-	transition-property: opacity, transform;
-	transition-timing-function: $timing;
-	width: $font-size;
+	width: 100%;;
 	.menu-collapse-toggle.collapsed & {
 		opacity: 0;
 		transform: rotate(-225deg);
@@ -48,9 +55,6 @@
 .menu-collapse-toggle-default {
 	opacity: 0;
 	transform: rotate(225deg);
-	transition-duration: 0.3s;
-	transition-property: opacity, transform;
-	transition-timing-function: $timing;
 	.menu-collapse-toggle.collapsed & {
 		opacity: 1;
 		transform: rotate(0);
@@ -67,17 +71,10 @@
 		.a {
 			color: $black-text-solid;
 			font-weight: $font-weight-medium;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
 			&:focus,
 			&:hover {
 				background-color: $offwhite-solid;
 			}
-			.fa,
-			.icon {
-				margin-right: $grid-gutter;
-			}
 		}
 		li.active {
 			> a,
@@ -89,15 +86,13 @@
 			a,
 			.a {
 				font-weight: $font-weight-normal;
+				min-height: ($nav-height * 0.75);
 				padding-left: ($grid-gutter * 2);
 			}
 			ul {
 				a,
 				.a {
 					font-size: $font-size-h6;
-					font-weight: $font-weight-light;
-					padding-top: (($nav-height - $line-height) / 4);
-					padding-bottom: (($nav-height - $line-height) / 4);
 					padding-left: ($grid-gutter * 3);
 				}
 			}
@@ -139,24 +134,32 @@
 }
 
 .menu-logo {
-	@extend .header-logo;
+	align-items: center;
 	border-bottom: 1px solid $black-divider-solid;
 	color: $black-text-solid;
-	float: none;
-	height: $header-height;
-	margin-right: 0;
+	display: flex;
+	font-size: $font-size-h4;
+	font-weight: $font-weight-light;
+	line-height: $line-height-h4;
 	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 {
+	min-height: $header-height;
+	padding: 0 $grid-gutter;
+	&[href]:focus,
+	&[href]:hover {
 		color: $black-text-solid;
+		outline: 0;
+		text-decoration: none;
 	}
 	.menu-content > & {
 		&:first-child {
 			margin-top: ($margin-base * -1);
 		}
 	}
+	img {
+		display: block;
+		max-height: ($header-height * 0.75);
+		width: auto;
+	}
 }
 
 .menu-scroll {
@@ -243,54 +246,8 @@
 .menu-top-user {
 	align-items: center;
 	display: flex;
-}
-
-@mixin nav-drawer() {
-	background-color: transparent;
-	display: block !important;
-	overflow: visible;
-	width: ($grid-gutter * 15);
-	z-index: $header-base;
-	&.in ~ .menu-backdrop {
-		display: none;
-		~ .menu-backdrop {
-			display: block;
-		}
-	}
-	&.menu-left {
-		~ .content {
-			margin-left: ($grid-gutter * 15);
-			.content-heading,
-			.content-inner {
-				padding-left: $grid-gutter;
-			}
-		}
-		~ .footer,
-		~ .header {
-			padding-left: $grid-gutter;
-			// position
-				left: ($grid-gutter * 15);
-		}
-	}
-	&.menu-right {
-		~ .content {
-			margin-right: ($grid-gutter * 15);
-			.content-heading,
-			.content-inner {
-				padding-right: $grid-gutter;
-			}
-		}
-		~ .footer,
-		~ .header {
-			padding-right: $grid-gutter;
-			// position
-				right: ($grid-gutter * 15);
-		}
-	}
-	.menu-scroll {
-		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-		transform: none;
-		width: ($grid-gutter * 15);
+	> * {
+		flex-shrink: 0;
 	}
 }
 

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

@@ -27,6 +27,39 @@
 	width: 100% \9;
 }
 
+@mixin nav-drawer() {
+	background-color: transparent;
+	display: block !important;
+	overflow: visible;
+	width: ($grid-gutter * 15);
+	z-index: $header-base;
+	&.in ~ .menu-backdrop {
+		display: none;
+		~ .menu-backdrop {
+			display: block;
+		}
+	}
+	&.menu-left {
+		~ .content,
+		~ .footer,
+		~ .header {
+			margin-left: ($grid-gutter * 15);
+		}
+	}
+	&.menu-right {
+		~ .content,
+		~ .footer,
+		~ .header {
+			margin-right: ($grid-gutter * 15);
+		}
+	}
+	.menu-scroll {
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+		transform: none;
+		width: ($grid-gutter * 15);
+	}
+}
+
 @mixin text-overflow() {
 	display: block;
 	line-height: inherit;

data/app/assets/stylesheets/material/utilities/_print.scss

@@ -56,6 +56,10 @@
 		display: table-header-group;
 	}
 
+	.hidden-print {
+		display: none !important;
+	}
+
 	// material
 		.card,
 		.card-img,
@@ -67,53 +71,25 @@
 		.tile {
 			border: 1px solid $black-divider-solid;
 		}
-
-		.fbtn-container,
-		.menu,
-		.menu-toggle {
-			display: none !important;
-		}
-
-		.footer {
-			page-break-after: always;
-		}
-
-		.header a {
-			color: $link-color;
-		}
-
-		.tab-nav .nav > li.active > a {
-			border-bottom: 3px solid $black-divider-solid;
-			padding-bottom: ($line-height / 2 - 3);
-		}
 }
 
 .visible-print-block {
 	display: none !important;
-	// print
-		@media print {
-			display: block !important;
-		}
+	@media print {
+		display: block !important;
+	}
 }
 
 .visible-print-inline {
 	display: none !important;
-	// print
-		@media print {
-			display: inline !important;
-		}
+	@media print {
+		display: inline !important;
+	}
 }
 
 .visible-print-inline-block {
 	display: none !important;
-	// print
-		@media print {
-			display: inline-block !important;
-		}
-}
-
-@media print {
-	.hidden-print {
-		display: none !important;
+	@media print {
+		display: inline-block !important;
 	}
 }

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

@@ -32,16 +32,14 @@
 }
 
 .collapsed-hide {
-	display: inline;
-	.collapsed & {
+	.collapsed > & {
 		display: none;
 	}
 }
 
 .collapsed-show {
-	display: none;
-	.collapsed & {
-		display: inline;
+	:not(.collapsed) > & {
+		display: none;
 	}
 }
 
@@ -60,10 +58,6 @@
 	position: relative;
 }
 
-body.el-loading {
-	position: static;
-}
-
 .el-loading-indicator {
 	background-color: $white;
 	font-family: sans-serif !important;
@@ -239,12 +233,6 @@ body.el-loading {
 	overflow: hidden;
 }
 
-.p {
-	display: block;
-	margin-top: $margin-base;
-	margin-bottom: $margin-base;
-}
-
 .padding-bottom {
 	padding-bottom: $margin-md !important;
 }
@@ -333,10 +321,6 @@ body.el-loading {
 	float: left;
 }
 
-.pull-none {
-	float: none !important;
-}
-
 .pull-right {
 	float: right;
 }