inc_gollum 4.1.2d → 5.0.1b.pre.rc1

data/lib/gollum/public/gollum/javascript/app.js

@@ -0,0 +1,31 @@
+//= require jquery-1.7.2.min
+//= require mousetrap.min
+//= require gollum
+//= require gollum.dialog
+//= require gollum.placeholder
+//= require editor/gollum.editor
+//= require_tree ./editor/langs
+//= require ace-1.2.5/ace
+//= require ace-1.2.5/mode-markdown
+//= require ace-1.2.5/mode-asciidoc
+//= require ace-1.2.5/mode-text
+//= require ace-1.2.5/mode-rdoc
+//= require ace-1.2.5/mode-textile
+//= require ace-1.2.5/theme-tomorrow
+//= require ace-1.2.5/keybinding-vim
+//= require ace-1.2.5/keybinding-emacs
+//= require ace-1.2.5/ext-elastic_tabstops_lite.js
+//= require ace-1.2.5/ext-error_marker.js
+//= require ace-1.2.5/ext-keybinding_menu.js
+//= require ace-1.2.5/ext-language_tools.js
+//= require ace-1.2.5/ext-linking.js
+//= require ace-1.2.5/ext-searchbox.js
+//= require ace-1.2.5/ext-settings_menu.js
+//= require ace-1.2.5/ext-spellcheck.js
+//= require ace-1.2.5/ext-split.js
+//= require ace-1.2.5/ext-static_highlight.js
+//= require ace-1.2.5/ext-statusbar.js
+//= require ace-1.2.5/ext-textarea.js
+//= require ace-1.2.5/ext-themelist.js
+//= require ace-1.2.5/ext-whitespace.js
+//= require jquery.resize

data/lib/gollum/public/gollum/javascript/editor/gollum.editor.js

@@ -17,6 +17,19 @@
     NoDefinitionsFor: []
   };
   var ActiveOptions = {};
