material-sass 0.0.3 → 0.0.4

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

@@ -1,83 +1,34 @@
 .menu {
+	backface-visibility: hidden;
+	background-color: transparent;
+	height: 100%;
+	overflow: hidden;
 	position: fixed;
-		top: ($line-height * 2);
-		bottom: 0;
-		left: -100%;
-	width: 100%;
-	z-index: ($header-base - 1);
-	@include backface(hidden);
-	@include transition(all 0.3s $timing);
-	-webkit-transition-property: box-shadow, -webkit-transform;
-	        transition-property: box-shadow, transform;
+	top: 0;
+	left: 0;
+	transition: background-color 0.3s $timing, width 0s 0.3s;
+	width: 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
-			left: 0;
-		@include box-shadow(0 0 10px rgba(0, 0, 0, 0.5));
-		@include transition(all 0.3s $timing);
+			right: 0;
+			left: auto;
 	}
-	// 480
-		@include responsive(xs) {
-			// position
-				left: ($grid-gutter * -20);
-			width: ($grid-gutter * 20);
-		}
-	// menu right
-		&.menu-right {
-			// position
-				right: -100%;
-				left: auto;
+	// 992
+		@include responsive(md) {
 			&.open {
-				// position
-					right: 0;
+				background-color: transparent;
+				overflow: visible;
+				width: ($grid-gutter * 20);
 			}
-			// 480
-				@include responsive(xs) {
-					// position
-						right: ($grid-gutter * -20);
-					// no-touch
-						.no-touch & {
-							&.open ~ .fbtn-container {
-								// position
-									right: ($grid-gutter * 21);
-							}
-						}
-				}
-		}
-}
-
-.menu-backdrop {
-	display: none;
-	.nav-drawer ~ &,
-	.touch & {
-		background-color: $black;
-		display: block;
-		height: 0;
-		position: fixed;
-			top: 0;
-			left: 0;
-		width: 0;
-		z-index: ($header-base - 2);
-		@include backface(hidden);
-		@include opacity(0);
-		@include transition(height 0s 0.3s, opacity 0.3s $timing, width 0s 0.3s, z-index 0s 0.3s);
-	}
-	.nav-drawer.open ~ &,
-	.touch .menu.open ~ & {
-		height: 100%;
-		width: 100%;
-		@include opacity(0.5);
-		@include transition(opacity 0.3s $timing);
-	}
-	.nav-drawer.open ~ & {
-		z-index: $header-base;
-	}
-	// 1440
-		@include responsive(lg) {
-			.nav-drawer.open ~ & {
-				height: 0;
-				width: 0;
-				@include opacity(0);
-				@include transition(none);
+			&.menu-right.open ~ .fbtn-container {
+				// position
+					right: ($grid-gutter * 21);
 			}
 		}
 }
@@ -98,31 +49,30 @@
 }
 
 .menu-collapse-toggle-close {
+	margin-top: ($font-size / -2);
+	opacity: 1;
 	position: absolute;
-		top: (($line-height * 2 - $font-size) / 2);
+		top: 50%;
 		left: 0;
 	text-align: center;
+	transform: rotate(0);
+	transition: all 0.3s $timing;
+	transition-property: opacity, transform;
 	width: 100%;
-	@include opacity(1);
-	@include transform(rotate(0));
-	@include transition(all 0.3s $timing);
-	-webkit-transition-property: opacity, -webkit-transform;
-	        transition-property: opacity, transform;
 	.menu-collapse-toggle.collapsed & {
-		@include opacity(0);
-		@include transform(rotate(-225deg));
+		opacity: 0;
+		transform: rotate(-225deg);
 	}
 }
 
 .menu-collapse-toggle-default {
-	@include opacity(0);
-	@include transform(rotate(225deg));
-	@include transition(all 0.3s $timing);
-	-webkit-transition-property: opacity, -webkit-transform;
-	        transition-property: opacity, transform;
+	opacity: 0;
+	transform: rotate(225deg);
+	transition: all 0.3s $timing;
+	transition-property: opacity, transform;
 	.menu-collapse-toggle.collapsed & {
-		@include opacity(1);
-		@include transform(rotate(0));
+		opacity: 1;
+		transform: rotate(0);
 	}
 }
 
@@ -140,7 +90,7 @@
 		a,
 		.a {
 			color: $black-sec;
-			font-weight: 700;
+			font-weight: $font-weight-bold;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -157,34 +107,19 @@
 			> a,
 			> .a {
 				color: $brand-color;
-				.page-blue & {
-					color: $palette-blue;
-				}
-				.page-green & {
-					color: $palette-green;
-				}
-				.page-purple & {
-					color: $palette-purple;
-				}
-				.page-red & {
-					color: $palette-red;
-				}
-				.page-yellow & {
-					color: $palette-yellow;
-				}
 			}
 		}
 		ul {
 			a,
 			.a {
-				font-weight: 400;
+				font-weight: $font-weight;
 				padding-left: ($grid-gutter * 2);
 			}
 			ul {
 				a,
 				.a {
 					font-size: 90%;
-					font-weight: 300;
+					font-weight: $font-weight-light;
 					padding-top: ($line-height / 4);
 					padding-bottom: ($line-height / 4);
 					padding-left: ($grid-gutter * 3);
@@ -192,10 +127,6 @@
 			}
 		}
 	}
