pax_global_header 0000666 0000000 0000000 00000000064 13022074543 0014512 g ustar 00root root 0000000 0000000 52 comment=43c9d9e24d62cd695a3699ddcc98b1fcb6765914
toolkit-2.10.2/ 0000775 0000000 0000000 00000000000 13022074543 0013261 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/.bump.js 0000664 0000000 0000000 00000002506 13022074543 0014643 0 ustar 00root root 0000000 0000000 'use strict';
var path = require('path'),
fs = require('fs'),
semver = require('semver'),
exec = require('child_process').execSync,
args = require('yargs').argv;
var pkg = require('./package.json'),
ruby = fs.readFileSync('./lib/toolkit.rb').toString();
var rubyString,
date = new Date().toISOString();
var version = pkg.version;
if (exec('git status --porcelain').toString() !== '') {
console.error('Working dirty. Please commit before trying again');
process.exit(1);
}
version = {
major: semver.major(version),
minor: semver.minor(version),
patch: semver.patch(version)
};
if (args.major) {
version = `${version.major + 1}.0.0`;
}
else if (args.minor) {
version = `${version.major}.${version.minor + 1}.0`;
}
else if (args.patch) {
version = `${version.major}.${version.minor}.${version.patch + 1}`;
}
else {
version = `${version.major}.${version.minor}.${version.patch}`;
}
date = date.substring(0, date.indexOf('T'));
rubyString = `module Toolkit
VERSION = "${version}"
DATE = "${date}"
end`;
ruby = ruby.substring(0, ruby.indexOf('module Toolkit')) + rubyString;
pkg.version = version;
fs.writeFileSync('./lib/toolkit.rb', ruby + '\n');
fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2) + '\n');
exec(`git commit -am "Release v${version}"`);
exec(`git tag v${version}`);
toolkit-2.10.2/.bundle/ 0000775 0000000 0000000 00000000000 13022074543 0014610 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/.bundle/config 0000664 0000000 0000000 00000000070 13022074543 0015775 0 ustar 00root root 0000000 0000000 ---
BUNDLE_PATH: vendor
BUNDLE_DISABLE_SHARED_GEMS: '1'
toolkit-2.10.2/.editorconfig 0000664 0000000 0000000 00000000637 13022074543 0015744 0 ustar 00root root 0000000 0000000 # EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
toolkit-2.10.2/.gembuild.js 0000664 0000000 0000000 00000000575 13022074543 0015474 0 ustar 00root root 0000000 0000000 'use strict';
var exec = require('child_process').execSync,
version = require('./package.json').version;
var commands = [
'gem build toolkit.gemspec',
`gem push toolkit-${version}.gem`,
`rm toolkit-${version}.gem`
];
commands.forEach(command => {
try {
exec(command);
}
catch (e) {
console.error(e.message);
process.exit(1);
}
});
process.exit();
toolkit-2.10.2/.gitignore 0000664 0000000 0000000 00000000153 13022074543 0015250 0 ustar 00root root 0000000 0000000 .DS_Store
*.sassc
*.scssc
*.gem
example/css/
Gemfile.lock
/tests/output/
/vendor
/node_modules
/tests/diff
toolkit-2.10.2/.rvmrc 0000664 0000000 0000000 00000000037 13022074543 0014413 0 ustar 00root root 0000000 0000000 rvm ruby-1.9.2@toolkit --create toolkit-2.10.2/.travis.yml 0000664 0000000 0000000 00000000177 13022074543 0015377 0 ustar 00root root 0000000 0000000 language: ruby
bundler_args: --without development
rvm:
- 1.8.7
- 2.0.0
gemfile:
- Gemfile
branches:
only:
- 2.x.x
toolkit-2.10.2/CHANGELOG.md 0000664 0000000 0000000 00000010507 13022074543 0015075 0 ustar 00root root 0000000 0000000 # Toolkit
## v2.9.0
### March 4, 2015
* **New** Added `mixin-dryer` mixin to make writing your static mixin from [DRY-ing Out your Sass Mixins](http://alistapart.com/article/dry-ing-out-your-sass-mixins) much easier to do, all in line!
## v2.8.0
* **New** Added a CSS Reset!
* **Change** Updated Kickstart's box sizing definition to play nicer with other things.
* **Change** Added support for `woff2` to the `font-face` mixin
## v2.7.0
* **New** Added the `set-multiple` mixin to allow multiple properties to be set to the same value (thanks [@Robovirtuoso](https://github.com/Robovirtuoso)
## v2.0.0.alpha.7
### January 29, 2014
* **Fix** Intrinsic Ratio variable names, cause `$ration` !== `$ratio`
* **New** Bulletproof Vertical Center based on [Sebastian Keström's `transform`](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/) technique
## v2.0.0.alpha.3
### January 14, 2014
* **Fix** Was calling `colour` mixins instead of `color` mixins. Fixed.
## v2.0.0.alpha.2
### January 14, 2014
* **Change** No dynamic mixin (turns out you can't do that)
* **Fix** All of the setting stuff
## v2.0.0.alpha.1
### January 14, 2014
* **New** Sass 3.3.0 compatible (required)
* **New** No Compass requirements
* **New** Includes no CSS
* **New** Kickstart partial (`toolkit/kickstart`) available to add universal box sizing and fluid images and videos
* **Change** Clearfix mixin no longer chooses the correct clearfix, only modern clearfix
* **Change** No English spelling of `colour`, only `color`
* **New** **Change** `enable-ligatures` mixin now takes parameter `$extend` to use extend using the `%enable-ligatures` selector
* **New** **Change** If `single-transition` mixin doesn't exist, will write the standard and `-webkit` properties based on [Can I Use](http://caniuse.com/css-transitions) current versions
* **Change** Parameter order for `intrinsic-ratio` and `ir` mixins changed from `$ratio, $width, $elements, $extend, $direction` to `$ratio, $width, $elements, $direction, $extend`
* **New** **Change** `enhance-with` and `degrade-from` mixins now take lists for the `$features` (changed from `$feature`) to allow for multiple selectors. Lists should be space separated, or wrapped in `()` for comma separated
* **Deprecation** `replace-text-pe`, `svg-background`, `retina-background`, `sprite-map-generator`, and support classes have been removed.
* **Change** `viewport` mixin no longer chooses the correct prefix, will add `-webkit`, `-moz`, and `-ms` prefixes
* **Deprecation** Removed all templates
* **New** **Change** Settings are now stored in a single place. If including individual partials, `toolkit/settings` must also be imported
* **New** **Change** Settings are now stored in a map. Use mixin `toolkit-change($setting, $value)` to change a value and `toolkit-reset($setting)` to reset a value. Settings and defaults are as follows:
* **clearfix extend**: `false`
* **color stack amounts**: `25% 50% 75% 85% 90%`
* **tint color**: `#fff`
* **shade color**: `#000`
* **color scale shades**: `6`
* **extend ligatures**: `false`
* **fade in duration**: `1s`
* **fade in loading class**: `'.wf-loading'`
* **intrinsic ratio**: `16/9`
* **intrinsic ratio width**: `100%`
* **intrinsic ratio elements**: `> *`
* **intrinsic ratio direction**: `top`
* **intrinsic ratio extend**: `false` (**Change**, was `true`)
* **nested context contexts**: `100%`
* **nested context position**: `left`
* **degrade from javascript**: `false` (**New**, for use with `degrade-from`)
* **triangle color**: `#000`
* **triangle height**: `1em`
* **triangle width**: `1em`
* **triangle angle**: `0`
* **Change** Element Query mixin now takes a map `(.small: 400px, .medium: 700px)` instead of a list. Map key is `selector` map value is `query`. Now works with or without [Breakpoint](https://github.com/team-sass/breakpoint). If using without Breakpoint, query should be full string (minus `@media`)
* **Deprecation** Removed dependencies on Color Schemer, Singularity, and Sassy Strings
* **Deprecation** Removed Border Box
* **Deprecation** Removed Box Sizing
* **Deprecation** Removed Carousel
* **Deprecation** Removed Children of IE
* **Deprecation** Removed Equal Height Columns
* **Deprecation** Removed Fluid Media
* **Deprecation** Removed Vertical Center
* **Deprecation** Removed Progressive Enhancement Text Replace, Retina Background, and SVG Background
toolkit-2.10.2/CONTRIBUTING.md 0000664 0000000 0000000 00000006447 13022074543 0015525 0 ustar 00root root 0000000 0000000 ## Contributing to Toolkit
We love contributors! Yes we do! If you would like to contribute to Toolkit, please follow the following guidelines:
* Please ensure you have [EditorConfig](http://editorconfig.org/) installed in your editor of choice to ensure our condig standards are being followed.
* Where possible, we would prefer to stay away from Ruby functionality. If something can be done entirely within Sass, it should be.
* With limited exception, such as where Toolkit expands upon the functionality in a way that is not contribute-able back upstream, additions should non mimic functionality provided by Compass, other [@import](https://github.com/at-import) extensions, or any included Compass extension. Currently included Compass extensions are [Breakpoint](https://github.com/at-import/breakpoint), [Singularity](https://github.com/at-import/Singularity), [Color Schemer](https://github.com/at-import/color-schemer), and [Sassy Strings](https://github.com/Snugug/Sassy-Strings).
* Toolkit is primarily a place for functionality, not components or UI elements.
* All functions and mixins that have defaulted arguments *must* provide globally configurable [settings](https://github.com/at-import/toolkit/blob/2.x.x/stylesheets/toolkit/_settings.scss) for their defaults instead of only having them inside the mixin definition. This provides users with a great deal more flexibility and makes the tools in Toolkit more useful.
* When writing mixins that have no required input arguments, such as the [Clearfix](https://github.com/at-import/toolkit/blob/2.x.x/stylesheets/toolkit/_clearfix.scss) mixin, also include sensible namespaced silent selectors to extend from, where applicable. When doing so, be sure to include an option in the mixin for using the extended version instead of writing the output of the mixin. This argument should be called `$extend` and, where appropriate, be defaulted to `true`.
* All mixins, where appropriate, should follow the [DRY mixin pattern](http://alistapart.com/article/dry-ing-out-your-sass-mixins). And example of this in practice is the [Intrinsic Ratio](https://github.com/at-import/toolkit/blob/2.x.x/stylesheets/toolkit/_intrinsic-ratio.scss) mixin.
* All new features require documentation in the README file in order for them to be considered for inclusion. Documentation should follow the existing documentation standard as used in the README file.
* All new features require passing tests to be written. Features that break existing test or fail or provide their own tests will not be considered.
* Each individual feature you would like to add, or bug you would like to squash, should be an individual pull request. Each pull request should be from an individual feature branch to either the latest stable or development branch. **The current *stable* branch is 1.x.x. The current *development* branch is 2.x.x**. Contributions that are not in the form of a pull request will not be considered. If your pull request does not apply cleanly we will ask you to fix that before we will look into pulling it in. We may ask you to update or make changes to the code you've submitted, please don't take this the wrong way. If a pull request smells (such as if a large amount of code is all within a single commit, or the coding standards aren't in line with core Toolkit) we may ask you to rewrite your commit.
toolkit-2.10.2/Gemfile 0000664 0000000 0000000 00000000325 13022074543 0014554 0 ustar 00root root 0000000 0000000 # Pull gems from RubyGems
source 'https://rubygems.org'
gem 'sass', "~>3.3"
gem 'compass', "~> 1.0"
group :test do
gem 'rake'
gem "diffy", "~> 3.0.1"
gem "colorize", "~> 0.6.0"
end toolkit-2.10.2/Gemfile.lock 0000664 0000000 0000000 00000001275 13022074543 0015510 0 ustar 00root root 0000000 0000000 GEM
remote: https://rubygems.org/
specs:
chunky_png (1.3.4)
colorize (0.6.0)
compass (1.0.3)
chunky_png (~> 1.2)
compass-core (~> 1.0.2)
compass-import-once (~> 1.0.5)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
sass (>= 3.3.13, < 3.5)
compass-core (1.0.3)
multi_json (~> 1.0)
sass (>= 3.3.0, < 3.5)
compass-import-once (1.0.5)
sass (>= 3.2, < 3.5)
diffy (3.0.7)
ffi (1.9.8)
multi_json (1.11.0)
rake (10.4.2)
rb-fsevent (0.9.5)
rb-inotify (0.9.5)
ffi (>= 0.5.0)
sass (3.4.14)
PLATFORMS
ruby
DEPENDENCIES
colorize (~> 0.6.0)
compass (~> 1.0)
diffy (~> 3.0.1)
rake
sass (~> 3.3)
toolkit-2.10.2/LICENSE.txt 0000664 0000000 0000000 00000002071 13022074543 0015104 0 ustar 00root root 0000000 0000000 Toolkit License:
Copyright (C) 2011-2014 by Sam Richard
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.
toolkit-2.10.2/README.md 0000664 0000000 0000000 00000062707 13022074543 0014554 0 ustar 00root root 0000000 0000000 # Toolkit [](http://badge.fury.io/rb/toolkit) [](https://travis-ci.org/Team-Sass/toolkit)
Think of Toolkit as your swiss army knife for modern design and development. Those little bits and bobs that make your life easy and you want to reuse throughout projects but never really had a place to put? They're here, and they're designed to make your life happy. Toolkit is broken out into individual pieces, so grab what you want, grab what you need, or grab the lot; the choice is yours.
## Table of Contents
1. [Basics](#basics)
* [Requirements](#requirements)
* [Installation](#installation)
* [Changing Settings](#changing-settings)
* [Extends](#extends)
1. [Art](#art)
1. [Clearfix](#clearfix)
1. [Colors](#colors)
* [Tint and Shade](#tint-and-shade)
* [Luma](#luma)
* [Color Stacks](#color-stacks)
* [Color Scales](#color-scales)
1. [DRY Mixins](#dry-mixins)
1. [Font Helpers](#font-helpers)
* [Enable Ligatures](#enable-ligatures)
* [Font Face](#font-face)
* [Icon Font](#icon-font)
* [Content Fade In](#content-fade-in)
1. [Intrinsic Ratios](#intrinsic-ratios)
1. [Kickstart](#kickstart)
1. [Nested Context](#nested-context)
1. [Parallax](#parallax)
1. [Reset](#reset)
1. [RTL](#rtl)
1. [Settings](#settings)
1. [Triangles](#triangles)
1. [Center](#center)
* [Vertical Center](#vertical-center)
* [Horizontal Center](#horizontal-center)
* [Absolute Center](#absolute-center)
1. [Viewport](#viewport)
1. [Underline](#underline)
1. [Target](#target)
1. [Set Multiple](#set-multiple)
## Basics
Working with, and understanding how, Toolkit is fairly easy as long as you keep the following in mind:
### Requirements
Toolkit is a Sass plugin available both as a Compass Extension or as Bower Package. To use, make sure you have [Sass](http://sass-lang.com/install) installed. Any Sass compiler that is feature-compatible with Sass 3.3 can be used with Toolkit, so feel free to use whatever you feel is best!
### Installation
To install as a Compass extension, add the following to your Gemfile:
```ruby
gem 'toolkit', '~>2.0'
```
Then, add `require 'toolkit'` to your `config.rb` file and `@import "toolkit";` to your Sass file.
To install as a Bower package, run the following:
```bash
bower install sass-toolkit --save-dev
```
Even as an [Eyeglass](https://github.com/sass-eyeglass/eyeglass) module!
```bash
npm install sass-toolkit --save-dev
```
### Changing Settings
All of Toolkit's settings can be changed with a simple mixin. Whenever you would like to change a default, include the following mixin, and from then on out, whenever that default is needed, the value you've changed it to will be used:
```sass
@include toolkit-set('setting', value);
```
### Extends
Where appropriate, Toolkit mixins provide an `$extend` option to allow the shared output of a mixin to be set to an extendable class instead of duplicating the properties. Toolkit is super smart about this and will create the extendable class in place where you first call the mixin, allowing you to not worry about blowing up your cascade if you use it. All mixins that have an `extend` setting can have a portion of their mixin extended. By default, mixins won't extend, but you can change that by changing their global setting or by passing `$extend: true` to the mixin.
### Documentation Format
Each mixin/function definition looks like the following:
#### @include clearfix([$extend])
**Settings**
- `'clearfix extend': false`
Mixins start with `@include`, functions don't. Variables in [brackets] are optional. Settings are global setting variables that provide the defaults for optional variables, with their default.
## Art
Create pixel art using [CSS Box Shadows](http://sassmeister.com/gist/cf4a1eff8326585d66e6)! Simply write a string with `x` for where you'd like a pixel, and ` ` where you wouldn't. When you want a new line, simply write `\n`. The "pixel" size is the size of one pixel and doesn't have to be `px`. Border radius will apply to each "pixel", as will color.
#### @include art($art[, $px-size, $color, $radius])
- `'art pixel size': 1px`
- `'art color': black`
- `'art border radius': 0%`
## Clearfix
Use a clearfix to ensure a parent element that contains floated children encompasses its children. Toolkit's clearfix is a [modern clearfix](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php).
#### @include clearfix([$extend])
**Settings**
- `'clearfix extend': false`
## Colors
Sass comes with a [slew of great color functions](http://sass-lang.com/documentation/Sass/Script/Functions.html), made even better by [color schemer](https://github.com/team-sass/color-schemer), but there are a few handy things missing to make working with groups of colors easier
### Tint and Shade
While Sass's built in `lighten` and `darken` functions are great if you're looking not to change the base color, they aren't what designers think of when they think of lightening or darkening a color. The mental model for those is actually mixing white or black to lighten or darken a color. So, like so many others, we have a `tint` and `shade` function that will do just that. Simply pass the color and the amount you want. For instance, if you wanted a red that was 25% lighter or darker than the standard CSS red, you'd do one of the followings:
#### @include tint($color, $amount)
**Settings**
- `'tint color': #fff`
#### @include shade($color, $amount)
**Settings**
- `'shade color': #000`
### Luma
[Luma](http://en.wikipedia.org/wiki/Luminance_(video)) represented the brightness in an image (the "black-and-white" or achromatic portion of the image). As human vision is much more sensitive to luminance ("black and white") than it is to chromatic differences ("colors"), luma provides an effective means of determining how a human will react to the relative brightness of a color. The Luma functions are based on the conversion to the [YIQ](http://en.wikipedia.org/wiki/YIQ) color space, with Y being luma (also, the only component used in black-and-white televisions). The `luma` function provided will return the luma value for a color, and the additional helpers can be used for common tasks related to luma, such as if one color's luma is greater than and equal to or less than or equal to a second colors, and the difference between two colors' luma.
#### @include luma($color)
#### @include luma-gte($color1, $color2)
#### @include luma-lte($color1, $color2)
#### @include luma-diff($color1, $color2)
### Color Stacks
One technique for working with color that is very useful is to create color stacks that get either lighter or darker as they go, allowing me to easily create full color pallets with only a handful of base colors and then only needing to remember those base colors. These are called color stacks, and making them with Toolkit is super easy. A sample color stack, if written by hand, may look something like the following:
```scss
$red: red, #ff3f3f, #ff7f7f, #ffbfbf, #ffd8d8, #fff2f2;
```
This is a color stack for red that gets tinted as it goes (25%, 50%, 75%, 85%, 90%). To make figuring these out easier, there is the `color-stack` function that takes two required parameters, the main color you want to use and the secondary color you want to use (in the case of shading red, the main color would be red and the secondary color would be black), and a variable number of arguments of what percent you want them mixed. Tint stacks, shade stacks, and tint to shade stacks are also available.
#### @include color-shade($main, $secondary [, $amounts...])
**Settings**
- `'color stack amounts': 25% 50% 75% 85% 90%`
#### @include tint-stack($main [, $amounts...])
**Settings**
- `'tint color': #fff`
- `'color stack amounts': 25% 50% 75% 85% 90%`
#### @include shade-stack($main [, $amounts...])
**Settings**
- `'shade color': #000`
- `'color stack amounts': 25% 50% 75% 85% 90%`
#### @include tint-shade-stack($main [, $amounts...])
**Settings**
- `'tint color': 75% 50% 25%`
- `'shade color': #000`
- `'tint shade amounts': 75% 50% 25%`
### Color Scales
Color scales allow you to step from one color to another in even steps. Color scale will scale your first color to your second color evenly by hue, saturation, lightness, and alpha. Hue will take the fastest path around the color wheel
#### @include color-scale($main, $secondary [, $steps...])
**Settings**
- `'color scale steps': 6`
## DRY Mixins
The pattern that inspired the [A List Apart](http://alistapart.com/) article [DRY-ing Out Your Sass Mixins](http://alistapart.com/article/dry-ing-out-your-sass-mixins), now available for you to use in your projects! The full writeup on the why can be found in the article, and examples can be found all throughout Toolkit.
#### @include dynamic-extend($id) { @content }
The `dynamic-extend` mixin is the core mixin for dynamically creating placeholder selectors and extending them directly.
#### @include mixin-dryer($id [,$extend: true]) { @content }
The `mixin-dryer` mixin is a one-stop-shop mixin for working with the whole pattern. It wraps the contents of the **static** portion of the pattern into a single mixin. If you don't think someone would want to use the static mixin on its own, simply drop `mixin-dryer` into your core mixin and you're good to go! The button example from A List Apart can be written with this mixin as follows:
```scss
@mixin button($color, $extend: true) {
background-color: $color;
border-color: mix(black, $color, 25%);
&:hover {
background-color: mix(black, $color, 15%);
border-color: mix($black, $color, 40%);
}
@include mixin-dryer('button', $extend) {
border: 1px solid;
border-radius: 5px;
padding: .25em .5em;
&:hover {
cursor: pointer;
}
}
}
```
## Font Helpers
Web fonts are absolutely awesome, but working with them can be a bit tricky. Ligatures are super powerful and make fonts that that support them even more beautiful, but aren't on by default. Webfonts are awesome, but you need to wait for them to download and that can cause a Flash of Unstyled Text, which can be jarring and unpleasant. Toolkit provides some tools to ease this.
### Enable Ligatures
A simple mixin to enable ligatures
#### @include enable-ligatures([$extend])
**Settings**
- `'ligature extend': false`
### Font Face
A mixin to make writing `@font-face` declarations easy. `$files` should be a map where the key is the file extensions and the value is the path. If using Compass, paths should be relative to your font directory (`fonts_dir` in `config.rb`). If Compass is available, this mixin can inline the `woff` file, thus caching it with your CSS
#### @include font-face($name, $files [, $weight, $style, $inline-woff])
**Settings**
- `'font face weight': normal`
- `'font face style': normal`
- `'font face inline woff': false`
### Icon Font
A mixin for applying a core set of styling for icon fonts, based on styling form fonts generated by [Icomoon](http://icomoon.io). Setting `$speak: false` will optionally apply the [`speak: none`](http://webdesign.about.com/od/styleproperties/p/blspspeak.htm) property.
#### @include icon-font($font-stack, [, $speak, $extend])
**Settings**
- `'icon font speak': false`
- `'icon font extend': false`
### Content Fade In
One of the big challenges of working with webfonts is the Flash of Unstyled Text. It happens when webfonts get applied after content is already rendered on the page, usually causing a jarring jump when they are. To help combat this, Google and Typekit teamed up to create [WebFont Loader](https://developers.google.com/fonts/docs/webfont_loader), a JavaScript library to add Font Events that you can hook in to using CSS and JavaScript to know whether your webfonts are loading, have successfully loaded, or have failed to load. As [Typekit](http://help.typekit.com/customer/portal/articles/6852) suggests, these can be utilized to more effectively take control over your staying and prevent FOUT. The `content-fade-in` mixin will set your content to a 0 opacity (allowing the page to paint correctly even while it's not visible) and when a loading class has been removed, will fade your content in to an opacity of 1.
#### @include content-fade-in([$duration, $loading, $extend])
**Settings**
- `'fade in duration': 1s`
- `'fade in loading class': '.wf-loading'`
- `'fade in extend': false`
## Intrinsic Ratios
What is an intrinsic ratio you may ask? Well Thierry Koblentz wrote a great [A List Apart article](http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/) explaining it all in great detail; go read it. In a nutshell, however, it's a way to force any child elements to fluidly scale at a given ratio, including videos and frames, making awesome responsive happiness. If you just want to change the ratio, use the `intrinsic-ratio-ratio` mixin.
#### @include intrinsic-ratio([$ratio, $width, $elements, $position, $extend])
#### @include ir([$ratio, $width, $elements, $position, $extend])
**Settings**
- `'intrinsic ratio': 16/9`
- `'intrinsic ratio width': 100%`
- `'intrinsic ratio elements': '> *'`
- `'intrinsic ratio position': top`
- `'intrinsic ratio extend': false`
#### @include intrinsic-ratio-ratio([$ratio, $width, $position])
#### @include ir-ratio([$ratio, $width, $position])
**Settings**
- `'intrinsic ratio': 16/9`
- `'intrinsic ratio width': 100%`
- `'intrinsic ratio position': top`
## Kickstart
Importing the kickstart partial with `@import "toolkit/kickstart";` will add the following common styles to your project:
```scss
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
embed,
img,
object,
video {
max-width: 100%;
height: auto;
}
```
## Nested Context
Sometimes we may be inside of an element but need something the width of its parent.
This is easy with fixed widths because then we can just make the child the width we want it but percentages change with each new context. With just a little bit of math we can pretty easily figure out what context we are in and it is condensed in the `nested-context()` function. Simply write how wide your current container is and it will figure out how wide it’s parent is like `nested-context(30%)` will give you a percentage to match the parent. Sometimes you are multiple levels deep and in that case, you can just list the levels `nested-context(80% 60% 33%)` and result in a percentage matching that of the 3rd parent up. See the [nested context](http://codepen.io/scottkellum/pen/vGuaI) and [centered nested context](http://codepen.io/scottkellum/pen/mwlGe) examples.
#### nested-context([$contexts])
**Settings**
- `'nested context contexts': 100%`
#### @include nested-context([$contexts, $position])
**Settings**
- `'nested context contexts': 100%`
- `'nested context position': left`
## Parallax
The concept of the parallax effect is simple, things closer to the viewer move faster while things further away move slower. Leveraging 3D transforms, this effect can be implemented without any JavaScript. You need to initialize your parallax container before being able to parallax an item. By default iOS parallax is on but setting it to false will turn on smooth scrolling within that element and no parallax effect will be shown.
The parallax mixin puts elements into real perspective and scales them back down to 100% so images and text will not have any distortion. Items will shift both vertically and horizontally in layouts to achieve the appropriate perspective. With `@include init()`, if `$element: this`, the current element will be initialized; if `$element: '.class'|'#id'`, the respective element will be placed at the root of the stylesheet (not nested under the current selector). `@include init()` can be called from the root of your stylesheet.
#### @include parallax-init([$perspective, $element, $parallax-ios])
**Settings**
- `'parallax perspective': 1`
- `'parallax element': 'body'`
- `'parallax ios': true`
#### @include parallax([$distance, $perspective])
**Settings**
- `'parallax perspective': 1`
- `'parallax distance': 0`
## Reset
Importing the reset partial with `@import "toolkit/reset";` will add a CSS Reset in based on work done by [Nicholas Gallagher and Jonathan Neal](http://necolas.github.io/normalize.css/), [Richard Clark](http://richclarkdesign.com), and [Tim Murtaugh](http://monkeydo.biz/), and some other things that are useful. Also includes the [kickstart](#kickstart).
## RTL
Quickly and easily write your left-to-right and right-to-left properties with one mixin! Works for `*-left` and `*-right` properties, as well as shorthand syntaxes.
#### @include rtl($property, $value)
## Settings
While the standard `$variable: value !default` for allowing users the ability to change defaults in a system is okay, it can become cumbersome quickly. Cascading user changes is hard, doesn't always work as expected, and for large systems all of those settings pollute the global namespace. These setting functions and mixins make it easy to work with setting in the same way that [Toolkit does](#changing-settings). We're even dogfooding here, using these internally to work with Toolkit's settings! And none of our tests broke when we made the transition!
### User Setting Exists
Used to see if a user has set a setting. Will return `true` or `false`.
#### user-setting-exists($setting)
Pass in a comma separated list of user settings you would like to test. Will return a map where the keys are the settings and the values are their respective state.
#### user-setting-exists-multiple($settings...)
### Setting Get
Used to retrieve a setting. Will attempt to find the user setting first, and if a user hasn't set a value for that setting, will use the default setting. Returns the value of the setting
#### setting-get($setting)
Pass in a comma separated list of user settings you would like to retrieve. Will return a map where the keys are the settings and the values are their respective values.
#### setting-get-multiple($setting...)
### Setting Set
Used to set a setting. Returns `true`. The function and the mixins take the same input.
#### setting-set($setting, $value)
#### @include setting-set($setting, $value)
#### @include setting-change($setting, $value)
Used to set multiple settings at once. The input should be a map where the key is the setting and the value is the value of said setting.
#### setting-set-multiple($settings)
#### @include setting-set-multiple($settings)
#### @include setting-change-multiple($settings)
### Setting Clear
Used to clear a single user setting. Will return `true`. The function and the mixins take the same input.
#### setting-clear($setting)
#### @include setting-clear($setting)
Pass in a comma separated list of user settings you would like to clear. Will return `true`. The function and the mixins take the same input.
#### setting-clear-multiple($settings...)
#### @include setting-clear-multiple($settings...)
Used to clear all user settings. Will return `true`. The function and the mixins take the same input.
#### setting-reset()
#### @include setting-reset()
### Setting Pick
The most common usecase of actually needing to determine the setting to use is within a custom function or mixin. The recommended way of doing this is to provide a default value of `null` for arguments that are controlled by settings, then check to see if that value is `null` and, if not, get the correct setting. The setting pick functions do this.
#### setting-pick($setting, $input)
Used to pick multiple settings at once. The input should be a map where the key is the setting and the value is the input to be tested. Will return a map where the keys are the setting and the value is the determined value.
#### setting-pick-multiple($settings)
```scss
@mixin button($size, $color: null) {
$color: setting-pick('button color', $color);
// ... rest of stuff goes here
}
```
### Setting Defaults
Congratulations! You now have an API for working with setting that you didn't need to write! Awesome! But how do you actually make global settings to use? Well, simple. Create a map of your settings, the keys being the setting name, the values being the value of the setting, and merge it into the `$GlobalSettings` variable. This will put them in the global setting namespace. If you would like your variables namespaced, it's recommended that you write wrapper functions for the setting functions for your plugin.
```scss
@import "toolkit";
$MyAwesomePluginSettings: (
'button color': #b4d455,
'mug fill color': #c0ffee
);
$GlobalSettings: map-merge($GlobalSettings, $MyAwesomePluginSettings);
// ... The rest of your awesome plugin stuff here
```
## Triangles
You love em! Triangles! Now create them using just CSS! Turn any element or pseudo element into a triangle just by using the `@include triangle;`. It's perfect for flags, speech bubbles, and arrows.
Width and height just stretch the triangle to match a width or height. You can use any units you want although percentages don't work so well. Angle is where the point of the triangle is drawn opposing one side. This is a little diffucult to explain, so here is a gif. If the width and height are not uniform, then the angle will be stretched to match the triangles proportions. The mixin also supports keywords like `top`, `top right`, `right` and so on for the angle. The triangle will point in the direction you give it.
#### @include triangle([$color, $height, $width, $angle])
**Settings**
- `'triangle color': #000`
- `'triangle height': 1em`
- `'triangle width': 1em`
- `'triangle angle': 0`
## Center
> We can do [insert seemingly impossible thing here] but we can't even center with CSS
>
> *Unfunny people on the Internet*
Yes, Flexbox will give us a native way to center things when it finally arrives, but until then, and for all of the browsers that don't support Flexbox, a few handy mixins for centering vertically, horizontally, or both!
### Vertical Center
Vertical center anything, literally anything, with the `vertical-center` mixin. Based on [Sebastian Ekström’s vertical align technique](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/).
#### @include vertical-center([$midpoint, $extend])
**Settings**
- `'vertical midpoint': 50%`
- `'vertical extend': false`
### Horizontal Center
Horizontal center anything, literally anything, with the `horizontal-center` mixin. Based on [Sebastian Ekström’s vertical align technique](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/) for fixed position items and good 'ol `margin: 0 auto` for everything else.
#### @include horizontal-center([$midpoint, $fixed, $extend])
**Settings**
- `'horizontal fixed': false` (fixed position item)
- `'horizontal extend': false`
- `'horizontal midpoint': 0%`
- `'horizontal fixed midpoint': 50%` (midpoint for fixed position item)
### Absolute Center
I want it in the middle. The absolute middle. The middle of the middle of the middle. The absolute middle of the middle of the middle of the middle.
#### @include absolute-center([$vertical, $horizontal, $fixed, $extend])
**Settings**
- `'absolute center fixed': false` (fixed position item)
- `'absolute center extend': false`
- `'absolute center vertical midpoint': 50%`
- `'absolute center fixed horizontal': 0%`
- `'absolute center fixed horizontal midpoint': 50%` (horizontal midpoint for fixed position item)
## Viewport
Currently in the Draft stage, but being implemented by Microsoft is the CSS directive [`@viewport`](http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule). This mixin simply provides prefixing.
#### @include viewport { @content }
## Underline
Create beautiful underlines [à la Medium](https://medium.com/designing-medium/7c03a9274f9)! Now with the ability to clear descenders!
#### @include underline([$background, $color, $clear-descenders, $distance, $width])
**Settings**
- `'underline background': #f00`
- `'underline color': #00e`
- `'underline clear descenders': true`
- `'underline distance': 1` (unitless number)
- `'underline width': 2` (unitless number)
- `'underline extend': false`
## Target
Creates specially formatted comments for use with [gulp-css-target](https://github.com/snugug/gulp-css-target)
#### @include target($target) { @content }
## Set Multiple
Applies the same property to multiple values.
#### @include set-multiple($value, $property-list);
```scss
.box {
@include set-multiple(50%, width height);
}
```
```css
.box {
width: 50%;
height: 50%;
}
```
## License
Copyright (C) 2011-2015 by Sam Richard
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.
toolkit-2.10.2/Rakefile 0000664 0000000 0000000 00000001131 13022074543 0014722 0 ustar 00root root 0000000 0000000 task :default => [:test]
task :test do
require 'fileutils'
Dir.chdir('tests') do
output_dir = 'output'
FileUtils.mkdir_p output_dir
ruby '.unit_tests.rb'
FileUtils.rm_rf output_dir
end
end
desc 'Compile baseline CSS'
task :compile do
require 'compass'
require 'compass/exec'
Dir.chdir('tests') do
Compass.add_configuration 'config.rb'
Compass.configuration.project_path = Dir.pwd
# Compile into baseline directory instead of test output directory
Compass.configuration.css_dir = 'controls'
Compass.compiler.clean!
Compass.compiler.run
end
end
toolkit-2.10.2/bower.json 0000664 0000000 0000000 00000000645 13022074543 0015277 0 ustar 00root root 0000000 0000000 {
"name": "sass-toolkit",
"description": "Toolkit full of bits and bobs of awesome aimed at assisting in advanced styling with Sass",
"version": "2.9.0",
"main": "stylesheets/_toolkit.scss",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"tests",
"vendor",
"working",
"Gemfile",
"Gemfile.lock",
"Rakefile",
"lib",
"*.gemspec"
],
"dependencies": {
}
}
toolkit-2.10.2/eyeglass-exports.js 0000664 0000000 0000000 00000000212 13022074543 0017130 0 ustar 00root root 0000000 0000000 var path = require('path');
module.exports = function(eyeglass, sass) {
return {
sassDir: path.join(__dirname, 'stylesheets')
}
} toolkit-2.10.2/lib/ 0000775 0000000 0000000 00000000000 13022074543 0014027 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/lib/toolkit.rb 0000664 0000000 0000000 00000000644 13022074543 0016045 0 ustar 00root root 0000000 0000000 base_directory = File.expand_path(File.join(File.dirname(__FILE__), '..'))
toolkit_stylesheets_path = File.join(base_directory, 'stylesheets')
if (defined? Compass)
Compass::Frameworks.register(
"toolkit",
:path => base_directory
)
else
ENV["SASS_PATH"] = [ENV["SASS_PATH"], toolkit_stylesheets_path].compact.join(File::PATH_SEPARATOR)
end
module Toolkit
VERSION = "2.10.2"
DATE = "2016-12-07"
end
toolkit-2.10.2/package.json 0000664 0000000 0000000 00000002145 13022074543 0015551 0 ustar 00root root 0000000 0000000 {
"name": "sass-toolkit",
"version": "2.10.2",
"description": "Think of Toolkit as your swiss army knife for modern design and development.",
"main": "stylesheets/_toolkit.scss",
"eyeglass": {
"needs": "^1.0.0",
"exports": "eyeglass-exports.js",
"name": "toolkit"
},
"devDependencies": {
"diff": "^1.2.1",
"fs-extra": "^0.14.0",
"glob": "^4.3.2",
"node-sass": "^3.0.0",
"semver": "^5.1.0",
"yargs": "^4.1.0"
},
"scripts": {
"test": "cd tests && node index.js",
"bump:major": "node .bump.js --major",
"bump:minor": "node .bump.js --minor",
"bump:patch": "node .bump.js --patch",
"publish": "node .gembuild.js && git push && git push origin --tags"
},
"repository": {
"type": "git",
"url": "https://github.com/at-import/toolkit.git"
},
"keywords": [
"sass",
"design",
"typography",
"fed",
"rwd",
"eyeglass-module",
"toolkit",
"design"
],
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/at-import/toolkit/issues"
},
"homepage": "https://github.com/at-import/toolkit"
}
toolkit-2.10.2/sache.json 0000664 0000000 0000000 00000000724 13022074543 0015242 0 ustar 00root root 0000000 0000000 {
"name": "Toolkit",
"description": "Think of Toolkit as your swiss army knife for Progressive Enhancement and Responsive Web Design. Those little bits and bobs that make your life easy and you want to reuse throughout projects but never really had a place to put? They're here, and they're designed to make your life happy.",
"tags": ["toolkit", "rwd", "clearfix", "colors", "dry", "fonts", "parallax", "rtl", "center", "underline", "ir", "intrinsic ratios"]
}
toolkit-2.10.2/stylesheets/ 0000775 0000000 0000000 00000000000 13022074543 0015635 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/stylesheets/_toolkit.scss 0000664 0000000 0000000 00000001137 13022074543 0020360 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Toolkit Settings
//////////////////////////////
@import "toolkit/settings";
@import "toolkit/placeholders";
//////////////////////////////
// Imports
//////////////////////////////
@import "toolkit/clearfix";
@import "toolkit/colors";
@import "toolkit/fonts";
@import "toolkit/intrinsic-ratio";
@import "toolkit/nested-context";
@import "toolkit/parallax";
@import "toolkit/rtl";
@import "toolkit/target";
@import "toolkit/triangle";
@import "toolkit/center";
@import "toolkit/viewport";
@import "toolkit/underline";
@import "toolkit/art";
@import "toolkit/set-multiple";
toolkit-2.10.2/stylesheets/toolkit/ 0000775 0000000 0000000 00000000000 13022074543 0017322 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/stylesheets/toolkit/_art.scss 0000664 0000000 0000000 00000001467 13022074543 0021154 0 ustar 00root root 0000000 0000000 //////////////////////////////
// ART!
// Inspired by http://elrumordelaluz.github.io/Pixelator/
//////////////////////////////
@mixin art($art, $px-size: null, $color: null, $radius: null) {
$px-size: if($px-size != null, $px-size, toolkit-get('art pixel size'));
$color: if($color != null, $color, toolkit-get('art color'));
$radius: if($radius != null, $radius, toolkit-get('art border radius'));
$build: ();
$y: $px-size;
$x: 0;
height: $px-size;
width: $px-size;
border-radius: $radius;
@for $i from 1 through str_length($art) {
$char: str_slice($art, $i, $i);
$x: $x + $px-size;
@if $char == 'n' {
$y: $y + $px-size;
$x: 0;
}
@else if $char != ' ' {
$border: $x $y 0 $color;
$build: append($build, $border, comma);
}
}
box-shadow: $build;
} toolkit-2.10.2/stylesheets/toolkit/_center.scss 0000664 0000000 0000000 00000010376 13022074543 0021645 0 ustar 00root root 0000000 0000000 // Vertically center anything, literally anything.
// http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
@mixin vertical-center($midpoint: null, $extend: null) {
$midpoint: if($midpoint != null, $midpoint, toolkit-get('vertical midpoint'));
$extend: if($extend != null, $extend, toolkit-get('vertical extend'));
top: $midpoint;
@include vertical-center-core($extend);
}
@mixin vertical-center-core($extend: null) {
$extend: if($extend != null, $extend, toolkit-get('vertical extend'));
@if $extend {
@include dynamic-extend('vertical center') {
@include vertical-center-core($extend: false);
}
}
@else {
position: relative;
@if mixin-exists(transform) {
@include transform(translateY(-50%));
} @else {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
}
//////////////////////////////
// Horizontal Center
//////////////////////////////
@mixin horizontal-center($midpoint: null, $fixed: null, $extend: null) {
$fixed: if($fixed != null, $fixed, toolkit-get('horizontal fixed'));
$extend: if($extend != null, $extend, toolkit-get('horizontal extend'));
@if $fixed {
$midpoint: if($midpoint != null, $midpoint, toolkit-get('horizontal fixed midpoint'));
}
@else {
$midpoint: if($midpoint != null, $midpoint, toolkit-get('horizontal midpoint'));
}
@if $midpoint != 0% {
left: $midpoint;
}
@include horizontal-center-core($fixed, $extend);
}
@mixin horizontal-center-core($fixed: null, $extend: null) {
$fixed: if($fixed != null, $fixed, toolkit-get('horizontal fixed'));
$extend: if($extend != null, $extend, toolkit-get('horizontal extend'));
@if $extend {
@if $fixed {
@include dynamic-extend('horizontal center fixed') {
@include horizontal-center-core(true, false);
}
}
@else {
@include dynamic-extend('horizontal center') {
@include horizontal-center-core(false, false);
}
}
}
@else {
@if $fixed {
position: fixed;
@if mixin-exists(transform) {
@include transform(translateX(-50%));
} @else {
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}
@else {
position: relative;
margin: 0 auto;
}
}
}
//////////////////////////////
// Absolute Center
//////////////////////////////
@mixin absolute-center($vertical: null, $horizontal: null, $fixed: null, $extend: null) {
$vertical: if($vertical != null, $vertical, toolkit-get('absolute center vertical midpoint'));
$fixed: if($fixed != null, $fixed, toolkit-get('absolute center fixed'));
$extend: if($extend != null, $extend, toolkit-get('absolute center extend'));
@if $fixed {
$horizontal: if($horizontal != null, $horizontal, toolkit-get('absolute center fixed horizontal midpoint'));
}
@else {
$horizontal: if($horizontal != null, $horizontal, toolkit-get('absolute center horizontal midpoint'));
}
top: $vertical;
@if $horizontal != 0% {
left: $horizontal;
}
@include absolute-center-core($fixed, $extend);
}
@mixin absolute-center-core($fixed: null, $extend: null) {
$fixed: if($fixed != null, $fixed, toolkit-get('absolute center fixed'));
$extend: if($extend != null, $extend, toolkit-get('absolute center extend'));
@if $extend {
@if $fixed {
@include dynamic-extend('absolute center fixed') {
@include absolute-center-core(true, false);
}
}
@else {
@include dynamic-extend('absolute center') {
@include absolute-center-core(false, false);
}
}
}
@else {
@if $fixed {
position: fixed;
@if mixin-exists(transform) {
@include transform(translateY(-50%) translateX(-50%));
} @else {
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
}
@else {
position: relative;
@if mixin-exists(transform) {
@include transform(translateY(-50%));
} @else {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
margin: 0 auto;
}
}
} toolkit-2.10.2/stylesheets/toolkit/_clearfix.scss 0000664 0000000 0000000 00000000615 13022074543 0022155 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Modern Clearfix Mixin
//////////////////////////////
@mixin clearfix($extend: null) {
$extend: if($extend != null, $extend, toolkit-get('clearfix extend'));
@if $extend == true {
@include dynamic-extend('clearfix') {
@include clearfix(false);
}
}
@else {
&:after {
content: "";
display: table;
clear: both;
}
}
} toolkit-2.10.2/stylesheets/toolkit/_colors.scss 0000664 0000000 0000000 00000007423 13022074543 0021665 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Compass Extension Imports
//////////////////////////////
//////////////////////////////
// Tint and Shade
//////////////////////////////
@function tint($color, $amount) {
@return mix(toolkit-get('tint color'), $color, $amount);
}
@function shade($color, $amount) {
@return mix(toolkit-get('shade color'), $color, $amount);
}
//////////////////////////////
// Luma
//////////////////////////////
@function luma($color) {
@return (red($color) * .299) + (green($color) * .587) + (blue($color) * .114);
}
@function luma-gte($color1, $color2) {
@if luma($color1) >= luma($color2) {
@return true;
}
@else {
@return false;
}
}
@function luma-lte($color1, $color2) {
@if luma($color1) <= luma($color2) {
@return true;
}
@else {
@return false;
}
}
@function luma-diff($color1, $color2) {
@return luma($color1) - luma($color2);
}
//////////////////////////////
// Color Stacks
//////////////////////////////
@function color-stack($main, $secondary, $amounts...) {
@if length($amounts) == 0 {
$amounts: toolkit-get('color stack amounts');
}
@else if length($amounts) == 1 {
$amounts: nth($amounts, 1);
}
$stack: $main;
@each $amount in $amounts {
$stack: join($stack, mix($secondary, nth($stack, 1), $amount));
}
@return $stack;
}
// Tint Stack
@function tint-stack($color, $amounts...) {
@if length($amounts) > 0 {
@return color-stack($color, toolkit-get('tint color'), $amounts);
}
@else {
@return color-stack($color, toolkit-get('tint color'));
}
}
// Shade Stack
@function shade-stack($color, $amounts...) {
@if length($amounts) > 0 {
@return color-stack($color, toolkit-get('shade color'), $amounts);
}
@else {
@return color-stack($color, toolkit-get('shade color'));
}
}
// Tint/Shade Stack
@function tint-shade-stack($color, $amounts...) {
$colors: ();
@if length($amounts) == 0 {
$amounts: toolkit-get('tint shade amounts');
}
$length: length($amounts);
// Shades
@for $i from 1 through $length {
$colors: append($colors, shade($color, nth($amounts, $i)));
}
// Base
$colors: append($colors, $color);
// Tints
@for $i from 0 through $length - 1 {
$colors: append($colors, tint($color, nth($amounts, $length - $i)));
}
@return $colors;
}
//////////////////////////////
// Color Scales
//////////////////////////////
@function color-scale($main, $secondary, $steps: null) {
$steps: if($steps != null, $steps, toolkit-get('color scale steps'));
$list: $main;
$red1: red($main);
$red2: red($secondary);
$red-diff: (($red1 - $red2) / (($steps - 1)));
$hue1: hue($main);
$hue2: hue($secondary);
@if ($hue2 + 359 - $hue1) < abs($hue1 - $hue2) {
$hue2: $hue2 + 359;
}
$hue-diff: ($hue2 - $hue1) / ($steps - 1);
$sat1: saturation($main);
$sat2: saturation($secondary);
$sat-diff: 0;
@if $sat1 > $sat2 {
$sat-diff: ($sat2 - $sat1) / ($steps - 1);
}
@else {
$sat-diff: ($sat1 - $sat2) / ($steps - 1);
}
$lte1: lightness($main);
$lte2: lightness($secondary);
$lte-diff: 0;
@if $lte1 > $lte2 {
$lte-diff: ($lte2 - $lte1) / ($steps - 1);
}
@else {
$lte-diff: ($lte1 - $lte2) / ($steps - 1);
}
$alp1: alpha($main);
$alp2: alpha($secondary);
$alp-diff: 0;
@if $alp1 > $alp2 {
$alp-diff: ($alp2 - $alp1) / ($steps - 1);
}
@else {
$alp-diff: ($alp1 - $alp2) / ($steps - 1);
}
$hue-hold: $hue1;
$sat-hold: $sat1;
$lte-hold: $lte1;
$alp-hold: $alp1;
$color-hold: 0;
@for $i from 2 through $steps {
$hue-hold: $hue-hold + $hue-diff;
$sat-hold: $sat-hold + $sat-diff;
$lte-hold: $lte-hold + $lte-diff;
$alp-hold: $alp-hold + $alp-diff;
$color-hold: hsla($hue-hold, $sat-hold, $lte-hold, $alp-hold);
$list: append($list, $color-hold);
}
@return $list;
}
toolkit-2.10.2/stylesheets/toolkit/_fonts.scss 0000664 0000000 0000000 00000007637 13022074543 0021524 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Enable ligatures
//////////////////////////////
@mixin enable-ligatures($extend: null) {
$extend: if($extend != null, $extend, toolkit-get('ligature extend'));
@if $extend {
@include dynamic-extend('enable ligatures') {
@include enable-ligatures;
}
}
@else {
-webkit-font-feature-settings:"liga","dlig";
-moz-font-feature-settings:"liga=1, dlig=1";
-moz-font-feature-settings:"liga","dlig";
-ms-font-feature-settings:"liga","dlig";
-o-font-feature-settings:"liga","dlig";
font-feature-settings: "liga","dlig";
}
}
//////////////////////////////
// Font Face
//////////////////////////////
@mixin font-face($name, $files, $weight: null, $style: null, $inline-woff: null) {
$weight: if($weight != null, $weight, toolkit-get('font face weight'));
$style: if($style != null, $style, toolkit-get('font face style'));
$inline-woff: if($inline-woff != null, $inline-woff, toolkit-get('font face inline woff'));
$font-stack: ();
$font-src: '';
$eot: false;
$font-extensions: ('eot': 'embedded-opentype', 'woff2': 'woff2', 'woff': 'woff', 'ttf': 'truetype', 'svg': 'svg');
@each $ext, $format in $font-extensions {
@if map-has-key($files, $ext) {
@if function-exists(inline-font-files) and $inline-woff == true and ($ext == 'woff' or $ext == 'woff2') {
$font-src: inline-font-files(map-get($files, $ext));
}
@else if function-exists(font-url) {
$font-src: font-url(map-get($files, $ext)) format($format);
@if $ext == 'eot' {
$eot: $font-src;
$font-src: font-url(map-get($files, $ext) + '#iefix') format($format);
}
}
@else {
$font-src: url(map-get($files, $ext)) format($format);
@if $ext == 'eot' {
$eot: $font-src;
$font-src: url(map-get($files, $ext) + '#iefix') format($format);
}
}
$font-stack: append($font-stack, $font-src, 'comma');
}
}
@font-face {
font-family: $name;
font-weight: $weight;
font-style: $style;
@if $eot {
src: $eot;
}
@if length($font-stack) > 0 {
src: $font-stack;
}
}
}
//////////////////////////////
// Icon Font
// From http://icomoon.io
//////////////////////////////
@mixin icon-font($font-stack, $speak: null, $extend: null) {
$speak: if($speak != null, $speak, toolkit-get('icon font speak'));
$extend: if($extend != null, $extend, toolkit-get('icon font extend'));
font-family: $font-stack;
@if $speak == false {
speak: none;
}
@include icon-font--core($extend);
}
@mixin icon-font--core($extend: null) {
$extend: if($extend != null, $extend, toolkit-get('icon font extend'));
@if $extend {
@include dynamic-extend('icon font core') {
@include icon-font--core(false);
}
}
@else {
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
@include enable-ligatures($extend);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
//////////////////////////////
// Font Fade In
//////////////////////////////
@mixin content-fade-in($duration: null, $loading: null, $extend: null) {
$duration: if($duration != null, $duration, toolkit-get('fade in duration'));
$loading: if($loading != null, $loading, toolkit-get('fade in loading class'));
$extend: if($extend != null, $extend, toolkit-get('fade in extend'));
@if $extend == true and $duration == toolkit-get('fade in duration') and $loading == toolkit-get('fade in loading class') {
@include dynamic-extend('content fade in') {
@include content-fade-in($extend: false);
}
}
@else {
opacity: 1;
@if not mixin-exists('single-transition') {
-webkit-transition: opacity $duration;
transition: opacity $duration;
}
@else {
@include single-transition(opacity $duration);
}
#{$loading} & {
opacity: 0;
}
}
}
toolkit-2.10.2/stylesheets/toolkit/_intrinsic-ratio.scss 0000664 0000000 0000000 00000004337 13022074543 0023503 0 ustar 00root root 0000000 0000000 ////////////////////////
// Fluid Embeds and whatever WITH NO JAVASCIPT!
////////////////////////
@mixin intrinsic-ratio-parent($extend: null) {
$extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend'));
@if $extend {
@include dynamic-extend('intrinsic ratio parent') {
@include intrinsic-ratio-parent(false);
}
}
@else {
position: relative;
height: 0;
}
}
@mixin intrinsic-ratio-child($extend: null) {
$extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend'));
@if $extend {
@include dynamic-extend('intrinsic ratio child') {
@include intrinsic-ratio-child(false);
}
}
@else {
display: block;
position: absolute;
width: 100% !important; // Nuke the external styles
height: 100% !important; // Nuke the external styles
top: 0;
margin: 0;
padding: 0;
}
}
@mixin intrinsic-ratio-ratio($ratio: null, $width: null, $position: null) {
$ratio: if($ratio != null, $ratio, toolkit-get('intrinsic ratio'));
$width: if($width != null, $width, toolkit-get('intrinsic ratio width'));
$position: if($position != null, $position, toolkit-get('intrinsic ratio position'));
padding-#{$position}: (1 / $ratio) * $width;
width: $width;
}
@mixin intrinsic-ratio($ratio: null, $width: null, $elements: null, $position: null, $extend: null) {
$ratio: if($ratio != null, $ratio, toolkit-get('intrinsic ratio'));
$width: if($width != null, $width, toolkit-get('intrinsic ratio width'));
$elements: if($elements != null, $elements, toolkit-get('intrinsic ratio elements'));
$position: if($position != null, $position, toolkit-get('intrinsic ratio position'));
$extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend'));
@include intrinsic-ratio-parent($extend);
@include intrinsic-ratio-ratio($ratio, $width, $position);
@each $element in $elements {
#{$element} {
@include intrinsic-ratio-child($extend);
}
}
}
@mixin ir($ratio: null, $width: null, $elements: null, $position: null, $extend: null) {
@include intrinsic-ratio($ratio, $width, $elements, $extend, $position);
}
@mixin ir-ratio($ratio: null, $width: null, $position: null) {
@include intrinsic-ratio-ratio($ratio, $width, $position);
} toolkit-2.10.2/stylesheets/toolkit/_kickstart.scss 0000664 0000000 0000000 00000000425 13022074543 0022356 0 ustar 00root root 0000000 0000000 html {
@if mixin-exists('box-sizing') {
@include box-sizing('border-box');
}
@else {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
*, *:before, *:after {
box-sizing: inherit;
}
embed,
img,
object,
video {
max-width: 100%;
height: auto;
}
toolkit-2.10.2/stylesheets/toolkit/_nested-context.scss 0000664 0000000 0000000 00000001731 13022074543 0023324 0 ustar 00root root 0000000 0000000 // simple function to find the context of a nested percentage.
@function nested-context($contexts: null) {
$contexts: if($contexts != null, $contexts, toolkit-get('nested context contexts'));
// First level deep is always 100%
$percentage: 100%;
// Loop through each level
@each $context in $contexts {
// Invert the percentage to find context
$percentage: percentage($percentage / $context);
}
// Return final percentage
@return $percentage;
}
// mixin to make things easier
@mixin nested-context($contexts: null, $position: null) {
$contexts: if($contexts != null, $contexts, toolkit-get('nested context contexts'));
$position: if($position != null, $position, toolkit-get('nested context position'));
width: nested-context($contexts);
@if $position == "center" {
position: relative;
left: 50%;
margin-left: nested-context($contexts) * -.5;
}
@if $position == "right" {
margin-left: nested-context($contexts) * -1 + 100%;
}
} toolkit-2.10.2/stylesheets/toolkit/_parallax.scss 0000664 0000000 0000000 00000004236 13022074543 0022167 0 ustar 00root root 0000000 0000000 // Magic parallax mixins
@mixin parallax-init($perspective: null, $element: null, $parallax-ios: null) {
$perspective: if($perspective != null, $perspective, toolkit-get('parallax perspective'));
$element: if($element != null, $element, toolkit-get('parallax element'));
$parallax-ios: if($parallax-ios != null, $parallax-ios, toolkit-get('parallax ios'));
@if $element == 'body' {
@at-root {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
@include parallax-init-core($perspective, $parallax-ios);
}
}
}
@else {
@if $element == this {
@include parallax-init-core($perspective, $parallax-ios);
}
@else {
@at-root #{$element} {
@include parallax-init-core($perspective, $parallax-ios);
}
}
}
}
@mixin parallax-init-core($perspective: null, $parallax-ios: null) {
$perspective: if($perspective != null, $perspective, toolkit-get('parallax perspective'));
$parallax-ios: if($parallax-ios != null, $parallax-ios, toolkit-get('parallax ios'));
overflow: auto;
@if mixin-exists(perspective) {
@include perspective($perspective * 1px);
}
@else {
-webkit-perspective: $perspective * 1px;
perspective: $perspective * 1px;
}
// Allows for smooth scrolling but disables parallax effects.
@if $parallax-ios == false {
-webkit-overflow-scrolling: touch;
}
// Make sure 3D perspective is preserved
&, & * {
@if mixin-exists(transform-style) {
@include transform-style(preserve-3d);
}
@else {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
}
}
@mixin parallax($distance: null, $perspective: null) {
$distance: if($distance != null, $distance, toolkit-get('parallax distance'));
$perspective: if($perspective != null, $perspective, toolkit-get('parallax perspective'));
$transform: translateZ($distance * $perspective * 1px) scale(abs($distance - 1));
@if mixin-exists(transform) {
@include transform($transform);
}
@else {
-webkit-transform: $transform;
transform: $transform;
}
z-index: $distance * 100;
}
toolkit-2.10.2/stylesheets/toolkit/_placeholders.scss 0000664 0000000 0000000 00000002001 13022074543 0023014 0 ustar 00root root 0000000 0000000 $Private-Toolkit-Placeholders: () !default;
//////////////////////////////
// Placeholder Get/Set
//////////////////////////////
@function toolkit-placeholder-set($id) {
$unique-id: unique-id();
$Private-Toolkit-Placeholders: map-merge($Private-Toolkit-Placeholders, ($id: $unique-id)) !global;
@return $unique-id;
}
@function toolkit-placeholder-get($id) {
@return map-get($Private-Toolkit-Placeholders, $id);
}
//////////////////////////////
// Generate Placeholder Class and Extend
//////////////////////////////
@mixin dynamic-extend($id) {
$placeholder-id: toolkit-placeholder-get($id);
@if $placeholder-id == null {
$placeholder-id: toolkit-placeholder-set($id);
@at-root %#{$placeholder-id} {
@content;
}
}
@extend %#{$placeholder-id};
}
//////////////////////////////
// Static Mixin Helper
//////////////////////////////
@mixin mixin-dryer($id, $extend: true) {
@if $extend == true {
@include dynamic-extend($id) {
@content;
}
}
@else {
@content;
}
}
toolkit-2.10.2/stylesheets/toolkit/_reset.scss 0000664 0000000 0000000 00000023761 13022074543 0021511 0 ustar 00root root 0000000 0000000 /*! Reset/normalize hybrid with major contributions from normalize.css, html5doctor.com Reset Stylesheet, and http://html5reset.org/
* Sam Richard - http://snugug.com/
* Nicholas Gallagher, Jonathan Neal - http://necolas.github.io/normalize.css/
* Richard Clark - http://richclarkdesign.com
* Tim Murtaugh - http://monkeydo.biz/
*/
//////////////////////////////
// Basic reset
//////////////////////////////
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
main,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
//////////////////////////////
// Prevent iOS text size adjust after orientation change, without disabling user zoom.
//////////////////////////////
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
//////////////////////////////
// Resets body line height
//////////////////////////////
body {
line-height: 1;
}
//////////////////////////////////////////////////////////////////////////
// HTML5 display definitions
//////////////////////////////////////////////////////////////////////////
//////////////////////////////
// Correct `block` display not defined for any HTML5 element in IE 8/9.
// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
// Correct `block` display not defined for `main` in IE 11.
//////////////////////////////
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
//////////////////////////////
// 1. Correct `inline-block` display not defined in IE 8/9.
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
//////////////////////////////
audio,
canvas,
progress,
video {
display: inline-block; // 1
vertical-align: baseline; // 2
}
//////////////////////////////
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
//////////////////////////////
audio:not([controls]) {
display: none;
height: 0;
}
//////////////////////////////
// Address `[hidden]` styling not present in IE 8/9/10.
// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
//////////////////////////////
[hidden],
template {
display: none;
}
//////////////////////////////////////////////////////////////////////////
// Links
//////////////////////////////////////////////////////////////////////////
//////////////////////////////
// Remove the gray background color from active links in IE 10.
//////////////////////////////
a {
background-color: transparent;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
//////////////////////////////
// Improve readability when focused and also mouse hovered in all browsers.
//////////////////////////////
a:active,
a:hover {
outline: 0;
}
//////////////////////////////////////////////////////////////////////////
// Text-level semantics
//////////////////////////////////////////////////////////////////////////
//////////////////////////////
// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
//////////////////////////////
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
//////////////////////////////
// Remove text decoration
//////////////////////////////
ins {
text-decoration: none;
}
//////////////////////////////
// Adds strikethrough
//////////////////////////////
del {
text-decoration: line-through;
}
//////////////////////////////
// Reset quotes for blockquote
//////////////////////////////
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
//////////////////////////////
// Remove list style for lists
//////////////////////////////
ul {
list-style: none;
}
//////////////////////////////////////////////////////////////////////////
// Embedded content
//////////////////////////////////////////////////////////////////////////
//////////////////////////////
// Remove border when inside `a` element in IE 8/9/10.
//////////////////////////////
img {
border: 0;
}
//////////////////////////////
// Correct overflow not hidden in IE 9/10/11.
//////////////////////////////
svg:not(:root) {
overflow: hidden;
}
//////////////////////////////////////////////////////////////////////////
// Grouping content
//////////////////////////////////////////////////////////////////////////
//////////////////////////////
// 1. Contain overflow in all browsers.
// 2. Pre-format text
//////////////////////////////
pre {
overflow: auto; // 1
white-space: pre; // 2
white-space: pre-wrap; // 2
white-space: pre-line; // 2
word-wrap: break-word; // 2
}
//////////////////////////////
// 1. Address odd `em`-unit font size rendering in all browsers.
// 2. Ensure monospace font
//////////////////////////////
code,
kbd,
pre,
samp {
font-size: 1em; // 1
font-family: monospace, sans-serif;
}
//////////////////////////////
// Address differences between Firefox and other browsers
//////////////////////////////
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid;
margin: 1em 0;
padding: 0;
}
//////////////////////////////////////////////////////////////////////////
// Forms
//////////////////////////////////////////////////////////////////////////
//////////////////////////////
// Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set.
//////////////////////////////
//////////////////////////////
// 1. Correct color not being inherited.
// Known issue: affects color of disabled elements.
// 2. Correct font properties not being inherited.
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
//////////////////////////////
button,
input,
optgroup,
select,
textarea {
color: inherit; // 1
font: inherit; // 2
margin: 0; // 3
}
//////////////////////////////
// Address `overflow` set to `hidden` in IE 8/9/10/11.
//////////////////////////////
button,
input[type="button"] {
overflow: visible;
}
//////////////////////////////
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
// Correct `select` style inheritance in Firefox.
//////////////////////////////
button,
select {
text-transform: none;
}
//////////////////////////////
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type `input` and others.
//////////////////////////////
button,
html input[type="button"], // 1
input[type="file"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
//////////////////////////////
// Re-set default cursor for disabled elements.
//////////////////////////////
button[disabled],
html input[disabled] {
cursor: default;
}
//////////////////////////////
// Remove inner padding and border in Firefox 4+.
//////////////////////////////
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//////////////////////////////
// Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
//////////////////////////////
input {
line-height: normal;
}
//////////////////////////////
// It's recommended that you don't attempt to style these elements.
// Firefox's implementation doesn't respect box-sizing, padding, or width.
//
// Removes excess padding in IE 8/9/10.
//////////////////////////////
input[type="checkbox"],
input[type="radio"] {
padding: 0;
}
//////////////////////////////
// Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`.
//////////////////////////////
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
//////////////////////////////
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
// Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance).
//////////////////////////////
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//////////////////////////////
// 1. Correct `color` not being inherited in IE 8/9/10/11.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//////////////////////////////
legend {
border: 0; // 1
padding: 0; // 2
}
//////////////////////////////
// Remove default vertical scrollbar in IE 8/9/10/11.
//////////////////////////////
textarea {
overflow: auto;
}
//////////////////////////////
// Align input and select text
//////////////////////////////
input,
select {
vertical-align:middle;
}
//////////////////////////////////////////////////////////////////////////
// Tables
//////////////////////////////////////////////////////////////////////////
//////////////////////////////
// Remove most spacing between table cells.
//////////////////////////////
table {
border-collapse: collapse;
border-spacing: 0;
}
//////////////////////////////
// Remove padding from table cell and table header
//////////////////////////////
td,
th {
padding: 0;
}
//////////////////////////////////////////////////////////////////////////
// Kickstart
//////////////////////////////////////////////////////////////////////////
@import "kickstart";
toolkit-2.10.2/stylesheets/toolkit/_rtl.scss 0000664 0000000 0000000 00000001141 13022074543 0021154 0 ustar 00root root 0000000 0000000 @mixin rtl($property, $value) {
$_property: $property;
#{$property}: $value;
@if length($value) == 4 {
[dir="rtl"] & {
#{$property}: nth($value, 1) nth($value, 4) nth($value, 3) nth($value, 2);
}
}
@else {
@if (str-index($property, 'left')) {
$property: str-slice($property, 1, str-index($property, 'left') - 1) + 'right';
}
@else if (str-index($property, 'right')) {
$property: str-slice($property, 1, str-index($property, 'right') - 1) + 'left';
}
@if $property != $_property {
[dir="rtl"] & {
#{$property}: $value;
}
}
}
} toolkit-2.10.2/stylesheets/toolkit/_set-multiple.scss 0000664 0000000 0000000 00000001052 13022074543 0023000 0 ustar 00root root 0000000 0000000 @mixin set-multiple($value, $properties...) {
$property-length: length($properties);
$error-msg: "The `set-multiple` mixin requires you to pass in a list of properties as the second argument";
@if $property-length < 1 {
@if feature-exists(at-error) {
@error $error-msg;
}
@else {
@warn $error-msg;
}
}
// If the first argument passed in is a white-spaced separated list.
$properties: if($property-length == 1, nth($properties, 1), $properties);
@each $property in $properties {
#{$property}: $value
}
}
toolkit-2.10.2/stylesheets/toolkit/_settings.scss 0000664 0000000 0000000 00000012161 13022074543 0022217 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Toolkit Settings
//////////////////////////////
$Toolkit-Settings: (
'clearfix extend': false,
'color stack amounts': 25% 50% 75% 85% 90%,
'tint shade amounts': 75% 50% 25%,
'tint color': #fff,
'shade color': #000,
'color scale steps': 6,
'ligature extend': false,
'font face weight': normal,
'font face style': normal,
'font face inline woff': false,
'icon font extend': false,
'icon font speak': false,
'fade in duration': 1s,
'fade in loading class': '.wf-loading',
'fade in extend': false,
'intrinsic ratio': 16/9,
'intrinsic ratio width': 100%,
'intrinsic ratio elements': '> *',
'intrinsic ratio position': top,
'intrinsic ratio extend': false,
'nested context contexts': 100%,
'nested context position': left,
'triangle color': #000,
'triangle height': 1em,
'triangle width': 1em,
'triangle angle': 0,
'parallax perspective': 1,
'parallax element': 'body',
'parallax ios': true,
'parallax distance': 0,
'vertical midpoint': 50%,
'vertical extend': false,
'horizontal midpoint': 0%,
'horizontal fixed midpoint': 50%,
'horizontal fixed': false,
'horizontal extend': false,
'absolute center vertical midpoint': 50%,
'absolute center horizontal midpoint': 0%,
'absolute center fixed horizontal midpoint': 50%,
'absolute center fixed': false,
'absolute center extend': false,
'underline background': #fff,
'underline color': #00e,
'underline clear descenders': true,
'underline distance': 1,
'underline width': 2,
'underline extend': false,
'art pixel size': 1px,
'art color': black,
'art border radius': 0%
);
//////////////////////////////
// New Settings module
//////////////////////////////
// Global
$GlobalSettings: $Toolkit-Settings !default;
// User
$UserSettings: () !default;
//////////////////////////////
// User Setting Exists
//////////////////////////////
@function user-setting-exists($setting) {
@if map-has-key($UserSettings, $setting) {
@return true;
}
@else {
@return false;
}
}
@function user-setting-exists-multiple($settings...) {
$Return: ();
@each $setting in $settings {
$Return: map-merge($Return, ($setting: user-setting-exists($setting)));
}
@return $Return;
}
// Toolkit Version
@function toolkit-has($setting) {
@return user-setting-exists($setting);
}
//////////////////////////////
// Setting Get
//////////////////////////////
@function setting-get($setting) {
@if user-setting-exists($setting) {
@return map-get($UserSettings, $setting);
}
@else {
@return map-get($GlobalSettings, $setting);
}
}
@function setting-get-multiple($settings...) {
$values: ();
@each $setting in $settings {
$values: map-merge($values, ($setting: setting-get($setting)));
}
@return $values;
}
// Toolkit Version
@function toolkit-get($setting) {
@return setting-get($setting);
}
//////////////////////////////
// Settings Set
//////////////////////////////
@function setting-set($setting, $value) {
$UserSettings: map-merge($UserSettings, ($setting: $value)) !global;
@return true;
}
@function setting-set-multiple($settings) {
$UserSettings: map-merge($UserSettings, $settings) !global;
@return true;
}
@mixin setting-set($setting, $value) {
$setting-setter: setting-set($setting, $value) !global;
}
@mixin setting-change($setting, $value) {
@include setting-set($setting, $value);
}
@mixin setting-set-multiple($settings) {
$setting-setter: setting-set-multiple($settings) !global;
}
@mixin setting-change-multiple($settings) {
@include setting-set-multiple($settings);
}
// Toolkit Version
@function toolkit-set($setting, $value) {
@return setting-set($setting, $value);
}
@mixin toolkit-change($setting, $value) {
@include setting-set($setting, $value);
}
@mixin toolkit-set($setting, $value) {
@include setting-set($setting, $value);
}
//////////////////////////////
// Remove Setting
//////////////////////////////
@function setting-clear($setting) {
$Return: ();
@each $Key, $Value in $UserSettings {
$Return: if($setting == $Key, $Return, map-merge($Return, ($Key: $Value)));
}
$UserSettings: $Return !global;
@return true;
}
@function setting-clear-multiple($settings...) {
@each $setting in $settings {
$clear-the-settings: setting-clear($setting);
}
@return true;
}
@function setting-reset() {
$UserSettings: () !global;
@return true;
}
@mixin setting-clear($setting) {
$setting-clearer: setting-clear($setting);
}
@mixin setting-clear-multiple($settings...) {
$setting-clearer: setting-clear-multiple($settings);
}
@mixin setting-reset() {
$setting-clearer: setting-reset();
}
// Toolkit Version
@function toolkit-reset($setting) {
@return setting-clear($setting);
}
@mixin toolkit-reset($setting) {
@include setting-clear($setting);
}
//////////////////////////////
// Setting Pick
//////////////////////////////
@function setting-pick($setting, $input) {
@return if($input != null, $input, setting-get($setting));
}
@function setting-pick-multiple($settings) {
$Return: ();
@each $setting, $input in $settings {
$Return: map-merge($Return, ($setting: setting-pick($input, $setting)));
}
@return $Return;
} toolkit-2.10.2/stylesheets/toolkit/_target.scss 0000664 0000000 0000000 00000000217 13022074543 0021644 0 ustar 00root root 0000000 0000000 @mixin target($target) {
@at-root {
/*! @{target: #{$target}} */
& {
@content;
}
/*! {target: #{$target}}@ */
}
} toolkit-2.10.2/stylesheets/toolkit/_triangle.scss 0000664 0000000 0000000 00000004312 13022074543 0022163 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Draw triangles
//////////////////////////////
@mixin triangle($color: null, $height: null, $width: null, $angle: null) {
$color: if($color != null, $color, toolkit-get('triangle color'));
$height: if($height != null, $height, toolkit-get('triangle height'));
$width: if($width != null, $width, toolkit-get('triangle width'));
$angle: if($angle != null, $angle, toolkit-get('triangle angle'));
@if nth($angle, 1) == "top" or nth($angle, 1) == "bottom" {
$angle: "#{$angle}";
}
@if $angle == "top" {
$angle: 0;
}
@if $angle == "top right" {
$angle: 45 * 7;
}
@if $angle == "right" {
$angle: 45 * 2;
}
@if $angle == "bottom right" {
$angle: 45 * 1;
}
@if $angle == "bottom" {
$angle: 45 * 4;
}
@if $angle == "bottom left" {
$angle: 45 * 3;
}
@if $angle == "left" {
$angle: 45 * 6;
}
@if $angle == "top left" {
$angle: 45 * 5;
}
@if unit($height) == "" or unit($height) == "%" {
@debug "in triangle #{$height} is not a compatible unit for height."
}
@if unit($width) == "" or unit($width) == "%" {
@debug "in triangle #{$width} is not a compatible unit for width."
}
// offset 45deg to make each side start at 0
$deg: $angle + 45;
// if units, remove units
@if unit($deg) == deg {
$deg: $deg / 1deg;
}
// shift to be on a scale from 0 to 90.
@while $deg > 90 {
$deg: $deg - 90;
}
@while $deg < 0 {
$deg: $deg + 90;
}
// Get a ratio of 90 to multiply by.
$deg: $deg / 90;
// make sure metrics are reset
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
// run through sides
@if $angle <= 45 or $angle > 315 {
border-bottom-color: $color;
border-width: 0 ($width * abs($deg - 1)) $height ($width * $deg);
}
@if $angle > 45 and $angle <= 135 {
border-left-color: $color;
border-width: ($height * $deg) 0 ($height * abs($deg - 1)) $width;
}
@if $angle > 135 and $angle <= 225 {
border-top-color: $color;
border-width: $height ($width * $deg) 0 ($width * abs($deg - 1));
}
@if $angle > 225 and $angle <= 315 {
border-right-color: $color;
border-width: ($height * abs($deg - 1)) $width ($height * $deg) 0;
}
} toolkit-2.10.2/stylesheets/toolkit/_underline.scss 0000664 0000000 0000000 00000003007 13022074543 0022343 0 ustar 00root root 0000000 0000000 @mixin underline($background: null, $color: null, $clear-descenders: null, $distance: null, $width: null, $extend: null) {
$background: if($background != null, $background, toolkit-get('underline background'));
$color: if($color != null, $color, toolkit-get('underline color'));
$clear-descenders: if($clear-descenders != null, $clear-descenders, toolkit-get('underline clear descenders'));
$distance: if($distance != null, $distance, toolkit-get('underline distance'));
$width: if($width != null, $width, toolkit-get('underline width'));
$extend: if($extend != null, $extend, toolkit-get('underline extend'));
$PX: .0625em;
@include underline-core($extend);
@if mixin-exists(background-image) and function-exists(linear-gradient) {
@include background-image(
linear-gradient(bottom, $background 75%, $color 75%)
);
}
@else {
background-image: linear-gradient(to top, $background 75%, $color 75%);
}
background-size: (2 * $PX) ((1 + $width) * $PX);
background-position: 0 (($width) * $PX) + $distance;
@if $clear-descenders {
text-shadow: (1 * $PX) (1 * $PX) 0 $background, (-1 * $PX) (-1 * $PX) 0 $background, (1 * $PX) (-1 * $PX) 0 $background, (-1 * $PX) (1 * $PX) 0 $background;
}
}
@mixin underline-core($extend: null) {
$extend: if($extend != null, $extend, toolkit-get('underline extend'));
@if $extend {
@include dynamic-extend('underline') {
@include underline-core(false);
}
}
@else {
text-decoration: none;
background-repeat: repeat-x;
}
}
toolkit-2.10.2/stylesheets/toolkit/_vertical-center.scss 0000664 0000000 0000000 00000000333 13022074543 0023444 0 ustar 00root root 0000000 0000000 @import "center";
@warn "DEPRECATION: Vertical Center has been moved to the `center` partial, please change your import from `toolkit/vertical-center` to `toolkit/center`. In a future release, this will be deprecated."; toolkit-2.10.2/stylesheets/toolkit/_viewport.scss 0000664 0000000 0000000 00000000475 13022074543 0022243 0 ustar 00root root 0000000 0000000 //////////////////////////////
// CSS level 4 Viewport
// http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule
//////////////////////////////
@mixin viewport {
@-webkit-viewport {
@content;
}
@-moz-viewport {
@content;
}
@-ms-viewport {
@content;
}
@viewport {
@content;
}
}
toolkit-2.10.2/tests/ 0000775 0000000 0000000 00000000000 13022074543 0014423 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/tests/.unit_tests.rb 0000664 0000000 0000000 00000004056 13022074543 0017234 0 ustar 00root root 0000000 0000000 require 'compass'
require 'compass/exec'
require 'test/unit'
require 'diffy'
require 'colorize'
require 'pathname'
class TestCompassOutput < Test::Unit::TestCase
Compass.add_configuration 'config.rb'
Compass.configuration.project_path = Dir.pwd
# Remove all current Diff files
Dir.glob("#{Dir.pwd}/output/**/*.css.diff").each { |f| File.delete(f) }
Compass.compiler.sass_files.each do |sass_file|
test_name = File.basename(sass_file, '.*')
define_method "test_#{test_name}_compile " do
# Compiled CSS file path
test_file_pwd = Compass.compiler.corresponding_css_file(sass_file)
# Relative path of compiled CSS file from Tests directory
relative_pwd = Pathname.new(test_file_pwd).relative_path_from(Pathname.new("#{Dir.pwd}/output")).to_s
# Control files path
control_file_pwd = "#{Dir.pwd}/controls/" + relative_pwd
# The base path of the sub folders, making the folders if needed
base_pwd = relative_pwd.sub(File.basename(relative_pwd), '')
FileUtils.mkdir_p "#{Dir.pwd}/output/#{base_pwd}"
# Compiles Sass file
Compass.compiler.compile sass_file, test_file_pwd # Raises exception upon error
begin
# Assert that our test output matches our control output
passed = assert FileUtils.compare_file(test_file_pwd, control_file_pwd), "Compiled output for #{File.basename(sass_file)} does not match control output!".red
ensure
# If there is a failure, generate a diff of the files and put it with the compiled file
if !passed
test_file = File.open(test_file_pwd).read;
control_file = File.open(control_file_pwd).read;
diff_pwd = "#{Dir.pwd}/output/#{relative_pwd}.diff"
diff_content = Diffy::Diff.new(control_file, test_file, :include_diff_info => true)
File.open(diff_pwd, 'w') { |f| f.write(diff_content.to_s(:text)) }
puts "Control->Compiled diff output to ".yellow + " tests/output/#{relative_pwd}.diff ".colorize( :color => :blue, :background => :black)
end
end
end
end
end
toolkit-2.10.2/tests/config.rb 0000664 0000000 0000000 00000001302 13022074543 0016211 0 ustar 00root root 0000000 0000000 # Require any additional compass plugins here.]
# File system locations
sass_dir = 'tests'
css_dir = 'output'
fonts_dir = 'fonts'
# Import latest breakpoint library
add_import_path '../stylesheets'
# Set to true for easier debugging
line_comments = false
# preferred_syntax = :sass
# CSS output style - :nested, :expanded, :compact, or :compressed
output_style = :expanded
# Determine whether Compass asset helper functions generate relative
# or absolute paths
relative_assets = true
asset_cache_buster :none
# Learn more:
# http://compass-style.org/docs/tutorials/configuration-reference/
sass_options = {:sourcemap => false} toolkit-2.10.2/tests/controls/ 0000775 0000000 0000000 00000000000 13022074543 0016266 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/tests/controls/.gitkeep 0000664 0000000 0000000 00000000000 13022074543 0017705 0 ustar 00root root 0000000 0000000 toolkit-2.10.2/tests/controls/00-base.css 0000664 0000000 0000000 00000000000 13022074543 0020115 0 ustar 00root root 0000000 0000000 toolkit-2.10.2/tests/controls/01-clearfix.css 0000664 0000000 0000000 00000000532 13022074543 0021013 0 ustar 00root root 0000000 0000000 /**
* Clearfix Mixin
**/
.clearfix {
_setting--clearfix-extend: false;
}
.clearfix--no-extend {
_test: "@include clearfix;";
}
.clearfix--no-extend:after {
content: "";
display: table;
clear: both;
}
.clearfix--extend {
_test: "@include clearfix(true)";
}
.clearfix--extend:after {
content: "";
display: table;
clear: both;
}
toolkit-2.10.2/tests/controls/02-colors.css 0000664 0000000 0000000 00000004365 13022074543 0020530 0 ustar 00root root 0000000 0000000 /**
* Colors Tints and Shades
**/
.color--tint {
_setting--tint-color: #fff;
_test: "tint(#b4d455, 25%)";
_result: #c7df80;
/* Set New Tint Color */
_setting--tint-color: #eee;
_test: "tint(#b4d455, 25%)";
_result: #c3db7b;
}
.color--shade {
_setting--shade-color: #000;
_test: "shade(#b4d455, 25%)";
_result: #879f40;
/* Set New Shade Color */
_setting--shade-color: #111;
_test: "shade(#b4d455, 25%)";
_result: #8ba344;
}
/**
* Luma
**/
.color--luma {
_test: "luma(#b4d455)";
_result: 187.954;
}
.color--luma-gte {
_test: "luma-gte(#b4d455, #c0ffee)";
_result: false;
}
.color--luma-lte {
_test: "luma-lte(#b4d455, #c0ffee)";
_result: true;
}
.color--luma-diff {
_test: "luma-diff(#b4d455, #c0ffee)";
_result: -46.271;
}
/**
* Color Stacks
**/
.color--stack {
_setting--color-stack-amounts: 25% 50% 75% 85% 90%;
_test: "color-stack(red, blue)";
_result: red #bf0040 purple #4000bf #2600d9 #1900e6;
_test: "color-stack(red, blue, 15%, 20%, 25%, 30%)";
_result: red #d90026 #cc0033 #bf0040 #b3004d;
}
.color--tint-stack {
_setting--tint-color: #eee;
_test: "tint-stack(red, 15%, 20%, 25%, 30%)";
_result: red #fc2424 #fc3030 #fb3c3c #fa4747;
}
.color--tint-stack {
_setting--shade-color: #111;
_test: "shade-stack(red, 15%, 20%, 25%, 30%)";
_result: red #db0303 #cf0303 #c40404 #b80505;
}
.color--tint-shade-stack {
_setting--tint-shade-stack-amounts: 75% 50% 25%;
_test: "tint-shade-stack(red)";
_result: #4d0d0d #880909 #c40404 red #fb3c3c #f77777 #f2b3b3;
_test: "tint-shade-stack(red, blue, 15%, 20%, 25%, 30%)";
_result: #db0303 #cf0303 #c40404 #b80505 red #fa4747 #fb3c3c #fc3030 #fc2424;
}
/**
* Color Scales
**/
.color--scale--no-alpha {
_setting--color-scale-shades: 6;
_test: "color-scale(red, blue)";
_result: red #ffcc00 #66ff00 #00ff66 #00ccff blue;
_test: "color-scale(red, blue, 3)";
_result: red lime blue;
}
.color--scale--alpha {
_setting--color-scale-shades: 6;
_test: "color-scale(rgba(lime, 1), rgba(tan, .5))";
_result: lime rgba(73, 223, 13, 0.9) rgba(121, 193, 24, 0.8) rgba(146, 165, 33, 0.7) rgba(139, 125, 40, 0.6) rgba(115, 85, 45, 0.5);
_test: "color-scale(rgba(lime, 1), rgba(tan, .5), 3)";
_result: lime rgba(136, 178, 29, 0.75) rgba(115, 85, 45, 0.5);
}
toolkit-2.10.2/tests/controls/03-fonts.css 0000664 0000000 0000000 00000015706 13022074543 0020362 0 ustar 00root root 0000000 0000000 /**
* Ligatures
**/
.ligatures--no-extend {
_setting-extend-ligatures: false;
_test: "@include enable-ligatures(false)";
-webkit-font-feature-settings: "liga","dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-moz-font-feature-settings: "liga","dlig";
-ms-font-feature-settings: "liga","dlig";
-o-font-feature-settings: "liga","dlig";
font-feature-settings: "liga","dlig";
}
.ligatures--extend {
_setting-extend-ligatures: false;
_test: "@include enable-ligatures(true)";
}
.ligatures--extend, .ligatures--default-change {
-webkit-font-feature-settings: "liga","dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-moz-font-feature-settings: "liga","dlig";
-ms-font-feature-settings: "liga","dlig";
-o-font-feature-settings: "liga","dlig";
font-feature-settings: "liga","dlig";
}
.ligatures--default {
_setting-extend-ligatures: false;
_test: "@include enable-ligatures";
-webkit-font-feature-settings: "liga","dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-moz-font-feature-settings: "liga","dlig";
-ms-font-feature-settings: "liga","dlig";
-o-font-feature-settings: "liga","dlig";
font-feature-settings: "liga","dlig";
}
.ligatures--default-change {
_setting-extend-ligatures: true;
_test: "@include enable-ligatures";
}
/**
* Font Face
**/
.font-face {
_fonts: ("eot": "north/north.eot", "woff": "north/north.woff", "svg": "north/north.svg");
_test: "@include font-face('north', $fonts, $inline-woff: true);";
}
@font-face {
font-family: "north";
font-weight: normal;
font-style: normal;
src: url('../fonts/north/north.eot') format("embedded-opentype");
src: url('../fonts/north/north.eot#iefix') format("embedded-opentype"), url('data:application/font-woff;base64,d09GRk9UVE8AAAe0AAsAAAAAB2gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAzEAAAMx5EKqLkdTVUIAAAQ8AAAAlAAAAJTZ/t1AT1MvMgAABNAAAABgAAAAYAgi/LljbWFwAAAFMAAAAIQAAACE57UCl2dhc3AAAAW0AAAACAAAAAgAAAAQaGVhZAAABbwAAAA2AAAANv+uShVoaGVhAAAF9AAAACQAAAAkA+IB9GhtdHgAAAYYAAAATAAAAEwGrAAqbWF4cAAABmQAAAAGAAAABgATUABuYW1lAAAGbAAAAScAAAEn2n8c5XBvc3QAAAeUAAAAIAAAACAAAwAAAQAEBAABAQEGbm9ydGgAAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACuDx0AAACzER0AAAAJHQAAAygSABQBAQYLDQ8SFRgbHiEkJyotMDM4PUJHbm9ydGhub3J0aHUwdTF1MjB1NjJ1NjV1Njd1Njh1Njl1NkV1NkZ1NzJ1NzR1NzV1Nzd1RTYwMHVFNjAxdUU2MDJ1RTYwMwAAAgGJABEAEwIAAQAEAAcACgANABAAEwAWABkAHAAfACIAJQAoACsALgC4AgsCSAJL/JQO/JQO/JQO+5QO/JQO/JQO/JQO/JQO/JQO/JQO/JQO/JQO/JQO/JQO/JQO+JT4ExV4gneGdoigmJygk6N3f3SDc4Z4n3CYbItRi1xci1GLg4yDjYM0jz21WMuCe4V5i3gIi2eeaqd5eot7kH2Ti4qLi4uKi1mvYLuBgomCioGLhIuFi4SNmWGybLmLZ25de1qLCIOLgouDjLltw3rGi/dVi/X3NIv3H4uPi5CLj5+anZ6ZoAgO95T4dBX7IYv7B/sHi/shi/sh9wf7B/chi/chi/cH9weL9yGL9yH7B/cH+yGLCPcs/CwVd3d0fHKAhIiFiYSJCIuxBYufhJp9lZSLk42SjJKNk42TjpONko+Sj5GPkZCRkZGRkJKPk4+TjpWOlo2WjJeLmAiLpYOhep2Tn4qhgaMIhYsFh4yDiYCHf4d/hH2Bd5F2jnaLdot2iHiFgpGCkIOPhI+EjoaMh42Gi4eMh4uJi4mLCIqLiouLi4JzinWSd3t5gnWLcYt+jH+OgI2AjoGPg4+DkISRhZGFkYaRh5KHkoeTiQiTiJOJkomSipOJlIt9gYV8i3cIi2QFg42EjoOOcpZ0mnefd598ooCkgKaFp4uoi6iRp5amlqSaop+fn5+imqSWppankaiLCKiLp4WmgKSAonyfd593mnSWcpZwkW+LbotuhW+AcIByfHR3dwgON/dj+CYV+zn8HQWIhZGFkY0I9zfJ9zZNBZGJkZGJkQj7OfgdBYiRg4uIhQj7JvwWFfct+AaL+737LUIFDvyUDviUFPiUFYsMCgAAAAABAAAACgAeACwAAWxhdG4ACAAEAAAAAAAAAAEAAAABbGlnYQAIAAAAAQAAAAEABAAEAAAAAQAKAAAAAQAOAAQAGgAsADwAUAABAAQABgAJAAwAEgABAAQAEAAGAAgADAAHAA0ABAABAAQAEQAFAAoACwAMAAcAAQAEAA8ABwAOAAgADAAMAAUACwABAAQAEQACABIAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAwHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAHAAAAAYABAAAwAIAAEAIABiAGUAaQBvAHIAdQB35gP//f//AAAAAAAgAGIAZQBnAG4AcgB0AHfmAP/9//8AAf/j/6L/oP+f/5v/mf+Y/5caDwADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAEk5ocV8PPPUACwIAAAAAAM9HhKwAAAAAz0eErAAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAATAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAIAAAABrAAqAAAAAAAAUAAAEwAAAAAADgCuAAEAAAAAAAEACgAAAAEAAAAAAAIADgA5AAEAAAAAAAMACgAgAAEAAAAAAAQACgBHAAEAAAAAAAUAFgAKAAEAAAAAAAYABQAqAAEAAAAAAAoAKABRAAMAAQQJAAEACgAAAAMAAQQJAAIADgA5AAMAAQQJAAMACgAgAAMAAQQJAAQACgBHAAMAAQQJAAUAFgAKAAMAAQQJAAYACgAvAAMAAQQJAAoAKABRAG4AbwByAHQAaABWAGUAcgBzAGkAbwBuACAAMQAuADAAbgBvAHIAdABobm9ydGgAbgBvAHIAdABoAFIAZQBnAHUAbABhAHIAbgBvAHIAdABoAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==') format('woff'), url('../fonts/north/north.svg') format("svg");
}
/**
* Icon Font
**/
.icon-font--no-extend {
_setting-speak-icon-font: false;
_setting-extend-icon-font: false;
_test: "@include icon-font('north', $extend: false);";
font-family: "north";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-feature-settings: "liga","dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-moz-font-feature-settings: "liga","dlig";
-ms-font-feature-settings: "liga","dlig";
-o-font-feature-settings: "liga","dlig";
font-feature-settings: "liga","dlig";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-font--speak {
_setting-speak-icon-font: false;
_setting-extend-icon-font: false;
_test: "@include icon-font('north', true);";
font-family: "north";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-feature-settings: "liga","dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-moz-font-feature-settings: "liga","dlig";
-ms-font-feature-settings: "liga","dlig";
-o-font-feature-settings: "liga","dlig";
font-feature-settings: "liga","dlig";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-font--extend {
_setting-speak-icon-font: false;
_setting-extend-icon-font: false;
_test: "@include icon-font('north', $extend: true);";
font-family: "north";
speak: none;
}
.icon-font--extend {
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-feature-settings: "liga","dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-moz-font-feature-settings: "liga","dlig";
-ms-font-feature-settings: "liga","dlig";
-o-font-feature-settings: "liga","dlig";
font-feature-settings: "liga","dlig";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/**
* Content Fade In
**/
.content-fade-in--default {
_setting-fade-in-duration: 1s;
_settin-fade-in-loading-class: ".wf-loading";
_setting-fade-in-extend: false;
_test: "@include content-fade-in();";
opacity: 1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.wf-loading .content-fade-in--default {
opacity: 0;
}
.content-fade-in--extend {
_setting-fade-in-duration: 1s;
_settin-fade-in-loading-class: ".wf-loading";
_setting-fade-in-extend: false;
_test: "@include content-fade-in($extend: true);";
}
.content-fade-in--extend {
opacity: 1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.wf-loading .content-fade-in--extend {
opacity: 0;
}
toolkit-2.10.2/tests/controls/04-intrinsic-ratios.css 0000664 0000000 0000000 00000020521 13022074543 0022522 0 ustar 00root root 0000000 0000000 /**
* Intrinsic Ratio Parent
**/
.ir--parent-default {
_setting-intrinsic-ratio-extend: false;
_test: "@include intrinsic-ratio-parent;";
position: relative;
height: 0;
}
.ir--parent-extend {
_setting-intrinsic-ratio-extend: false;
_test: "@include intrinsic-ratio-parent(true);";
}
.ir--parent-extend, .ir--full-extend, .ir--ir-position {
position: relative;
height: 0;
}
/**
* Intrinsic Ratio Child
**/
.ir--child-default {
_setting-intrinsic-ratio-extend: false;
_test: "@include intrinsic-ratio-child;";
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
.ir--child-extend {
_setting-intrinsic-ratio-extend: false;
_test: "@include intrinsic-ratio-child(true);";
}
.ir--child-extend, .ir--full-extend > *, .ir--ir-position > * {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
/**
* Intrinsic Ratio Ratio
**/
.ir--ratio-default {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_test: "@include intrinsic-ratio-ratio;";
padding-top: 56.25%;
width: 100%;
}
.ir--ratio-ratio {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_test: "@include intrinsic-ratio-ratio($ratio: 4/3);";
padding-top: 75%;
width: 100%;
}
.ir--ratio-width {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_test: "@include intrinsic-ratio-ratio($width: 75%);";
padding-top: 42.1875%;
width: 75%;
}
.ir--ratio-position {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_test: "@include intrinsic-ratio-ratio($position: bottom);";
padding-bottom: 56.25%;
width: 100%;
}
.ir--ir-ratio-default {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_test: "@include ir-ratio;";
padding-top: 56.25%;
width: 100%;
}
.ir--ir-ratio-ratio {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_test: "@include ir-ratio($ratio: 4/3);";
padding-top: 75%;
width: 100%;
}
.ir--ir-ratio-width {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_test: "@include ir-ratio($width: 75%);";
padding-top: 42.1875%;
width: 75%;
}
.ir--ir-ratio-position {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_test: "@include ir-ratio($position: bottom);";
padding-bottom: 56.25%;
width: 100%;
}
/**
* Full IR Mixin
**/
.ir--full-default {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include intrinsic-ratio;";
position: relative;
height: 0;
padding-top: 56.25%;
width: 100%;
}
.ir--full-default > * {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
.ir--full-ratio {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include intrinsic-ratio($ratio: 4/3);";
position: relative;
height: 0;
padding-top: 75%;
width: 100%;
}
.ir--full-ratio > * {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
.ir--full-width {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include intrinsic-ratio($width: 75%);";
position: relative;
height: 0;
padding-top: 42.1875%;
width: 75%;
}
.ir--full-width > * {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
.ir--full-position {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include intrinsic-ratio($position: bottom);";
position: relative;
height: 0;
padding-bottom: 56.25%;
width: 100%;
}
.ir--full-position > * {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
.ir--full-elements {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include intrinsic-ratio($width: 75%);";
position: relative;
height: 0;
padding-top: 56.25%;
width: 100%;
}
.ir--full-elements iframe {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
.ir--full-extend {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include intrinsic-ratio($position: bottom);";
padding-top: 56.25%;
width: 100%;
}
/**
* Full IR Mixin (short name)
**/
.ir--ir-default {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include ir;";
position: relative;
height: 0;
padding-top: 56.25%;
width: 100%;
}
.ir--ir-default > * {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
.ir--ir-ratio {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include ir($ratio: 4/3);";
position: relative;
height: 0;
padding-top: 75%;
width: 100%;
}
.ir--ir-ratio > * {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
.ir--ir-width {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include ir($width: 75%);";
position: relative;
height: 0;
padding-top: 42.1875%;
width: 75%;
}
.ir--ir-width > * {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
.ir--ir-position {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include ir($position: bottom);";
padding-top: 56.25%;
width: 100%;
}
.ir--ir-elements {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include ir($width: 75%);";
position: relative;
height: 0;
padding-top: 56.25%;
width: 100%;
}
.ir--ir-elements iframe {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
.ir--ir-extend {
_setting-intrinsic-ratio: 1.77778;
_setting-intrinsic-ratio-width: 100%;
_setting-intrinsic-ratio-direction: top;
_setting-intrinsic-ratio-elements: "> *";
_setting-intrinsic-ratio-extend: false;
_test: "@include ir($position: bottom);";
position: relative;
height: 0;
padding-true: 56.25%;
width: 100%;
}
.ir--ir-extend > * {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
toolkit-2.10.2/tests/controls/05-kickstart.css 0000664 0000000 0000000 00000000265 13022074543 0021224 0 ustar 00root root 0000000 0000000 html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
embed,
img,
object,
video {
max-width: 100%;
height: auto;
}
toolkit-2.10.2/tests/controls/06-nested-context.css 0000664 0000000 0000000 00000002063 13022074543 0022170 0 ustar 00root root 0000000 0000000 /**
* Nested Context
**/
.nested-context--function {
_setting-nested-context-contexts: 100%;
_test: "nested-context()";
_result: 100%;
_test: "nested-context(30%)";
_result: 333.33333%;
_test: "nested-context(40% 30%)";
_result: 833.33333%;
}
.nested-context--mixin-default {
_setting-nested-context-contexts: 100%;
_setting-nested-context-contexts: left;
_test: "@include nested-context;";
width: 100%;
}
.nested-context--mixin-contexts {
_setting-nested-context-contexts: 100%;
_setting-nested-context-contexts: left;
_test: "@include nested-context($contexts: 30%);";
width: 333.33333%;
}
.nested-context--mixin-right {
_setting-nested-context-contexts: 100%;
_setting-nested-context-contexts: left;
_test: "@include nested-context($position: right);";
width: 100%;
margin-left: 0%;
}
.nested-context--mixin-center {
_setting-nested-context-contexts: 100%;
_setting-nested-context-contexts: left;
_test: "@include nested-context($position: center);";
width: 100%;
position: relative;
left: 50%;
margin-left: -50%;
}
toolkit-2.10.2/tests/controls/09-parallax.css 0000664 0000000 0000000 00000006011 13022074543 0021030 0 ustar 00root root 0000000 0000000 /**
* Parallax Init
**/
.parallax-init--default {
_setting-parallax-perspective: 1;
_setting-parallax-element: "body";
_setting-parallax-ios: true;
_test: "@include parallax-init;";
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
overflow: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
body, body * {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax-init--perspective {
_setting-parallax-perspective: 1;
_setting-parallax-element: "body";
_setting-parallax-ios: true;
_test: "@include parallax-init($perspective: .75);";
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
overflow: auto;
-webkit-perspective: 0.75px;
perspective: 0.75px;
}
body, body * {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax-init--element-this {
_setting-parallax-perspective: 1;
_setting-parallax-element: "body";
_setting-parallax-ios: true;
_test: "@include parallax-init($element: this);";
overflow: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.parallax-init--element-this, .parallax-init--element-this * {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax-init--element-that {
_setting-parallax-perspective: 1;
_setting-parallax-element: "body";
_setting-parallax-ios: true;
_test: "@include parallax-init($element: '.that');";
}
.that {
overflow: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.that, .that * {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax-init--ios {
_setting-parallax-perspective: 1;
_setting-parallax-element: "body";
_setting-parallax-ios: true;
_test: "@include parallax-init($parallax-ios: false);";
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
overflow: auto;
-webkit-perspective: 1px;
perspective: 1px;
-webkit-overflow-scrolling: touch;
}
body, body * {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/**
* Parallax Item
**/
.parallax-item--default {
_setting-parallax-distance: 0;
_setting-parallax-perspective: 1;
_test: "@include parallax;";
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
z-index: 0;
}
.parallax-item--distance {
_setting-parallax-distance: 0;
_setting-parallax-perspective: 1;
_test: "@include parallax($distance: .5);";
-webkit-transform: translateZ(0.5px) scale(0.5);
transform: translateZ(0.5px) scale(0.5);
z-index: 50;
}
.parallax-item--perspective {
_setting-parallax-distance: 0;
_setting-parallax-perspective: 1;
_test: "@include parallax($distance: 1, $perspective: 1);";
-webkit-transform: translateZ(1px) scale(0);
transform: translateZ(1px) scale(0);
z-index: 100;
_test: "@include parallax($distance: 1, $perspective: .5);";
-webkit-transform: translateZ(0.5px) scale(0);
transform: translateZ(0.5px) scale(0);
z-index: 100;
}
toolkit-2.10.2/tests/controls/11-rtl.css 0000664 0000000 0000000 00000001413 13022074543 0020017 0 ustar 00root root 0000000 0000000 /**
* RTL
**/
.rtl--single-without {
_test: "@include rtl(padding, 1.5em);";
padding: 1.5em;
}
.rtl--single-right {
_test: "@include rtl(padding-right, 1.5em);";
padding-right: 1.5em;
}
[dir="rtl"] .rtl--single-right {
padding-left: 1.5em;
}
.rtl--single-left {
_test: "@include rtl(padding-left, 1.5em);";
padding-left: 1.5em;
}
[dir="rtl"] .rtl--single-left {
padding-right: 1.5em;
}
.rtl--double {
_test: "@include rtl(padding, 1.5em 2.5em);";
padding: 1.5em 2.5em;
}
.rtl--tripple {
_test: "@include rtl(padding, 1.5em 2.5em 3.5em);";
padding: 1.5em 2.5em 3.5em;
}
.rtl--quadruple {
_test: "@include rtl(padding, 1.5em 2.5em 3.5em 4.5em);";
padding: 1.5em 2.5em 3.5em 4.5em;
}
[dir="rtl"] .rtl--quadruple {
padding: 1.5em 4.5em 3.5em 2.5em;
}
toolkit-2.10.2/tests/controls/12-triangle.css 0000664 0000000 0000000 00000010475 13022074543 0021034 0 ustar 00root root 0000000 0000000 /**
* Triangle
**/
.triangle--default {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle;";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-color: #000;
border-width: 0 0.5em 1em 0.5em;
}
.triangle--color {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($color: blue);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-color: blue;
border-width: 0 0.5em 1em 0.5em;
}
.triangle--height {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($height: 1.75em);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-color: #000;
border-width: 0 0.5em 20px 0.5em;
}
.triangle--width {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($width: 1.5rem);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-color: #000;
border-width: 0 0.75rem 1em 0.75rem;
}
.triangle--angle-number {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($angle: 72.5);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-left-color: #000;
border-width: 0.30556em 0 0.69444em 1em;
}
.triangle--angle-top {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($angle: top);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-color: #000;
border-width: 0 0.5em 1em 0.5em;
}
.triangle--angle-top-right {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($angle: top right);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-right-color: #000;
border-width: 0em 1em 1em 0;
}
.triangle--angle-right {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($angle: right);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-left-color: #000;
border-width: 0.5em 0 0.5em 1em;
}
.triangle--angle-bottom-right {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($angle: bottom right);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-color: #000;
border-width: 0 0em 1em 1em;
}
.triangle--angle-bottom {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($angle: bottom);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-top-color: #000;
border-width: 1em 0.5em 0 0.5em;
}
.triangle--angle-bottom-left {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($angle: bottom left);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-left-color: #000;
border-width: 1em 0 0em 1em;
}
.triangle--angle-left {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($angle: left);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-right-color: #000;
border-width: 0.5em 1em 0.5em 0;
}
.triangle--angle-top-left {
_setting-triangle-color: #000;
_setting-triangle-height: 1em;
_setting-triangle-width: 1em;
_setting-triangle-angle: 0;
_test: "@include triangle($angle: top left);";
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-top-color: #000;
border-width: 1em 1em 0 0em;
}
toolkit-2.10.2/tests/controls/13-center.css 0000664 0000000 0000000 00000020072 13022074543 0020502 0 ustar 00root root 0000000 0000000 /**
* Vertical Center
**/
.vertical-center-default {
_setting-vertical-midpoint: 50%;
_setting-vertical-extend: false;
_test: "@include vertical-center;";
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical-center-midpoint {
_setting-vertical-midpoint: 50%;
_setting-vertical-extend: false;
_test: "@include vertical-center($midpoint: 30%);";
top: 30%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical-center-extend {
_setting-vertical-midpoint: 50%;
_setting-vertical-extend: false;
_test: "@include vertical-center($extend: true);";
top: 50%;
}
.vertical-center-extend, .vertical-center-midpoint-extend {
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical-center-midpoint-extend {
_setting-vertical-midpoint: 50%;
_setting-vertical-extend: false;
_test: "@include vertical-center($midpoint: 40%, $extend: true);";
top: 40%;
}
/**
* Horizontal Center
**/
.horizontal-center-default {
_setting-horizontal-fixed: false;
_setting-horizontal-extend: false;
_setting-horizontal-fixed-midpoint: 50%;
_setting-horizontal-midpoint: 0%;
_test: '@include horizontal-center';
position: relative;
margin: 0 auto;
}
.horizontal-center-midpoint {
_setting-horizontal-fixed: false;
_setting-horizontal-extend: false;
_setting-horizontal-fixed-midpoint: 50%;
_setting-horizontal-midpoint: 0%;
_test: '@include horizontal-center($midpoint: -10%)';
left: -10%;
position: relative;
margin: 0 auto;
}
.horizontal-center-extend {
_setting-horizontal-fixed: false;
_setting-horizontal-extend: false;
_setting-horizontal-fixed-midpoint: 50%;
_setting-horizontal-midpoint: 0%;
_test: '@include horizontal-center($extend: true)';
}
.horizontal-center-extend {
position: relative;
margin: 0 auto;
}
.horizontal-center-fixed {
_setting-horizontal-fixed: false;
_setting-horizontal-extend: false;
_setting-horizontal-fixed-midpoint: 50%;
_setting-horizontal-midpoint: 0%;
_test: '@include horizontal-center($fixed: true)';
left: 50%;
position: fixed;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.horizontal-center-fixed-midpoint {
_setting-horizontal-fixed: false;
_setting-horizontal-extend: false;
_setting-horizontal-fixed-midpoint: 50%;
_setting-horizontal-midpoint: 0%;
_test: '@include horizontal-center($midpoint: 30%, $fixed: true)';
left: 30%;
position: fixed;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.horizontal-center-fixed-extend {
_setting-horizontal-fixed: false;
_setting-horizontal-extend: false;
_setting-horizontal-fixed-midpoint: 50%;
_setting-horizontal-midpoint: 0%;
_test: '@include horizontal-center($fixed: true, $extend: true)';
left: 50%;
}
.horizontal-center-fixed-extend {
position: fixed;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/**
* Absolute Center
**/
.absolute-center-default {
_setting-absolute-center-fixed: false;
_setting-absolute-center-extend: false;
_setting-absolute-center-vertical-midpoint: 50%;
_setting-absolute-center-fixed-horizontal-midpoint: 50%;
_setting-absolute-center-horizontal-midpoint: 0%;
_test: '@include absolute-center';
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
}
.absolute-center-vertical {
_setting-absolute-center-fixed: false;
_setting-absolute-center-extend: false;
_setting-absolute-center-vertical-midpoint: 50%;
_setting-absolute-center-fixed-horizontal-midpoint: 50%;
_setting-absolute-center-horizontal-midpoint: 0%;
_test: '@include absolute-center($vertical: 30%)';
top: 30%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
}
.absolute-center-horizontal {
_setting-absolute-center-fixed: false;
_setting-absolute-center-extend: false;
_setting-absolute-center-vertical-midpoint: 50%;
_setting-absolute-center-fixed-horizontal-midpoint: 50%;
_setting-absolute-center-horizontal-midpoint: 0%;
_test: '@include absolute-center($horizontal: 30%)';
top: 50%;
left: 30%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
}
.absolute-center-extend {
_setting-absolute-center-fixed: false;
_setting-absolute-center-extend: false;
_setting-absolute-center-vertical-midpoint: 50%;
_setting-absolute-center-fixed-horizontal-midpoint: 50%;
_setting-absolute-center-horizontal-midpoint: 0%;
_test: '@include absolute-center($extend: true)';
top: 50%;
}
.absolute-center-extend, .absolute-center-horizontal-extend {
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
}
.absolute-center-horizontal-extend {
_setting-absolute-center-fixed: false;
_setting-absolute-center-extend: false;
_setting-absolute-center-vertical-midpoint: 50%;
_setting-absolute-center-fixed-horizontal-midpoint: 50%;
_setting-absolute-center-horizontal-midpoint: 0%;
_test: '@include absolute-center($horizontal: 30%, $extend: true)';
top: 50%;
left: 30%;
}
.absolute-center-fixed {
_setting-absolute-center-fixed: false;
_setting-absolute-center-extend: false;
_setting-absolute-center-vertical-midpoint: 50%;
_setting-absolute-center-fixed-horizontal-midpoint: 50%;
_setting-absolute-center-horizontal-midpoint: 0%;
_test: '@include absolute-center($fixed: true)';
top: 50%;
left: 50%;
position: fixed;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.absolute-center-fixed-vertical {
_setting-absolute-center-fixed: false;
_setting-absolute-center-extend: false;
_setting-absolute-center-vertical-midpoint: 50%;
_setting-absolute-center-fixed-horizontal-midpoint: 50%;
_setting-absolute-center-horizontal-midpoint: 0%;
_test: '@include absolute-center($vertical: 30%)';
top: 30%;
left: 50%;
position: fixed;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.absolute-center-fixed-horizontal {
_setting-absolute-center-fixed: false;
_setting-absolute-center-extend: false;
_setting-absolute-center-vertical-midpoint: 50%;
_setting-absolute-center-fixed-horizontal-midpoint: 50%;
_setting-absolute-center-horizontal-midpoint: 0%;
_test: '@include absolute-center($horizontal: 30%)';
top: 50%;
left: 30%;
position: fixed;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.absolute-center-fixed-extend {
_setting-absolute-center-fixed: false;
_setting-absolute-center-extend: false;
_setting-absolute-center-vertical-midpoint: 50%;
_setting-absolute-center-fixed-horizontal-midpoint: 50%;
_setting-absolute-center-horizontal-midpoint: 0%;
_test: '@include absolute-center($extend: true, $fixed: true)';
top: 50%;
left: 50%;
}
.absolute-center-fixed-extend, .absolute-center-fixed-horizontal-extend {
position: fixed;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.absolute-center-fixed-horizontal-extend {
_setting-absolute-center-fixed: false;
_setting-absolute-center-extend: false;
_setting-absolute-center-vertical-midpoint: 50%;
_setting-absolute-center-fixed-horizontal-midpoint: 50%;
_setting-absolute-center-horizontal-midpoint: 0%;
_test: '@include absolute-center($horizontal: 30%, $extend: true, $fixed: true)';
top: 50%;
left: 30%;
}
toolkit-2.10.2/tests/controls/13-vertical-center.css 0000664 0000000 0000000 00000002161 13022074543 0022310 0 ustar 00root root 0000000 0000000 /**
* Vertical Center
**/
.vertical-center-default {
_setting-vertical-midpoint: 50%;
_setting-vertical-extend: false;
_test: "@include vertical-center;";
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical-center-midpoint {
_setting-vertical-midpoint: 50%;
_setting-vertical-extend: false;
_test: "@include vertical-center($midpoint: 30%);";
top: 30%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical-center-extend {
_setting-vertical-midpoint: 50%;
_setting-vertical-extend: false;
_test: "@include vertical-center($extend: true);";
top: 50%;
}
.vertical-center-extend, .vertical-center-midpoint-extend {
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical-center-midpoint-extend {
_setting-vertical-midpoint: 50%;
_setting-vertical-extend: false;
_test: "@include vertical-center($midpoint: 40%, $extend: true);";
top: 40%;
}
toolkit-2.10.2/tests/controls/14-viewport.css 0000664 0000000 0000000 00000000401 13022074543 0021074 0 ustar 00root root 0000000 0000000 /**
* Viewport
**/
.viewport {
_test: "@at-root { @include viewport { width: 320px auto; }}";
}
@-webkit-viewport {
width: 320px auto;
}
@-moz-viewport {
width: 320px auto;
}
@-ms-viewport {
width: 320px auto;
}
@viewport {
width: 320px auto;
}
toolkit-2.10.2/tests/controls/15-underline.css 0000664 0000000 0000000 00000007724 13022074543 0021222 0 ustar 00root root 0000000 0000000 /**
* Underline
**/
.underline-default {
_setting-underline-background: #fff;
_setting-underline-color: #00e;
_setting-underline-clear-descenders: true;
_setting-underline-distance: 1;
_setting-underline-width: 2;
_test: "@include underline";
text-decoration: none;
background-repeat: repeat-x;
background-image: linear-gradient(to top, #fff 75%, #00e 75%);
background-size: 0.125em 0.1875em;
background-position: 0 1.125em;
text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
}
.underline-background {
_setting-underline-background: #fff;
_setting-underline-color: #00e;
_setting-underline-clear-descenders: true;
_setting-underline-distance: 1;
_setting-underline-width: 2;
_test: "@include underline($background: #f00)";
text-decoration: none;
background-repeat: repeat-x;
background-image: linear-gradient(to top, #f00 75%, #00e 75%);
background-size: 0.125em 0.1875em;
background-position: 0 1.125em;
text-shadow: 0.0625em 0.0625em 0 #f00, -0.0625em 0 0 #f00;
}
.underline-color {
_setting-underline-background: #fff;
_setting-underline-color: #00e;
_setting-underline-clear-descenders: true;
_setting-underline-distance: 1;
_setting-underline-width: 2;
_test: "@include underline($color: #f00)";
text-decoration: none;
background-repeat: repeat-x;
background-image: linear-gradient(to top, #fff 75%, #f00 75%);
background-size: 0.125em 0.1875em;
background-position: 0 1.125em;
text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
}
.underline-clear-descenders {
_setting-underline-background: #fff;
_setting-underline-color: #00e;
_setting-underline-clear-descenders: true;
_setting-underline-distance: 1;
_setting-underline-width: 2;
_test: "@include underline($clear-descenders: false)";
text-decoration: none;
background-repeat: repeat-x;
background-image: linear-gradient(to top, #fff 75%, #00e 75%);
background-size: 0.125em 0.1875em;
background-position: 0 1.125em;
}
.underline-distance {
_setting-underline-background: #fff;
_setting-underline-color: #00e;
_setting-underline-clear-descenders: true;
_setting-underline-distance: 1;
_setting-underline-width: 2;
_test: "@include underline($distance: 2)";
text-decoration: none;
background-repeat: repeat-x;
background-image: linear-gradient(to top, #fff 75%, #00e 75%);
background-size: 0.125em 0.1875em;
background-position: 0 2.125em;
text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
}
.underline-width {
_setting-underline-background: #fff;
_setting-underline-color: #00e;
_setting-underline-clear-descenders: true;
_setting-underline-distance: 1;
_setting-underline-width: 2;
_test: "@include underline($width: 1)";
text-decoration: none;
background-repeat: repeat-x;
background-image: linear-gradient(to top, #fff 75%, #00e 75%);
background-size: 0.125em 0.125em;
background-position: 0 1.0625em;
text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
}
.underline-first-extend {
_setting-underline-background: #fff;
_setting-underline-color: #00e;
_setting-underline-clear-descenders: true;
_setting-underline-distance: 1;
_setting-underline-width: 2;
_test: "@include underline($background: green, $extend: true)";
background-image: linear-gradient(to top, green 75%, #00e 75%);
background-size: 0.125em 0.1875em;
background-position: 0 1.125em;
text-shadow: 0.0625em 0.0625em 0 green, -0.0625em 0 0 green;
}
.underline-first-extend, .underline-second-extend {
text-decoration: none;
background-repeat: repeat-x;
}
.underline-second-extend {
_setting-underline-background: #fff;
_setting-underline-color: #00e;
_setting-underline-clear-descenders: true;
_setting-underline-distance: 1;
_setting-underline-width: 2;
_test: "@include underline($color: green, $extend: true)";
background-image: linear-gradient(to top, #fff 75%, green 75%);
background-size: 0.125em 0.1875em;
background-position: 0 1.125em;
text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
}
toolkit-2.10.2/tests/controls/16-target.css 0000664 0000000 0000000 00000000262 13022074543 0020512 0 ustar 00root root 0000000 0000000 /**
* Target
**/
.target {
_test: "@include target(test-target) { content: bar }";
}
/*! @{target: test-target} */
.target {
content: bar;
}
/*! {target: test-target}@ */
toolkit-2.10.2/tests/controls/17-art.css 0000664 0000000 0000000 00000022400 13022074543 0020011 0 ustar 00root root 0000000 0000000 /**
* Art
**/
.target {
/* Default Size */
_test: "@include art(xxxxxxx xxxxxxxxxx xxxxxx xxxxxxn nxxxxxxx xxxxxxxxxxxx xxxxxxx xxxxxxxn n xxx xxx xxx xxxxxx xxxxx n n xxx xxxxxxxxx xxxxxxx xxxxxxx n n xxx xxxxxxxxx xxx xxxxxxx xxx n n xxx xxx xxx xxx xxxxx xxx n nxxxxxxx xxxxxxxxxxxx xxxxx xxx xxxxxn nxxxxxxx xxxxxxxxxx xxxxx x xxxxx)";
height: 1px;
width: 1px;
border-radius: 0%;
box-shadow: 1px 1px 0 black, 2px 1px 0 black, 3px 1px 0 black, 4px 1px 0 black, 5px 1px 0 black, 6px 1px 0 black, 7px 1px 0 black, 9px 1px 0 black, 10px 1px 0 black, 11px 1px 0 black, 12px 1px 0 black, 13px 1px 0 black, 14px 1px 0 black, 15px 1px 0 black, 16px 1px 0 black, 17px 1px 0 black, 18px 1px 0 black, 22px 1px 0 black, 23px 1px 0 black, 24px 1px 0 black, 25px 1px 0 black, 26px 1px 0 black, 27px 1px 0 black, 35px 1px 0 black, 36px 1px 0 black, 37px 1px 0 black, 38px 1px 0 black, 39px 1px 0 black, 40px 1px 0 black, 1px 3px 0 black, 2px 3px 0 black, 3px 3px 0 black, 4px 3px 0 black, 5px 3px 0 black, 6px 3px 0 black, 7px 3px 0 black, 9px 3px 0 black, 10px 3px 0 black, 11px 3px 0 black, 12px 3px 0 black, 13px 3px 0 black, 14px 3px 0 black, 15px 3px 0 black, 16px 3px 0 black, 17px 3px 0 black, 18px 3px 0 black, 19px 3px 0 black, 20px 3px 0 black, 22px 3px 0 black, 23px 3px 0 black, 24px 3px 0 black, 25px 3px 0 black, 26px 3px 0 black, 27px 3px 0 black, 28px 3px 0 black, 34px 3px 0 black, 35px 3px 0 black, 36px 3px 0 black, 37px 3px 0 black, 38px 3px 0 black, 39px 3px 0 black, 40px 3px 0 black, 3px 5px 0 black, 4px 5px 0 black, 5px 5px 0 black, 11px 5px 0 black, 12px 5px 0 black, 13px 5px 0 black, 18px 5px 0 black, 19px 5px 0 black, 20px 5px 0 black, 24px 5px 0 black, 25px 5px 0 black, 26px 5px 0 black, 27px 5px 0 black, 28px 5px 0 black, 29px 5px 0 black, 34px 5px 0 black, 35px 5px 0 black, 36px 5px 0 black, 37px 5px 0 black, 38px 5px 0 black, 3px 7px 0 black, 4px 7px 0 black, 5px 7px 0 black, 11px 7px 0 black, 12px 7px 0 black, 13px 7px 0 black, 14px 7px 0 black, 15px 7px 0 black, 16px 7px 0 black, 17px 7px 0 black, 18px 7px 0 black, 19px 7px 0 black, 24px 7px 0 black, 25px 7px 0 black, 26px 7px 0 black, 27px 7px 0 black, 28px 7px 0 black, 29px 7px 0 black, 30px 7px 0 black, 32px 7px 0 black, 33px 7px 0 black, 34px 7px 0 black, 35px 7px 0 black, 36px 7px 0 black, 37px 7px 0 black, 38px 7px 0 black, 3px 9px 0 black, 4px 9px 0 black, 5px 9px 0 black, 11px 9px 0 black, 12px 9px 0 black, 13px 9px 0 black, 14px 9px 0 black, 15px 9px 0 black, 16px 9px 0 black, 17px 9px 0 black, 18px 9px 0 black, 19px 9px 0 black, 24px 9px 0 black, 25px 9px 0 black, 26px 9px 0 black, 28px 9px 0 black, 29px 9px 0 black, 30px 9px 0 black, 31px 9px 0 black, 32px 9px 0 black, 33px 9px 0 black, 34px 9px 0 black, 36px 9px 0 black, 37px 9px 0 black, 38px 9px 0 black, 3px 11px 0 black, 4px 11px 0 black, 5px 11px 0 black, 11px 11px 0 black, 12px 11px 0 black, 13px 11px 0 black, 18px 11px 0 black, 19px 11px 0 black, 20px 11px 0 black, 24px 11px 0 black, 25px 11px 0 black, 26px 11px 0 black, 29px 11px 0 black, 30px 11px 0 black, 31px 11px 0 black, 32px 11px 0 black, 33px 11px 0 black, 36px 11px 0 black, 37px 11px 0 black, 38px 11px 0 black, 1px 13px 0 black, 2px 13px 0 black, 3px 13px 0 black, 4px 13px 0 black, 5px 13px 0 black, 6px 13px 0 black, 7px 13px 0 black, 9px 13px 0 black, 10px 13px 0 black, 11px 13px 0 black, 12px 13px 0 black, 13px 13px 0 black, 14px 13px 0 black, 15px 13px 0 black, 16px 13px 0 black, 17px 13px 0 black, 18px 13px 0 black, 19px 13px 0 black, 20px 13px 0 black, 22px 13px 0 black, 23px 13px 0 black, 24px 13px 0 black, 25px 13px 0 black, 26px 13px 0 black, 30px 13px 0 black, 31px 13px 0 black, 32px 13px 0 black, 36px 13px 0 black, 37px 13px 0 black, 38px 13px 0 black, 39px 13px 0 black, 40px 13px 0 black, 1px 15px 0 black, 2px 15px 0 black, 3px 15px 0 black, 4px 15px 0 black, 5px 15px 0 black, 6px 15px 0 black, 7px 15px 0 black, 9px 15px 0 black, 10px 15px 0 black, 11px 15px 0 black, 12px 15px 0 black, 13px 15px 0 black, 14px 15px 0 black, 15px 15px 0 black, 16px 15px 0 black, 17px 15px 0 black, 18px 15px 0 black, 22px 15px 0 black, 23px 15px 0 black, 24px 15px 0 black, 25px 15px 0 black, 26px 15px 0 black, 31px 15px 0 black, 36px 15px 0 black, 37px 15px 0 black, 38px 15px 0 black, 39px 15px 0 black, 40px 15px 0 black;
/* Changed Size */
_test: "@include art(xxxxxxx xxxxxxxxxx xxxxxx xxxxxxn nxxxxxxx xxxxxxxxxxxx xxxxxxx xxxxxxxn n xxx xxx xxx xxxxxx xxxxx n n xxx xxxxxxxxx xxxxxxx xxxxxxx n n xxx xxxxxxxxx xxx xxxxxxx xxx n n xxx xxx xxx xxx xxxxx xxx n nxxxxxxx xxxxxxxxxxxx xxxxx xxx xxxxxn nxxxxxxx xxxxxxxxxx xxxxx x xxxxx, 5px)";
height: 5px;
width: 5px;
border-radius: 0%;
box-shadow: 5px 5px 0 black, 10px 5px 0 black, 15px 5px 0 black, 20px 5px 0 black, 25px 5px 0 black, 30px 5px 0 black, 35px 5px 0 black, 45px 5px 0 black, 50px 5px 0 black, 55px 5px 0 black, 60px 5px 0 black, 65px 5px 0 black, 70px 5px 0 black, 75px 5px 0 black, 80px 5px 0 black, 85px 5px 0 black, 90px 5px 0 black, 110px 5px 0 black, 115px 5px 0 black, 120px 5px 0 black, 125px 5px 0 black, 130px 5px 0 black, 135px 5px 0 black, 175px 5px 0 black, 180px 5px 0 black, 185px 5px 0 black, 190px 5px 0 black, 195px 5px 0 black, 200px 5px 0 black, 5px 15px 0 black, 10px 15px 0 black, 15px 15px 0 black, 20px 15px 0 black, 25px 15px 0 black, 30px 15px 0 black, 35px 15px 0 black, 45px 15px 0 black, 50px 15px 0 black, 55px 15px 0 black, 60px 15px 0 black, 65px 15px 0 black, 70px 15px 0 black, 75px 15px 0 black, 80px 15px 0 black, 85px 15px 0 black, 90px 15px 0 black, 95px 15px 0 black, 100px 15px 0 black, 110px 15px 0 black, 115px 15px 0 black, 120px 15px 0 black, 125px 15px 0 black, 130px 15px 0 black, 135px 15px 0 black, 140px 15px 0 black, 170px 15px 0 black, 175px 15px 0 black, 180px 15px 0 black, 185px 15px 0 black, 190px 15px 0 black, 195px 15px 0 black, 200px 15px 0 black, 15px 25px 0 black, 20px 25px 0 black, 25px 25px 0 black, 55px 25px 0 black, 60px 25px 0 black, 65px 25px 0 black, 90px 25px 0 black, 95px 25px 0 black, 100px 25px 0 black, 120px 25px 0 black, 125px 25px 0 black, 130px 25px 0 black, 135px 25px 0 black, 140px 25px 0 black, 145px 25px 0 black, 170px 25px 0 black, 175px 25px 0 black, 180px 25px 0 black, 185px 25px 0 black, 190px 25px 0 black, 15px 35px 0 black, 20px 35px 0 black, 25px 35px 0 black, 55px 35px 0 black, 60px 35px 0 black, 65px 35px 0 black, 70px 35px 0 black, 75px 35px 0 black, 80px 35px 0 black, 85px 35px 0 black, 90px 35px 0 black, 95px 35px 0 black, 120px 35px 0 black, 125px 35px 0 black, 130px 35px 0 black, 135px 35px 0 black, 140px 35px 0 black, 145px 35px 0 black, 150px 35px 0 black, 160px 35px 0 black, 165px 35px 0 black, 170px 35px 0 black, 175px 35px 0 black, 180px 35px 0 black, 185px 35px 0 black, 190px 35px 0 black, 15px 45px 0 black, 20px 45px 0 black, 25px 45px 0 black, 55px 45px 0 black, 60px 45px 0 black, 65px 45px 0 black, 70px 45px 0 black, 75px 45px 0 black, 80px 45px 0 black, 85px 45px 0 black, 90px 45px 0 black, 95px 45px 0 black, 120px 45px 0 black, 125px 45px 0 black, 130px 45px 0 black, 140px 45px 0 black, 145px 45px 0 black, 150px 45px 0 black, 155px 45px 0 black, 160px 45px 0 black, 165px 45px 0 black, 170px 45px 0 black, 180px 45px 0 black, 185px 45px 0 black, 190px 45px 0 black, 15px 55px 0 black, 20px 55px 0 black, 25px 55px 0 black, 55px 55px 0 black, 60px 55px 0 black, 65px 55px 0 black, 90px 55px 0 black, 95px 55px 0 black, 100px 55px 0 black, 120px 55px 0 black, 125px 55px 0 black, 130px 55px 0 black, 145px 55px 0 black, 150px 55px 0 black, 155px 55px 0 black, 160px 55px 0 black, 165px 55px 0 black, 180px 55px 0 black, 185px 55px 0 black, 190px 55px 0 black, 5px 65px 0 black, 10px 65px 0 black, 15px 65px 0 black, 20px 65px 0 black, 25px 65px 0 black, 30px 65px 0 black, 35px 65px 0 black, 45px 65px 0 black, 50px 65px 0 black, 55px 65px 0 black, 60px 65px 0 black, 65px 65px 0 black, 70px 65px 0 black, 75px 65px 0 black, 80px 65px 0 black, 85px 65px 0 black, 90px 65px 0 black, 95px 65px 0 black, 100px 65px 0 black, 110px 65px 0 black, 115px 65px 0 black, 120px 65px 0 black, 125px 65px 0 black, 130px 65px 0 black, 150px 65px 0 black, 155px 65px 0 black, 160px 65px 0 black, 180px 65px 0 black, 185px 65px 0 black, 190px 65px 0 black, 195px 65px 0 black, 200px 65px 0 black, 5px 75px 0 black, 10px 75px 0 black, 15px 75px 0 black, 20px 75px 0 black, 25px 75px 0 black, 30px 75px 0 black, 35px 75px 0 black, 45px 75px 0 black, 50px 75px 0 black, 55px 75px 0 black, 60px 75px 0 black, 65px 75px 0 black, 70px 75px 0 black, 75px 75px 0 black, 80px 75px 0 black, 85px 75px 0 black, 90px 75px 0 black, 110px 75px 0 black, 115px 75px 0 black, 120px 75px 0 black, 125px 75px 0 black, 130px 75px 0 black, 155px 75px 0 black, 180px 75px 0 black, 185px 75px 0 black, 190px 75px 0 black, 195px 75px 0 black, 200px 75px 0 black;
}
toolkit-2.10.2/tests/controls/17-set-multiple.css 0000664 0000000 0000000 00000000370 13022074543 0021651 0 ustar 00root root 0000000 0000000 /**
* Set Multiple
**/
.property {
_test: "@include set-multiple(30px, margin-left margin-right);";
margin-left: 30px;
margin-right: 30px;
}
.property {
_test: "@include set-multiple(50%, width, height);";
width: 50%;
height: 50%;
}
toolkit-2.10.2/tests/fonts/ 0000775 0000000 0000000 00000000000 13022074543 0015554 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/tests/fonts/north/ 0000775 0000000 0000000 00000000000 13022074543 0016706 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/tests/fonts/north/north.eot 0000775 0000000 0000000 00000005074 13022074543 0020562 0 ustar 00root root 0000000 0000000 <
LP qhN
n o r t h R e g u l a r V e r s i o n 1 . 0
n o r t h @GSUB@ OS/2" ` `cmap gasp D glyfnv; L headJ h 6hhea $hmtx * Lloca (maxp 8 name X 'post
, latn liga
, < P
Lf GLf @ p b e i o r u w b e g n r t w 79 79 79 79 79 79 79 79 79 79 79 79 79 79 i >7.#".' ".'08 "#*&' 3#*&# 32>5<5>7 ' !=70
!#&)+HpL'
& '
" 6Vk4 " 32>54.##54.'626272>362>7>3>7>74>454.'>4&'&"#."'.'.#."&#*#0"0"1 23 .'.'.'.54>7>7>7>32 5]F((F]55]F((F]5
(F]55]F((F]55]F(h
&
'
* ?>'."ϥw>>~rI 79 _< G G *
( 2 < F P Z d n x V
9
G
*
( Q
9
G
/
( Q n o r t h V e r s i o n 1 . 0 n o r t hnorth n o r t h R e g u l a r n o r t h G e n e r a t e d b y I c o M o o n toolkit-2.10.2/tests/fonts/north/north.svg 0000775 0000000 0000000 00000013705 13022074543 0020572 0 ustar 00root root 0000000 0000000
toolkit-2.10.2/tests/fonts/north/north.ttf 0000775 0000000 0000000 00000004640 13022074543 0020566 0 ustar 00root root 0000000 0000000 @GSUB@ OS/2" ` `cmap gasp D glyfnv; L headJ h 6hhea $hmtx * Lloca (maxp 8 name X 'post
, latn liga
, < P
Lf GLf @ p b e i o r u w b e g n r t w 79 79 79 79 79 79 79 79 79 79 79 79 79 79 i >7.#".' ".'08 "#*&' 3#*&# 32>5<5>7 ' !=70
!#&)+HpL'
& '
" 6Vk4 " 32>54.##54.'626272>362>7>3>7>74>454.'>4&'&"#."'.'.#."&#*#0"0"1 23 .'.'.'.54>7>7>7>32 5]F((F]55]F((F]5
(F]55]F((F]55]F(h
&
'
* ?>'."ϥw>>~rI 79 _< G G *
( 2 < F P Z d n x V
9
G
*
( Q
9
G
/
( Q n o r t h V e r s i o n 1 . 0 n o r t hnorth n o r t h R e g u l a r n o r t h G e n e r a t e d b y I c o M o o n toolkit-2.10.2/tests/fonts/north/north.woff 0000775 0000000 0000000 00000003664 13022074543 0020737 0 ustar 00root root 0000000 0000000 wOFFOTTO h CFF 1 1B.GSUB < @OS/2 ` `"cmap 0 gasp head 6 6Jhhea $ $hmtx L L *maxp d P name l ' ' post north :
S
S kt (
!$'*-038=BGnorthnorthu0u1u20u62u65u67u68u69u6Eu6Fu72u74u75u77uE600uE601uE602uE603
" % ( + . HKxwvwtsxplQ\\Q4=X˂{yxgjyz{}Y`algn]{ZmzƋU4 t!!!!!!!!,,wwt|r}z}wvvvvxsuw{yuq~}|wdrtww||wwtrponnopr|tww7c&9 76M9 &--B
, latn liga
, < P
Lf GLf @ p b e i o r u w b e g n r t w Nhq_< G G * P
9
G
*
( Q
9
G
/
( Q n o r t h V e r s i o n 1 . 0 n o r t hnorth n o r t h R e g u l a r n o r t h G e n e r a t e d b y I c o M o o n toolkit-2.10.2/tests/index.js 0000664 0000000 0000000 00000003217 13022074543 0016073 0 ustar 00root root 0000000 0000000 var sass = require('node-sass'),
jsdiff = require('diff'),
fs = require('fs-extra'),
i = 0,
glob = require('glob');
glob('./tests/**/*.scss', function (err, files) {
if (err) throw err;
files.forEach(function (file) {
if (file.charAt(0) !== '_') {
sass.render({
file: file,
outputStyle: 'expanded',
includePaths: [
'../stylesheets/'
]
}, function(err, result) {
if (err) throw err;
// console.log(result);
var file = result.stats.entry.replace(process.cwd() + '/tests/', '');
file = file.replace('.scss', '.css');
if (file.charAt(0) !== '_') {
fs.readFile('./controls/' + file, function (ctrlErr, ctrlFile) {
var diff = jsdiff.diffCss(ctrlFile.toString(), result.css.toString()),
diffCount = 0;
diff.forEach(function(part){
// green for additions, red for deletions
// grey for common parts
var color = part.added ? 'green' :
part.removed ? 'red' : 'grey';
if (color !== 'grey') {
diffCount++;
}
});
if (diffCount) {
console.log(file);
diff = jsdiff.createPatch(file, ctrlFile.toString(), result.css.toString());
fs.outputFile('./diff/' + file + '.diff', diff, function (writeErr, writePatch) {
if (writeErr) throw writeErr;
// throw 'Diff in output for ' + file;
});
}
});
}
});
}
});
});
toolkit-2.10.2/tests/tests/ 0000775 0000000 0000000 00000000000 13022074543 0015565 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/tests/tests/.gitkeep 0000664 0000000 0000000 00000000000 13022074543 0017204 0 ustar 00root root 0000000 0000000 toolkit-2.10.2/tests/tests/00-base.scss 0000664 0000000 0000000 00000000022 13022074543 0017603 0 ustar 00root root 0000000 0000000 @import "toolkit"; toolkit-2.10.2/tests/tests/01-clearfix.scss 0000664 0000000 0000000 00000000434 13022074543 0020476 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Clearfix Mixin
**/
.clearfix {
_setting--clearfix-extend: toolkit-get('clearfix extend');
&--no-extend {
_test: "@include clearfix;";
@include clearfix;
}
&--extend {
_test: "@include clearfix(true)";
@include clearfix(true);
}
} toolkit-2.10.2/tests/tests/02-colors.scss 0000664 0000000 0000000 00000005357 13022074543 0020214 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Colors Tints and Shades
**/
.color {
&--tint {
_setting--tint-color: toolkit-get('tint color');
_test: "tint(#b4d455, 25%)";
_result: tint(#b4d455, 25%);
/* Set New Tint Color */
@include toolkit-set('tint color', #eee);
_setting--tint-color: toolkit-get('tint color');
_test: "tint(#b4d455, 25%)";
_result: tint(#b4d455, 25%);
}
&--shade {
_setting--shade-color: toolkit-get('shade color');
_test: "shade(#b4d455, 25%)";
_result: shade(#b4d455, 25%);
/* Set New Shade Color */
@include toolkit-set('shade color', #111);
_setting--shade-color: toolkit-get('shade color');
_test: "shade(#b4d455, 25%)";
_result: shade(#b4d455, 25%);
}
}
/**
* Luma
**/
.color {
&--luma {
_test: "luma(#b4d455)";
_result: luma(#b4d455);
}
&--luma-gte {
_test: "luma-gte(#b4d455, #c0ffee)";
_result: luma-gte(#b4d455, #c0ffee);
}
&--luma-lte {
_test: "luma-lte(#b4d455, #c0ffee)";
_result: luma-lte(#b4d455, #c0ffee);
}
&--luma-diff {
_test: "luma-diff(#b4d455, #c0ffee)";
_result: luma-diff(#b4d455, #c0ffee);
}
}
/**
* Color Stacks
**/
.color {
&--stack {
_setting--color-stack-amounts: toolkit-get('color stack amounts');
_test: "color-stack(red, blue)";
_result: inspect(color-stack(red, blue));
_test: "color-stack(red, blue, 15%, 20%, 25%, 30%)";
_result: inspect(color-stack(red, blue, 15%, 20%, 25%, 30%));
}
&--tint-stack {
_setting--tint-color: toolkit-get('tint color');
_test: "tint-stack(red, 15%, 20%, 25%, 30%)";
_result: inspect(tint-stack(red, 15%, 20%, 25%, 30%));
}
&--tint-stack {
_setting--shade-color: toolkit-get('shade color');
_test: "shade-stack(red, 15%, 20%, 25%, 30%)";
_result: inspect(shade-stack(red, 15%, 20%, 25%, 30%));
}
&--tint-shade-stack {
_setting--tint-shade-stack-amounts: toolkit-get('tint shade amounts');
_test: "tint-shade-stack(red)";
_result: inspect(tint-shade-stack(red));
_test: "tint-shade-stack(red, blue, 15%, 20%, 25%, 30%)";
_result: inspect(tint-shade-stack(red, 15%, 20%, 25%, 30%));
}
}
/**
* Color Scales
**/
.color--scale {
&--no-alpha {
_setting--color-scale-shades: toolkit-get('color scale steps');
_test: "color-scale(red, blue)";
_result: inspect(color-scale(red, blue));
_test: "color-scale(red, blue, 3)";
_result: inspect(color-scale(red, blue, 3));
}
&--alpha {
_setting--color-scale-shades: toolkit-get('color scale steps');
_test: "color-scale(rgba(lime, 1), rgba(tan, .5))";
_result: inspect(color-scale(rgba(lime, 1), rgba(tan, .5)));
_test: "color-scale(rgba(lime, 1), rgba(tan, .5), 3)";
_result: inspect(color-scale(rgba(lime, 1), rgba(tan, .5), 3));
}
} toolkit-2.10.2/tests/tests/03-fonts.scss 0000664 0000000 0000000 00000004647 13022074543 0020046 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Ligatures
**/
.ligatures {
&--no-extend {
_setting-extend-ligatures: toolkit-get('ligature extend');
_test: "@include enable-ligatures(false)";
@include enable-ligatures(false);
}
&--extend {
_setting-extend-ligatures: toolkit-get('ligature extend');
_test: "@include enable-ligatures(true)";
@include enable-ligatures(true);
}
&--default {
_setting-extend-ligatures: toolkit-get('ligature extend');
_test: "@include enable-ligatures";
@include enable-ligatures;
}
&--default-change {
@include toolkit-set('ligature extend', true);
_setting-extend-ligatures: toolkit-get('ligature extend');
_test: "@include enable-ligatures";
@include enable-ligatures;
}
}
/**
* Font Face
**/
$fonts: (
'eot': 'north/north.eot',
'woff': 'north/north.woff',
'svg': 'north/north.svg'
);
.font-face {
_fonts: inspect($fonts);
_test: "@include font-face('north', $fonts, $inline-woff: true);";
}
@include font-face('north', $fonts, $inline-woff: true);
/**
* Icon Font
**/
.icon-font {
&--no-extend {
_setting-speak-icon-font: toolkit-get('icon font speak');
_setting-extend-icon-font: toolkit-get('icon font extend');
_test: "@include icon-font('north', $extend: false);";
@include icon-font('north', $extend: false);
}
&--speak {
_setting-speak-icon-font: toolkit-get('icon font speak');
_setting-extend-icon-font: toolkit-get('icon font extend');
_test: "@include icon-font('north', true);";
@include icon-font('north', true);
}
&--extend {
_setting-speak-icon-font: toolkit-get('icon font speak');
_setting-extend-icon-font: toolkit-get('icon font extend');
_test: "@include icon-font('north', $extend: true);";
@include icon-font('north', $extend: true);
}
}
/**
* Content Fade In
**/
.content-fade-in {
&--default {
_setting-fade-in-duration: toolkit-get('fade in duration');
_settin-fade-in-loading-class: toolkit-get('fade in loading class');
_setting-fade-in-extend: toolkit-get('fade in extend');
_test: "@include content-fade-in();";
@include content-fade-in();
}
&--extend {
_setting-fade-in-duration: toolkit-get('fade in duration');
_settin-fade-in-loading-class: toolkit-get('fade in loading class');
_setting-fade-in-extend: toolkit-get('fade in extend');
_test: "@include content-fade-in($extend: true);";
@include content-fade-in($extend: true);
}
} toolkit-2.10.2/tests/tests/04-intrinsic-ratios.scss 0000664 0000000 0000000 00000022361 13022074543 0022210 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Intrinsic Ratio Parent
**/
.ir {
// Parent
&--parent-default {
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include intrinsic-ratio-parent;";
@include intrinsic-ratio-parent;
}
&--parent-extend {
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include intrinsic-ratio-parent(true);";
@include intrinsic-ratio-parent(true);
}
}
/**
* Intrinsic Ratio Child
**/
.ir {
// Child
&--child-default {
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include intrinsic-ratio-child;";
@include intrinsic-ratio-child;
}
&--child-extend {
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include intrinsic-ratio-child(true);";
@include intrinsic-ratio-child(true);
}
}
/**
* Intrinsic Ratio Ratio
**/
.ir {
// Ratio
&--ratio-default {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_test: "@include intrinsic-ratio-ratio;";
@include intrinsic-ratio-ratio;
}
&--ratio-ratio {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_test: "@include intrinsic-ratio-ratio($ratio: 4/3);";
@include intrinsic-ratio-ratio($ratio: 4/3);
}
&--ratio-width {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_test: "@include intrinsic-ratio-ratio($width: 75%);";
@include intrinsic-ratio-ratio($width: 75%);
}
&--ratio-position {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_test: "@include intrinsic-ratio-ratio($position: bottom);";
@include intrinsic-ratio-ratio($position: bottom);
}
&--ir-ratio-default {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_test: "@include ir-ratio;";
@include ir-ratio;
}
&--ir-ratio-ratio {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_test: "@include ir-ratio($ratio: 4/3);";
@include ir-ratio($ratio: 4/3);
}
&--ir-ratio-width {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_test: "@include ir-ratio($width: 75%);";
@include ir-ratio($width: 75%);
}
&--ir-ratio-position {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_test: "@include ir-ratio($position: bottom);";
@include ir-ratio($position: bottom);
}
}
/**
* Full IR Mixin
**/
.ir {
// Full
&--full-default {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include intrinsic-ratio;";
@include intrinsic-ratio;
}
&--full-ratio {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include intrinsic-ratio($ratio: 4/3);";
@include intrinsic-ratio($ratio: 4/3);
}
&--full-width {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include intrinsic-ratio($width: 75%);";
@include intrinsic-ratio($width: 75%);
}
&--full-position {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include intrinsic-ratio($position: bottom);";
@include intrinsic-ratio($position: bottom);
}
&--full-elements {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include intrinsic-ratio($width: 75%);";
@include intrinsic-ratio($elements: "iframe");
}
&--full-extend {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include intrinsic-ratio($position: bottom);";
@include intrinsic-ratio($extend: true);
}
}
/**
* Full IR Mixin (short name)
**/
.ir {
&--ir-default {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include ir;";
@include ir;
}
&--ir-ratio {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include ir($ratio: 4/3);";
@include ir($ratio: 4/3);
}
&--ir-width {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include ir($width: 75%);";
@include ir($width: 75%);
}
&--ir-position {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include ir($position: bottom);";
@include ir($position: bottom);
}
&--ir-elements {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include ir($width: 75%);";
@include ir($elements: "iframe");
}
&--ir-extend {
_setting-intrinsic-ratio: toolkit-get('intrinsic ratio');
_setting-intrinsic-ratio-width: toolkit-get('intrinsic ratio width');
_setting-intrinsic-ratio-direction: toolkit-get('intrinsic ratio position');
_setting-intrinsic-ratio-elements: toolkit-get('intrinsic ratio elements');
_setting-intrinsic-ratio-extend: toolkit-get('intrinsic ratio extend');
_test: "@include ir($position: bottom);";
@include ir($extend: true);
}
} toolkit-2.10.2/tests/tests/05-kickstart.scss 0000664 0000000 0000000 00000000034 13022074543 0020700 0 ustar 00root root 0000000 0000000 @import "toolkit/kickstart"; toolkit-2.10.2/tests/tests/06-nested-context.scss 0000664 0000000 0000000 00000002676 13022074543 0021664 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Nested Context
**/
.nested-context {
&--function {
_setting-nested-context-contexts: toolkit-get('nested context contexts');
_test: "nested-context()";
_result: nested-context();
_test: "nested-context(30%)";
_result: nested-context(30%);
_test: "nested-context(40% 30%)";
_result: nested-context(40% 30%);
}
&--mixin-default {
_setting-nested-context-contexts: toolkit-get('nested context contexts');
_setting-nested-context-contexts: toolkit-get('nested context position');
_test: "@include nested-context;";
@include nested-context;
}
&--mixin-contexts {
_setting-nested-context-contexts: toolkit-get('nested context contexts');
_setting-nested-context-contexts: toolkit-get('nested context position');
_test: "@include nested-context($contexts: 30%);";
@include nested-context($contexts: 30%);
}
&--mixin-right {
_setting-nested-context-contexts: toolkit-get('nested context contexts');
_setting-nested-context-contexts: toolkit-get('nested context position');
_test: "@include nested-context($position: right);";
@include nested-context($position: right);
}
&--mixin-center {
_setting-nested-context-contexts: toolkit-get('nested context contexts');
_setting-nested-context-contexts: toolkit-get('nested context position');
_test: "@include nested-context($position: center);";
@include nested-context($position: center);
}
} toolkit-2.10.2/tests/tests/09-parallax.scss 0000664 0000000 0000000 00000004721 13022074543 0020520 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Parallax Init
**/
.parallax-init {
&--default {
_setting-parallax-perspective: toolkit-get('parallax perspective');
_setting-parallax-element: toolkit-get('parallax element');
_setting-parallax-ios: toolkit-get('parallax ios');
_test: "@include parallax-init;";
@include parallax-init;
}
&--perspective {
_setting-parallax-perspective: toolkit-get('parallax perspective');
_setting-parallax-element: toolkit-get('parallax element');
_setting-parallax-ios: toolkit-get('parallax ios');
_test: "@include parallax-init($perspective: .75);";
@include parallax-init($perspective: .75);
}
&--element-this {
_setting-parallax-perspective: toolkit-get('parallax perspective');
_setting-parallax-element: toolkit-get('parallax element');
_setting-parallax-ios: toolkit-get('parallax ios');
_test: "@include parallax-init($element: this);";
@include parallax-init($element: this);
}
&--element-that {
_setting-parallax-perspective: toolkit-get('parallax perspective');
_setting-parallax-element: toolkit-get('parallax element');
_setting-parallax-ios: toolkit-get('parallax ios');
_test: "@include parallax-init($element: '.that');";
@include parallax-init($element: '.that');
}
&--ios {
_setting-parallax-perspective: toolkit-get('parallax perspective');
_setting-parallax-element: toolkit-get('parallax element');
_setting-parallax-ios: toolkit-get('parallax ios');
_test: "@include parallax-init($parallax-ios: false);";
@include parallax-init($parallax-ios: false);
}
}
/**
* Parallax Item
**/
.parallax-item {
&--default {
_setting-parallax-distance: toolkit-get('parallax distance');
_setting-parallax-perspective: toolkit-get('parallax perspective');
_test: "@include parallax;";
@include parallax;
}
&--distance {
_setting-parallax-distance: toolkit-get('parallax distance');
_setting-parallax-perspective: toolkit-get('parallax perspective');
_test: "@include parallax($distance: .5);";
@include parallax($distance: .5);
}
&--perspective {
_setting-parallax-distance: toolkit-get('parallax distance');
_setting-parallax-perspective: toolkit-get('parallax perspective');
_test: "@include parallax($distance: 1, $perspective: 1);";
@include parallax($distance: 1, $perspective: 1);
_test: "@include parallax($distance: 1, $perspective: .5);";
@include parallax($distance: 1, $perspective: .5);
}
} toolkit-2.10.2/tests/tests/11-rtl.scss 0000664 0000000 0000000 00000001341 13022074543 0017501 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* RTL
**/
.rtl {
&--single-without {
_test: "@include rtl(padding, 1.5em);";
@include rtl(padding, 1.5em);
}
&--single-right {
_test: "@include rtl(padding-right, 1.5em);";
@include rtl(padding-right, 1.5em);
}
&--single-left {
_test: "@include rtl(padding-left, 1.5em);";
@include rtl(padding-left, 1.5em);
}
&--double {
_test: "@include rtl(padding, 1.5em 2.5em);";
@include rtl(padding, 1.5em 2.5em);
}
&--tripple {
_test: "@include rtl(padding, 1.5em 2.5em 3.5em);";
@include rtl(padding, 1.5em 2.5em 3.5em);
}
&--quadruple {
_test: "@include rtl(padding, 1.5em 2.5em 3.5em 4.5em);";
@include rtl(padding, 1.5em 2.5em 3.5em 4.5em);
}
} toolkit-2.10.2/tests/tests/12-triangle.scss 0000664 0000000 0000000 00000011017 13022074543 0020507 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Triangle
**/
.triangle {
&--default {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle;";
@include triangle;
}
&--color {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($color: blue);";
@include triangle($color: blue);
}
&--height {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($height: 1.75em);";
@include triangle($height: 20px);
}
&--width {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($width: 1.5rem);";
@include triangle($width: 1.5rem);
}
&--angle-number {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($angle: 72.5);";
@include triangle($angle: 72.5);
}
&--angle-top {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($angle: top);";
@include triangle($angle: top);
}
&--angle-top-right {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($angle: top right);";
@include triangle($angle: top right);
}
&--angle-right {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($angle: right);";
@include triangle($angle: right);
}
&--angle-bottom-right {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($angle: bottom right);";
@include triangle($angle: bottom right);
}
&--angle-bottom {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($angle: bottom);";
@include triangle($angle: bottom);
}
&--angle-bottom-left {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($angle: bottom left);";
@include triangle($angle: bottom left);
}
&--angle-left{
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($angle: left);";
@include triangle($angle: left);
}
&--angle-top-left {
_setting-triangle-color: toolkit-get('triangle color');
_setting-triangle-height: toolkit-get('triangle height');
_setting-triangle-width: toolkit-get('triangle width');
_setting-triangle-angle: toolkit-get('triangle angle');
_test: "@include triangle($angle: top left);";
@include triangle($angle: top left);
}
} toolkit-2.10.2/tests/tests/13-center.scss 0000664 0000000 0000000 00000022642 13022074543 0020171 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Vertical Center
**/
.vertical-center {
&-default {
_setting-vertical-midpoint: toolkit-get('vertical midpoint');
_setting-vertical-extend: toolkit-get('vertical extend');
_test: "@include vertical-center;";
@include vertical-center;
}
&-midpoint {
_setting-vertical-midpoint: toolkit-get('vertical midpoint');
_setting-vertical-extend: toolkit-get('vertical extend');
_test: "@include vertical-center($midpoint: 30%);";
@include vertical-center($midpoint: 30%);
}
&-extend {
_setting-vertical-midpoint: toolkit-get('vertical midpoint');
_setting-vertical-extend: toolkit-get('vertical extend');
_test: "@include vertical-center($extend: true);";
@include vertical-center($extend: true);
}
&-midpoint-extend {
_setting-vertical-midpoint: toolkit-get('vertical midpoint');
_setting-vertical-extend: toolkit-get('vertical extend');
_test: "@include vertical-center($midpoint: 40%, $extend: true);";
@include vertical-center($midpoint: 40%, $extend: true);
}
}
/**
* Horizontal Center
**/
.horizontal-center {
&-default {
_setting-horizontal-fixed: toolkit-get('horizontal fixed');
_setting-horizontal-extend: toolkit-get('horizontal extend');
_setting-horizontal-fixed-midpoint: toolkit-get('horizontal fixed midpoint');
_setting-horizontal-midpoint: toolkit-get('horizontal midpoint');
_test: '@include horizontal-center';
@include horizontal-center;
}
&-midpoint {
_setting-horizontal-fixed: toolkit-get('horizontal fixed');
_setting-horizontal-extend: toolkit-get('horizontal extend');
_setting-horizontal-fixed-midpoint: toolkit-get('horizontal fixed midpoint');
_setting-horizontal-midpoint: toolkit-get('horizontal midpoint');
_test: '@include horizontal-center($midpoint: -10%)';
@include horizontal-center($midpoint: -10%);
}
&-extend {
_setting-horizontal-fixed: toolkit-get('horizontal fixed');
_setting-horizontal-extend: toolkit-get('horizontal extend');
_setting-horizontal-fixed-midpoint: toolkit-get('horizontal fixed midpoint');
_setting-horizontal-midpoint: toolkit-get('horizontal midpoint');
_test: '@include horizontal-center($extend: true)';
@include horizontal-center($extend: true);
}
&-fixed {
_setting-horizontal-fixed: toolkit-get('horizontal fixed');
_setting-horizontal-extend: toolkit-get('horizontal extend');
_setting-horizontal-fixed-midpoint: toolkit-get('horizontal fixed midpoint');
_setting-horizontal-midpoint: toolkit-get('horizontal midpoint');
_test: '@include horizontal-center($fixed: true)';
@include horizontal-center($fixed: true);
}
&-fixed-midpoint {
_setting-horizontal-fixed: toolkit-get('horizontal fixed');
_setting-horizontal-extend: toolkit-get('horizontal extend');
_setting-horizontal-fixed-midpoint: toolkit-get('horizontal fixed midpoint');
_setting-horizontal-midpoint: toolkit-get('horizontal midpoint');
_test: '@include horizontal-center($midpoint: 30%, $fixed: true)';
@include horizontal-center($midpoint: 30%, $fixed: true);
}
&-fixed-extend {
_setting-horizontal-fixed: toolkit-get('horizontal fixed');
_setting-horizontal-extend: toolkit-get('horizontal extend');
_setting-horizontal-fixed-midpoint: toolkit-get('horizontal fixed midpoint');
_setting-horizontal-midpoint: toolkit-get('horizontal midpoint');
_test: '@include horizontal-center($fixed: true, $extend: true)';
@include horizontal-center($fixed: true, $extend: true);
}
}
/**
* Absolute Center
**/
.absolute-center {
&-default {
_setting-absolute-center-fixed: toolkit-get('absolute center fixed');
_setting-absolute-center-extend: toolkit-get('absolute center extend');
_setting-absolute-center-vertical-midpoint: toolkit-get('absolute center vertical midpoint');
_setting-absolute-center-fixed-horizontal-midpoint: toolkit-get('absolute center fixed horizontal midpoint');
_setting-absolute-center-horizontal-midpoint: toolkit-get('absolute center horizontal midpoint');
_test: '@include absolute-center';
@include absolute-center;
}
&-vertical {
_setting-absolute-center-fixed: toolkit-get('absolute center fixed');
_setting-absolute-center-extend: toolkit-get('absolute center extend');
_setting-absolute-center-vertical-midpoint: toolkit-get('absolute center vertical midpoint');
_setting-absolute-center-fixed-horizontal-midpoint: toolkit-get('absolute center fixed horizontal midpoint');
_setting-absolute-center-horizontal-midpoint: toolkit-get('absolute center horizontal midpoint');
_test: '@include absolute-center($vertical: 30%)';
@include absolute-center($vertical: 30%);
}
&-horizontal {
_setting-absolute-center-fixed: toolkit-get('absolute center fixed');
_setting-absolute-center-extend: toolkit-get('absolute center extend');
_setting-absolute-center-vertical-midpoint: toolkit-get('absolute center vertical midpoint');
_setting-absolute-center-fixed-horizontal-midpoint: toolkit-get('absolute center fixed horizontal midpoint');
_setting-absolute-center-horizontal-midpoint: toolkit-get('absolute center horizontal midpoint');
_test: '@include absolute-center($horizontal: 30%)';
@include absolute-center($horizontal: 30%);
}
&-extend {
_setting-absolute-center-fixed: toolkit-get('absolute center fixed');
_setting-absolute-center-extend: toolkit-get('absolute center extend');
_setting-absolute-center-vertical-midpoint: toolkit-get('absolute center vertical midpoint');
_setting-absolute-center-fixed-horizontal-midpoint: toolkit-get('absolute center fixed horizontal midpoint');
_setting-absolute-center-horizontal-midpoint: toolkit-get('absolute center horizontal midpoint');
_test: '@include absolute-center($extend: true)';
@include absolute-center($extend: true);
}
&-horizontal-extend {
_setting-absolute-center-fixed: toolkit-get('absolute center fixed');
_setting-absolute-center-extend: toolkit-get('absolute center extend');
_setting-absolute-center-vertical-midpoint: toolkit-get('absolute center vertical midpoint');
_setting-absolute-center-fixed-horizontal-midpoint: toolkit-get('absolute center fixed horizontal midpoint');
_setting-absolute-center-horizontal-midpoint: toolkit-get('absolute center horizontal midpoint');
_test: '@include absolute-center($horizontal: 30%, $extend: true)';
@include absolute-center($horizontal: 30%, $extend: true);
}
&-fixed {
_setting-absolute-center-fixed: toolkit-get('absolute center fixed');
_setting-absolute-center-extend: toolkit-get('absolute center extend');
_setting-absolute-center-vertical-midpoint: toolkit-get('absolute center vertical midpoint');
_setting-absolute-center-fixed-horizontal-midpoint: toolkit-get('absolute center fixed horizontal midpoint');
_setting-absolute-center-horizontal-midpoint: toolkit-get('absolute center horizontal midpoint');
_test: '@include absolute-center($fixed: true)';
@include absolute-center($fixed: true);
}
&-fixed-vertical {
_setting-absolute-center-fixed: toolkit-get('absolute center fixed');
_setting-absolute-center-extend: toolkit-get('absolute center extend');
_setting-absolute-center-vertical-midpoint: toolkit-get('absolute center vertical midpoint');
_setting-absolute-center-fixed-horizontal-midpoint: toolkit-get('absolute center fixed horizontal midpoint');
_setting-absolute-center-horizontal-midpoint: toolkit-get('absolute center horizontal midpoint');
_test: '@include absolute-center($vertical: 30%)';
@include absolute-center($vertical: 30%, $fixed: true);
}
&-fixed-horizontal {
_setting-absolute-center-fixed: toolkit-get('absolute center fixed');
_setting-absolute-center-extend: toolkit-get('absolute center extend');
_setting-absolute-center-vertical-midpoint: toolkit-get('absolute center vertical midpoint');
_setting-absolute-center-fixed-horizontal-midpoint: toolkit-get('absolute center fixed horizontal midpoint');
_setting-absolute-center-horizontal-midpoint: toolkit-get('absolute center horizontal midpoint');
_test: '@include absolute-center($horizontal: 30%)';
@include absolute-center($horizontal: 30%, $fixed: true);
}
&-fixed-extend {
_setting-absolute-center-fixed: toolkit-get('absolute center fixed');
_setting-absolute-center-extend: toolkit-get('absolute center extend');
_setting-absolute-center-vertical-midpoint: toolkit-get('absolute center vertical midpoint');
_setting-absolute-center-fixed-horizontal-midpoint: toolkit-get('absolute center fixed horizontal midpoint');
_setting-absolute-center-horizontal-midpoint: toolkit-get('absolute center horizontal midpoint');
_test: '@include absolute-center($extend: true, $fixed: true)';
@include absolute-center($extend: true, $fixed: true);
}
&-fixed-horizontal-extend {
_setting-absolute-center-fixed: toolkit-get('absolute center fixed');
_setting-absolute-center-extend: toolkit-get('absolute center extend');
_setting-absolute-center-vertical-midpoint: toolkit-get('absolute center vertical midpoint');
_setting-absolute-center-fixed-horizontal-midpoint: toolkit-get('absolute center fixed horizontal midpoint');
_setting-absolute-center-horizontal-midpoint: toolkit-get('absolute center horizontal midpoint');
_test: '@include absolute-center($horizontal: 30%, $extend: true, $fixed: true)';
@include absolute-center($horizontal: 30%, $extend: true, $fixed: true);
}
} toolkit-2.10.2/tests/tests/14-viewport.scss 0000664 0000000 0000000 00000000256 13022074543 0020566 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Viewport
**/
.viewport {
_test: "@at-root { @include viewport { width: 320px auto; }}";
@at-root { @include viewport { width: 320px auto; }}
} toolkit-2.10.2/tests/tests/15-underline.scss 0000664 0000000 0000000 00000007266 13022074543 0020705 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Underline
**/
.underline {
&-default {
_setting-underline-background: toolkit-get('underline background');
_setting-underline-color: toolkit-get('underline color');
_setting-underline-clear-descenders: toolkit-get('underline clear descenders');
_setting-underline-distance: toolkit-get('underline distance');
_setting-underline-width: toolkit-get('underline width');
_test: "@include underline";
@include underline;
}
&-background {
_setting-underline-background: toolkit-get('underline background');
_setting-underline-color: toolkit-get('underline color');
_setting-underline-clear-descenders: toolkit-get('underline clear descenders');
_setting-underline-distance: toolkit-get('underline distance');
_setting-underline-width: toolkit-get('underline width');
_test: "@include underline($background: #f00)";
@include underline($background: #f00);
}
&-color {
_setting-underline-background: toolkit-get('underline background');
_setting-underline-color: toolkit-get('underline color');
_setting-underline-clear-descenders: toolkit-get('underline clear descenders');
_setting-underline-distance: toolkit-get('underline distance');
_setting-underline-width: toolkit-get('underline width');
_test: "@include underline($color: #f00)";
@include underline($color: #f00);
}
&-clear-descenders {
_setting-underline-background: toolkit-get('underline background');
_setting-underline-color: toolkit-get('underline color');
_setting-underline-clear-descenders: toolkit-get('underline clear descenders');
_setting-underline-distance: toolkit-get('underline distance');
_setting-underline-width: toolkit-get('underline width');
_test: "@include underline($clear-descenders: false)";
@include underline($clear-descenders: false);
}
&-distance {
_setting-underline-background: toolkit-get('underline background');
_setting-underline-color: toolkit-get('underline color');
_setting-underline-clear-descenders: toolkit-get('underline clear descenders');
_setting-underline-distance: toolkit-get('underline distance');
_setting-underline-width: toolkit-get('underline width');
_test: "@include underline($distance: 2)";
@include underline($distance: 2);
}
&-width {
_setting-underline-background: toolkit-get('underline background');
_setting-underline-color: toolkit-get('underline color');
_setting-underline-clear-descenders: toolkit-get('underline clear descenders');
_setting-underline-distance: toolkit-get('underline distance');
_setting-underline-width: toolkit-get('underline width');
_test: "@include underline($width: 1)";
@include underline($width: 1);
}
&-first-extend {
_setting-underline-background: toolkit-get('underline background');
_setting-underline-color: toolkit-get('underline color');
_setting-underline-clear-descenders: toolkit-get('underline clear descenders');
_setting-underline-distance: toolkit-get('underline distance');
_setting-underline-width: toolkit-get('underline width');
_test: "@include underline($background: green, $extend: true)";
@include underline($background: green, $extend: true);
}
&-second-extend {
_setting-underline-background: toolkit-get('underline background');
_setting-underline-color: toolkit-get('underline color');
_setting-underline-clear-descenders: toolkit-get('underline clear descenders');
_setting-underline-distance: toolkit-get('underline distance');
_setting-underline-width: toolkit-get('underline width');
_test: "@include underline($color: green, $extend: true)";
@include underline($color: green, $extend: true);
}
} toolkit-2.10.2/tests/tests/16-target.scss 0000664 0000000 0000000 00000000243 13022074543 0020173 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Target
**/
.target {
_test: "@include target(test-target) { content: bar }";
@include target(test-target) {
content: bar
};
} toolkit-2.10.2/tests/tests/17-art.scss 0000664 0000000 0000000 00000001630 13022074543 0017475 0 ustar 00root root 0000000 0000000 @import "toolkit";
$IBM:
'xxxxxxx xxxxxxxxxx xxxxxx xxxxxx\n' +
' \n' +
'xxxxxxx xxxxxxxxxxxx xxxxxxx xxxxxxx\n' +
' \n' +
' xxx xxx xxx xxxxxx xxxxx \n' +
' \n' +
' xxx xxxxxxxxx xxxxxxx xxxxxxx \n' +
' \n' +
' xxx xxxxxxxxx xxx xxxxxxx xxx \n' +
' \n' +
' xxx xxx xxx xxx xxxxx xxx \n' +
' \n' +
'xxxxxxx xxxxxxxxxxxx xxxxx xxx xxxxx\n' +
' \n' +
'xxxxxxx xxxxxxxxxx xxxxx x xxxxx';
/**
* Art
**/
.target {
/* Default Size */
_test: "@include art(#{$IBM})";
@include art($IBM);
/* Changed Size */
_test: "@include art(#{$IBM}, 5px)";
@include art($IBM, 5px);
} toolkit-2.10.2/tests/tests/17-set-multiple.scss 0000664 0000000 0000000 00000000454 13022074543 0021336 0 ustar 00root root 0000000 0000000 @import "toolkit";
/**
* Set Multiple
**/
.property {
_test: "@include set-multiple(30px, margin-left margin-right);";
@include set-multiple(30px, margin-left margin-right);
}
.property {
_test: "@include set-multiple(50%, width, height);";
@include set-multiple(50%, width, height);
}
toolkit-2.10.2/toolkit.gemspec 0000664 0000000 0000000 00000001767 13022074543 0016326 0 ustar 00root root 0000000 0000000 require './lib/toolkit'
Gem::Specification.new do |s|
# Release Specific Information
s.version = Toolkit::VERSION
s.date = Toolkit::DATE
# General Project Information
s.name = "toolkit"
s.rubyforge_project = "toolkit"
s.rubygems_version = "1.7.2"
s.required_rubygems_version = Gem::Requirement.new(">= 1.2")
s.licenses = ['MIT', 'GPL-2.0']
# Author Information
s.authors = ["Sam Richard", "Scott Kellum", "Mason Wendell"]
s.email = ["sam@snug.ug", "scott@scottkellum.com", "mason@zivtech.com"]
s.homepage = "https://github.com/Snugug/toolkit"
# Project Description
s.description = "Toolkit full of bits and bobs of awesome aimed at assisting in advanced styling with Sass"
s.summary = "Toolkit of awesome Sass stuff"
# Files to Include
s.files = ["README.md"]
s.files += ["CHANGELOG.md"]
s.files += Dir.glob("LICENSE.txt")
s.files = Dir.glob("lib/**/*.*")
s.files += Dir.glob("stylesheets/**/*.*")
# Dependent Gems
s.add_dependency("sass", ["~>3.3"])
end
toolkit-2.10.2/working/ 0000775 0000000 0000000 00000000000 13022074543 0014741 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/working/config.rb 0000664 0000000 0000000 00000001141 13022074543 0016530 0 ustar 00root root 0000000 0000000 # Require any additional compass plugins here.]
# File system locations
sass_dir = 'sass'
css_dir = 'css'
# Import latest breakpoint library
add_import_path '../stylesheets'
# Set to true for easier debugging
line_comments = false
# preferred_syntax = :sass
# CSS output style - :nested, :expanded, :compact, or :compressed
output_style = :expanded
# Determine whether Compass asset helper functions generate relative
# or absolute paths
relative_assets = true
# Learn more:
# http://compass-style.org/docs/tutorials/configuration-reference/ toolkit-2.10.2/working/css/ 0000775 0000000 0000000 00000000000 13022074543 0015531 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/working/css/style.css 0000664 0000000 0000000 00000000000 13022074543 0017371 0 ustar 00root root 0000000 0000000 toolkit-2.10.2/working/sass/ 0000775 0000000 0000000 00000000000 13022074543 0015712 5 ustar 00root root 0000000 0000000 toolkit-2.10.2/working/sass/style.scss 0000664 0000000 0000000 00000000000 13022074543 0017735 0 ustar 00root root 0000000 0000000 toolkit-2.10.2/working/test.html 0000664 0000000 0000000 00000000245 13022074543 0016607 0 ustar 00root root 0000000 0000000
Test