material-sass 0.0.1 → 0.0.2

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

@@ -2,60 +2,143 @@
 	position: fixed;
 		top: ($line-height * 2);
 		bottom: 0;
-		left: 0;
+		left: -100%;
 	width: 100%;
 	z-index: ($header-base - 1);
-	@include box-shadow(0 0 0 rgba(0, 0, 0, 0));
-	@include transform(translate3d(-100%, 0, 0));
-	-webkit-transition: -webkit-box-shadow 0s linear 0.3s, -webkit-transform 0.3s $timing 0s;
-	        transition: box-shadow 0s linear 0.3s, transform 0.3s $timing 0s;
-	&.menu-right {
-		// position
-			right: 0;
-			left: auto;
-		@include transform(translate3d(100%, 0, 0));
-	}
+	@include backface(hidden);
+	@include transition(all 0.3s $timing);
+	-webkit-transition-property: box-shadow, -webkit-transform;
+	        transition-property: box-shadow, transform;
 	&.open {
+		// position
+			left: 0;
 		@include box-shadow(0 0 10px rgba(0, 0, 0, 0.5));
-		@include transform(translate3d(0, 0, 0));
-		-webkit-transition: -webkit-box-shadow 0s linear 0s, -webkit-transform 0.3s $timing 0s;
-		        transition: box-shadow 0s linear 0s, transform 0.3s $timing 0s;
+		@include transition(all 0.3s $timing);
 	}
 	// 480
 		@include responsive(xs) {
-			width: 320px;
-		}
-	// 992
-		@include responsive(md) {
-			width: 400px;
+			// position
+				left: ($grid-gutter * -20);
+			width: ($grid-gutter * 20);
 		}
