moovui 0.1.2 → 0.1.3

data/app/assets/javascripts/jquery.placeholder.js

@@ -0,0 +1,185 @@
+/*! http://mths.be/placeholder v2.0.8 by @mathias */
+;(function(window, document, $) {
+
+	// Opera Mini v7 doesn’t support placeholder although its DOM seems to indicate so
+	var isOperaMini = Object.prototype.toString.call(window.operamini) == '[object OperaMini]';
+	var isInputSupported = 'placeholder' in document.createElement('input') && !isOperaMini;
+	var isTextareaSupported = 'placeholder' in document.createElement('textarea') && !isOperaMini;
+	var prototype = $.fn;
+	var valHooks = $.valHooks;
+	var propHooks = $.propHooks;
+	var hooks;
+	var placeholder;
+
+	if (isInputSupported && isTextareaSupported) {
+
+		placeholder = prototype.placeholder = function() {
+			return this;
+		};
+
+		placeholder.input = placeholder.textarea = true;
+
+	} else {
+
+		placeholder = prototype.placeholder = function() {
+			var $this = this;
+			$this
+				.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
+				.not('.placeholder')
+				.bind({
+					'focus.placeholder': clearPlaceholder,
+					'blur.placeholder': setPlaceholder
+				})
+				.data('placeholder-enabled', true)
+				.trigger('blur.placeholder');
+			return $this;
+		};
+
+		placeholder.input = isInputSupported;
+		placeholder.textarea = isTextareaSupported;
+
+		hooks = {
+			'get': function(element) {
+				var $element = $(element);
+
+				var $passwordInput = $element.data('placeholder-password');
+				if ($passwordInput) {
+					return $passwordInput[0].value;
+				}
+
+				return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;
+			},
+			'set': function(element, value) {
+				var $element = $(element);
+
+				var $passwordInput = $element.data('placeholder-password');
+				if ($passwordInput) {
+					return $passwordInput[0].value = value;
+				}
+
+				if (!$element.data('placeholder-enabled')) {
+					return element.value = value;
+				}
+				if (value == '') {
+					element.value = value;
+					// Issue #56: Setting the placeholder causes problems if the element continues to have focus.
+					if (element != safeActiveElement()) {
+						// We can't use `triggerHandler` here because of dummy text/password inputs :(
+						setPlaceholder.call(element);
+					}
+				} else if ($element.hasClass('placeholder')) {
+					clearPlaceholder.call(element, true, value) || (element.value = value);
+				} else {
+					element.value = value;
+				}
+				// `set` can not return `undefined`; see http://jsapi.info/jquery/1.7.1/val#L2363
+				return $element;
+			}
+		};
+
+		if (!isInputSupported) {
+			valHooks.input = hooks;
+			propHooks.value = hooks;
+		}
+		if (!isTextareaSupported) {
+			valHooks.textarea = hooks;
+			propHooks.value = hooks;
+		}
+
+		$(function() {
+			// Look for forms
+			$(document).delegate('form', 'submit.placeholder', function() {
+				// Clear the placeholder values so they don't get submitted
+				var $inputs = $('.placeholder', this).each(clearPlaceholder);
+				setTimeout(function() {
+					$inputs.each(setPlaceholder);
+				}, 10);
+			});
+		});
+
+		// Clear placeholder values upon page reload
+		$(window).bind('beforeunload.placeholder', function() {
+			$('.placeholder').each(function() {
+				this.value = '';
+			});
+		});
+
+	}
+
+	function args(elem) {
+		// Return an object of element attributes
+		var newAttrs = {};
+		var rinlinejQuery = /^jQuery\d+$/;
+		$.each(elem.attributes, function(i, attr) {
+			if (attr.specified && !rinlinejQuery.test(attr.name)) {
+				newAttrs[attr.name] = attr.value;
+			}
+		});
+		return newAttrs;
+	}
+
+	function clearPlaceholder(event, value) {
+		var input = this;
+		var $input = $(input);
+		if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {
+			if ($input.data('placeholder-password')) {
+				$input = $input.hide().next().show().attr('id', $input.removeAttr('id').data('placeholder-id'));
+				// If `clearPlaceholder` was called from `$.valHooks.input.set`
+				if (event === true) {
+					return $input[0].value = value;
+				}
+				$input.focus();
+			} else {
+				input.value = '';
+				$input.removeClass('placeholder');
+				input == safeActiveElement() && input.select();
+			}
+		}
+	}
+
+	function setPlaceholder() {
+		var $replacement;
+		var input = this;
+		var $input = $(input);
+		var id = this.id;
+		if (input.value == '') {
+			if (input.type == 'password') {
+				if (!$input.data('placeholder-textinput')) {
+					try {
+						$replacement = $input.clone().attr({ 'type': 'text' });
+					} catch(e) {
+						$replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
+					}
+					$replacement
+						.removeAttr('name')
+						.data({
+							'placeholder-password': $input,
+							'placeholder-id': id
+						})
+						.bind('focus.placeholder', clearPlaceholder);
+					$input
+						.data({
+							'placeholder-textinput': $replacement,
+							'placeholder-id': id
+						})
+						.before($replacement);
+				}
+				$input = $input.removeAttr('id').hide().prev().attr('id', id).show();
+				// Note: `$input[0] != input` now!
+			}
+			$input.addClass('placeholder');
+			$input[0].value = $input.attr('placeholder');
+		} else {
+			$input.removeClass('placeholder');
+		}
+	}
+
+	function safeActiveElement() {
+		// Avoid IE9 `document.activeElement` of death
+		// https://github.com/mathiasbynens/jquery-placeholder/pull/99
+		try {
+			return document.activeElement;
+		} catch (exception) {}
+	}
+
+}(this, document, jQuery));

