material-sass 0.0.4 → 1.0.0

data/app/assets/stylesheets/material/var/_variables.scss

@@ -0,0 +1,78 @@
+// base
+	$base:     8px;
+	$css-path: ".";
+
+// colour
+	@import "colours";
+
+// font
+	@import url(https://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic);
+
+	$font-fam:           Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+	$font-fam-mono:      Monaco, Menlo, Consolas, "Courier New", monospace;
+	$font-fam-serif:     Georgia, serif;
+
+	$font-weight-medium: 500;
+	$font-weight-normal: 400;
+	$font-weight-light:  300;
+
+	// font size
+		$font-size:             ($base * 1.75); // 14px
+		$font-size-h1:          ($base * 5.5);  // 44px
+		$font-size-h2:          ($base * 4.25); // 34px
+		$font-size-h3:          ($base * 3);    // 24px
+		$font-size-h4:          ($base * 2.5);  // 20px
+		$font-size-h5:          ($base * 2);    // 16px
+		$font-size-h6:          ($base * 1.5);  // 12px
+
+		$font-size-display-4:   ($base * 14);   // 112px
+		$font-size-display-3:   ($base * 7);    // 56px
+
+	// line height
+		$line-height:           ($base * 2.5);  // 20px
+		$line-height-h1:        ($base * 6);    // 48px
+		$line-height-h2:        ($base * 5);    // 40px
+		$line-height-h3:        ($base * 4);    // 32px
+		$line-height-h4:        ($base * 3.5);  // 28px
+		$line-height-h5:        ($base * 3);    // 24px
+		$line-height-h6:        ($base * 2.5);  // 20px
+
+		$line-height-display-4: 1.1;            // missing in google material design guideline
+		$line-height-display-3: 1.1;            // missing in google material design guideline
+
+	// margin
+		$margin-base:           ($base * 1);    // 8px
+		$margin-lg:             ($base * 6);    // 48px
+		$margin-md:             ($base * 3);    // 24px
+		$margin-sm:             ($base * 1.5);  // 12px
+
+	// other
+		$avatar-height:         ($base * 5);    // 40px
+		$btn-height:            ($base * 4.5);  // 36px
+		$header-height:         ($base * 7);    // 56px
+		$nav-height:            ($base * 6);    // 48px
+
+		$cell-height:           $nav-height;    // 48px
+		$fbtn-height:           $avatar-height; // 40px
+		$input-height:          $btn-height;    // 36px
+		$pcircular-height:      $avatar-height; // 40px
+		$tile-height:           $nav-height;    // 48px
+
+// grid
+	$grid-cols:   12;
+	$grid-gutter: ($base * 2);
+
+// responsive
+	$screen-lg: 1440px;
+	$screen-md: 992px;
+	$screen-sm: 768px;
+	$screen-xs: 480px;
+
+// timing
+	$timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+// z-index
+	$bottom-base:  10;
+	$content-base: 20;
+	$header-base:  30;
+	$top-base:     40;

data/lib/material-sass/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material-sass
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 1.0.0
 platform: ruby
 authors:
 - mkhairi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-02-11 00:00:00.000000000 Z
+date: 2016-02-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -51,78 +51,80 @@ files:
 - README.md
 - Rakefile
 - app/assets/fonts/MaterialIcons-Regular.eot
+- app/assets/fonts/MaterialIcons-Regular.ijmap
 - app/assets/fonts/MaterialIcons-Regular.ttf
 - app/assets/fonts/MaterialIcons-Regular.woff
 - app/assets/fonts/MaterialIcons-Regular.woff2
+- app/assets/images/bg/amber.jpg
+- app/assets/images/bg/brand.jpg
+- app/assets/images/bg/green.jpg
+- app/assets/images/bg/purple.jpg
+- app/assets/images/bg/red.jpg
+- app/assets/images/bg/teal.jpg
 - app/assets/javascripts/init.js
 - app/assets/javascripts/material-sprockets.js
 - app/assets/javascripts/material.js
+- app/assets/javascripts/material.min.js
 - app/assets/javascripts/material/_.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/form-adv-label.js
+- app/assets/javascripts/material/form-adv-textarea.js
 - app/assets/javascripts/material/header.js
 - app/assets/javascripts/material/menu.js
 - app/assets/javascripts/material/modal.js
+- app/assets/javascripts/material/snackbar.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.min.css
 - app/assets/stylesheets/material.scss
-- app/assets/stylesheets/material/_code.scss
-- app/assets/stylesheets/material/_grid.scss
-- app/assets/stylesheets/material/_print.scss
-- app/assets/stylesheets/material/_reset.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/_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/_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/addons/_material-icons.scss
+- app/assets/stylesheets/material/addons/_waves.scss
+- app/assets/stylesheets/material/addons/material-icons/_core.scss
+- app/assets/stylesheets/material/addons/material-icons/_larger.scss
+- app/assets/stylesheets/material/addons/material-icons/_path.scss
+- app/assets/stylesheets/material/addons/material-icons/_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
-- 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-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-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
-- app/assets/stylesheets/material/element/_table.scss
-- app/assets/stylesheets/material/element/_tile.scss
-- app/assets/stylesheets/material/element/_toast.scss
+- app/assets/stylesheets/material/base/_grid.scss
+- app/assets/stylesheets/material/base/_reset.scss
+- app/assets/stylesheets/material/components/_avatar.scss
+- app/assets/stylesheets/material/components/_breadcrumb.scss
+- app/assets/stylesheets/material/components/_button-flat.scss
+- app/assets/stylesheets/material/components/_button-float.scss
+- app/assets/stylesheets/material/components/_button.scss
+- app/assets/stylesheets/material/components/_card.scss
+- app/assets/stylesheets/material/components/_code.scss
+- app/assets/stylesheets/material/components/_dropdown.scss
+- app/assets/stylesheets/material/components/_form-adv-checkbox.scss
+- app/assets/stylesheets/material/components/_form-adv-datepicker.scss
+- app/assets/stylesheets/material/components/_form-adv-label.scss
+- app/assets/stylesheets/material/components/_form-adv-switch.scss
+- app/assets/stylesheets/material/components/_form-adv-textarea.scss
+- app/assets/stylesheets/material/components/_form.scss
+- app/assets/stylesheets/material/components/_label.scss
+- app/assets/stylesheets/material/components/_modal.scss
+- app/assets/stylesheets/material/components/_nav.scss
+- app/assets/stylesheets/material/components/_progress-circular.scss
+- app/assets/stylesheets/material/components/_progress-loadbar.scss
+- app/assets/stylesheets/material/components/_progress.scss
+- app/assets/stylesheets/material/components/_snackbar.scss
+- app/assets/stylesheets/material/components/_tab.scss
+- app/assets/stylesheets/material/components/_table.scss
+- app/assets/stylesheets/material/components/_tile.scss
+- app/assets/stylesheets/material/elements/_content.scss
+- app/assets/stylesheets/material/elements/_footer.scss
+- app/assets/stylesheets/material/elements/_header.scss
+- app/assets/stylesheets/material/elements/_menu.scss
 - 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/_utilities.scss
-- app/assets/stylesheets/material/project.scss
-- app/assets/stylesheets/material/theme/_content.scss
-- app/assets/stylesheets/material/theme/_footer.scss
-- app/assets/stylesheets/material/theme/_header.scss
-- app/assets/stylesheets/material/theme/_menu.scss
+- app/assets/stylesheets/material/utilities/_print.scss
+- app/assets/stylesheets/material/utilities/_utilities-responsive.scss
+- app/assets/stylesheets/material/utilities/_utilities.scss
+- app/assets/stylesheets/material/var/_colours.scss
+- app/assets/stylesheets/material/var/_variables.scss
 - lib/material-sass.rb
 - lib/material-sass/engine.rb
 - lib/material-sass/version.rb

data/app/assets/javascripts/material/content.js

@@ -1,46 +0,0 @@
-// fixed left/right hand side column affix
-	var contentPadding = 0,
-	    footerOffset = 0;
-
-	if ($('.content').length) {
-		contentPadding = parseInt($('.content').css('padding-bottom').replace('px', ''));
-	};
-
-	$(window).on('scroll', function() {
-		$('.content-fix').each(function(index) {
-			if ($(this).outerHeight() < $(this).closest('.row-fix').outerHeight()) {
-				contentFix($(this));
-			}
-		});
-	});
-
-	contentFix = function (content) {
-		var scrolled = window.innerHeight + window.pageYOffset;
-
-		if (window.pageYOffset >= (content.offset().top - headerHeight)) {
-			if ((content.is('[class*="col-xx"]')) || (content.is('[class*="col-xs"]') && $(window).width() >= 480) || (content.is('[class*="col-sm"]') && $(window).width() >= 768) || (content.is('[class*="col-md"]') && $(window).width() >= 992) || (content.is('[class*="col-lg"]') && $(window).width() >= 1440)) {
-				if (!content.hasClass('fixed')) {
-					content.addClass('fixed');
-					$('.content-fix-wrap', content).scrollTop(0);
-				};
-				if (footerOffset != 0 && footerOffset <= scrolled) {
-					$('.content-fix-inner', content).css('padding-bottom', (scrolled - footerOffset + contentPadding));
-				};
-			};
-		} else {
-			content.removeClass('fixed');
-			$('.content-fix-inner', content).css('padding-bottom', '');
-		}
-	}
-
-// fixed left/right hand side column padding bottom and width
-	contentFixPushCal = function () {
-		$('.content-fix-scroll').each(function(index) {
-			$(this).css('width', $(this).closest('.content-fix').outerWidth());
-			$('.content-fix-inner', $(this)).css('width', $(this).closest('.content-fix').width());
-		});
-
-		if ($('.footer').length) {
-			footerOffset = $('.footer').offset().top;
-		};
-	}

data/app/assets/javascripts/material/dropdown.js

@@ -1,18 +0,0 @@
-// dropdown menu show
-	$(document).on('show.bs.dropdown', '.dropdown', function() {
-		var $dropdownMenu = $('.dropdown-menu', $(this)),
-		    $dropdownToggle = $('[class*="dropdown-toggle"]', $(this)),
-		    dropdownPadding = $('a', $dropdownMenu).css('padding-left').replace('px', ''),
-		    dropdownWidth;
-
-		if ($dropdownMenu.length && $dropdownToggle.length) {
-			// dropdown menu max width
-				if ($dropdownMenu.hasClass('dropdown-menu-right') || $dropdownMenu.parents('.nav.pull-right').length) {
-					dropdownWidth = $dropdownToggle.offset().left + $dropdownToggle.outerWidth() - dropdownPadding;
-				} else {
-					dropdownWidth = window.innerWidth - $dropdownToggle.offset().left - dropdownPadding;
-				}
-
-				$dropdownMenu.css('max-width', dropdownWidth);
-		};
-	});

data/app/assets/javascripts/material/esc.js

@@ -1,10 +0,0 @@
-// close menu and/or tile if esc key is pressed
-	$(document).keyup(function(e) {
-		if (e.which == '27') {
-			if ($('.menu.open').length) {
-				mReset();
-			} else if (!$('body').hasClass('modal-open')) {
-				tReset();
-			}
-		};
-	});

data/app/assets/javascripts/material/footer.js

@@ -1,6 +0,0 @@
-// footer push
-	footerPush = function () {
-		if ($('.footer').length) {
-			$('body').css('margin-bottom', $('.footer').outerHeight());
-		};
-	}

data/app/assets/javascripts/material/form-adv.js

@@ -1,64 +0,0 @@
-// checkbox & radio
-	$('.checkbox-adv').each(function() {
-		$('label', $(this)).append('<span class="circle"></span><span class="circle-check"></span><span class="circle-icon icon">done</span>');
-	});
-
-	$('.radio-adv').each(function() {
-		$('label', $(this)).append('<span class="circle"></span><span class="circle-check"></span>');
-	});
-
-// floating label
-	if($('.form-group-label').length) {
-		$('.form-group-label .form-control').each(function() {
-			floatingLabel($(this));
-		});
-	};
-
-	$(document).on('change', '.form-group-label .form-control', function() {
-		floatingLabel($(this));
-	});
-
-	$(document).on('focusin', '.form-group-label .form-control', function() {
-		$(this).closest('.form-group-label').addClass('control-focus');
-	});
-
-	$(document).on('focusout', '.form-group-label .form-control', function() {
-		$(this).closest('.form-group-label').removeClass('control-focus');
-	});
-
-	function floatingLabel(input) {
-		var parent = input.closest('.form-group-label');
-
-		if(input.val()) {
-			parent.addClass('control-highlight');
-		} else {
-			parent.removeClass('control-highlight');
-		}
-	}
-
-// icon label
-	$(document).on('focusin', '.form-group-icon .form-control', function() {
-		$(this).closest('.form-group-icon').addClass('control-focus');
-	});
-
-	$(document).on('focusout', '.form-group-icon .form-control', function() {
-		$(this).closest('.form-group-icon').removeClass('control-focus');
-	});
-
-// switch
-	$(document).on('click', '.switch-toggle', function() {
-		var $this = $(this);
-
-		if (!$this.hasClass('switch-toggle-on')) {
-			$this.addClass('switch-toggle-on');
-			setTimeout(function() {
-				$this.removeClass('switch-toggle-on');
-			}, 300);
-		};
-	});
-
-// textarea autosize v0.4.0
-// Javier Julio: https://github.com/javierjulio/textarea-autosize
-	!function(t,e){function i(e){this.element=e,this.$element=t(e),this.init()}var n="textareaAutoSize",h="plugin_"+n,s=function(t){return t.replace(/\s/g,"").length>0};i.prototype={init:function(){var i=(this.$element.outerHeight(),parseInt(this.$element.css("paddingBottom"))+parseInt(this.$element.css("paddingTop")));s(this.element.value)&&this.$element.height(this.element.scrollHeight-i),this.$element.on("input keyup",function(){var n=t(e),h=n.scrollTop();t(this).height(0).height(this.scrollHeight-i),n.scrollTop(h)})}},t.fn[n]=function(e){return this.each(function(){t.data(this,h)||t.data(this,h,new i(this,e))}),this}}(jQuery,window,document);
-
-	$('.textarea-autosize').textareaAutoSize();

data/app/assets/javascripts/material/get-target.js

@@ -1,8 +0,0 @@
-// get target from trigger
-	getTargetFromTrigger = function(trigger) {
-		var href;
-		var target = trigger.attr('data-target')
-		    || (href = trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '');
-
-		return target;
-	}

data/app/assets/javascripts/material/toast.js

@@ -1,79 +0,0 @@
-// toast
-	var toastTimeout;
-
-	$('[data-toggle="toast"]').tooltip({
-		animation: false,
-		container: '.toast',
-		html: true,
-		placement: 'bottom',
-		template: '<div class="tooltip"><div class="toast-inner tooltip-inner"></div></div>',
-		trigger: 'manual'
-	});
-
-// toast dismiss
-	$(document).on('click', '[data-dismiss="toast"]', function(e) {
-		e.preventDefault();
-		toastHide(0);
-	});
-
-	toastHide = function (timer, toast) {
-		clearTimeout(toastTimeout);
-
-		toastTimeout = setTimeout(function() {
-			$('.toast').removeClass('toast-show');
-
-			if ($('.fbtn-container').length) {
-				$('.fbtn-container').css('margin-bottom', '');
-			};
-
-			$('.toast-inner').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
-				$('.toast-toggled').tooltip('hide').removeClass('toast-toggled');
-
-				if (toast !== null && toast !== undefined) {
-					toast.tooltip('show').addClass('toast-toggled');
-				} else {
-					$('.toast').remove();
-				}
-			});
-		}, timer);
-	}
-
-// toast hover
-	$(document).on('mouseenter', '.toast', function() {
-		clearTimeout(toastTimeout);
-	});
-
-	$(document).on('mouseleave', '.toast', function() {
-		toastHide(6000);
-	});
-
-// toast show
-	$(document).on('click', '[data-toggle="toast"]', function() {
-		var $this = $(this);
-
-		if (!$('.toast').length) {
-			$('body').append('<div class="toast"></div>');
-		};
-
-		if (!$this.hasClass('toast-toggled')) {
-			if ($('.toast').hasClass('toast-show')) {
-				toastHide(0, $this);
-			} else {
-				$this.tooltip('show').addClass('toast-toggled');
-			}
-		};
-	});
-
-	$(document).on('shown.bs.tooltip', '[data-toggle="toast"]', function() {
-		var $this = $(this);
-
-		$('.toast').addClass('toast-show');
-
-		if ($(window).width() < 768 && $('.fbtn-container').length) {
-			$('.fbtn-container').css('margin-bottom', $('.toast').outerHeight());
-		};
-
-		$('.toast-inner').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
-			toastHide(6000);
-		});
-	});