diff --git a/axis/buttons.styl b/axis/buttons.styl
index 9172cc4..5442001 100644
--- a/axis/buttons.styl
+++ b/axis/buttons.styl
@@ -12,7 +12,7 @@
// ex. highlight: .7
-highlight($strength = .3)
- box-shadow(s("inset 0 1px 0 %s", rgba(255,255,255,$strength)))
+ box-shadow: s("inset 0 1px 0 %s", rgba(255,255,255,$strength))
// Function: parse
// Used internally for setting button sizes.
@@ -142,7 +142,7 @@ glossy-button($color = $default-color, $size = "medium", $text-color = null, $sh
text-shadow: 1px 1px 1px $hover-color
&:active
- box-shadow(s("inset 0 1px %s %s", $parsed-size/2.6px, rgba(darken($color, 25%),.6)))
+ box-shadow: s("inset 0 1px %s %s", $parsed-size/2.6px, rgba(darken($color, 25%),.6))
text-shadow: $down-shadow
border-color: darken($color, 18%)
diff --git a/axis/forms.styl b/axis/forms.styl
index 0378385..dde6aef 100644
--- a/axis/forms.styl
+++ b/axis/forms.styl
@@ -7,7 +7,7 @@
-focus-glow($color = $default-color)
&:focus
- box-shadow(0 0 5px rgba($color,.7))
+ box-shadow: 0 0 5px rgba($color,.7)
border: 1px solid desaturate($color, 35%)
outline: none
@@ -22,7 +22,7 @@
// ex. input: #D45D86 400px
input($color = $aqua, $width = 250px)
- box-shadow(inset 0 1px 1px rgba(#000, 0.1))
+ box-shadow: inset 0 1px 1px rgba(#000, 0.1)
-webkit-font-smoothing: antialiased
font-size: unit($font-size, 'px')
font-family: $font-stack
@@ -35,7 +35,6 @@ input($color = $aqua, $width = 250px)
width: $width
text-shadow: 0 0 1px rgba(#fff, .1)
transition()
- pie()
if color
-focus-glow($color)
else
diff --git a/axis/gradients.styl b/axis/gradients.styl
index 80949f5..ab1cfab 100644
--- a/axis/gradients.styl
+++ b/axis/gradients.styl
@@ -21,10 +21,7 @@ gradient($color1, $color2 = null, $strength = 10%)
$start = $color2 ? $color1 : lighten($color1, $strength)
$end = $color2 ? $color2 : darken($color1, $strength)
background: $start
- background: $end linear-gradient(top, $start, $end) repeat-x
- if $pie-enabled
- -pie-background: unquote('linear-gradient(top,') $start unquote(' 0%, ') $end unquote('end 100%)')
- pie()
+ background: $end linear-gradient(180deg, $start, $end) repeat-x
// Mixin: Image Gradient
//
@@ -45,7 +42,4 @@ image-gradient($color1, $color2 = null, $image-path = 'noise.png', $strength = 1
$start = $color2 ? $color1 : lighten($color1, $strength)
$end = $color2 ? $color2 : darken($color1, $strength)
background: $start
- background: url($img-path $image-path) repeat, $end linear-gradient(top, $start, $end) repeat-x
- if $pie-enabled
- -pie-background: unquote('linear-gradient(top,') $start unquote(' 0%, ') $end unquote('end 100%)')
- pie()
+ background: url($img-path $image-path) repeat, $end linear-gradient(180deg, $start, $end) repeat-x
diff --git a/axis/index.styl b/axis/index.styl
index 0261fa4..f29c901 100644
--- a/axis/index.styl
+++ b/axis/index.styl
@@ -4,7 +4,6 @@
@import 'settings'
@import 'reset'
-@import 'vendor'
@import 'utilities'
@import 'gradients'
@import 'images'
diff --git a/axis/layout.styl b/axis/layout.styl
index 43f07ea..79b11b2 100644
--- a/axis/layout.styl
+++ b/axis/layout.styl
@@ -1,7 +1,55 @@
-// Alias: group
-// Clearfix with a better name. Excellent for wrangling floats.
+// Mixin: group
+// Clearfix with a better name. Excellent for wrangling floats. Taken from
+// http://www.cssmojo.com/latest_new_clearfix_so_far/
+// Does not support IE 6 and 7 because you should not support them either.
+
+group()
+ &:after
+ content: ""
+ display: table
+ clear: both
+
+// Alias: clearfix
+// Group with a worse name. If you need really can't break the habit.
+clearfix = group
+
+// Function: pos
+// Backs position helpers, found below
+-pos(type, args)
+ i = 0
+ position: unquote(type)
+ for j in (1..4)
+ if length(args) > i
+ {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
+ i += 1
+
+// Mixin: Positions
+// Syntax shortcuts for absolute, relative, and fixed positioning. Ported
+// from nib: https://github.com/tj/nib/blob/master/lib/nib/positions.styl
+
+fixed()
+ -pos('fixed', arguments)
+
+absolute()
+ -pos('absolute', arguments)
+
+relative()
+ -pos('relative', arguments)
+
+// Mixin: Size
+// Shortcut for setting width and height quickly. If passed one value, sets this
+// value as both width and height.
+//
+// ex. size: 10px 30px
+// ex. size: 10px
-group = clearfix
+size()
+ if length(arguments) == 1
+ width: arguments[0]
+ height: arguments[0]
+ else
+ width: arguments[0]
+ height: arguments[1]
// Mixin: Columns
//
@@ -30,19 +78,6 @@ columns($count = 3, $gap = 30px, $width = null, $rule = null)
avoid-column-break()
column-break-inside: avoid
-// Alias: Inline Block
-// Cross browser inline block display. Saves many IE headaches.
-
-inline-block()
- display: inline-block
-
- if support-for-ie
- display: -moz-inline-stack
- vertical-align: baseline
- zoom: 1
- *display: inline
- *vertical-align: auto
-
// Mixin: Vertically Align
// Cross browser vertical align. Works down to IE9.
//
@@ -73,24 +108,24 @@ vertically-align($reset = null)
// direct children. The first one will float to the left, the second one will be
// to the right of the first, and third will go farthest right.
//
-// ex. media()
-// ex. media: 15px
-// ex. media: 15px 10px
+// ex. media-object()
+// ex. media-object: 15px
+// ex. media-object: 15px 10px
-media($margin = 10px)
+media-object($margin = 10px)
$left-margin = $margin
$right-margin = $margin
- if length($arguments) > 1
- $left-margin = $arguments[0]
- $right-margin = $arguments[1]
+ if length(arguments) > 1
+ $left-margin = arguments[0]
+ $right-margin = arguments[1]
overflow: hidden
zoom: 1
& > *
- inline-block()
+ display: inline-block
overflow: hidden
& > *:first-child
float: left
diff --git a/axis/reset.styl b/axis/reset.styl
index e5a2f23..141be86 100644
--- a/axis/reset.styl
+++ b/axis/reset.styl
@@ -2,9 +2,86 @@
// Reset
// -----
-// global-reset delegated to nib
-
-$support-for-ie ?= true
+// Global Reset
+// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
+// ported from Nib
+
+global-reset()
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend,
+ table, caption, tbody, tfoot, thead, tr, th, td
+ reset-box-model()
+ reset-font()
+ body
+ reset-body()
+ ol, ul
+ list-style: none
+ table
+ reset-table()
+ caption, th, td
+ reset-table-cell()
+ a img
+ border: none
+
+nested-reset()
+ div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
+ pre, a, abbr, acronym, address, code, del, dfn, em, img,
+ dl, dt, dd, ol, ul, li, fieldset, form, label,
+ legend, caption, tbody, tfoot, thead, tr
+ reset-box-model()
+ reset-font()
+ table
+ reset-table()
+ caption, th, td
+ reset-table-cell()
+ a img
+ border: none
+
+reset-box-model()
+ margin: 0
+ padding: 0
+ border: 0
+ outline: 0
+
+reset-font()
+ font-weight: inherit
+ font-style: inherit
+ font-family: inherit
+ font-size: 100%
+ vertical-align: baseline
+
+reset-body()
+ line-height: 1
+ color: black
+ background: white
+
+reset-table()
+ border-collapse: separate
+ border-spacing: 0
+ vertical-align: middle
+
+reset-table-cell()
+ text-align: left
+ font-weight: normal
+ vertical-align: middle
+
+reset-html5()
+ article, aside, canvas, details, figcaption,
+ figure, footer, header, hgroup, menu, nav,
+ section, summary, main
+ reset-box-model()
+ display: block
+ audio, canvas, video
+ display inline-block
+ *display inline
+ *zoom 1
+ audio:not([controls]),[hidden]
+ display none
// Mixin: Normalize CSS
// Based on v3.0.1 https://github.com/necolas/normalize.css
diff --git a/axis/settings.styl b/axis/settings.styl
index bda17e7..447aae4 100644
--- a/axis/settings.styl
+++ b/axis/settings.styl
@@ -34,24 +34,24 @@ $silver = #DDDDDD
$gray = #AAAAAA
$black = #222222
-//Use as default HTML colors
-navy = $navy
-blue = $blue
-aqua = $aqua
-teal = $teal
-olive = $olive
-green = $green
-lime = $lime
-yellow = $yellow
-orange = $orange
-red = $red
-maroon = $maroon
+// Use as default HTML colors
+navy = $navy
+blue = $blue
+aqua = $aqua
+teal = $teal
+olive = $olive
+green = $green
+lime = $lime
+yellow = $yellow
+orange = $orange
+red = $red
+maroon = $maroon
fuchsia = $fuchsia
-purple = $purple
-white = $white
-silver = $silver
-gray = $gray
-black = $black
+purple = $purple
+white = $white
+silver = $silver
+gray = $gray
+black = $black
// Default color
$default-color = $blue
@@ -59,23 +59,8 @@ $default-color = $blue
// Text highlight color
$highlight-color = $blue
-// Custom image base path for roots mixins
+// Custom image base path for axis mixins
$img-path = ''
-// Support for old IE
-support-for-ie = $support-for-ie // Needed until we port/drop nib
-$support-for-ie = false
-
// Ligatures
$ligatures = false
-
-// Vertical rhythm
-$base-line-height = 24px
-$default-rhythm-border-style = solid
-$relative-font-sizing = true
-$round-to-nearest-half-line = false
-$min-line-padding = 2px
-
-// Progressive IE (http://css3pie.com/)
-$pie-enabled = false
-$pie-path = '/pie.htc'
diff --git a/axis/typography.styl b/axis/typography.styl
index d3839ed..35ecd0e 100644
--- a/axis/typography.styl
+++ b/axis/typography.styl
@@ -47,6 +47,20 @@ font-face($name, $folder, $weight = 'normal', $style = 'normal')
font-weight: unquote($weight)
font-style: unquote($style)
+
+// Mixin: Ellipsis
+// Truncate text to the width of its container...
+// ex: ellipsis()
+// ex: ellipsis: 300px
+
+ellipsis($width = 100%)
+ white-space: nowrap
+ display: inline-block
+ max-width: 100%
+ overflow: hidden
+ text-overflow: ellipsis
+ word-wrap: normal
+
// Function: Line Height
//
// If there is a font-size set on the parent element, adjusts the line height to
@@ -56,7 +70,7 @@ font-face($name, $folder, $weight = 'normal', $style = 'normal')
if @font-size
line-height: 1.6em
else
- line-height: unit(font-size*1.6, 'px')
+ line-height: unit($font-size*1.6, 'px')
line-height: 1.6rem
// Mixin: Text Margin
@@ -381,6 +395,17 @@ hyphenation()
-webkit-hyphenate-after: 3
hyphenate-lines: 3
+// Mixin: Shadow Stroke
+//
+// Creates a text outline using text-shadow. Ported from nib.
+// Takes a color.
+//
+// ex: shadow-stroke()
+// ex: sahdow-stroke(red)
+
+shadow-stroke($color = $blue)
+ text-shadow: -1px -1px 0 $color, 1px -1px 0 $color, -1px 1px 0 $color, 1px 1px 0 $color
+
// Additive Mixin: Base
//
// WARNING: Creates classes in your css and styles them - not to be used inside
diff --git a/axis/ui.styl b/axis/ui.styl
index 8b7e6c6..6d05e40 100644
--- a/axis/ui.styl
+++ b/axis/ui.styl
@@ -12,12 +12,11 @@
// ex. area: red // <-- not recommended
area($color = #F5F5F5)
- box-shadow(inset 0 0 6px rgba(#000,.05))
+ box-shadow: inset 0 0 6px rgba(#000,.05)
background-color: $color
padding: 15px
border-radius: 4px
margin: 20px 0
- pie()
// Mixin: Notice
//
@@ -28,7 +27,7 @@ area($color = #F5F5F5)
// ex. notice()
// ex. notice: 500px blue
-notice($width = false, $color = #EEEEEE, $padding = 10px) // $color variable breaks nib
+notice($width = false, $color = #EEEEEE, $padding = 10px)
group()
gradient($color, 3%)
border-radius: 5px
@@ -208,7 +207,7 @@ figure($color = $default-color, $dimensions = false)
display: block
size: $dimensions[0] $dimensions[1]
else if $dimensions == false
- inline-block()
+ display: inline-block
else
warn("Make sure you pass the image's dimensions as a space-separated list")
diff --git a/axis/utilities.styl b/axis/utilities.styl
index 9bcdb5b..5bb6079 100644
--- a/axis/utilities.styl
+++ b/axis/utilities.styl
@@ -2,25 +2,6 @@
// Utilities
// ---------
-
-// Mixin: Pie
-// When turned on, enables css3 pie (http://css3pie.com/) for all
-// elements that can use it. Which makes IE look a lot nicer.
-
-pie()
- behavior: url($pie-path) if $pie-enabled
-
-// Mixin: Rounded
-//
-// Unless you are working with a ridiculously large element, this will round the
-// corners as much as css will allow. Even in IE.
-//
-// ex. rounded()
-
-rounded()
- border-radius: 999px
- pie()
-
// Alias: No Select
// You can't highlight this.
@@ -35,6 +16,47 @@ b()
arguments = unquote('1px solid') unless arguments
border: arguments
+// Alias: Transition
+//
+// Transition with an intelligent default.
+//
+// ex. transition()
+// ex. transition: color 1s ease
+// ex. transition(color 1s ease, background 2.4s linear)
+
+transition()
+ arguments = unquote('all .3s ease') unless arguments
+ transition: arguments
+
+// Alias: Border Box
+// A quicker way to specify border-box sizing.
+
+border-box()
+ box-sizing: border-box
+
+// Alias: Opentype ligatures
+//
+// The vast majority of fonts contain lowercase and uppercase alphabets,
+// numerals, punctuation and accents. Many professionally-designed fonts
+// also contain ligatures, alternative characters, smallcaps, different kinds of
+// numbers, and sometimes much more besides. This enables it.
+//
+// Source: http://www.newnet-soft.com/blog/csstypography
+// Additional: http://blog.fontdeck.com/post/15777165734/opentype-1
+
+open-type-ligatures()
+ font-feature-settings: "liga", "dlig"
+
+// Mixin: Rounded
+//
+// Unless you are working with a ridiculously large element, this will round the
+// corners as much as css will allow. Even in IE.
+//
+// ex. rounded()
+
+rounded()
+ border-radius: 999px
+
// Mixin: Triangle
//
// One of my favorites. Makes a little css triangle for you. Pass it a direction
@@ -120,6 +142,52 @@ debug()
background: rgba(yellow, .2)
border: 1px solid gold
+// Block Mixin: Quantity Queries
+//
+// Set rules for a selector based on a specific sibling count.
+// via: https://github.com/pascalduez/postcss-quantity-queries
+//
+// ex. +quantity-at-least(6)
+// ex. +quantity-at-most(12, div)
+// ex. +quantity-between(0, 8, span)
+// ex. +quantity-exactly(5)
+
+quantity-at-least($count = 4, $selector = li)
+ & > {$selector}:nth-last-child(n+{$count})
+ & > {$selector}:nth-last-child(n+{$count}) ~ {$selector}
+ {block}
+
+quantity-at-most($count = 4, $selector = li)
+ & > {$selector}:nth-last-child(-n+{$count}):first-child
+ & > {$selector}:nth-last-child(-n+{$count}):first-child ~ {$selector}
+ {block}
+
+quantity-between($start = 0, $end = 10, $selector = li)
+ & > {$selector}:nth-last-child(n+{$start}):nth-last-child(-n+{$end}):first-child
+ & > {$selector}:nth-last-child(n+{$start}):nth-last-child(-n+{$end}):first-child ~ {$selector}
+ {block}
+
+quantity-exactly($count = 4, $selector = li)
+ & > {$selector}:nth-last-child({$count}):first-child
+ & > {$selector}:nth-last-child({$count}):first-child ~ {$selector}
+ {block}
+
+// Function: Rem Calculator
+//
+// Calculates and returns the rem value based on px input. Default base font
+// size is 16px, but can be changed with base-font-size.
+//
+// ex : rem(30px) or rem(30)
+// returns : 1.875rem
+
+-rem($value)
+ $base-font-size ?= 16px
+ $type = unit($value)
+ if $type == px
+ return unit($value / $base-font-size, 'rem')
+ else
+ return unit($value, $type)
+
// Custom animation timing functions, ported from bourbon
// https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_timing-functions.scss
@@ -155,49 +223,3 @@ $ease-in-out-expo = cubic-bezier(1.000, 0.000, 0.000, 1.000)
$ease-in-out-circ = cubic-bezier(0.785, 0.135, 0.150, 0.860)
$ease-in-out-back = cubic-bezier(0.680, -0.550, 0.265, 1.550)
$ease-in-out-swift = cubic-bezier(0.900, 0.000, 0.100, 1.000)
-
-// Function: Rem Calculator
-//
-// Calculates and returns the rem value based on px input. Default base font
-// size is 16px, but can be changed with base-font-size.
-//
-// ex : rem(30px) or rem(30)
-// returns : 1.875rem
-
--rem($value)
- $base-font-size ?= 16px
- $type = unit($value)
- if $type == px
- return unit($value / $base-font-size, 'rem')
- else
- return unit($value, $type)
-
-// Block Mixin: Quantity Queries
-//
-// Set rules for a selector based on a specific sibling count.
-// via: https://github.com/pascalduez/postcss-quantity-queries
-//
-// ex. +quantity-at-least(6)
-// ex. +quantity-at-most(12, div)
-// ex. +quantity-between(0, 8, span)
-// ex. +quantity-exactly(5)
-
-quantity-at-least($count = 4, $selector = li)
- & > {$selector}:nth-last-child(n+{$count})
- & > {$selector}:nth-last-child(n+{$count}) ~ {$selector}
- {block}
-
-quantity-at-most($count = 4, $selector = li)
- & > {$selector}:nth-last-child(-n+{$count}):first-child
- & > {$selector}:nth-last-child(-n+{$count}):first-child ~ {$selector}
- {block}
-
-quantity-between($start = 0, $end = 10, $selector = li)
- & > {$selector}:nth-last-child(n+{$start}):nth-last-child(-n+{$end}):first-child
- & > {$selector}:nth-last-child(n+{$start}):nth-last-child(-n+{$end}):first-child ~ {$selector}
- {block}
-
-quantity-exactly($count = 4, $selector = li)
- & > {$selector}:nth-last-child({$count}):first-child
- & > {$selector}:nth-last-child({$count}):first-child ~ {$selector}
- {block}
diff --git a/axis/vendor.styl b/axis/vendor.styl
deleted file mode 100644
index 3ca2070..0000000
--- a/axis/vendor.styl
+++ /dev/null
@@ -1,96 +0,0 @@
-// ------
-// Vendor
-// ------
-
-// Utilities specifically intended for helping with vendor-prefixed
-// css properties
-
-// Alias: Transition
-//
-// Transition with an intelligent default.
-//
-// ex. transition()
-// ex. transition: color 1s ease
-// ex. transition(color 1s ease, background 2.4s linear)
-
-//Cache nib transition mixin.
-_transition = transition
-
-transition()
- arguments = unquote('all .3s ease') unless arguments
- _transition: arguments
-
-
-// Alias: Box Shadow
-//
-// Box shadow with pie support, if you are using it.
-//
-// ex. box-shadow: 1px 1px 3px blue
-// ex. box-shadow(1px 1px 3px blue, inset 2px 0 5px rgba(0,0,0,.5))
-
-box-shadow()
- box-shadow: arguments
- pie()
-
-// Alias: Border Radius
-//
-// Border-radius with pie support, if you are using it.
-//
-// ex. +round-corners(5px)
-
-border-radius()
- border-radius: arguments
- pie()
-
-// Alias: Opacity
-//
-// I know, it seems silly. But every time you go to old IE testing you will be
-// thanking yourself for using this instead of the normal opacity declaration.
-// Overrides default opacity.
-//
-// ex. opacity: .6
-
-opacity($opacity, $args...)
-
- $support-for-ie = support-for-ie // address in #192
-
- if $args
- filter: s("progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)", $opacity * 100 $args) if $support-for-ie
- else
- filter: s("progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)", $opacity * 100) if $support-for-ie
-
- opacity: $opacity $args
-
-// Alias: Border Box
-// A quicker way to specify border-box sizing.
-
-border-box()
- box-sizing: border-box
-
-// Alises: background-appearance-x and y
-//
-// In case you want to use an unsupported background-position property, this
-// should set you straight!
-
-background-position-x($x)
- background-position: $x 0
-
-background-position-y($y)
- background-position: 0 $y
-
-// Mixin: Opentype ligatures
-//
-// The vast majority of fonts contain lowercase and uppercase alphabets,
-// numerals, punctuation and accents. // Many professionally-designed fonts
-// also contain ligatures, alternative characters, smallcaps, different kinds of
-// numbers, and sometimes much more besides. This enables it.
-//
-// Source: http://www.newnet-soft.com/blog/csstypography
-// Additional: http://blog.fontdeck.com/post/15777165734/opentype-1
-
-open-type-ligatures()
- -moz-font-feature-settings: "liga=1, dlig=1"
- -ms-font-feature-settings: "liga", "dlig"
- -webkit-font-feature-settings: "liga", "dlig"
- -o-font-feature-settings: "liga", "dlig"
- font-feature-settings: "liga", "dlig"
diff --git a/index.js b/index.js
index b0eb9be..41e6864 100644
--- a/index.js
+++ b/index.js
@@ -1,16 +1,13 @@
-var nib = require('nib'),
- path = require('path'),
+var path = require('path'),
pkg = require('./package.json');
exports = module.exports = function(opts) {
var implicit = (opts && opts.implicit == false) ? false : true;
return function(style){
- style.use(nib()); // include nib
style.include(__dirname); // include axis
if (implicit) {
- style.import('nib');
style.import('axis');
}
}
diff --git a/package.json b/package.json
index 16f3355..d2f29a1 100644
--- a/package.json
+++ b/package.json
@@ -8,16 +8,14 @@
"type": "git",
"url": "git://github.com/jenius/axis.git"
},
- "dependencies": {
- "nib": "1.x"
- },
"devDependencies": {
"accord": "0.20.x",
- "stylus": "*",
- "mocha": "2.x",
- "should": "7.x",
+ "autoprefixer-stylus": "0.7.x",
+ "chai": "3.x",
"coffee-script": "1.9.x",
- "css-parse": "2.x"
+ "css-parse": "2.x",
+ "mocha": "2.x",
+ "stylus": "*"
},
"scripts": {
"test": "mocha"
diff --git a/readme.md b/readme.md
index a790319..503f073 100644
--- a/readme.md
+++ b/readme.md
@@ -5,7 +5,7 @@ Axis
[](https://travis-ci.org/jenius/axis)
[](https://gemnasium.com/jenius/axis)
-Axis is a sizeable css utility library built on top of [stylus](https://github.com/LearnBoost/stylus) and [nib](http://visionmedia.github.io/nib/).
+Axis is a large and robust css utility library built on top of [stylus](https://github.com/LearnBoost/stylus).
> **Note:** This project is in early development, and versioning is a little different. [Read this](http://markup.im/#q4_cRZ1Q) for more details. Axis will not go to v1.0 until stylus has done so.
@@ -21,6 +21,16 @@ npm install axis --save
You can find [full documentation for axis here](http://axis.netlify.com). This includes usage instructions for integration with gulp, grunt, express, and more, as well as detailed and permalink-able documentation for each mixin that axis offers.
+### Library Size
+
+Some people have expressed concern that axis is too large of a library and they would prefer a smaller one, where they use a higher percentage of the mixins offered. But since axis is a mixin library, it actually adds zero size to your code. That's right, when you include axis and compile it, *not a single character is added to your code*.
+
+The only time it adds anything are when you use its mixins, which are engineered carefully to be as slim and concise as possible, and only use spec-compliant css3. This means that you can make axis' entire library of utilities available for free, use only what you like, and almost certainly add up with *less* code than if you wrote it yourself. Good deal, right?
+
+### Browser Prefixing
+
+Axis does not include any cross-browser code at all, only pure css3 as defined by the official spec. If you want your code to work better across browsers, we would recommend that you use [autoprefixer](https://github.com/postcss/autoprefixer), a library that is extraordinarily good at ensuring your css works correctly in the range of browsers you need it to.
+
### Miscellaneous
- Details on the license [can be found here](license.md)
diff --git a/test/fixtures/additive/framework.css b/test/fixtures/additive/framework.css
index bb2c570..14c5484 100644
--- a/test/fixtures/additive/framework.css
+++ b/test/fixtures/additive/framework.css
@@ -113,10 +113,7 @@ a {
color: #0074d9;
text-decoration: none;
-webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
+ transition: all .3s ease;
border-bottom: 1px solid transparent;
}
a:hover {
@@ -133,12 +130,9 @@ blockquote {
margin: 1em 0;
padding-left: 1.5em;
}
-blockquote:before,
blockquote:after {
content: "";
display: table;
-}
-blockquote:after {
clear: both;
}
blockquote > p {
@@ -164,9 +158,9 @@ blockquote > figcaption:before {
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
- -moz-hyphens: auto;
- -ms-hyphens: auto;
- hyphens: auto;
+ -moz-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
-webkit-hyphenate-before: 2;
-webkit-hyphenate-after: 3;
hyphenate-lines: 3;
@@ -199,10 +193,7 @@ textarea {
width: 250px;
text-shadow: 0 0 1px rgba(255,255,255,0.1);
-webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
+ transition: all .3s ease;
}
input[type='email']:focus,
input[type='number']:focus,
@@ -387,10 +378,7 @@ textarea.error:focus {
}
.btn {
-webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
+ transition: all .3s ease;
font-size: 13px;
padding: 10px 22px;
border-radius: 3px;
@@ -416,19 +404,13 @@ textarea.error:focus {
}
.btn-fancy {
-webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
+ transition: all .3s ease;
font-size: 13px;
padding: 10px 22px;
border-radius: 3px;
background: #0084f6;
- background: #0068c3 -webkit-linear-gradient(top, #0084f6, #0068c3) repeat-x;
- background: #0068c3 -moz-linear-gradient(top, #0084f6, #0068c3) repeat-x;
- background: #0068c3 -o-linear-gradient(top, #0084f6, #0068c3) repeat-x;
- background: #0068c3 -ms-linear-gradient(top, #0084f6, #0068c3) repeat-x;
- background: #0068c3 linear-gradient(to bottom, #0084f6, #0068c3) repeat-x;
+ background: #0068c3 -webkit-linear-gradient(270deg, #0084f6, #0068c3) repeat-x;
+ background: #0068c3 linear-gradient(180deg, #0084f6, #0068c3) repeat-x;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
border: 1px solid #0068c3;
color: #fff;
@@ -460,9 +442,9 @@ textarea.error:focus {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.btn.disabled:hover,
.btn-simple.disabled:hover {
diff --git a/test/fixtures/buttons/glossy-button.css b/test/fixtures/buttons/glossy-button.css
index 8e0a36f..ce9e6b6 100644
--- a/test/fixtures/buttons/glossy-button.css
+++ b/test/fixtures/buttons/glossy-button.css
@@ -3,11 +3,8 @@
padding: 10px 22px;
border-radius: 3px;
background: #0084f6;
- background: #0068c3 -webkit-linear-gradient(top, #0084f6, #0068c3) repeat-x;
- background: #0068c3 -moz-linear-gradient(top, #0084f6, #0068c3) repeat-x;
- background: #0068c3 -o-linear-gradient(top, #0084f6, #0068c3) repeat-x;
- background: #0068c3 -ms-linear-gradient(top, #0084f6, #0068c3) repeat-x;
- background: #0068c3 linear-gradient(to bottom, #0084f6, #0068c3) repeat-x;
+ background: #0068c3 -webkit-linear-gradient(270deg, #0084f6, #0068c3) repeat-x;
+ background: #0068c3 linear-gradient(180deg, #0084f6, #0068c3) repeat-x;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
border: 1px solid #0068c3;
color: #fff;
diff --git a/test/fixtures/forms/input-search.css b/test/fixtures/forms/input-search.css
index 8b80178..b593705 100644
--- a/test/fixtures/forms/input-search.css
+++ b/test/fixtures/forms/input-search.css
@@ -12,10 +12,7 @@
width: 250px;
text-shadow: 0 0 1px rgba(255,255,255,0.1);
-webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
+ transition: all .3s ease;
padding-left: 9px;
border-radius: 999px;
}
diff --git a/test/fixtures/forms/input.css b/test/fixtures/forms/input.css
index f9b21be..44c9aab 100644
--- a/test/fixtures/forms/input.css
+++ b/test/fixtures/forms/input.css
@@ -12,10 +12,7 @@
width: 250px;
text-shadow: 0 0 1px rgba(255,255,255,0.1);
-webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
+ transition: all .3s ease;
}
.input:focus {
box-shadow: 0 0 5px rgba(127,219,255,0.7);
diff --git a/test/fixtures/gradients/gradient.css b/test/fixtures/gradients/gradient.css
index 632fcb1..3e57b32 100644
--- a/test/fixtures/gradients/gradient.css
+++ b/test/fixtures/gradients/gradient.css
@@ -1,16 +1,10 @@
.gradient-twocolor {
background: #d13f19;
- background: #0074d9 -webkit-linear-gradient(top, #d13f19, #0074d9) repeat-x;
- background: #0074d9 -moz-linear-gradient(top, #d13f19, #0074d9) repeat-x;
- background: #0074d9 -o-linear-gradient(top, #d13f19, #0074d9) repeat-x;
- background: #0074d9 -ms-linear-gradient(top, #d13f19, #0074d9) repeat-x;
- background: #0074d9 linear-gradient(to bottom, #d13f19, #0074d9) repeat-x;
+ background: #0074d9 -webkit-linear-gradient(270deg, #d13f19, #0074d9) repeat-x;
+ background: #0074d9 linear-gradient(180deg, #d13f19, #0074d9) repeat-x;
}
.gradient-onecolor {
background: #e44921;
- background: #bc3917 -webkit-linear-gradient(top, #e44921, #bc3917) repeat-x;
- background: #bc3917 -moz-linear-gradient(top, #e44921, #bc3917) repeat-x;
- background: #bc3917 -o-linear-gradient(top, #e44921, #bc3917) repeat-x;
- background: #bc3917 -ms-linear-gradient(top, #e44921, #bc3917) repeat-x;
- background: #bc3917 linear-gradient(to bottom, #e44921, #bc3917) repeat-x;
+ background: #bc3917 -webkit-linear-gradient(270deg, #e44921, #bc3917) repeat-x;
+ background: #bc3917 linear-gradient(180deg, #e44921, #bc3917) repeat-x;
}
diff --git a/test/fixtures/gradients/image-gradient.css b/test/fixtures/gradients/image-gradient.css
index bd2f974..aa168d0 100644
--- a/test/fixtures/gradients/image-gradient.css
+++ b/test/fixtures/gradients/image-gradient.css
@@ -1,16 +1,10 @@
.image-gradient-twocolor {
background: #d13f19;
- background: url("foo.png") repeat, #0074d9 -webkit-linear-gradient(top, #d13f19, #0074d9) repeat-x;
- background: url("foo.png") repeat, #0074d9 -moz-linear-gradient(top, #d13f19, #0074d9) repeat-x;
- background: url("foo.png") repeat, #0074d9 -o-linear-gradient(top, #d13f19, #0074d9) repeat-x;
- background: url("foo.png") repeat, #0074d9 -ms-linear-gradient(top, #d13f19, #0074d9) repeat-x;
- background: url("foo.png") repeat, #0074d9 linear-gradient(to bottom, #d13f19, #0074d9) repeat-x;
+ background: url("foo.png") repeat, #0074d9 -webkit-linear-gradient(270deg, #d13f19, #0074d9) repeat-x;
+ background: url("foo.png") repeat, #0074d9 linear-gradient(180deg, #d13f19, #0074d9) repeat-x;
}
.image-gradient-onecolor {
background: #e44921;
- background: url("foo.png") repeat, #bc3917 -webkit-linear-gradient(top, #e44921, #bc3917) repeat-x;
- background: url("foo.png") repeat, #bc3917 -moz-linear-gradient(top, #e44921, #bc3917) repeat-x;
- background: url("foo.png") repeat, #bc3917 -o-linear-gradient(top, #e44921, #bc3917) repeat-x;
- background: url("foo.png") repeat, #bc3917 -ms-linear-gradient(top, #e44921, #bc3917) repeat-x;
- background: url("foo.png") repeat, #bc3917 linear-gradient(to bottom, #e44921, #bc3917) repeat-x;
+ background: url("foo.png") repeat, #bc3917 -webkit-linear-gradient(270deg, #e44921, #bc3917) repeat-x;
+ background: url("foo.png") repeat, #bc3917 linear-gradient(180deg, #e44921, #bc3917) repeat-x;
}
diff --git a/test/fixtures/images/bg.css b/test/fixtures/images/bg.css
index 07afdf7..135877b 100644
--- a/test/fixtures/images/bg.css
+++ b/test/fixtures/images/bg.css
@@ -3,15 +3,11 @@
}
.bg-retina {
background: url("foo.png") no-repeat;
- -webkit-background-size: 300px 500px;
- -moz-background-size: 300px 500px;
background-size: 300px 500px;
width: 300px;
height: 500px;
}
.bg-retina-repeat {
background: url("foo.png") repeat center;
- -webkit-background-size: 300px 500px;
- -moz-background-size: 300px 500px;
background-size: 300px 500px;
}
diff --git a/test/fixtures/interaction/click-down.css b/test/fixtures/interaction/click-down.css
index 1948dad..1836882 100644
--- a/test/fixtures/interaction/click-down.css
+++ b/test/fixtures/interaction/click-down.css
@@ -1,7 +1,5 @@
.click-down:active {
-webkit-transform: translateY(1px);
- -moz-transform: translateY(1px);
- -o-transform: translateY(1px);
- -ms-transform: translateY(1px);
- transform: translateY(1px);
+ -ms-transform: translateY(1px);
+ transform: translateY(1px);
}
diff --git a/test/fixtures/interaction/click-shrink.css b/test/fixtures/interaction/click-shrink.css
index 9b89c3e..8aec5cc 100644
--- a/test/fixtures/interaction/click-shrink.css
+++ b/test/fixtures/interaction/click-shrink.css
@@ -1,7 +1,5 @@
.click-shrink:active {
-webkit-transform: scale(0.92);
- -moz-transform: scale(0.92);
- -o-transform: scale(0.92);
- -ms-transform: scale(0.92);
- transform: scale(0.92);
+ -ms-transform: scale(0.92);
+ transform: scale(0.92);
}
diff --git a/test/fixtures/interaction/hover-float.css b/test/fixtures/interaction/hover-float.css
index 00ea8cd..a80d11c 100644
--- a/test/fixtures/interaction/hover-float.css
+++ b/test/fixtures/interaction/hover-float.css
@@ -11,24 +11,17 @@
height: 10px;
width: 90%;
opacity: 0;
- background: -webkit-radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
- background: -moz-radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
- background: -o-radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
- background: -ms-radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
+ background: -webkit-radial-gradient(center, ellipse, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
}
.hover-float:hover {
-webkit-transform: translateY(-7px);
- -moz-transform: translateY(-7px);
- -o-transform: translateY(-7px);
- -ms-transform: translateY(-7px);
- transform: translateY(-7px);
+ -ms-transform: translateY(-7px);
+ transform: translateY(-7px);
}
.hover-float:hover:before {
opacity: 1;
-webkit-transform: scale(1);
- -moz-transform: scale(1);
- -o-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
}
diff --git a/test/fixtures/interaction/hover-pop.css b/test/fixtures/interaction/hover-pop.css
index 63bb951..1ffe575 100644
--- a/test/fixtures/interaction/hover-pop.css
+++ b/test/fixtures/interaction/hover-pop.css
@@ -2,8 +2,6 @@
position: relative;
z-index: 10;
-webkit-transform: scale(1.2);
- -moz-transform: scale(1.2);
- -o-transform: scale(1.2);
- -ms-transform: scale(1.2);
- transform: scale(1.2);
+ -ms-transform: scale(1.2);
+ transform: scale(1.2);
}
diff --git a/test/fixtures/layout/columns.css b/test/fixtures/layout/columns.css
index 6b6c8d4..3140c8a 100644
--- a/test/fixtures/layout/columns.css
+++ b/test/fixtures/layout/columns.css
@@ -1,10 +1,10 @@
.columns {
-webkit-column-count: 3;
- -moz-column-count: 3;
- column-count: 3;
+ -moz-column-count: 3;
+ column-count: 3;
-webkit-column-gap: 30px;
- -moz-column-gap: 30px;
- column-gap: 30px;
+ -moz-column-gap: 30px;
+ column-gap: 30px;
}
.avoid-break {
column-break-inside: avoid;
diff --git a/test/fixtures/layout/group.css b/test/fixtures/layout/group.css
index ecc5081..a69f495 100644
--- a/test/fixtures/layout/group.css
+++ b/test/fixtures/layout/group.css
@@ -1,16 +1,10 @@
-.group:before,
.group:after {
content: "";
display: table;
-}
-.group:after {
clear: both;
}
-.clearfix:before,
.clearfix:after {
content: "";
display: table;
-}
-.clearfix:after {
clear: both;
}
diff --git a/test/fixtures/layout/inline-block.css b/test/fixtures/layout/inline-block.css
deleted file mode 100644
index 4cf614c..0000000
--- a/test/fixtures/layout/inline-block.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.inline-block {
- display: inline-block;
-}
-.inline-block-ie {
- display: inline-block;
- display: -moz-inline-stack;
- vertical-align: baseline;
- zoom: 1;
- *display: inline;
- *vertical-align: auto;
-}
diff --git a/test/fixtures/layout/inline-block.styl b/test/fixtures/layout/inline-block.styl
deleted file mode 100644
index 3d06963..0000000
--- a/test/fixtures/layout/inline-block.styl
+++ /dev/null
@@ -1,8 +0,0 @@
-.inline-block
- inline-block()
-
-support-for-ie = true
-.inline-block-ie
- inline-block()
-
-support-for-ie = false
diff --git a/test/fixtures/layout/media.styl b/test/fixtures/layout/media.styl
index bbf1adb..bd02eec 100644
--- a/test/fixtures/layout/media.styl
+++ b/test/fixtures/layout/media.styl
@@ -1,2 +1,2 @@
.media
- media()
+ media-object()
diff --git a/test/fixtures/layout/vertical-align.css b/test/fixtures/layout/vertical-align.css
index 30f33ca..e91b1a0 100644
--- a/test/fixtures/layout/vertical-align.css
+++ b/test/fixtures/layout/vertical-align.css
@@ -8,17 +8,13 @@
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
}
.vertical-align .inner-div.reset {
position: relative;
top: 0;
-webkit-transform: translateY(0);
- -moz-transform: translateY(0);
- -o-transform: translateY(0);
- -ms-transform: translateY(0);
- transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
}
diff --git a/test/fixtures/reset/border-box-html.css b/test/fixtures/reset/border-box-html.css
index 3aa274f..498362f 100644
--- a/test/fixtures/reset/border-box-html.css
+++ b/test/fixtures/reset/border-box-html.css
@@ -1,12 +1,8 @@
html {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after {
- -webkit-box-sizing: inherit;
- -moz-box-sizing: inherit;
box-sizing: inherit;
}
diff --git a/test/fixtures/typography/blockquo.css b/test/fixtures/typography/blockquo.css
index 3597a5c..d4a756e 100644
--- a/test/fixtures/typography/blockquo.css
+++ b/test/fixtures/typography/blockquo.css
@@ -3,12 +3,9 @@
margin: 1em 0;
padding-left: 1.5em;
}
-.blockquote:before,
.blockquote:after {
content: "";
display: table;
-}
-.blockquote:after {
clear: both;
}
.blockquote > p {
diff --git a/test/fixtures/typography/ellipsis.css b/test/fixtures/typography/ellipsis.css
new file mode 100644
index 0000000..b98821a
--- /dev/null
+++ b/test/fixtures/typography/ellipsis.css
@@ -0,0 +1,8 @@
+.ellipsis {
+ white-space: nowrap;
+ display: inline-block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-wrap: normal;
+}
diff --git a/test/fixtures/typography/ellipsis.styl b/test/fixtures/typography/ellipsis.styl
new file mode 100644
index 0000000..2de6486
--- /dev/null
+++ b/test/fixtures/typography/ellipsis.styl
@@ -0,0 +1,2 @@
+.ellipsis
+ ellipsis()
diff --git a/test/fixtures/typography/hyphenation.css b/test/fixtures/typography/hyphenation.css
index 2b7cfa3..bd1fb2a 100644
--- a/test/fixtures/typography/hyphenation.css
+++ b/test/fixtures/typography/hyphenation.css
@@ -3,9 +3,9 @@
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
- -moz-hyphens: auto;
- -ms-hyphens: auto;
- hyphens: auto;
+ -moz-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
-webkit-hyphenate-before: 2;
-webkit-hyphenate-after: 3;
hyphenate-lines: 3;
diff --git a/test/fixtures/typography/link.css b/test/fixtures/typography/link.css
index bb51a46..d17e63b 100644
--- a/test/fixtures/typography/link.css
+++ b/test/fixtures/typography/link.css
@@ -2,10 +2,7 @@
color: #0074d9;
text-decoration: none;
-webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
+ transition: all .3s ease;
border-bottom: 1px solid transparent;
}
.link:hover {
@@ -21,10 +18,7 @@
color: #0074d9;
text-decoration: none;
-webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
+ transition: all .3s ease;
border-bottom: 1px solid transparent;
border: none;
text-decoration: none;
diff --git a/test/fixtures/typography/lists.css b/test/fixtures/typography/lists.css
index a5f4844..b45bb52 100644
--- a/test/fixtures/typography/lists.css
+++ b/test/fixtures/typography/lists.css
@@ -22,12 +22,9 @@
margin: 0;
padding: 0;
}
-.inline-list:before,
.inline-list:after {
content: "";
display: table;
-}
-.inline-list:after {
clear: both;
}
.inline-list li {
diff --git a/test/fixtures/typography/shadow-stroke.css b/test/fixtures/typography/shadow-stroke.css
new file mode 100644
index 0000000..c34a6b1
--- /dev/null
+++ b/test/fixtures/typography/shadow-stroke.css
@@ -0,0 +1,4 @@
+.shadow-stroke {
+ color: #fff;
+ text-shadow: -1px -1px 0 #9cf, 1px -1px 0 #9cf, -1px 1px 0 #9cf, 1px 1px 0 #9cf;
+}
diff --git a/test/fixtures/typography/shadow-stroke.styl b/test/fixtures/typography/shadow-stroke.styl
new file mode 100644
index 0000000..33c2617
--- /dev/null
+++ b/test/fixtures/typography/shadow-stroke.styl
@@ -0,0 +1,3 @@
+.shadow-stroke
+ color: white
+ shadow-stroke(#99ccff)
diff --git a/test/fixtures/ui/breadcrumb.css b/test/fixtures/ui/breadcrumb.css
index 3a6d329..9c2a72b 100644
--- a/test/fixtures/ui/breadcrumb.css
+++ b/test/fixtures/ui/breadcrumb.css
@@ -2,12 +2,9 @@
margin: 0;
padding: 0;
}
-.breadcrumb:before,
.breadcrumb:after {
content: "";
display: table;
-}
-.breadcrumb:after {
clear: both;
}
.breadcrumb li {
diff --git a/test/fixtures/ui/bubble.css b/test/fixtures/ui/bubble.css
index 0583391..658469c 100644
--- a/test/fixtures/ui/bubble.css
+++ b/test/fixtures/ui/bubble.css
@@ -1,22 +1,16 @@
.bubble {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble:before,
.bubble:after {
content: "";
display: table;
-}
-.bubble:after {
clear: both;
}
.bubble:before {
@@ -47,23 +41,17 @@
}
.bubble-tl {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-tl:before,
.bubble-tl:after {
content: "";
display: table;
-}
-.bubble-tl:after {
clear: both;
}
.bubble-tl:before {
@@ -94,23 +82,17 @@
}
.bubble-tr {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-tr:before,
.bubble-tr:after {
content: "";
display: table;
-}
-.bubble-tr:after {
clear: both;
}
.bubble-tr:before {
@@ -141,23 +123,17 @@
}
.bubble-tc {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-tc:before,
.bubble-tc:after {
content: "";
display: table;
-}
-.bubble-tc:after {
clear: both;
}
.bubble-tc:before {
@@ -188,23 +164,17 @@
}
.bubble-bl {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-bl:before,
.bubble-bl:after {
content: "";
display: table;
-}
-.bubble-bl:after {
clear: both;
}
.bubble-bl:before {
@@ -235,23 +205,17 @@
}
.bubble-br {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-br:before,
.bubble-br:after {
content: "";
display: table;
-}
-.bubble-br:after {
clear: both;
}
.bubble-br:before {
@@ -282,23 +246,17 @@
}
.bubble-bc {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-bc:before,
.bubble-bc:after {
content: "";
display: table;
-}
-.bubble-bc:after {
clear: both;
}
.bubble-bc:before {
@@ -329,23 +287,17 @@
}
.bubble-lt {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-lt:before,
.bubble-lt:after {
content: "";
display: table;
-}
-.bubble-lt:after {
clear: both;
}
.bubble-lt:before {
@@ -376,23 +328,17 @@
}
.bubble-lb {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-lb:before,
.bubble-lb:after {
content: "";
display: table;
-}
-.bubble-lb:after {
clear: both;
}
.bubble-lb:before {
@@ -423,23 +369,17 @@
}
.bubble-lc {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-lc:before,
.bubble-lc:after {
content: "";
display: table;
-}
-.bubble-lc:after {
clear: both;
}
.bubble-lc:before {
@@ -470,23 +410,17 @@
}
.bubble-rt {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-rt:before,
.bubble-rt:after {
content: "";
display: table;
-}
-.bubble-rt:after {
clear: both;
}
.bubble-rt:before {
@@ -517,23 +451,17 @@
}
.bubble-rb {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-rb:before,
.bubble-rb:after {
content: "";
display: table;
-}
-.bubble-rb:after {
clear: both;
}
.bubble-rb:before {
@@ -564,23 +492,17 @@
}
.bubble-rc {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.bubble-rc:before,
.bubble-rc:after {
content: "";
display: table;
-}
-.bubble-rc:after {
clear: both;
}
.bubble-rc:before {
diff --git a/test/fixtures/ui/flash.css b/test/fixtures/ui/flash.css
index ccca0de..59ea9d7 100644
--- a/test/fixtures/ui/flash.css
+++ b/test/fixtures/ui/flash.css
@@ -1,10 +1,7 @@
.flash-notice {
background: #70c7fa;
- background: #62c1fa -webkit-linear-gradient(top, #70c7fa, #62c1fa) repeat-x;
- background: #62c1fa -moz-linear-gradient(top, #70c7fa, #62c1fa) repeat-x;
- background: #62c1fa -o-linear-gradient(top, #70c7fa, #62c1fa) repeat-x;
- background: #62c1fa -ms-linear-gradient(top, #70c7fa, #62c1fa) repeat-x;
- background: #62c1fa linear-gradient(to bottom, #70c7fa, #62c1fa) repeat-x;
+ background: #62c1fa -webkit-linear-gradient(270deg, #70c7fa, #62c1fa) repeat-x;
+ background: #62c1fa linear-gradient(180deg, #70c7fa, #62c1fa) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #49b7f9;
@@ -14,21 +11,15 @@
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
-.flash-notice:before,
.flash-notice:after {
content: "";
display: table;
-}
-.flash-notice:after {
clear: both;
}
.flash-warning {
background: #fae77b;
- background: #fae46c -webkit-linear-gradient(top, #fae77b, #fae46c) repeat-x;
- background: #fae46c -moz-linear-gradient(top, #fae77b, #fae46c) repeat-x;
- background: #fae46c -o-linear-gradient(top, #fae77b, #fae46c) repeat-x;
- background: #fae46c -ms-linear-gradient(top, #fae77b, #fae46c) repeat-x;
- background: #fae46c linear-gradient(to bottom, #fae77b, #fae46c) repeat-x;
+ background: #fae46c -webkit-linear-gradient(270deg, #fae77b, #fae46c) repeat-x;
+ background: #fae46c linear-gradient(180deg, #fae77b, #fae46c) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #f9df53;
@@ -37,21 +28,15 @@
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255,255,255,0.2);
}
-.flash-warning:before,
.flash-warning:after {
content: "";
display: table;
-}
-.flash-warning:after {
clear: both;
}
.flash-error {
background: #e88074;
- background: #e67467 -webkit-linear-gradient(top, #e88074, #e67467) repeat-x;
- background: #e67467 -moz-linear-gradient(top, #e88074, #e67467) repeat-x;
- background: #e67467 -o-linear-gradient(top, #e88074, #e67467) repeat-x;
- background: #e67467 -ms-linear-gradient(top, #e88074, #e67467) repeat-x;
- background: #e67467 linear-gradient(to bottom, #e88074, #e67467) repeat-x;
+ background: #e67467 -webkit-linear-gradient(270deg, #e88074, #e67467) repeat-x;
+ background: #e67467 linear-gradient(180deg, #e88074, #e67467) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #e26153;
@@ -61,21 +46,15 @@
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
-.flash-error:before,
.flash-error:after {
content: "";
display: table;
-}
-.flash-error:after {
clear: both;
}
.flash-success {
background: #7fdfa6;
- background: #73dc9d -webkit-linear-gradient(top, #7fdfa6, #73dc9d) repeat-x;
- background: #73dc9d -moz-linear-gradient(top, #7fdfa6, #73dc9d) repeat-x;
- background: #73dc9d -o-linear-gradient(top, #7fdfa6, #73dc9d) repeat-x;
- background: #73dc9d -ms-linear-gradient(top, #7fdfa6, #73dc9d) repeat-x;
- background: #73dc9d linear-gradient(to bottom, #7fdfa6, #73dc9d) repeat-x;
+ background: #73dc9d -webkit-linear-gradient(270deg, #7fdfa6, #73dc9d) repeat-x;
+ background: #73dc9d linear-gradient(180deg, #7fdfa6, #73dc9d) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #5fd790;
@@ -85,11 +64,8 @@
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
-.flash-success:before,
.flash-success:after {
content: "";
display: table;
-}
-.flash-success:after {
clear: both;
}
diff --git a/test/fixtures/ui/navigation.css b/test/fixtures/ui/navigation.css
index 66b4a67..5755449 100644
--- a/test/fixtures/ui/navigation.css
+++ b/test/fixtures/ui/navigation.css
@@ -2,11 +2,8 @@
display: block;
z-index: 10;
background: #2d2d2d;
- background: #202020 -webkit-linear-gradient(top, #2d2d2d, #202020) repeat-x;
- background: #202020 -moz-linear-gradient(top, #2d2d2d, #202020) repeat-x;
- background: #202020 -o-linear-gradient(top, #2d2d2d, #202020) repeat-x;
- background: #202020 -ms-linear-gradient(top, #2d2d2d, #202020) repeat-x;
- background: #202020 linear-gradient(to bottom, #2d2d2d, #202020) repeat-x;
+ background: #202020 -webkit-linear-gradient(270deg, #2d2d2d, #202020) repeat-x;
+ background: #202020 linear-gradient(180deg, #2d2d2d, #202020) repeat-x;
box-shadow: 0 3px 3px rgba(0,0,0,0.15);
border-bottom: 1px solid rgba(29,29,29,0.7);
height: 42.99px;
@@ -14,12 +11,9 @@
font-size: 15px;
position: relative;
}
-.navigation:before,
.navigation:after {
content: "";
display: table;
-}
-.navigation:after {
clear: both;
}
.navigation h1 {
diff --git a/test/fixtures/ui/notice.css b/test/fixtures/ui/notice.css
index 25f26d7..3f5af07 100644
--- a/test/fixtures/ui/notice.css
+++ b/test/fixtures/ui/notice.css
@@ -1,21 +1,15 @@
.notice {
background: #efefef;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef, #e7e7e7) repeat-x;
- background: #e7e7e7 linear-gradient(to bottom, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 -webkit-linear-gradient(270deg, #efefef, #e7e7e7) repeat-x;
+ background: #e7e7e7 linear-gradient(180deg, #efefef, #e7e7e7) repeat-x;
border-radius: 5px;
padding: 10px;
border: 1px solid #d6d6d6;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
position: relative;
}
-.notice:before,
.notice:after {
content: "";
display: table;
-}
-.notice:after {
clear: both;
}
diff --git a/test/fixtures/ui/radio.css b/test/fixtures/ui/radio.css
index 60e0513..927ab13 100644
--- a/test/fixtures/ui/radio.css
+++ b/test/fixtures/ui/radio.css
@@ -26,10 +26,7 @@
height: 1em;
margin-right: 0.75em;
-webkit-transition: 0.5s ease all;
- -moz-transition: 0.5s ease all;
- -o-transition: 0.5s ease all;
- -ms-transition: 0.5s ease all;
- transition: 0.5s ease all;
+ transition: 0.5s ease all;
vertical-align: -0.33em;
width: 1em;
}
diff --git a/test/fixtures/ui/range.css b/test/fixtures/ui/range.css
index e1c99ba..52f4e25 100644
--- a/test/fixtures/ui/range.css
+++ b/test/fixtures/ui/range.css
@@ -21,17 +21,11 @@
background: #0074d9;
margin-top: calc(-2em / 2 + 0.5em / 2);
-webkit-transition: all 0.2s ease;
- -moz-transition: all 0.2s ease;
- -o-transition: all 0.2s ease;
- -ms-transition: all 0.2s ease;
- transition: all 0.2s ease;
+ transition: all 0.2s ease;
}
.range::-webkit-slider-thumb:hover {
-webkit-transform: scale(1.2);
- -moz-transform: scale(1.2);
- -o-transform: scale(1.2);
- -ms-transform: scale(1.2);
- transform: scale(1.2);
+ transform: scale(1.2);
cursor: pointer;
}
.range::-webkit-slider-thumb:active {
@@ -56,17 +50,9 @@
width: 2em;
border-radius: 50%;
background: #0074d9;
- -webkit-transition: all 0.2s ease;
- -moz-transition: all 0.2s ease;
- -o-transition: all 0.2s ease;
- -ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.range::-moz-range-thumb:hover {
- -webkit-transform: scale(1.2);
- -moz-transform: scale(1.2);
- -o-transform: scale(1.2);
- -ms-transform: scale(1.2);
transform: scale(1.2);
}
.range::-moz-range-thumb:active {
diff --git a/test/fixtures/utilities/border-box.css b/test/fixtures/utilities/border-box.css
new file mode 100644
index 0000000..85b26af
--- /dev/null
+++ b/test/fixtures/utilities/border-box.css
@@ -0,0 +1,3 @@
+.bb {
+ box-sizing: border-box;
+}
diff --git a/test/fixtures/vendor/border-box.styl b/test/fixtures/utilities/border-box.styl
similarity index 100%
rename from test/fixtures/vendor/border-box.styl
rename to test/fixtures/utilities/border-box.styl
diff --git a/test/fixtures/utilities/no-select.css b/test/fixtures/utilities/no-select.css
index bd24add..d97d5fe 100644
--- a/test/fixtures/utilities/no-select.css
+++ b/test/fixtures/utilities/no-select.css
@@ -1,7 +1,7 @@
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
diff --git a/test/fixtures/utilities/open-type-ligatures.css b/test/fixtures/utilities/open-type-ligatures.css
new file mode 100644
index 0000000..cbe5e92
--- /dev/null
+++ b/test/fixtures/utilities/open-type-ligatures.css
@@ -0,0 +1,5 @@
+.open-type-ligatures {
+ -webkit-font-feature-settings: "liga", "dlig";
+ -moz-font-feature-settings: "liga", "dlig";
+ font-feature-settings: "liga", "dlig";
+}
diff --git a/test/fixtures/utilities/open-type-ligatures.styl b/test/fixtures/utilities/open-type-ligatures.styl
new file mode 100644
index 0000000..2ba7c6c
--- /dev/null
+++ b/test/fixtures/utilities/open-type-ligatures.styl
@@ -0,0 +1,2 @@
+.open-type-ligatures
+ open-type-ligatures()
diff --git a/test/fixtures/utilities/rem-calculator.css b/test/fixtures/utilities/rem-calculator.css
index 97fa801..bb71d8c 100644
--- a/test/fixtures/utilities/rem-calculator.css
+++ b/test/fixtures/utilities/rem-calculator.css
@@ -1,3 +1,3 @@
-.rem-calculator{
+.rem-calculator {
font-size: 1.875rem;
}
diff --git a/test/fixtures/utilities/transition.css b/test/fixtures/utilities/transition.css
new file mode 100644
index 0000000..c636878
--- /dev/null
+++ b/test/fixtures/utilities/transition.css
@@ -0,0 +1,8 @@
+.transition {
+ -webkit-transition: all .3s ease;
+ transition: all .3s ease;
+}
+.trans-custom {
+ -webkit-transition: all 1s ease;
+ transition: all 1s ease;
+}
diff --git a/test/fixtures/vendor/transition.styl b/test/fixtures/utilities/transition.styl
similarity index 100%
rename from test/fixtures/vendor/transition.styl
rename to test/fixtures/utilities/transition.styl
diff --git a/test/fixtures/vendor/background-position.css b/test/fixtures/vendor/background-position.css
deleted file mode 100644
index 14c17a6..0000000
--- a/test/fixtures/vendor/background-position.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.background-pos {
- background-position: 10px 0;
- background-position: 0 5px;
-}
diff --git a/test/fixtures/vendor/background-position.styl b/test/fixtures/vendor/background-position.styl
deleted file mode 100644
index dbbc9b6..0000000
--- a/test/fixtures/vendor/background-position.styl
+++ /dev/null
@@ -1,3 +0,0 @@
-.background-pos
- background-position-x: 10px
- background-position-y: 5px
diff --git a/test/fixtures/vendor/border-box.css b/test/fixtures/vendor/border-box.css
deleted file mode 100644
index fdf3e74..0000000
--- a/test/fixtures/vendor/border-box.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.bb {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
diff --git a/test/fixtures/vendor/border-radius.css b/test/fixtures/vendor/border-radius.css
deleted file mode 100644
index 524fa2b..0000000
--- a/test/fixtures/vendor/border-radius.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.br {
- border-radius: 10px;
-}
diff --git a/test/fixtures/vendor/border-radius.styl b/test/fixtures/vendor/border-radius.styl
deleted file mode 100644
index db55586..0000000
--- a/test/fixtures/vendor/border-radius.styl
+++ /dev/null
@@ -1,2 +0,0 @@
-.br
- border-radius: 10px
diff --git a/test/fixtures/vendor/box-shadow.css b/test/fixtures/vendor/box-shadow.css
deleted file mode 100644
index 42a91f9..0000000
--- a/test/fixtures/vendor/box-shadow.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.bs {
- box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
-}
diff --git a/test/fixtures/vendor/box-shadow.styl b/test/fixtures/vendor/box-shadow.styl
deleted file mode 100644
index 365404c..0000000
--- a/test/fixtures/vendor/box-shadow.styl
+++ /dev/null
@@ -1,2 +0,0 @@
-.bs
- box-shadow: 2px 2px 10px rgba(#000,.5)
diff --git a/test/fixtures/vendor/opacity.css b/test/fixtures/vendor/opacity.css
deleted file mode 100644
index f5dbe68..0000000
--- a/test/fixtures/vendor/opacity.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.opacity {
- opacity: 0.5;
-}
-.opacity-ie {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
- opacity: 0.5;
-}
-.opacity {
- opacity: 0.5 !important;
-}
-.opacity-ie {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50 !important);
- opacity: 0.5 !important;
-}
diff --git a/test/fixtures/vendor/opacity.styl b/test/fixtures/vendor/opacity.styl
deleted file mode 100644
index ddb0153..0000000
--- a/test/fixtures/vendor/opacity.styl
+++ /dev/null
@@ -1,17 +0,0 @@
-.opacity
- opacity: .5
-
-support-for-ie = true
-.opacity-ie
- opacity: .5
-
-support-for-ie = false
-
-.opacity
- opacity: .5 !important
-
-support-for-ie = true
-.opacity-ie
- opacity: .5 !important
-
-support-for-ie = false
diff --git a/test/fixtures/vendor/transition.css b/test/fixtures/vendor/transition.css
deleted file mode 100644
index 042eca2..0000000
--- a/test/fixtures/vendor/transition.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.transition {
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
-}
-.trans-custom {
- -webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -o-transition: all 1s ease;
- -ms-transition: all 1s ease;
- transition: all 1s ease;
-}
diff --git a/test/helpers/index.js b/test/helpers/index.js
new file mode 100644
index 0000000..ab53692
--- /dev/null
+++ b/test/helpers/index.js
@@ -0,0 +1,38 @@
+var chai = require ('chai'),
+ path = require ('path'),
+ fs = require ('fs'),
+ accord = require ('accord'),
+ axis = require ('../..'),
+ autoprefixer = require ('autoprefixer-stylus'),
+ cssparse = require ('css-parse');
+
+var test_path = path.join(__dirname, '../fixtures');
+ should = chai.should();
+
+// utility functions
+
+var compile = function(p){
+ return accord.load('stylus').renderFile(p, { use: [axis(), autoprefixer()] });
+}
+
+var match_expected = function(out, p, done) {
+ try {
+ var expected_path = path.join(path.dirname(p), path.basename(p, '.styl')) + '.css';
+ if (!fs.existsSync(expected_path)) { throw '"expected" file doesnt exist' };
+ var expected_contents = fs.readFileSync(expected_path, 'utf8');
+ cssparse(out).should.eql(cssparse(expected_contents));
+ done();
+ } catch (err) {
+ return done(err)
+ }
+}
+
+var compile_and_match = function(p, done) {
+ compile(p).done(function(out) { match_expected(out.result, p, done) }, done)
+}
+
+// expose needed variables globally for tests
+
+global.test_path = test_path;
+global.axis = axis;
+global.compile_and_match = compile_and_match;
diff --git a/test/mocha.opts b/test/mocha.opts
index 2da4071..5c0f744 100644
--- a/test/mocha.opts
+++ b/test/mocha.opts
@@ -1,2 +1,3 @@
--reporter spec
--compilers coffee:coffee-script/register
+--require test/helpers/index
diff --git a/test/test.coffee b/test/test.coffee
index da02f88..c3d3203 100644
--- a/test/test.coffee
+++ b/test/test.coffee
@@ -1,37 +1,8 @@
-should = require 'should'
path = require 'path'
-fs = require 'fs'
-accord = require 'accord'
-axis = require '../'
-cssparse = require 'css-parse'
-
-# utilities
-
-test_path = path.join(__dirname, 'fixtures')
-
-compile = (p) ->
- accord.load('stylus').renderFile(p, { use: axis() })
-
-match_expected = (out, p, done) ->
- try
- expected_path = path.join(path.dirname(p), path.basename(p, '.styl')) + '.css'
- if not fs.existsSync(expected_path) then throw '"expected" file doesnt exist'
- expected_contents = fs.readFileSync(expected_path, 'utf8')
- cssparse(out).should.eql(cssparse(expected_contents))
- catch err
- return done(err)
- done()
-
-compile_and_match = (p, done) ->
- compile(p)
- .done(((out) => match_expected(out.result, p, done)), done)
-
-# tests
describe 'api', ->
- before ->
- @pkg = require('../package.json')
+ before -> @pkg = require('../package.json')
it 'exposes the library path', ->
axis.path.should.match(/axis/)
@@ -173,9 +144,6 @@ describe 'layout', ->
it 'group', (done) ->
compile_and_match(path.join(@path, 'group.styl'), done)
- it 'inline-block', (done) ->
- compile_and_match(path.join(@path, 'inline-block.styl'), done)
-
it 'media', (done) ->
compile_and_match(path.join(@path, 'media.styl'), done)
@@ -258,6 +226,12 @@ describe 'typography', ->
it 'hyphenation', (done) ->
compile_and_match(path.join(@path, 'hyphenation.styl'), done)
+ it 'shadow-stroke', (done) ->
+ compile_and_match(path.join(@path, 'shadow-stroke.styl'), done)
+
+ it 'ellipsis', (done) ->
+ compile_and_match(path.join(@path, 'ellipsis.styl'), done)
+
describe 'ui', ->
before -> @path = path.join(test_path, 'ui')
@@ -293,20 +267,20 @@ describe 'utilities', ->
before -> @path = path.join(test_path, 'utilities')
+ it 'no-select', (done) ->
+ compile_and_match(path.join(@path, 'no-select.styl'), done)
+
it 'b', (done) ->
compile_and_match(path.join(@path, 'b.styl'), done)
- it 'debug', (done) ->
- compile_and_match(path.join(@path, 'debug.styl'), done)
-
- it 'quantity-queries', (done) ->
- compile_and_match(path.join(@path, 'quantity-queries.styl'), done)
+ it 'transition', (done) ->
+ compile_and_match(path.join(@path, 'transition.styl'), done)
- it 'no-select', (done) ->
- compile_and_match(path.join(@path, 'no-select.styl'), done)
+ it 'border-box', (done) ->
+ compile_and_match(path.join(@path, 'border-box.styl'), done)
- it 'rem-calculator', (done) ->
- compile_and_match(path.join(@path, 'rem-calculator.styl'), done)
+ it 'open-type-ligatures', (done) ->
+ compile_and_match(path.join(@path, 'open-type-ligatures.styl'), done)
it 'rounded', (done) ->
compile_and_match(path.join(@path, 'rounded.styl'), done)
@@ -314,28 +288,14 @@ describe 'utilities', ->
it 'triangle', (done) ->
compile_and_match(path.join(@path, 'triangle.styl'), done)
+ it 'debug', (done) ->
+ compile_and_match(path.join(@path, 'debug.styl'), done)
-describe 'vendor', ->
-
- before -> @path = path.join(test_path, 'vendor')
-
- it 'background-position', (done) ->
- compile_and_match(path.join(@path, 'background-position.styl'), done)
-
- it 'border-box', (done) ->
- compile_and_match(path.join(@path, 'border-box.styl'), done)
-
- it 'border-radius', (done) ->
- compile_and_match(path.join(@path, 'border-radius.styl'), done)
-
- it 'box-shadow', (done) ->
- compile_and_match(path.join(@path, 'box-shadow.styl'), done)
-
- it 'opacity', (done) ->
- compile_and_match(path.join(@path, 'opacity.styl'), done)
+ it 'quantity-queries', (done) ->
+ compile_and_match(path.join(@path, 'quantity-queries.styl'), done)
- it 'transition', (done) ->
- compile_and_match(path.join(@path, 'transition.styl'), done)
+ it 'rem-calculator', (done) ->
+ compile_and_match(path.join(@path, 'rem-calculator.styl'), done)
describe 'additive', ->
diff --git a/test/visual.html b/test/visual.html
index 89c141c..47d3dfb 100644
--- a/test/visual.html
+++ b/test/visual.html
@@ -51,7 +51,6 @@
-
@@ -76,6 +75,9 @@
+
+
+
@@ -137,6 +139,9 @@
width: 400px;
height: 50px;
}
+ .narrow {
+ width: 30%;
+ }
@@ -235,7 +240,7 @@ interaction
click me
click me
- click me
+ click me
click me
@@ -254,10 +259,6 @@ layout
foo
- inline block
-
- inline block 2
-
