dlegr250_material_design 0.1.0

data/vendor/assets/javascripts/third_party/jquery.hammer.js

@@ -0,0 +1,33 @@
+(function(factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery', 'hammerjs'], factory);
+    } else if (typeof exports === 'object') {
+        factory(require('jquery'), require('hammerjs'));
+    } else {
+        factory(jQuery, Hammer);
+    }
+}(function($, Hammer) {
+    function hammerify(el, options) {
+        var $el = $(el);
+        if(!$el.data("hammer")) {
+            $el.data("hammer", new Hammer($el[0], options));
+        }
+    }
+
+    $.fn.hammer = function(options) {
+        return this.each(function() {
+            hammerify(this, options);
+        });
+    };
+
+    // extend the emit method to also trigger jQuery events
+    Hammer.Manager.prototype.emit = (function(originalEmit) {
+        return function(type, data) {
+            originalEmit.call(this, type, data);
+            $(this.element).trigger({
+                type: type,
+                gesture: data
+            });
+        };
+    })(Hammer.Manager.prototype.emit);
+}));

data/vendor/assets/javascripts/third_party/snackbarlight.js

@@ -0,0 +1,218 @@
+/**
+ * Constructor
+ *
+ * @param {[type]}   data     [description]
+ * @param {[type]}   options  [description]
+ * @param {Function} callback [description]
+ */
+function Snackbar(data, options, callback){
+	if (data !== "") {
+		this.options = this.activateOptions(options);
+		this.data = data;
+		this.callback = callback;
+		this.start();
+		this.snackbar();
+	} else {
+		console.warn("SnackbarLight: You can not create a empty snackbar please give it a string.");
+	}
+}
+
+Snackbar.prototype = {
+
+	/**
+	 * Default options
+	 *
+	 * @type {Object}
+	 */
+	options: {
+		// How long it takes for the snackbar to disappear
+		timeout: 5000,
+		// Wich class is used to tell that the snackbar is active
+		activeClass: "active",
+		// Name of the link or action if specified
+		link: false,
+		// If not used clicking will activate the callback or do nothing
+		url: "#"
+	},
+
+	/**
+	 * Create container for the snackbar
+	 *
+	 * @return {void}
+	 */
+	start: function() {
+		if (!document.getElementById("snackbar-container")) {
+			var snackbarContainer = document.createElement("div");
+
+			snackbarContainer.setAttribute("id", "snackbar-container");
+
+			document.body.appendChild(snackbarContainer);
+		}
+	},
+
+	/**
+	 * Timer
+	 *
+	 * @param  {Function} callback
+	 * @param  {int}   delay
+	 * @return {void}
+	 */
+	timer: function(callback, delay) {
+	    var remaining = delay;
+
+	    this.timer = {
+	    	// Create random timer id
+	    	timerId: Math.round(Math.random()*1000),
+
+		    pause: function() {
+		        // Clear the timeout
+		        window.clearTimeout(this.timerId);
+		        // Set the remaining to what time remains
+		        remaining -= new Date() - start;
+		    },
+
+		    resume: function() {
+		        start = new Date();
+		        // Clear the timeout
+		        window.clearTimeout(this.timerId);
+		        // Set the timeout again
+		        this.timerId = window.setTimeout(callback, remaining);
+		    },
+	    };
+	    // Start the timer
+	    this.timer.resume();
+	},
+
+	/**
+	 * snackbar
+	 *
+	 * @return {void}
+	 */
+	snackbar: function() {
+		var __self = this,
+			snackbar = document.createElement("div");
+
+		// Put the snackbar inside the snackbar container
+		var container = document.getElementById("snackbar-container");
+
+		// 2016-02-04 / dan.legrand@gmail.com
+		// According to Google Material Design spec, do not stack snackbars.
+		// This clears out any previous snackbars before adding the new one.
+		container.innerHTML = null;
+
+		container.appendChild(snackbar);
+
+	  	// Set the html inside the snackbar
+	  	snackbar.innerHTML = this.getData();
+
+		// Set the class of the snackbar
+		snackbar.setAttribute("class", "snackbar");
+
+		// 2016-02-06 / dan.legrand@gmail.com
+		// According to Google Material Design spec, do not cover FAB buttons.
+		// This moves any FAB buttons from bottom-right corner up.
+		// Assumes only 1 FAB on screen in bottom-right corner.
+		if ($(window).width() <= 750) {
+			$(".fab").css("bottom", "64px");
+		}
+
+		// Wait to set the active class so animations will be activated
+		setTimeout(function() {
+			snackbar.setAttribute("class", snackbar.getAttribute("class") + " " + __self.options.activeClass);
+		}, 50);
+
+		// If the timeout is false the snackbar will not be destroyed after some time
+		// only when the user clicks on it
+		if (this.options.timeout !== false) {
+			// Start the timer
+			this.timer(function() {
+				snackbar.setAttribute("class", "snackbar");
+				__self.destroy(snackbar);
+			}, this.options.timeout);
+		}
+
+		// Add the event listeners
+		this.listeners(snackbar);
+	},
+
+	/**
+	 * Get the data/ message to display in the snackbar
+	 *
+	 * @return {string}
+	 */
+	getData: function() {
+		if (this.options.link !== false) {
+			return "<span>" + this.data + "</span><a href='" + this.options.url + "'>" + this.options.link + "</a>";
+		}
+		return "<span>" + this.data + "</span>";
+	},
+
+	/**
+	 * Activate the listeners
+	 *
+	 * @param  {Object} element
+	 * @return {void}
+	 */
+	listeners: function(element) {
+		var __self = this;
+		// Adding event listener for when user clicks on the snackbar to remove it
+		element.addEventListener("click", function(){
+			if (typeof __self.callback == "function") {
+				__self.callback();
+			}
+			element.setAttribute("class", "snackbar");
+	    	__self.destroy(element);
+		});
+
+		// Stopping the timer when user hovers on the snackbar
+		element.addEventListener("mouseenter",function(){
+			__self.timer.pause();
+		});
+		element.addEventListener("mouseout",function(){
+			__self.timer.resume();
+		});
+	},
+
+	/**
+	 * Remove the snackbar
+	 *
+	 * @param  {object} element
+	 * @return {void}
+	 */
+	destroy: function(element) {
+		// 2016-02-06 / dan.legrand@gmail.com
+		// Put FAB back to original position if there are no more active snackbars.
+		if (($(".snackbar.active").length > 0) && ($(window).width() <= 750)) {
+			$(".fab").css("bottom", "64px");
+		} else {
+			$(".fab").css("bottom", "24px");
+		}
+
+		// Delay for removing the element (for when there are animations)
+		this.timer.pause();
+
+		element.remove();
+
+		setTimeout(function() {
+			element.remove();
+		}, 10000);
+	},
+
+	/**
+	 * Compare the options to the default ones.
+	 *
+	 * @param  {Object} newOptions
+	 * @return {Object}
+	 */
+	activateOptions: function(newOptions) {
+		var __self = this,
+  			options = newOptions || {};
+
+    	for (var opt in this.options) {
+        	if (__self.options.hasOwnProperty(opt) && !options.hasOwnProperty(opt)) {
+            	options[opt] = __self.options[opt];
+        	}
+        }
+       	return options;
+	},
+};