+  // Editor mode in Ace
+  var AceMode = {
+    asciidoc: 'asciidoc',
+    creole: 'text',
+    markdown: 'markdown',
+    mediawiki: 'text',
+    org: 'text',
+    rest: 'rst',
+    txt: 'text',
+    pod: 'text',
+    rdoc: 'rdoc',
+    textile: 'textile'
+  }
 
   /**
    *  $.GollumEditor
@@ -26,6 +39,81 @@
   $.GollumEditor = function( IncomingOptions ) {
     ActiveOptions = $.extend( DefaultOptions, IncomingOptions );
 
+    $('textarea[id="gollum-editor-body"]').each(function () {
+      var textarea = $(this);
+      var mode = textarea.attr("data-markup-lang") ? textarea.attr("data-markup-lang") : "markdown"
+      var editDiv = $('<div>', {
+        position: 'absolute',
+        height: textarea.height(),
+        'class': textarea.attr('class'),
+        'id': 'gollum-editor-body-ace'
+      }).insertBefore(textarea);
+      textarea.css('display', 'none');
+
+      // NOTE: This requires the page to have only one 'gollum-editor-body'.
+      var editor = ace.edit(editDiv[0]);
+      window.ace_editor = editor;
+
+      editor.setTheme("ace/theme/tomorrow");
+      editor.setKeyboardHandler();
+      editor.renderer.setShowGutter(false);
+      editor.getSession().setUseWrapMode(true);
+      editor.getSession().setValue(textarea.val());
+      editor.getSession().setMode("ace/mode/" + AceMode[mode]);
+
+      editor.getSession().on('change', function(){
+        textarea.val(editor.getSession().getValue());
+      });
+
+      editor.commands.addCommand({
+        name: "showKeyboardShortcuts",
+        bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
+        exec: function(editor) {
+            ace.config.loadModule("ace/ext/keybinding_menu", function(module) {
+                module.init(editor);
+                editor.showKeyboardShortcuts();
+            });
+        }
+      });
+
+      // Ace editor seems to capture all keyboard events so gollum's global
+      // shortcuts does not work in the editor area. So we add them back in
+      // the editor as commands. These commands are added back on-demand since
+      // not all gollum shortcuts are necessary in the presence of Ace editor.
+      editor.commands.addCommand({
+        name: "saveContents",
+        bindKey: {win: "Ctrl-s", mac: "Command-s"},
+        exec: function(editor) {
+          $('#gollum-editor form[name="gollum-editor"]').submit();
+        }
+      });
+    });
+
+    $("#gollum-editor-body-ace").resize(function(){
+      window.ace_editor.resize();
+    });
+
+    $("#wiki_format").change(function() {
+      var mode = $(this).val();
+      var editor = window.ace_editor;
+      window.ace_editor.getSession().setMode("ace/mode/" + AceMode[mode]);
+      FormatSelector.updateCommitMessage(mode);
+      editor.focus();
+    });
+
+    $("#keybinding").change(function() {
+      var mode = $(this).val();
+      var editor = window.ace_editor;
+      if (mode == "default") {
+        editor.setKeyboardHandler();
+      } else if (mode == "vim" || mode == "emacs") {
+        editor.setKeyboardHandler("ace/keyboard/" + mode);
+      } else {
+        editor.setKeyboardHandler();
+      }
+      editor.focus();
+    });
+
     debug('GollumEditor loading');
 
     if ( EditorHas.baseEditorMarkup() ) {
@@ -90,7 +178,7 @@
         LanguageDefinition.setActiveLanguage( ActiveOptions.MarkupType );
         if ( EditorHas.formatSelector() ) {
           FormatSelector.init(
-            $('#gollum-editor-format-selector select') );
+            $('#wiki_format') );
         }
 
         if ( EditorHas.help() ) {
@@ -100,8 +188,8 @@
       } // EditorHas.functionBar
 
       if ( EditorHas.dragDropUpload() ) {
-        var $editorBody = $('#gollum-editor-body');
-        var editorBody = $('#gollum-editor-body')[0];
+        var $editorBody = $('#gollum-editor-body-ace');
+        var editorBody = $('#gollum-editor-body-ace')[0];
         editorBody.ondragover = function(e) {
           $editorBody.addClass('dragging');
           return false;
@@ -130,10 +218,7 @@
             success: function(){
               $editorBody.removeClass('uploading');
               var text = '[[/' + uploadDest + '/' + file.name + ']]';
-              var pos = editorBody.selectionStart || 0;
-              editorBody.value = editorBody.value.substring(0, pos) + text + editorBody.value.substring(pos);
-              editorBody.selectionStart = pos + text.length;
-              editorBody.selectionEnd = pos + text.length;
+              window.ace_editor.insert(text);
             },
             error: function(r, textStatus) {
               alert('Error uploading file: ' + textStatus);
@@ -255,12 +340,12 @@
             return false;
           }
 
-          Mousetrap.bind(['command+1', 'ctrl+1'], function( e ){ hotkey( e, 'function-h1' ); });
-          Mousetrap.bind(['command+2', 'ctrl+2'], function( e ){ hotkey( e, 'function-h2' ); });
-          Mousetrap.bind(['command+3', 'ctrl+3'], function( e ){ hotkey( e, 'function-h3' ); });
-          Mousetrap.bind(['command+b', 'ctrl+b'], function( e ){ hotkey( e, 'function-bold' ); });
-          Mousetrap.bind(['command+i', 'ctrl+i'], function( e ){ hotkey( e, 'function-italic' ); });
-          Mousetrap.bind(['command+s', 'ctrl+s'], function( e ){
+          Mousetrap.bind('mod+1', function( e ){ hotkey( e, 'function-h1' ); });
+          Mousetrap.bind('mod+2', function( e ){ hotkey( e, 'function-h2' ); });
+          Mousetrap.bind('mod+3', function( e ){ hotkey( e, 'function-h3' ); });
+          Mousetrap.bind('mod+b', function( e ){ hotkey( e, 'function-bold' ); });
+          Mousetrap.bind('mod+i', function( e ){ hotkey( e, 'function-italic' ); });
+          Mousetrap.bind('mod+s', function( e ){
             e.preventDefault();
             $("#gollum-editor-submit").trigger("click");
             return false;
@@ -336,7 +421,7 @@
       }
 
       // attempt to load the definition for this language
-      var script_uri = baseUrl + '/javascript/editor/langs/' + markup_name + '.js';
+      var script_uri = baseUrl + '/assets/editor/langs/' + markup_name + '.js';
       $.ajax({
                 url: script_uri,
                 dataType: 'script',
@@ -419,7 +504,7 @@
      *  @return boolean
      */
     formatSelector: function() {
-      return $('#gollum-editor-format-selector select').length;
+      return $('#wiki_format').length;
     },
 
 
