diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..9221778 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,35 @@ +/*global module:false*/ +module.exports = function(grunt) { + + // Project configuration. + grunt.initConfig({ + // Task configuration. + stylus: { + compile: { + options: { + compress: false + }, + files: { + 'test/test.css': 'test/test.styl' + } + } + }, + + watch: { + stylus: { + files: [ + '*/**/*.styl' + ], + tasks: ['stylus:compile'] + } + } + }); + + // These plugins provide necessary tasks. + grunt.loadNpmTasks('grunt-contrib-stylus'); + grunt.loadNpmTasks('grunt-contrib-watch'); + + // Default task. + grunt.registerTask('default', ['stylus:compile', 'watch:stylus']); + +}; diff --git a/flex.styl b/flex.styl new file mode 100644 index 0000000..06c7a91 --- /dev/null +++ b/flex.styl @@ -0,0 +1,378 @@ +// +// sass-flex-mixin in stylus edition +// +// Flexbox Mixins +// http://philipwalton.github.io/solved-by-flexbox/ +// https://github.com/philipwalton/solved-by-flexbox +// +// Copyright (c) 2013 Brian Franco +// +// Permission is hereby granted, free of charge, to any person obtaining a +// copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// The above copyright notice and this permission notice shall be included +// in all copies or substantial portions of the Software. +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS +// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY +// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, +// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +// +// This is a set of mixins for those who want to mess around with flexbox +// using the native support of current browsers. For full support table +// check: http://caniuse.com/flexbox +// +// Basically this will use: +// +// * Fallback, old syntax (IE10, Safari, mobile webkit browsers) +// * Prefixed standard syntax (Chrome) +// * Final standards syntax (FF, IE11, Opera 12.1) +// +// This was inspired by: +// +// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ +// +// With help from: +// +// * http://w3.org/tr/css3-flexbox/ +// * http://the-echoplex.net/flexyboxes/ +// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx +// * http://css-tricks.com/using-flexbox/ +// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ +// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes + +//---------------------------------------------------------------------- + +// Flexbox Containers +// +// The 'flex' value causes an element to generate a block-level flex +// container box. +// +// The 'inline-flex' value causes an element to generate a inline-level +// flex container box. +// +// display: flex | inline-flex +// +// http://w3.org/tr/css3-flexbox/#flex-containers +// +// (Placeholder selectors for each type, for those who rather @extend) +flexbox() + display -webkit-box + display -webkit-flex + display -moz-box + display -moz-flex + display -ms-flexbox + display flex + +//---------------------------------- + +inline-flex() + display -webkit-inline-box + display -webkit-inline-flex + display -moz-inline-box + display -moz-inline-flex + display -ms-inline-flexbox + display inline-flex + +//---------------------------------------------------------------------- + +// Flexbox Direction +// +// The 'flex-direction' property specifies how flex items are placed in +// the flex container, by setting the direction of the flex container's +// main axis. This determines the direction that flex items are laid out in. +// +// Values: row | row-reverse | column | column-reverse +// Default: row +// +// http://w3.org/tr/css3-flexbox/#flex-direction-property + +flex-direction($value = row) + if $value is row-reverse + -webkit-box-direction reverse + -webkit-box-orient horizontal + else if $value is column + -webkit-box-direction normal + -webkit-box-orient vertical + else if $value is column-reverse + -webkit-box-direction reverse + -webkit-box-orient vertical + else + -webkit-box-direction normal + -webkit-box-orient horizontal + + -webkit-flex-direction $value + -moz-flex-direction $value + -ms-flex-direction $value + flex-direction $value + +//---------------------------------------------------------------------- + +// Flexbox Wrap +// +// The 'flex-wrap' property controls whether the flex container is single-line +// or multi-line, and the direction of the cross-axis, which determines +// the direction new lines are stacked in. +// +// Values: nowrap | wrap | wrap-reverse +// Default: nowrap +// +// http://w3.org/tr/css3-flexbox/#flex-wrap-property + +flex-wrap($value = nowrap) + // No Webkit Box fallback. + -webkit-flex-wrap $value + -moz-flex-wrap $value + if $value is nowrap + -ms-flex-wrap none + else + -ms-flex-wrap $value; + + flex-wrap $value + +//---------------------------------------------------------------------- + +// Flexbox Flow (shorthand) +// +// The 'flex-flow' property is a shorthand for setting the 'flex-direction' +// and 'flex-wrap' properties, which together define the flex container's +// main and cross axes. +// +// Values: | +// Default: row nowrap +// +// http://w3.org/tr/css3-flexbox/#flex-flow-property + +flex-flow($values = row nowrap) + // No Webkit Box fallback. + -webkit-flex-flow $values + -moz-flex-flow $values + -ms-flex-flow $values + flex-flow $values + +//---------------------------------------------------------------------- + +// Flexbox Order +// +// The 'order' property controls the order in which flex items appear within +// their flex container, by assigning them to ordinal groups. +// +// Default: 0 +// +// http://w3.org/tr/css3-flexbox/#order-property + +order($int = 0) + -webkit-box-ordinal-group $int + 1 + -webkit-order $int + -moz-order $int + -ms-flex-order $int + order $int + +//---------------------------------------------------------------------- + +// Flexbox Grow +// +// The 'flex-grow' property sets the flex grow factor. Negative numbers +// are invalid. +// +// Default: 0 +// +// http://w3.org/tr/css3-flexbox/#flex-grow-property + +flex-grow($int = 0) + -webkit-box-flex $int + -webkit-flex-grow $int + -moz-flex-grow $int + -ms-flex-positive $int + flex-grow $int + +//---------------------------------------------------------------------- + +// Flexbox Shrink +// +// The 'flex-shrink' property sets the flex shrink factor. Negative numbers +// are invalid. +// +// Default: 1 +// +// http://w3.org/tr/css3-flexbox/#flex-shrink-property + +flex-shrink($int = 1) + -webkit-flex-shrink $int + -moz-flex-shrink $int + -ms-flex-negative $int + flex-shrink $int + +//---------------------------------------------------------------------- + +// Flexbox Basis +// +// The 'flex-basis' property sets the flex basis. Negative lengths are invalid. +// +// Values: Like "width" +// Default: auto +// +// http://www.w3.org/TR/css3-flexbox/#flex-basis-property + +flex-basis($value = auto) + -webkit-flex-basis $value + -moz-flex-basis $value + -ms-flex-preferred-size $value + flex-basis $value + +//---------------------------------------------------------------------- + +// Flexbox "Flex" (shorthand) +// +// The 'flex' property specifies the components of a flexible length: the +// flex grow factor and flex shrink factor, and the flex basis. When an +// element is a flex item, 'flex' is consulted instead of the main size +// property to determine the main size of the element. If an element is +// not a flex item, 'flex' has no effect. +// +// Values: none | || +// Default: See individual properties (1 1 0). +// +// http://w3.org/tr/css3-flexbox/#flex-property + +flex($fg = 1, $fs = null, $fb = null) + + // Set a variable to be used by box-flex properties + $fg-boxflex=$fg + + // Box-Flex only supports a flex-grow value so let's grab the + // first item in the list and just return that. + // rui: + // more about build-in function length at: + // http://learnboost.github.io/stylus/docs/bifs.html#lengthexpr + $fg-boxflex=$fg[0] if length($fg) > 1 + + -webkit-box-flex $fg-boxflex + -webkit-flex $fg $fs $fb + -moz-box-flex $fg-boxflex + -moz-flex $fg $fs $fb + -ms-flex $fg $fs $fb + flex $fg $fs $fb + +//---------------------------------------------------------------------- + +// Flexbox Justify Content +// +// The 'justify-content' property aligns flex items along the main axis +// of the current line of the flex container. This is done after any flexible +// lengths and any auto margins have been resolved. Typically it helps distribute +// extra free space leftover when either all the flex items on a line are +// inflexible, or are flexible but have reached their maximum size. It also +// exerts some control over the alignment of items when they overflow the line. +// +// Note: 'space-*' values not supported in older syntaxes. +// +// Values: flex-start | flex-end | center | space-between | space-around +// Default: flex-start +// +// http://w3.org/tr/css3-flexbox/#justify-content-property + +justify-content($value = flex-start) + if $value is flex-start + -webkit-box-pack start + -ms-flex-pack start + else if $value is flex-end + -webkit-box-pack end + -ms-flex-pack end + else if $value is space-between + -webkit-box-pack justify + -ms-flex-pack justify + else + -webkit-box-pack $value + -ms-flex-pack $value + + -webkit-justify-content $value + -moz-justify-content $value + justify-content $value + +//---------------------------------------------------------------------- + +// Flexbox Align Items +// +// Flex items can be aligned in the cross axis of the current line of the +// flex container, similar to 'justify-content' but in the perpendicular +// direction. 'align-items' sets the default alignment for all of the flex +// container's items, including anonymous flex items. 'align-self' allows +// this default alignment to be overridden for individual flex items. (For +// anonymous flex items, 'align-self' always matches the value of 'align-items' +// on their associated flex container.) +// +// Values: flex-start | flex-end | center | baseline | stretch +// Default: stretch +// +// http://w3.org/tr/css3-flexbox/#align-items-property + +align-items($value = stretch) + if $value is flex-start + -webkit-box-align start + -ms-flex-align start + else if $value is flex-end + -webkit-box-align end + -ms-flex-align end + else + -webkit-box-align $value + -ms-flex-align $value + + -webkit-align-items $value + -moz-align-items $value + align-items $value + +//---------------------------------- + +// Flexbox Align Self +// +// Values: auto | flex-start | flex-end | center | baseline | stretch +// Default: auto + +align-self($value = auto) + // No Webkit Box Fallback. + -webkit-align-self $value + -moz-align-self $value + + if $value is flex-start + -ms-flex-item-align start + else if $value is flex-end + -ms-flex-item-align end + else + -ms-flex-item-align $value + + align-self $value + +//---------------------------------------------------------------------- + +// Flexbox Align Content +// +// The 'align-content' property aligns a flex container's lines within the +// flex container when there is extra space in the cross-axis, similar to +// how 'justify-content' aligns individual items within the main-axis. Note, +// this property has no effect when the flexbox has only a single line. +// +// Values: flex-start | flex-end | center | space-between | space-around | stretch +// Default: stretch +// +// http://w3.org/tr/css3-flexbox/#align-content-property + +align-content($value = stretch) + // No Webkit Box Fallback. + -webkit-align-content $value + -moz-align-content $value + + if $value is flex-start + -ms-flex-line-pack start + else if $value is flex-end + -ms-flex-line-pack end + else + -ms-flex-line-pack $value + + align-content $value \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..030a831 --- /dev/null +++ b/package.json @@ -0,0 +1,10 @@ +{ + "engines": { + "node": ">= 0.10.0" + }, + "devDependencies": { + "grunt": "^0.4.5", + "grunt-contrib-watch": "~0.5.3", + "grunt-contrib-stylus": "^0.17.0" + } +} diff --git a/test/test.css b/test/test.css new file mode 100644 index 0000000..3643c26 --- /dev/null +++ b/test/test.css @@ -0,0 +1,496 @@ +/* TEST FILE ONLY! NOT INTEDED FOR USE IN REAL-WORLD! */ +/* + * By Rui: + * + * 1. list data as arg of mixin should wrap with parentheses + */ +/*--------------------------------------------------------------------*/ +.flexbox { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} +.flexbox-inline { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-box; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} +/*--------------------------------------------------------------------*/ +.flex-direction-A { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +.flex-dir-A { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +/* row */ +.flex-direction-B { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +.flex-dir-B { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +/* row-reverse */ +.flex-direction-C { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + -webkit-flex-direction: row-reverse; + -moz-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} +.flex-dir-C { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + -webkit-flex-direction: row-reverse; + -moz-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} +/* column */ +.flex-direction-D { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.flex-dir-D { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +/* column-reverse */ +.flex-direction-E { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + -webkit-flex-direction: column-reverse; + -moz-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; +} +.flex-dir-E { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + -webkit-flex-direction: column-reverse; + -moz-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; +} +/*--------------------------------------------------------------------*/ +.flex-wrap-A { + -webkit-flex-wrap: nowrap; + -moz-flex-wrap: nowrap; + -ms-flex-wrap: none; + flex-wrap: nowrap; +} +/* nowrap */ +.flex-wrap-B { + -webkit-flex-wrap: nowrap; + -moz-flex-wrap: nowrap; + -ms-flex-wrap: none; + flex-wrap: nowrap; +} +/* nowrap */ +.flex-wrap-C { + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +/* nowrap */ +.flex-wrap-D { + -webkit-flex-wrap: wrap-reverse; + -moz-flex-wrap: wrap-reverse; + -ms-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; +} +/*--------------------------------------------------------------------*/ +.flex-flow-A { + -webkit-flex-flow: row nowrap; + -moz-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; +} +/* row nowrap */ +.flex-flow-B { + -webkit-flex-flow: row nowrap; + -moz-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; +} +/* column-reverse wrap */ +.flex-flow-C { + -webkit-flex-flow: column-reverse wrap; + -moz-flex-flow: column-reverse wrap; + -ms-flex-flow: column-reverse wrap; + flex-flow: column-reverse wrap; +} +/*--------------------------------------------------------------------*/ +.order-A { + -webkit-box-ordinal-group: 1; + -webkit-order: 0; + -moz-order: 0; + -ms-flex-order: 0; + order: 0; +} +/* -1 */ +.order-B { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -moz-order: -1; + -ms-flex-order: -1; + order: -1; +} +/* 5 */ +.order-C { + -webkit-box-ordinal-group: 6; + -webkit-order: 5; + -moz-order: 5; + -ms-flex-order: 5; + order: 5; +} +/*--------------------------------------------------------------------*/ +.flex-grow-A { + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -moz-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; +} +/* 3 */ +.flex-grow-B { + -webkit-box-flex: 3; + -webkit-flex-grow: 3; + -moz-flex-grow: 3; + -ms-flex-positive: 3; + flex-grow: 3; +} +/*--------------------------------------------------------------------*/ +.flex-shrink-A { + -webkit-flex-shrink: 1; + -moz-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; +} +/* 2 */ +.flex-shrink-B { + -webkit-flex-shrink: 2; + -moz-flex-shrink: 2; + -ms-flex-negative: 2; + flex-shrink: 2; +} +/*--------------------------------------------------------------------*/ +.flex-basis-A { + -webkit-flex-basis: auto; + -moz-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; +} +.flex-basis-B { + -webkit-flex-basis: 18rem; + -moz-flex-basis: 18rem; + -ms-flex-preferred-size: 18rem; + flex-basis: 18rem; +} +/*--------------------------------------------------------------------*/ +.flex-A { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; +} +/* 1, 6, 20% */ +.flex-B { + -webkit-box-flex: 1; + -webkit-flex: 1 6 20%; + -moz-box-flex: 1; + -moz-flex: 1 6 20%; + -ms-flex: 1 6 20%; + flex: 1 6 20%; +} +/* 1, 20%, null */ +.flex-C { + -webkit-box-flex: 1; + -webkit-flex: 1 20%; + -moz-box-flex: 1; + -moz-flex: 1 20%; + -ms-flex: 1 20%; + flex: 1 20%; +} +/* 1, null, null */ +.flex-D { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; +} +/*--------------------------------------------------------------------*/ +.justify-content-A { + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + -moz-justify-content: flex-start; + justify-content: flex-start; +} +.flex-just-A { + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + -moz-justify-content: flex-start; + justify-content: flex-start; +} +/* flex-start */ +.justify-content-B { + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + -moz-justify-content: flex-start; + justify-content: flex-start; +} +.flex-just-B { + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + -moz-justify-content: flex-start; + justify-content: flex-start; +} +/* flex-end */ +.justify-content-C { + -webkit-box-pack: end; + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + -moz-justify-content: flex-end; + justify-content: flex-end; +} +.flex-just-C { + -webkit-box-pack: end; + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + -moz-justify-content: flex-end; + justify-content: flex-end; +} +/* flex-end */ +.justify-content-D { + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + -moz-justify-content: center; + justify-content: center; +} +.flex-just-D { + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + -moz-justify-content: center; + justify-content: center; +} +/* space-between */ +.justify-content-E { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + justify-content: space-between; +} +.flex-just-E { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + justify-content: space-between; +} +/* space-around */ +.justify-content-E { + -webkit-box-pack: space-around; + -ms-flex-pack: space-around; + -webkit-justify-content: space-around; + -moz-justify-content: space-around; + justify-content: space-around; +} +.flex-just-E { + -webkit-box-pack: space-around; + -ms-flex-pack: space-around; + -webkit-justify-content: space-around; + -moz-justify-content: space-around; + justify-content: space-around; +} +/*--------------------------------------------------------------------*/ +.align-items-A { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + -webkit-align-items: stretch; + -moz-align-items: stretch; + align-items: stretch; +} +/* flex-start */ +.align-items-C { + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + -moz-align-items: flex-start; + align-items: flex-start; +} +/* flex-end */ +.align-items-D { + -webkit-box-align: end; + -ms-flex-align: end; + -webkit-align-items: flex-end; + -moz-align-items: flex-end; + align-items: flex-end; +} +/* center */ +.align-items-E { + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + -moz-align-items: center; + align-items: center; +} +/* baseline */ +.align-items-F { + -webkit-box-align: baseline; + -ms-flex-align: baseline; + -webkit-align-items: baseline; + -moz-align-items: baseline; + align-items: baseline; +} +/* stretch */ +.align-items-G { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + -webkit-align-items: stretch; + -moz-align-items: stretch; + align-items: stretch; +} +/*--------------------------------*/ +.align-self-A { + -webkit-align-self: auto; + -moz-align-self: auto; + -ms-flex-item-align: auto; + align-self: auto; +} +/* auto */ +.align-self-B { + -webkit-align-self: auto; + -moz-align-self: auto; + -ms-flex-item-align: auto; + align-self: auto; +} +/* flex-start */ +.align-self-C { + -webkit-align-self: flex-start; + -moz-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; +} +/* flex-end */ +.align-self-D { + -webkit-align-self: flex-end; + -moz-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; +} +/* center */ +.align-self-E { + -webkit-align-self: center; + -moz-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} +/* baseline */ +.align-self-F { + -webkit-align-self: baseline; + -moz-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; +} +/* stretch */ +.align-self-G { + -webkit-align-self: stretch; + -moz-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} +/*--------------------------------------------------------------------*/ +.align-content-A { + -webkit-align-content: stretch; + -moz-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} +/* flex-start */ +.align-content-B { + -webkit-align-content: flex-start; + -moz-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; +} +/* flex-end */ +.align-content-C { + -webkit-align-content: flex-end; + -moz-align-content: flex-end; + -ms-flex-line-pack: end; + align-content: flex-end; +} +/* center */ +.align-content-D { + -webkit-align-content: center; + -moz-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} +/* space-between */ +.align-content-E { + -webkit-align-content: space-between; + -moz-align-content: space-between; + -ms-flex-line-pack: space-between; + align-content: space-between; +} +/* space-around */ +.align-content-F { + -webkit-align-content: space-around; + -moz-align-content: space-around; + -ms-flex-line-pack: space-around; + align-content: space-around; +} +/* stretch */ +.align-content-G { + -webkit-align-content: stretch; + -moz-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} diff --git a/test/test.styl b/test/test.styl new file mode 100644 index 0000000..c17f0ec --- /dev/null +++ b/test/test.styl @@ -0,0 +1,254 @@ +/* TEST FILE ONLY! NOT INTEDED FOR USE IN REAL-WORLD! */ +/* + * By Rui: + * + * 1. list data as arg of mixin should wrap with parentheses + */ + +@import "../flex"; + +/*--------------------------------------------------------------------*/ + +.flexbox + flexbox() + +.flexbox-inline + inline-flex() + +/*--------------------------------------------------------------------*/ + +.flex-direction-A + flex-direction() + +.flex-dir-A + flex-direction() + +/* row */ +.flex-direction-B + flex-direction row +.flex-dir-B + flex-direction row + +/* row-reverse */ +.flex-direction-C + flex-direction row-reverse +.flex-dir-C + flex-direction row-reverse + +/* column */ +.flex-direction-D + flex-direction column +.flex-dir-D + flex-direction column + +/* column-reverse */ +.flex-direction-E + flex-direction column-reverse +.flex-dir-E + flex-direction column-reverse + +/*--------------------------------------------------------------------*/ + +.flex-wrap-A + flex-wrap() + +/* nowrap */ +.flex-wrap-B + flex-wrap nowrap + +/* nowrap */ +.flex-wrap-C + flex-wrap wrap + +/* nowrap */ +.flex-wrap-D + flex-wrap wrap-reverse + +/*--------------------------------------------------------------------*/ + +.flex-flow-A + flex-flow() + +/* row nowrap */ +.flex-flow-B + flex-flow(row nowrap) // 1 + +/* column-reverse wrap */ +.flex-flow-C + flex-flow(column-reverse wrap) // 1 + +/*--------------------------------------------------------------------*/ + +.order-A + order() + +/* -1 */ +.order-B + order -1 + +/* 5 */ +.order-C + order 5 + +/*--------------------------------------------------------------------*/ + +.flex-grow-A + flex-grow() + +/* 3 */ +.flex-grow-B + flex-grow 3 + +/*--------------------------------------------------------------------*/ + +.flex-shrink-A + flex-shrink() + +/* 2 */ +.flex-shrink-B + flex-shrink 2 + +/*--------------------------------------------------------------------*/ + +.flex-basis-A + flex-basis() + +.flex-basis-B + flex-basis 18rem + +/*--------------------------------------------------------------------*/ + +.flex-A + flex() + +/* 1, 6, 20% */ +.flex-B + flex 1, 6, 20% + +/* 1, 20%, null */ +.flex-C + flex 1, 20% + +/* 1, null, null */ +.flex-D + flex 1 + +/*--------------------------------------------------------------------*/ + +.justify-content-A + justify-content() +.flex-just-A + justify-content() + +/* flex-start */ +.justify-content-B + justify-content flex-start +.flex-just-B + justify-content flex-start + +/* flex-end */ +.justify-content-C + justify-content flex-end +.flex-just-C + justify-content flex-end + +/* flex-end */ +.justify-content-D + justify-content center +.flex-just-D + justify-content center + +/* space-between */ +.justify-content-E + justify-content space-between +.flex-just-E + justify-content space-between + +/* space-around */ +.justify-content-E + justify-content space-around +.flex-just-E + justify-content space-around + +/*--------------------------------------------------------------------*/ + +.align-items-A + align-items() + +/* flex-start */ +.align-items-C + align-items flex-start + +/* flex-end */ +.align-items-D + align-items flex-end + +/* center */ +.align-items-E + align-items center + +/* baseline */ +.align-items-F + align-items baseline + +/* stretch */ +.align-items-G + align-items stretch + +/*--------------------------------*/ + +.align-self-A + align-self() + +/* auto */ +.align-self-B + align-self auto + +/* flex-start */ +.align-self-C + align-self flex-start + +/* flex-end */ +.align-self-D + align-self flex-end + +/* center */ +.align-self-E + align-self center + +/* baseline */ +.align-self-F + align-self baseline + +/* stretch */ +.align-self-G + align-self stretch + +/*--------------------------------------------------------------------*/ + +.align-content-A + align-content() + +/* flex-start */ +.align-content-B + align-content flex-start + +/* flex-end */ +.align-content-C + align-content flex-end + +/* center */ +.align-content-D + align-content center + +/* space-between */ +.align-content-E + align-content space-between + +/* space-around */ +.align-content-F + align-content space-around + +/* stretch */ +.align-content-G + align-content stretch \ No newline at end of file