-	// no boxshadow
-		.no-boxshadow & {
-			border-right: 1px solid $black-hint;
-			&.menu-right {
-				border-right: 0;
-				border-left: 1px solid $black-hint;
+	// menu right
+		&.menu-right {
+			// position
+				right: -100%;
+				left: auto;
+			&.open {
+				// position
+					right: 0;
 			}
+			// 480
+				@include responsive(xs) {
+					// position
+						right: ($grid-gutter * -20);
+					// no-touch
+						.no-touch & {
+							&.open ~ .fbtn-container {
+								// position
+									right: ($grid-gutter * 21);
+							}
+						}
+				}
 		}
-	// no csstransforms
-		.no-csstransforms & {
-			display: none;
-			&.open {
-				display: block;
+}
+
+.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-collapse-toggle {
+	background-color: transparent !important;
+	cursor: pointer;
+	display: block;
+	float: right;
+	padding: ($line-height / 2) $grid-gutter;
+	position: absolute;
+		top: 0;
+		right: 0;
+	z-index: 1;
+	&:hover {
+		color: $link-color !important;
+	}
+}
+
+.menu-collapse-toggle-close {
+	position: absolute;
+		top: (($line-height * 2 - $font-size) / 2);
+		left: 0;
+	text-align: center;
+	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));
+	}
+}
+
+.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;
+	.menu-collapse-toggle.collapsed & {
+		@include opacity(1);
+		@include transform(rotate(0));
+	}
+}
+
 .menu-content {
-	padding-top: $line-height;
-	padding-bottom: $line-height;
+	padding-top: ($line-height / 2);
+	padding-bottom: ($line-height / 2);
 	hr {
 		border-top-color: $black-bg;
+		margin-top: ($line-height / 2 - 1);
+		margin-bottom: ($line-height / 2);
 	}
 	.nav {
 		margin-top: 0;
 		margin-bottom: 0;
-		a {
+		a,
+		.a {
 			color: $black-sec;
 			font-weight: 700;
 			overflow: hidden;
@@ -63,47 +146,65 @@
 			white-space: nowrap;
 			&:focus,
 			&:hover {
-				background-color: $white-bg-light;
+				background-color: $white-bg;
 			}
 			.fa,
 			.icon {
 				margin-right: $grid-gutter;
 			}
 		}
-		li.active > a {
-			background-color: $white-bg;
-			color: $brand-color;
-			.page-blue & {
-				color: $palette-blue;
-			}
-			.page-green & {
-				color: $palette-green;
+		li.active {
+			> 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;
+				}
 			}
-			.page-purple & {
-				color: $palette-purple;
-			}
-			.page-red & {
-				color: $palette-red;
+		}
+		ul {
+			a,
+			.a {
+				font-weight: 400;
+				padding-left: ($grid-gutter * 2);
 			}
-			.page-yellow & {
-				color: $palette-yellow;
+			ul {
+				a,
+				.a {
+					font-size: 90%;
+					font-weight: 300;
+					padding-top: ($line-height / 4);
+					padding-bottom: ($line-height / 4);
+					padding-left: ($grid-gutter * 3);
+				}
 			}
 		}
-		> li.active > a {
-			background-color: $white-bg-dark;
-		}
-		ul a {
-			font-weight: 400;
-			padding-left: ($grid-gutter * 3);
-		}
 	}
 	// 480
 		@include responsive(xs) {
-			width: 320px;
+			width: ($grid-gutter * 20);
 		}
-	// 992
-		@include responsive(md) {
-			width: 400px;
+	// no boxshadow
+		.nav  {
+			.no-boxshadow & {
+				margin-right: 1px;
+			}
+			.no-boxshadow .menu.menu-right & {
+				margin-right: 0;
+				margin-left: 1px;
+			}
 		}
 }
 
@@ -112,6 +213,13 @@
 	padding-left: $grid-gutter;
 }
 
+.menu-open {
+	// touch
+		.touch & {
+			overflow: hidden;
+		}
+}
+
 .menu-scroll {
 	background-color: $white;
 	height: 100%;
@@ -121,12 +229,33 @@
 		left: 0;
 	width: 100%;
 	z-index: 1;
+	// 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: $black-text;
 	color: $white-bg;
 	position: relative;
+	z-index: 1;
 	a {
 		color: $white-bg;
 		text-decoration: none;
@@ -137,11 +266,7 @@
 	}
 	// 480
 		@include responsive(xs) {
-			width: 320px;
-		}
-	// 992
-		@include responsive(md) {
-			width: 400px;
+			width: ($grid-gutter * 20);
 		}
 }
 
@@ -197,7 +322,7 @@
 		bottom: 0;
 		left: 0;
 	-webkit-overflow-scrolling: touch;
-	-ms-overflow-style: -ms-autohiding-scrollbar;
+	-ms-overflow-style: none;
 	// 480
 		@include responsive(xs) {
 			padding-right: ($grid-gutter * 2);
@@ -206,16 +331,80 @@
 		}
 }
 
-// fbtn
-	.menu-right.open ~ .fbtn-container{
-		// 480
-			@include responsive(xs) {
-				// position
-					right: ($grid-gutter + 320);
-			}
-		// 992
-			@include responsive(md) {
-				// position
-					right: ($grid-gutter + 400);
+.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;
+	}
+	// 1440
+		@include responsive(lg) {
+			// 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);
 			}
-	}
+			// 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;
+	}
+}
+
+.nav-drawer-open {
+	overflow: hidden;
+	// 1440
+		@include responsive(lg) {
+			overflow: auto;
+		}
+}

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(\.(?:eot|svg|ttf|woff2?)$)
+        app.config.assets.precompile << %r(MaterialDesignIcon\.(?:eot|svg|ttf|woff2?)$)
       end
     end
   end

data/lib/material-sass/version.rb

@@ -1,5 +1,5 @@
 module Material
   module Sass
-    VERSION = "0.0.1"
+    VERSION = "0.0.2"
   end
 end

metadata

@@ -1,46 +1,41 @@
 --- !ruby/object:Gem::Specification
 name: material-sass
 version: !ruby/object:Gem::Version
-  version: 0.0.1
-  prerelease: 
+  version: 0.0.2
 platform: ruby
 authors:
 - mkhairi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-25 00:00:00.000000000 Z
+date: 2015-05-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '1.7'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '1.7'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '10.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '10.0'
 description: HTML5 UI design based on Google Material.
@@ -50,76 +45,67 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- .gitignore
+- ".gitignore"
 - Gemfile
 - LICENSE.txt
 - README.md
 - Rakefile
-- app/assets/fonts/FontAwesome.otf
 - app/assets/fonts/MaterialDesignIcon.eot
 - app/assets/fonts/MaterialDesignIcon.svg
 - app/assets/fonts/MaterialDesignIcon.ttf
 - app/assets/fonts/MaterialDesignIcon.woff
-- app/assets/fonts/fontawesome-webfont.eot
-- app/assets/fonts/fontawesome-webfont.svg
-- app/assets/fonts/fontawesome-webfont.ttf
-- app/assets/fonts/fontawesome-webfont.woff
-- app/assets/fonts/fontawesome-webfont.woff2
 - app/assets/javascripts/material-sprockets.js
 - app/assets/javascripts/material.js
 - app/assets/javascripts/material/_.js