data/vendor/assets/stylesheets/base/base.scss

@@ -0,0 +1,73 @@
+//======================================================================
+// Base HTML elements.
+// Class styles are defined in global_classes.scss
+//======================================================================
+
+// Typography
+//----------------------------------------------------------------------
+
+// Note: Material Design Iconic Font is hosted locally
+
+// @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,600,700");
+
+// HTML/body
+//----------------------------------------------------------------------
+
+html,
+body {
+  background-color: $body-background-color;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  color: color("text");
+  font-family: "Roboto", sans-serif;
+  font-size: $font-size-normal;
+  font-weight: normal;
+  line-height: 1.2;
+}
+
+// Bold
+//----------------------------------------------------------------------
+
+b,
+strong {
+  font-weight: 700;
+}
+
+// Paragraphs
+//----------------------------------------------------------------------
+
+p {
+  margin: $spacing-normal 0;
+}
+
+// HRs used as spacers with lines
+//----------------------------------------------------------------------
+
+hr {
+  border: none;
+  border-bottom: 1px solid color("divider");
+  height: 1px;
+  margin: $spacing-xsmall 0;
+  padding: 0;
+}
+
+// Links
+//----------------------------------------------------------------------
+
+a {
+  color: color("blue");
+  letter-spacing: 0.25px;
+  text-decoration: none;
+}
+
+// Images
+//----------------------------------------------------------------------
+
+img {
+  width: 100%;
+  height: auto;
+}

data/vendor/assets/stylesheets/base/global_classes.scss