-	// 480
-		@include responsive(xs) {
-			width: ($grid-gutter * 20);
-		}
 	// no boxshadow
 		.nav  {
 			.no-boxshadow & {
@@ -208,27 +139,74 @@
 		}
 }
 
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.page-#{$color} .menu-content .nav li.active {
+			> a,
+			> .a {
+				color: nth($palette-color, $i);
+			}
+		}
+	}
+
 .menu-content-inner {
 	padding-right: $grid-gutter;
 	padding-left: $grid-gutter;
 }
 
-.menu-open {
-	// touch
-		.touch & {
-			overflow: hidden;
+.menu-logo {
+	@extend .header-logo;
+	border-bottom: 1px solid $black-bg;
+	color: $black-text;
+	float: none;
+	margin-bottom: ($line-height / 2);
+	&:focus,
+	&:hover {
+		color: $black-text;
+		text-decoration: none;
+	}
+	.menu-content > & {
+		&:first-child {
+			margin-top: ($line-height / -2);
 		}
+	}
 }
 
 .menu-scroll {
 	background-color: $white;
 	height: 100%;
+	max-width: 85%;
+	max-width: calc(100% - #{$grid-gutter * 4});
 	overflow: hidden;
 	position: absolute;
 		top: 0;
-		left: 0;
-	width: 100%;
+		left: ($grid-gutter * -20);
+	transition: all 0.3s $timing;
+	transition-property: box-shadow, left;
+	width: ($grid-gutter * 20);
 	z-index: 1;
+	.menu.open & {
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+		// left
+			left: 0;
+	}
+	.menu-right & {
+		// position
+			right: ($grid-gutter * -20);
+			left: auto;
+		transition-property: box-shadow, right;
+	}
+	.menu-right.open & {
+		// position
+			right: 0;
+			left: auto;
+	}
+	// 992
+		@include responsive(md) {
+			max-width: none;
+		}
 	// no boxshadow
 		.no-boxshadow & {
 			&:after {
@@ -264,31 +242,25 @@
 			color: $white;
 		}
 	}
-	// 480
-		@include responsive(xs) {
-			width: ($grid-gutter * 20);
-		}
-	// colour
-		@each $color in $palette-list {
-			$i: index($palette-list, $color);
-			
-			.page-#{$color} & {
-				background-color: nth($palette-color-dark-m, $i);
-			}
-		}
 }
 
+// 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 {
-	display: -webkit-box;
-	display:    -moz-box;
-	display:     -ms-flexbox;
-	display: -webkit-flex;
-	display:         flex;
+	align-items: center;
+	display: flex;
 	height: 100%;
 	justify-content: center;
 	overflow: hidden;
@@ -296,12 +268,10 @@
 		top: 0;
 		left: 0;
 	width: 100%;
-	-webkit-align-items: center;
-	        align-items: center;
 	img {
 		min-height: 100%;
 		width: 100%;
-		@include opacity(0.5);
+		opacity: 0.5;
 	}
 }
 
@@ -310,14 +280,15 @@
 	position: relative;
 }
 
+.menu-top-info-sub {
+	font-weight: $font-weight-light;
+	padding: ($line-height / 2) $grid-gutter;
+	position: relative;
+}
+
 .menu-top-user {
-	display: -webkit-box;
-	display:    -moz-box;
-	display:     -ms-flexbox;
-	display: -webkit-flex;
-	display:         flex;
-	-webkit-align-items: center;
-	        align-items: center;
+	align-items: center;
+	display: flex;
 	@include clearfix();
 }
 
@@ -339,80 +310,59 @@
 		}
 }
 