-- app/assets/javascripts/material/btn.js
+- app/assets/javascripts/material/bootstrap.js
 - app/assets/javascripts/material/content.js
 - app/assets/javascripts/material/datepicker.js
 - app/assets/javascripts/material/dropdown.js
 - app/assets/javascripts/material/esc.js
 - app/assets/javascripts/material/footer.js
 - app/assets/javascripts/material/form-adv.js
+- app/assets/javascripts/material/get-target.js
 - 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
+- app/assets/javascripts/material/wave.js
+- app/assets/javascripts/material/webfont.js
 - app/assets/javascripts/material/winresize.js
 - app/assets/stylesheets/material.scss
-- app/assets/stylesheets/material/_addon.scss
 - app/assets/stylesheets/material/_code.scss
-- app/assets/stylesheets/material/_element.scss
 - app/assets/stylesheets/material/_grid.scss
-- app/assets/stylesheets/material/_mixin.scss
+- app/assets/stylesheets/material/_print.scss
 - app/assets/stylesheets/material/_reset.scss
-- app/assets/stylesheets/material/_theme.scss
-- app/assets/stylesheets/material/_utilitise.scss
-- app/assets/stylesheets/material/_variable-color.scss
+- app/assets/stylesheets/material/_utilities-responsive.scss
+- app/assets/stylesheets/material/_utilities.scss
 - app/assets/stylesheets/material/_variable.scss
-- app/assets/stylesheets/material/addon/_font-awesome.scss
 - app/assets/stylesheets/material/addon/_material-design-icon.scss
-- app/assets/stylesheets/material/addon/font-awesome/_animated.scss
-- app/assets/stylesheets/material/addon/font-awesome/_bordered-pulled.scss
-- app/assets/stylesheets/material/addon/font-awesome/_core.scss
-- app/assets/stylesheets/material/addon/font-awesome/_fixed-width.scss
-- app/assets/stylesheets/material/addon/font-awesome/_flipped-rotated.scss
-- app/assets/stylesheets/material/addon/font-awesome/_icon.scss
-- app/assets/stylesheets/material/addon/font-awesome/_icons.scss
-- app/assets/stylesheets/material/addon/font-awesome/_larger.scss
-- app/assets/stylesheets/material/addon/font-awesome/_list.scss
-- app/assets/stylesheets/material/addon/font-awesome/_mixins.scss
-- app/assets/stylesheets/material/addon/font-awesome/_path.scss
-- app/assets/stylesheets/material/addon/font-awesome/_stacked.scss
-- app/assets/stylesheets/material/addon/font-awesome/_variable.scss
-- app/assets/stylesheets/material/addon/font-awesome/_variables.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/_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-float.scss
 - app/assets/stylesheets/material/element/_button.scss
 - app/assets/stylesheets/material/element/_card.scss
 - app/assets/stylesheets/material/element/_dropdown.scss
+- app/assets/stylesheets/material/element/_form-adv-checkbox.scss
 - app/assets/stylesheets/material/element/_form-adv-datepicker.scss
-- app/assets/stylesheets/material/element/_form-adv.scss
+- app/assets/stylesheets/material/element/_form-adv-label.scss
+- app/assets/stylesheets/material/element/_form-adv-switch.scss
+- app/assets/stylesheets/material/element/_form-adv-textarea.scss
 - app/assets/stylesheets/material/element/_form.scss
+- 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.scss
 - app/assets/stylesheets/material/element/_sortable.scss
 - app/assets/stylesheets/material/element/_tab.scss
 - app/assets/stylesheets/material/element/_table.scss
@@ -128,7 +114,7 @@ files:
 - app/assets/stylesheets/material/mixin/_css3.scss
 - app/assets/stylesheets/material/mixin/_grid.scss
 - app/assets/stylesheets/material/mixin/_responsive.scss
-- app/assets/stylesheets/material/mixin/_utilitise.scss
+- app/assets/stylesheets/material/mixin/_utilities.scss
 - app/assets/stylesheets/material/project.scss
 - app/assets/stylesheets/material/theme/_content.scss
 - app/assets/stylesheets/material/theme/_footer.scss
@@ -141,26 +127,25 @@ files:
 homepage: https://github.com/mkhairi/material-sass
 licenses:
 - MIT
+metadata: {}
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.23
+rubygems_version: 2.4.4
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: HTML5 UI design based on Google Material
 test_files: []