@@ -0,0 +1,261 @@
+//======================================================================
+// Global CSS classes for use on any element.
+// Default element styles are defined in the base.scss file.
+//======================================================================
+
+// Alignments
+//----------------------------------------------------------------------
+
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+// Expand entire width and take element padding into consideration.
+.full-width {
+  @include full-width;
+}
+
+// Constrained to max size to center content
+//----------------------------------------------------------------------
+
+.constrained {
+  margin: auto;
+  @include full-width;
+}
+
+.constrained-small {
+  max-width: $small-width;
+}
+
+.constrained-medium {
+  max-width: $medium-width;
+}
+
+.constrained-large {
+  max-width: $large-width;
+}
+
+// Padding
+//----------------------------------------------------------------------
+
+.padding-xsmall {
+  padding: $spacing-xsmall;
+}
+
+.padding-small {
+  padding: $spacing-small;
+}
+
+.padding-normal {
+  padding: $spacing-normal;
+}
+
+.padding-large {
+  padding: $spacing-large;
+}
+
+.padding-xlarge {
+  padding: $spacing-xlarge;
+}
+
+// Margins
+//----------------------------------------------------------------------
+
+// TODO need classes for this???
+
+// Helper text is subtle text to give extra minor details
+//----------------------------------------------------------------------
+
+.hint {
+  color: color("hint");
+}
+
+.helper-text {
+  color: color("helper");
+  font-size: $font-size-small;
+}
+
+// Highlight
+//----------------------------------------------------------------------
+
+.highlight {
+  background-color: color("highlight");
+}
+
+// Bold text
+//----------------------------------------------------------------------
+
+.bold,
+.strong {
+  font-weight: 700;
+}
+
+// Rounded corners
+//----------------------------------------------------------------------
+
+.rounded-corners {
+  @include rounded-corners;
+}
+
+.rounded-top-corners {
+  @include rounded-top-corners;
+}
+
+.rounded-right-corners {
+  @include rounded-right-corners;
+}
+
+.rounded-bottom-corners {
+  @include rounded-bottom-corners;
+}
+
+.rounded-left-corners {
+  @include rounded-left-corners;
+}
+
+// Visibility
+//----------------------------------------------------------------------
+
+// Remove from DOM rendering completely
+.hidden {
+  display: none;
+}
+
+// Remain in DOM flow but make invisible
+.invisible {
+  visibility: hidden;
+}
+
+// Disabled elements
+//----------------------------------------------------------------------
+
+:disabled,
+.disabled {
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+  @include transparency(0.6);
+  @include box-shadow(none);
+}
+
+// Colored background or text
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .color-#{$color-name} {
+    color: $color !important; // Assume if you're specifying this you want it to override
+  }
+
+  .background-color-#{$color-name} {
+    background-color: $color !important;
+  }
+}
+
+// Media query classes for various device sizes
+//----------------------------------------------------------------------
+
+.small-only {
+  display: block;
+}
+
+.small-only-inline {
+  display: inline-block;
+}
+
+.small-and-medium-only {
+  display: block;
+}
+
+.small-and-medium-only-inline {
+  display: inline-block;
+}
+
+.medium-only,
+.medium-only-inline {
+  display: none;
+}
+
+.medium-and-large-only,
+.medium-and-large-only-inline {
+  display: none;
+}
+
+.large-only,
+.large-only-inline {
+  display: none;
+}
+
+@media (min-width: $medium-width) {
+  .small-only,
+  .small-only-inline {
+    display: none !important;
+  }
+
+  .medium-only {
+    display: block !important;
+  }
+
+  .medium-only-inline {
+    display: inline-block !important;
+  }
+
+  .medium-and-large-only {
+    display: block !important;
+  }
+
+  .medium-and-large-only-inline {
+    display: inline-block !important;
+  }
+}
+
+@media (min-width: $large-width) {
+  .small-only,
+  .small-only-inline,
+  .small-and-medium-only,
+  .small-and-medium-only-inline,
+  .medium-only,
+  .medium-only-inline {
+    display: none !important;
+  }
+
+  .medium-and-large-only,
+  .large-only {
+    display: block !important;
+  }
+
+  .medium-and-large-only-inline,
+  .large-only-inline {
+    display: inline-block !important;
+  }
+}
+
+// Media queries
+// Note: The best way to structure the use of media queries is to create the queries
+// near the relevant code. For example, if you wanted to change the styles for buttons
+// on small devices, paste the mobile query code up in the buttons section and style it
+// there.
+//----------------------------------------------------------------------
+
+// Larger than mobile
+@media (min-width: $small-width) {}
+
+// Larger than medium
+@media (min-width: $medium-width) {}
+
+// Larger than large
+@media (min-width: $large-width) {}