-.nav-drawer {
-	max-width: 85%;
-	max-width: calc(100% - #{$grid-gutter * 4});
-	// position
-		top: 0;
-		left: ($grid-gutter * -20);
-	width: ($grid-gutter * 20);
-	z-index: ($header-base + 1);
-	.menu-content {
-		padding-top: 0;
+@mixin nav-drawer() {
+	background-color: transparent;
+	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);
 	}
-	// 1440
-		@include responsive(lg) {
+	&.menu-left {
+		~ .content {
+			margin-left: ($grid-gutter * 15);
+			.content-heading,
+			.content-inner {
+				padding-left: $grid-gutter;
+			}
+		}
+		~ .footer,
+		~ .header {
+			padding-left: $grid-gutter;
 			// position
-				left: 0;
-			width: ($grid-gutter * 15);
-			@include box-shadow(0 0 10px rgba(0, 0, 0, 0.5));
-			.menu-content,
-			.menu-top {
-				width: ($grid-gutter * 15);
+				left: ($grid-gutter * 15);
+		}
+	}
+	&.menu-right {
+		~ .content {
+			margin-right: ($grid-gutter * 15);
+			.content-heading,
+			.content-inner {
+				padding-right: $grid-gutter;
 			}
-			// menu left
-				&.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
-				&.menu-right {
-					// position
-						right: 0;
-					~ .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);
-					}
-				}
 		}
-}
-
-.nav-drawer-logo {
-	@extend .header-logo;
-	border-bottom: 1px solid $black-bg;
-	color: $black-text;
-	float: none;
-	margin-bottom: ($line-height / 2);
-	&:focus,
-	&:hover {
-		text-decoration: none;
+		~ .footer,
+		~ .header {
+			padding-right: $grid-gutter;
+			// position
+				right: ($grid-gutter * 15);
+		}
 	}
 }
 
-.nav-drawer-open {
-	overflow: hidden;
+.nav-drawer {
+	// 992
+		@include responsive(md) {
+			&.nav-drawer-md {
+				@include nav-drawer()
+			}
+		}
 	// 1440
 		@include responsive(lg) {
-			overflow: auto;
+			&.nav-drawer-lg {
+				@include nav-drawer();
+			}
 		}
-}
+}

data/lib/material-sass/engine.rb

@@ -5,7 +5,7 @@ module Material
         %w(stylesheets javascripts fonts images).each do |sub|
           app.config.assets.paths << root.join('app/assets', sub).to_s
         end
-        app.config.assets.precompile << %r(MaterialDesignIcon\.(?:eot|svg|ttf|woff2?)$)
+        app.config.assets.precompile << %r(MaterialIcons-Regular\.(?:eot|svg|ttf|woff|woff2?)$)
       end
     end
   end

data/lib/material-sass/version.rb

@@ -1,5 +1,5 @@
 module Material
   module Sass
-    VERSION = "0.0.3"
+    VERSION = "0.0.4"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material-sass
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - mkhairi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-05-21 00:00:00.000000000 Z
+date: 2016-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -50,10 +50,11 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
-- app/assets/fonts/MaterialDesignIcon.eot
-- app/assets/fonts/MaterialDesignIcon.svg
-- app/assets/fonts/MaterialDesignIcon.ttf
-- app/assets/fonts/MaterialDesignIcon.woff
+- app/assets/fonts/MaterialIcons-Regular.eot
+- app/assets/fonts/MaterialIcons-Regular.ttf
+- app/assets/fonts/MaterialIcons-Regular.woff
+- app/assets/fonts/MaterialIcons-Regular.woff2
+- app/assets/javascripts/init.js
 - app/assets/javascripts/material-sprockets.js
 - app/assets/javascripts/material.js
 - app/assets/javascripts/material/_.js
@@ -68,7 +69,6 @@ files:
 - app/assets/javascripts/material/header.js
 - app/assets/javascripts/material/menu.js
 - app/assets/javascripts/material/modal.js
-- app/assets/javascripts/material/sortable.js
 - app/assets/javascripts/material/tab.js
 - app/assets/javascripts/material/tile.js
 - app/assets/javascripts/material/toast.js
@@ -86,12 +86,13 @@ files:
 - app/assets/stylesheets/material/addon/_material-design-icon.scss
 - app/assets/stylesheets/material/addon/_waves.scss
 - app/assets/stylesheets/material/addon/material-design-icon/_core.scss
-- app/assets/stylesheets/material/addon/material-design-icon/_icons.scss
+- app/assets/stylesheets/material/addon/material-design-icon/_larger.scss
 - app/assets/stylesheets/material/addon/material-design-icon/_path.scss
 - app/assets/stylesheets/material/addon/material-design-icon/_variables.scss
 - app/assets/stylesheets/material/base.scss
 - app/assets/stylesheets/material/element/_avatar.scss
 - app/assets/stylesheets/material/element/_breadcrumb.scss
+- app/assets/stylesheets/material/element/_button-flat.scss
 - app/assets/stylesheets/material/element/_button-float.scss
 - app/assets/stylesheets/material/element/_button.scss
 - app/assets/stylesheets/material/element/_card.scss
@@ -105,6 +106,8 @@ files:
 - app/assets/stylesheets/material/element/_label.scss
 - app/assets/stylesheets/material/element/_modal.scss
 - app/assets/stylesheets/material/element/_nav.scss
+- app/assets/stylesheets/material/element/_progress-circular.scss
+- app/assets/stylesheets/material/element/_progress-loadbar.scss
 - app/assets/stylesheets/material/element/_progress.scss
 - app/assets/stylesheets/material/element/_sortable.scss
 - app/assets/stylesheets/material/element/_tab.scss
@@ -144,7 +147,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.4
+rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4
 summary: HTML5 UI design based on Google Material