data/app/assets/javascripts/shBrushSass.js

@@ -32,14 +32,14 @@
 		};
 
 		var keywords =	'ascent azimuth background-attachment background-color background-image background-position ' +
-						'background-repeat background baseline bbox border-collapse border-color border-spacing border-style border-top ' +
+						'background-repeat background baseline bbox border-collapse border-color border-radius border-spacing border-style border-top ' +
 						'border-right border-bottom border-left border-top-color border-right-color border-bottom-color border-left-color ' +
 						'border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width ' +
-						'border-bottom-width border-left-width border-width border bottom cap-height caption-side centerline clear clip color ' +
+						'border-bottom-width border-left-width border-width border bottom box-sizing cap-height caption-side centerline clear clip color ' +
 						'content counter-increment counter-reset cue-after cue-before cue cursor definition-src descent direction display ' +
 						'elevation empty-cells float font-size-adjust font-family font-size font-stretch font-style font-variant font-weight font ' +
 						'height left letter-spacing line-height list-style-image list-style-position list-style-type list-style margin-top ' +
-						'margin-right margin-bottom margin-left margin marker-offset marks mathline max-height max-width min-height min-width orphans ' +
+						'margin-right margin-bottom margin-left margin marker-offset marks mathline max-height max-width min-height min-width opacity orphans ' +
 						'outline-color outline-style outline-width outline overflow padding-top padding-right padding-bottom padding-left padding page ' +
 						'page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position ' +
 						'quotes right richness size slope src speak-header speak-numeral speak-punctuation speak speech-rate stemh stemv stress ' +