@@ -572,11 +657,9 @@
        */
       executeAction: function( definitionObject ) {
         // get the selected text from the textarea
-        var txt = $('#gollum-editor-body').val();
-        // hmm, I'm not sure this will work in a textarea
-        var selPos = FunctionBar
-                      .getFieldSelectionPosition( $('#gollum-editor-body') );
-        var selText = FunctionBar.getFieldSelection( $('#gollum-editor-body') );
+        var editor = window.ace_editor;
+        var txt = editor.getValue();
+        var selText = editor.getSelectedText();
         var repText = selText;
         var reselect = true;
         var cursor = null;
@@ -584,6 +667,10 @@
         // execute a replacement function if one exists
         if ( definitionObject.exec &&
              typeof definitionObject.exec == 'function' ) {
+          // FIXME: In case of Ace Editor, the function shall not operate on
+          // the text area, but on the editor. But since a lot functions
+          // does not use the third args, this works in these cases. But
+          // we shall fix it.
           definitionObject.exec( txt, selText, $('#gollum-editor-body') );
           return;
         }
@@ -637,8 +724,8 @@
         }
 
         if ( repText ) {
-          FunctionBar.replaceFieldSelection( $('#gollum-editor-body'),
-                                             repText, reselect, cursor );
+          editor.session.replace(editor.selection.getRange(), repText);
+          editor.focus();
         }
 
       },
@@ -1184,7 +1271,9 @@
   // Dialog exists as its own thing now
   $.GollumEditor.Dialog = $.GollumDialog;
   $.GollumEditor.replaceSelection = function( repText ) {
-    FunctionBar.replaceFieldSelection( $('#gollum-editor-body'), repText );
+    var editor = window.ace_editor;
+    editor.session.replace(editor.selection.getRange(), repText);
+    editor.focus();
   };
 
   // Placeholder exists as its own thing now

data/lib/gollum/public/gollum/javascript/gollum.js

@@ -1,8 +1,14 @@
 // Helpers
 function pageName(){
-  // "my/dir/file" => "file"
-  return typeof(pageFullPath) == 'undefined' ? undefined : pageFullPath.split('/').pop();
+  // "my/dir/file.md" => "file"
+  if (typeof(pageFullPath) == 'undefined') {
+      return undefined;
+  } else {
+      name = pageFullPath.split('/').pop();
+      return name.substring(0, name.lastIndexOf('.'));
+  } 
 }
