├── .babelrc
├── test
├── fixtures
│ ├── filesystem
│ │ └── project
│ │ │ ├── .takana-ignore
│ │ │ └── styles
│ │ │ ├── bourbon
│ │ │ ├── css3
│ │ │ │ ├── _appearance.scss
│ │ │ │ ├── _box-shadow.scss
│ │ │ │ ├── _user-select.scss
│ │ │ │ ├── _background-size.scss
│ │ │ │ ├── _box-sizing.scss
│ │ │ │ ├── _inline-block.scss
│ │ │ │ ├── _perspective.scss
│ │ │ │ ├── _image-rendering.scss
│ │ │ │ ├── _transform.scss
│ │ │ │ ├── _hidpi-media-query.scss
│ │ │ │ ├── _border-radius.scss
│ │ │ │ ├── _font-face.scss
│ │ │ │ ├── _columns.scss
│ │ │ │ ├── _flex-box.scss
│ │ │ │ ├── _transition.scss
│ │ │ │ ├── _animation.scss
│ │ │ │ └── _background-image.scss
│ │ │ ├── functions
│ │ │ │ ├── _linear-gradient.scss
│ │ │ │ ├── _compact.scss
│ │ │ │ ├── _tint-shade.scss
│ │ │ │ ├── _grid-width.scss
│ │ │ │ ├── _render-gradients.scss
│ │ │ │ ├── _transition-property-name.scss
│ │ │ │ ├── _modular-scale.scss
│ │ │ │ ├── _flex-grid.scss
│ │ │ │ ├── _deprecated-webkit-gradient.scss
│ │ │ │ └── _radial-gradient.scss
│ │ │ ├── _bourbon-deprecated-upcoming.scss
│ │ │ ├── addons
│ │ │ │ ├── _font-family.scss
│ │ │ │ ├── _hide-text.scss
│ │ │ │ ├── _clearfix.scss
│ │ │ │ ├── _prefixer.scss
│ │ │ │ ├── _position.scss
│ │ │ │ └── _timing-functions.scss
│ │ │ └── _bourbon.scss
│ │ │ ├── style.scss
│ │ │ ├── foundation
│ │ │ └── components
│ │ │ │ ├── _magellan.scss
│ │ │ │ ├── _flex-video.scss
│ │ │ │ ├── _thumbs.scss
│ │ │ │ ├── _inline-lists.scss
│ │ │ │ ├── _keystrokes.scss
│ │ │ │ ├── _side-nav.scss
│ │ │ │ └── _sub-nav.scss
│ │ │ └── foundation.scss
│ ├── scss
│ │ ├── error
│ │ │ └── style.scss
│ │ ├── include-paths
│ │ │ └── style.scss
│ │ └── foundation
│ │ │ ├── bourbon
│ │ │ ├── css3
│ │ │ │ ├── _appearance.scss
│ │ │ │ ├── _box-shadow.scss
│ │ │ │ ├── _user-select.scss
│ │ │ │ ├── _background-size.scss
│ │ │ │ ├── _box-sizing.scss
│ │ │ │ ├── _inline-block.scss
│ │ │ │ ├── _perspective.scss
│ │ │ │ ├── _image-rendering.scss
│ │ │ │ ├── _transform.scss
│ │ │ │ ├── _hidpi-media-query.scss
│ │ │ │ ├── _border-radius.scss
│ │ │ │ ├── _font-face.scss
│ │ │ │ ├── _columns.scss
│ │ │ │ ├── _flex-box.scss
│ │ │ │ ├── _transition.scss
│ │ │ │ ├── _animation.scss
│ │ │ │ └── _background-image.scss
│ │ │ ├── functions
│ │ │ │ ├── _linear-gradient.scss
│ │ │ │ ├── _compact.scss
│ │ │ │ ├── _tint-shade.scss
│ │ │ │ ├── _grid-width.scss
│ │ │ │ ├── _render-gradients.scss
│ │ │ │ ├── _transition-property-name.scss
│ │ │ │ ├── _modular-scale.scss
│ │ │ │ ├── _flex-grid.scss
│ │ │ │ ├── _deprecated-webkit-gradient.scss
│ │ │ │ └── _radial-gradient.scss
│ │ │ ├── _bourbon-deprecated-upcoming.scss
│ │ │ ├── addons
│ │ │ │ ├── _font-family.scss
│ │ │ │ ├── _hide-text.scss
│ │ │ │ ├── _clearfix.scss
│ │ │ │ ├── _prefixer.scss
│ │ │ │ ├── _position.scss
│ │ │ │ └── _timing-functions.scss
│ │ │ └── _bourbon.scss
│ │ │ ├── style.scss
│ │ │ ├── foundation
│ │ │ └── components
│ │ │ │ ├── _magellan.scss
│ │ │ │ ├── _flex-video.scss
│ │ │ │ ├── _thumbs.scss
│ │ │ │ ├── _inline-lists.scss
│ │ │ │ ├── _keystrokes.scss
│ │ │ │ ├── _side-nav.scss
│ │ │ │ └── _sub-nav.scss
│ │ │ └── foundation.scss
│ ├── test_helpers
│ │ ├── small
│ │ ├── small-copy
│ │ ├── index.html
│ │ ├── index1.html
│ │ ├── index.html-copy
│ │ ├── foundation
│ │ │ ├── bourbon
│ │ │ │ ├── css3
│ │ │ │ │ ├── _appearance.scss
│ │ │ │ │ ├── _box-shadow.scss
│ │ │ │ │ ├── _user-select.scss
│ │ │ │ │ ├── _background-size.scss
│ │ │ │ │ ├── _box-sizing.scss
│ │ │ │ │ ├── _inline-block.scss
│ │ │ │ │ ├── _perspective.scss
│ │ │ │ │ ├── _image-rendering.scss
│ │ │ │ │ ├── _transform.scss
│ │ │ │ │ ├── _hidpi-media-query.scss
│ │ │ │ │ ├── _border-radius.scss
│ │ │ │ │ ├── _font-face.scss
│ │ │ │ │ ├── _columns.scss
│ │ │ │ │ ├── _flex-box.scss
│ │ │ │ │ ├── _transition.scss
│ │ │ │ │ ├── _animation.scss
│ │ │ │ │ └── _background-image.scss
│ │ │ │ ├── functions
│ │ │ │ │ ├── _linear-gradient.scss
│ │ │ │ │ ├── _compact.scss
│ │ │ │ │ ├── _tint-shade.scss
│ │ │ │ │ ├── _grid-width.scss
│ │ │ │ │ ├── _render-gradients.scss
│ │ │ │ │ ├── _transition-property-name.scss
│ │ │ │ │ ├── _modular-scale.scss
│ │ │ │ │ ├── _flex-grid.scss
│ │ │ │ │ ├── _deprecated-webkit-gradient.scss
│ │ │ │ │ └── _radial-gradient.scss
│ │ │ │ ├── _bourbon-deprecated-upcoming.scss
│ │ │ │ ├── addons
│ │ │ │ │ ├── _font-family.scss
│ │ │ │ │ ├── _hide-text.scss
│ │ │ │ │ ├── _clearfix.scss
│ │ │ │ │ ├── _prefixer.scss
│ │ │ │ │ ├── _position.scss
│ │ │ │ │ └── _timing-functions.scss
│ │ │ │ └── _bourbon.scss
│ │ │ ├── style.scss
│ │ │ ├── foundation
│ │ │ │ └── components
│ │ │ │ │ ├── _magellan.scss
│ │ │ │ │ ├── _flex-video.scss
│ │ │ │ │ ├── _thumbs.scss
│ │ │ │ │ ├── _inline-lists.scss
│ │ │ │ │ ├── _keystrokes.scss
│ │ │ │ │ ├── _side-nav.scss
│ │ │ │ │ └── _sub-nav.scss
│ │ │ └── foundation.scss
│ │ └── foundation-copy
│ │ │ ├── bourbon
│ │ │ ├── css3
│ │ │ │ ├── _appearance.scss
│ │ │ │ ├── _box-shadow.scss
│ │ │ │ ├── _user-select.scss
│ │ │ │ ├── _background-size.scss
│ │ │ │ ├── _box-sizing.scss
│ │ │ │ ├── _inline-block.scss
│ │ │ │ ├── _perspective.scss
│ │ │ │ ├── _image-rendering.scss
│ │ │ │ ├── _transform.scss
│ │ │ │ ├── _hidpi-media-query.scss
│ │ │ │ ├── _border-radius.scss
│ │ │ │ ├── _font-face.scss
│ │ │ │ ├── _columns.scss
│ │ │ │ ├── _flex-box.scss
│ │ │ │ ├── _transition.scss
│ │ │ │ ├── _animation.scss
│ │ │ │ └── _background-image.scss
│ │ │ ├── functions
│ │ │ │ ├── _linear-gradient.scss
│ │ │ │ ├── _compact.scss
│ │ │ │ ├── _tint-shade.scss
│ │ │ │ ├── _grid-width.scss
│ │ │ │ ├── _render-gradients.scss
│ │ │ │ ├── _transition-property-name.scss
│ │ │ │ ├── _modular-scale.scss
│ │ │ │ ├── _flex-grid.scss
│ │ │ │ ├── _deprecated-webkit-gradient.scss
│ │ │ │ └── _radial-gradient.scss
│ │ │ ├── _bourbon-deprecated-upcoming.scss
│ │ │ ├── addons
│ │ │ │ ├── _font-family.scss
│ │ │ │ ├── _hide-text.scss
│ │ │ │ ├── _clearfix.scss
│ │ │ │ ├── _prefixer.scss
│ │ │ │ ├── _position.scss
│ │ │ │ └── _timing-functions.scss
│ │ │ └── _bourbon.scss
│ │ │ ├── style.scss
│ │ │ ├── foundation
│ │ │ └── components
│ │ │ │ ├── _magellan.scss
│ │ │ │ ├── _flex-video.scss
│ │ │ │ ├── _thumbs.scss
│ │ │ │ ├── _inline-lists.scss
│ │ │ │ ├── _keystrokes.scss
│ │ │ │ ├── _side-nav.scss
│ │ │ │ └── _sub-nav.scss
│ │ │ └── foundation.scss
│ ├── css
│ │ └── style.css
│ └── less
│ │ ├── include-paths
│ │ └── style.scss
│ │ ├── error
│ │ └── style.less
│ │ └── kube
│ │ ├── kube.less
│ │ ├── pagination.less
│ │ ├── breadcrumbs.less
│ │ ├── blocks.less
│ │ ├── messages.less
│ │ └── alerts.less
├── integration.js
├── renderer
│ ├── css.js
│ ├── index.js
│ └── less.js
├── support
│ └── helpers.js
└── editor
│ └── manager.js
├── takana.png
├── .gitignore
├── .travis.yml
├── lib
├── watcher
│ ├── index.js
│ └── file.js
├── browser
│ └── index.js
├── editor
│ └── index.js
├── support
│ ├── index.js
│ ├── logger.js
│ └── middleware.js
├── renderer
│ ├── index.js
│ ├── css.js
│ └── scss.js
└── index.js
├── gulpfile.js
├── sublime-plugin
├── README.md
└── LICENSE
├── scripts
└── test
├── LICENSE
├── package.json
└── bin
└── takana
/.babelrc:
--------------------------------------------------------------------------------
1 | { "presets": ["es2015"] }
2 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/.takana-ignore:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/fixtures/scss/error/style.scss:
--------------------------------------------------------------------------------
1 | body ---- { }
2 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/small:
--------------------------------------------------------------------------------
1 | hello, my name is poo poo
2 |
--------------------------------------------------------------------------------
/test/fixtures/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: red;
3 | }
--------------------------------------------------------------------------------
/test/fixtures/less/include-paths/style.scss:
--------------------------------------------------------------------------------
1 | @import "kube/kube";
2 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/small-copy:
--------------------------------------------------------------------------------
1 | hello, my name is poo poo
2 |
--------------------------------------------------------------------------------
/takana.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mechio/takana/HEAD/takana.png
--------------------------------------------------------------------------------
/test/fixtures/less/error/style.less:
--------------------------------------------------------------------------------
1 | @include "__error"
2 | body {
3 |
4 | }
--------------------------------------------------------------------------------
/test/fixtures/scss/include-paths/style.scss:
--------------------------------------------------------------------------------
1 | @import "foundation/foundation";
2 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/index.html:
--------------------------------------------------------------------------------
1 |
2 | Hello Vic
3 |
4 | yoyo
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/index1.html:
--------------------------------------------------------------------------------
1 |
2 | Hello Vic
3 |
4 | yoyo
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/index.html-copy:
--------------------------------------------------------------------------------
1 |
2 | Hello Vic
3 |
4 | yoyo
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | tmp/**
3 | docs/
4 | bower_components
5 | database.yml
6 | build/
7 | .gitignore
8 | npm-debug.log
9 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "node"
4 | script: 'npm test'
5 | cache:
6 | directories:
7 | - node_modules
8 |
--------------------------------------------------------------------------------
/lib/watcher/index.js:
--------------------------------------------------------------------------------
1 | import Folder from './folder';
2 | import File from './file';
3 |
4 | module.exports = { Folder: Folder, File: File }
--------------------------------------------------------------------------------
/lib/browser/index.js:
--------------------------------------------------------------------------------
1 | import Browser from './browser';
2 | import Manager from './manager';
3 |
4 | module.exports = { Manager: Manager, Browser: Browser };
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_appearance.scss:
--------------------------------------------------------------------------------
1 | @mixin appearance ($value) {
2 | @include prefixer(appearance, $value, webkit moz ms o spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_box-shadow.scss:
--------------------------------------------------------------------------------
1 | @mixin box-shadow ($shadows...) {
2 | @include prefixer(box-shadow, $shadows, webkit spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_user-select.scss:
--------------------------------------------------------------------------------
1 | @mixin user-select($arg: none) {
2 | @include prefixer(user-select, $arg, webkit moz ms spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_appearance.scss:
--------------------------------------------------------------------------------
1 | @mixin appearance ($value) {
2 | @include prefixer(appearance, $value, webkit moz ms o spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_box-shadow.scss:
--------------------------------------------------------------------------------
1 | @mixin box-shadow ($shadows...) {
2 | @include prefixer(box-shadow, $shadows, webkit spec);
3 | }
4 |
--------------------------------------------------------------------------------
/lib/editor/index.js:
--------------------------------------------------------------------------------
1 | // The [Manager](manager.html) class handles incomming editor messages
2 | import Manager from './manager';
3 |
4 | module.exports = { Manager: Manager };
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_appearance.scss:
--------------------------------------------------------------------------------
1 | @mixin appearance ($value) {
2 | @include prefixer(appearance, $value, webkit moz ms o spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_box-shadow.scss:
--------------------------------------------------------------------------------
1 | @mixin box-shadow ($shadows...) {
2 | @include prefixer(box-shadow, $shadows, webkit spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_user-select.scss:
--------------------------------------------------------------------------------
1 | @mixin user-select($arg: none) {
2 | @include prefixer(user-select, $arg, webkit moz ms spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_appearance.scss:
--------------------------------------------------------------------------------
1 | @mixin appearance ($value) {
2 | @include prefixer(appearance, $value, webkit moz ms o spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_box-shadow.scss:
--------------------------------------------------------------------------------
1 | @mixin box-shadow ($shadows...) {
2 | @include prefixer(box-shadow, $shadows, webkit spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_user-select.scss:
--------------------------------------------------------------------------------
1 | @mixin user-select($arg: none) {
2 | @include prefixer(user-select, $arg, webkit moz ms spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_user-select.scss:
--------------------------------------------------------------------------------
1 | @mixin user-select($arg: none) {
2 | @include prefixer(user-select, $arg, webkit moz ms spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_background-size.scss:
--------------------------------------------------------------------------------
1 | @mixin background-size ($lengths...) {
2 | @include prefixer(background-size, $lengths, webkit moz ms o spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_background-size.scss:
--------------------------------------------------------------------------------
1 | @mixin background-size ($lengths...) {
2 | @include prefixer(background-size, $lengths, webkit moz ms o spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_background-size.scss:
--------------------------------------------------------------------------------
1 | @mixin background-size ($lengths...) {
2 | @include prefixer(background-size, $lengths, webkit moz ms o spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_box-sizing.scss:
--------------------------------------------------------------------------------
1 | @mixin box-sizing ($box) {
2 | // content-box | border-box | inherit
3 | @include prefixer(box-sizing, $box, webkit moz spec);
4 | }
5 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_background-size.scss:
--------------------------------------------------------------------------------
1 | @mixin background-size ($lengths...) {
2 | @include prefixer(background-size, $lengths, webkit moz ms o spec);
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_box-sizing.scss:
--------------------------------------------------------------------------------
1 | @mixin box-sizing ($box) {
2 | // content-box | border-box | inherit
3 | @include prefixer(box-sizing, $box, webkit moz spec);
4 | }
5 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_box-sizing.scss:
--------------------------------------------------------------------------------
1 | @mixin box-sizing ($box) {
2 | // content-box | border-box | inherit
3 | @include prefixer(box-sizing, $box, webkit moz spec);
4 | }
5 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_box-sizing.scss:
--------------------------------------------------------------------------------
1 | @mixin box-sizing ($box) {
2 | // content-box | border-box | inherit
3 | @include prefixer(box-sizing, $box, webkit moz spec);
4 | }
5 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/functions/_linear-gradient.scss:
--------------------------------------------------------------------------------
1 | @function linear-gradient($gradients...) {
2 | $type: linear;
3 | $type-gradient: append($type, $gradients, comma);
4 |
5 | @return $type-gradient;
6 | }
7 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/functions/_linear-gradient.scss:
--------------------------------------------------------------------------------
1 | @function linear-gradient($gradients...) {
2 | $type: linear;
3 | $type-gradient: append($type, $gradients, comma);
4 |
5 | @return $type-gradient;
6 | }
7 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/functions/_linear-gradient.scss:
--------------------------------------------------------------------------------
1 | @function linear-gradient($gradients...) {
2 | $type: linear;
3 | $type-gradient: append($type, $gradients, comma);
4 |
5 | @return $type-gradient;
6 | }
7 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/functions/_linear-gradient.scss:
--------------------------------------------------------------------------------
1 | @function linear-gradient($gradients...) {
2 | $type: linear;
3 | $type-gradient: append($type, $gradients, comma);
4 |
5 | @return $type-gradient;
6 | }
7 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_inline-block.scss:
--------------------------------------------------------------------------------
1 | // Legacy support for inline-block in IE7 (maybe IE6)
2 | @mixin inline-block {
3 | display: inline-block;
4 | vertical-align: baseline;
5 | zoom: 1;
6 | *display: inline;
7 | *vertical-align: auto;
8 | }
9 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_inline-block.scss:
--------------------------------------------------------------------------------
1 | // Legacy support for inline-block in IE7 (maybe IE6)
2 | @mixin inline-block {
3 | display: inline-block;
4 | vertical-align: baseline;
5 | zoom: 1;
6 | *display: inline;
7 | *vertical-align: auto;
8 | }
9 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_inline-block.scss:
--------------------------------------------------------------------------------
1 | // Legacy support for inline-block in IE7 (maybe IE6)
2 | @mixin inline-block {
3 | display: inline-block;
4 | vertical-align: baseline;
5 | zoom: 1;
6 | *display: inline;
7 | *vertical-align: auto;
8 | }
9 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_inline-block.scss:
--------------------------------------------------------------------------------
1 | // Legacy support for inline-block in IE7 (maybe IE6)
2 | @mixin inline-block {
3 | display: inline-block;
4 | vertical-align: baseline;
5 | zoom: 1;
6 | *display: inline;
7 | *vertical-align: auto;
8 | }
9 |
--------------------------------------------------------------------------------
/lib/support/index.js:
--------------------------------------------------------------------------------
1 | import algo from './algo';
2 | import FileMatcher from './file_matcher';
3 | import helpers from './helpers';
4 | import logger from './logger';
5 |
6 | module.exports = {
7 | algo: algo,
8 | FileMatcher: FileMatcher,
9 | helpers: helpers,
10 | logger: logger
11 | }
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/functions/_compact.scss:
--------------------------------------------------------------------------------
1 | // Remove `false` values from a list
2 |
3 | @function compact($vars...) {
4 | $list: ();
5 | @each $var in $vars {
6 | @if $var {
7 | $list: append($list, $var, comma);
8 | }
9 | }
10 | @return $list;
11 | }
12 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/functions/_compact.scss:
--------------------------------------------------------------------------------
1 | // Remove `false` values from a list
2 |
3 | @function compact($vars...) {
4 | $list: ();
5 | @each $var in $vars {
6 | @if $var {
7 | $list: append($list, $var, comma);
8 | }
9 | }
10 | @return $list;
11 | }
12 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/_bourbon-deprecated-upcoming.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // These mixins/functions will be deprecated in the next MAJOR version release
3 | //************************************************************************//
4 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/functions/_compact.scss:
--------------------------------------------------------------------------------
1 | // Remove `false` values from a list
2 |
3 | @function compact($vars...) {
4 | $list: ();
5 | @each $var in $vars {
6 | @if $var {
7 | $list: append($list, $var, comma);
8 | }
9 | }
10 | @return $list;
11 | }
12 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/functions/_compact.scss:
--------------------------------------------------------------------------------
1 | // Remove `false` values from a list
2 |
3 | @function compact($vars...) {
4 | $list: ();
5 | @each $var in $vars {
6 | @if $var {
7 | $list: append($list, $var, comma);
8 | }
9 | }
10 | @return $list;
11 | }
12 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/_bourbon-deprecated-upcoming.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // These mixins/functions will be deprecated in the next MAJOR version release
3 | //************************************************************************//
4 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_perspective.scss:
--------------------------------------------------------------------------------
1 | @mixin perspective($depth: none) {
2 | // none |
3 | @include prefixer(perspective, $depth, webkit moz o spec);
4 | }
5 |
6 | @mixin perspective-origin($value: 50% 50%) {
7 | @include prefixer(perspective-origin, $value, webkit moz o spec);
8 | }
9 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/_bourbon-deprecated-upcoming.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // These mixins/functions will be deprecated in the next MAJOR version release
3 | //************************************************************************//
4 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/_bourbon-deprecated-upcoming.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // These mixins/functions will be deprecated in the next MAJOR version release
3 | //************************************************************************//
4 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_perspective.scss:
--------------------------------------------------------------------------------
1 | @mixin perspective($depth: none) {
2 | // none |
3 | @include prefixer(perspective, $depth, webkit moz o spec);
4 | }
5 |
6 | @mixin perspective-origin($value: 50% 50%) {
7 | @include prefixer(perspective-origin, $value, webkit moz o spec);
8 | }
9 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_perspective.scss:
--------------------------------------------------------------------------------
1 | @mixin perspective($depth: none) {
2 | // none |
3 | @include prefixer(perspective, $depth, webkit moz o spec);
4 | }
5 |
6 | @mixin perspective-origin($value: 50% 50%) {
7 | @include prefixer(perspective-origin, $value, webkit moz o spec);
8 | }
9 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/functions/_tint-shade.scss:
--------------------------------------------------------------------------------
1 | // Add percentage of white to a color
2 | @function tint($color, $percent){
3 | @return mix(white, $color, $percent);
4 | }
5 |
6 | // Add percentage of black to a color
7 | @function shade($color, $percent){
8 | @return mix(black, $color, $percent);
9 | }
10 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_perspective.scss:
--------------------------------------------------------------------------------
1 | @mixin perspective($depth: none) {
2 | // none |
3 | @include prefixer(perspective, $depth, webkit moz o spec);
4 | }
5 |
6 | @mixin perspective-origin($value: 50% 50%) {
7 | @include prefixer(perspective-origin, $value, webkit moz o spec);
8 | }
9 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/functions/_tint-shade.scss:
--------------------------------------------------------------------------------
1 | // Add percentage of white to a color
2 | @function tint($color, $percent){
3 | @return mix(white, $color, $percent);
4 | }
5 |
6 | // Add percentage of black to a color
7 | @function shade($color, $percent){
8 | @return mix(black, $color, $percent);
9 | }
10 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/functions/_tint-shade.scss:
--------------------------------------------------------------------------------
1 | // Add percentage of white to a color
2 | @function tint($color, $percent){
3 | @return mix(white, $color, $percent);
4 | }
5 |
6 | // Add percentage of black to a color
7 | @function shade($color, $percent){
8 | @return mix(black, $color, $percent);
9 | }
10 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/functions/_tint-shade.scss:
--------------------------------------------------------------------------------
1 | // Add percentage of white to a color
2 | @function tint($color, $percent){
3 | @return mix(white, $color, $percent);
4 | }
5 |
6 | // Add percentage of black to a color
7 | @function shade($color, $percent){
8 | @return mix(black, $color, $percent);
9 | }
10 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/addons/_font-family.scss:
--------------------------------------------------------------------------------
1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
2 | $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
5 | $verdana: Verdana, Geneva, sans-serif;
6 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/addons/_font-family.scss:
--------------------------------------------------------------------------------
1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
2 | $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
5 | $verdana: Verdana, Geneva, sans-serif;
6 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/style.scss:
--------------------------------------------------------------------------------
1 | @import "normalize.scss";
2 | @import "bourbon/bourbon";
3 |
4 | // try changing these -------
5 | $primary-color: #888;
6 | $secondary-color: green;
7 | $alert-color: #c60f13;
8 | $success-color: #5da423;
9 |
10 | // and now this
11 | $row-width: 80%;
12 |
13 | @import "foundation.scss";
14 |
15 | body {
16 | margin: 20px 0;
17 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/addons/_font-family.scss:
--------------------------------------------------------------------------------
1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
2 | $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
5 | $verdana: Verdana, Geneva, sans-serif;
6 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/style.scss:
--------------------------------------------------------------------------------
1 | @import "normalize.scss";
2 | @import "bourbon/bourbon";
3 |
4 | // try changing these -------
5 | $primary-color: #888;
6 | $secondary-color: red;
7 | $alert-color: #c60f13;
8 | $success-color: #5da423;
9 |
10 | // and now this
11 | $row-width: 80%;
12 |
13 | @import "foundation.scss";
14 |
15 | body {
16 | margin: 20px 0;
17 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/addons/_font-family.scss:
--------------------------------------------------------------------------------
1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
2 | $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
5 | $verdana: Verdana, Geneva, sans-serif;
6 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/style.scss:
--------------------------------------------------------------------------------
1 | @import "normalize.scss";
2 | @import "bourbon/bourbon";
3 |
4 | // try changing these -------
5 | $primary-color: #888;
6 | $secondary-color: green;
7 | $alert-color: #c60f13;
8 | $success-color: #5da423;
9 |
10 | // and now this
11 | $row-width: 80%;
12 |
13 | @import "foundation.scss";
14 |
15 | body {
16 | margin: 20px 0;
17 | }
--------------------------------------------------------------------------------
/lib/support/logger.js:
--------------------------------------------------------------------------------
1 | import log4js from 'log4js';
2 |
3 | let logger = {};
4 |
5 | logger.getLogger = (name) => {
6 | return log4js.getLogger(name);
7 | }
8 |
9 | logger.silentLogger = () => {
10 | return {
11 | trace() {},
12 | debug() {},
13 | info() {},
14 | warn() {},
15 | error() {},
16 | fatal() {}
17 | };
18 | }
19 |
20 | module.exports = logger;
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/style.scss:
--------------------------------------------------------------------------------
1 | @import "normalize.scss";
2 | @import "bourbon/bourbon";
3 |
4 | // try changing these -------
5 | $primary-color: #888;
6 | $secondary-color: green;
7 | $alert-color: #c60f13;
8 | $success-color: #5da423;
9 |
10 | // and now this
11 | $row-width: 80%;
12 |
13 | @import "foundation.scss";
14 |
15 | body {
16 | margin: 20px 0;
17 | }
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp'),
2 | watch = require('gulp-watch'),
3 | docco = require("gulp-docco");
4 |
5 |
6 | gulp.task('docs', function () {
7 | gulp.src("./lib/**/*.coffee")
8 | .pipe(docco())
9 | .pipe(gulp.dest('./docs/'))
10 | });
11 |
12 | gulp.task('watch', function() {
13 | gulp.watch(['./lib/**/*.coffee'], ['docs']);
14 | });
15 |
16 | gulp.task('default', ['docs']);
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/addons/_hide-text.scss:
--------------------------------------------------------------------------------
1 | @mixin hide-text {
2 | background-color: transparent;
3 | border: 0;
4 | color: transparent;
5 | font: 0/0 a;
6 | text-shadow: none;
7 | }
8 |
9 | // A CSS image replacement method that does not require the use of text-indent.
10 | //
11 | // Examples
12 | //
13 | // .ir {
14 | // @include hide-text;
15 | // }
16 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_image-rendering.scss:
--------------------------------------------------------------------------------
1 | @mixin image-rendering ($mode:optimizeQuality) {
2 |
3 | @if ($mode == optimize-contrast) {
4 | image-rendering: -moz-crisp-edges;
5 | image-rendering: -o-crisp-edges;
6 | image-rendering: -webkit-optimize-contrast;
7 | image-rendering: optimize-contrast;
8 | }
9 |
10 | @else {
11 | image-rendering: $mode;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_image-rendering.scss:
--------------------------------------------------------------------------------
1 | @mixin image-rendering ($mode:optimizeQuality) {
2 |
3 | @if ($mode == optimize-contrast) {
4 | image-rendering: -moz-crisp-edges;
5 | image-rendering: -o-crisp-edges;
6 | image-rendering: -webkit-optimize-contrast;
7 | image-rendering: optimize-contrast;
8 | }
9 |
10 | @else {
11 | image-rendering: $mode;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/addons/_hide-text.scss:
--------------------------------------------------------------------------------
1 | @mixin hide-text {
2 | background-color: transparent;
3 | border: 0;
4 | color: transparent;
5 | font: 0/0 a;
6 | text-shadow: none;
7 | }
8 |
9 | // A CSS image replacement method that does not require the use of text-indent.
10 | //
11 | // Examples
12 | //
13 | // .ir {
14 | // @include hide-text;
15 | // }
16 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_image-rendering.scss:
--------------------------------------------------------------------------------
1 | @mixin image-rendering ($mode:optimizeQuality) {
2 |
3 | @if ($mode == optimize-contrast) {
4 | image-rendering: -moz-crisp-edges;
5 | image-rendering: -o-crisp-edges;
6 | image-rendering: -webkit-optimize-contrast;
7 | image-rendering: optimize-contrast;
8 | }
9 |
10 | @else {
11 | image-rendering: $mode;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_image-rendering.scss:
--------------------------------------------------------------------------------
1 | @mixin image-rendering ($mode:optimizeQuality) {
2 |
3 | @if ($mode == optimize-contrast) {
4 | image-rendering: -moz-crisp-edges;
5 | image-rendering: -o-crisp-edges;
6 | image-rendering: -webkit-optimize-contrast;
7 | image-rendering: optimize-contrast;
8 | }
9 |
10 | @else {
11 | image-rendering: $mode;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/addons/_hide-text.scss:
--------------------------------------------------------------------------------
1 | @mixin hide-text {
2 | background-color: transparent;
3 | border: 0;
4 | color: transparent;
5 | font: 0/0 a;
6 | text-shadow: none;
7 | }
8 |
9 | // A CSS image replacement method that does not require the use of text-indent.
10 | //
11 | // Examples
12 | //
13 | // .ir {
14 | // @include hide-text;
15 | // }
16 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/addons/_hide-text.scss:
--------------------------------------------------------------------------------
1 | @mixin hide-text {
2 | background-color: transparent;
3 | border: 0;
4 | color: transparent;
5 | font: 0/0 a;
6 | text-shadow: none;
7 | }
8 |
9 | // A CSS image replacement method that does not require the use of text-indent.
10 | //
11 | // Examples
12 | //
13 | // .ir {
14 | // @include hide-text;
15 | // }
16 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_transform.scss:
--------------------------------------------------------------------------------
1 | @mixin transform($property: none) {
2 | // none |
3 | @include prefixer(transform, $property, webkit moz ms o spec);
4 | }
5 |
6 | @mixin transform-origin($axes: 50%) {
7 | // x-axis - left | center | right | length | %
8 | // y-axis - top | center | bottom | length | %
9 | // z-axis - length
10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec);
11 | }
12 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_transform.scss:
--------------------------------------------------------------------------------
1 | @mixin transform($property: none) {
2 | // none |
3 | @include prefixer(transform, $property, webkit moz ms o spec);
4 | }
5 |
6 | @mixin transform-origin($axes: 50%) {
7 | // x-axis - left | center | right | length | %
8 | // y-axis - top | center | bottom | length | %
9 | // z-axis - length
10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec);
11 | }
12 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_transform.scss:
--------------------------------------------------------------------------------
1 | @mixin transform($property: none) {
2 | // none |
3 | @include prefixer(transform, $property, webkit moz ms o spec);
4 | }
5 |
6 | @mixin transform-origin($axes: 50%) {
7 | // x-axis - left | center | right | length | %
8 | // y-axis - top | center | bottom | length | %
9 | // z-axis - length
10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec);
11 | }
12 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_transform.scss:
--------------------------------------------------------------------------------
1 | @mixin transform($property: none) {
2 | // none |
3 | @include prefixer(transform, $property, webkit moz ms o spec);
4 | }
5 |
6 | @mixin transform-origin($axes: 50%) {
7 | // x-axis - left | center | right | length | %
8 | // y-axis - top | center | bottom | length | %
9 | // z-axis - length
10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec);
11 | }
12 |
--------------------------------------------------------------------------------
/sublime-plugin/README.md:
--------------------------------------------------------------------------------
1 | ## Takana Sublime Text Plugin
2 |
3 | This is the Sublime Text plugin for takana. Please refer to the [takana repository](https://github.com/mechio/takana) for more information.
4 |
5 | ### Installation
6 |
7 | There are two ways to install the plugin:
8 |
9 | 1. Via the Takana CLI: `takana sublime:install`
10 |
11 | 2. Via [Sublime Package Control](http://wbond.net/sublime_packages/package_control): `Sublime Text -> Preferences -> Package Control: Install Package -> Takana`
12 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/functions/_grid-width.scss:
--------------------------------------------------------------------------------
1 | @function grid-width($n) {
2 | @return $n * $gw-column + ($n - 1) * $gw-gutter;
3 | }
4 |
5 | // The $gw-column and $gw-gutter variables must be defined in your base template to properly use the grid-width function.
6 | //
7 | // $gw-column: 100px; // Column Width
8 | // $gw-gutter: 40px; // Gutter Width
9 | //
10 | // div {
11 | // width: grid-width(4); // returns 520px;
12 | // margin-left: $gw-gutter; // returns 40px;
13 | // }
14 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/functions/_grid-width.scss:
--------------------------------------------------------------------------------
1 | @function grid-width($n) {
2 | @return $n * $gw-column + ($n - 1) * $gw-gutter;
3 | }
4 |
5 | // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
6 | //
7 | // $gw-column: 100px; // Column Width
8 | // $gw-gutter: 40px; // Gutter Width
9 | //
10 | // div {
11 | // width: grid-width(4); // returns 520px;
12 | // margin-left: $gw-gutter; // returns 40px;
13 | // }
14 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/functions/_grid-width.scss:
--------------------------------------------------------------------------------
1 | @function grid-width($n) {
2 | @return $n * $gw-column + ($n - 1) * $gw-gutter;
3 | }
4 |
5 | // The $gw-column and $gw-gutter variables must be defined in your base template to properly use the grid-width function.
6 | //
7 | // $gw-column: 100px; // Column Width
8 | // $gw-gutter: 40px; // Gutter Width
9 | //
10 | // div {
11 | // width: grid-width(4); // returns 520px;
12 | // margin-left: $gw-gutter; // returns 40px;
13 | // }
14 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/functions/_grid-width.scss:
--------------------------------------------------------------------------------
1 | @function grid-width($n) {
2 | @return $n * $gw-column + ($n - 1) * $gw-gutter;
3 | }
4 |
5 | // The $gw-column and $gw-gutter variables must be defined in your base template to properly use the grid-width function.
6 | //
7 | // $gw-column: 100px; // Column Width
8 | // $gw-gutter: 40px; // Gutter Width
9 | //
10 | // div {
11 | // width: grid-width(4); // returns 520px;
12 | // margin-left: $gw-gutter; // returns 40px;
13 | // }
14 |
--------------------------------------------------------------------------------
/lib/renderer/index.js:
--------------------------------------------------------------------------------
1 | import css from './css';
2 | import scss from './scss';
3 | import less from './less';
4 | import helpers from '../support/helpers';
5 | import _ from 'underscore';
6 |
7 | let renderers = {
8 | css: css,
9 | scss: scss,
10 | sass: scss,
11 | less: less
12 | };
13 |
14 | module.exports = {
15 | for: (file) => {
16 | let extension = helpers.extname(file);
17 | return renderers[extension];
18 | },
19 |
20 | supportedExtensions: () => {
21 | return _.keys(renderers);
22 | },
23 |
24 | renderers: renderers
25 | }
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_hidpi-media-query.scss:
--------------------------------------------------------------------------------
1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
2 | @mixin hidpi($ratio: 1.3) {
3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
4 | only screen and (min--moz-device-pixel-ratio: $ratio),
5 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
6 | only screen and (min-resolution: #{round($ratio*96)}dpi),
7 | only screen and (min-resolution: #{$ratio}dppx) {
8 | @content;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_hidpi-media-query.scss:
--------------------------------------------------------------------------------
1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
2 | @mixin hidpi($ratio: 1.3) {
3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
4 | only screen and (min--moz-device-pixel-ratio: $ratio),
5 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
6 | only screen and (min-resolution: #{round($ratio*96)}dpi),
7 | only screen and (min-resolution: #{$ratio}dppx) {
8 | @content;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/lib/renderer/css.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 |
3 | function render(options, callback) {
4 | return fs.readFile(options.file, function(error, data) {
5 | if (error) {
6 | if (callback) {
7 | return callback(error, null);
8 | }
9 | } else {
10 | let result =
11 | {body: data.toString()};
12 |
13 | if (options.writeToDisk) {
14 | result.cssFile = options.file;
15 | }
16 | if (callback) {
17 | return callback(null, result);
18 | }
19 | }
20 | });
21 | }
22 |
23 | module.exports = { render: render };
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_hidpi-media-query.scss:
--------------------------------------------------------------------------------
1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
2 | @mixin hidpi($ratio: 1.3) {
3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
4 | only screen and (min--moz-device-pixel-ratio: $ratio),
5 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
6 | only screen and (min-resolution: #{round($ratio*96)}dpi),
7 | only screen and (min-resolution: #{$ratio}dppx) {
8 | @content;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_hidpi-media-query.scss:
--------------------------------------------------------------------------------
1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
2 | @mixin hidpi($ratio: 1.3) {
3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
4 | only screen and (min--moz-device-pixel-ratio: $ratio),
5 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
6 | only screen and (min-resolution: #{round($ratio*96)}dpi),
7 | only screen and (min-resolution: #{$ratio}dppx) {
8 | @content;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/test/integration.js:
--------------------------------------------------------------------------------
1 | import Server from '../lib/server';
2 | import path from 'path';
3 |
4 | describe('Server', function() {
5 | beforeEach(function() {
6 | return this.server = new Server({
7 | name: 'default',
8 | path: fixturePath('foundation5'),
9 | scratchPath: createEmptyTmpDir(),
10 | includePaths: []
11 | });
12 | });
13 |
14 |
15 | it('should work for a css project', function() {});
16 |
17 | return it('should work for a foundation project', function() {});
18 | });
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/foundation/components/_magellan.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Magellan Variables
3 | //
4 | $include-html-magellan-classes: $include-html-classes !default;
5 |
6 | $magellan-bg: #fff !default;
7 | $magellan-padding: 10px !default;
8 |
9 | @if $include-html-magellan-classes != false {
10 |
11 | [data-magellan-expedition] {
12 | background: $magellan-bg;
13 | z-index: 50;
14 | min-width: 100%;
15 | padding: $magellan-padding;
16 |
17 | .sub-nav {
18 | margin-bottom: 0;
19 | dd { margin-bottom: 0; }
20 | }
21 | }
22 |
23 | }
--------------------------------------------------------------------------------
/test/fixtures/less/kube/kube.less:
--------------------------------------------------------------------------------
1 | /*
2 | Kube Framework 5
3 | */
4 |
5 | @import "mixins.less";
6 | @import "variables.less";
7 |
8 | // Base
9 | @import "reset.less";
10 | @import "typography.less";
11 |
12 | @import "grid.less";
13 | @import "blocks.less";
14 |
15 | @import "tables.less";
16 | @import "forms.less";
17 |
18 | @import "buttons.less";
19 | @import "labels.less";
20 |
21 | @import "messages.less";
22 | @import "alerts.less";
23 |
24 | // Navigation
25 | @import "breadcrumbs.less";
26 | @import "pagination.less";
27 |
28 | // Helpers
29 | @import "helpers.less";
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/foundation/components/_magellan.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Magellan Variables
3 | //
4 | $include-html-magellan-classes: $include-html-classes !default;
5 |
6 | $magellan-bg: #fff !default;
7 | $magellan-padding: 10px !default;
8 |
9 | @if $include-html-magellan-classes != false {
10 |
11 | [data-magellan-expedition] {
12 | background: $magellan-bg;
13 | z-index: 50;
14 | min-width: 100%;
15 | padding: $magellan-padding;
16 |
17 | .sub-nav {
18 | margin-bottom: 0;
19 | dd { margin-bottom: 0; }
20 | }
21 | }
22 |
23 | }
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/foundation/components/_magellan.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Magellan Variables
3 | //
4 | $include-html-magellan-classes: $include-html-classes !default;
5 |
6 | $magellan-bg: #fff !default;
7 | $magellan-padding: 10px !default;
8 |
9 | @if $include-html-magellan-classes != false {
10 |
11 | [data-magellan-expedition] {
12 | background: $magellan-bg;
13 | z-index: 50;
14 | min-width: 100%;
15 | padding: $magellan-padding;
16 |
17 | .sub-nav {
18 | margin-bottom: 0;
19 | dd { margin-bottom: 0; }
20 | }
21 | }
22 |
23 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/foundation/components/_magellan.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Magellan Variables
3 | //
4 | $include-html-magellan-classes: $include-html-classes !default;
5 |
6 | $magellan-bg: #fff !default;
7 | $magellan-padding: 10px !default;
8 |
9 | @if $include-html-magellan-classes != false {
10 |
11 | [data-magellan-expedition] {
12 | background: $magellan-bg;
13 | z-index: 50;
14 | min-width: 100%;
15 | padding: $magellan-padding;
16 |
17 | .sub-nav {
18 | margin-bottom: 0;
19 | dd { margin-bottom: 0; }
20 | }
21 | }
22 |
23 | }
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/functions/_render-gradients.scss:
--------------------------------------------------------------------------------
1 | // User for linear and radial gradients within background-image or border-image properties
2 |
3 | @function render-gradients($gradients, $gradient-type, $vendor: false) {
4 | $vendor-gradients: false;
5 | @if $vendor {
6 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
7 | }
8 |
9 | @else if $vendor == false {
10 | $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
11 | $vendor-gradients: unquote($vendor-gradients);
12 | }
13 | @return $vendor-gradients;
14 | }
15 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/functions/_render-gradients.scss:
--------------------------------------------------------------------------------
1 | // User for linear and radial gradients within background-image or border-image properties
2 |
3 | @function render-gradients($gradients, $gradient-type, $vendor: false) {
4 | $vendor-gradients: false;
5 | @if $vendor {
6 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
7 | }
8 |
9 | @else if $vendor == false {
10 | $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
11 | $vendor-gradients: unquote($vendor-gradients);
12 | }
13 | @return $vendor-gradients;
14 | }
15 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/functions/_render-gradients.scss:
--------------------------------------------------------------------------------
1 | // User for linear and radial gradients within background-image or border-image properties
2 |
3 | @function render-gradients($gradients, $gradient-type, $vendor: false) {
4 | $vendor-gradients: false;
5 | @if $vendor {
6 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
7 | }
8 |
9 | @else if $vendor == false {
10 | $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
11 | $vendor-gradients: unquote($vendor-gradients);
12 | }
13 | @return $vendor-gradients;
14 | }
15 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/functions/_render-gradients.scss:
--------------------------------------------------------------------------------
1 | // User for linear and radial gradients within background-image or border-image properties
2 |
3 | @function render-gradients($gradients, $gradient-type, $vendor: false) {
4 | $vendor-gradients: false;
5 | @if $vendor {
6 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
7 | }
8 |
9 | @else if $vendor == false {
10 | $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
11 | $vendor-gradients: unquote($vendor-gradients);
12 | }
13 | @return $vendor-gradients;
14 | }
15 |
--------------------------------------------------------------------------------
/scripts/test:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | #
3 |
4 |
5 | while getopts ":w" opt; do
6 | case $opt in
7 | w)
8 | node_modules/mocha/bin/mocha --compilers js:babel-register test/*.js test/**/*.js --require should --require test/test_helpers.js --watch
9 | ;;
10 | \?)
11 | echo "Invalid option: -$OPTARG" >&2
12 | exit 1
13 | ;;
14 | :)
15 | echo "Option -$OPTARG requires an argument." >&2
16 | exit 1
17 | ;;
18 | esac
19 | done
20 |
21 |
22 | node_modules/mocha/bin/mocha --recursive test --require should --require test/test_helpers.js --compilers js:babel-register
23 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/addons/_clearfix.scss:
--------------------------------------------------------------------------------
1 | // Micro clearfix provides an easy way to contain floats without adding additional markup
2 | //
3 | // Example usage:
4 | //
5 | // // Contain all floats within .wrapper
6 | // .wrapper {
7 | // @include clearfix;
8 | // .content,
9 | // .sidebar {
10 | // float : left;
11 | // }
12 | // }
13 |
14 | @mixin clearfix {
15 | *zoom: 1;
16 |
17 | &:before,
18 | &:after {
19 | content: " ";
20 | display: table;
21 | }
22 |
23 | &:after {
24 | clear: both;
25 | }
26 | }
27 |
28 | // Acknowledgements
29 | // Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
30 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/addons/_clearfix.scss:
--------------------------------------------------------------------------------
1 | // Micro clearfix provides an easy way to contain floats without adding additional markup
2 | //
3 | // Example usage:
4 | //
5 | // // Contain all floats within .wrapper
6 | // .wrapper {
7 | // @include clearfix;
8 | // .content,
9 | // .sidebar {
10 | // float : left;
11 | // }
12 | // }
13 |
14 | @mixin clearfix {
15 | *zoom: 1;
16 |
17 | &:before,
18 | &:after {
19 | content: " ";
20 | display: table;
21 | }
22 |
23 | &:after {
24 | clear: both;
25 | }
26 | }
27 |
28 | // Acknowledgements
29 | // Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
30 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/addons/_clearfix.scss:
--------------------------------------------------------------------------------
1 | // Micro clearfix provides an easy way to contain floats without adding additional markup
2 | //
3 | // Example usage:
4 | //
5 | // // Contain all floats within .wrapper
6 | // .wrapper {
7 | // @include clearfix;
8 | // .content,
9 | // .sidebar {
10 | // float : left;
11 | // }
12 | // }
13 |
14 | @mixin clearfix {
15 | *zoom: 1;
16 |
17 | &:before,
18 | &:after {
19 | content: " ";
20 | display: table;
21 | }
22 |
23 | &:after {
24 | clear: both;
25 | }
26 | }
27 |
28 | // Acknowledgements
29 | // Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
30 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/addons/_clearfix.scss:
--------------------------------------------------------------------------------
1 | // Micro clearfix provides an easy way to contain floats without adding additional markup
2 | //
3 | // Example usage:
4 | //
5 | // // Contain all floats within .wrapper
6 | // .wrapper {
7 | // @include clearfix;
8 | // .content,
9 | // .sidebar {
10 | // float : left;
11 | // }
12 | // }
13 |
14 | @mixin clearfix {
15 | *zoom: 1;
16 |
17 | &:before,
18 | &:after {
19 | content: " ";
20 | display: table;
21 | }
22 |
23 | &:after {
24 | clear: both;
25 | }
26 | }
27 |
28 | // Acknowledgements
29 | // Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
30 |
--------------------------------------------------------------------------------
/test/renderer/css.js:
--------------------------------------------------------------------------------
1 | import css from '../../lib/renderer/css';
2 |
3 | describe('css', () =>
4 | describe('render', function() {
5 | it('should return the body', function(done) {
6 | let file = fixturePath('css/style.css');
7 | return css.render({file}, function(error, data) {
8 | (error === null).should.be.true;
9 | return assertFileHasBody(file, data.body, done);
10 | });
11 | });
12 |
13 | return context('writeToDisk = true', () =>
14 | it('should return the path to the css file on disk', function(done) {
15 | let file = fixturePath('css/style.css');
16 | return css.render({file, writeToDisk: true}, function(error, data) {
17 | data.cssFile.should.equal(file);
18 | return done();
19 | });
20 | })
21 | );
22 | })
23 | );
24 |
25 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/functions/_transition-property-name.scss:
--------------------------------------------------------------------------------
1 | // Return vendor-prefixed property names if appropriate
2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
3 | //************************************************************************//
4 | @function transition-property-names($props, $vendor: false) {
5 | $new-props: ();
6 |
7 | @each $prop in $props {
8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
9 | }
10 |
11 | @return $new-props;
12 | }
13 |
14 | @function transition-property-name($prop, $vendor: false) {
15 | // put other properties that need to be prefixed here aswell
16 | @if $vendor and $prop == transform {
17 | @return unquote('-'+$vendor+'-'+$prop);
18 | }
19 | @else {
20 | @return $prop;
21 | }
22 | }
--------------------------------------------------------------------------------
/lib/watcher/file.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import shell from 'shelljs';
3 |
4 | export default class File {
5 | constructor(options) {
6 | this.options = options;
7 | this.path = this.options.path;
8 | this.scratchPath = this.options.scratchPath;
9 | this.buffer = null;
10 | }
11 |
12 | syncToScratch(callback) {
13 | if (this.hasBuffer()) {
14 | return fs.writeFile(this.scratchPath, this.buffer, {flags: 'w'}, callback);
15 | } else {
16 | shell.cp('-f', this.path, this.scratchPath);
17 | if (callback) {
18 | return callback(null);
19 | }
20 | }
21 | }
22 |
23 | updateBuffer(buffer) {
24 | return this.buffer = buffer;
25 | }
26 |
27 | clearBuffer() {
28 | return this.buffer = null;
29 | }
30 |
31 | hasBuffer() {
32 | return !!this.buffer;
33 | }
34 | }
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/functions/_transition-property-name.scss:
--------------------------------------------------------------------------------
1 | // Return vendor-prefixed property names if appropriate
2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
3 | //************************************************************************//
4 | @function transition-property-names($props, $vendor: false) {
5 | $new-props: ();
6 |
7 | @each $prop in $props {
8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
9 | }
10 |
11 | @return $new-props;
12 | }
13 |
14 | @function transition-property-name($prop, $vendor: false) {
15 | // put other properties that need to be prefixed here aswell
16 | @if $vendor and $prop == transform {
17 | @return unquote('-'+$vendor+'-'+$prop);
18 | }
19 | @else {
20 | @return $prop;
21 | }
22 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/functions/_transition-property-name.scss:
--------------------------------------------------------------------------------
1 | // Return vendor-prefixed property names if appropriate
2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
3 | //************************************************************************//
4 | @function transition-property-names($props, $vendor: false) {
5 | $new-props: ();
6 |
7 | @each $prop in $props {
8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
9 | }
10 |
11 | @return $new-props;
12 | }
13 |
14 | @function transition-property-name($prop, $vendor: false) {
15 | // put other properties that need to be prefixed here aswell
16 | @if $vendor and $prop == transform {
17 | @return unquote('-'+$vendor+'-'+$prop);
18 | }
19 | @else {
20 | @return $prop;
21 | }
22 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/functions/_transition-property-name.scss:
--------------------------------------------------------------------------------
1 | // Return vendor-prefixed property names if appropriate
2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
3 | //************************************************************************//
4 | @function transition-property-names($props, $vendor: false) {
5 | $new-props: ();
6 |
7 | @each $prop in $props {
8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
9 | }
10 |
11 | @return $new-props;
12 | }
13 |
14 | @function transition-property-name($prop, $vendor: false) {
15 | // put other properties that need to be prefixed here aswell
16 | @if $vendor and $prop == transform {
17 | @return unquote('-'+$vendor+'-'+$prop);
18 | }
19 | @else {
20 | @return $prop;
21 | }
22 | }
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/addons/_prefixer.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec);
3 | //************************************************************************//
4 | @mixin prefixer ($property, $value, $prefixes) {
5 |
6 | @each $prefix in $prefixes {
7 |
8 | @if $prefix == webkit {
9 | -webkit-#{$property}: $value;
10 | }
11 | @else if $prefix == moz {
12 | -moz-#{$property}: $value;
13 | }
14 | @else if $prefix == ms {
15 | -ms-#{$property}: $value;
16 | }
17 | @else if $prefix == o {
18 | -o-#{$property}: $value;
19 | }
20 | @else if $prefix == spec {
21 | #{$property}: $value;
22 | }
23 | @else {
24 | @warn "Unrecognized prefix: #{$prefix}";
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/addons/_prefixer.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec);
3 | //************************************************************************//
4 | @mixin prefixer ($property, $value, $prefixes) {
5 |
6 | @each $prefix in $prefixes {
7 |
8 | @if $prefix == webkit {
9 | -webkit-#{$property}: $value;
10 | }
11 | @else if $prefix == moz {
12 | -moz-#{$property}: $value;
13 | }
14 | @else if $prefix == ms {
15 | -ms-#{$property}: $value;
16 | }
17 | @else if $prefix == o {
18 | -o-#{$property}: $value;
19 | }
20 | @else if $prefix == spec {
21 | #{$property}: $value;
22 | }
23 | @else {
24 | @warn "Unrecognized prefix: #{$prefix}";
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/addons/_prefixer.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec);
3 | //************************************************************************//
4 | @mixin prefixer ($property, $value, $prefixes) {
5 |
6 | @each $prefix in $prefixes {
7 |
8 | @if $prefix == webkit {
9 | -webkit-#{$property}: $value;
10 | }
11 | @else if $prefix == moz {
12 | -moz-#{$property}: $value;
13 | }
14 | @else if $prefix == ms {
15 | -ms-#{$property}: $value;
16 | }
17 | @else if $prefix == o {
18 | -o-#{$property}: $value;
19 | }
20 | @else if $prefix == spec {
21 | #{$property}: $value;
22 | }
23 | @else {
24 | @warn "Unrecognized prefix: #{$prefix}";
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/addons/_prefixer.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec);
3 | //************************************************************************//
4 | @mixin prefixer ($property, $value, $prefixes) {
5 |
6 | @each $prefix in $prefixes {
7 |
8 | @if $prefix == webkit {
9 | -webkit-#{$property}: $value;
10 | }
11 | @else if $prefix == moz {
12 | -moz-#{$property}: $value;
13 | }
14 | @else if $prefix == ms {
15 | -ms-#{$property}: $value;
16 | }
17 | @else if $prefix == o {
18 | -o-#{$property}: $value;
19 | }
20 | @else if $prefix == spec {
21 | #{$property}: $value;
22 | }
23 | @else {
24 | @warn "Unrecognized prefix: #{$prefix}";
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/addons/_position.scss:
--------------------------------------------------------------------------------
1 | @mixin position ($position: relative, $coordinates: 0 0 0 0) {
2 |
3 | @if type-of($position) == list {
4 | $coordinates: $position;
5 | $position: relative;
6 | }
7 |
8 | $top: nth($coordinates, 1);
9 | $right: nth($coordinates, 2);
10 | $bottom: nth($coordinates, 3);
11 | $left: nth($coordinates, 4);
12 |
13 | position: $position;
14 |
15 | @if $top == auto {
16 | top: $top;
17 | }
18 | @else if not(unitless($top)) {
19 | top: $top;
20 | }
21 |
22 | @if $right == auto {
23 | right: $right;
24 | }
25 | @else if not(unitless($right)) {
26 | right: $right;
27 | }
28 |
29 | @if $bottom == auto {
30 | bottom: $bottom;
31 | }
32 | @else if not(unitless($bottom)) {
33 | bottom: $bottom;
34 | }
35 |
36 | @if $left == auto {
37 | left: $left;
38 | }
39 | @else if not(unitless($left)) {
40 | left: $left;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/addons/_position.scss:
--------------------------------------------------------------------------------
1 | @mixin position ($position: relative, $coordinates: 0 0 0 0) {
2 |
3 | @if type-of($position) == list {
4 | $coordinates: $position;
5 | $position: relative;
6 | }
7 |
8 | $top: nth($coordinates, 1);
9 | $right: nth($coordinates, 2);
10 | $bottom: nth($coordinates, 3);
11 | $left: nth($coordinates, 4);
12 |
13 | position: $position;
14 |
15 | @if $top == auto {
16 | top: $top;
17 | }
18 | @else if not(unitless($top)) {
19 | top: $top;
20 | }
21 |
22 | @if $right == auto {
23 | right: $right;
24 | }
25 | @else if not(unitless($right)) {
26 | right: $right;
27 | }
28 |
29 | @if $bottom == auto {
30 | bottom: $bottom;
31 | }
32 | @else if not(unitless($bottom)) {
33 | bottom: $bottom;
34 | }
35 |
36 | @if $left == auto {
37 | left: $left;
38 | }
39 | @else if not(unitless($left)) {
40 | left: $left;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/addons/_position.scss:
--------------------------------------------------------------------------------
1 | @mixin position ($position: relative, $coordinates: 0 0 0 0) {
2 |
3 | @if type-of($position) == list {
4 | $coordinates: $position;
5 | $position: relative;
6 | }
7 |
8 | $top: nth($coordinates, 1);
9 | $right: nth($coordinates, 2);
10 | $bottom: nth($coordinates, 3);
11 | $left: nth($coordinates, 4);
12 |
13 | position: $position;
14 |
15 | @if $top == auto {
16 | top: $top;
17 | }
18 | @else if not(unitless($top)) {
19 | top: $top;
20 | }
21 |
22 | @if $right == auto {
23 | right: $right;
24 | }
25 | @else if not(unitless($right)) {
26 | right: $right;
27 | }
28 |
29 | @if $bottom == auto {
30 | bottom: $bottom;
31 | }
32 | @else if not(unitless($bottom)) {
33 | bottom: $bottom;
34 | }
35 |
36 | @if $left == auto {
37 | left: $left;
38 | }
39 | @else if not(unitless($left)) {
40 | left: $left;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/addons/_position.scss:
--------------------------------------------------------------------------------
1 | @mixin position ($position: relative, $coordinates: 0 0 0 0) {
2 |
3 | @if type-of($position) == list {
4 | $coordinates: $position;
5 | $position: relative;
6 | }
7 |
8 | $top: nth($coordinates, 1);
9 | $right: nth($coordinates, 2);
10 | $bottom: nth($coordinates, 3);
11 | $left: nth($coordinates, 4);
12 |
13 | position: $position;
14 |
15 | @if $top == auto {
16 | top: $top;
17 | }
18 | @else if not(unitless($top)) {
19 | top: $top;
20 | }
21 |
22 | @if $right == auto {
23 | right: $right;
24 | }
25 | @else if not(unitless($right)) {
26 | right: $right;
27 | }
28 |
29 | @if $bottom == auto {
30 | bottom: $bottom;
31 | }
32 | @else if not(unitless($bottom)) {
33 | bottom: $bottom;
34 | }
35 |
36 | @if $left == auto {
37 | left: $left;
38 | }
39 | @else if not(unitless($left)) {
40 | left: $left;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_border-radius.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Shorthand Border-radius mixins
3 | //************************************************************************//
4 | @mixin border-top-radius($radii) {
5 | @include prefixer(border-top-left-radius, $radii, spec);
6 | @include prefixer(border-top-right-radius, $radii, spec);
7 | }
8 |
9 | @mixin border-bottom-radius($radii) {
10 | @include prefixer(border-bottom-left-radius, $radii, spec);
11 | @include prefixer(border-bottom-right-radius, $radii, spec);
12 | }
13 |
14 | @mixin border-left-radius($radii) {
15 | @include prefixer(border-top-left-radius, $radii, spec);
16 | @include prefixer(border-bottom-left-radius, $radii, spec);
17 | }
18 |
19 | @mixin border-right-radius($radii) {
20 | @include prefixer(border-top-right-radius, $radii, spec);
21 | @include prefixer(border-bottom-right-radius, $radii, spec);
22 | }
23 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_border-radius.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Shorthand Border-radius mixins
3 | //************************************************************************//
4 | @mixin border-top-radius($radii) {
5 | @include prefixer(border-top-left-radius, $radii, spec);
6 | @include prefixer(border-top-right-radius, $radii, spec);
7 | }
8 |
9 | @mixin border-bottom-radius($radii) {
10 | @include prefixer(border-bottom-left-radius, $radii, spec);
11 | @include prefixer(border-bottom-right-radius, $radii, spec);
12 | }
13 |
14 | @mixin border-left-radius($radii) {
15 | @include prefixer(border-top-left-radius, $radii, spec);
16 | @include prefixer(border-bottom-left-radius, $radii, spec);
17 | }
18 |
19 | @mixin border-right-radius($radii) {
20 | @include prefixer(border-top-right-radius, $radii, spec);
21 | @include prefixer(border-bottom-right-radius, $radii, spec);
22 | }
23 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_border-radius.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Shorthand Border-radius mixins
3 | //************************************************************************//
4 | @mixin border-top-radius($radii) {
5 | @include prefixer(border-top-left-radius, $radii, spec);
6 | @include prefixer(border-top-right-radius, $radii, spec);
7 | }
8 |
9 | @mixin border-bottom-radius($radii) {
10 | @include prefixer(border-bottom-left-radius, $radii, spec);
11 | @include prefixer(border-bottom-right-radius, $radii, spec);
12 | }
13 |
14 | @mixin border-left-radius($radii) {
15 | @include prefixer(border-top-left-radius, $radii, spec);
16 | @include prefixer(border-bottom-left-radius, $radii, spec);
17 | }
18 |
19 | @mixin border-right-radius($radii) {
20 | @include prefixer(border-top-right-radius, $radii, spec);
21 | @include prefixer(border-bottom-right-radius, $radii, spec);
22 | }
23 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_border-radius.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Shorthand Border-radius mixins
3 | //************************************************************************//
4 | @mixin border-top-radius($radii) {
5 | @include prefixer(border-top-left-radius, $radii, spec);
6 | @include prefixer(border-top-right-radius, $radii, spec);
7 | }
8 |
9 | @mixin border-bottom-radius($radii) {
10 | @include prefixer(border-bottom-left-radius, $radii, spec);
11 | @include prefixer(border-bottom-right-radius, $radii, spec);
12 | }
13 |
14 | @mixin border-left-radius($radii) {
15 | @include prefixer(border-top-left-radius, $radii, spec);
16 | @include prefixer(border-bottom-left-radius, $radii, spec);
17 | }
18 |
19 | @mixin border-right-radius($radii) {
20 | @include prefixer(border-top-right-radius, $radii, spec);
21 | @include prefixer(border-bottom-right-radius, $radii, spec);
22 | }
23 |
--------------------------------------------------------------------------------
/test/fixtures/less/kube/pagination.less:
--------------------------------------------------------------------------------
1 | /* =Pagination
2 | -----------------------------------------------------------------------------*/
3 | .pagination {
4 | list-style: none;
5 | margin: 0;
6 | margin-left: 2px;
7 | margin-bottom: @base-line;
8 | font-size: @font-size-tools;
9 | .clearfix;
10 | & li {
11 | float: left;
12 | }
13 | & a,
14 | & span {
15 | padding: 4px 8px;
16 | line-height: @base-line;
17 | margin-right: 2px;
18 | border-radius: 2px;
19 | color: #000;
20 | text-decoration: none;
21 | }
22 | & span,
23 | & a.active,
24 | & a.active:hover {
25 | color: rgba(0, 0, 0, .6);
26 | background-color: rgba(0, 0, 0, .1);
27 | cursor: text;
28 | }
29 | & a:focus,
30 | & a:hover {
31 | .transition();
32 | text-decoration: none;
33 | background-color: rgba(0, 0, 0, .1);
34 | color: rgba(0, 0, 0, .6);
35 | }
36 | &.centered {
37 |
38 | & li {
39 | float: none;
40 | display: inline-block;
41 | }
42 | text-align: center;
43 | }
44 |
45 | }
--------------------------------------------------------------------------------
/test/renderer/index.js:
--------------------------------------------------------------------------------
1 | import renderer from '../../lib/renderer';
2 |
3 | describe('renderer', function() {
4 | describe('for', () =>
5 | it('should return a renderer for a supported file', function() {
6 | renderer.for('/path/to/blah.scss').should.equal(renderer.renderers.scss);
7 | renderer.for('/path/to/blah.sass').should.equal(renderer.renderers.scss);
8 | renderer.for('/path/to/blah.css').should.equal(renderer.renderers.css);
9 | (renderer.for('/path/to/blah.sdsd') === undefined).should.equal(true);
10 | })
11 | );
12 | return describe('supportedExtensions', function() {
13 | it('should support css', () => renderer.supportedExtensions().should.containEql('css'));
14 | it('should support scss', () => renderer.supportedExtensions().should.containEql('scss'));
15 | it('should support sass', () => renderer.supportedExtensions().should.containEql('sass'));
16 | it('should support less', () => renderer.supportedExtensions().should.containEql('less'));
17 | });
18 | });
--------------------------------------------------------------------------------
/test/fixtures/less/kube/breadcrumbs.less:
--------------------------------------------------------------------------------
1 | /* =Breadcrumbs
2 | -----------------------------------------------------------------------------*/
3 | .breadcrumb {
4 |
5 | margin: 0;
6 | list-style: none;
7 | margin-bottom: @base-line;
8 | font-size: @font-size-small;
9 | color: rgba(0, 0, 0, .5);
10 | .clearfix;
11 | & li {
12 | float: left;
13 | }
14 | & a {
15 | position: relative;
16 | margin-right: 8px;
17 | padding-right: 13px;
18 | color: #000;
19 | text-decoration: none;
20 | &:hover {
21 | .transition();
22 | color: rgba(0, 0, 0, .6);
23 | text-decoration: underline;
24 | }
25 | }
26 | & a:before {
27 | position: absolute;
28 | top: -5px;
29 | right: 0;
30 | content: " > ";
31 | color: rgba(0, 0, 0, .4);
32 | font-size: 12px;
33 | }
34 | &.breadcrumb-path a:before {
35 | content: " / ";
36 | top: -4px;
37 | }
38 |
39 | & span,
40 | & a.active:hover {
41 | text-decoration: none;
42 | cursor: text;
43 | color: rgba(0, 0, 0, .4);
44 | }
45 |
46 | }
47 |
48 |
--------------------------------------------------------------------------------
/test/fixtures/less/kube/blocks.less:
--------------------------------------------------------------------------------
1 | /* =Blocks
2 | -----------------------------------------------------------------------------*/
3 | blocks {
4 | display: -webkit-box;
5 | display: -moz-box;
6 | display: -ms-flexbox;
7 | display: -webkit-flex;
8 | display: flex;
9 | -webkit-flex-wrap: wrap;
10 | -ms-flex-wrap: wrap;
11 | flex-wrap: wrap;
12 | margin-left: -@grid-gap;
13 |
14 | & > div {
15 | margin-left: @grid-gap;
16 | margin-bottom: @base-line;
17 | }
18 |
19 | &[cols="2"] > div { width: 50% - @grid-gap; }
20 | &[cols="3"] > div { width: 33.3% - @grid-gap; }
21 | &[cols="4"] > div { width: 25% - @grid-gap; }
22 | &[cols="5"] > div { width: 20% - @grid-gap; }
23 | &[cols="6"] > div { width: 16.6% - @grid-gap; }
24 | }
25 |
26 | @media (max-width: @breakpoint-small) {
27 |
28 | blocks {
29 |
30 | display: block;
31 | margin-left: 0;
32 |
33 | &[cols="2"] > div,
34 | &[cols="3"] > div,
35 | &[cols="4"] > div,
36 | &[cols="5"] > div,
37 | &[cols="6"] > div {
38 | width: 100%;
39 | margin-left: 0;
40 | }
41 | }
42 |
43 | }
44 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_font-face.scss:
--------------------------------------------------------------------------------
1 | @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
2 | @font-face {
3 | font-family: $font-family;
4 | font-weight: $weight;
5 | font-style: $style;
6 |
7 | @if $asset-pipeline == true {
8 | src: font-url('#{$file-path}.eot');
9 | src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
10 | font-url('#{$file-path}.woff') format('woff'),
11 | font-url('#{$file-path}.ttf') format('truetype'),
12 | font-url('#{$file-path}.svg##{$font-family}') format('svg');
13 | } @else {
14 | src: url('#{$file-path}.eot');
15 | src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
16 | url('#{$file-path}.woff') format('woff'),
17 | url('#{$file-path}.ttf') format('truetype'),
18 | url('#{$file-path}.svg##{$font-family}') format('svg');
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_font-face.scss:
--------------------------------------------------------------------------------
1 | @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
2 | @font-face {
3 | font-family: $font-family;
4 | font-weight: $weight;
5 | font-style: $style;
6 |
7 | @if $asset-pipeline == true {
8 | src: font-url('#{$file-path}.eot');
9 | src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
10 | font-url('#{$file-path}.woff') format('woff'),
11 | font-url('#{$file-path}.ttf') format('truetype'),
12 | font-url('#{$file-path}.svg##{$font-family}') format('svg');
13 | } @else {
14 | src: url('#{$file-path}.eot');
15 | src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
16 | url('#{$file-path}.woff') format('woff'),
17 | url('#{$file-path}.ttf') format('truetype'),
18 | url('#{$file-path}.svg##{$font-family}') format('svg');
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_font-face.scss:
--------------------------------------------------------------------------------
1 | @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
2 | @font-face {
3 | font-family: $font-family;
4 | font-weight: $weight;
5 | font-style: $style;
6 |
7 | @if $asset-pipeline == true {
8 | src: font-url('#{$file-path}.eot');
9 | src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
10 | font-url('#{$file-path}.woff') format('woff'),
11 | font-url('#{$file-path}.ttf') format('truetype'),
12 | font-url('#{$file-path}.svg##{$font-family}') format('svg');
13 | } @else {
14 | src: url('#{$file-path}.eot');
15 | src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
16 | url('#{$file-path}.woff') format('woff'),
17 | url('#{$file-path}.ttf') format('truetype'),
18 | url('#{$file-path}.svg##{$font-family}') format('svg');
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_font-face.scss:
--------------------------------------------------------------------------------
1 | @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
2 | @font-face {
3 | font-family: $font-family;
4 | font-weight: $weight;
5 | font-style: $style;
6 |
7 | @if $asset-pipeline == true {
8 | src: font-url('#{$file-path}.eot');
9 | src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
10 | font-url('#{$file-path}.woff') format('woff'),
11 | font-url('#{$file-path}.ttf') format('truetype'),
12 | font-url('#{$file-path}.svg##{$font-family}') format('svg');
13 | } @else {
14 | src: url('#{$file-path}.eot');
15 | src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
16 | url('#{$file-path}.woff') format('woff'),
17 | url('#{$file-path}.ttf') format('truetype'),
18 | url('#{$file-path}.svg##{$font-family}') format('svg');
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 mechio
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/sublime-plugin/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 mechio
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/foundation/components/_flex-video.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Flex Video Variables
3 | //
4 | $include-html-media-classes: $include-html-classes !default;
5 |
6 | // We use these to control video container padding and margins
7 | $flex-video-padding-top: emCalc(25px) !default;
8 | $flex-video-padding-bottom: 67.5% !default;
9 | $flex-video-margin-bottom: emCalc(16px) !default;
10 |
11 | // We use this to control widescreen bottom padding
12 | $flex-video-widescreen-padding-bottom: 57.25% !default;
13 |
14 | //
15 | // Flex Video Mixins
16 | //
17 |
18 | @mixin flex-video-container {
19 | position: relative;
20 | padding-top: $flex-video-padding-top;
21 | padding-bottom: $flex-video-padding-bottom;
22 | height: 0;
23 | margin-bottom: $flex-video-margin-bottom;
24 | overflow: hidden;
25 |
26 | &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
27 | &.vimeo { padding-top: 0; }
28 |
29 | iframe,
30 | object,
31 | embed,
32 | video {
33 | position: absolute;
34 | top: 0;
35 | #{$default-float}: 0;
36 | width: 100%;
37 | height: 100%;
38 | }
39 | }
40 |
41 | @if $include-html-media-classes != false {
42 |
43 | /* Flex Video */
44 | .flex-video { @include flex-video-container; }
45 |
46 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "takana",
3 | "version": "0.5.4",
4 | "repository": "git@github.com:mechio/takana.git",
5 | "description": "Takana live editor server",
6 | "main": "index.js",
7 | "scripts": {
8 | "test": "./scripts/test",
9 | "build": "babel lib -d build"
10 | },
11 | "bin": {
12 | "takana": "bin/takana"
13 | },
14 | "preferGlobal": true,
15 | "author": "mech.io",
16 | "license": "MIT",
17 | "dependencies": {
18 | "babel-register": "^6.9.0",
19 | "chokidar": "1.6.0",
20 | "commander": "~2.1.0",
21 | "connect": "~2.12.0",
22 | "express": "~3.4.8",
23 | "less": "~2.5.3",
24 | "log4js": "~0.6.9",
25 | "mime": "^1.2.11",
26 | "node-sass": "~3.8.0",
27 | "nssocket": "~0.5.1",
28 | "q": "~1.0.0",
29 | "shelljs": "~0.2.6",
30 | "takana-client": "^1.0.3",
31 | "underscore": "~1.5.2",
32 | "websocket": "~1.0.8"
33 | },
34 | "devDependencies": {
35 | "babel-cli": "^6.9.0",
36 | "babel-preset-es2015": "^6.9.0",
37 | "babel-register": "^6.9.0",
38 | "checksum": "~0.1.1",
39 | "glob": "~3.2.8",
40 | "gulp-docco": "0.0.4",
41 | "gulp-watch": "^0.6.5",
42 | "mocha": "~2.3.3",
43 | "should": "~7.1.0",
44 | "sinon": "~1.17.4"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/foundation/components/_flex-video.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Flex Video Variables
3 | //
4 | $include-html-media-classes: $include-html-classes !default;
5 |
6 | // We use these to control video container padding and margins
7 | $flex-video-padding-top: emCalc(25px) !default;
8 | $flex-video-padding-bottom: 67.5% !default;
9 | $flex-video-margin-bottom: emCalc(16px) !default;
10 |
11 | // We use this to control widescreen bottom padding
12 | $flex-video-widescreen-padding-bottom: 57.25% !default;
13 |
14 | //
15 | // Flex Video Mixins
16 | //
17 |
18 | @mixin flex-video-container {
19 | position: relative;
20 | padding-top: $flex-video-padding-top;
21 | padding-bottom: $flex-video-padding-bottom;
22 | height: 0;
23 | margin-bottom: $flex-video-margin-bottom;
24 | overflow: hidden;
25 |
26 | &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
27 | &.vimeo { padding-top: 0; }
28 |
29 | iframe,
30 | object,
31 | embed,
32 | video {
33 | position: absolute;
34 | top: 0;
35 | #{$default-float}: 0;
36 | width: 100%;
37 | height: 100%;
38 | }
39 | }
40 |
41 | @if $include-html-media-classes != false {
42 |
43 | /* Flex Video */
44 | .flex-video { @include flex-video-container; }
45 |
46 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/foundation/components/_flex-video.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Flex Video Variables
3 | //
4 | $include-html-media-classes: $include-html-classes !default;
5 |
6 | // We use these to control video container padding and margins
7 | $flex-video-padding-top: emCalc(25px) !default;
8 | $flex-video-padding-bottom: 67.5% !default;
9 | $flex-video-margin-bottom: emCalc(16px) !default;
10 |
11 | // We use this to control widescreen bottom padding
12 | $flex-video-widescreen-padding-bottom: 57.25% !default;
13 |
14 | //
15 | // Flex Video Mixins
16 | //
17 |
18 | @mixin flex-video-container {
19 | position: relative;
20 | padding-top: $flex-video-padding-top;
21 | padding-bottom: $flex-video-padding-bottom;
22 | height: 0;
23 | margin-bottom: $flex-video-margin-bottom;
24 | overflow: hidden;
25 |
26 | &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
27 | &.vimeo { padding-top: 0; }
28 |
29 | iframe,
30 | object,
31 | embed,
32 | video {
33 | position: absolute;
34 | top: 0;
35 | #{$default-float}: 0;
36 | width: 100%;
37 | height: 100%;
38 | }
39 | }
40 |
41 | @if $include-html-media-classes != false {
42 |
43 | /* Flex Video */
44 | .flex-video { @include flex-video-container; }
45 |
46 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/foundation/components/_flex-video.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Flex Video Variables
3 | //
4 | $include-html-media-classes: $include-html-classes !default;
5 |
6 | // We use these to control video container padding and margins
7 | $flex-video-padding-top: emCalc(25px) !default;
8 | $flex-video-padding-bottom: 67.5% !default;
9 | $flex-video-margin-bottom: emCalc(16px) !default;
10 |
11 | // We use this to control widescreen bottom padding
12 | $flex-video-widescreen-padding-bottom: 57.25% !default;
13 |
14 | //
15 | // Flex Video Mixins
16 | //
17 |
18 | @mixin flex-video-container {
19 | position: relative;
20 | padding-top: $flex-video-padding-top;
21 | padding-bottom: $flex-video-padding-bottom;
22 | height: 0;
23 | margin-bottom: $flex-video-margin-bottom;
24 | overflow: hidden;
25 |
26 | &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
27 | &.vimeo { padding-top: 0; }
28 |
29 | iframe,
30 | object,
31 | embed,
32 | video {
33 | position: absolute;
34 | top: 0;
35 | #{$default-float}: 0;
36 | width: 100%;
37 | height: 100%;
38 | }
39 | }
40 |
41 | @if $include-html-media-classes != false {
42 |
43 | /* Flex Video */
44 | .flex-video { @include flex-video-container; }
45 |
46 | }
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/functions/_modular-scale.scss:
--------------------------------------------------------------------------------
1 | @function modular-scale($value, $increment, $ratio) {
2 | @if $increment > 0 {
3 | @for $i from 1 through $increment {
4 | $value: ($value * $ratio);
5 | }
6 | }
7 |
8 | @if $increment < 0 {
9 | $increment: abs($increment);
10 | @for $i from 1 through $increment {
11 | $value: ($value / $ratio);
12 | }
13 | }
14 |
15 | @return $value;
16 | }
17 |
18 | // div {
19 | // Increment Up GR with positive value
20 | // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
21 | //
22 | // Increment Down GR with negative value
23 | // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
24 | //
25 | // Can be used with ceil(round up) or floor(round down)
26 | // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
27 | // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
28 | // }
29 | //
30 | // modularscale.com
31 |
32 | @function golden-ratio($value, $increment) {
33 | @return modular-scale($value, $increment, 1.618)
34 | }
35 |
36 | // div {
37 | // font-size: golden-ratio(14px, 1); // returns: 22.652px
38 | // }
39 | //
40 | // goldenratiocalculator.com
41 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/functions/_modular-scale.scss:
--------------------------------------------------------------------------------
1 | @function modular-scale($value, $increment, $ratio) {
2 | @if $increment > 0 {
3 | @for $i from 1 through $increment {
4 | $value: ($value * $ratio);
5 | }
6 | }
7 |
8 | @if $increment < 0 {
9 | $increment: abs($increment);
10 | @for $i from 1 through $increment {
11 | $value: ($value / $ratio);
12 | }
13 | }
14 |
15 | @return $value;
16 | }
17 |
18 | // div {
19 | // Increment Up GR with positive value
20 | // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
21 | //
22 | // Increment Down GR with negative value
23 | // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
24 | //
25 | // Can be used with ceil(round up) or floor(round down)
26 | // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
27 | // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
28 | // }
29 | //
30 | // modularscale.com
31 |
32 | @function golden-ratio($value, $increment) {
33 | @return modular-scale($value, $increment, 1.618)
34 | }
35 |
36 | // div {
37 | // font-size: golden-ratio(14px, 1); // returns: 22.652px
38 | // }
39 | //
40 | // goldenratiocalculator.com
41 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/functions/_modular-scale.scss:
--------------------------------------------------------------------------------
1 | @function modular-scale($value, $increment, $ratio) {
2 | @if $increment > 0 {
3 | @for $i from 1 through $increment {
4 | $value: ($value * $ratio);
5 | }
6 | }
7 |
8 | @if $increment < 0 {
9 | $increment: abs($increment);
10 | @for $i from 1 through $increment {
11 | $value: ($value / $ratio);
12 | }
13 | }
14 |
15 | @return $value;
16 | }
17 |
18 | // div {
19 | // Increment Up GR with positive value
20 | // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
21 | //
22 | // Increment Down GR with negative value
23 | // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
24 | //
25 | // Can be used with ceil(round up) or floor(round down)
26 | // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
27 | // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
28 | // }
29 | //
30 | // modularscale.com
31 |
32 | @function golden-ratio($value, $increment) {
33 | @return modular-scale($value, $increment, 1.618)
34 | }
35 |
36 | // div {
37 | // font-size: golden-ratio(14px, 1); // returns: 22.652px
38 | // }
39 | //
40 | // goldenratiocalculator.com
41 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/functions/_modular-scale.scss:
--------------------------------------------------------------------------------
1 | @function modular-scale($value, $increment, $ratio) {
2 | @if $increment > 0 {
3 | @for $i from 1 through $increment {
4 | $value: ($value * $ratio);
5 | }
6 | }
7 |
8 | @if $increment < 0 {
9 | $increment: abs($increment);
10 | @for $i from 1 through $increment {
11 | $value: ($value / $ratio);
12 | }
13 | }
14 |
15 | @return $value;
16 | }
17 |
18 | // div {
19 | // Increment Up GR with positive value
20 | // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
21 | //
22 | // Increment Down GR with negative value
23 | // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
24 | //
25 | // Can be used with ceil(round up) or floor(round down)
26 | // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
27 | // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
28 | // }
29 | //
30 | // modularscale.com
31 |
32 | @function golden-ratio($value, $increment) {
33 | @return modular-scale($value, $increment, 1.618)
34 | }
35 |
36 | // div {
37 | // font-size: golden-ratio(14px, 1); // returns: 22.652px
38 | // }
39 | //
40 | // goldenratiocalculator.com
41 |
--------------------------------------------------------------------------------
/bin/takana:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node --harmony
2 |
3 | 'use strict';
4 |
5 | process.title = 'takana';
6 |
7 | require("babel-register");
8 |
9 | var program = require('commander'),
10 | helpers = require('../lib/support/helpers'),
11 | fs = require('fs'),
12 | packageJson = require('../package.json'),
13 | takana = require('../index');
14 |
15 |
16 | program
17 | .version(packageJson.version)
18 | .usage('[options] ')
19 | .option('-v, --verbose', 'verbose logging')
20 | .option('-i, --includes ', 'set include paths (comma separated)', function(val) { return val.split(','); })
21 | .parse(process.argv);
22 |
23 | //
24 | // Check params
25 | //
26 | var projectPath = program.args[0];
27 | var includes = program.includes || [];
28 |
29 | if (!projectPath){
30 | program.help();
31 | return;
32 | }
33 |
34 | if (!fs.existsSync(projectPath)){
35 | console.error("no such file or directory '%s'", projectPath);
36 | return;
37 | }
38 |
39 | if (!fs.statSync(projectPath).isDirectory()){
40 | console.error("'%s' is not a directory", projectPath);
41 | return;
42 | }
43 |
44 | projectPath = fs.realpathSync(helpers.sanitizePath(projectPath));
45 |
46 | //
47 | // Run takana
48 | //
49 | takana.run({
50 | path: projectPath,
51 | includePaths: includes,
52 | verbose: program.verbose
53 | });
54 |
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | // # Takana
2 | //
3 | // This is the annotated source code for [Takana](http://usetakana.com/), an
4 | // Scss & CSS live editor plugin for Mac OS X. See the [homepage](http://usetakana.com)
5 | // for information on installation and usage.
6 | //
7 | // The annotated source HTML is generated by [Docco](http://jashkenas.github.com/docco/).
8 |
9 | // ## Table of contents
10 |
11 | import browser from './browser';
12 | import editor from './editor';
13 | import helpers from './support/support';
14 | import renderer from './renderer';
15 | import Server from './server';
16 | import watcher from './watcher';
17 |
18 | module.exports = {
19 | // The [browser](browser/index.html) module manages the communication with the web browser
20 | browser: browser,
21 |
22 | // The [editor](editor/index.html) module manages the communication with the text editor
23 | editor: editor,
24 |
25 | // The support module provides various helper functions
26 | helpers: helpers,
27 |
28 | // The [renderer](renderer/index.html) module provides wrappers around supported compilers
29 | renderer: renderer,
30 |
31 | // The [Server](server.html) class runs the http and socket servers. It is the **main entry point** to Takana.
32 | Server: Server,
33 |
34 | // The [watcher](watcher/index.html) module maintains a model of the filesystem and the editor buffer
35 | watcher: watcher
36 | }
--------------------------------------------------------------------------------
/test/support/helpers.js:
--------------------------------------------------------------------------------
1 | import helpers from '../../lib/support/helpers';
2 |
3 | describe('helpers', function() {
4 | describe('sanitizePath', function() {
5 | it('should expand the tilde path', function() {
6 | helpers.sanitizePath('~').should.equal(process.env.HOME + '/');
7 | return helpers.sanitizePath('~/.takana/projects/').should.equal(process.env.HOME + '/.takana/projects/');
8 | });
9 |
10 | return it('should add a trailing slash', () => helpers.sanitizePath('/path/to/something').should.equal('/path/to/something/'));
11 | });
12 |
13 | describe('extname', () =>
14 | it('should return the extension of a file', function() {
15 | helpers.extname('/path/to/some/file.css').should.equal('css');
16 | return helpers.extname('/path/to/some/file.scss').should.equal('scss');
17 | })
18 | );
19 |
20 | describe('isFileOfType', function() {
21 | it('should return true if the file is one of the types', () => helpers.isFileOfType('/path/to/blah.scss', ['scss']).should.be.true);
22 |
23 | return it('should return false if the file is not one of the types', () => helpers.isFileOfType('/path/to/blah.scss', ['css']).should.be.false);
24 | });
25 |
26 | return describe('fastFind', function() {
27 | it('should have the same output as glob');
28 | return it('should work with huge directories (>2000 files)');
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/test/fixtures/less/kube/messages.less:
--------------------------------------------------------------------------------
1 | /* =Messages
2 | -----------------------------------------------------------------------------*/
3 | .message {
4 |
5 | border-radius: @global-radius;
6 | display: none;
7 | position: fixed;
8 | z-index: 2000;
9 | top: @margin-half;
10 | right: @margin-half;
11 | max-width: 360px;
12 | line-height: 1.45;
13 | font-size: 94%;
14 | padding: @base-line (@base-line * 1.5);
15 | color: rgba(0, 0, 0, .9);
16 | &.message-line {
17 | top: 0;
18 | right: 0;
19 | left: 0;
20 | width: 100%;
21 | padding-right: 200px;
22 | max-width: none;
23 | border-radius: 0;
24 | & footer {
25 | position: absolute;
26 | top: 0;
27 | right: 2rem;
28 | }
29 | }
30 | & ul,
31 | & ol {
32 | margin-top: 8px;
33 | margin-bottom: 0;
34 | }
35 | & footer {
36 | margin-top: 8px;
37 | }
38 | & a {
39 | font-weight: bold;
40 | }
41 | &.message-primary,
42 | &.message-error,
43 | &.message-success {
44 | color: rgba(255, 255, 255, .9);
45 | & a {
46 | color: rgba(255, 255, 255, .9);
47 | &:hover {
48 | color: rgba(255, 255, 255, .7);
49 | }
50 | }
51 | }
52 | &.message-primary {
53 | background: @color-primary;
54 | }
55 | &.message-error {
56 | background: @color-error;
57 | }
58 | &.message-warning {
59 | background: @color-warning;
60 | }
61 | &.message-success {
62 | background: @color-success;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_columns.scss:
--------------------------------------------------------------------------------
1 | @mixin columns($arg: auto) {
2 | // ||
3 | @include prefixer(columns, $arg, webkit moz spec);
4 | }
5 |
6 | @mixin column-count($int: auto) {
7 | // auto || integer
8 | @include prefixer(column-count, $int, webkit moz spec);
9 | }
10 |
11 | @mixin column-gap($length: normal) {
12 | // normal || length
13 | @include prefixer(column-gap, $length, webkit moz spec);
14 | }
15 |
16 | @mixin column-fill($arg: auto) {
17 | // auto || length
18 | @include prefixer(columns-fill, $arg, webkit moz spec);
19 | }
20 |
21 | @mixin column-rule($arg) {
22 | // || ||
23 | @include prefixer(column-rule, $arg, webkit moz spec);
24 | }
25 |
26 | @mixin column-rule-color($color) {
27 | @include prefixer(column-rule-color, $color, webkit moz spec);
28 | }
29 |
30 | @mixin column-rule-style($style: none) {
31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
32 | @include prefixer(column-rule-style, $style, webkit moz spec);
33 | }
34 |
35 | @mixin column-rule-width ($width: none) {
36 | @include prefixer(column-rule-width, $width, webkit moz spec);
37 | }
38 |
39 | @mixin column-span($arg: none) {
40 | // none || all
41 | @include prefixer(column-span, $arg, webkit moz spec);
42 | }
43 |
44 | @mixin column-width($length: auto) {
45 | // auto || length
46 | @include prefixer(column-width, $length, webkit moz spec);
47 | }
48 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_columns.scss:
--------------------------------------------------------------------------------
1 | @mixin columns($arg: auto) {
2 | // ||
3 | @include prefixer(columns, $arg, webkit moz spec);
4 | }
5 |
6 | @mixin column-count($int: auto) {
7 | // auto || integer
8 | @include prefixer(column-count, $int, webkit moz spec);
9 | }
10 |
11 | @mixin column-gap($length: normal) {
12 | // normal || length
13 | @include prefixer(column-gap, $length, webkit moz spec);
14 | }
15 |
16 | @mixin column-fill($arg: auto) {
17 | // auto || length
18 | @include prefixer(columns-fill, $arg, webkit moz spec);
19 | }
20 |
21 | @mixin column-rule($arg) {
22 | // || ||
23 | @include prefixer(column-rule, $arg, webkit moz spec);
24 | }
25 |
26 | @mixin column-rule-color($color) {
27 | @include prefixer(column-rule-color, $color, webkit moz spec);
28 | }
29 |
30 | @mixin column-rule-style($style: none) {
31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
32 | @include prefixer(column-rule-style, $style, webkit moz spec);
33 | }
34 |
35 | @mixin column-rule-width ($width: none) {
36 | @include prefixer(column-rule-width, $width, webkit moz spec);
37 | }
38 |
39 | @mixin column-span($arg: none) {
40 | // none || all
41 | @include prefixer(column-span, $arg, webkit moz spec);
42 | }
43 |
44 | @mixin column-width($length: auto) {
45 | // auto || length
46 | @include prefixer(column-width, $length, webkit moz spec);
47 | }
48 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_columns.scss:
--------------------------------------------------------------------------------
1 | @mixin columns($arg: auto) {
2 | // ||
3 | @include prefixer(columns, $arg, webkit moz spec);
4 | }
5 |
6 | @mixin column-count($int: auto) {
7 | // auto || integer
8 | @include prefixer(column-count, $int, webkit moz spec);
9 | }
10 |
11 | @mixin column-gap($length: normal) {
12 | // normal || length
13 | @include prefixer(column-gap, $length, webkit moz spec);
14 | }
15 |
16 | @mixin column-fill($arg: auto) {
17 | // auto || length
18 | @include prefixer(columns-fill, $arg, webkit moz spec);
19 | }
20 |
21 | @mixin column-rule($arg) {
22 | // || ||
23 | @include prefixer(column-rule, $arg, webkit moz spec);
24 | }
25 |
26 | @mixin column-rule-color($color) {
27 | @include prefixer(column-rule-color, $color, webkit moz spec);
28 | }
29 |
30 | @mixin column-rule-style($style: none) {
31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
32 | @include prefixer(column-rule-style, $style, webkit moz spec);
33 | }
34 |
35 | @mixin column-rule-width ($width: none) {
36 | @include prefixer(column-rule-width, $width, webkit moz spec);
37 | }
38 |
39 | @mixin column-span($arg: none) {
40 | // none || all
41 | @include prefixer(column-span, $arg, webkit moz spec);
42 | }
43 |
44 | @mixin column-width($length: auto) {
45 | // auto || length
46 | @include prefixer(column-width, $length, webkit moz spec);
47 | }
48 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_columns.scss:
--------------------------------------------------------------------------------
1 | @mixin columns($arg: auto) {
2 | // ||
3 | @include prefixer(columns, $arg, webkit moz spec);
4 | }
5 |
6 | @mixin column-count($int: auto) {
7 | // auto || integer
8 | @include prefixer(column-count, $int, webkit moz spec);
9 | }
10 |
11 | @mixin column-gap($length: normal) {
12 | // normal || length
13 | @include prefixer(column-gap, $length, webkit moz spec);
14 | }
15 |
16 | @mixin column-fill($arg: auto) {
17 | // auto || length
18 | @include prefixer(columns-fill, $arg, webkit moz spec);
19 | }
20 |
21 | @mixin column-rule($arg) {
22 | // || ||
23 | @include prefixer(column-rule, $arg, webkit moz spec);
24 | }
25 |
26 | @mixin column-rule-color($color) {
27 | @include prefixer(column-rule-color, $color, webkit moz spec);
28 | }
29 |
30 | @mixin column-rule-style($style: none) {
31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
32 | @include prefixer(column-rule-style, $style, webkit moz spec);
33 | }
34 |
35 | @mixin column-rule-width ($width: none) {
36 | @include prefixer(column-rule-width, $width, webkit moz spec);
37 | }
38 |
39 | @mixin column-span($arg: none) {
40 | // none || all
41 | @include prefixer(column-span, $arg, webkit moz spec);
42 | }
43 |
44 | @mixin column-width($length: auto) {
45 | // auto || length
46 | @include prefixer(column-width, $length, webkit moz spec);
47 | }
48 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/_bourbon.scss:
--------------------------------------------------------------------------------
1 | // Custom Functions
2 | @import "functions/compact";
3 | @import "functions/deprecated-webkit-gradient";
4 | @import "functions/flex-grid";
5 | @import "functions/grid-width";
6 | @import "functions/linear-gradient";
7 | @import "functions/modular-scale";
8 | @import "functions/radial-gradient";
9 | @import "functions/render-gradients";
10 | @import "functions/tint-shade";
11 | @import "functions/transition-property-name";
12 |
13 | // CSS3 Mixins
14 | @import "css3/animation";
15 | @import "css3/appearance";
16 | @import "css3/background";
17 | @import "css3/background-image";
18 | @import "css3/background-size";
19 | @import "css3/border-image";
20 | @import "css3/border-radius";
21 | @import "css3/box-shadow";
22 | @import "css3/box-sizing";
23 | @import "css3/columns";
24 | @import "css3/flex-box";
25 | @import "css3/font-face";
26 | @import "css3/hidpi-media-query";
27 | @import "css3/image-rendering";
28 | @import "css3/inline-block";
29 | @import "css3/linear-gradient";
30 | @import "css3/perspective";
31 | @import "css3/radial-gradient";
32 | @import "css3/transform";
33 | @import "css3/transition";
34 | @import "css3/user-select";
35 |
36 | // Addons & other mixins
37 | @import "addons/button";
38 | @import "addons/clearfix";
39 | @import "addons/font-family";
40 | @import "addons/hide-text";
41 | @import "addons/html5-input-types";
42 | @import "addons/position";
43 | @import "addons/prefixer";
44 | @import "addons/timing-functions";
45 |
46 | // Soon to be deprecated Mixins
47 | @import "bourbon-deprecated-upcoming";
48 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_flex-box.scss:
--------------------------------------------------------------------------------
1 | // CSS3 Flexible Box Model and property defaults
2 |
3 | // Custom shorthand notation for flexbox
4 | @mixin box($orient: inline-axis, $pack: start, $align: stretch) {
5 | @include display-box;
6 | @include box-orient($orient);
7 | @include box-pack($pack);
8 | @include box-align($align);
9 | }
10 |
11 | @mixin display-box {
12 | display: -webkit-box;
13 | display: -moz-box;
14 | display: box;
15 | }
16 |
17 | @mixin box-orient($orient: inline-axis) {
18 | // horizontal|vertical|inline-axis|block-axis|inherit
19 | @include prefixer(box-orient, $orient, webkit moz spec);
20 | }
21 |
22 | @mixin box-pack($pack: start) {
23 | // start|end|center|justify
24 | @include prefixer(box-pack, $pack, webkit moz spec);
25 | }
26 |
27 | @mixin box-align($align: stretch) {
28 | // start|end|center|baseline|stretch
29 | @include prefixer(box-align, $align, webkit moz spec);
30 | }
31 |
32 | @mixin box-direction($direction: normal) {
33 | // normal|reverse|inherit
34 | @include prefixer(box-direction, $direction, webkit moz spec);
35 | }
36 |
37 | @mixin box-lines($lines: single) {
38 | // single|multiple
39 | @include prefixer(box-lines, $lines, webkit moz spec);
40 | }
41 |
42 | @mixin box-ordinal-group($int: 1) {
43 | @include prefixer(box-ordinal-group, $int, webkit moz spec);
44 | }
45 |
46 | @mixin box-flex($value: 0.0) {
47 | @include prefixer(box-flex, $value, webkit moz spec);
48 | }
49 |
50 | @mixin box-flex-group($int: 1) {
51 | @include prefixer(box-flex-group, $int, webkit moz spec);
52 | }
53 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/_bourbon.scss:
--------------------------------------------------------------------------------
1 | // Custom Functions
2 | @import "functions/compact";
3 | @import "functions/deprecated-webkit-gradient";
4 | @import "functions/flex-grid";
5 | @import "functions/grid-width";
6 | @import "functions/linear-gradient";
7 | @import "functions/modular-scale";
8 | @import "functions/radial-gradient";
9 | @import "functions/render-gradients";
10 | @import "functions/tint-shade";
11 | @import "functions/transition-property-name";
12 |
13 | // CSS3 Mixins
14 | @import "css3/animation";
15 | @import "css3/appearance";
16 | @import "css3/background";
17 | @import "css3/background-image";
18 | @import "css3/background-size";
19 | @import "css3/border-image";
20 | @import "css3/border-radius";
21 | @import "css3/box-shadow";
22 | @import "css3/box-sizing";
23 | @import "css3/columns";
24 | @import "css3/flex-box";
25 | @import "css3/font-face";
26 | @import "css3/hidpi-media-query";
27 | @import "css3/image-rendering";
28 | @import "css3/inline-block";
29 | @import "css3/linear-gradient";
30 | @import "css3/perspective";
31 | @import "css3/radial-gradient";
32 | @import "css3/transform";
33 | @import "css3/transition";
34 | @import "css3/user-select";
35 |
36 | // Addons & other mixins
37 | @import "addons/button";
38 | @import "addons/clearfix";
39 | @import "addons/font-family";
40 | @import "addons/hide-text";
41 | @import "addons/html5-input-types";
42 | @import "addons/position";
43 | @import "addons/prefixer";
44 | @import "addons/timing-functions";
45 |
46 | // Soon to be deprecated Mixins
47 | @import "bourbon-deprecated-upcoming";
48 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/_bourbon.scss:
--------------------------------------------------------------------------------
1 | // Custom Functions
2 | @import "functions/compact";
3 | @import "functions/deprecated-webkit-gradient";
4 | @import "functions/flex-grid";
5 | @import "functions/grid-width";
6 | @import "functions/linear-gradient";
7 | @import "functions/modular-scale";
8 | @import "functions/radial-gradient";
9 | @import "functions/render-gradients";
10 | @import "functions/tint-shade";
11 | @import "functions/transition-property-name";
12 |
13 | // CSS3 Mixins
14 | @import "css3/animation";
15 | @import "css3/appearance";
16 | @import "css3/background";
17 | @import "css3/background-image";
18 | @import "css3/background-size";
19 | @import "css3/border-image";
20 | @import "css3/border-radius";
21 | @import "css3/box-shadow";
22 | @import "css3/box-sizing";
23 | @import "css3/columns";
24 | @import "css3/flex-box";
25 | @import "css3/font-face";
26 | @import "css3/hidpi-media-query";
27 | @import "css3/image-rendering";
28 | @import "css3/inline-block";
29 | @import "css3/linear-gradient";
30 | @import "css3/perspective";
31 | @import "css3/radial-gradient";
32 | @import "css3/transform";
33 | @import "css3/transition";
34 | @import "css3/user-select";
35 |
36 | // Addons & other mixins
37 | @import "addons/button";
38 | @import "addons/clearfix";
39 | @import "addons/font-family";
40 | @import "addons/hide-text";
41 | @import "addons/html5-input-types";
42 | @import "addons/position";
43 | @import "addons/prefixer";
44 | @import "addons/timing-functions";
45 |
46 | // Soon to be deprecated Mixins
47 | @import "bourbon-deprecated-upcoming";
48 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_flex-box.scss:
--------------------------------------------------------------------------------
1 | // CSS3 Flexible Box Model and property defaults
2 |
3 | // Custom shorthand notation for flexbox
4 | @mixin box($orient: inline-axis, $pack: start, $align: stretch) {
5 | @include display-box;
6 | @include box-orient($orient);
7 | @include box-pack($pack);
8 | @include box-align($align);
9 | }
10 |
11 | @mixin display-box {
12 | display: -webkit-box;
13 | display: -moz-box;
14 | display: box;
15 | }
16 |
17 | @mixin box-orient($orient: inline-axis) {
18 | // horizontal|vertical|inline-axis|block-axis|inherit
19 | @include prefixer(box-orient, $orient, webkit moz spec);
20 | }
21 |
22 | @mixin box-pack($pack: start) {
23 | // start|end|center|justify
24 | @include prefixer(box-pack, $pack, webkit moz spec);
25 | }
26 |
27 | @mixin box-align($align: stretch) {
28 | // start|end|center|baseline|stretch
29 | @include prefixer(box-align, $align, webkit moz spec);
30 | }
31 |
32 | @mixin box-direction($direction: normal) {
33 | // normal|reverse|inherit
34 | @include prefixer(box-direction, $direction, webkit moz spec);
35 | }
36 |
37 | @mixin box-lines($lines: single) {
38 | // single|multiple
39 | @include prefixer(box-lines, $lines, webkit moz spec);
40 | }
41 |
42 | @mixin box-ordinal-group($int: 1) {
43 | @include prefixer(box-ordinal-group, $int, webkit moz spec);
44 | }
45 |
46 | @mixin box-flex($value: 0.0) {
47 | @include prefixer(box-flex, $value, webkit moz spec);
48 | }
49 |
50 | @mixin box-flex-group($int: 1) {
51 | @include prefixer(box-flex-group, $int, webkit moz spec);
52 | }
53 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_flex-box.scss:
--------------------------------------------------------------------------------
1 | // CSS3 Flexible Box Model and property defaults
2 |
3 | // Custom shorthand notation for flexbox
4 | @mixin box($orient: inline-axis, $pack: start, $align: stretch) {
5 | @include display-box;
6 | @include box-orient($orient);
7 | @include box-pack($pack);
8 | @include box-align($align);
9 | }
10 |
11 | @mixin display-box {
12 | display: -webkit-box;
13 | display: -moz-box;
14 | display: box;
15 | }
16 |
17 | @mixin box-orient($orient: inline-axis) {
18 | // horizontal|vertical|inline-axis|block-axis|inherit
19 | @include prefixer(box-orient, $orient, webkit moz spec);
20 | }
21 |
22 | @mixin box-pack($pack: start) {
23 | // start|end|center|justify
24 | @include prefixer(box-pack, $pack, webkit moz spec);
25 | }
26 |
27 | @mixin box-align($align: stretch) {
28 | // start|end|center|baseline|stretch
29 | @include prefixer(box-align, $align, webkit moz spec);
30 | }
31 |
32 | @mixin box-direction($direction: normal) {
33 | // normal|reverse|inherit
34 | @include prefixer(box-direction, $direction, webkit moz spec);
35 | }
36 |
37 | @mixin box-lines($lines: single) {
38 | // single|multiple
39 | @include prefixer(box-lines, $lines, webkit moz spec);
40 | }
41 |
42 | @mixin box-ordinal-group($int: 1) {
43 | @include prefixer(box-ordinal-group, $int, webkit moz spec);
44 | }
45 |
46 | @mixin box-flex($value: 0.0) {
47 | @include prefixer(box-flex, $value, webkit moz spec);
48 | }
49 |
50 | @mixin box-flex-group($int: 1) {
51 | @include prefixer(box-flex-group, $int, webkit moz spec);
52 | }
53 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/_bourbon.scss:
--------------------------------------------------------------------------------
1 | // Custom Functions
2 | @import "functions/compact";
3 | @import "functions/deprecated-webkit-gradient";
4 | @import "functions/flex-grid";
5 | @import "functions/grid-width";
6 | @import "functions/linear-gradient";
7 | @import "functions/modular-scale";
8 | @import "functions/radial-gradient";
9 | @import "functions/render-gradients";
10 | @import "functions/tint-shade";
11 | @import "functions/transition-property-name";
12 |
13 | // CSS3 Mixins
14 | @import "css3/animation";
15 | @import "css3/appearance";
16 | @import "css3/background";
17 | @import "css3/background-image";
18 | @import "css3/background-size";
19 | @import "css3/border-image";
20 | @import "css3/border-radius";
21 | @import "css3/box-shadow";
22 | @import "css3/box-sizing";
23 | @import "css3/columns";
24 | @import "css3/flex-box";
25 | @import "css3/font-face";
26 | @import "css3/hidpi-media-query";
27 | @import "css3/image-rendering";
28 | @import "css3/inline-block";
29 | @import "css3/linear-gradient";
30 | @import "css3/perspective";
31 | @import "css3/radial-gradient";
32 | @import "css3/transform";
33 | @import "css3/transition";
34 | @import "css3/user-select";
35 |
36 | // Addons & other mixins
37 | @import "addons/button";
38 | @import "addons/clearfix";
39 | @import "addons/font-family";
40 | @import "addons/hide-text";
41 | @import "addons/html5-input-types";
42 | @import "addons/position";
43 | @import "addons/prefixer";
44 | @import "addons/timing-functions";
45 |
46 | // Soon to be deprecated Mixins
47 | @import "bourbon-deprecated-upcoming";
48 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_flex-box.scss:
--------------------------------------------------------------------------------
1 | // CSS3 Flexible Box Model and property defaults
2 |
3 | // Custom shorthand notation for flexbox
4 | @mixin box($orient: inline-axis, $pack: start, $align: stretch) {
5 | @include display-box;
6 | @include box-orient($orient);
7 | @include box-pack($pack);
8 | @include box-align($align);
9 | }
10 |
11 | @mixin display-box {
12 | display: -webkit-box;
13 | display: -moz-box;
14 | display: box;
15 | }
16 |
17 | @mixin box-orient($orient: inline-axis) {
18 | // horizontal|vertical|inline-axis|block-axis|inherit
19 | @include prefixer(box-orient, $orient, webkit moz spec);
20 | }
21 |
22 | @mixin box-pack($pack: start) {
23 | // start|end|center|justify
24 | @include prefixer(box-pack, $pack, webkit moz spec);
25 | }
26 |
27 | @mixin box-align($align: stretch) {
28 | // start|end|center|baseline|stretch
29 | @include prefixer(box-align, $align, webkit moz spec);
30 | }
31 |
32 | @mixin box-direction($direction: normal) {
33 | // normal|reverse|inherit
34 | @include prefixer(box-direction, $direction, webkit moz spec);
35 | }
36 |
37 | @mixin box-lines($lines: single) {
38 | // single|multiple
39 | @include prefixer(box-lines, $lines, webkit moz spec);
40 | }
41 |
42 | @mixin box-ordinal-group($int: 1) {
43 | @include prefixer(box-ordinal-group, $int, webkit moz spec);
44 | }
45 |
46 | @mixin box-flex($value: 0.0) {
47 | @include prefixer(box-flex, $value, webkit moz spec);
48 | }
49 |
50 | @mixin box-flex-group($int: 1) {
51 | @include prefixer(box-flex-group, $int, webkit moz spec);
52 | }
53 |
--------------------------------------------------------------------------------
/test/fixtures/less/kube/alerts.less:
--------------------------------------------------------------------------------
1 | /* =Alerts
2 | -----------------------------------------------------------------------------*/
3 | .alert {
4 | position: relative;
5 | padding: @base-line / 2 @base-line;
6 | padding-right: 32px;
7 | line-height: @base-line;
8 | font-size: 94%;
9 | color: rgba(0, 0, 0, 1);
10 | display: block;
11 | font-weight: normal;
12 | border-radius: @global-radius;
13 | margin-bottom: @base-line;
14 | &.alert-primary {
15 | color: @color-primary;
16 | & a,
17 | & h5 {
18 | color: @color-primary;
19 | }
20 | background-color: rgba(red(@color-primary), green(@color-primary), blue(@color-primary), .15);
21 | }
22 | &.alert-error {
23 | color: @color-error;
24 | & a,
25 | & h5 {
26 | color: @color-error;
27 | }
28 | background-color: rgba(red(@color-error), green(@color-error), blue(@color-error), .15);
29 | }
30 | &.alert-warning {
31 | color: darken(@color-warning, 15);
32 | & a,
33 | & h5 {
34 | color: darken(@color-warning, 15);
35 | }
36 | background-color: rgba(red(@color-warning), green(@color-warning), blue(@color-warning), .23);
37 | }
38 | &.alert-success {
39 | color: @color-success;
40 | & a,
41 | & h5 {
42 | color: @color-success;
43 | }
44 | background-color: rgba(red(@color-success), green(@color-success), blue(@color-success), .13);
45 | }
46 | & a {
47 | font-weight: bold;
48 | &:hover {
49 | color: #000;
50 | }
51 | }
52 | & span.close {
53 | position: absolute;
54 | top: 0;
55 | right: 0;
56 | padding: .5rem 1rem;
57 | opacity: .6;
58 | cursor: pointer;
59 | &:hover {
60 | opacity: 1;
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/functions/_flex-grid.scss:
--------------------------------------------------------------------------------
1 | // Flexible grid
2 | @function flex-grid($columns, $container-columns: $fg-max-columns) {
3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
5 | @return percentage($width / $container-width);
6 | }
7 |
8 | // Flexible gutter
9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
11 | @return percentage($gutter / $container-width);
12 | }
13 |
14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base template to properly use the flex-grid function.
15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
16 | //
17 | // $fg-column: 60px; // Column Width
18 | // $fg-gutter: 25px; // Gutter Width
19 | // $fg-max-columns: 12; // Total Columns For Main Container
20 | //
21 | // div {
22 | // width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
23 | // margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
24 | //
25 | // p {
26 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
27 | // float: left;
28 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
29 | // }
30 | //
31 | // blockquote {
32 | // float: left;
33 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
34 | // }
35 | // }
36 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/functions/_flex-grid.scss:
--------------------------------------------------------------------------------
1 | // Flexible grid
2 | @function flex-grid($columns, $container-columns: $fg-max-columns) {
3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
5 | @return percentage($width / $container-width);
6 | }
7 |
8 | // Flexible gutter
9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
11 | @return percentage($gutter / $container-width);
12 | }
13 |
14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base template to properly use the flex-grid function.
15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
16 | //
17 | // $fg-column: 60px; // Column Width
18 | // $fg-gutter: 25px; // Gutter Width
19 | // $fg-max-columns: 12; // Total Columns For Main Container
20 | //
21 | // div {
22 | // width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
23 | // margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
24 | //
25 | // p {
26 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
27 | // float: left;
28 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
29 | // }
30 | //
31 | // blockquote {
32 | // float: left;
33 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
34 | // }
35 | // }
36 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/functions/_flex-grid.scss:
--------------------------------------------------------------------------------
1 | // Flexible grid
2 | @function flex-grid($columns, $container-columns: $fg-max-columns) {
3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
5 | @return percentage($width / $container-width);
6 | }
7 |
8 | // Flexible gutter
9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
11 | @return percentage($gutter / $container-width);
12 | }
13 |
14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
16 | //
17 | // $fg-column: 60px; // Column Width
18 | // $fg-gutter: 25px; // Gutter Width
19 | // $fg-max-columns: 12; // Total Columns For Main Container
20 | //
21 | // div {
22 | // width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
23 | // margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
24 | //
25 | // p {
26 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
27 | // float: left;
28 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
29 | // }
30 | //
31 | // blockquote {
32 | // float: left;
33 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
34 | // }
35 | // }
36 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_transition.scss:
--------------------------------------------------------------------------------
1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
2 | // Example: @include transition (all, 2.0s, ease-in-out);
3 | // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
4 | // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
5 |
6 | @mixin transition ($properties...) {
7 | @if length($properties) >= 1 {
8 | @include prefixer(transition, $properties, webkit moz ms o spec);
9 | }
10 |
11 | @else {
12 | $properties: all 0.15s ease-out 0;
13 | @include prefixer(transition, $properties, webkit moz ms o spec);
14 | }
15 | }
16 |
17 | @mixin transition-property ($properties...) {
18 | -webkit-transition-property: transition-property-names($properties, 'webkit');
19 | -moz-transition-property: transition-property-names($properties, 'moz');
20 | -ms-transition-property: transition-property-names($properties, 'ms');
21 | -o-transition-property: transition-property-names($properties, 'o');
22 | transition-property: transition-property-names($properties, false);
23 | }
24 |
25 | @mixin transition-duration ($times...) {
26 | @include prefixer(transition-duration, $times, webkit moz ms o spec);
27 | }
28 |
29 | @mixin transition-timing-function ($motions...) {
30 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
31 | @include prefixer(transition-timing-function, $motions, webkit moz ms o spec);
32 | }
33 |
34 | @mixin transition-delay ($times...) {
35 | @include prefixer(transition-delay, $times, webkit moz ms o spec);
36 | }
37 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/functions/_deprecated-webkit-gradient.scss:
--------------------------------------------------------------------------------
1 | // Render Deprecated Webkit Gradient - Linear || Radial
2 | //************************************************************************//
3 | @function deprecated-webkit-gradient($type,
4 | $deprecated-pos1, $deprecated-pos2,
5 | $full,
6 | $deprecated-radius1: false, $deprecated-radius2: false) {
7 | $gradient-list: ();
8 | $gradient: false;
9 | $full-length: length($full);
10 | $percentage: false;
11 | $gradient-type: $type;
12 |
13 | @for $i from 1 through $full-length {
14 | $gradient: nth($full, $i);
15 |
16 | @if length($gradient) == 2 {
17 | $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
18 | $gradient-list: join($gradient-list, $color-stop, comma);
19 | }
20 |
21 | @else if $gradient != null {
22 | @if $i == $full-length {
23 | $percentage: 100%;
24 | }
25 |
26 | @else {
27 | $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
28 | }
29 |
30 | $color-stop: color-stop(unquote($percentage), $gradient);
31 | $gradient-list: join($gradient-list, $color-stop, comma);
32 | }
33 | }
34 |
35 | @if $type == radial {
36 | $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
37 | }
38 |
39 | @else if $type == linear {
40 | $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
41 | }
42 |
43 | @return $gradient;
44 | }
45 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/functions/_flex-grid.scss:
--------------------------------------------------------------------------------
1 | // Flexible grid
2 | @function flex-grid($columns, $container-columns: $fg-max-columns) {
3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
5 | @return percentage($width / $container-width);
6 | }
7 |
8 | // Flexible gutter
9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
11 | @return percentage($gutter / $container-width);
12 | }
13 |
14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base template to properly use the flex-grid function.
15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
16 | //
17 | // $fg-column: 60px; // Column Width
18 | // $fg-gutter: 25px; // Gutter Width
19 | // $fg-max-columns: 12; // Total Columns For Main Container
20 | //
21 | // div {
22 | // width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
23 | // margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
24 | //
25 | // p {
26 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
27 | // float: left;
28 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
29 | // }
30 | //
31 | // blockquote {
32 | // float: left;
33 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
34 | // }
35 | // }
36 |
--------------------------------------------------------------------------------
/test/editor/manager.js:
--------------------------------------------------------------------------------
1 | import editor from '../../lib/editor';
2 | import sinon from 'sinon';
3 | import nssocket from 'nssocket';
4 |
5 | describe('editor.Manager', function() {
6 | before(function(done) {
7 | this.editorManager = new editor.Manager({port: 5000});
8 | return this.editorManager.start(done);
9 | });
10 |
11 | after(function() {
12 | return this.editorManager.stop();
13 | });
14 |
15 |
16 | it('should emit buffer:update when the editor updates its buffer', function(done) {
17 | let outbound = new nssocket.NsSocket();
18 | let payload = {path: '/path/to/some/file'};
19 |
20 | this.editorManager.once('buffer:reset', function(data) {
21 | data.should.eql(payload);
22 | return done();
23 | });
24 |
25 | outbound.on('start', () => outbound.send(['editor', 'reset'], payload));
26 |
27 | return outbound.connect(this.editorManager.port);
28 | });
29 |
30 | return it('should emit buffer:clear when the editor clears its buffer', function(done) {
31 | let outbound = new nssocket.NsSocket();
32 | let payload = {
33 | path: '/path/to/some/file',
34 | created_at: 123456,
35 | buffer: 'hello jag jag'
36 | };
37 |
38 | this.editorManager.once('buffer:update', function(data) {
39 | data.path.should.eql(payload.path);
40 | data.timestamp.should.eql(payload.created_at);
41 | data.buffer.should.eql(payload.buffer);
42 | return done();
43 | });
44 |
45 | outbound.on('start', () => outbound.send(['editor', 'update'], payload));
46 |
47 | return outbound.connect(this.editorManager.port);
48 | });
49 | });
50 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_transition.scss:
--------------------------------------------------------------------------------
1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
2 | // Example: @include transition (all, 2.0s, ease-in-out);
3 | // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
4 | // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
5 |
6 | @mixin transition ($properties...) {
7 | @if length($properties) >= 1 {
8 | @include prefixer(transition, $properties, webkit moz ms o spec);
9 | }
10 |
11 | @else {
12 | $properties: all 0.15s ease-out 0;
13 | @include prefixer(transition, $properties, webkit moz ms o spec);
14 | }
15 | }
16 |
17 | @mixin transition-property ($properties...) {
18 | -webkit-transition-property: transition-property-names($properties, 'webkit');
19 | -moz-transition-property: transition-property-names($properties, 'moz');
20 | -ms-transition-property: transition-property-names($properties, 'ms');
21 | -o-transition-property: transition-property-names($properties, 'o');
22 | transition-property: transition-property-names($properties, false);
23 | }
24 |
25 | @mixin transition-duration ($times...) {
26 | @include prefixer(transition-duration, $times, webkit moz ms o spec);
27 | }
28 |
29 | @mixin transition-timing-function ($motions...) {
30 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
31 | @include prefixer(transition-timing-function, $motions, webkit moz ms o spec);
32 | }
33 |
34 | @mixin transition-delay ($times...) {
35 | @include prefixer(transition-delay, $times, webkit moz ms o spec);
36 | }
37 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/functions/_deprecated-webkit-gradient.scss:
--------------------------------------------------------------------------------
1 | // Render Deprecated Webkit Gradient - Linear || Radial
2 | //************************************************************************//
3 | @function deprecated-webkit-gradient($type,
4 | $deprecated-pos1, $deprecated-pos2,
5 | $full,
6 | $deprecated-radius1: false, $deprecated-radius2: false) {
7 | $gradient-list: ();
8 | $gradient: false;
9 | $full-length: length($full);
10 | $percentage: false;
11 | $gradient-type: $type;
12 |
13 | @for $i from 1 through $full-length {
14 | $gradient: nth($full, $i);
15 |
16 | @if length($gradient) == 2 {
17 | $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
18 | $gradient-list: join($gradient-list, $color-stop, comma);
19 | }
20 |
21 | @else if $gradient != null {
22 | @if $i == $full-length {
23 | $percentage: 100%;
24 | }
25 |
26 | @else {
27 | $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
28 | }
29 |
30 | $color-stop: color-stop(unquote($percentage), $gradient);
31 | $gradient-list: join($gradient-list, $color-stop, comma);
32 | }
33 | }
34 |
35 | @if $type == radial {
36 | $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
37 | }
38 |
39 | @else if $type == linear {
40 | $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
41 | }
42 |
43 | @return $gradient;
44 | }
45 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/foundation/components/_thumbs.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Image Thumbnail Variables
3 | //
4 | $include-html-media-classes: $include-html-classes !default;
5 |
6 | // We use these to control border styles
7 | $thumb-border-style: solid !default;
8 | $thumb-border-width: 4px !default;
9 | $thumb-border-color: #fff !default;
10 | $thumb-box-shadow: 0 0 0 1px rgba(#000,.2) !default;
11 | $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
12 |
13 | // Radius and transition speed for thumbs
14 | $thumb-radius: $global-radius !default;
15 | $thumb-transition-speed: 200ms !default;
16 |
17 | //
18 | // Image Thumbnail Mixins
19 | //
20 |
21 | // We use this to create image thumbnail styles.
22 | @mixin thumb($border-width:$thumb-border-width, $box-shadow:$thumb-box-shadow, $box-shadow-hover:$thumb-box-shadow-hover) {
23 | line-height: 0;
24 | display: inline-block;
25 | border: $thumb-border-style $border-width $thumb-border-color;
26 | @if $experimental {
27 | -webkit-box-shadow: $box-shadow;
28 | }
29 | box-shadow: $box-shadow;
30 |
31 | &:hover,
32 | &:focus {
33 | @if $experimental {
34 | -webkit-box-shadow: $box-shadow-hover;
35 | }
36 | box-shadow: $box-shadow-hover;
37 | }
38 | }
39 |
40 |
41 | // If html classes are turned on we'll include these classes.
42 | @if $include-html-media-classes != false {
43 |
44 | /* Image Thumbnails */
45 | .th {
46 | @include thumb;
47 | @include single-transition(all,$thumb-transition-speed,ease-out);
48 |
49 | &.radius { @include radius($thumb-radius); }
50 | }
51 | a.th { display: inline-block; }
52 |
53 | }
54 |
55 |
56 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_transition.scss:
--------------------------------------------------------------------------------
1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
2 | // Example: @include transition (all, 2.0s, ease-in-out);
3 | // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
4 | // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
5 |
6 | @mixin transition ($properties...) {
7 | @if length($properties) >= 1 {
8 | @include prefixer(transition, $properties, webkit moz ms o spec);
9 | }
10 |
11 | @else {
12 | $properties: all 0.15s ease-out 0;
13 | @include prefixer(transition, $properties, webkit moz ms o spec);
14 | }
15 | }
16 |
17 | @mixin transition-property ($properties...) {
18 | -webkit-transition-property: transition-property-names($properties, 'webkit');
19 | -moz-transition-property: transition-property-names($properties, 'moz');
20 | -ms-transition-property: transition-property-names($properties, 'ms');
21 | -o-transition-property: transition-property-names($properties, 'o');
22 | transition-property: transition-property-names($properties, false);
23 | }
24 |
25 | @mixin transition-duration ($times...) {
26 | @include prefixer(transition-duration, $times, webkit moz ms o spec);
27 | }
28 |
29 | @mixin transition-timing-function ($motions...) {
30 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
31 | @include prefixer(transition-timing-function, $motions, webkit moz ms o spec);
32 | }
33 |
34 | @mixin transition-delay ($times...) {
35 | @include prefixer(transition-delay, $times, webkit moz ms o spec);
36 | }
37 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/functions/_deprecated-webkit-gradient.scss:
--------------------------------------------------------------------------------
1 | // Render Deprecated Webkit Gradient - Linear || Radial
2 | //************************************************************************//
3 | @function deprecated-webkit-gradient($type,
4 | $deprecated-pos1, $deprecated-pos2,
5 | $full,
6 | $deprecated-radius1: false, $deprecated-radius2: false) {
7 | $gradient-list: ();
8 | $gradient: false;
9 | $full-length: length($full);
10 | $percentage: false;
11 | $gradient-type: $type;
12 |
13 | @for $i from 1 through $full-length {
14 | $gradient: nth($full, $i);
15 |
16 | @if length($gradient) == 2 {
17 | $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
18 | $gradient-list: join($gradient-list, $color-stop, comma);
19 | }
20 |
21 | @else if $gradient != null {
22 | @if $i == $full-length {
23 | $percentage: 100%;
24 | }
25 |
26 | @else {
27 | $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
28 | }
29 |
30 | $color-stop: color-stop(unquote($percentage), $gradient);
31 | $gradient-list: join($gradient-list, $color-stop, comma);
32 | }
33 | }
34 |
35 | @if $type == radial {
36 | $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
37 | }
38 |
39 | @else if $type == linear {
40 | $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
41 | }
42 |
43 | @return $gradient;
44 | }
45 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_transition.scss:
--------------------------------------------------------------------------------
1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
2 | // Example: @include transition (all, 2.0s, ease-in-out);
3 | // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
4 | // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
5 |
6 | @mixin transition ($properties...) {
7 | @if length($properties) >= 1 {
8 | @include prefixer(transition, $properties, webkit moz ms o spec);
9 | }
10 |
11 | @else {
12 | $properties: all 0.15s ease-out 0;
13 | @include prefixer(transition, $properties, webkit moz ms o spec);
14 | }
15 | }
16 |
17 | @mixin transition-property ($properties...) {
18 | -webkit-transition-property: transition-property-names($properties, 'webkit');
19 | -moz-transition-property: transition-property-names($properties, 'moz');
20 | -ms-transition-property: transition-property-names($properties, 'ms');
21 | -o-transition-property: transition-property-names($properties, 'o');
22 | transition-property: transition-property-names($properties, false);
23 | }
24 |
25 | @mixin transition-duration ($times...) {
26 | @include prefixer(transition-duration, $times, webkit moz ms o spec);
27 | }
28 |
29 | @mixin transition-timing-function ($motions...) {
30 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
31 | @include prefixer(transition-timing-function, $motions, webkit moz ms o spec);
32 | }
33 |
34 | @mixin transition-delay ($times...) {
35 | @include prefixer(transition-delay, $times, webkit moz ms o spec);
36 | }
37 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/functions/_deprecated-webkit-gradient.scss:
--------------------------------------------------------------------------------
1 | // Render Deprecated Webkit Gradient - Linear || Radial
2 | //************************************************************************//
3 | @function deprecated-webkit-gradient($type,
4 | $deprecated-pos1, $deprecated-pos2,
5 | $full,
6 | $deprecated-radius1: false, $deprecated-radius2: false) {
7 | $gradient-list: ();
8 | $gradient: false;
9 | $full-length: length($full);
10 | $percentage: false;
11 | $gradient-type: $type;
12 |
13 | @for $i from 1 through $full-length {
14 | $gradient: nth($full, $i);
15 |
16 | @if length($gradient) == 2 {
17 | $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
18 | $gradient-list: join($gradient-list, $color-stop, comma);
19 | }
20 |
21 | @else if $gradient != null {
22 | @if $i == $full-length {
23 | $percentage: 100%;
24 | }
25 |
26 | @else {
27 | $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
28 | }
29 |
30 | $color-stop: color-stop(unquote($percentage), $gradient);
31 | $gradient-list: join($gradient-list, $color-stop, comma);
32 | }
33 | }
34 |
35 | @if $type == radial {
36 | $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
37 | }
38 |
39 | @else if $type == linear {
40 | $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
41 | }
42 |
43 | @return $gradient;
44 | }
45 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/foundation/components/_thumbs.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Image Thumbnail Variables
3 | //
4 | $include-html-media-classes: $include-html-classes !default;
5 |
6 | // We use these to control border styles
7 | $thumb-border-style: solid !default;
8 | $thumb-border-width: 4px !default;
9 | $thumb-border-color: #fff !default;
10 | $thumb-box-shadow: 0 0 0 1px rgba(#000,.2) !default;
11 | $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
12 |
13 | // Radius and transition speed for thumbs
14 | $thumb-radius: $global-radius !default;
15 | $thumb-transition-speed: 200ms !default;
16 |
17 | //
18 | // Image Thumbnail Mixins
19 | //
20 |
21 | // We use this to create image thumbnail styles.
22 | @mixin thumb($border-width:$thumb-border-width, $box-shadow:$thumb-box-shadow, $box-shadow-hover:$thumb-box-shadow-hover) {
23 | line-height: 0;
24 | display: inline-block;
25 | border: $thumb-border-style $border-width $thumb-border-color;
26 | @if $experimental {
27 | -webkit-box-shadow: $box-shadow;
28 | }
29 | box-shadow: $box-shadow;
30 |
31 | &:hover,
32 | &:focus {
33 | @if $experimental {
34 | -webkit-box-shadow: $box-shadow-hover;
35 | }
36 | box-shadow: $box-shadow-hover;
37 | }
38 | }
39 |
40 |
41 | // If html classes are turned on we'll include these classes.
42 | @if $include-html-media-classes != false {
43 |
44 | /* Image Thumbnails */
45 | .th {
46 | @include thumb;
47 | @include single-transition(all,$thumb-transition-speed,ease-out);
48 |
49 | &.radius { @include radius($thumb-radius); }
50 | }
51 | a.th { display: inline-block; }
52 |
53 | }
54 |
55 |
56 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/foundation/components/_thumbs.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Image Thumbnail Variables
3 | //
4 | $include-html-media-classes: $include-html-classes !default;
5 |
6 | // We use these to control border styles
7 | $thumb-border-style: solid !default;
8 | $thumb-border-width: 4px !default;
9 | $thumb-border-color: #fff !default;
10 | $thumb-box-shadow: 0 0 0 1px rgba(#000,.2) !default;
11 | $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
12 |
13 | // Radius and transition speed for thumbs
14 | $thumb-radius: $global-radius !default;
15 | $thumb-transition-speed: 200ms !default;
16 |
17 | //
18 | // Image Thumbnail Mixins
19 | //
20 |
21 | // We use this to create image thumbnail styles.
22 | @mixin thumb($border-width:$thumb-border-width, $box-shadow:$thumb-box-shadow, $box-shadow-hover:$thumb-box-shadow-hover) {
23 | line-height: 0;
24 | display: inline-block;
25 | border: $thumb-border-style $border-width $thumb-border-color;
26 | @if $experimental {
27 | -webkit-box-shadow: $box-shadow;
28 | }
29 | box-shadow: $box-shadow;
30 |
31 | &:hover,
32 | &:focus {
33 | @if $experimental {
34 | -webkit-box-shadow: $box-shadow-hover;
35 | }
36 | box-shadow: $box-shadow-hover;
37 | }
38 | }
39 |
40 |
41 | // If html classes are turned on we'll include these classes.
42 | @if $include-html-media-classes != false {
43 |
44 | /* Image Thumbnails */
45 | .th {
46 | @include thumb;
47 | @include single-transition(all,$thumb-transition-speed,ease-out);
48 |
49 | &.radius { @include radius($thumb-radius); }
50 | }
51 | a.th { display: inline-block; }
52 |
53 | }
54 |
55 |
56 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/foundation/components/_inline-lists.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Inline List Variables
3 | //
4 | $include-html-inline-list-classes: $include-html-classes !default;
5 |
6 | // We use this to control the margins and padding of the inline list.
7 | $inline-list-top-margin: 0 !default;
8 | $inline-list-opposite-margin: 0 !default;
9 | $inline-list-bottom-margin: emCalc(17px) !default;
10 | $inline-list-default-float-margin: emCalc(-22px) !default;
11 |
12 | $inline-list-padding: 0 !default;
13 |
14 | // We use this to control the overflow of the inline list.
15 | $inline-list-overflow: hidden !default;
16 |
17 | // We use this to control the list items
18 | $inline-list-display: block !default;
19 |
20 | // We use this to control any elments within list items
21 | $inline-list-children-display: block !default;
22 |
23 | //
24 | // Inline List Mixins
25 | //
26 |
27 | // We use this mixin to create inline lists
28 | @mixin inline-list {
29 | margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
30 | margin-#{$default-float}: $inline-list-default-float-margin;
31 | margin-#{$opposite-direction}: $inline-list-opposite-margin;
32 | padding: $inline-list-padding;
33 | list-style: none;
34 | overflow: $inline-list-overflow;
35 |
36 | & > li {
37 | list-style: none;
38 | float: $default-float;
39 | margin-#{$default-float}: emCalc(22px);
40 | display: $inline-list-display;
41 | &>* { display: $inline-list-children-display; }
42 | }
43 | }
44 |
45 |
46 | @if $include-html-inline-list-classes != false {
47 |
48 | /* Inline Lists */
49 | .inline-list {
50 | @include inline-list();
51 | }
52 |
53 | }
54 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/foundation/components/_thumbs.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Image Thumbnail Variables
3 | //
4 | $include-html-media-classes: $include-html-classes !default;
5 |
6 | // We use these to control border styles
7 | $thumb-border-style: solid !default;
8 | $thumb-border-width: 4px !default;
9 | $thumb-border-color: #fff !default;
10 | $thumb-box-shadow: 0 0 0 1px rgba(#000,.2) !default;
11 | $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
12 |
13 | // Radius and transition speed for thumbs
14 | $thumb-radius: $global-radius !default;
15 | $thumb-transition-speed: 200ms !default;
16 |
17 | //
18 | // Image Thumbnail Mixins
19 | //
20 |
21 | // We use this to create image thumbnail styles.
22 | @mixin thumb($border-width:$thumb-border-width, $box-shadow:$thumb-box-shadow, $box-shadow-hover:$thumb-box-shadow-hover) {
23 | line-height: 0;
24 | display: inline-block;
25 | border: $thumb-border-style $border-width $thumb-border-color;
26 | @if $experimental {
27 | -webkit-box-shadow: $box-shadow;
28 | }
29 | box-shadow: $box-shadow;
30 |
31 | &:hover,
32 | &:focus {
33 | @if $experimental {
34 | -webkit-box-shadow: $box-shadow-hover;
35 | }
36 | box-shadow: $box-shadow-hover;
37 | }
38 | }
39 |
40 |
41 | // If html classes are turned on we'll include these classes.
42 | @if $include-html-media-classes != false {
43 |
44 | /* Image Thumbnails */
45 | .th {
46 | @include thumb;
47 | @include single-transition(all,$thumb-transition-speed,ease-out);
48 |
49 | &.radius { @include radius($thumb-radius); }
50 | }
51 | a.th { display: inline-block; }
52 |
53 | }
54 |
55 |
56 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/foundation/components/_inline-lists.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Inline List Variables
3 | //
4 | $include-html-inline-list-classes: $include-html-classes !default;
5 |
6 | // We use this to control the margins and padding of the inline list.
7 | $inline-list-top-margin: 0 !default;
8 | $inline-list-opposite-margin: 0 !default;
9 | $inline-list-bottom-margin: emCalc(17px) !default;
10 | $inline-list-default-float-margin: emCalc(-22px) !default;
11 |
12 | $inline-list-padding: 0 !default;
13 |
14 | // We use this to control the overflow of the inline list.
15 | $inline-list-overflow: hidden !default;
16 |
17 | // We use this to control the list items
18 | $inline-list-display: block !default;
19 |
20 | // We use this to control any elments within list items
21 | $inline-list-children-display: block !default;
22 |
23 | //
24 | // Inline List Mixins
25 | //
26 |
27 | // We use this mixin to create inline lists
28 | @mixin inline-list {
29 | margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
30 | margin-#{$default-float}: $inline-list-default-float-margin;
31 | margin-#{$opposite-direction}: $inline-list-opposite-margin;
32 | padding: $inline-list-padding;
33 | list-style: none;
34 | overflow: $inline-list-overflow;
35 |
36 | & > li {
37 | list-style: none;
38 | float: $default-float;
39 | margin-#{$default-float}: emCalc(22px);
40 | display: $inline-list-display;
41 | &>* { display: $inline-list-children-display; }
42 | }
43 | }
44 |
45 |
46 | @if $include-html-inline-list-classes != false {
47 |
48 | /* Inline Lists */
49 | .inline-list {
50 | @include inline-list();
51 | }
52 |
53 | }
54 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/foundation/components/_inline-lists.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Inline List Variables
3 | //
4 | $include-html-inline-list-classes: $include-html-classes !default;
5 |
6 | // We use this to control the margins and padding of the inline list.
7 | $inline-list-top-margin: 0 !default;
8 | $inline-list-opposite-margin: 0 !default;
9 | $inline-list-bottom-margin: emCalc(17px) !default;
10 | $inline-list-default-float-margin: emCalc(-22px) !default;
11 |
12 | $inline-list-padding: 0 !default;
13 |
14 | // We use this to control the overflow of the inline list.
15 | $inline-list-overflow: hidden !default;
16 |
17 | // We use this to control the list items
18 | $inline-list-display: block !default;
19 |
20 | // We use this to control any elments within list items
21 | $inline-list-children-display: block !default;
22 |
23 | //
24 | // Inline List Mixins
25 | //
26 |
27 | // We use this mixin to create inline lists
28 | @mixin inline-list {
29 | margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
30 | margin-#{$default-float}: $inline-list-default-float-margin;
31 | margin-#{$opposite-direction}: $inline-list-opposite-margin;
32 | padding: $inline-list-padding;
33 | list-style: none;
34 | overflow: $inline-list-overflow;
35 |
36 | & > li {
37 | list-style: none;
38 | float: $default-float;
39 | margin-#{$default-float}: emCalc(22px);
40 | display: $inline-list-display;
41 | &>* { display: $inline-list-children-display; }
42 | }
43 | }
44 |
45 |
46 | @if $include-html-inline-list-classes != false {
47 |
48 | /* Inline Lists */
49 | .inline-list {
50 | @include inline-list();
51 | }
52 |
53 | }
54 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/foundation/components/_inline-lists.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Inline List Variables
3 | //
4 | $include-html-inline-list-classes: $include-html-classes !default;
5 |
6 | // We use this to control the margins and padding of the inline list.
7 | $inline-list-top-margin: 0 !default;
8 | $inline-list-opposite-margin: 0 !default;
9 | $inline-list-bottom-margin: emCalc(17px) !default;
10 | $inline-list-default-float-margin: emCalc(-22px) !default;
11 |
12 | $inline-list-padding: 0 !default;
13 |
14 | // We use this to control the overflow of the inline list.
15 | $inline-list-overflow: hidden !default;
16 |
17 | // We use this to control the list items
18 | $inline-list-display: block !default;
19 |
20 | // We use this to control any elments within list items
21 | $inline-list-children-display: block !default;
22 |
23 | //
24 | // Inline List Mixins
25 | //
26 |
27 | // We use this mixin to create inline lists
28 | @mixin inline-list {
29 | margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
30 | margin-#{$default-float}: $inline-list-default-float-margin;
31 | margin-#{$opposite-direction}: $inline-list-opposite-margin;
32 | padding: $inline-list-padding;
33 | list-style: none;
34 | overflow: $inline-list-overflow;
35 |
36 | & > li {
37 | list-style: none;
38 | float: $default-float;
39 | margin-#{$default-float}: emCalc(22px);
40 | display: $inline-list-display;
41 | &>* { display: $inline-list-children-display; }
42 | }
43 | }
44 |
45 |
46 | @if $include-html-inline-list-classes != false {
47 |
48 | /* Inline Lists */
49 | .inline-list {
50 | @include inline-list();
51 | }
52 |
53 | }
54 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/foundation.scss:
--------------------------------------------------------------------------------
1 | // // Make sure the charset is set appropriately
2 | // @charset "UTF-8";
3 |
4 | // This includes all of the foundation global elements that are needed to work with any of the other files.
5 | @import "foundation/variables";
6 |
7 | // Foundation Components
8 | @import
9 | "foundation/components/global",
10 | "foundation/components/grid",
11 | "foundation/components/visibility",
12 | "foundation/components/block-grid",
13 | "foundation/components/type",
14 | "foundation/components/buttons",
15 | "foundation/components/forms",
16 | "foundation/components/custom-forms",
17 | "foundation/components/button-groups",
18 | "foundation/components/dropdown-buttons",
19 | "foundation/components/split-buttons",
20 | "foundation/components/flex-video",
21 | "foundation/components/section",
22 | "foundation/components/top-bar",
23 | "foundation/components/orbit",
24 | "foundation/components/reveal",
25 | "foundation/components/joyride",
26 | "foundation/components/clearing",
27 | "foundation/components/alert-boxes",
28 | "foundation/components/breadcrumbs",
29 | "foundation/components/keystrokes",
30 | "foundation/components/labels",
31 | "foundation/components/inline-lists",
32 | "foundation/components/pagination",
33 | "foundation/components/panels",
34 | "foundation/components/pricing-tables",
35 | "foundation/components/progress-bars",
36 | "foundation/components/side-nav",
37 | "foundation/components/sub-nav",
38 | "foundation/components/switch",
39 | "foundation/components/magellan",
40 | "foundation/components/tables",
41 | "foundation/components/thumbs",
42 | "foundation/components/tooltips",
43 | "foundation/components/dropdown";
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/foundation.scss:
--------------------------------------------------------------------------------
1 | // // Make sure the charset is set appropriately
2 | // @charset "UTF-8";
3 |
4 | // This includes all of the foundation global elements that are needed to work with any of the other files.
5 | @import "foundation/variables";
6 |
7 | // Foundation Components
8 | @import
9 | "foundation/components/global",
10 | "foundation/components/grid",
11 | "foundation/components/visibility",
12 | "foundation/components/block-grid",
13 | "foundation/components/type",
14 | "foundation/components/buttons",
15 | "foundation/components/forms",
16 | "foundation/components/custom-forms",
17 | "foundation/components/button-groups",
18 | "foundation/components/dropdown-buttons",
19 | "foundation/components/split-buttons",
20 | "foundation/components/flex-video",
21 | "foundation/components/section",
22 | "foundation/components/top-bar",
23 | "foundation/components/orbit",
24 | "foundation/components/reveal",
25 | "foundation/components/joyride",
26 | "foundation/components/clearing",
27 | "foundation/components/alert-boxes",
28 | "foundation/components/breadcrumbs",
29 | "foundation/components/keystrokes",
30 | "foundation/components/labels",
31 | "foundation/components/inline-lists",
32 | "foundation/components/pagination",
33 | "foundation/components/panels",
34 | "foundation/components/pricing-tables",
35 | "foundation/components/progress-bars",
36 | "foundation/components/side-nav",
37 | "foundation/components/sub-nav",
38 | "foundation/components/switch",
39 | "foundation/components/magellan",
40 | "foundation/components/tables",
41 | "foundation/components/thumbs",
42 | "foundation/components/tooltips",
43 | "foundation/components/dropdown";
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/foundation.scss:
--------------------------------------------------------------------------------
1 | // // Make sure the charset is set appropriately
2 | // @charset "UTF-8";
3 |
4 | // This includes all of the foundation global elements that are needed to work with any of the other files.
5 | @import "foundation/variables";
6 |
7 | // Foundation Components
8 | @import
9 | "foundation/components/global",
10 | "foundation/components/grid",
11 | "foundation/components/visibility",
12 | "foundation/components/block-grid",
13 | "foundation/components/type",
14 | "foundation/components/buttons",
15 | "foundation/components/forms",
16 | "foundation/components/custom-forms",
17 | "foundation/components/button-groups",
18 | "foundation/components/dropdown-buttons",
19 | "foundation/components/split-buttons",
20 | "foundation/components/flex-video",
21 | "foundation/components/section",
22 | "foundation/components/top-bar",
23 | "foundation/components/orbit",
24 | "foundation/components/reveal",
25 | "foundation/components/joyride",
26 | "foundation/components/clearing",
27 | "foundation/components/alert-boxes",
28 | "foundation/components/breadcrumbs",
29 | "foundation/components/keystrokes",
30 | "foundation/components/labels",
31 | "foundation/components/inline-lists",
32 | "foundation/components/pagination",
33 | "foundation/components/panels",
34 | "foundation/components/pricing-tables",
35 | "foundation/components/progress-bars",
36 | "foundation/components/side-nav",
37 | "foundation/components/sub-nav",
38 | "foundation/components/switch",
39 | "foundation/components/magellan",
40 | "foundation/components/tables",
41 | "foundation/components/thumbs",
42 | "foundation/components/tooltips",
43 | "foundation/components/dropdown";
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/foundation.scss:
--------------------------------------------------------------------------------
1 | // // Make sure the charset is set appropriately
2 | // @charset "UTF-8";
3 |
4 | // This includes all of the foundation global elements that are needed to work with any of the other files.
5 | @import "foundation/variables";
6 |
7 | // Foundation Components
8 | @import
9 | "foundation/components/global",
10 | "foundation/components/grid",
11 | "foundation/components/visibility",
12 | "foundation/components/block-grid",
13 | "foundation/components/type",
14 | "foundation/components/buttons",
15 | "foundation/components/forms",
16 | "foundation/components/custom-forms",
17 | "foundation/components/button-groups",
18 | "foundation/components/dropdown-buttons",
19 | "foundation/components/split-buttons",
20 | "foundation/components/flex-video",
21 | "foundation/components/section",
22 | "foundation/components/top-bar",
23 | "foundation/components/orbit",
24 | "foundation/components/reveal",
25 | "foundation/components/joyride",
26 | "foundation/components/clearing",
27 | "foundation/components/alert-boxes",
28 | "foundation/components/breadcrumbs",
29 | "foundation/components/keystrokes",
30 | "foundation/components/labels",
31 | "foundation/components/inline-lists",
32 | "foundation/components/pagination",
33 | "foundation/components/panels",
34 | "foundation/components/pricing-tables",
35 | "foundation/components/progress-bars",
36 | "foundation/components/side-nav",
37 | "foundation/components/sub-nav",
38 | "foundation/components/switch",
39 | "foundation/components/magellan",
40 | "foundation/components/tables",
41 | "foundation/components/thumbs",
42 | "foundation/components/tooltips",
43 | "foundation/components/dropdown";
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/functions/_radial-gradient.scss:
--------------------------------------------------------------------------------
1 | // This function is required and used by the background-image mixin.
2 | @function radial-gradient($G1, $G2,
3 | $G3: false, $G4: false,
4 | $G5: false, $G6: false,
5 | $G7: false, $G8: false,
6 | $G9: false, $G10: false,
7 | $pos: 50% 50%,
8 | $shape-size: ellipse cover) {
9 |
10 | @each $value in $G1, $G2 {
11 | $first-val: nth($value, 1);
12 | $pos-type: type-of($first-val);
13 |
14 | @if ($pos-type != color) or ($first-val != "transparent") {
15 | @if ($pos-type == number)
16 | or ($first-val == "center")
17 | or ($first-val == "top")
18 | or ($first-val == "right")
19 | or ($first-val == "bottom")
20 | or ($first-val == "left") {
21 |
22 | $pos: $value;
23 |
24 | @if $pos == $G1 {
25 | $G1: false;
26 | }
27 | }
28 |
29 | @else if
30 | ($first-val == "ellipse")
31 | or ($first-val == "circle")
32 | or ($first-val == "closest-side")
33 | or ($first-val == "closest-corner")
34 | or ($first-val == "farthest-side")
35 | or ($first-val == "farthest-corner")
36 | or ($first-val == "contain")
37 | or ($first-val == "cover") {
38 |
39 | $shape-size: $value;
40 |
41 | @if $value == $G1 {
42 | $G1: false;
43 | }
44 |
45 | @else if $value == $G2 {
46 | $G2: false;
47 | }
48 | }
49 | }
50 | }
51 |
52 | $type: radial;
53 | $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
54 | $type-gradient: append($type, $gradient, comma);
55 |
56 | @return $type-gradient;
57 | }
58 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/functions/_radial-gradient.scss:
--------------------------------------------------------------------------------
1 | // This function is required and used by the background-image mixin.
2 | @function radial-gradient($G1, $G2,
3 | $G3: false, $G4: false,
4 | $G5: false, $G6: false,
5 | $G7: false, $G8: false,
6 | $G9: false, $G10: false,
7 | $pos: 50% 50%,
8 | $shape-size: ellipse cover) {
9 |
10 | @each $value in $G1, $G2 {
11 | $first-val: nth($value, 1);
12 | $pos-type: type-of($first-val);
13 |
14 | @if ($pos-type != color) or ($first-val != "transparent") {
15 | @if ($pos-type == number)
16 | or ($first-val == "center")
17 | or ($first-val == "top")
18 | or ($first-val == "right")
19 | or ($first-val == "bottom")
20 | or ($first-val == "left") {
21 |
22 | $pos: $value;
23 |
24 | @if $pos == $G1 {
25 | $G1: false;
26 | }
27 | }
28 |
29 | @else if
30 | ($first-val == "ellipse")
31 | or ($first-val == "circle")
32 | or ($first-val == "closest-side")
33 | or ($first-val == "closest-corner")
34 | or ($first-val == "farthest-side")
35 | or ($first-val == "farthest-corner")
36 | or ($first-val == "contain")
37 | or ($first-val == "cover") {
38 |
39 | $shape-size: $value;
40 |
41 | @if $value == $G1 {
42 | $G1: false;
43 | }
44 |
45 | @else if $value == $G2 {
46 | $G2: false;
47 | }
48 | }
49 | }
50 | }
51 |
52 | $type: radial;
53 | $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
54 | $type-gradient: append($type, $gradient, comma);
55 |
56 | @return $type-gradient;
57 | }
58 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/functions/_radial-gradient.scss:
--------------------------------------------------------------------------------
1 | // This function is required and used by the background-image mixin.
2 | @function radial-gradient($G1, $G2,
3 | $G3: false, $G4: false,
4 | $G5: false, $G6: false,
5 | $G7: false, $G8: false,
6 | $G9: false, $G10: false,
7 | $pos: 50% 50%,
8 | $shape-size: ellipse cover) {
9 |
10 | @each $value in $G1, $G2 {
11 | $first-val: nth($value, 1);
12 | $pos-type: type-of($first-val);
13 |
14 | @if ($pos-type != color) or ($first-val != "transparent") {
15 | @if ($pos-type == number)
16 | or ($first-val == "center")
17 | or ($first-val == "top")
18 | or ($first-val == "right")
19 | or ($first-val == "bottom")
20 | or ($first-val == "left") {
21 |
22 | $pos: $value;
23 |
24 | @if $pos == $G1 {
25 | $G1: false;
26 | }
27 | }
28 |
29 | @else if
30 | ($first-val == "ellipse")
31 | or ($first-val == "circle")
32 | or ($first-val == "closest-side")
33 | or ($first-val == "closest-corner")
34 | or ($first-val == "farthest-side")
35 | or ($first-val == "farthest-corner")
36 | or ($first-val == "contain")
37 | or ($first-val == "cover") {
38 |
39 | $shape-size: $value;
40 |
41 | @if $value == $G1 {
42 | $G1: false;
43 | }
44 |
45 | @else if $value == $G2 {
46 | $G2: false;
47 | }
48 | }
49 | }
50 | }
51 |
52 | $type: radial;
53 | $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
54 | $type-gradient: append($type, $gradient, comma);
55 |
56 | @return $type-gradient;
57 | }
58 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/functions/_radial-gradient.scss:
--------------------------------------------------------------------------------
1 | // This function is required and used by the background-image mixin.
2 | @function radial-gradient($G1, $G2,
3 | $G3: false, $G4: false,
4 | $G5: false, $G6: false,
5 | $G7: false, $G8: false,
6 | $G9: false, $G10: false,
7 | $pos: 50% 50%,
8 | $shape-size: ellipse cover) {
9 |
10 | @each $value in $G1, $G2 {
11 | $first-val: nth($value, 1);
12 | $pos-type: type-of($first-val);
13 |
14 | @if ($pos-type != color) or ($first-val != "transparent") {
15 | @if ($pos-type == number)
16 | or ($first-val == "center")
17 | or ($first-val == "top")
18 | or ($first-val == "right")
19 | or ($first-val == "bottom")
20 | or ($first-val == "left") {
21 |
22 | $pos: $value;
23 |
24 | @if $pos == $G1 {
25 | $G1: false;
26 | }
27 | }
28 |
29 | @else if
30 | ($first-val == "ellipse")
31 | or ($first-val == "circle")
32 | or ($first-val == "closest-side")
33 | or ($first-val == "closest-corner")
34 | or ($first-val == "farthest-side")
35 | or ($first-val == "farthest-corner")
36 | or ($first-val == "contain")
37 | or ($first-val == "cover") {
38 |
39 | $shape-size: $value;
40 |
41 | @if $value == $G1 {
42 | $G1: false;
43 | }
44 |
45 | @else if $value == $G2 {
46 | $G2: false;
47 | }
48 | }
49 | }
50 | }
51 |
52 | $type: radial;
53 | $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
54 | $type-gradient: append($type, $gradient, comma);
55 |
56 | @return $type-gradient;
57 | }
58 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_animation.scss:
--------------------------------------------------------------------------------
1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3 |
4 | // Official animation shorthand property.
5 | @mixin animation ($animations...) {
6 | @include prefixer(animation, $animations, webkit moz spec);
7 | }
8 |
9 | // Individual Animation Properties
10 | @mixin animation-name ($names...) {
11 | @include prefixer(animation-name, $names, webkit moz spec);
12 | }
13 |
14 |
15 | @mixin animation-duration ($times...) {
16 | @include prefixer(animation-duration, $times, webkit moz spec);
17 | }
18 |
19 |
20 | @mixin animation-timing-function ($motions...) {
21 | // ease | linear | ease-in | ease-out | ease-in-out
22 | @include prefixer(animation-timing-function, $motions, webkit moz spec);
23 | }
24 |
25 |
26 | @mixin animation-iteration-count ($values...) {
27 | // infinite |
28 | @include prefixer(animation-iteration-count, $values, webkit moz spec);
29 | }
30 |
31 |
32 | @mixin animation-direction ($directions...) {
33 | // normal | alternate
34 | @include prefixer(animation-direction, $directions, webkit moz spec);
35 | }
36 |
37 |
38 | @mixin animation-play-state ($states...) {
39 | // running | paused
40 | @include prefixer(animation-play-state, $states, webkit moz spec);
41 | }
42 |
43 |
44 | @mixin animation-delay ($times...) {
45 | @include prefixer(animation-delay, $times, webkit moz spec);
46 | }
47 |
48 |
49 | @mixin animation-fill-mode ($modes...) {
50 | // none | forwards | backwards | both
51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec);
52 | }
53 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_animation.scss:
--------------------------------------------------------------------------------
1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3 |
4 | // Official animation shorthand property.
5 | @mixin animation ($animations...) {
6 | @include prefixer(animation, $animations, webkit moz spec);
7 | }
8 |
9 | // Individual Animation Properties
10 | @mixin animation-name ($names...) {
11 | @include prefixer(animation-name, $names, webkit moz spec);
12 | }
13 |
14 |
15 | @mixin animation-duration ($times...) {
16 | @include prefixer(animation-duration, $times, webkit moz spec);
17 | }
18 |
19 |
20 | @mixin animation-timing-function ($motions...) {
21 | // ease | linear | ease-in | ease-out | ease-in-out
22 | @include prefixer(animation-timing-function, $motions, webkit moz spec);
23 | }
24 |
25 |
26 | @mixin animation-iteration-count ($values...) {
27 | // infinite |
28 | @include prefixer(animation-iteration-count, $values, webkit moz spec);
29 | }
30 |
31 |
32 | @mixin animation-direction ($directions...) {
33 | // normal | alternate
34 | @include prefixer(animation-direction, $directions, webkit moz spec);
35 | }
36 |
37 |
38 | @mixin animation-play-state ($states...) {
39 | // running | paused
40 | @include prefixer(animation-play-state, $states, webkit moz spec);
41 | }
42 |
43 |
44 | @mixin animation-delay ($times...) {
45 | @include prefixer(animation-delay, $times, webkit moz spec);
46 | }
47 |
48 |
49 | @mixin animation-fill-mode ($modes...) {
50 | // none | forwards | backwards | both
51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec);
52 | }
53 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_animation.scss:
--------------------------------------------------------------------------------
1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3 |
4 | // Official animation shorthand property.
5 | @mixin animation ($animations...) {
6 | @include prefixer(animation, $animations, webkit moz spec);
7 | }
8 |
9 | // Individual Animation Properties
10 | @mixin animation-name ($names...) {
11 | @include prefixer(animation-name, $names, webkit moz spec);
12 | }
13 |
14 |
15 | @mixin animation-duration ($times...) {
16 | @include prefixer(animation-duration, $times, webkit moz spec);
17 | }
18 |
19 |
20 | @mixin animation-timing-function ($motions...) {
21 | // ease | linear | ease-in | ease-out | ease-in-out
22 | @include prefixer(animation-timing-function, $motions, webkit moz spec);
23 | }
24 |
25 |
26 | @mixin animation-iteration-count ($values...) {
27 | // infinite |
28 | @include prefixer(animation-iteration-count, $values, webkit moz spec);
29 | }
30 |
31 |
32 | @mixin animation-direction ($directions...) {
33 | // normal | alternate
34 | @include prefixer(animation-direction, $directions, webkit moz spec);
35 | }
36 |
37 |
38 | @mixin animation-play-state ($states...) {
39 | // running | paused
40 | @include prefixer(animation-play-state, $states, webkit moz spec);
41 | }
42 |
43 |
44 | @mixin animation-delay ($times...) {
45 | @include prefixer(animation-delay, $times, webkit moz spec);
46 | }
47 |
48 |
49 | @mixin animation-fill-mode ($modes...) {
50 | // none | forwards | backwards | both
51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec);
52 | }
53 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_animation.scss:
--------------------------------------------------------------------------------
1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3 |
4 | // Official animation shorthand property.
5 | @mixin animation ($animations...) {
6 | @include prefixer(animation, $animations, webkit moz spec);
7 | }
8 |
9 | // Individual Animation Properties
10 | @mixin animation-name ($names...) {
11 | @include prefixer(animation-name, $names, webkit moz spec);
12 | }
13 |
14 |
15 | @mixin animation-duration ($times...) {
16 | @include prefixer(animation-duration, $times, webkit moz spec);
17 | }
18 |
19 |
20 | @mixin animation-timing-function ($motions...) {
21 | // ease | linear | ease-in | ease-out | ease-in-out
22 | @include prefixer(animation-timing-function, $motions, webkit moz spec);
23 | }
24 |
25 |
26 | @mixin animation-iteration-count ($values...) {
27 | // infinite |
28 | @include prefixer(animation-iteration-count, $values, webkit moz spec);
29 | }
30 |
31 |
32 | @mixin animation-direction ($directions...) {
33 | // normal | alternate
34 | @include prefixer(animation-direction, $directions, webkit moz spec);
35 | }
36 |
37 |
38 | @mixin animation-play-state ($states...) {
39 | // running | paused
40 | @include prefixer(animation-play-state, $states, webkit moz spec);
41 | }
42 |
43 |
44 | @mixin animation-delay ($times...) {
45 | @include prefixer(animation-delay, $times, webkit moz spec);
46 | }
47 |
48 |
49 | @mixin animation-fill-mode ($modes...) {
50 | // none | forwards | backwards | both
51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec);
52 | }
53 |
--------------------------------------------------------------------------------
/lib/renderer/scss.js:
--------------------------------------------------------------------------------
1 | import sass from 'node-sass';
2 | import path from 'path';
3 | import Q from 'q';
4 | import fs from 'fs';
5 |
6 | let parseError = function(errorString) {
7 | let matches;
8 | let error = errorString;
9 | if (matches = errorString.match(/([^\:]+)\:(\d+):(.*)/)) {
10 | error = {
11 | file : matches[1],
12 | line : parseInt(matches[2]),
13 | message : matches[3]
14 | };
15 | }
16 |
17 | return error;
18 | };
19 |
20 | function render(options, callback) {
21 | let { file } = options;
22 | let outFile = options.file + '.css';
23 | let sourceMapFile = options.file + '.css.map';
24 |
25 | return sass.render({
26 | file,
27 | includePaths : options.includePaths,
28 | outFile,
29 | sourceComments : 'map',
30 | sourceMap : sourceMapFile
31 | }, (error, result) => {
32 | if(error) {
33 | if (callback) {
34 | return callback(error, null);
35 | }
36 | } else {
37 | let { css } = result;
38 | let sourceMap = result.map;
39 | if (options.writeToDisk) {
40 | return Q.nfcall(fs.writeFile, outFile, css, {flags: 'w'})
41 | .then(() => Q.nfcall(fs.writeFile, sourceMapFile, sourceMap, {flags: 'w'}))
42 | .then(() =>
43 | callback && callback(null, {
44 | body : css,
45 | sourceMap,
46 | cssFile : outFile
47 | }
48 | )
49 | )
50 | .fail(e => callback && callback({message: error}))
51 | .done();
52 | } else {
53 | return (callback && callback(null, {
54 | body: css,
55 | sourceMap
56 | }));
57 | }
58 | }
59 | }
60 | );
61 | }
62 |
63 | module.exports = { render: render };
64 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/addons/_timing-functions.scss:
--------------------------------------------------------------------------------
1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
3 |
4 | // EASE IN
5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
13 |
14 | // EASE OUT
15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
23 |
24 | // EASE IN OUT
25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
33 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/addons/_timing-functions.scss:
--------------------------------------------------------------------------------
1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
3 |
4 | // EASE IN
5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
13 |
14 | // EASE OUT
15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
23 |
24 | // EASE IN OUT
25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
33 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/addons/_timing-functions.scss:
--------------------------------------------------------------------------------
1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
3 |
4 | // EASE IN
5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
13 |
14 | // EASE OUT
15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
23 |
24 | // EASE IN OUT
25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
33 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/foundation/components/_keystrokes.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Keystroke Variables
3 | //
4 | $include-html-type-classes: $include-html-classes !default;
5 |
6 | // We use these to control text styles.
7 | $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
8 | $keystroke-font-size: emCalc(14px) !default;
9 | $keystroke-font-color: #222 !default;
10 | $keystroke-font-color-alt: #fff !default;
11 | $keystroke-function-factor: 7% !default;
12 |
13 | // We use this to control keystroke padding.
14 | $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px) !default;
15 |
16 | // We use these to control background and border styles.
17 | $keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
18 | $keystroke-border-style: solid !default;
19 | $keystroke-border-width: 1px !default;
20 | $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
21 | $keystroke-radius: $global-radius !default;
22 |
23 | //
24 | // Keystroke Mixins
25 | //
26 |
27 | // We use this mixin to create keystroke styles.
28 | @mixin keystroke($bg:$keystroke-bg) {
29 | // This find the lightness percentage of the background color.
30 | $bg-lightness: lightness($bg);
31 |
32 | background-color: $bg;
33 | border-color: darken($bg, $keystroke-function-factor);
34 |
35 | // We adjust the font color based on the brightness of the background.
36 | @if $bg-lightness > 70% { color: $keystroke-font-color; }
37 | @else { color: $keystroke-font-color-alt; }
38 |
39 | border-style: $keystroke-border-style;
40 | border-width: $keystroke-border-width;
41 | margin: 0;
42 | font-family: $keystroke-font;
43 | font-size: $keystroke-font-size;
44 | padding: $keystroke-padding;
45 | }
46 |
47 |
48 | @if $include-html-type-classes != false {
49 |
50 | /* Keystroke Characters */
51 | .keystroke,
52 | kbd {
53 | @include keystroke;
54 | @include radius($keystroke-radius);
55 | }
56 |
57 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/addons/_timing-functions.scss:
--------------------------------------------------------------------------------
1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
3 |
4 | // EASE IN
5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
13 |
14 | // EASE OUT
15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
23 |
24 | // EASE IN OUT
25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
33 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/foundation/components/_keystrokes.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Keystroke Variables
3 | //
4 | $include-html-type-classes: $include-html-classes !default;
5 |
6 | // We use these to control text styles.
7 | $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
8 | $keystroke-font-size: emCalc(14px) !default;
9 | $keystroke-font-color: #222 !default;
10 | $keystroke-font-color-alt: #fff !default;
11 | $keystroke-function-factor: 7% !default;
12 |
13 | // We use this to control keystroke padding.
14 | $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px) !default;
15 |
16 | // We use these to control background and border styles.
17 | $keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
18 | $keystroke-border-style: solid !default;
19 | $keystroke-border-width: 1px !default;
20 | $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
21 | $keystroke-radius: $global-radius !default;
22 |
23 | //
24 | // Keystroke Mixins
25 | //
26 |
27 | // We use this mixin to create keystroke styles.
28 | @mixin keystroke($bg:$keystroke-bg) {
29 | // This find the lightness percentage of the background color.
30 | $bg-lightness: lightness($bg);
31 |
32 | background-color: $bg;
33 | border-color: darken($bg, $keystroke-function-factor);
34 |
35 | // We adjust the font color based on the brightness of the background.
36 | @if $bg-lightness > 70% { color: $keystroke-font-color; }
37 | @else { color: $keystroke-font-color-alt; }
38 |
39 | border-style: $keystroke-border-style;
40 | border-width: $keystroke-border-width;
41 | margin: 0;
42 | font-family: $keystroke-font;
43 | font-size: $keystroke-font-size;
44 | padding: $keystroke-padding;
45 | }
46 |
47 |
48 | @if $include-html-type-classes != false {
49 |
50 | /* Keystroke Characters */
51 | .keystroke,
52 | kbd {
53 | @include keystroke;
54 | @include radius($keystroke-radius);
55 | }
56 |
57 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/foundation/components/_keystrokes.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Keystroke Variables
3 | //
4 | $include-html-type-classes: $include-html-classes !default;
5 |
6 | // We use these to control text styles.
7 | $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
8 | $keystroke-font-size: emCalc(14px) !default;
9 | $keystroke-font-color: #222 !default;
10 | $keystroke-font-color-alt: #fff !default;
11 | $keystroke-function-factor: 7% !default;
12 |
13 | // We use this to control keystroke padding.
14 | $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px) !default;
15 |
16 | // We use these to control background and border styles.
17 | $keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
18 | $keystroke-border-style: solid !default;
19 | $keystroke-border-width: 1px !default;
20 | $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
21 | $keystroke-radius: $global-radius !default;
22 |
23 | //
24 | // Keystroke Mixins
25 | //
26 |
27 | // We use this mixin to create keystroke styles.
28 | @mixin keystroke($bg:$keystroke-bg) {
29 | // This find the lightness percentage of the background color.
30 | $bg-lightness: lightness($bg);
31 |
32 | background-color: $bg;
33 | border-color: darken($bg, $keystroke-function-factor);
34 |
35 | // We adjust the font color based on the brightness of the background.
36 | @if $bg-lightness > 70% { color: $keystroke-font-color; }
37 | @else { color: $keystroke-font-color-alt; }
38 |
39 | border-style: $keystroke-border-style;
40 | border-width: $keystroke-border-width;
41 | margin: 0;
42 | font-family: $keystroke-font;
43 | font-size: $keystroke-font-size;
44 | padding: $keystroke-padding;
45 | }
46 |
47 |
48 | @if $include-html-type-classes != false {
49 |
50 | /* Keystroke Characters */
51 | .keystroke,
52 | kbd {
53 | @include keystroke;
54 | @include radius($keystroke-radius);
55 | }
56 |
57 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/foundation/components/_keystrokes.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Keystroke Variables
3 | //
4 | $include-html-type-classes: $include-html-classes !default;
5 |
6 | // We use these to control text styles.
7 | $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
8 | $keystroke-font-size: emCalc(14px) !default;
9 | $keystroke-font-color: #222 !default;
10 | $keystroke-font-color-alt: #fff !default;
11 | $keystroke-function-factor: 7% !default;
12 |
13 | // We use this to control keystroke padding.
14 | $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px) !default;
15 |
16 | // We use these to control background and border styles.
17 | $keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
18 | $keystroke-border-style: solid !default;
19 | $keystroke-border-width: 1px !default;
20 | $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
21 | $keystroke-radius: $global-radius !default;
22 |
23 | //
24 | // Keystroke Mixins
25 | //
26 |
27 | // We use this mixin to create keystroke styles.
28 | @mixin keystroke($bg:$keystroke-bg) {
29 | // This find the lightness percentage of the background color.
30 | $bg-lightness: lightness($bg);
31 |
32 | background-color: $bg;
33 | border-color: darken($bg, $keystroke-function-factor);
34 |
35 | // We adjust the font color based on the brightness of the background.
36 | @if $bg-lightness > 70% { color: $keystroke-font-color; }
37 | @else { color: $keystroke-font-color-alt; }
38 |
39 | border-style: $keystroke-border-style;
40 | border-width: $keystroke-border-width;
41 | margin: 0;
42 | font-family: $keystroke-font;
43 | font-size: $keystroke-font-size;
44 | padding: $keystroke-padding;
45 | }
46 |
47 |
48 | @if $include-html-type-classes != false {
49 |
50 | /* Keystroke Characters */
51 | .keystroke,
52 | kbd {
53 | @include keystroke;
54 | @include radius($keystroke-radius);
55 | }
56 |
57 | }
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/foundation/components/_side-nav.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Side Nav Variables
3 | //
4 | $include-html-nav-classes: $include-html-classes !default;
5 |
6 | // We use this to control padding.
7 | $side-nav-padding: emCalc(14px) 0 !default;
8 |
9 | // We use these to control list styles.
10 | $side-nav-list-type: none !default;
11 | $side-nav-list-position: inside !default;
12 | $side-nav-list-margin: 0 0 emCalc(7px) 0 !default;
13 |
14 | // We use these to control link styles.
15 | $side-nav-link-color: $primary-color !default;
16 | $side-nav-link-color-active: lighten(#000, 30%) !default;
17 | $side-nav-font-size: emCalc(14px) !default;
18 | $side-nav-font-weight: bold !default;
19 |
20 | // We use these to control border styles
21 | $side-nav-divider-size: 1px !default;
22 | $side-nav-divider-style: solid !default;
23 | $side-nav-divider-color: darken(#fff, 10%) !default;
24 |
25 |
26 | //
27 | // Side Nav Mixins
28 | //
29 |
30 |
31 | // We use this to style the side-nav
32 | @mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
33 | display: block;
34 | margin: 0;
35 | padding: $side-nav-padding;
36 | list-style-type: $side-nav-list-type;
37 | list-style-position: $side-nav-list-position;
38 |
39 | li {
40 | margin: $side-nav-list-margin;
41 | font-size: $font-size;
42 |
43 | a {
44 | display: block;
45 | color: $link-color;
46 | }
47 |
48 | &.active > a:first-child {
49 | color: $side-nav-link-color-active;
50 | font-weight: $side-nav-font-weight;
51 | }
52 |
53 | &.divider {
54 | border-top: $side-nav-divider-size $side-nav-divider-style;
55 | height: 0;
56 | padding: 0;
57 | list-style: none;
58 | border-top-color: $divider-color;
59 | }
60 | }
61 | }
62 |
63 |
64 | @if $include-html-nav-classes != false {
65 |
66 | /* Side Nav */
67 | .side-nav { @include side-nav; }
68 |
69 | }
--------------------------------------------------------------------------------
/lib/support/middleware.js:
--------------------------------------------------------------------------------
1 | import url from 'url';
2 | import mime from 'mime';
3 |
4 | let absolutizeUrls = function(body, href) {
5 | let urlRegex = /url\([\"|\']{0,1}([^\)|^\"|^\']+)[\"|\']{0,1}\)/g;
6 | let joinUrl = url.resolve;
7 | let { protocol } = url.parse(href);
8 | body = body.replace(urlRegex, function(m, url) {
9 | if (/^\/\/.*/.test(url)) { url = protocol + url; }
10 | url = joinUrl(href, url);
11 | return `url('${url}')`;
12 | });
13 | return body;
14 | };
15 |
16 | let absolutizeCSSUrls = function(req, res, next) {
17 | let { write } = res;
18 | let { end } = res;
19 |
20 | let data = new Buffer(0);
21 | let transform = true;
22 | let bodyIsHtml = false;
23 |
24 | res.write = function(chunk, encoding) {
25 | // data += chunk.toString()
26 | if (!this.headerSent) { this._implicitHeader(); }
27 | if (bodyIsHtml) {
28 | return data = Buffer.concat([data, new Buffer(chunk, encoding)]);
29 | } else {
30 | return write.call(res, chunk, encoding);
31 | }
32 | };
33 |
34 | res.end = function(chunk, encoding) {
35 | if (bodyIsHtml) {
36 | if (chunk) { this.write(chunk, encoding); }
37 |
38 | let { href } = req.query;
39 |
40 | if (href) {
41 | write.call(res, absolutizeUrls(data.toString(), href));
42 | } else {
43 | write.call(res, data.toString());
44 | }
45 |
46 | return end.call(res);
47 |
48 | } else {
49 | return end.call(res, chunk, encoding);
50 | }
51 | };
52 |
53 | res.on('header', function() {
54 | let contentType = res.getHeader('Content-Type');
55 | if (contentType && mime.extension( contentType ) === 'css') {
56 | // We know that it's css
57 | res.removeHeader('Content-Length');
58 | return bodyIsHtml = true;
59 | }
60 | });
61 |
62 | return next();
63 | };
64 | module.exports = { absolutizeUrls: absolutizeUrls, absolutizeCSSUrls: absolutizeCSSUrls };
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/foundation/components/_side-nav.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Side Nav Variables
3 | //
4 | $include-html-nav-classes: $include-html-classes !default;
5 |
6 | // We use this to control padding.
7 | $side-nav-padding: emCalc(14px) 0 !default;
8 |
9 | // We use these to control list styles.
10 | $side-nav-list-type: none !default;
11 | $side-nav-list-position: inside !default;
12 | $side-nav-list-margin: 0 0 emCalc(7px) 0 !default;
13 |
14 | // We use these to control link styles.
15 | $side-nav-link-color: $primary-color !default;
16 | $side-nav-link-color-active: lighten(#000, 30%) !default;
17 | $side-nav-font-size: emCalc(14px) !default;
18 | $side-nav-font-weight: bold !default;
19 |
20 | // We use these to control border styles
21 | $side-nav-divider-size: 1px !default;
22 | $side-nav-divider-style: solid !default;
23 | $side-nav-divider-color: darken(#fff, 10%) !default;
24 |
25 |
26 | //
27 | // Side Nav Mixins
28 | //
29 |
30 |
31 | // We use this to style the side-nav
32 | @mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
33 | display: block;
34 | margin: 0;
35 | padding: $side-nav-padding;
36 | list-style-type: $side-nav-list-type;
37 | list-style-position: $side-nav-list-position;
38 |
39 | li {
40 | margin: $side-nav-list-margin;
41 | font-size: $font-size;
42 |
43 | a {
44 | display: block;
45 | color: $link-color;
46 | }
47 |
48 | &.active > a:first-child {
49 | color: $side-nav-link-color-active;
50 | font-weight: $side-nav-font-weight;
51 | }
52 |
53 | &.divider {
54 | border-top: $side-nav-divider-size $side-nav-divider-style;
55 | height: 0;
56 | padding: 0;
57 | list-style: none;
58 | border-top-color: $divider-color;
59 | }
60 | }
61 | }
62 |
63 |
64 | @if $include-html-nav-classes != false {
65 |
66 | /* Side Nav */
67 | .side-nav { @include side-nav; }
68 |
69 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/foundation/components/_side-nav.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Side Nav Variables
3 | //
4 | $include-html-nav-classes: $include-html-classes !default;
5 |
6 | // We use this to control padding.
7 | $side-nav-padding: emCalc(14px) 0 !default;
8 |
9 | // We use these to control list styles.
10 | $side-nav-list-type: none !default;
11 | $side-nav-list-position: inside !default;
12 | $side-nav-list-margin: 0 0 emCalc(7px) 0 !default;
13 |
14 | // We use these to control link styles.
15 | $side-nav-link-color: $primary-color !default;
16 | $side-nav-link-color-active: lighten(#000, 30%) !default;
17 | $side-nav-font-size: emCalc(14px) !default;
18 | $side-nav-font-weight: bold !default;
19 |
20 | // We use these to control border styles
21 | $side-nav-divider-size: 1px !default;
22 | $side-nav-divider-style: solid !default;
23 | $side-nav-divider-color: darken(#fff, 10%) !default;
24 |
25 |
26 | //
27 | // Side Nav Mixins
28 | //
29 |
30 |
31 | // We use this to style the side-nav
32 | @mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
33 | display: block;
34 | margin: 0;
35 | padding: $side-nav-padding;
36 | list-style-type: $side-nav-list-type;
37 | list-style-position: $side-nav-list-position;
38 |
39 | li {
40 | margin: $side-nav-list-margin;
41 | font-size: $font-size;
42 |
43 | a {
44 | display: block;
45 | color: $link-color;
46 | }
47 |
48 | &.active > a:first-child {
49 | color: $side-nav-link-color-active;
50 | font-weight: $side-nav-font-weight;
51 | }
52 |
53 | &.divider {
54 | border-top: $side-nav-divider-size $side-nav-divider-style;
55 | height: 0;
56 | padding: 0;
57 | list-style: none;
58 | border-top-color: $divider-color;
59 | }
60 | }
61 | }
62 |
63 |
64 | @if $include-html-nav-classes != false {
65 |
66 | /* Side Nav */
67 | .side-nav { @include side-nav; }
68 |
69 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/foundation/components/_side-nav.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Side Nav Variables
3 | //
4 | $include-html-nav-classes: $include-html-classes !default;
5 |
6 | // We use this to control padding.
7 | $side-nav-padding: emCalc(14px) 0 !default;
8 |
9 | // We use these to control list styles.
10 | $side-nav-list-type: none !default;
11 | $side-nav-list-position: inside !default;
12 | $side-nav-list-margin: 0 0 emCalc(7px) 0 !default;
13 |
14 | // We use these to control link styles.
15 | $side-nav-link-color: $primary-color !default;
16 | $side-nav-link-color-active: lighten(#000, 30%) !default;
17 | $side-nav-font-size: emCalc(14px) !default;
18 | $side-nav-font-weight: bold !default;
19 |
20 | // We use these to control border styles
21 | $side-nav-divider-size: 1px !default;
22 | $side-nav-divider-style: solid !default;
23 | $side-nav-divider-color: darken(#fff, 10%) !default;
24 |
25 |
26 | //
27 | // Side Nav Mixins
28 | //
29 |
30 |
31 | // We use this to style the side-nav
32 | @mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
33 | display: block;
34 | margin: 0;
35 | padding: $side-nav-padding;
36 | list-style-type: $side-nav-list-type;
37 | list-style-position: $side-nav-list-position;
38 |
39 | li {
40 | margin: $side-nav-list-margin;
41 | font-size: $font-size;
42 |
43 | a {
44 | display: block;
45 | color: $link-color;
46 | }
47 |
48 | &.active > a:first-child {
49 | color: $side-nav-link-color-active;
50 | font-weight: $side-nav-font-weight;
51 | }
52 |
53 | &.divider {
54 | border-top: $side-nav-divider-size $side-nav-divider-style;
55 | height: 0;
56 | padding: 0;
57 | list-style: none;
58 | border-top-color: $divider-color;
59 | }
60 | }
61 | }
62 |
63 |
64 | @if $include-html-nav-classes != false {
65 |
66 | /* Side Nav */
67 | .side-nav { @include side-nav; }
68 |
69 | }
--------------------------------------------------------------------------------
/test/renderer/less.js:
--------------------------------------------------------------------------------
1 | import less from '../../lib/renderer/less';
2 | import path from 'path';
3 | import shell from 'shelljs';
4 |
5 |
6 | describe('less', () =>
7 | describe('render', function() {
8 | it('should return an error when the render is unsuccessful', function(done) {
9 | let file = fixturePath('less/error/style.less');
10 | return less.render({file}, function(error, body) {
11 | error.file.should.equal(file);
12 | error.line.should.be.ok;
13 | error.message.should.be.ok;
14 | (body === null).should.be.true;
15 | return done();
16 | });
17 | });
18 |
19 | context('writeToDisk = true', function() {
20 | beforeEach(() => {
21 | this.options = {
22 | file: fixturePath('less/kube/kube.less'),
23 | writeToDisk: true
24 | };
25 | });
26 |
27 | afterEach(done =>
28 | setTimeout(() => {
29 | shell.rm('-f', this.options.file + '.css');
30 | shell.rm('-f', this.options.file + '.css.map');
31 | return done();
32 | }
33 | , 10)
34 | );
35 |
36 | return it('should write the css and source map to disk', (done) => {
37 | return less.render(this.options, (error, result) => {
38 | assertFileHasBody(this.options.file + '.css', result.body);
39 | assertFileHasBody(this.options.file + '.css.map', result.sourceMap);
40 | result.cssFile.should.equal(this.options.file + '.css');
41 | return done();
42 | });
43 | });
44 | });
45 |
46 | it('should return css with a valid source map', () => {
47 | let file = fixturePath('less/kube/style.less');
48 | return less.render({file}, function(error, result) {
49 | result.body.toString().should.containEql('sourceMappingURL=style.less.css.map');
50 | return JSON.parse(result.sourceMap.toString()).sources[0].should.equal('style.less');
51 | });
52 | });
53 |
54 | it('should work with includePaths');
55 | })
56 | );
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/bourbon/css3/_background-image.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Background-image property for adding multiple background images with
3 | // gradients, or for stringing multiple gradients together.
4 | //************************************************************************//
5 |
6 | @mixin background-image($images...) {
7 | background-image: add-prefix($images, webkit);
8 | background-image: add-prefix($images, moz);
9 | background-image: add-prefix($images, ms);
10 | background-image: add-prefix($images, o);
11 | background-image: add-prefix($images);
12 | }
13 |
14 |
15 | @function add-prefix($images, $vendor: false) {
16 | $images-prefixed: ();
17 |
18 | @for $i from 1 through length($images) {
19 | $type: type-of(nth($images, $i)); // Get type of variable - List or String
20 |
21 | // If variable is a list - Gradient
22 | @if $type == list {
23 | $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
24 | $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
25 |
26 | $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
27 | $images-prefixed: append($images-prefixed, $gradient, comma);
28 | }
29 |
30 | // If variable is a string - Image
31 | @else if $type == string {
32 | $images-prefixed: join($images-prefixed, nth($images, $i), comma);
33 | }
34 | }
35 | @return $images-prefixed;
36 | }
37 |
38 |
39 | //Examples:
40 | //@include background-image(linear-gradient(top, orange, red));
41 | //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
42 | //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
43 | //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
44 | //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
45 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/bourbon/css3/_background-image.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Background-image property for adding multiple background images with
3 | // gradients, or for stringing multiple gradients together.
4 | //************************************************************************//
5 |
6 | @mixin background-image($images...) {
7 | background-image: add-prefix($images, webkit);
8 | background-image: add-prefix($images, moz);
9 | background-image: add-prefix($images, ms);
10 | background-image: add-prefix($images, o);
11 | background-image: add-prefix($images);
12 | }
13 |
14 |
15 | @function add-prefix($images, $vendor: false) {
16 | $images-prefixed: ();
17 |
18 | @for $i from 1 through length($images) {
19 | $type: type-of(nth($images, $i)); // Get type of variable - List or String
20 |
21 | // If variable is a list - Gradient
22 | @if $type == list {
23 | $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
24 | $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
25 |
26 | $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
27 | $images-prefixed: append($images-prefixed, $gradient, comma);
28 | }
29 |
30 | // If variable is a string - Image
31 | @else if $type == string {
32 | $images-prefixed: join($images-prefixed, nth($images, $i), comma);
33 | }
34 | }
35 | @return $images-prefixed;
36 | }
37 |
38 |
39 | //Examples:
40 | //@include background-image(linear-gradient(top, orange, red));
41 | //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
42 | //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
43 | //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
44 | //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
45 |
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/bourbon/css3/_background-image.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Background-image property for adding multiple background images with
3 | // gradients, or for stringing multiple gradients together.
4 | //************************************************************************//
5 |
6 | @mixin background-image($images...) {
7 | background-image: add-prefix($images, webkit);
8 | background-image: add-prefix($images, moz);
9 | background-image: add-prefix($images, ms);
10 | background-image: add-prefix($images, o);
11 | background-image: add-prefix($images);
12 | }
13 |
14 |
15 | @function add-prefix($images, $vendor: false) {
16 | $images-prefixed: ();
17 |
18 | @for $i from 1 through length($images) {
19 | $type: type-of(nth($images, $i)); // Get type of variable - List or String
20 |
21 | // If variable is a list - Gradient
22 | @if $type == list {
23 | $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
24 | $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
25 |
26 | $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
27 | $images-prefixed: append($images-prefixed, $gradient, comma);
28 | }
29 |
30 | // If variable is a string - Image
31 | @else if $type == string {
32 | $images-prefixed: join($images-prefixed, nth($images, $i), comma);
33 | }
34 | }
35 | @return $images-prefixed;
36 | }
37 |
38 |
39 | //Examples:
40 | //@include background-image(linear-gradient(top, orange, red));
41 | //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
42 | //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
43 | //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
44 | //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
45 |
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/bourbon/css3/_background-image.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Background-image property for adding multiple background images with
3 | // gradients, or for stringing multiple gradients together.
4 | //************************************************************************//
5 |
6 | @mixin background-image($images...) {
7 | background-image: add-prefix($images, webkit);
8 | background-image: add-prefix($images, moz);
9 | background-image: add-prefix($images, ms);
10 | background-image: add-prefix($images, o);
11 | background-image: add-prefix($images);
12 | }
13 |
14 |
15 | @function add-prefix($images, $vendor: false) {
16 | $images-prefixed: ();
17 |
18 | @for $i from 1 through length($images) {
19 | $type: type-of(nth($images, $i)); // Get type of variable - List or String
20 |
21 | // If variable is a list - Gradient
22 | @if $type == list {
23 | $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
24 | $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
25 |
26 | $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
27 | $images-prefixed: append($images-prefixed, $gradient, comma);
28 | }
29 |
30 | // If variable is a string - Image
31 | @else if $type == string {
32 | $images-prefixed: join($images-prefixed, nth($images, $i), comma);
33 | }
34 | }
35 | @return $images-prefixed;
36 | }
37 |
38 |
39 | //Examples:
40 | //@include background-image(linear-gradient(top, orange, red));
41 | //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
42 | //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
43 | //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
44 | //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
45 |
--------------------------------------------------------------------------------
/test/fixtures/scss/foundation/foundation/components/_sub-nav.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Sub Nav Variables
3 | //
4 | $include-html-nav-classes: $include-html-classes !default;
5 |
6 | // We use these to control margin and padding
7 | $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px) !default;
8 | $sub-nav-list-padding-top: emCalc(4px) !default;
9 |
10 | // We use this to control the definition
11 | $sub-nav-font-size: emCalc(14px) !default;
12 | $sub-nav-font-color: #999 !default;
13 | $sub-nav-font-weight: normal !default;
14 | $sub-nav-text-decoration: none !default;
15 | $sub-nav-border-radius: 1000px !default;
16 |
17 | // We use these to control the active item styles
18 | $sub-nav-active-font-weight: bold !default;
19 | $sub-nav-active-bg: $primary-color !default;
20 | $sub-nav-active-color: #fff !default;
21 | $sub-nav-active-padding: emCalc(3px) emCalc(9px) !default;
22 | $sub-nav-active-cursor: default !default;
23 |
24 | //
25 | // Sub Nav Mixins
26 | //
27 |
28 | @mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
29 | display: block;
30 | width: auto;
31 | overflow: hidden;
32 | margin: $sub-nav-list-margin;
33 | padding-top: $sub-nav-list-padding-top;
34 | margin-#{$opposite-direction}: 0;
35 | margin-#{$default-float}: emCalc(-9px);
36 |
37 | dt,
38 | dd {
39 | float: $default-float;
40 | display: inline;
41 | margin-#{$default-float}: emCalc(9px);
42 | margin-bottom: emCalc(10px);
43 | font-weight: $sub-nav-font-weight;
44 | font-size: $font-size;
45 |
46 | a {
47 | color: $font-color;
48 | text-decoration: $sub-nav-text-decoration; }
49 |
50 | &.active a {
51 | @include radius($sub-nav-border-radius);
52 | font-weight: $sub-nav-active-font-weight;
53 | background: $active-bg;
54 | padding: $sub-nav-active-padding;
55 | cursor: $sub-nav-active-cursor;
56 | color: $sub-nav-active-color;
57 | }
58 | }
59 |
60 | }
61 |
62 |
63 | @if $include-html-nav-classes != false {
64 |
65 | /* Side Nav */
66 | .sub-nav { @include sub-nav; }
67 |
68 | }
--------------------------------------------------------------------------------
/test/fixtures/filesystem/project/styles/foundation/components/_sub-nav.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Sub Nav Variables
3 | //
4 | $include-html-nav-classes: $include-html-classes !default;
5 |
6 | // We use these to control margin and padding
7 | $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px) !default;
8 | $sub-nav-list-padding-top: emCalc(4px) !default;
9 |
10 | // We use this to control the definition
11 | $sub-nav-font-size: emCalc(14px) !default;
12 | $sub-nav-font-color: #999 !default;
13 | $sub-nav-font-weight: normal !default;
14 | $sub-nav-text-decoration: none !default;
15 | $sub-nav-border-radius: 1000px !default;
16 |
17 | // We use these to control the active item styles
18 | $sub-nav-active-font-weight: bold !default;
19 | $sub-nav-active-bg: $primary-color !default;
20 | $sub-nav-active-color: #fff !default;
21 | $sub-nav-active-padding: emCalc(3px) emCalc(9px) !default;
22 | $sub-nav-active-cursor: default !default;
23 |
24 | //
25 | // Sub Nav Mixins
26 | //
27 |
28 | @mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
29 | display: block;
30 | width: auto;
31 | overflow: hidden;
32 | margin: $sub-nav-list-margin;
33 | padding-top: $sub-nav-list-padding-top;
34 | margin-#{$opposite-direction}: 0;
35 | margin-#{$default-float}: emCalc(-9px);
36 |
37 | dt,
38 | dd {
39 | float: $default-float;
40 | display: inline;
41 | margin-#{$default-float}: emCalc(9px);
42 | margin-bottom: emCalc(10px);
43 | font-weight: $sub-nav-font-weight;
44 | font-size: $font-size;
45 |
46 | a {
47 | color: $font-color;
48 | text-decoration: $sub-nav-text-decoration; }
49 |
50 | &.active a {
51 | @include radius($sub-nav-border-radius);
52 | font-weight: $sub-nav-active-font-weight;
53 | background: $active-bg;
54 | padding: $sub-nav-active-padding;
55 | cursor: $sub-nav-active-cursor;
56 | color: $sub-nav-active-color;
57 | }
58 | }
59 |
60 | }
61 |
62 |
63 | @if $include-html-nav-classes != false {
64 |
65 | /* Side Nav */
66 | .sub-nav { @include sub-nav; }
67 |
68 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation/foundation/components/_sub-nav.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Sub Nav Variables
3 | //
4 | $include-html-nav-classes: $include-html-classes !default;
5 |
6 | // We use these to control margin and padding
7 | $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px) !default;
8 | $sub-nav-list-padding-top: emCalc(4px) !default;
9 |
10 | // We use this to control the definition
11 | $sub-nav-font-size: emCalc(14px) !default;
12 | $sub-nav-font-color: #999 !default;
13 | $sub-nav-font-weight: normal !default;
14 | $sub-nav-text-decoration: none !default;
15 | $sub-nav-border-radius: 1000px !default;
16 |
17 | // We use these to control the active item styles
18 | $sub-nav-active-font-weight: bold !default;
19 | $sub-nav-active-bg: $primary-color !default;
20 | $sub-nav-active-color: #fff !default;
21 | $sub-nav-active-padding: emCalc(3px) emCalc(9px) !default;
22 | $sub-nav-active-cursor: default !default;
23 |
24 | //
25 | // Sub Nav Mixins
26 | //
27 |
28 | @mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
29 | display: block;
30 | width: auto;
31 | overflow: hidden;
32 | margin: $sub-nav-list-margin;
33 | padding-top: $sub-nav-list-padding-top;
34 | margin-#{$opposite-direction}: 0;
35 | margin-#{$default-float}: emCalc(-9px);
36 |
37 | dt,
38 | dd {
39 | float: $default-float;
40 | display: inline;
41 | margin-#{$default-float}: emCalc(9px);
42 | margin-bottom: emCalc(10px);
43 | font-weight: $sub-nav-font-weight;
44 | font-size: $font-size;
45 |
46 | a {
47 | color: $font-color;
48 | text-decoration: $sub-nav-text-decoration; }
49 |
50 | &.active a {
51 | @include radius($sub-nav-border-radius);
52 | font-weight: $sub-nav-active-font-weight;
53 | background: $active-bg;
54 | padding: $sub-nav-active-padding;
55 | cursor: $sub-nav-active-cursor;
56 | color: $sub-nav-active-color;
57 | }
58 | }
59 |
60 | }
61 |
62 |
63 | @if $include-html-nav-classes != false {
64 |
65 | /* Side Nav */
66 | .sub-nav { @include sub-nav; }
67 |
68 | }
--------------------------------------------------------------------------------
/test/fixtures/test_helpers/foundation-copy/foundation/components/_sub-nav.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Sub Nav Variables
3 | //
4 | $include-html-nav-classes: $include-html-classes !default;
5 |
6 | // We use these to control margin and padding
7 | $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px) !default;
8 | $sub-nav-list-padding-top: emCalc(4px) !default;
9 |
10 | // We use this to control the definition
11 | $sub-nav-font-size: emCalc(14px) !default;
12 | $sub-nav-font-color: #999 !default;
13 | $sub-nav-font-weight: normal !default;
14 | $sub-nav-text-decoration: none !default;
15 | $sub-nav-border-radius: 1000px !default;
16 |
17 | // We use these to control the active item styles
18 | $sub-nav-active-font-weight: bold !default;
19 | $sub-nav-active-bg: $primary-color !default;
20 | $sub-nav-active-color: #fff !default;
21 | $sub-nav-active-padding: emCalc(3px) emCalc(9px) !default;
22 | $sub-nav-active-cursor: default !default;
23 |
24 | //
25 | // Sub Nav Mixins
26 | //
27 |
28 | @mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
29 | display: block;
30 | width: auto;
31 | overflow: hidden;
32 | margin: $sub-nav-list-margin;
33 | padding-top: $sub-nav-list-padding-top;
34 | margin-#{$opposite-direction}: 0;
35 | margin-#{$default-float}: emCalc(-9px);
36 |
37 | dt,
38 | dd {
39 | float: $default-float;
40 | display: inline;
41 | margin-#{$default-float}: emCalc(9px);
42 | margin-bottom: emCalc(10px);
43 | font-weight: $sub-nav-font-weight;
44 | font-size: $font-size;
45 |
46 | a {
47 | color: $font-color;
48 | text-decoration: $sub-nav-text-decoration; }
49 |
50 | &.active a {
51 | @include radius($sub-nav-border-radius);
52 | font-weight: $sub-nav-active-font-weight;
53 | background: $active-bg;
54 | padding: $sub-nav-active-padding;
55 | cursor: $sub-nav-active-cursor;
56 | color: $sub-nav-active-color;
57 | }
58 | }
59 |
60 | }
61 |
62 |
63 | @if $include-html-nav-classes != false {
64 |
65 | /* Side Nav */
66 | .sub-nav { @include sub-nav; }
67 |
68 | }
--------------------------------------------------------------------------------