@@ -66,6 +66,7 @@
 		var r = SyntaxHighlighter.regexLib;
 		
 		this.regexList = [
+			{ regex: /\(data:[-\/;=\w]*?;base64,[+\/\w]+?=?=?\)/g,		css: 'plain' },		// PATCH to prevent base64 data parsed as comment
 			{ regex: r.multiLineCComments,								css: 'comments' },		// multiline comments
 			{ regex: r.singleLineCComments,								css: 'comments' },		// singleline comments
 			{ regex: r.doubleQuotedString,								css: 'string' },		// double quoted strings

data/app/assets/javascripts/shCore.custom.js

@@ -2261,6 +2261,12 @@ sh.Highlighter.prototype = {
 
     // PATCH to allow embedded html
     var tags = [], c = 0;
+
+    // entity fix for Chrome
+    code = code.replace(/(<[^>]*\w+=)(["'])(.*?)\2/g, function(match, p1, p2, p3) {
+      return p1 + p2 + p3.replace(/</g, "&lt;").replace(/>/g, "&gt;") + p2;
+    });
+
     code = code.replace(/<(.*?)>/mg, function(m, p1) {
       tags[c] = p1;
       return String.fromCharCode(c++ + 5000);

data/app/assets/stylesheets/bourbon/_bourbon-deprecated-upcoming.scss

@@ -9,5 +9,5 @@
 
 @mixin background-size ($lengths...) {
   @include prefixer(background-size, $lengths, spec);
-  @warn "background-size is deprecated and will be removed in the next major version release";
+  //@warn "background-size is deprecated and will be removed in the next major version release";
 }

data/app/assets/stylesheets/globals/_base.scss

@@ -9,7 +9,7 @@ html {
 
 body {
   -webkit-text-size-adjust: 100%;
-  background: #ced3d8;
+  background: #fff;
   color: $text-color;
   font: $font-size/#{$line-height} $font;
   margin: 0;
@@ -35,7 +35,8 @@ img {
   padding: $sp $page-margin;
 }
 
-.section + .section {
-  margin: $sp2 0 0;
 }
+
+.#{$moovui-prefix}section + .#{$moovui-prefix}section {
+  margin: $sp2 0 0;
 }

data/app/assets/stylesheets/globals/_entypo.scss

@@ -3,23 +3,21 @@
 @if $moovui-init {
 @font-face {
   font-family: "Entypo";
-  src: url("fonts/entypo.eot");
-  src: url("fonts/entypo.eot?#iefix") format("embedded-opentype"),
-       url("fonts/entypo.woff") format("woff"),
-       url("fonts/entypo.ttf") format("truetype"),
-       url("fonts/entypo.svg#entypo") format("svg");
+  src: $entypo-ie-src;
+  src: $entypo-src;
   font-weight: normal;
   font-style: normal;
 }
 }
 
 @mixin entypo-icon($icon: null) {
-  -webkit-font-smoothing: antialiased;
+  @include antialiased;
   display: inline-block;
   font-family: "Entypo";
   font-size: 15px;
   font-style: normal;
   font-weight: normal;
+  line-height: $line-height;
   vertical-align: bottom; // use bottom so negative margin-bottom can be used
   @if $icon {
     content: $icon;

data/app/assets/stylesheets/globals/_header.scss

@@ -7,10 +7,7 @@
   min-width: $min-page-width;
   width: 100%;
   height: $nav-height;
-  z-index: 2;
-  &.affix {
-    position: fixed;
-  }
+  z-index: 101;
   > .content {
     position: relative;
   }
@@ -27,18 +24,11 @@
     }
   }
   [data-dropdown]:before {
-    @include entypo-icon;
-    @extend .icon-triangle-down:before;
-    color: #fff;
+    @include icon-triangle-down;
     margin: 13px 0 0 36px;
     position: absolute;
-  }
-  [data-dropdown-content].right {
-    margin: 0 0 0 $sp;
-    &:before {
-      left: auto;
-      right: 19px;
-    }
+    top: 0;
+    right: 0;
   }
 }
 
@@ -62,3 +52,7 @@
   }
 }
 }
+
+#header.#{$moovui-prefix}affix {
+  position: fixed;
+}

data/app/assets/stylesheets/globals/_mixins.scss

@@ -32,9 +32,6 @@
 }
 .#{$moovui-prefix}pull-right {
   float: right;
-  .#{$moovui-prefix}btn {
-    margin-left: $sp;
-  }
 }
 
 .#{$moovui-prefix}text-left {
@@ -51,12 +48,18 @@
   width: 100%;
 }
 
+@mixin antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 @mixin hide-text {
   // trying out Bootstrap's method over older HTML5 Boilerplate { text-indent: 100%; white-space: nowrap; overflow: hidden; }
   background-color: transparent;
   border: 0;
-  color: transparent;
+  // color: transparent;
   font: 0/0 a;
+  letter-spacing: 0;
   text-shadow: none;
 }
 

data/app/assets/stylesheets/globals/_vars.scss

@@ -1,5 +1,5 @@
 $font: Lato, Helvetica, Arial, sans-serif !default;
-$code-font: "Source Code Pro", Consolas, Monaco, Courier, monospace !default;
+$code-font: "Source Code Pro", Consolas, Menlo, Courier, monospace !default;
 
 $text-color: #444;
 
@@ -38,18 +38,18 @@ $sp8: 8 * $sp;
 
 $radius: 4px;
 
-$font-size: 15px;
+$font-size: 14px;
 $h1-size: 24px;
 $h2-size: 18px;
 $h3-size: 16px;
-$h4-size: 15px;
-$h5-size: 11px;
+$h4-size: 14px;
+$h5-size: 12px;
 
-$h1-copy-size: 35px;
-$h2-copy-size: 25px;
-$h3-copy-size: 21px;
-$h4-copy-size: 15px;
-$h5-copy-size: 15px;
+$h1-copy-size: 36px;
+$h2-copy-size: 26px;
+$h3-copy-size: 20px;
+$h4-copy-size: 16px;
+$h5-copy-size: 16px;
 
 
 $page-margin: 10px; // shown when window is at $page-width