+
 function pagePath(){
   // "my/dir/file" => "my/dir"
   return typeof(pageFullPath) == 'undefined' ? undefined : pageFullPath.split('/').slice(0,-1).join('/');
@@ -306,6 +312,19 @@ $(document).ready(function() {
     $.GollumEditor();
   }
 
+  if( $("#last-edit").length ) {
+    $("#page-info-toggle").click ( function () {
+      $.ajax({
+        url: '/last-commit-info',
+        data: {path: $("#page-info-toggle").data('pagepath')},
+        success: function ( data ) {
+          $("#last-edit").html('Last edited by <b>' + data.author + '</b>, ' + data.date);
+        }
+      });
+      $("#last-edit").html('<i class="fa fa-spinner fa-spin"></i> Getting commit info...');
+    })
+  }
+
   if( $('#wiki-wrapper.create').length ){
     $("#gollum-editor-submit").click( function() { window.onbeforeunload = null; } );
     $("#gollum-editor-body").one('change', function(){

data/lib/gollum/public/gollum/javascript/jquery.resize.js

@@ -0,0 +1,164 @@
+/**
+* Detect Element Resize Plugin for jQuery
+*
+* https://github.com/sdecima/javascript-detect-element-resize
+* Sebastian Decima
+*
+* version: 0.5.3
+**/
+
+(function ( $ ) {
+	var attachEvent = document.attachEvent,
+		stylesCreated = false;
+	
+	var jQuery_resize = $.fn.resize;
+	
+	$.fn.resize = function(callback) {
+		return this.each(function() {
+			if(this == window)
+				jQuery_resize.call(jQuery(this), callback);
+			else
+				addResizeListener(this, callback);
+		});
+	}
+
+	$.fn.removeResize = function(callback) {
+		return this.each(function() {
+			removeResizeListener(this, callback);
+		});
+	}
+	
+	if (!attachEvent) {
+		var requestFrame = (function(){
+			var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
+								function(fn){ return window.setTimeout(fn, 20); };
+			return function(fn){ return raf(fn); };
+		})();
+		
+		var cancelFrame = (function(){
+			var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
+								   window.clearTimeout;
+		  return function(id){ return cancel(id); };
+		})();
+
+		function resetTriggers(element){
+			var triggers = element.__resizeTriggers__,
+				expand = triggers.firstElementChild,
+				contract = triggers.lastElementChild,
+				expandChild = expand.firstElementChild;
+			contract.scrollLeft = contract.scrollWidth;
+			contract.scrollTop = contract.scrollHeight;
+			expandChild.style.width = expand.offsetWidth + 1 + 'px';
+			expandChild.style.height = expand.offsetHeight + 1 + 'px';
+			expand.scrollLeft = expand.scrollWidth;
+			expand.scrollTop = expand.scrollHeight;
+		};
+
+		function checkTriggers(element){
+			return element.offsetWidth != element.__resizeLast__.width ||
+						 element.offsetHeight != element.__resizeLast__.height;
+		}
+		
+		function scrollListener(e){
+			var element = this;
+			resetTriggers(this);
+			if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
+			this.__resizeRAF__ = requestFrame(function(){
+				if (checkTriggers(element)) {
+					element.__resizeLast__.width = element.offsetWidth;
+					element.__resizeLast__.height = element.offsetHeight;
+					element.__resizeListeners__.forEach(function(fn){
+						fn.call(element, e);
+					});
+				}
+			});
+		};
+		
+		/* Detect CSS Animations support to detect element display/re-attach */
+		var animation = false,
+			animationstring = 'animation',
+			keyframeprefix = '',
+			animationstartevent = 'animationstart',
+			domPrefixes = 'Webkit Moz O ms'.split(' '),
+			startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
+			pfx  = '';
+		{
+			var elm = document.createElement('fakeelement');
+			if( elm.style.animationName !== undefined ) { animation = true; }    
+			
+			if( animation === false ) {
+				for( var i = 0; i < domPrefixes.length; i++ ) {
+					if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+						pfx = domPrefixes[ i ];
+						animationstring = pfx + 'Animation';
+						keyframeprefix = '-' + pfx.toLowerCase() + '-';
+						animationstartevent = startEvents[ i ];
+						animation = true;
+						break;
+					}
+				}
+			}
+		}
+		
+		var animationName = 'resizeanim';
+		var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
+		var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+	}
+	
+	function createStyles() {
+		if (!stylesCreated) {
+			//opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+			var css = (animationKeyframes ? animationKeyframes : '') +
+					'.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' +
+					'.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+				head = document.head || document.getElementsByTagName('head')[0],
+				style = document.createElement('style');
+			
+			style.type = 'text/css';
+			if (style.styleSheet) {
+				style.styleSheet.cssText = css;
+			} else {
+				style.appendChild(document.createTextNode(css));
+			}
+
+			head.appendChild(style);
+			stylesCreated = true;
+		}
+	}
+	
+	window.addResizeListener = function(element, fn){
+		if (attachEvent) element.attachEvent('onresize', fn);
+		else {
+			if (!element.__resizeTriggers__) {
+				if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
+				createStyles();
+				element.__resizeLast__ = {};
+				element.__resizeListeners__ = [];
+				(element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
+				element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' +
+																						'<div class="contract-trigger"></div>';
+				element.appendChild(element.__resizeTriggers__);
+				resetTriggers(element);
+				element.addEventListener('scroll', scrollListener, true);
+				
+				/* Listen for a css animation to detect element display/re-attach */
+				animationstartevent && element.__resizeTriggers__.addEventListener(animationstartevent, function(e) {
+					if(e.animationName == animationName)
+						resetTriggers(element);
+				});
+			}
+			element.__resizeListeners__.push(fn);
+		}
+	};
+	
+	window.removeResizeListener = function(element, fn){
+		if (attachEvent) element.detachEvent('onresize', fn);
+		else {
+			element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+			if (!element.__resizeListeners__.length) {
+					element.removeEventListener('scroll', scrollListener);
+					element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+			}
+		}
+	}
+}( jQuery ));

data/lib/gollum/public/gollum/javascript/mousetrap.min.js

@@ -8,4 +8,4 @@ c,d){var e=g(a,c,d),k;c={};var h=0,l=!1;for(k=0;k<e.length;++k)e[k].seq&&(h=Math
 18:"alt",20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},t={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},D={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},C={option:"alt",command:"meta","return":"enter",
 escape:"esc",plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},n;for(f=1;20>f;++f)p[111+f]="f"+f;for(f=0;9>=f;++f)p[f+96]=f.toString();c.prototype.bind=function(a,b,c){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,c);return this};c.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};c.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};c.prototype.reset=function(){this._callbacks={};
 this._directMap={};return this};c.prototype.stopCallback=function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")||E(b,this.target)?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};c.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};c.addKeycodes=function(a){for(var b in a)a.hasOwnProperty(b)&&(p[b]=a[b]);n=null};c.init=function(){var a=c(v),b;for(b in a)"_"!==b.charAt(0)&&(c[b]=function(b){return function(){return a[b].apply(a,
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           arguments)}}(b))};c.init();r.Mousetrap=c;"undefined"!==typeof module&&module.exports&&(module.exports=c);"function"===typeof define&&define.amd&&define(function(){return c})}})("undefined"!==typeof window?window:null,"undefined"!==typeof window?document:null);
+arguments)}}(b))};c.init();r.Mousetrap=c;"undefined"!==typeof module&&module.exports&&(module.exports=c);"function"===typeof define&&define.amd&&define(function(){return c})}})("undefined"!==typeof window?window:null,"undefined"!==typeof window?document:null);

