Skip to content
Browse files

Initial commit

  • Loading branch information...
0 parents commit 2823605aeb1f36128004546e2ad60812222b5e58 @indieisaconcept committed Oct 18, 2012
2 .gitignore
@@ -0,0 +1,2 @@
+/node_modules/
+.DS_Store
14 .jshintrc
@@ -0,0 +1,14 @@
+{
+ "curly": true,
+ "eqeqeq": true,
+ "immed": true,
+ "latedef": true,
+ "newcap": true,
+ "noarg": true,
+ "sub": true,
+ "undef": true,
+ "boss": true,
+ "eqnull": true,
+ "node": true,
+ "es5": true
+}
1 .npmignore
@@ -0,0 +1 @@
+/node_modules/
69 Gruntfile.js
@@ -0,0 +1,69 @@
+/*
+ * Styleguide
+ * https://github.com/indieisaconcept/grunt-styleguide
+ *
+ * Copyright (c) 2012 Jonathan Barnett @indieisaconcept
+ * Licensed under the MIT license.
+ */
+
+'use strict';
+
+module.exports = function(grunt) {
+
+ // Project configuration.
+ grunt.initConfig({
+
+ jshint: {
+ all: ['Gruntfile.js', 'tasks/**/*.js', '<%= nodeunit.tests %>', ],
+ options: {
+ jshintrc: '.jshintrc',
+ },
+ },
+
+ // Before generating any new files, remove any previously-created files.
+ clean: {
+ tests: ['tmp'],
+ },
+
+ // Configuration to be run (and then tested).
+ styleguide: {
+
+ options: {
+ name: 'Style Guide',
+ include: ['plugin.css', 'app.js']
+ },
+
+ dist: {
+
+ files: {
+ 'tmp/bootstap/less': 'test/fixtures/bootstrap/**/*.less',
+ 'tmp/bootstap/sass': 'test/fixtures/bootstrap/sass/**/*.scss'
+ },
+
+ }
+
+ },
+
+ // Unit tests.
+ nodeunit: {
+ tests: ['test/*_test.js'],
+ },
+
+ });
+
+ // Actually load this plugin's task(s).
+ grunt.loadTasks('tasks');
+
+ // These plugins provide necessary tasks.
+ grunt.loadNpmTasks('grunt-contrib-jshint');
+ grunt.loadNpmTasks('grunt-contrib-clean');
+ grunt.loadNpmTasks('grunt-contrib-nodeunit');
+
+ // Whenever the "test" task is run, first clean the "tmp" dir, then run this
+ // plugin's task(s), then test the result.
+ grunt.registerTask('test', ['clean', 'styleguide']);
+
+ // By default, lint and run all tests.
+ grunt.registerTask('default', ['jshint', 'test']);
+
+};
22 LICENSE-MIT
@@ -0,0 +1,22 @@
+Copyright (c) 2012 Jonathan Barnett @indieisaconcept
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
239 README.md
@@ -0,0 +1,239 @@
+# grunt-styleguide
+
+> Universal styleguide generator
+
+## Getting Started
+_If you haven't used [grunt][] before, be sure to check out the [Getting Started][] guide._
+
+From the same directory as your project's [Gruntfile][Getting Started] and [package.json][], install this plugin with the following command:
+
+```
+npm install grunt-styleguide --save-dev
+```
+
+Once that's done, add this line to your project's Gruntfile:
+
+```
+grunt.loadNpmTasks('grunt-styleguide');
+```
+
+If the plugin has been installed correctly, running `grunt --help` at the command line should list the newly-installed plugin's task or tasks. In addition, the plugin should be listed in package.json as a `devDependency`, which ensures that it will be installed whenever the `npm install` command is run.
+
+[grunt]: http://gruntjs.com/
+[Getting Started]: https://github.com/gruntjs/grunt/blob/devel/docs/getting_started.md
+[package.json]: https://npmjs.org/doc/json.html
+
+## The "styleguide" task
+
+### Overview
+In your project's Gruntfile, add a section named `styleguide` to the data object passed into `grunt.initConfig()`.
+
+```
+grunt.initConfig({
+
+ styleguide: {
+
+ // Task-specific options go here.
+ options: {
+ framework: 'styledocco'
+ },
+
+ your_target: {
+
+ // Target-specific options go here.
+ options: {
+ name: 'Style Guide',
+ preprocessor: 'sass --compass',
+ include: ['plugin.css', 'app.js']
+ },
+
+ files: {
+ 'docs': 'stylesheets/sass/*.scss'
+ }
+
+ }
+
+ }
+
+})
+```
+
+#### Options
+
+**grunt-styleguide** supports two levels of options, "task" which apply to all targets and those that can also be overriden on a target by target basis which are options specific to the styleguide framework in use.
+
+#### Task Defaults
+
+<table>
+ <tr>
+ <th>Key</th><th>Type</th><th>Default</th><th>Description</th>
+ </tr>
+ <tr>
+ <td>framework</td><td>String or function (*)</td><td>styledocco</td><td>Used to specify which framework to use for the styleguide generation</td>
+ </tr>
+</table>
+
+> \* See extending grunt-styleguide
+
+#### Framework Options
+Framework options are used to pass the appropriate arguments to a styleguide generator. These options have a 1:1 mapping to the frameworks available options.
+
+Future versions of **grunt-styleguide** will rationalize these options for all frameworks.
+
+##### Currently Supported
+
+[styledocco]: http://jacobrask.github.com/styledocco/
+[node-kss]: https://github.com/hughsk/kss-node
+[kss]: http://warpspire.com/kss/
+[kss-standalone]: https://github.com/tmanderson/kss-standalone
+
+##### styledocco
+
+<table>
+ <tr>
+ <th>Key</th><th>Type</th><th>Default</th><th>Description</th>
+ </tr>
+ <tr>
+ <td>name</td><td>String</td><td>package.json name || 'Styleguide'</td><td>Name to use for the styleguide</td>
+ </tr><tr>
+ <td>preprocessor</td><td>String</td><td>N/A</td><td>Specify the CSS preprocess to use for styleguide generation</td>
+ </tr></tr><tr>
+ <td>include</td><td>Array</td><td>N/A</td><td>Additional CSS/JS to incluce in the generated styleguide output</td>
+ </tr>
+</table>
+
+For more details on the supported options for **styledocco** can be found [styledocco][].
+
+##### Planned
+
+- [node-kss][] (v0.2.0)
+- [kss][] via [kss-standalone][] (v0.2.0)
+
+#### Extending grunt-styleguide
+
+**grunt-styleguide** is bundled with a default styleguide framework or frameworks to allow easy generation of styleguides. It is possible to add support for additional frameworks by passing a framework plugin via the "framework" task option.
+
+Framework plugins should be written in the following manner.
+
+```
+module.exports = {
+
+ init: function (grunt) {
+
+ // defaults
+ var framework = require('some/framework');
+
+ return function (options, callback) {
+
+ framework(options, function () {
+
+ callback();
+
+ })
+
+ }
+
+ }
+
+}
+```
+
+A framework plugin when initialized should return a function which supports the following argument signature.
+
+<table>
+ <tr>
+ <th>Argument</th><th>Type</th><th>Default</th><th>Description</th>
+ </tr>
+ <tr>
+ <td>files</td><td>Object</td><td>
+ {}
+ </td>
+ <td>Rationalized object containing, src, dest and base keys which detail file specific items.</td>
+ </tr><tr>
+ <td>options</td>
+ <td>Object</td>
+ <td>{}</td>
+ <td>Styleguide framework options</td>
+ </tr></tr><tr>
+ <td>callback</td><td>Function</td>
+ <td>this.asnyc()</td>
+ <td>Pass the async task handler grunt provides to the styleguide framework plugin</td>
+ </tr>
+</table>
+
+**grunt-styleguide** will pass a rationalize and `files` object describinthe files you wish to process. These values should be mapped to the equivalent provided by the framework.
+
+### Usage Examples
+
+#### Default Options
+In this example a styleguide will be generated using the default generator, `styledocco`. Guides will be created for css/scss located within the **core** and **plugins** directory and output them to the appropriate destination specified.
+
+```
+grunt.initConfig({
+
+ styleguide: {
+
+ dist: {
+
+ files: {
+ 'docs/core': 'stylesheets/sass/core/*.scss',
+ 'docs/plugins': 'stylesheets/sass/plugins/*.scss',
+ }
+
+ }
+
+ }
+
+});
+```
+
+#### External grunt-styleguide Plugin
+
+This example is similiar to the above except that the framework to use is explictly stated as either a name or function to be used.
+
+```
+grunt.initConfig({
+
+ styleguide: {
+
+ // global framework override
+ options: {
+ framework: 'someother-framework'
+ }
+
+ dist: {
+
+ files: {
+ 'docs/core': 'stylesheets/sass/core/*.scss',
+ 'docs/plugins': 'stylesheets/sass/plugins/*.scss',
+ }
+
+ }
+
+ dist: {
+
+ // target based framework override
+ options: {
+ framework: require('someother-framework')
+ },
+
+ files: {
+ 'docs/core': 'stylesheets/sass/core/*.scss',
+ 'docs/plugins': 'stylesheets/sass/plugins/*.scss',
+ }
+
+ }
+
+ }
+
+});
+```
+
+## Contributing
+In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [grunt][].
+
+## Release History
+
+### 0.1.0
+
++ Initial Release
44 package.json
@@ -0,0 +1,44 @@
+{
+ "name": "Styleguide",
+ "description": "Generate CSS styleguide using your framework of choice",
+ "version": "0.1.0",
+ "homepage": "https://github.com/indieisaconcept/grunt-styleguide",
+ "author": {
+ "name": "Jonathan Barnett @indieisaconcept",
+ "email": "me@indieisaconcept.com",
+ "url": "http://twitter.com/indieisaconcept"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git://github.com/indieisaconcept/grunt-styleguide.git"
+ },
+ "bugs": {
+ "url": "https://github.com/indieisaconcept/grunt-styleguide/issues"
+ },
+ "licenses": [
+ {
+ "type": "MIT",
+ "url": "https://github.com/indieisaconcept/grunt-styleguide/blob/master/LICENSE-MIT"
+ }
+ ],
+ "main": "Gruntfile.js",
+ "engines": {
+ "node": ">= 0.6.0"
+ },
+ "scripts": {
+ "test": "grunt test"
+ },
+ "devDependencies": {
+ "grunt": "~0.4.0a",
+ "grunt-lib-contrib": "~0.3.0",
+ "grunt-contrib-jshint": "0.1.0",
+ "grunt-contrib-clean": "0.4.0a",
+ "grunt-contrib-nodeunit": "0.1.0",
+ "styledocco": "https://github.com/indieisaconcept/styledocco/tarball/10c0262d53",
+ "less": "~1.3.0"
+ },
+ "keywords": [
+ "gruntplugin"
+ ],
+ "dependencies": {}
+}
59 tasks/lib/styledocco.js
@@ -0,0 +1,59 @@
+/*
+ * styleguide
+ * https://github.com/indieisaconcept/grunt-styleguide/tasks/lib/styledocco
+ *
+ * Copyright (c) 2012 Jonathan Barnett @indieisaconcept
+ * Licensed under the MIT license.
+ */
+
+'use strict';
+
+module.exports = {
+
+ init: function (grunt) {
+
+ var styledocco = require('styledocco/cli'),
+ utils = grunt.util || grunt.utils,
+
+ // proecessor specific arguemnts
+ processors = {
+ 'sass': 'sass --compass'
+ };
+
+ return function (styleguide, callback) {
+
+ var files = styleguide.files,
+ options = styleguide.options,
+ preprocessor = !options.preprocessor ? styleguide.preprocessor && processors[styleguide.preprocessor] : options.preprocessor;
+
+ options.in = files.src;
+ options.out = files.dest;
+ options.basePath = files.base;
+
+ // specify processor if needed
+ if (preprocessor) {
+ options.preprocessor = preprocessor;
+ }
+
+ styledocco(options);
+
+ // [JB] HACKY
+ // styledocco doesn't support callbacks but always generates
+ // and index.html file upon completion so we can at least monitor for the
+ // creation of this.
+
+ (function isComplete() {
+
+ if (!grunt.file.exists(files.dest + '/index.html')) {
+ setTimeout(isComplete, 0);
+ } else {
+ callback();
+ }
+
+ }());
+
+ };
+
+ }
+
+};
178 tasks/styleguide.js
@@ -0,0 +1,178 @@
+/*
+ * Styleguide
+ * https://github.com/indieisaconcept/grunt-styleguide
+ *
+ * Copyright (c) 2012 Jonathan Barnett @indieisaconcept
+ * Licensed under the MIT license.
+ */
+
+'use strict';
+
+module.exports = function(grunt) {
+
+ // ==================================
+ // DEFAULTS
+ // ==================================
+
+ var fs = require('fs'),
+ path = require('path'),
+ helpers = require('grunt-lib-contrib').init(grunt),
+ plugin = {};
+
+ // TODO: ditch this when grunt v0.4 is released
+ grunt.file.exists = grunt.file.exists || fs.existsSync || path.existsSync;
+
+ // TODO: ditch this when grunt v0.4 is released
+ grunt.util = grunt.util || grunt.utils;
+
+ // ==================================
+ // PLUGIN DEFAULTS
+ // ==================================
+
+ plugin = {
+
+ preprocessors: {
+ 'sass': 'scss sass'
+ },
+
+ util: {
+
+ // processor
+ // Determine the CSS processor to use based on an array of files
+ getPreprocessor: function(/* Array */ files) {
+
+ var _ = grunt.util._,
+ extensions = [],
+ preprocessor;
+
+ // collect all the possible extensions
+ files.forEach(function (/* string */ file, /* number */ index) {
+
+ var ext = path.extname(file).split('.');
+
+ ext = ext[ext.length - 1];
+
+ if (ext.length > 0) {
+ extensions.push(ext);
+ }
+
+ });
+
+ // remove duplicates
+ extensions = _.uniq(extensions);
+
+ preprocessor = _.find(Object.keys(plugin.preprocessors), function (/* String */ key, /* number */ index) {
+
+ var value = plugin.preprocessors[key],
+ exts = value.split(/[,\s]+/),
+ matches = _.filter(extensions, function (/* String */ ext) {
+ return exts.indexOf(ext) !== -1;
+ });
+
+ return !_.isEmpty(matches);
+
+ });
+
+ return preprocessor;
+
+ }
+
+ }
+
+ };
+
+ // ==================================
+ // TASK
+ // ==================================
+
+ grunt.registerMultiTask('styleguide', 'Generate CSS styleguides', function() {
+
+ grunt.log.write(grunt.util.linefeed);
+
+ var options = this.options(),
+ framework = options.framework || 'styledocco',
+ done = this.async();
+
+ // initialize the framework
+ framework = grunt.util._.isFunction(framework) ? framework : require('./lib/' + framework);
+ framework = framework.init(grunt),
+
+ // TODO: ditch this when grunt v0.4 is released
+ this.files = this.files || helpers.normalizeMultiTaskFiles(this.data, this.target);
+
+ grunt.verbose.writeflags(options, 'options');
+
+ grunt.util.async.forEachSeries(this.files, function(file, next) {
+
+ var files = grunt.file.expandFiles(file.src),
+
+ styleguide = {
+
+ options: options,
+
+ files: {
+ file: file,
+ src: files.length > 0 && files || grunt.file.exists(file.src) && file.src,
+ dest: path.resolve(file.dest),
+ base: path.resolve() + '/' + path.dirname(file.src).split('/')[0]
+ }
+
+ };
+
+ // identify the preporcess to use
+ styleguide.preprocessor = plugin.util.getPreprocessor(styleguide.files.src);
+
+ if(grunt.util._.isEmpty(styleguide.files.src)) {
+ grunt.fail.warn('Unable to generate styleguide; no valid source files were found.');
+ }
+
+ // framework:
+ // All registered styleguides frameworks when initialized should return a function
+ // which has the following argument signature.
+ //
+ // options: configuration options for the styleguide framework
+ // callback: function to support async execution
+ //
+ // framework({
+ //
+ // preprocessor: 'less',
+ //
+ // options: {
+ // // framework options
+ // },
+ //
+ // files: {
+ // file: file
+ // src: ['path/to/files'],
+ // dest: ['path/to/destination'],
+ // base: ['base/path']
+ // }
+ //
+ // }, function () {
+ //
+ // // execute some command
+ // next()
+ //
+ // });
+
+ framework(styleguide, function(error, result) {
+
+ var msg = 'DEST: ' + styleguide.files.dest + '/index.html';
+
+ if(!error) {
+ grunt.log.ok(msg);
+ next();
+ } else {
+ grunt.log.error(error);
+ grunt.fail.warn('Styleguide generation failed');
+ }
+
+ });
+
+ }, function() {
+ done();
+ });
+
+ });
+
+};
100 test/fixtures/bootstrap/README.md
@@ -0,0 +1,100 @@
+TWITTER BOOTSTRAP
+=================
+
+Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.
+
+To get started -- checkout http://twitter.github.com/bootstrap!
+
+
+Versioning
+----------
+
+For transparency and insight into our release cycle, and for striving to maintain backward compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible.
+
+Releases will be numbered with the follow format:
+
+`<major>.<minor>.<patch>`
+
+And constructed with the following guidelines:
+
+* Breaking backward compatibility bumps the major
+* New additions without breaking backward compatibility bumps the minor
+* Bug fixes and misc changes bump the patch
+
+For more information on SemVer, please visit http://semver.org/.
+
+
+Bug tracker
+-----------
+
+Have a bug? Please create an issue here on GitHub!
+
+https://github.com/twitter/bootstrap/issues
+
+
+Twitter account
+---------------
+
+Keep up to date on announcements and more by following Bootstrap on Twitter, <a href="http://twitter.com/TwBootstrap">@TwBootstrap</a>.
+
+
+Mailing list
+------------
+
+Have a question? Ask on our mailing list!
+
+twitter-bootstrap@googlegroups.com
+
+http://groups.google.com/group/twitter-bootstrap
+
+
+IRC
+---
+
+Server: irc.freenode.net
+
+Channel: ##twitter-bootstrap (the double ## is not a typo)
+
+
+Developers
+----------
+
+We have included a makefile with convenience methods for working with the Bootstrap library.
+
++ **build** - `make`
+Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. Requires lessc and uglify-js. <a href="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs &raquo;</a>
+
++ **watch** - `make watch`
+This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
+
+
+Authors
+-------
+
+**Mark Otto**
+
++ http://twitter.com/mdo
++ http://github.com/markdotto
+
+**Jacob Thornton**
+
++ http://twitter.com/fat
++ http://github.com/fat
+
+
+Copyright and license
+---------------------
+
+Copyright 2012 Twitter, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this work except in compliance with the License.
+You may obtain a copy of the License in the LICENSE file, or at:
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
222 test/fixtures/bootstrap/less/buttons.less
@@ -0,0 +1,222 @@
+// Button Styles
+// =============
+
+// As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.
+// Button styles can be applied to anything with the `btn` class applied. However, typically you'll want to apply these to only `a` and `button` elements.
+
+@import "variables.less";
+@import "mixins.less";
+
+// Base styles
+// ===========
+
+// Standard gray button with gradient
+//
+// <button class="btn">Default</button>
+.btn {
+ display: inline-block;
+ padding: 4px 10px 4px;
+ margin-bottom: 0; // For input.btn
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+ color: @grayDark;
+ text-align: center;
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
+ vertical-align: middle;
+ .buttonBackground(@white, darken(@white, 10%));
+ border: 1px solid #ccc;
+ border-bottom-color: #bbb;
+ .border-radius(4px);
+ @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+ .box-shadow(@shadow);
+ cursor: pointer;
+
+ // Give IE7 some love
+ .reset-filter();
+ .ie7-restore-left-whitespace();
+}
+
+// States
+// ------
+// Hover state
+
+// <button class="btn :hover">Default</button>
+.btn:hover {
+ color: @grayDark;
+ text-decoration: none;
+ background-color: darken(@white, 10%);
+ background-position: 0 -15px;
+
+ // transition is only when going to hover, otherwise the background
+ // behind the gradient (there for IE<=9 fallback) gets mismatched
+ .transition(background-position .1s linear);
+}
+
+// Focus state for keyboard and accessibility
+
+// <button class="btn :focus">Default</button>
+.btn:focus {
+ .tab-focus();
+}
+
+// <button class="btn active">Active</button>
+.btn.active,
+.btn:active {
+ background-image: none;
+ @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+ .box-shadow(@shadow);
+ background-color: darken(@white, 10%);
+ background-color: darken(@white, 15%) e("\9");
+ outline: 0;
+}
+
+// Add the `disabled` class to links and the `disabled` attribute for `button` elements.
+
+// <button class="btn" disabled>Disabled</button>
+.btn.disabled,
+.btn[disabled] {
+ cursor: default;
+ background-image: none;
+ background-color: darken(@white, 10%);
+ .opacity(65);
+ .box-shadow(none);
+}
+
+
+// Multiple sizes
+// ==============
+// Fancy larger or smaller buttons?
+
+// <button class="btn btn-large">Large</button>
+.btn-large {
+ padding: 9px 14px;
+ font-size: @baseFontSize + 2px;
+ line-height: normal;
+ .border-radius(5px);
+}
+.btn-large [class^="icon-"] {
+ margin-top: 1px;
+}
+
+// <button class="btn btn-small">Small</button>
+.btn-small {
+ padding: 5px 9px;
+ font-size: @baseFontSize - 2px;
+ line-height: @baseLineHeight - 2px;
+}
+.btn-small [class^="icon-"] {
+ margin-top: -1px;
+}
+
+// <button class="btn btn-mini">Mini</button>
+.btn-mini {
+ padding: 2px 6px;
+ font-size: @baseFontSize - 2px;
+ line-height: @baseLineHeight - 4px;
+}
+
+
+// Alternate button styles
+// =======================
+
+ // Set text color
+.btn-primary,
+.btn-primary:hover,
+.btn-warning,
+.btn-warning:hover,
+.btn-danger,
+.btn-danger:hover,
+.btn-success,
+.btn-success:hover,
+.btn-info,
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ color: @white;
+}
+ // Provide *some* extra contrast for those who can get it
+.btn-primary.active,
+.btn-warning.active,
+.btn-danger.active,
+.btn-success.active,
+.btn-info.active,
+.btn-dark.active {
+ color: rgba(255,255,255,.75);
+}
+
+ // Set the backgrounds
+
+// Provides extra visual weight and identifies the primary action in a set of buttons.
+
+// <button class="btn btn-primary">Primary</button>
+// <button class="btn btn-primary :hover">Hover</button>
+// <button class="btn btn-primary :active">Active</button>
+.btn-primary {
+ .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
+}
+// Indicates caution should be taken with this action
+
+// <button class="btn btn-warning">Warning</button>
+// <button class="btn btn-warning :hover">Hover</button>
+// <button class="btn btn-warning :active">Active</button>
+.btn-warning {
+ .buttonBackground(lighten(@orange, 15%), @orange);
+}
+// Indicates a dangerous or potentially negative action
+
+// <button class="btn btn-danger">Danger</button>
+// <button class="btn btn-danger :hover">Hover</button>
+// <button class="btn btn-danger :active">Active</button>
+.btn-danger {
+ .buttonBackground(#ee5f5b, #bd362f);
+}
+// Indicates a successful or positive action
+
+// <button class="btn btn-success">Success</button>
+// <button class="btn btn-success :hover">Hover</button>
+// <button class="btn btn-success :active">Active</button>
+.btn-success {
+ .buttonBackground(#62c462, #51a351);
+}
+// Used as an alternate to the default styles
+
+// <button class="btn btn-info">Info</button>
+// <button class="btn btn-info :hover">Hover</button>
+// <button class="btn btn-info :active">Active</button>
+.btn-info {
+ .buttonBackground(#5bc0de, #2f96b4);
+}
+// Alternate dark gray button, not tied to a semantic action or use
+
+// <button class="btn btn-inverse">Inverse</button>
+// <button class="btn btn-inverse :hover">Hover</button>
+// <button class="btn btn-inverse :active">Active</button>
+.btn-inverse {
+ .buttonBackground(#454545, #262626);
+}
+
+
+ // Cross-browser Jank
+
+button.btn,
+input[type="submit"].btn {
+
+ // Firefox 3.6 only I believe
+ &::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+ }
+
+ // IE7 has some default padding on button controls
+ *padding-top: 2px;
+ *padding-bottom: 2px;
+ &.large {
+ *padding-top: 7px;
+ *padding-bottom: 7px;
+ }
+ &.small {
+ *padding-top: 3px;
+ *padding-bottom: 3px;
+ }
+}
589 test/fixtures/bootstrap/less/mixins.less
@@ -0,0 +1,589 @@
+// Mixins
+// ======
+// Snippets of reusable CSS to develop faster and keep code readable
+
+
+// Utility mixins
+// ==============
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
+.clearfix {
+ *zoom: 1;
+ &:before,
+ &:after {
+ display: table;
+ content: "";
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+// Webkit-style focus
+// ------------------
+.tab-focus() {
+ // Default
+ outline: thin dotted #333;
+ // Webkit
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+}
+
+// Center-align a block level element
+// ----------------------------------
+.center-block() {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+// IE7 inline-block
+// ----------------
+.ie7-inline-block() {
+ *display: inline; /* IE7 inline-block hack */
+ *zoom: 1;
+}
+
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// right version is for icons, which come before. Applying both is ok, but it will
+// mean that space between those elements will be .6em (~2 space characters) in IE7,
+// instead of the 1 space in other browsers.
+.ie7-restore-left-whitespace() {
+ *margin-left: .3em;
+
+ &:first-child {
+ *margin-left: 0;
+ }
+}
+
+.ie7-restore-right-whitespace() {
+ *margin-right: .3em;
+
+ &:last-child {
+ *margin-left: 0;
+ }
+}
+
+// Sizing shortcuts
+// -------------------------
+.size(@height: 5px, @width: 5px) {
+ width: @width;
+ height: @height;
+}
+.square(@size: 5px) {
+ .size(@size, @size);
+}
+
+// Placeholder text
+// -------------------------
+.placeholder(@color: @placeholderText) {
+ :-moz-placeholder {
+ color: @color;
+ }
+ ::-webkit-input-placeholder {
+ color: @color;
+ }
+}
+
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+.text-overflow() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+
+
+// Fonts
+// ==================================================
+
+#font {
+ #family {
+ .serif() {
+ font-family: Georgia, "Times New Roman", Times, serif;
+ }
+ .sans-serif() {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ }
+ .monospace() {
+ font-family: Menlo, Monaco, "Courier New", monospace;
+ }
+ }
+ .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .serif;
+ #font > .shorthand(@size, @weight, @lineHeight);
+ }
+ .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .sans-serif;
+ #font > .shorthand(@size, @weight, @lineHeight);
+ }
+ .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .monospace;
+ #font > .shorthand(@size, @weight, @lineHeight);
+ }
+}
+
+
+
+// Grid System
+// ==================================================
+
+// Site container
+// -------------------------
+.container-fixed() {
+ width: @gridRowWidth;
+ margin-left: auto;
+ margin-right: auto;
+ .clearfix();
+}
+
+// Le grid system
+// -------------------------
+#gridSystem {
+ // Setup the mixins to be used
+ .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+ }
+ .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+ }
+ .gridColumn(@gridGutterWidth) {
+ float: left;
+ margin-left: @gridGutterWidth;
+ }
+ // Take these values and mixins, and make 'em do their thang
+ .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
+ // Row surrounds the columns
+ .row {
+ margin-left: @gridGutterWidth * -1;
+ .clearfix();
+ }
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+ [class*="span"] {
+ #gridSystem > .gridColumn(@gridGutterWidth);
+ }
+ // Default columns
+ .span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
+ .span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
+ .span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
+ .span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
+ .span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
+ .span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
+ .span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
+ .span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
+ .span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
+ .span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
+ .span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
+ .span12,
+ .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+ // Offset column options
+ .offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
+ .offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
+ .offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
+ .offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
+ .offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
+ .offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
+ .offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
+ .offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
+ .offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
+ .offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
+ .offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
+ }
+}
+
+// Fluid grid system
+// -------------------------
+#fluidGridSystem {
+ // Setup the mixins to be used
+ .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
+ width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+ }
+ .gridColumn(@fluidGridGutterWidth) {
+ float: left;
+ margin-left: @fluidGridGutterWidth;
+ }
+ // Take these values and mixins, and make 'em do their thang
+ .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
+ // Row surrounds the columns
+ .row-fluid {
+ width: 100%;
+ .clearfix();
+
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+ > [class*="span"] {
+ #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
+ }
+ > [class*="span"]:first-child {
+ margin-left: 0;
+ }
+ // Default columns
+ > .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
+ > .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
+ > .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
+ > .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
+ > .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
+ > .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
+ > .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
+ > .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
+ > .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
+ > .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
+ > .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
+ > .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
+ }
+ }
+}
+
+// Input grid system
+// -------------------------
+#inputGridSystem {
+ .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
+ width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
+ }
+ .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
+ input,
+ textarea,
+ .uneditable-input {
+ &.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
+ &.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
+ &.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
+ &.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
+ &.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
+ &.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
+ &.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
+ &.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
+ &.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
+ &.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
+ &.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
+ &.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+ }
+ }
+}
+
+// Make a Grid
+// -------------------------
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+.makeRow() {
+ margin-left: @gridGutterWidth * -1;
+ .clearfix();
+}
+.makeColumn(@columns: 1) {
+ float: left;
+ margin-left: @gridGutterWidth;
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+}
+
+
+
+// Form field states (used in forms.less)
+// --------------------------------------------------
+
+// Mixin for form field states
+.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+ // Set the text color
+ > label,
+ .help-block,
+ .help-inline {
+ color: @textColor;
+ }
+ // Style inputs accordingly
+ input,
+ select,
+ textarea {
+ color: @textColor;
+ border-color: @borderColor;
+ &:focus {
+ border-color: darken(@borderColor, 10%);
+ .box-shadow(0 0 6px lighten(@borderColor, 20%));
+ }
+ }
+ // Give a small background color for input-prepend/-append
+ .input-prepend .add-on,
+ .input-append .add-on {
+ color: @textColor;
+ background-color: @backgroundColor;
+ border-color: @textColor;
+ }
+}
+
+
+
+// CSS3 properties
+// ==================================================
+
+// Border Radius
+.border-radius(@radius: 5px) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ border-radius: @radius;
+}
+
+// Drop shadows
+.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+ -webkit-box-shadow: @shadow;
+ -moz-box-shadow: @shadow;
+ box-shadow: @shadow;
+}
+
+// Transitions
+.transition(@transition) {
+ -webkit-transition: @transition;
+ -moz-transition: @transition;
+ -ms-transition: @transition;
+ -o-transition: @transition;
+ transition: @transition;
+}
+
+// Transformations
+.rotate(@degrees) {
+ -webkit-transform: rotate(@degrees);
+ -moz-transform: rotate(@degrees);
+ -ms-transform: rotate(@degrees);
+ -o-transform: rotate(@degrees);
+ transform: rotate(@degrees);
+}
+.scale(@ratio) {
+ -webkit-transform: scale(@ratio);
+ -moz-transform: scale(@ratio);
+ -ms-transform: scale(@ratio);
+ -o-transform: scale(@ratio);
+ transform: scale(@ratio);
+}
+.translate(@x: 0, @y: 0) {
+ -webkit-transform: translate(@x, @y);
+ -moz-transform: translate(@x, @y);
+ -ms-transform: translate(@x, @y);
+ -o-transform: translate(@x, @y);
+ transform: translate(@x, @y);
+}
+.skew(@x: 0, @y: 0) {
+ -webkit-transform: skew(@x, @y);
+ -moz-transform: skew(@x, @y);
+ -ms-transform: skew(@x, @y);
+ -o-transform: skew(@x, @y);
+ transform: skew(@x, @y);
+}
+.translate3d(@x: 0, @y: 0, @z: 0) {
+ -webkit-transform: translate(@x, @y, @z);
+ -moz-transform: translate(@x, @y, @z);
+ -ms-transform: translate(@x, @y, @z);
+ -o-transform: translate(@x, @y, @z);
+ transform: translate(@x, @y, @z);
+}
+
+// Background clipping
+// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
+.background-clip(@clip) {
+ -webkit-background-clip: @clip;
+ -moz-background-clip: @clip;
+ background-clip: @clip;
+}
+
+// Background sizing
+.background-size(@size){
+ -webkit-background-size: @size;
+ -moz-background-size: @size;
+ -o-background-size: @size;
+ background-size: @size;
+}
+
+
+// Box sizing
+.box-sizing(@boxmodel) {
+ -webkit-box-sizing: @boxmodel;
+ -moz-box-sizing: @boxmodel;
+ box-sizing: @boxmodel;
+}
+
+// User select
+// For selecting text on the page
+.user-select(@select) {
+ -webkit-user-select: @select;
+ -moz-user-select: @select;
+ -o-user-select: @select;
+ user-select: @select;
+}
+
+// Resize anything
+.resizable(@direction: both) {
+ resize: @direction; // Options: horizontal, vertical, both
+ overflow: auto; // Safari fix
+}
+
+// CSS3 Content Columns
+.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
+ -webkit-column-count: @columnCount;
+ -moz-column-count: @columnCount;
+ column-count: @columnCount;
+ -webkit-column-gap: @columnGap;
+ -moz-column-gap: @columnGap;
+ column-gap: @columnGap;
+}
+
+// Opacity
+.opacity(@opacity: 100) {
+ opacity: @opacity / 100;
+ filter: e(%("alpha(opacity=%d)", @opacity));
+}
+
+
+
+// Backgrounds
+// ==================================================
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+#translucent {
+ .background(@color: @white, @alpha: 1) {
+ background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+ }
+ .border(@color: @white, @alpha: 1) {
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+ .background-clip(padding-box);
+ }
+}
+
+// Gradient Bar Colors for buttons and alerts
+.gradientBar(@primaryColor, @secondaryColor) {
+ #gradient > .vertical(@primaryColor, @secondaryColor);
+ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
+}
+
+// Gradients
+#gradient {
+ .horizontal(@startColor: #555, @endColor: #333) {
+ background-color: @endColor;
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+ background-repeat: repeat-x;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
+ }
+ .vertical(@startColor: #555, @endColor: #333) {
+ background-color: mix(@startColor, @endColor, 60%);
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(top, @startColor, @endColor); // The standard
+ background-repeat: repeat-x;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
+ }
+ .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
+ background-color: @endColor;
+ background-repeat: repeat-x;
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
+ background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
+ }
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
+ background-color: mix(@midColor, @endColor, 80%);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
+ background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
+ background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-repeat: no-repeat;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
+ }
+ .radial(@innerColor: #555, @outerColor: #333) {
+ background-color: @outerColor;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
+ background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
+ background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
+ background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
+ background-repeat: no-repeat;
+ // Opera cannot do radial gradients yet
+ }
+ .striped(@color, @angle: -45deg) {
+ background-color: @color;
+ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
+ background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ }
+}
+// Reset filters for IE
+.reset-filter() {
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
+}
+
+
+// Mixin for generating button backgrounds
+.buttonBackground(@startColor, @endColor) {
+ // gradientBar will set the background to a pleasing blend of these, to support IE<=9
+ .gradientBar(@startColor, @endColor);
+ .reset-filter();
+
+ // in these cases the gradient won't cover the background, so we override
+ &:hover, &:active, &.active, &.disabled, &[disabled] {
+ background-color: @endColor;
+ }
+
+ // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
+ &:active,
+ &.active {
+ background-color: darken(@endColor, 10%) e("\9");
+ }
+}
+
+
+// Component mixins
+// ==================================================
+
+// Popover arrows
+// -------------------------
+// For tipsies and popovers
+#popoverArrow {
+ .top(@arrowWidth: 5px) {
+ bottom: 0;
+ left: 50%;
+ margin-left: -@arrowWidth;
+ border-left: @arrowWidth solid transparent;
+ border-right: @arrowWidth solid transparent;
+ border-top: @arrowWidth solid @black;
+ }
+ .left(@arrowWidth: 5px) {
+ top: 50%;
+ right: 0;
+ margin-top: -@arrowWidth;
+ border-top: @arrowWidth solid transparent;
+ border-bottom: @arrowWidth solid transparent;
+ border-left: @arrowWidth solid @black;
+ }
+ .bottom(@arrowWidth: 5px) {
+ top: 0;
+ left: 50%;
+ margin-left: -@arrowWidth;
+ border-left: @arrowWidth solid transparent;
+ border-right: @arrowWidth solid transparent;
+ border-bottom: @arrowWidth solid @black;
+ }
+ .right(@arrowWidth: 5px) {
+ top: 50%;
+ left: 0;
+ margin-top: -@arrowWidth;
+ border-top: @arrowWidth solid transparent;
+ border-bottom: @arrowWidth solid transparent;
+ border-right: @arrowWidth solid @black;
+ }
+}
107 test/fixtures/bootstrap/less/variables.less
@@ -0,0 +1,107 @@
+// Variables
+// ==================================================
+// Variables to customize the look and feel of Bootstrap
+
+
+
+// GLOBAL VALUES
+// --------------------------------------------------
+
+// Links
+@linkColor: #08c;
+@linkColorHover: darken(@linkColor, 15%);
+
+// Grays
+@black: #000;
+@grayDarker: #222;
+@grayDark: #333;
+@gray: #555;
+@grayLight: #999;
+@grayLighter: #eee;
+@white: #fff;
+
+// Accent colors
+@blue: #049cdb;
+@blueDark: #0064cd;
+@green: #46a546;
+@red: #9d261d;
+@yellow: #ffc40d;
+@orange: #f89406;
+@pink: #c3325f;
+@purple: #7a43b6;
+
+// Typography
+@baseFontSize: 13px;
+@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@baseLineHeight: 18px;
+@textColor: @grayDark;
+
+// Buttons
+@primaryButtonBackground: @linkColor;
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+// Z-index master list
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+@zindexDropdown: 1000;
+@zindexPopover: 1010;
+@zindexTooltip: 1020;
+@zindexFixedNavbar: 1030;
+@zindexModalBackdrop: 1040;
+@zindexModal: 1050;
+
+// Sprite icons path
+@iconSpritePath: "../img/glyphicons-halflings.png";
+@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
+
+// Input placeholder text color
+@placeholderText: @grayLight;
+
+// Hr border color
+@hrBorder: @grayLighter;
+
+// Navbar
+@navbarHeight: 40px;
+@navbarBackground: @grayDarker;
+@navbarBackgroundHighlight: @grayDark;
+@navbarLinkBackgroundHover: transparent;
+
+@navbarText: @grayLight;
+@navbarLinkColor: @grayLight;
+@navbarLinkColorHover: @white;
+
+// Form states and alerts
+@warningText: #c09853;
+@warningBackground: #fcf8e3;
+@warningBorder: darken(spin(@warningBackground, -10), 3%);
+
+@errorText: #b94a48;
+@errorBackground: #f2dede;
+@errorBorder: darken(spin(@errorBackground, -10), 3%);
+
+@successText: #468847;
+@successBackground: #dff0d8;
+@successBorder: darken(spin(@successBackground, -10), 5%);
+
+@infoText: #3a87ad;
+@infoBackground: #d9edf7;
+@infoBorder: darken(spin(@infoBackground, -10), 7%);
+
+
+
+// GRID
+// --------------------------------------------------
+
+// Default 940px grid
+@gridColumns: 12;
+@gridColumnWidth: 60px;
+@gridGutterWidth: 20px;
+@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Fluid grid
+@fluidGridColumnWidth: 6.382978723%;
+@fluidGridGutterWidth: 2.127659574%;
282 test/fixtures/bootstrap/sass/compass_twitter_bootstrap/_buttons.scss
@@ -0,0 +1,282 @@
+//
+// Buttons
+// --------------------------------------------------
+
+// As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.
+// Button styles can be applied to anything with the `btn` class applied. However, typically you'll want to apply these to only `a` and `button` elements.
+
+
+// Base styles
+// --------------------------------------------------
+
+// Standard gray button with gradient
+//
+// <button class="btn">Default</button>
+
+// Core
+.btn {
+ display: inline-block;
+ @include ie7-inline-block();
+ padding: 4px 14px;
+ margin-bottom: 0; // For input.btn
+ font-size: $baseFontSize;
+ line-height: $baseLineHeight;
+ *line-height: $baseLineHeight;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+ @include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
+ border: 1px solid $btnBorder;
+ *border: 0; // Remove the border to prevent IE7's black border on input:focus
+ border-bottom-color: darken($btnBorder, 10%);
+ @include border-radius(4px);
+ @include ie7-restore-left-whitespace(); // Give IE7 some love
+ @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
+
+// States
+// ------
+// Hover state
+
+// <button class="btn :hover">Default</button>
+
+ &:hover {
+ color: $grayDark;
+ text-decoration: none;
+ background-color: darken($white, 10%);
+ *background-color: darken($white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
+ background-position: 0 -15px;
+
+ // transition is only when going to hover, otherwise the background
+ // behind the gradient (there for IE<=9 fallback) gets mismatched
+ @include transition(background-position .1s linear);
+ }
+
+// Focus state for keyboard and accessibility
+
+// <button class="btn :focus">Default</button>
+
+ // Focus state for keyboard and accessibility
+ &:focus {
+ @include tab-focus();
+ }
+
+// Active state
+
+// <button class="btn active">Active</button>
+
+ &.active,
+ &:active {
+ background-color: darken($white, 10%);
+ background-color: darken($white, 15%) \9;
+ background-image: none;
+ outline: 0;
+ @include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
+ }
+
+// Add the `disabled` class to links and the `disabled` attribute for `button` elements.
+
+// <button class="btn" disabled>Disabled</button>
+
+ // Disabled state
+ &.disabled,
+ &[disabled] {
+ cursor: default;
+ background-color: darken($white, 10%);
+ background-image: none;
+ @include opacity(65);
+ @include box-shadow(none);
+ }
+
+}
+
+
+
+// Multiple sizes
+// ==============
+// Fancy larger or smaller buttons?
+
+// Large
+
+// <button class="btn btn-large">Large</button>
+
+.btn-large {
+ padding: 9px 14px;
+ font-size: $baseFontSize + 2px;
+ line-height: normal;
+ @include border-radius(5px);
+}
+.btn-large [class^="icon-"] {
+ margin-top: 2px;
+}
+
+// Small
+
+// <button class="btn btn-small">Small</button>
+
+.btn-small {
+ padding: 3px 9px;
+ font-size: $baseFontSize - 2px;
+ line-height: $baseLineHeight - 2px;
+}
+.btn-small [class^="icon-"] {
+ margin-top: 0px;
+}
+
+// Mini
+
+// <button class="btn btn-mini">Mini</button>
+
+.btn-mini {
+ padding: 2px 6px;
+ font-size: $baseFontSize - 3px;
+ line-height: $baseLineHeight - 4px;
+}
+
+// Block button
+//
+// <button class="btn btn-block">Block</button>
+
+.btn-block {
+ display: block;
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+ @include box-sizing(border-box);
+}
+.btn-block + .btn-block {
+ margin-top: 5px;
+}
+
+
+// Alternate buttons
+// --------------------------------------------------
+
+// Provide *some* extra contrast for those who can get it
+.btn-primary.active,
+.btn-warning.active,
+.btn-danger.active,
+.btn-success.active,
+.btn-info.active,
+.btn-inverse.active {
+ color: rgba(255,255,255,.75);
+}
+
+// Set the backgrounds
+// -------------------------
+.btn {
+ // reset here as of 2.0.3 due to Recess property order
+ border-color: #c5c5c5;
+ border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
+}
+
+ // Set the backgrounds
+
+// Provides extra visual weight and identifies the primary action in a set of buttons.
+
+// <button class="btn btn-primary">Primary</button>
+// <button class="btn btn-primary :hover">Hover</button>
+// <button class="btn btn-primary :active">Active</button>
+
+.btn-primary {
+ @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
+}
+
+// Indicates caution should be taken with this action
+
+// <button class="btn btn-warning">Warning</button>
+// <button class="btn btn-warning :hover">Hover</button>
+// <button class="btn btn-warning :active">Active</button>
+
+.btn-warning {
+ @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
+}
+
+// Indicates a dangerous or potentially negative action
+
+// <button class="btn btn-danger">Danger</button>
+// <button class="btn btn-danger :hover">Hover</button>
+// <button class="btn btn-danger :active">Active</button>
+
+.btn-danger {
+ @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
+}
+
+// Indicates a successful or positive action
+
+// <button class="btn btn-success">Success</button>
+// <button class="btn btn-success :hover">Hover</button>
+// <button class="btn btn-success :active">Active</button>
+
+.btn-success {
+ @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
+}
+// Used as an alternate to the default styles
+
+// <button class="btn btn-info">Info</button>
+// <button class="btn btn-info :hover">Hover</button>
+// <button class="btn btn-info :active">Active</button>
+
+.btn-info {
+ @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
+}
+// Alternate dark gray button, not tied to a semantic action or use
+
+// <button class="btn btn-inverse">Inverse</button>
+// <button class="btn btn-inverse :hover">Hover</button>
+// <button class="btn btn-inverse :active">Active</button>
+.btn-inverse {
+ @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
+}
+
+
+// Cross-browser Jank
+// --------------------------------------------------
+
+button.btn,
+input[type="submit"].btn {
+
+ // Firefox 3.6 only I believe
+ &::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+ }
+
+ // IE7 has some default padding on button controls
+ *padding-top: 3px;
+ *padding-bottom: 3px;
+ &.btn-large {
+ *padding-top: 7px;
+ *padding-bottom: 7px;
+ }
+ &.btn-small {
+ *padding-top: 3px;
+ *padding-bottom: 3px;
+ }
+ &.btn-mini {
+ *padding-top: 1px;
+ *padding-bottom: 1px;
+ }
+}
+
+
+// Link buttons
+// --------------------------------------------------
+
+// Make a button look and behave like a link
+.btn-link,
+.btn-link:active {
+ background-color: transparent;
+ background-image: none;
+ @include box-shadow(none);
+}
+.btn-link {
+ border-color: transparent;
+ cursor: pointer;
+ color: $linkColor;
+ @include border-radius(0);
+}
+.btn-link:hover {
+ color: $linkColorHover;
+ text-decoration: underline;
+ background-color: transparent;
+}
656 test/fixtures/bootstrap/sass/compass_twitter_bootstrap/_mixins.scss
@@ -0,0 +1,656 @@
+//
+// Mixins
+// --------------------------------------------------
+
+
+// UTILITY MIXINS
+// --------------------------------------------------
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
+@mixin clearfix {
+ *zoom: 1;
+ &:before,
+ &:after {
+ display: table;
+ content: "";
+ // Fixes Opera/contenteditable bug:
+ // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+ line-height: 0;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+// Webkit-style focus
+// ------------------
+@mixin tab-focus() {
+ // Default
+ outline: thin dotted #333;
+ // Webkit
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+}
+
+// Center-align a block level element
+// ----------------------------------
+@mixin center-block() {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+// IE7 inline-block
+// ----------------
+@mixin ie7-inline-block() {
+ *display: inline; // IE7 inline-block hack
+ *zoom: 1;
+}
+
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// right version is for icons, which come before. Applying both is ok, but it will
+// mean that space between those elements will be .6em (~2 space characters) in IE7,
+// instead of the 1 space in other browsers.
+@mixin ie7-restore-left-whitespace() {
+ *margin-left: .3em;
+
+ &:first-child {
+ *margin-left: 0;
+ }
+}
+
+@mixin ie7-restore-right-whitespace() {
+ *margin-right: .3em;
+}
+
+// Sizing shortcuts
+// -------------------------
+@mixin size($height, $width) {
+ width: $width;
+ height: $height;
+}
+@mixin square($size) {
+ @include size($size, $size);
+}
+
+// Placeholder text
+// -------------------------
+@mixin placeholder($color: $placeholderText) {
+ &:-moz-placeholder {
+ color: $color;
+ }
+ &:-ms-input-placeholder {
+ color: $color;
+ }
+ &::-webkit-input-placeholder {
+ color: $color;
+ }
+}
+
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+@mixin text-overflow() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+// CSS image replacement
+// -------------------------
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+@mixin hide-text {
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+}
+
+// FONTS
+// --------------------------------------------------
+
+@mixin font-family-serif() {
+ font-family: $serifFontFamily;
+}
+@mixin font-family-sans-serif() {
+ font-family: $sansFontFamily;
+}
+@mixin font-family-monospace() {
+ font-family: $monoFontFamily;
+}
+@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+ font-size: $size;
+ font-weight: $weight;
+ line-height: $lineHeight;
+}
+@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+ @include font-family-serif();
+ @include font-shorthand($size, $weight, $lineHeight);
+}
+@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+ @include font-family-sans-serif();
+ @include font-shorthand($size, $weight, $lineHeight);
+}
+@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+ @include font-family-monospace();
+ @include font-shorthand($size, $weight, $lineHeight);
+}
+
+
+// FORMS
+// --------------------------------------------------
+
+// Block level inputs
+@mixin input-block-level {
+ display: block;
+ width: 100%;
+ min-height: 30px; // Make inputs at least the height of their button counterpart
+ @include box-sizing(border-box); // Makes inputs behave like true block-level elements
+}
+
+
+
+// Mixin for form field states
+@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
+ // Set the text color
+ > label,
+ .help-block,
+ .help-inline {
+ color: $textColor;
+ }
+ // Style inputs accordingly
+ .checkbox,
+ .radio,
+ input,
+ select,
+ textarea {
+ color: $textColor;
+ border-color: $borderColor;
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+ &:focus {
+ border-color: darken($borderColor, 10%);
+ // Write out in full since the lighten() function isn't easily escaped
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%);
+ -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%);
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%);
+ }
+ }
+ // Give a small background color for input-prepend/-append
+ .input-prepend .add-on,
+ .input-append .add-on {
+ color: $textColor;
+ background-color: $backgroundColor;
+ border-color: $textColor;
+ }
+}
+
+
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+
+// Border Radius
+@mixin border-radius($radius) {
+ -webkit-border-radius: $radius;
+ -moz-border-radius: $radius;
+ border-radius: $radius;
+}
+
+// Single Corner Border Radius
+@mixin border-top-left-radius($radius) {
+ -webkit-border-top-left-radius: $radius;
+ -moz-border-radius-topleft: $radius;
+ border-top-left-radius: $radius;
+}
+@mixin border-top-right-radius($radius) {
+ -webkit-border-top-right-radius: $radius;
+ -moz-border-radius-topright: $radius;
+ border-top-right-radius: $radius;
+}
+@mixin border-bottom-right-radius($radius) {
+ -webkit-border-bottom-right-radius: $radius;
+ -moz-border-radius-bottomright: $radius;
+ border-bottom-right-radius: $radius;
+}
+@mixin border-bottom-left-radius($radius) {
+ -webkit-border-bottom-left-radius: $radius;
+ -moz-border-radius-bottomleft: $radius;
+ border-bottom-left-radius: $radius;
+}
+
+// Single Side Border Radius
+@mixin border-top-radius($radius) {
+ @include border-top-right-radius($radius);
+ @include border-top-left-radius($radius);
+}
+@mixin border-right-radius($radius) {
+ @include border-top-right-radius($radius);
+ @include border-bottom-right-radius($radius);
+}
+@mixin border-bottom-radius($radius) {
+ @include border-bottom-right-radius($radius);
+ @include border-bottom-left-radius($radius);
+}
+@mixin border-left-radius($radius) {
+ @include border-top-left-radius($radius);
+ @include border-bottom-left-radius($radius);
+}
+
+// Drop shadows
+@mixin box-shadow($shadow) {
+ -webkit-box-shadow: $shadow;
+ -moz-box-shadow: $shadow;
+ box-shadow: $shadow;
+}
+
+// Transitions
+@mixin transition($transition) {
+ -webkit-transition: $transition;
+ -moz-transition: $transition;
+ -o-transition: $transition;
+ transition: $transition;
+}
+
+// Transformations
+@mixin rotate($degrees) {
+ -webkit-transform: rotate($degrees);
+ -moz-transform: rotate($degrees);
+ -ms-transform: rotate($degrees);
+ -o-transform: rotate($degrees);
+ transform: rotate($degrees);
+}
+@mixin scale($ratio) {
+ -webkit-transform: scale($ratio);
+ -moz-transform: scale($ratio);
+ -ms-transform: scale($ratio);
+ -o-transform: scale($ratio);
+ transform: scale($ratio);
+}
+@mixin translate($x, $y) {
+ -webkit-transform: translate($x, $y);
+ -moz-transform: translate($x, $y);
+ -ms-transform: translate($x, $y);
+ -o-transform: translate($x, $y);
+ transform: translate($x, $y);
+}
+
+@mixin skew($x, $y) {
+ -webkit-transform: skew($x, $y);
+ -moz-transform: skew($x, $y);
+ -ms-transform: skew($x, $y);
+ -o-transform: skew($x, $y);
+ transform: skew($x, $y);
+}
+
+@mixin translate3d($x, $y, $z) {
+ -webkit-transform: translate3d($x, $y, $z);
+ -moz-transform: translate3d($x, $y, $z);
+ -o-transform: translate3d($x, $y, $z);
+ transform: translate3d($x, $y, $z);
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden
+// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
+@mixin backface-visibility($visibility){
+ -webkit-backface-visibility: $visibility;
+ -moz-backface-visibility: $visibility;
+ backface-visibility: $visibility;
+}
+
+// Background clipping
+// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
+@mixin background-clip($clip) {
+ -webkit-background-clip: $clip;
+ -moz-background-clip: $clip;
+ background-clip: $clip;
+}
+
+// Background sizing
+@mixin background-size($size) {
+ -webkit-background-size: $size;
+ -moz-background-size: $size;
+ -o-background-size: $size;
+ background-size: $size;
+}
+
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+ -webkit-box-sizing: $boxmodel;
+ -moz-box-sizing: $boxmodel;
+ box-sizing: $boxmodel;
+}
+
+// User select
+// For selecting text on the page
+@mixin user-select($select) {
+ -webkit-user-select: $select;
+ -moz-user-select: $select;
+ -ms-user-select: $select;
+ -o-user-select: $select;
+ user-select: $select;
+}
+
+// Resize anything
+@mixin resizable($direction) {
+ resize: $direction; // Options: horizontal, vertical, both
+ overflow: auto; // Safari fix
+}
+
+// CSS3 Content Columns
+@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
+ -webkit-column-count: $columnCount;
+ -moz-column-count: $columnCount;
+ column-count: $columnCount;
+ -webkit-column-gap: $columnGap;
+ -moz-column-gap: $columnGap;
+ column-gap: $columnGap;
+}
+
+// Optional hyphenation
+@mixin hyphens($mode: auto) {
+ word-wrap: break-word;
+ -webkit-hyphens: $mode;
+ -moz-hyphens: $mode;
+ -ms-hyphens: $mode;
+ -o-hyphens: $mode;
+ hyphens: $mode;
+}
+
+// Opacity
+@mixin opacity($opacity) {
+ opacity: $opacity / 100;
+ filter: alpha(opacity=$opacity);
+}
+
+
+
+// BACKGROUNDS
+// --------------------------------------------------
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+@mixin translucent-background($color: $white, $alpha: 1) {
+ background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+}
+
+@mixin translucent-border($color: $white, $alpha: 1) {
+ border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+ @include background-clip(padding-box);
+}
+
+// Gradient Bar Colors for buttons and alerts
+@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+ color: $textColor;
+ text-shadow: $textShadow;
+ @include gradient-vertical($primaryColor, $secondaryColor);
+ border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
+}
+
+// Gradients
+@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
+ background-color: $endColor;
+ background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
+ background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=1); // IE9 and down
+}
+@mixin gradient-vertical($startColor: #555, $endColor: #333) {
+ background-color: mix($startColor, $endColor, 62.5%);
+ background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
+ background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=0); // IE9 and down
+}
+@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
+ background-color: $endColor;
+ background-repeat: repeat-x;
+ background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
+ background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
+ background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
+}
+@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+ background-color: mix($midColor, $endColor, 80%);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to(<