data/app/assets/stylesheets/modules/_accordion.scss

@@ -1,5 +1,5 @@
 @if $moovui-init {
-[data-section="accordion"] > :not(.active) [data-section-content] {
+[data-section="accordion"] > :not(.active) > [data-section-content] {
   display: none;
 }
 }
@@ -11,13 +11,12 @@
   font-weight: 300;
   margin: 0 0 $sp2;
   [data-section-title] {
-    cursor: pointer;
+    color: inherit;
+    display: block;
     font-weight: bold;
-    margin: 0;
     padding: $sp $sp $sp 25px;
     &:before {
-      @include entypo-icon;
-      @extend .icon-triangle-right:before;
+      @include icon-triangle-right;
       margin: 0 0 0 -13px;
       position: absolute;
       width: 13px;
@@ -29,7 +28,7 @@
     }
   }
   .active [data-section-title]:before {
-    @extend .icon-triangle-down:before;
+    content: $icon-triangle-down;
     margin: 0 0 0 -14px;
     width: 14px;
   }

data/app/assets/stylesheets/modules/_actions.scss

@@ -0,0 +1,3 @@
+.#{$moovui-prefix}actions {
+  padding-top: $sp3;
+}

data/app/assets/stylesheets/modules/{_notice.scss → _alert.scss}

@@ -1,15 +1,14 @@
-@mixin notice {
+@mixin alert {
   @include radius;
   background: #98c17b;
   color: #fff;
   margin: 0 auto $sp;
-  padding: $sp 14px $sp 68px;
+  padding: $sp 40px $sp 68px;
   position: relative;
   max-width: $page-width - $sp2;
   min-height: 60px;
   &:before {
-    @include entypo-icon;
-    @extend .icon-circled-info:before;
+    @include icon-circled-info;
     color: #fff;
     font-size: 40px;
     margin: -12px 0 0;
@@ -18,18 +17,18 @@
     left: 15px;
   }
   &.success:before {
-    @extend .icon-thumbs-up:before;
+    content: $icon-thumbs-up;
   }
   &.error {
     background: #e46c67;
     &:before {
-      @extend .icon-warning:before;
+      content: $icon-warning;
     }
   }
   &.warning {
     background: #e4cb5d;
     &:before {
-      @extend .icon-warning:before;
+      content: $icon-warning;
     }
   }
   .close {
@@ -38,6 +37,7 @@
     font-size: 20px;
     font-weight: bold;
     line-height: 22px;
+    margin: 0 -26px 0 0;
     opacity: 0.2;
     text-decoration: none;
     &:hover, &:focus {
@@ -60,28 +60,38 @@
 @mixin callout {
   @include radius;
   background: #eff2f3;
-  border: 1px solid #bdc4cb;
-  border-left-width: 50px;
+  border: solid #bdc4cb;
+  border-width: 1px 1px 1px 0;
   font-weight: normal;
   margin: 0 0 $sp2;
-  padding: $sp;
+  padding: ($sp - 1px) ($sp - 1px) ($sp - 1px) $sp6;
   position: relative;
   &:before {
-    @include entypo-icon;
-    @extend .icon-info:before;
+    @include border-radius(4px 0 0 4px);
+    background: #bdc4cb;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50px;
+    height: 100%;
+  }
+  &:after {
+    @include icon-circled-info;
     color: #fff;
     font-size: 20px;
-    margin: -13px 0 0 -60px;
+    margin: -13px 0 0;
     position: absolute;
     top: 50%;
+    left: 0;
     text-align: center;
     width: 50px;
   }
-  &.warning:before {
-    @extend .icon-warning:before;
+  &.warning:after {
+    content: $icon-warning;
   }
   p, ol {
-    font: inherit;
+    font: inherit !important;
   }
   > p:last-child {
     margin: 0;
@@ -90,22 +100,22 @@
 
 @if $moovui-init {
 [data-alert] {
-  @include notice;
+  @include alert;
+}
 }
 
-.callout {
+.#{$moovui-prefix}callout {
   @include callout;
 }
 
-.text-success {
+.#{$moovui-prefix}text-success {
   color: $green;
 }
 
-.text-error {
+.#{$moovui-prefix}text-error {
   color: $red;
 }
 
-.text-warning {
+.#{$moovui-prefix}text-warning {
   color: mix($orange, $yellow);
 }
-}