data/lib/gollum/public/gollum/stylesheets/_base.scss

@@ -0,0 +1,55 @@
+// Describes basic parameters (colours, sizes, font stacks, etc.)
+
+// Layout
+$layout-body-width: 920px;
+$layout-body-padding: 20px;
+
+$layout-sidebar: 25%;
+$layout-with-sidebar: 70%;
+$layout-with-sidebar-leeway: 1%;
+
+// Colors
+$grey: #ddd;
+$light-grey: #f7f7f7;
+$blue: #4183c4;
+$red: #c00;
+$white: #fff;
+$black: #000000;
+
+$color-button-border: #d4d4d4;
+$button-text: #333;
+
+$color-button-border-hover: #518cc6;
+$color-button-border-hover-hi: #2a65a0;
+$color-button-background-hover: #3072b3;
+$color-button-background-hover-hi: #599bdc;
+
+$color-editor-element-border: #eee;
+$color-editor-component-border: #e4e4e4;
+$color-editor-component: #f9f9f9;
+
+// Font stack
+$font-default: "Helvetica Neue", Helvetica, Arial, freesans, clean, sans-serif;
+$font-console: Inconsolata, Consolas, "Liberation Mono", 'Monaco', 'Andale Mono', 'Courier New', monospace;
+
+// Borders
+$border-standard: 1px solid $grey;
+$border-editor-component: 1px solid $color-editor-component-border;
+$border-editor-element: 1px solid $color-editor-element-border;
+
+// Editor buttons
+$editor-button-size: 32px;
+$editor-button-desktop-size: 25px;
+
+$editor-button-mobile-margin: 3px;
+$editor-button-img-width: 27px;
+$editor-button-img-height: 28px;
+
+//urls
+$img_fileview_doc: image-url('fileview/document.png');
+$img_fileview_trash: image-url('fileview/trashcan.png');
+$img_fileview_toggle_small: image-url('fileview/toggle-small.png');
+$img_fileview_toggle_small_expand: image-url('fileview/toggle-small-expand.png');
+$img_fileview_folder: image-url('fileview/folder-horizontal.png');
+$img_icon_sprite: image-url('icon-sprite.png');
+$img_dirty_shade: image-url('dirty-shade.png');

data/lib/gollum/public/gollum/stylesheets/_breakpoint.scss

@@ -0,0 +1,22 @@
+// Describes browser size breakpoints
+
+// Desktop-sized displays
+@mixin desktop-breakpoint {
+	@media all and (min-width: 940px) {
+		@content;
+	}
+}
+
+// Large mobile displays
+@mixin largemobile-breakpoint {
+	@media all and (min-width: 640px) {
+		@content;
+	}
+}
+
+// Medium mobile displays
+@mixin mediummobile-breakpoint {
+	@media all and (min-width: 480px) {
+		@content;
+	}
+}

data/lib/gollum/public/gollum/stylesheets/_component.scss

@@ -0,0 +1,124 @@
+// Describes common component styles for Gollum pages
+
+// Sets a reusable component container.
+@mixin component-base {
+  background-color: $light-grey;
+  border: $border-standard;
+  border-radius: 0.5em;
+}
+
+// Sets a reusable section header component.
+@mixin section-header {
+  h1 {
+    color: #999;
+    font-weight: normal;
+
+    strong {
+      color: #000;
+      font-weight: bold;
+    }
+  }
+}
+
+// Sets textarea styles.
+@mixin component-textarea {
+  @include alt-box-model;
+
+  display: block;
+  clear: both;
+
+  background: #fff;
+  border: $border-standard;
+
+  font-size: 1em;
+  font-family: $font-console;
+  line-height: 1.4em;
+
+  margin: 0 0 0.4em;
+  padding: 0.5em;
+
+  width: 100%;
+
+  @include desktop-breakpoint {
+    margin: 1em 0 0.4em;
+  }
+}
+
+// Defines a common button style.
+@mixin button-base {
+  display: block;
+
+  font-weight: bold;
+
+  color: $button-text;
+  background-color: $light-grey;
+  border: 1px solid $color-button-border;
+  text-shadow: 0 1px 0 #fff;
+
+  cursor: pointer;
+
+  @include vertical-gradient(#f4f4f4, #ececec);
+  border-radius: 3px;
+
+  &:hover {
+    color: #fff;
+    background: $color-button-background-hover;
+    border-color: $color-button-border-hover $color-button-border-hover $color-button-border-hover-hi;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+
+    text-decoration: none;
+
+    @include vertical-gradient($color-button-background-hover-hi, $color-button-background-hover);
+  }
+
+  &:visited {
+    text-decoration: none;
+  }
+}
+
+// Defines images for buttons.
+@mixin button-sprites {
+  background-image: $img_icon_sprite;
+  background-repeat: no-repeat;
+}
+
+// Defines mobile and desktop editor button sizes.
+@mixin editor-button-size {
+  width: $editor-button-size;
+  height: $editor-button-size;
+
+  @include desktop-breakpoint {
+    width: $editor-button-desktop-size;
+    height: $editor-button-desktop-size;
+  }
+}
+
+// Defines a common editor button style using image sprites.
+@mixin editor-button($row-pos: 0) {
+  $left: $editor-button-img-width * -1 * $row-pos;
+  $left-mobile: $left + $editor-button-mobile-margin;
+
+  $top: 0;
+  $top-hover: -1 * $editor-button-img-height;
+  $top-mobile: $editor-button-mobile-margin;
+  $top-mobile-hover: -1 * $editor-button-img-height + $editor-button-mobile-margin;
+
+  span {
+    background-position: $left-mobile $top-mobile;
+  }
+  &:hover {
+    span {
+      background-position: $left-mobile $top-mobile-hover;
+    }
+  }
+  @include desktop-breakpoint {
+    span {
+      background-position: $left $top;
+    }
+    &:hover {
+      span {
+        background-position: $left $top-hover;
+      }
+    }
+  }
+}