Repository: visionmedia/nib
Branch: main
Commit: 5e2651e8c0f1
Files: 94
Total size: 121.9 KB
Directory structure:
gitextract_t6ep1eh2/
├── .editorconfig
├── .github/
│ └── workflows/
│ └── ci.yml
├── .gitignore
├── .mocharc.json
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── docs/
│ └── README.md
├── iconic/
│ ├── demo.html
│ └── iconic_stroke.otf
├── index.styl
├── lib/
│ ├── nib/
│ │ ├── border-radius.styl
│ │ ├── border.styl
│ │ ├── clearfix.styl
│ │ ├── color-image.styl
│ │ ├── config.styl
│ │ ├── flex.styl
│ │ ├── gradients.styl
│ │ ├── iconic.styl
│ │ ├── image.styl
│ │ ├── index.styl
│ │ ├── normalize/
│ │ │ ├── base.styl
│ │ │ ├── embed.styl
│ │ │ ├── forms.styl
│ │ │ ├── groups.styl
│ │ │ ├── html5.styl
│ │ │ ├── index.styl
│ │ │ ├── links.styl
│ │ │ ├── tables.styl
│ │ │ └── text.styl
│ │ ├── overflow.styl
│ │ ├── positions.styl
│ │ ├── reset.styl
│ │ ├── size.styl
│ │ ├── text/
│ │ │ ├── aliases.styl
│ │ │ ├── ellipsis.styl
│ │ │ ├── hide-text.styl
│ │ │ ├── index.styl
│ │ │ ├── replace-text.styl
│ │ │ └── shadow-stroke.styl
│ │ └── vendor.styl
│ ├── nib.js
│ └── nodes/
│ ├── color-image.js
│ ├── gradient.js
│ └── vendor-helpers.js
├── package.json
└── test/
├── cases/
│ ├── absolute.css
│ ├── absolute.styl
│ ├── border-radius.css
│ ├── border-radius.styl
│ ├── border.css
│ ├── border.styl
│ ├── clearfix.css
│ ├── clearfix.styl
│ ├── fixed.css
│ ├── fixed.styl
│ ├── flex.css
│ ├── flex.styl
│ ├── image.css
│ ├── image.styl
│ ├── importance.css
│ ├── importance.styl
│ ├── linear-gradient.css
│ ├── linear-gradient.styl
│ ├── multiple-gradients.css
│ ├── multiple-gradients.styl
│ ├── normalize-reset.css
│ ├── normalize-reset.styl
│ ├── radial-gradient.css
│ ├── radial-gradient.styl
│ ├── relative.css
│ ├── shadow-stroke.css
│ ├── shadow-stroke.styl
│ ├── text.ellipsis.css
│ ├── text.ellipsis.styl
│ ├── vendor.css
│ ├── vendor.inherit.css
│ ├── vendor.inherit.styl
│ ├── vendor.initial.css
│ ├── vendor.initial.styl
│ ├── vendor.placeholder.css
│ ├── vendor.placeholder.styl
│ ├── vendor.styl
│ ├── vendor.values.css
│ └── vendor.values.styl
├── clearfix.styl
├── color-images.styl
├── gradients.styl
├── index.pug
├── public/
│ └── .gitignore
├── runner.js
├── server.js
└── test.styl
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
root = true
[*]
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2
================================================
FILE: .github/workflows/ci.yml
================================================
# Github actions workflow name
name: CI
# Triggers the workflow on push or pull request events
on:
push:
branches: [main, master]
tags: ['**']
pull_request:
branches:
- main
jobs:
node_tests:
name: 'Test nib on ${{matrix.os}} with node${{matrix.node}}'
strategy:
matrix:
os: [ubuntu-latest]
# Latest four Nodejs LTS version
node: [12, 14, 16, 18]
runs-on: ${{ matrix.os }}
steps:
# Pull repo to test machine
- uses: actions/checkout@v2
# Configures the node version used on GitHub-hosted runners
- uses: actions/setup-node@v2
with:
# The Node.js version to configure
node-version: ${{ matrix.node }}
# Caching dependencies to speed up workflows
- name: Get npm cache directory
id: npm-cache-dir
run: |
echo "::set-output name=dir::$(npm config get cache)"
- uses: actions/cache@v2
id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
with:
path: ${{ steps.npm-cache-dir.outputs.dir }}
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Install npm dependencies
run: npm install
- name: Print put node & npm version
# Output useful info for debugging.
run: node --version && npm --version
- name: Run Test
run: npm test
================================================
FILE: .gitignore
================================================
.idea
*.css
!test/cases/*.css
.DS_Store
node_modules
*.swp
================================================
FILE: .mocharc.json
================================================
{
"require": "chai",
"reporter": "spec",
"diff": true,
"color": true,
"exit": true,
"extension": [".js"],
"file": ["test/runner.js"]
}
================================================
FILE: .npmignore
================================================
node_modules
test
.github
CHANGELOG.md
.mocharc.json
.editorconfig
.npmignore
.gitignore
================================================
FILE: CHANGELOG.md
================================================
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
## 1.2.0 - 2022-05-17
- chore: use github actions as test infra [#350](https://github.com/stylus/nib/pull/350) [@iChenLei](https://github.com/iChenLei)
- feat: make stylus as peerDependencies [#350](https://github.com/stylus/nib/pull/350) [@iChenLei](https://github.com/iChenLei)
- feat: use official column-fill property [#344](https://github.com/stylus/nib/pull/344) [@Sija](https://github.com/stylus/nib/pull/344)
- fix: remove vendor prefix for background-size [#338](https://github.com/stylus/nib/pull/338) [@specious](https://github.com/stylus/nib/pull/338)
- fix: mute nodejs v14+ warnings [#348](https://github.com/stylus/nib/pull/348) [@AlynxZhou](https://github.com/AlynxZhou)
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2022 iChenLei <chenleicoder@foxmail.com>
Copyright (c) 2014 TJ Holowaychuk <tj@vision-media.ca>
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.
================================================
FILE: README.md
================================================
# Nib [](https://www.npmjs.com/package/nib) [](https://www.npmjs.com/package/nib) [](https://github.com/stylus/nib/actions?query=branch%3Amain)
Stylus mixins, utilities, components, and gradient image generation. Don't forget to check out the [documentation](http://stylus.github.io/nib).
## Installation
```bash
$ npm install nib
```
If the image generation features of Nib are desired, such as generating the linear gradient images, install [node-canvas](http://github.com/learnboost/node-canvas):
```bash
$ npm install canvas
```
## JavaScript API
Below is an example of how to utilize nib and stylus with the connect framework (or express).
```javascript
var connect = require('connect')
, stylus = require('stylus')
, nib = require('nib');
var server = connect();
function compile(str, path) {
return stylus(str)
.set('filename', path)
.set('compress', true)
.use(nib());
}
server.use(stylus.middleware({
src: __dirname
, compile: compile
}));
```
## Stylus API
To gain access to everything nib has to offer, simply add:
```css
@import 'nib'
```
Or you may also pick and choose based on the directory structure in `./lib`, for example:
```css
@import 'nib/gradients'
@import 'nib/overflow'
@import 'nib/normalize'
```
_To be continued..._
## More Information
- Introduction [screencast](http://www.screenr.com/M6a)
## Testing
You will first need to install the dependencies:
```bash
$ npm install -d
```
Run the automated test cases:
```bash
$ npm test
```
For visual testing run the test server:
```bash
$ npm run-script test-server
```
Then visit `localhost:3000` in your browser.
## Contributors
I would love more contributors. And if you have helped out, you are awesome! I want to give a huge thanks to these people:
- [TJ Holowaychuk](https://github.com/tj) (Original Creator)
- [Sean Lang](https://github.com/notslang) (Previous Maintainer)
- [iChenLei](https://github.com/iChenLei) (Current Maintainer)
- [Isaac Johnston](https://github.com/superstructor)
- [Everyone Else](https://github.com/tj/nib/contributors)
================================================
FILE: docs/README.md
================================================
# Mixins
## Gradient
Nib's gradient support is by far the largest feature it provides. Not only is the syntax extremely similar to what you would normally write, it's more forgiving, expands to vendor equivalents, and can even produce a PNG for older browsers with [node-canvas](http://github.com/learnboost/node-canvas).
```stylus
body
background linear-gradient(top, white, black)
```
```css
body {
background: -webkit-linear-gradient(top, #fff, #000);
background: -moz-linear-gradient(top, #fff, #000);
background: -o-linear-gradient(top, #fff, #000);
background: -ms-linear-gradient(top, #fff, #000);
background: linear-gradient(to bottom, #fff, #000);
}
```
Any number of color stops may be provided:
```stylus
body
background linear-gradient(bottom left, white, red, blue, black)
```
Units may be placed before or after the color:
```stylus
body
background linear-gradient(left, 80% red, #000)
background linear-gradient(top, #eee, 90% white, 10% black)
```
## Position
The position mixins `absolute`, `fixed`, and `relative` provide a shorthand variant to what is otherwise three CSS properties. The syntax is as follows:
```
fixed|absolute|relative: top|bottom [n] left|right [n]
```
The following example will default to (0,0):
```stylus
#back-to-top
fixed bottom right
```
```css
#back-to-top {
position: fixed;
bottom: 0;
right: 0;
}
```
You may also specify the units:
```stylus
#back-to-top
fixed bottom 10px right 5px
```
```css
#back-to-top {
position: fixed;
bottom: 10px;
right: 5px;
}
```
## Clearfix
Clearfixing causes containers to expand to contain floated contents. A simple example is shown [here](http://learnlayout.com/clearfix.html).
The clearfix mixin takes no arguments and expands to a form that provides extremely robust browser support.
```stylus
.clearfix
clearfix()
```
```css
.clearfix {
zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
```
## Border Radius
Nib's `border-radius` supports both the regular syntax as well as augmenting it to make the value more expressive.
```stylus
button
border-radius 1px 2px / 3px 4px
button
border-radius 5px
button
border-radius bottom 10px
```
```css
button {
border-radius: 1px 2px/3px 4px;
}
button {
border-radius: 5px;
}
button {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
```
## Responsive Images
The `image` mixin allows you to define a `background-image` for both the normal image, and a doubled image for devices with a higher pixel ratio such as retina displays. This works by using a @media query to serve an "@2x" version of the file.
```stylus
#logo
image '/images/branding/logo.main.png'
#logo
image '/images/branding/logo.main.png' 50px 100px
```
```css
#logo {
background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url("/images/branding/logo.main@2x.png");
background-size: auto auto;
}
}
#logo {
background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url("/images/branding/logo.main@2x.png");
background-size: 50px 100px;
}
}
```
## Ellipsis
The `overflow` property is augmented with a "ellipsis" value, expanding to what you see below.
```stylus
button
overflow ellipsis
```
```css
button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
## Reset
Nib comes bundled with [Eric Meyer's style reset](eric-meyer) and [Nicolas Gallagher's _Normalize_](normalize) support and, you can choose to apply the global or any specifics that you wish. To view the definitions view [`reset.styl`](https://github.com/tj/nib/blob/master/lib/nib/reset.styl).
[eric-meyer]: http://meyerweb.com/eric/tools/css/reset/
[normalize]: https://github.com/necolas/normalize.css
> CSS Reset
- `global-reset()`
- `nested-reset()`
- `reset-font()`
- `reset-box-model()`
- `reset-body()`
- `reset-table()`
- `reset-table-cell()`
- `reset-html5()`
> Normalize
- `normalize-html5()`
- `normalize-base()`
- `normalize-links()`
- `normalize-text()`
- `normalize-embed()`
- `normalize-groups()`
- `normalize-forms()`
- `normalize-tables()`
- `normalize-css()`
[Read more][normalize-about] about Normalize or see the original CSS [here][normalize-css].
[normalize-about]: http://nicolasgallagher.com/about-normalize-css/
[normalize-css]: https://github.com/necolas/normalize.css/blob/master/normalize.css
## Border
This shorthand lets you create a border by just specifying a color, with defaults for width and style.
```stylus
.foo
border red
```
```css
.foo {
border: 1px solid red;
}
```
## Shadow Stroke
Creates a text outline using text-shadow.
```stylus
.foo
shadow-stroke(red)
```
```css
.foo {
text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
}
```
## Size
This shorthand lets you set width and height in one go.
```stylus
.foo
size 5em 10em
```
```css
.foo {
width: 5em;
height: 10em;
}
```
## Transparent Mixins
These mixins expand vendor prefixes but do not modify the behavior of the property.
For example:
```stylus
*
box-sizing border-box
```
```css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
```
Here is the full list of properties for which Nib provides transparent mixins:
- box-shadow
- radial-gradient
- user-select
- column-count
- column-gap
- column-rule
- column-rule-color
- column-rule-width
- column-rule-style
- column-width
- transform
- border-image
- transition
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- backface-visibility
- opacity
- box-sizing
- box-orient
- box-flex
- box-flex-group
- box-align
- box-pack
- box-direction
- animation
- animation-name
- animation-duration
- animation-delay
- animation-direction
- animation-iteration-count
- animation-timing-function
- animation-play-state
- animation-fill-mode
- hyphens
- appearance
# Aliases
These aliases are provided purely for convenience.
official | aliases
----------- | ----------
nowrap | no-wrap
white-space | whitespace
================================================
FILE: iconic/demo.html
================================================
<html>
<head>
<link rel="stylesheet" href="iconic.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style>
body {
font-size:21px;
}
</style>
</head>
<body>
<ul>
<li><a name='home' class='iconic home'></a> Home</li>
<li><a name='at' class='iconic at'></a> At Symbol</li>
<li><a name='quote' class='iconic quote'></a> Quote</li>
<li><a name='quote-alt' class='iconic quote-alt'></a> Quote (alternate)</li>
<li><a name='arrow-up' class='iconic arrow-up'></a> Arrow Up</li>
<li><a name='arrow-right' class='iconic arrow-right'></a> Arrow Right</li>
<li><a name='arrow-bottom' class='iconic arrow-bottom'></a> Arrow Bottom</li>
<li><a name='arrow-left' class='iconic arrow-left'></a> Arrow Left</li>
<li><a name='arrow-up-alt' class='iconic arrow-up-alt'></a> Arrow Up (alternate)</li>
<li><a name='arrow-right-alt' class='iconic arrow-right-alt'></a> Arrow Right (alternate)</li>
<li><a name='arrow-bottom-alt' class='iconic arrow-bottom-alt'></a> Arrow Bottom (alternate)</li>
<li><a name='arrow-left-alt' class='iconic arrow-left-alt'></a> Arrow Left (alternate)</li>
<li><a name='move' class='iconic move'></a> Move</li>
<li><a name='move-vertical' class='iconic move-vertical'></a> Move Vertical</li>
<li><a name='move-horizontal' class='iconic move-horizontal'></a> Move Horizontal</li>
<li><a name='move-alt' class='iconic move-alt'></a> Move (alternate)</li>
<li><a name='move-vertical-alt' class='iconic move-vertical-alt'></a> Move Vertical (alternate)</li>
<li><a name='move-horizontal-alt' class='iconic move-horizontal-alt'></a> Move Horizontal (alternate)</li>
<li><a name='cursor' class='iconic cursor'></a> Cursor</li>
<li><a name='plus' class='iconic plus'></a> Plus</li>
<li><a name='plus-alt' class='iconic plus-alt'></a> Plus (alternate)</li>
<li><a name='minus' class='iconic minus'></a> Minus</li>
<li><a name='minus-alt' class='iconic minus-alt'></a> Minus (alternate)</li>
<li><a name='new-window' class='iconic new-window'></a> New Window</li>
<li><a name='dial' class='iconic dial'></a> Dial</li>
<li><a name='lightbulb' class='iconic lightbulb'></a> Lightbulb</li>
<li><a name='link' class='iconic link'></a> Link</li>
<li><a name='image' class='iconic image'></a> Image</li>
<li><a name='article' class='iconic article'></a> Article</li>
<li><a name='read-more' class='iconic read-more'></a> Read More</li>
<li><a name='headphones' class='iconic headphones'></a> Headphones</li>
<li><a name='equalizer' class='iconic equalizer'></a> Equalizer</li>
<li><a name='fullscreen' class='iconic fullscreen'></a> Fullscreen</li>
<li><a name='exit-fullscreen' class='iconic exit-fullscreen'></a> Exit Fullscreen</li>
<li><a name='spin' class='iconic spin'></a> Spin</li>
<li><a name='spin-alt' class='iconic spin-alt'></a> Spin (alternate)</li>
<li><a name='moon' class='iconic moon'></a> Moon</li>
<li><a name='sun' class='iconic sun'></a> Sun</li>
<li><a name='map-pin' class='iconic map-pin'></a> Map Pin</li>
<li><a name='pin' class='iconic pin'></a> Pin</li>
<li><a name='eyedropper' class='iconic eyedropper'></a> Eyedropper</li>
<li><a name='denied' class='iconic denied'></a> Denied</li>
<li><a name='calendar' class='iconic calendar'></a> Calendar</li>
<li><a name='calendar-alt' class='iconic calendar-alt'></a> Calendar (alternate)</li>
<li><a name='bolt' class='iconic bolt'></a> Bolt</li>
<li><a name='clock' class='iconic clock'></a> Clock</li>
<li><a name='document' class='iconic document'></a> Document</li>
<li><a name='book' class='iconic book'></a> Book</li>
<li><a name='book-alt' class='iconic book-alt'></a> Book (alternate)</li>
<li><a name='magnifying-glass' class='iconic magnifying-glass'></a> Magnifying Glass</li>
<li><a name='tag' class='iconic tag'></a> Tag</li>
<li><a name='heart' class='iconic heart'></a> Heart</li>
<li><a name='info' class='iconic info'></a> Info</li>
<li><a name='chat' class='iconic chat'></a> Chat</li>
<li><a name='chat-alt' class='iconic chat-alt'></a> Chat (alternate)</li>
<li><a name='key' class='iconic key'></a> Key</li>
<li><a name='unlocked' class='iconic unlocked'></a> Unlocked</li>
<li><a name='locked' class='iconic locked'></a> Locked</li>
<li><a name='mail' class='iconic mail'></a> Mail</li>
<li><a name='mail' class='iconic mail-alt'></a> Mail (alternate)</li>
<li><a name='phone' class='iconic phone'></a> Phone</li>
<li><a name='box' class='iconic box'></a> Box</li>
<li><a name='pencil' class='iconic pencil'></a> Pencil</li>
<li><a name='pencil-alt' class='iconic pencil-alt'></a> Pencil (alternate)</li>
<li><a name='comment' class='iconic comment'></a> Comment</li>
<li><a name='comment' class='iconic comment-alt'></a> Comment (alternate)</li>
<li><a name='rss' class='iconic rss'></a> RSS</li>
<li><a name='star' class='iconic star'></a> Star</li>
<li><a name='trash' class='iconic trash'></a> Trash</li>
<li><a name='user' class='iconic user'></a> User</li>
<li><a name='volume' class='iconic volume'></a> Volume</li>
<li><a name='mute' class='iconic mute'></a> Mute</li>
<li><a name='cog' class='iconic cog'></a> Cog</li>
<li><a name='cog-alt' class='iconic cog-alt'></a> Cog (alternate)</li>
<li><a name='x' class='iconic x'></a> X</li>
<li><a name='x' class='iconic x-alt'></a> X (alternate)</li>
<li><a name='check' class='iconic check'></a> Check</li>
<li><a name='check-alt' class='iconic check-alt'></a> Check (alternate)</li>
<li><a name='beaker' class='iconic beaker'></a> Beaker</li>
<li><a name='beaker-alt' class='iconic beaker-alt'></a> Beaker (alternate)</li>
</ul>
</body>
</html>
================================================
FILE: index.styl
================================================
@import 'lib/nib/'
================================================
FILE: lib/nib/border-radius.styl
================================================
/*
* Helper for border-radius().
*/
-apply-border-radius(pos, importance)
if length(pos) == 3
// border-radius: <top | bottom> <left | right> <n>
y = pos[0]
x = pos[1]
// We don't use vendor for boder-radius anymore
// vendor('border-radius-%s%s' % pos, pos[2], only: webkit official)
{'border-%s-%s-radius' % pos}: pos[2] importance
else if pos[0] in (top bottom)
// border-radius: <top | bottom> <n>
-apply-border-radius(pos[0] left pos[1], importance)
-apply-border-radius(pos[0] right pos[1], importance)
else if pos[0] in (left right)
// border-radius: <left | right> <n>
unshift(pos, top);
-apply-border-radius(pos, importance)
pos[0] = bottom
-apply-border-radius(pos, importance)
/*
* border-radius supporting augmented behavior.
*
* Examples:
*
* border-radius: 2px 5px
* border-radius: top 5px bottom 10px
* border-radius: left 5px
* border-radius: top left 5px
* border-radius: top left 10px bottom right 5px
* border-radius: top left 10px, bottom right 5px
*
*/
border-radius()
pos = ()
augmented = false
importance = arguments[length(arguments) - 1] == !important ? !important : unquote('')
for args in arguments
for arg in args
if arg is a 'ident'
append(pos, arg)
augmented = true
else
append(pos, arg)
if augmented
-apply-border-radius(pos, importance)
pos = ()
border-radius pos unless augmented
================================================
FILE: lib/nib/border.styl
================================================
/*
* border: <color>
* border: ...
*/
border(color, args...)
if color is a 'color'
border: 1px solid color args
else
border: arguments
================================================
FILE: lib/nib/clearfix.styl
================================================
/*
* The Magnificent Micro Clearfix
*
* Useful for clearing floats without structural markup.
* Prevents margin-collapsing on child elements in most cases.
*
* Known issues:
*
* 1. For IE 6/7 when applied to an element that contains only left-floated
* children the bottom margin on child elements will be collapsed.
*
* 2. For Firefox versions prior to 3.5 when applied to the first child element
* of body, and the element does not have non-zero padding, extra space will
* appear between the body and the first child.
*
* See http://nicolasgallagher.com/micro-clearfix-hack/
* and http://j.mp/bestclearfix
*
*/
clearfix()
&:before
&:after
content: ""
display: table
&:after
clear: both
zoom: 1 if support-for-ie
================================================
FILE: lib/nib/color-image.styl
================================================
color-image(color)
error('node-canvas is required for color-image()') unless has-canvas
colorImage = create-color-image(color)
'url(%s)' % color-data-uri(colorImage)
================================================
FILE: lib/nib/config.styl
================================================
/*
* Support for ie defaulting to true.
*/
support-for-ie ?= true
/*
* Default vendor prefixes.
*/
vendor-prefixes ?= webkit moz o ms official
================================================
FILE: lib/nib/flex.styl
================================================
/*
* Vendor "display: flex" support with fallback to obsolete versions.
*/
flex-version ?= box flex
//
// 1. Display values
// - http://www.w3.org/TR/css3-flexbox/#flex-containers
//
display(type, args...)
if flex == type || inline-flex == type
if box in flex-version
if flex == type
display: -ms-flexbox args
display: vendor-value(box args, only: moz webkit)
else
display: -ms-inline-flexbox args
display: vendor-value(inline-box args, only: moz webkit)
if flex in flex-version
display: vendor-value(arguments, only: webkit official) // overwrites old webkit
else
display: arguments
/*
* New syntax for browsers like Google Chrome.
* Plus a translation to the old syntax, if possible.
*/
//
// 5. Ordering and Orientation
// - http://www.w3.org/TR/css3-flexbox/#ordering-and-orientation
//
-flex-obsolete-direction(direction)
if box in flex-version
if row-reverse == direction || column-reverse == direction
vendor('box-direction', reverse, ignore: ms official)
if row == direction || row-reverse == direction
vendor('box-orient', horizontal, ignore: ms official)
else if column == direction || column-reverse == direction
vendor('box-orient', vertical, ignore: ms official)
-flex-obsolete-wrap(value)
if box in flex-version
// WARN: wrap-reverse does not have a box equivalent. This will render in different manners
// on box vs. flex values.
if 'wrap' == value || wrap-reverse == value
vendor('box-lines', multiple, ignore: ms official)
else if nowrap == value
vendor('box-lines', single, ignore: ms official)
flex-direction(direction)
// obsolete
-flex-obsolete-direction(direction)
// new
if flex in flex-version
vendor('flex-direction', arguments, only: webkit ms official)
flex-wrap(value)
// obsolete
-flex-obsolete-wrap(value)
if flex in flex-version
vendor('flex-wrap', arguments, only: webkit ms official)
flex-flow()
// obsolete
-flex-obsolete-direction(arguments[0])
-flex-obsolete-direction(arguments[1])
-flex-obsolete-wrap(arguments[0])
-flex-obsolete-wrap(arguments[1])
// new
if flex in flex-version
vendor('flex-flow', arguments, only: webkit ms official)
order()
// obsolete
if box in flex-version
vendor('box-ordinal-group', arguments, ignore: ms official)
// new
if flex in flex-version
vendor('flex-order', arguments, only: ms)
vendor('order', arguments, only: webkit official)
//
// 7. Flexibility
// - http://www.w3.org/TR/css3-flexbox/#flexibility
//
flex-grow(growth)
// obsolete
if box in flex-version
vendor('box-flex', growth)
// new
if flex in flex-version
vendor('flex-grow', arguments, only: webkit official)
flex-basis()
if flex in flex-version
vendor('flex-basis', arguments, only: webkit official)
flex-shrink()
if flex in flex-version
vendor('flex-shrink', arguments, only: webkit official)
flex(growth)
// obsolete
if box in flex-version
shrink = 1
if none == growth || initial == growth
// Well known values
shrink = 0 if none == growth
growth = 0
else if is-width(growth) == true
// Basis is defined as the first parameter
growth = arguments[1] || 0
shrink = arguments[2] if 3 <= length(arguments)
else if arguments[1] && is-width(arguments[1]) == false
// Growth is first and shrink is second
shrink = arguments[1]
// Since we can't make the distinction between growing and shrinking in the box model, take
// the one that provides the most flexibility.
vendor('box-flex', max(growth, shrink), ignore: ms)
// new
if flex in flex-version
vendor('flex', arguments, only: webkit ms official)
// converts the justification alignment
-convert-justify(align)
if flex-start == align
return start
else if flex-end == align
return end
else if space-around == align
return distribute
else if space-between == align
return justify
else
return align
//
// 8. Alignment
// - http://www.w3.org/TR/css3-flexbox/#alignment
//
justify-content(align)
// obsolete
if box in flex-version
vendor('box-pack', -convert-justify(align), ignore: ms official)
// new
if flex in flex-version
vendor('flex-pack', -convert-justify(align), only: ms)
vendor('justify-content', align, only: webkit official)
align-content(align)
// WARN: Obsolete spec does not allow for adjustment here
if flex in flex-version
vendor('flex-line-pack', -convert-justify(align), only: ms)
vendor('align-content', align, only: webkit official)
// converts alignment from 'flex' to normal value
-convert-alignment(align)
if flex-start == align
return start
else if flex-end == align
return end
else
return align
align-items(align)
// obsolete
if box in flex-version
vendor('box-align', -convert-alignment(align), ignore: ms official)
// new
if flex in flex-version
vendor('flex-align', -convert-alignment(align), only: ms)
vendor('align-items', arguments, only: webkit official)
align-self(align)
// WARN: Obsolete spec does not allow for overriding alignment on individual items.
if flex in flex-version
vendor('align-self', align, only: webkit official)
vendor('flex-item-align', -convert-alignment(align), only: ms)
================================================
FILE: lib/nib/gradients.styl
================================================
@import 'config'
/*
* Implicit color stop position.
*/
pos-in-stops(i, stops)
len = length(stops)
if len - 1 == i
100%
else if i
unit(i / len * 100, '%')
else
0
/*
* Normalize color stops:
*
* - (color pos) -> (pos color)
* - (color) -> (implied-pos color)
*
*/
normalize-stops(stops)
stops = clone(stops)
for stop, i in stops
if length(stop) == 1
color = stop[0]
stop[0] = pos-in-stops(i, stops)
stop[1] = color
else if typeof(stop[1]) == 'unit'
pos = stop[1]
stop[1] = stop[0]
stop[0] = pos
stops
/*
* Join color stops with the given translation function.
*/
join-stops(stops, translate)
str = ''
len = length(stops)
for stop, i in stops
str += ', ' if i
pos = stop[0]
color = stop[1]
str += translate(color, pos)
unquote(str)
/*
* Standard color stop.
*/
std-stop(color, pos)
'%s %s' % (color pos)
/*
* Create a linear gradient with the given start position
* and variable number of color stops.
*
* Examples:
*
* background: linear-gradient(top, red, green, blue)
* background: linear-gradient(bottom, red, green 50%, blue)
* background: linear-gradient(bottom, red, 50% green, blue)
* background: linear-gradient(bottom, red, 50% green, 90% white, blue)
*
*/
linear-gradient(start, stops...)
error('color stops required') unless length(stops)
unquote('linear-gradient(' + join(', ',arguments) + ')')
/*
* Create a linear gradient image with the given start position
* and variable number of color stops.
*/
linear-gradient-image(start, stops...)
error('node-canvas is required for linear-gradient-image()') unless has-canvas
stops = stops[0] if length(stops) == 1
error('gradient image size required') unless start[0] is a 'unit'
size = start[0]
start = start[1] or 'top'
grad = create-gradient-image(size, start)
stops = normalize-stops(stops)
add-color-stop(grad, stop[0], stop[1]) for stop in stops
'url(%s)' % gradient-data-uri(grad)
================================================
FILE: lib/nib/iconic.styl
================================================
iconic-stroke(path)
@font-face
font-family: 'IconicStroke'
src: url(path + '/iconic_stroke.eot')
src: local('☺'), url(path + '/iconic_stroke.ttf') format('truetype'), url(path + '/iconic_stroke.svg#iconic') format('svg')
font-weight: normal
font-style: normal
================================================
FILE: lib/nib/image.styl
================================================
/*
* Define background-image as `path` with optional width and height, adding an
* @2x variant.
*
* affected by github.com/LearnBoost/stylus/issues/1050 and
* github.com/LearnBoost/stylus/issues/1038 ... refactor when those are closed
*/
image(path, w = auto, h = auto, min_pixel_ratio = 1.5)
background-image: url(path)
s = 'all and (-webkit-min-device-pixel-ratio:' + min_pixel_ratio + '),'
s = s + '(min--moz-device-pixel-ratio:' + min_pixel_ratio + '),'
s = s + '(-o-min-device-pixel-ratio:' + min_pixel_ratio + '/1),'
s = s + '(min-device-pixel-ratio:' + min_pixel_ratio + '),'
s = s + '(min-resolution:' + unit(min_pixel_ratio*92, dpi) + '),'
s = s + '(min-resolution:' + unit(min_pixel_ratio, dppx) + ')'
@media s
ext = extname(path)
path = pathjoin(dirname(path), basename(path, ext) + '@2x' + ext)
background-image: url(path)
if w in (cover contain) and h == auto
h = null
background-size: w h
================================================
FILE: lib/nib/index.styl
================================================
@import 'border'
@import 'border-radius'
@import 'clearfix'
@import 'color-image'
@import 'flex'
@import 'gradients'
@import 'iconic'
@import 'image'
@import 'normalize'
@import 'overflow'
@import 'positions'
@import 'reset'
@import 'text'
@import 'vendor'
@import 'size'
================================================
FILE: lib/nib/normalize/base.styl
================================================
// Based in Nicolas Gallagher's git.io/normalize
normalize-base()
html // Prevent iOS text size adjust after orientation change.
font-family sans-serif
-ms-text-size-adjust 100%
-webkit-text-size-adjust 100%
body
margin 0
================================================
FILE: lib/nib/normalize/embed.styl
================================================
// Based in Nicolas Gallagher's git.io/normalize
normalize-embed()
img // No border when inside `a` in IE 8~10.
border 0
svg:not(:root) // Overflow should be hidden in IE 9~11.
overflow hidden
================================================
FILE: lib/nib/normalize/forms.styl
================================================
// Based in Nicolas Gallagher's git.io/normalize
normalize-forms()
// Known limitation: Chrome and Safari on OS X allow very limited
// styling of `select`, unless a `border` property is set.
button, input, optgroup, select, textarea
color inherit // Correct color not being inherited.
font inherit // Correct font properties not being inherited.
margin 0 // Fix margins in FF 4+, Safari, and Chrome.
button // Fix `overflow` set to `hidden` in IE 8/9/10/11.
overflow visible
button, select // Consistent text-transform across browsers.
text-transform none
// Fix WebKit bug in Android 4.0, inability to style clickable `input` in
// iOS and improve usability and consistency of cursor style.
button, html input[type='button'], input[type='reset'], input[type='submit']
cursor pointer
-webkit-appearance button
// Reset default cursor for disabled elements.
button[disabled], html input[disabled]
cursor default
// Remove inner padding and border in FF 4+.
button::-moz-focus-inner, input::-moz-focus-inner
border 0
padding 0
input // Reset line-height again FF 4+ UA stylsheet.
line-height normal
// Fix box sizing and excess padding in IE 8~10
input[type='checkbox'], input[type='radio']
box-sizing border-box
padding 0
// Fix the cursor style for Chrome's increment/decrement buttons.
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button
height auto
// Consistent appearance and box-sizing in Safari and Chrome.
input[type='search']
-webkit-appearance textfield
-moz-box-sizing content-box
-webkit-box-sizing content-box
box-sizing content-box
// No inner padding and search cancel button in Safari and Chrome on OS X.
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
-webkit-appearance none
fieldset // Consistent border, margin, and padding.
border 1px solid #c0c0c0
margin 0 2px
padding 0.35em 0.625em 0.75em
legend // Hack to correct `color` not being inherited in IE 8/9/10/11.
border 0
padding 0
textarea // Remove default vertical scrollbar in IE 8~11.
overflow auto
optgroup // Don't inherit the `font-weight` applied above.
font-weight bold
================================================
FILE: lib/nib/normalize/groups.styl
================================================
// Based in Nicolas Gallagher's git.io/normalize
normalize-groups()
figure // Margin should exist in IE 8~9 / Safari.
margin 1em 40px
hr // Consistency between FF and others.
-moz-box-sizing content-box
box-sizing content-box
height 0
pre // Contain overflow and wrap words.
overflow auto
// Hack to fix odd `em`-unit font size rendering in all browsers.
code, kbd, pre, samp
font-family monospace, monospace
font-size 1em
================================================
FILE: lib/nib/normalize/html5.styl
================================================
// Based in Nicolas Gallagher's git.io/normalize
normalize-html5()
// `block` display for HTML5 elements in IE 8~11 and FF.
article, details, section, summary,
aside, main, menu, nav, figcaption,
figure, footer, header, hgroup
display block
audio, canvas, progress, video
display inline-block // Set `inline-block` not defined in IE 8~9.
vertical-align baseline // Fix v-align of `progress` in Chrome, FF, and O.
audio:not([controls])
display none // Prevent displaying `audio` without controls.
height 0 // Remove excess height in iOS 5 devices.
[hidden], // Address `[hidden]` styling not present in IE 8~10.
template // Hide the `template` element in IE 8~11, Safari, and FF < 22.
display none
================================================
FILE: lib/nib/normalize/index.styl
================================================
// Based in Nicolas Gallagher's git.io/normalize
@import './base'
@import './html5'
@import './links'
@import './text'
@import './embed'
@import './groups'
@import './forms'
@import './tables'
normalize-css()
normalize-base()
normalize-html5()
normalize-links()
normalize-text()
normalize-embed()
normalize-groups()
normalize-forms()
normalize-tables()
================================================
FILE: lib/nib/normalize/links.styl
================================================
// Based in Nicolas Gallagher's git.io/normalize
normalize-links()
a // No gray bg color in active links in IE 10.
background-color transparent
&:active, &:hover
outline 0 // + readability when focused.
================================================
FILE: lib/nib/normalize/tables.styl
================================================
// Based in Nicolas Gallagher's git.io/normalize
normalize-tables()
table // Remove most spacing between table cells.
border-collapse collapse
border-spacing 0
td, th
padding 0
================================================
FILE: lib/nib/normalize/text.styl
================================================
// Based in Nicolas Gallagher's git.io/normalize
normalize-text()
abbr[title] // + style not present in IE 8~11, Safari, and Chrome.
border-bottom 1px dotted
dfn // + style not present in Safari and Chrome.
font-style italic
mark // + style not present in IE 8/9.
background #ff0; color #000
b, strong // Fix `font-weight: bolder` in FF 4+, Safari, and Chrome.
font-weight bold
h1 // `h1` inside `section` and `article` fix for FF 4+, Safari & Chrome.
font-size 2em
margin 0.67em 0
small // Consistent font-size across browsers.
font-size 80%
sub, sup // Prevent `sub` and `sup` affecting `line-height`.
font-size 75%
line-height 0
position relative
vertical-align baseline
sup
top -0.5em
sub
bottom -0.25em
================================================
FILE: lib/nib/overflow.styl
================================================
/*
* Overflow utility. Maps to regular overflow, and adds an ellipsis value.
*
* Synopsis:
*
* overflow: <type>
*
* Examples:
*
* overflow: auto
* overflow: hidden
* overflow: ellipsis
*
*/
overflow()
if arguments[0] == ellipsis
ellipsis()
else
overflow: arguments
================================================
FILE: lib/nib/positions.styl
================================================
// helper
-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
/*
* Position utility.
*
* Synopsis:
*
* fixed: <pos> [n] <pos> [n]
*
* Examples:
*
* fixed: top left
* fixed: top 5px left
* fixed: top left 5px
* fixed: top 5px left 5px
*
*/
fixed()
-pos('fixed', arguments)
/*
* Position utility.
*
* Synopsis:
*
* absolute: <pos> [n] <pos> [n]
*
* Examples:
*
* absolute: top left
* absolute: top 5px left
* absolute: top left 5px
* absolute: top 5px left 5px
*
*/
absolute()
-pos('absolute', arguments)
/*
* Position utility.
*
* Synopsis:
*
* relative: <pos> [n] <pos> [n]
*
* Examples:
*
* relative: top left
* relative: top 5px left
* relative: top left 5px
* relative: top 5px left 5px
*
*/
relative()
-pos('relative', arguments)
================================================
FILE: lib/nib/reset.styl
================================================
// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
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
================================================
FILE: lib/nib/size.styl
================================================
/*
* Size utility.
*
* Synopsis:
*
* size: <width> <height> | <width & height>
*
* Examples:
*
* size: 100% 30px
* yields:
* width: 100%
* height: 30px
*
* size: 5px
* yields:
* width: 5px
* height: 5px
*
*/
size()
if length(arguments) == 1
width: arguments[0]
height: arguments[0]
else
width: arguments[0]
height: arguments[1]
================================================
FILE: lib/nib/text/aliases.styl
================================================
/*
* Alias of "nowrap".
*/
no-wrap = unquote('nowrap')
/*
* Alias of "white-space".
*/
whitespace()
white-space: arguments
================================================
FILE: lib/nib/text/ellipsis.styl
================================================
/*
* Ellipsis with wrapping disabled by default.
*/
ellipsis(no-wrap = true)
if no-wrap
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
================================================
FILE: lib/nib/text/hide-text.styl
================================================
/*
* Hide text.
*/
hide-text()
text-indent: 101%
white-space: nowrap
overflow: hidden
================================================
FILE: lib/nib/text/index.styl
================================================
@import './aliases'
@import './ellipsis'
@import './hide-text'
@import './replace-text'
@import './shadow-stroke'
================================================
FILE: lib/nib/text/replace-text.styl
================================================
/*
* Replace text with an image.
*/
replace-text(image, x=50%, y=50%)
hide-text()
background-image image
background-repeat no-repeat
background-position x y
================================================
FILE: lib/nib/text/shadow-stroke.styl
================================================
shadow-stroke(n)
text-shadow: -1px -1px 0 n, 1px -1px 0 n, -1px 1px 0 n, 1px 1px 0 n
================================================
FILE: lib/nib/vendor.styl
================================================
use('../nodes/vendor-helpers.js')
@import 'config'
/*
* Alias "nowrap" as "no-wrap".
*/
no-wrap = unquote('nowrap')
/*
* Helper to find out if a given value is a width
*/
is-width(val)
if auto == val
return true
else if val && 'unit' == type(val)
// Stylus does not short circuit so we need to perform this as a distinct
// operation to prevent errors
return '' != unit(val)
return false
/*
* Vendor support for the given prop / arguments, optionally specifying the
* only prefixes to utilize, or those which should be ignored.
*/
vendor(prop, args, only = null, ignore = null, vendor-property = true)
need_normalize = !vendor-property or prop in ('transition' 'transition-property' 'border-image' 'border-image-slice')
for prefix in vendor-prefixes
unless (only and !(prefix in only)) or (ignore and prefix in ignore)
if official == prefix
if need_normalize
{prop}: normalize(prop,('%s' % args))
else
{prop}: args
else
newprop = prop
newprop = '-' + prefix + '-' + prop if vendor-property
if need_normalize
{newprop}: normalize(prop,('%s' % args),prefix)
else
{newprop}: args
/*
* Vendorize the given value.
*/
vendor-value(arg, only = null, ignore = null)
prop = current-property[0]
for prefix in vendor-prefixes
unless (only and !(prefix in only)) or (ignore and prefix in ignore) or official == prefix
add-property(prop, '-%s-%s' % (prefix arg))
arg
/*
* Vendor "box-shadow" support.
*/
box-shadow()
vendor('box-shadow', arguments, only: webkit official)
/*
* Vendor "user-select" support.
*/
user-select()
vendor('user-select', arguments, only: webkit moz ms official)
/*
* Vendor "column-count" support.
*/
column-count()
vendor('column-count', arguments, only: webkit moz official)
/*
* Vendor "column-gap" support.
*/
column-gap()
vendor('column-gap', arguments, only: webkit moz official)
/*
* Vendor "column-rule" support.
*/
column-rule()
vendor('column-rule', arguments, only: webkit moz official)
/*
* Vendor "column-rule-color" support.
*/
column-rule-color()
vendor('column-rule-color', arguments, only: webkit moz official)
/*
* Vendor "column-rule-width" support.
*/
column-rule-width()
vendor('column-rule-width', arguments, only: webkit moz official)
/*
* Vendor "column-rule-style" support.
*/
column-rule-style()
vendor('column-rule-style', arguments, only: webkit moz official)
/*
* Vendor "column-width" support.
*/
column-width()
vendor('column-width', arguments, only: webkit moz official)
/*
* Vendor "column-span" support.
*/
column-span()
vendor('column-span', arguments, only: webkit official)
/*
* Vendor "column-fill" support.
*/
column-fill()
vendor('column-fill', arguments, only: moz official)
/*
* Legacy syntax support for background-clip and background-origin
*/
legacy-bg-values(property, args)
legacy_args = ()
importance = unquote('')
for subargs in args
for arg in subargs
if arg in (border-box padding-box content-box)
arg = unquote('border') if arg == border-box
arg = unquote('padding') if arg == padding-box
arg = unquote('content') if arg == content-box
if arg != '!important'
push(legacy_args,arg)
else
importance = !important
vendor(property, unquote(join(', ',legacy_args)) importance, only: moz webkit)
/*
* Vendor "background-clip" support.
*/
background-clip()
if arguments[0] == text
vendor('background-clip', arguments, only: webkit)
else
legacy-bg-values('background-clip', arguments)
background-clip: arguments
/*
* Vendor "background-origin" support.
*/
background-origin()
legacy-bg-values('background-origin', arguments)
background-origin: arguments
/*
* Vendor "transform" support.
*/
transform()
vendor('transform', arguments)
/*
* Vendor "transform-origin" support.
*/
transform-origin()
vendor('transform-origin', arguments)
/*
* Vendor "transform-style" support.
*/
transform-style()
vendor('transform-style', arguments)
/*
* Vendor "border-image" support.
*/
border-image()
vendor('border-image', arguments, only: webkit moz o official)
/*
* Vendor "transition" support.
*/
transition()
vendor('transition', arguments)
/*
* Vendor "transition-property" support.
*/
transition-property()
vendor('transition-property', arguments)
/*
* Vendor "transition-duration" support.
*/
transition-duration()
vendor('transition-duration', arguments)
/*
* Vendor "transition-timing-function" support.
*/
transition-timing-function()
vendor('transition-timing-function', arguments)
/*
* Vendor "transition-delay" support.
*/
transition-delay()
vendor('transition-delay', arguments)
/*
* Vendor "backface-visibility" support.
*/
backface-visibility()
vendor('backface-visibility', arguments, only: webkit moz ms official)
/*
* Vendor "perspective" support.
*/
perspective()
if mixin
vendor('perspective', arguments, only: webkit moz ms official)
else
'perspective(%s)' % arguments
/*
* Vendor "perspective-origin" support.
*/
perspective-origin()
vendor('perspective-origin', arguments, only: webkit moz ms official)
/*
* Opacity with conditional IE support.
*/
opacity(n, args...)
opacity: n args
if support-for-ie
if n == inherit or n == initial
-ms-filter: n args
filter: n args
else
val = round(n * 100)
if val == 100
-ms-filter: none args
filter: none args
else
-ms-filter: '"progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)"' % val args
filter: 'alpha(opacity=%s)' % val args
/*
* Vendor "text-size-adjust"
*/
text-size-adjust()
vendor('text-size-adjust', arguments)
/*
* Alias the "white-space" property.
*/
whitespace()
white-space: arguments
/*
* Vendor "box-sizing" support.
*/
box-sizing()
vendor('box-sizing', arguments, only: webkit moz official)
/*
* Vendor "box-orient" support.
*/
box-orient()
vendor('box-orient', arguments, only: webkit moz official)
/*
* Vendor "box-flex-group" support.
*/
box-flex-group()
vendor('box-flex-group', arguments, only: webkit moz official)
/*
* Vendor "box-ordinal-group" support.
*/
box-ordinal-group()
vendor('box-ordinal-group', arguments, only: webkit moz ms official)
/*
* Vendor "box-align" support.
*/
box-align()
vendor('box-align', arguments, only: webkit moz ms official)
/*
* Vendor "box-pack" support.
*/
box-pack()
vendor('box-pack', arguments, only: webkit moz ms official)
/*
* Vendor "box-direction" support.
*/
box-direction()
vendor('box-direction', arguments, only: webkit moz ms official)
/*
* Vendor "animation" support.
*/
animation()
vendor('animation', arguments)
/*
* Vendor "animation-name" support.
*/
animation-name()
vendor('animation-name', arguments)
/*
* Vendor "animation-duration" support.
*/
animation-duration()
vendor('animation-duration', arguments)
/*
* Vendor "animation-delay" support.
*/
animation-delay()
vendor('animation-delay', arguments)
/*
* Vendor "animation-direction" support.
*/
animation-direction()
vendor('animation-direction', arguments)
/*
* Vendor "animation-iteration-count" support.
*/
animation-iteration-count()
vendor('animation-iteration-count', arguments)
/*
* Vendor "animation-timing-function" support.
*/
animation-timing-function()
vendor('animation-timing-function', arguments)
/*
* Vendor "animation-play-state" support.
*/
animation-play-state()
vendor('animation-play-state', arguments)
/*
* Vendor "animation-fill-mode" support.
*/
animation-fill-mode()
vendor('animation-fill-mode', arguments)
/*
* Vendor "hyphens" support.
*/
hyphens()
vendor('hyphens', arguments, only: webkit moz ms official)
/*
* Vendor "appearance" support.
*/
appearance()
vendor('appearance', arguments, only: webkit moz official)
/*
* Vendor "tab-size" support.
*/
tab-size()
vendor('tab-size', arguments, only: moz o official)
/*
* Vendor "overflow-scrolling" support.
*/
overflow-scrolling()
vendor('overflow-scrolling', arguments, only: webkit official)
/*
* Vendor "text-overflow" support, , -o- for opera 9.* - 10.*
*/
text-overflow()
vendor('text-overflow', arguments, only: official o)
/*
* Vendor "text-size-adjust" support.
*/
text-size-adjust()
vendor('text-size-adjust', arguments, only: official webkit ms)
/*
* Vendor "font-smoothing" support, webkit only.
*/
font-smoothing()
vendor('font-smoothing', arguments, only: webkit)
/**
* Vendor input-placeholder/placeholder support.
*
* Examples:
* // Default syntax
* body
* placeholder(color #333, font-weight normal)
*
* // The comma is important
* .placeholder-red
* placeholder(color red,)
*
* // We can pass a function
* green-placeholder()
* color green
* .placeholder-green
* placeholder(green-placeholder)
*
* // We can pass a hash
* textarea
* placeholder((font-style italic) (font-weight bold) (padding '4px 10px'))
*/
placeholder()
for v in ':-webkit-input' '-moz' ':-moz' '-ms-input'
&:{v}-placeholder
for pair in arguments
if typeof(pair) == 'function'
pair()
else if pair is not null && pair[0] is not null
{pair[0]}: type(pair[1]) == 'string' ? s(pair[1]) : pair[1]
input-placeholder = placeholder
/*
* Vendor background support (gradients).
*/
background()
if match('-gradient\(', ''+arguments)
vendor('background', arguments, vendor-property: false)
else
background arguments
background-image()
if match('-gradient\(', ''+arguments)
vendor('background-image', arguments, vendor-property: false)
else
background-image arguments
cursor()
if match('-gradient\(', ''+arguments)
vendor('cursor', arguments, vendor-property: false)
else
cursor arguments
list-style()
if match('-gradient\(', ''+arguments)
vendor('list-style', arguments, vendor-property: false)
else
list-style arguments
list-style-image()
if match('-gradient\(', ''+arguments)
vendor('list-style-image', arguments, vendor-property: false)
else
list-style-image arguments
================================================
FILE: lib/nib.js
================================================
/*!
* nib
* Copyright (c) 2010 TJ Holowaychuk <tj@vision-media.ca>
* MIT Licensed
*/
/**
* Module dependencies.
*/
var stylus = require('stylus'),
path = require('path'),
nodes = stylus.nodes,
utils = stylus.utils,
Canvas;
exports = module.exports = plugin;
// conditionally expose canvas-based APIs.
try {
Canvas = require('canvas');
var gradient = require('./nodes/gradient'),
colorImage = require('./nodes/color-image');
} catch (err) {
// ignore
}
/**
* Library version.
*/
exports.version = require(path.join(__dirname, '../package.json')).version;
/**
* Stylus path.
*/
exports.path = __dirname;
/**
* Return the plugin callback for stylus.
*
* @return {Function}
* @api public
*/
function plugin() {
return function(style){
style.include(__dirname);
if (Canvas) {
style.define('has-canvas', nodes.true);
// gradients
style.define('create-gradient-image', gradient.create);
style.define('gradient-data-uri', gradient.dataURL);
style.define('add-color-stop', gradient.addColorStop);
// color images
style.define('create-color-image', colorImage.create);
style.define('color-data-uri', colorImage.dataURL);
} else {
style.define('has-canvas', nodes.false);
}
};
}
================================================
FILE: lib/nodes/color-image.js
================================================
/**
* Module dependencies.
*/
var stylus = require('stylus'),
Canvas = require('canvas'),
nodes = stylus.nodes,
utils = stylus.utils;
/**
* Expose `ColorImage`.
*/
exports = module.exports = ColorImage;
/**
* Create a new `ColorImage` node with the given `color`.
*
* @param {Color} color node
* @return {ColorImage}
* @api public
*/
exports.create = function(color){
utils.assertColor(color);
return new ColorImage(color);
};
/**
* Return the data URI for `colorImage`.
*
* @param {ColorImage} colorImage
* @return {String}
* @api public
*/
exports.dataURL = function(colorImage){
utils.assertType(colorImage, 'colorimage');
return new nodes.String(colorImage.toDataURL());
};
/**
* Initialize a new `ColorImage` node with the given arguments.
*
* @param {Color} color node
* @api private
*/
function ColorImage(color) {
this.color = color;
this.canvas = new Canvas(1, 1);
this.ctx = this.canvas.getContext('2d');
this.ctx.fillStyle = color.toString();
this.ctx.fillRect(0, 0, 1, 1);
}
/**
* Inherit from `nodes.Node.prototype`.
*/
ColorImage.prototype.__proto__ = nodes.Node.prototype;
/**
* Inspect the color.
*
* @return {String}
* @api private
*/
ColorImage.prototype.toString = function(){
return 'ColorImage(' + this.color.toString() + ')';
};
/**
* Return data URI string.
*
* @return {String}
* @api private
*/
ColorImage.prototype.toDataURL = function(){
return this.canvas.toDataURL();
};
================================================
FILE: lib/nodes/gradient.js
================================================
/**
* Module dependencies.
*/
var stylus = require('stylus'),
Canvas = require('canvas'),
nodes = stylus.nodes,
utils = stylus.utils;
/**
* Expose `Gradient`.
*/
exports = module.exports = Gradient;
/**
* Create a new `Gradient` node with the given `size`
* and `start` position.
*
* @param {Number} size
* @param {String|Ident|Literal} start
* @return {Gradient}
* @api public
*/
exports.create = function(size, start){
utils.assertType(size, 'unit', 'size');
utils.assertString(start, 'start');
return new Gradient(size.val, start.string);
};
/**
* Add color stop to `grad`.
*
* @param {Gradient} grad
* @param {Unit} pos
* @param {HSLA|RGBA} color
* @return {Null}
* @api public
*/
exports.addColorStop = function(grad, pos, color){
utils.assertType(grad, 'gradient', 'grad');
utils.assertType(pos, 'unit', 'pos');
utils.assertColor(color, 'color');
grad.addColorStop(pos.val / 100, color.rgba.toString());
return nodes.null;
};
/**
* Return the data URI for `grad`.
*
* @param {Gradient} grad
* @return {String}
* @api public
*/
exports.dataURL = function(grad){
utils.assertType(grad, 'gradient');
return new nodes.String(grad.toDataURL());
};
/**
* Initialize a new `Gradient` node with the given `size`
* and `start` position.
*
* @param {Number} size
* @param {String} start
* @api private
*/
function Gradient(size, start) {
this.size = size;
this.canvas = new Canvas(1, 1);
this.setStartPosition(start);
this.ctx = this.canvas.getContext('2d');
this.grad = this.ctx.createLinearGradient(
this.from[0], this.from[1],
this.to[0], this.to[1]);
}
/**
* Inspect the gradient.
*
* @return {String}
* @api private
*/
Gradient.prototype.toString = function(){
return 'Gradient(' + this.size + 'px ' + this.stops.map(function(stop){
return stop[0] + ' ' + stop[1];
}).join(', ') + ')';
};
/**
* Set `start` position.
*
* @param {String} start
* @api private
*/
Gradient.prototype.setStartPosition = function(start){
var size = this.size,
canvas = this.canvas;
switch (start) {
case 'top':
canvas.height = size;
this.from = [canvas.width / 2, 0];
this.to = [canvas.width / 2, canvas.height];
break;
case 'bottom':
canvas.height = size;
this.from = [canvas.width / 2, canvas.height];
this.to = [canvas.width / 2, 0];
break;
case 'left':
canvas.width = size;
this.from = [0, 0];
this.to = [canvas.width, canvas.height];
break;
case 'right':
canvas.width = size;
this.from = [canvas.width, canvas.height];
this.to = [0, 0];
break;
default:
throw new Error('invalid start position "' + start + '"');
}
};
/**
* Add color stop `pos` / `color`.
*
* @param {Number} pos
* @param {String} color
* @api private
*/
Gradient.prototype.addColorStop = function(pos, color){
this.grad.addColorStop(pos, color);
};
/**
* Return data URI string.
*
* @return {String}
* @api private
*/
Gradient.prototype.toDataURL = function(){
var canvas = this.canvas,
ctx = this.ctx;
ctx.fillStyle = this.grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);
return canvas.toDataURL();
};
/**
* Inherit from `nodes.Node.prototype`.
*/
Gradient.prototype.__proto__ = nodes.Node.prototype;
================================================
FILE: lib/nodes/vendor-helpers.js
================================================
var RE_GRADIENT_STOPS = /([\(\,]\s*)(-?(?:\d*\.)?\d+(?:%|px|em))(\s+)((hsl|rgb)a?\([^\)]+\)|#[^\)\,]+)/g,
RE_GRADIENT_VAL = /(\(\s*)(?:(-?(\d*\.)?\d+)deg|((to )?(top|bottom|left|right)( (top|bottom|left|right))?))/g,
RE_GRADIENT_TYPE = /((repeating-)?(linear|radial)-gradient\()/g,
RE_TRANSFORM = /\b(transform)\b/g,
RE_FILL_KEYWORD = /\s*\b(fill)\b\s*/g;
var DIRECTIONS = { top: 'bottom', bottom: 'top', left: 'right', right:'left' };
/**
* Expose `normalize`.
*/
function normalize(property, value, prefix){
var result = value.toString(),
args;
/* Fixing the gradients */
if (~result.indexOf('gradient(')) {
/* Normalize color stops */
result = result.replace(RE_GRADIENT_STOPS,'$1$4$3$2');
/* Normalize legacy gradients */
result = result.replace(RE_GRADIENT_VAL, function(){
args = [].slice.call(arguments, 1);
return normalizeGradient(args, prefix);
});
/* Adding prefixes to the legacy gradients */
if (prefix) result = result.replace(RE_GRADIENT_TYPE, '-' + prefix + '-$1');
}
/* Adding prefixes to the `transform` values of legacy `transition` property */
if (prefix && (property == "'transition'" || property == "'transition-property'")) {
result = result.replace(RE_TRANSFORM, '-' + prefix + '-$1');
}
/* Removing `fill` keyword from the legacy `border-image` property */
if (prefix && (property == "'border-image'" || property == "'border-image-slice'")) {
result = result.replace(RE_FILL_KEYWORD, ' ');
}
return result;
}
function normalizeGradient(parts, prefix){
/* Fix the degrees to the legacy syntax */
var val = parts[0];
// when the gradients were unprefixed, the w3c changed the way that the
// angle direction is interpreted. see:
// http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx
if (parts[1]) val += (prefix ? parseFloat((Math.abs(450 - parts[1]) % 360).toFixed(3)) : parts[1]) + 'deg';
/* Fix the directions to the legacy syntax */
if (prefix && parts[4]) {
// `to top` to `bottom` etc.
if (parts[5]) val += DIRECTIONS[parts[5]];
if (parts[6]) val += ' ' + DIRECTIONS[parts[7]];
} else if (!prefix && !parts[4]) {
// `top` to `to bottom` etc.
if (parts[5]) val += 'to ' + DIRECTIONS[parts[5]];
if (parts[6]) val += ' ' + DIRECTIONS[parts[7]];
} else {
if (parts[3]) val += parts[3];
}
return val;
}
var plugin = function(){
return function(style){
var nodes = this.nodes;
style.define('normalize', function(property, value, prefix) {
return new nodes.Ident(normalize(property, value, prefix));
});
};
};
module.exports = plugin;
================================================
FILE: package.json
================================================
{
"name": "nib",
"description": "Stylus mixins and utilities",
"version": "1.2.0",
"license": "MIT",
"repository": {
"type": "git",
"url": "git://github.com/stylus/nib.git"
},
"peerDependencies": {
"stylus": "*"
},
"devDependencies": {
"chai": "^4.3.6",
"connect": "^3.7.0",
"mocha": "^10.0.0",
"pug": "^3.0.2",
"serve-static": "^1.15.0",
"stylus": "^0.57.0"
},
"author": "TJ Holowaychuk <tj@vision-media.ca>",
"maintainers": [
{
"name": "iChenLei",
"email": "chenleicoder@foxmail.com"
}
],
"main": "lib/nib.js",
"engines": {
"node": "*"
},
"scripts": {
"test": "mocha",
"test-server": "node test/server.js"
}
}
================================================
FILE: test/cases/absolute.css
================================================
#login {
position: absolute;
bottom: 0;
right: 0;
}
#login {
position: absolute;
top: 5px;
left: 10px;
}
#login {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
}
#login {
position: absolute;
top: 0;
}
#login {
position: absolute;
top: 0;
right: 5px;
bottom: 0;
left: 10px;
}
================================================
FILE: test/cases/absolute.styl
================================================
@import 'nib/positions'
#login
absolute bottom right
#login
absolute top 5px left 10px
#login
absolute top 5px right 5px bottom 5px
#login
absolute top
#login
absolute top right 5px bottom left 10px
================================================
FILE: test/cases/border-radius.css
================================================
button {
border-radius: 1px 2px/3px 4px;
}
button {
border-top-left-radius: 10px;
}
button {
border-top-left-radius: 10px !important;
}
button {
border-bottom-right-radius: 5px;
}
button {
border-top-left-radius: 5px;
border-bottom-right-radius: 10px;
}
button {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
button {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
button {
border-top-left-radius: 5px;
border-bottom-right-radius: 10px;
}
button {
border-radius: 5px;
}
================================================
FILE: test/cases/border-radius.styl
================================================
@import 'nib/border-radius'
button
border-radius: 1px 2px / 3px 4px
button
border-radius: top left 10px
button
border-radius: top left 10px !important
button
border-radius: bottom right 5px
vendor-prefixes = webkit moz official
button
border-radius: top left 5px bottom right 10px
button
border-radius: bottom 10px
button
border-radius: top 5px bottom 10px
button
border-radius: top left 5px, bottom right 10px
prepend(vendor-prefixes, ms, o)
button
border-radius: 5px
================================================
FILE: test/cases/border.css
================================================
.foo {
border: none;
border: 1px solid #f00;
border: 1px solid #0f0 !important;
border: 1px solid #f00;
}
================================================
FILE: test/cases/border.styl
================================================
@import 'nib/border'
.foo
border: none
border: red
border: lime !important
border: 1px solid red
================================================
FILE: test/cases/clearfix.css
================================================
#clearfix {
zoom: 1;
}
#clearfix:before,
#clearfix:after {
content: "";
display: table;
}
#clearfix:after {
clear: both;
}
================================================
FILE: test/cases/clearfix.styl
================================================
@import 'nib/clearfix'
support-for-ie = true
#clearfix
clearfix()
================================================
FILE: test/cases/fixed.css
================================================
#login {
position: fixed;
bottom: 0;
right: 0;
}
#login {
position: fixed;
top: 5px;
left: 10px;
}
#login {
position: fixed;
bottom: 0;
left: 10px;
}
#login {
position: fixed;
bottom: 10px;
right: 0;
}
================================================
FILE: test/cases/fixed.styl
================================================
@import 'nib/positions'
#login
fixed: bottom right
#login
fixed: top 5px left 10px
#login
fixed: bottom left 10px
#login
fixed: bottom 10px right
================================================
FILE: test/cases/flex.css
================================================
section {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
section div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 0;
-ms-flex: 1 0;
flex: 1 0;
}
section {
display: -webkit-inline-box;
display: -moz-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-box;
display: inline-flex;
}
flex-flow {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-o-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-flow: row-reverse;
-ms-flex-flow: row-reverse;
flex-flow: row-reverse;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-o-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-flow: wrap-reverse column-reverse;
-ms-flex-flow: wrap-reverse column-reverse;
flex-flow: wrap-reverse column-reverse;
}
justify-content {
-webkit-box-pack: start;
-moz-box-pack: start;
-o-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-pack: end;
-moz-box-pack: end;
-o-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-o-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-pack: distribute;
-moz-box-pack: distribute;
-o-box-pack: distribute;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
align-items {
-webkit-box-align: start;
-moz-box-align: start;
-o-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-box-align: end;
-moz-box-align: end;
-o-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
align-content {
-ms-flex-line-pack: start;
-webkit-align-content: flex-start;
align-content: flex-start;
-ms-flex-line-pack: end;
-webkit-align-content: flex-end;
align-content: flex-end;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
-ms-flex-line-pack: justify;
-webkit-align-content: space-between;
align-content: space-between;
-ms-flex-line-pack: distribute;
-webkit-align-content: space-around;
align-content: space-around;
}
flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 0 auto;
-ms-flex: 0 auto;
flex: 0 auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: auto 0;
-ms-flex: auto 0;
flex: auto 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: initial;
-ms-flex: initial;
flex: initial;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-o-box-flex: 0;
box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-o-box-flex: 0;
box-flex: 0;
-webkit-flex: 0px 0 0;
-ms-flex: 0px 0 0;
flex: 0px 0 0;
-webkit-box-flex: 2;
-moz-box-flex: 2;
-o-box-flex: 2;
box-flex: 2;
-webkit-flex: 1 2 0;
-ms-flex: 1 2 0;
flex: 1 2 0;
}
order {
-webkit-box-ordinal-group: 0;
-moz-box-ordinal-group: 0;
-o-box-ordinal-group: 0;
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
section {
display: -webkit-box !important;
display: -moz-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: box !important;
display: flex !important;
}
section {
display: -webkit-inline-box !important;
display: -moz-inline-box !important;
display: -webkit-inline-flex !important;
display: -ms-inline-flexbox !important;
display: inline-box !important;
display: inline-flex !important;
}
section {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
}
section div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
}
section {
display: -webkit-inline-box;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-box;
}
section {
display: -webkit-box !important;
display: -moz-box !important;
display: -ms-flexbox !important;
display: box !important;
}
section {
display: -webkit-inline-box !important;
display: -moz-inline-box !important;
display: -ms-inline-flexbox !important;
display: inline-box !important;
}
section {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
section div {
-webkit-flex: 1 0;
-ms-flex: 1 0;
flex: 1 0;
}
section {
display: -webkit-inline-flex;
display: inline-flex;
}
section {
display: -webkit-flex !important;
display: flex !important;
}
section {
display: -webkit-inline-flex !important;
display: inline-flex !important;
}
================================================
FILE: test/cases/flex.styl
================================================
@import 'nib/vendor'
@import 'nib/flex'
section
display: flex
flex-direction: row
div
flex: 1 0
section
display: inline-flex
flex-flow
flex-flow row-reverse
flex-flow row wrap
flex-flow wrap-reverse column-reverse
justify-content
justify-content flex-start
justify-content flex-end
justify-content center
justify-content space-between
justify-content space-around
align-items
align-items flex-start
align-items flex-end
align-items center
align-content
align-content flex-start
align-content flex-end
align-content center
align-content space-between
align-content space-around
flex
flex 0 auto
flex auto 0
flex initial
flex auto
flex none
flex 1
flex 0px 0 0
flex 1 2 0
order
order 0
section
display: flex !important
section
display: inline-flex !important
// Obsolete property conditional rendering
flex-version = box
section
display: flex
flex-direction: row
div
flex: 1 0
section
display: inline-flex
section
display: flex !important
section
display: inline-flex !important
// New property conditional rendering
flex-version = flex
section
display: flex
flex-direction: row
div
flex: 1 0
section
display: inline-flex
section
display: flex !important
section
display: inline-flex !important
================================================
FILE: test/cases/image.css
================================================
#logo {
background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5/1), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) {
#logo {
background-image: url("/images/branding/logo.main@2x.png");
background-size: auto auto;
}
}
#logo {
background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5/1), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) {
#logo {
background-image: url("/images/branding/logo.main@2x.png");
background-size: 50px 100px;
}
}
#logo {
background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5/1), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) {
#logo {
background-image: url("/images/branding/logo.main@2x.png");
background-size: cover;
}
}
#logo {
background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5/1), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) {
#logo {
background-image: url("/images/branding/logo.main@2x.png");
background-size: contain;
}
}
================================================
FILE: test/cases/image.styl
================================================
@import 'nib/image'
#logo
image: '/images/branding/logo.main.png'
#logo
image: '/images/branding/logo.main.png' 50px 100px
#logo
image: '/images/branding/logo.main.png' cover
#logo
image: '/images/branding/logo.main.png' contain
================================================
FILE: test/cases/importance.css
================================================
.test {
position: relative !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 0 !important;
float: left !important;
clear: left !important;
display: none !important;
visibility: hidden !important;
overflow: hidden !important;
overflow-x: scroll !important;
overflow-y: auto !important;
clip: auto !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
margin: 0 !important;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
padding-top: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
max-width: 0 !important;
outline: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border-color: #000 !important;
border-top-color: #000 !important;
border-right-color: #000 !important;
border-bottom-color: #000 !important;
border-left-color: #000 !important;
border-style: solid !important;
border-top-style: solid !important;
border-right-style: solid !important;
border-bottom-style: solid !important;
border-left-style: solid !important;
border-width: 0 !important;
border-top-width: 0 !important;
border-right-width: 0 !important;
border-bottom-width: 0 !important;
border-left-width: 0 !important;
border: 1px !important;
border-top: 1px !important;
border-right: 1px !important;
border-bottom: 1px !important;
border-left: 1px !important;
border-radius: 50% !important;
border-top-right-radius: 50% !important;
border-top-left-radius: 50% !important;
border-bottom-left-radius: 50% !important;
border-bottom-right-radius: 50% !important;
-webkit-border-image: none !important;
-moz-border-image: none !important;
-o-border-image: none !important;
border-image: none !important;
background-attachment: fixed !important;
background-color: #f00 !important;
background-image: none !important;
background-position-x: 0 !important;
background-position-y: 0 !important;
background-position: 0 !important;
background-repeat: no-repeat !important;
-webkit-background-clip: border !important;
-moz-background-clip: border !important;
background-clip: border-box !important;
-webkit-background-origin: padding !important;
-moz-background-origin: padding !important;
background-origin: padding-box !important;
background-size: 0 !important;
background: none !important;
-webkit-box-shadow: 0 1px 0 #000 !important;
box-shadow: 0 1px 0 #000 !important;
color: rgba(0,0,0,0.5) !important;
table-layout: fixed !important;
caption-side: top !important;
empty-cells: hide !important;
list-style-image: none !important;
list-style-position: inside !important;
list-style-type: disc !important;
list-style: none !important;
quotes: none !important;
content: "lol" !important;
counter-increment: none !important;
counter-reset: none !important;
vertical-align: middle !important;
text-align: center !important;
text-align-last: right !important;
text-decoration: none !important;
text-indent: 0 !important;
text-justify: auto !important;
text-outline: none !important;
text-transform: capitalize !important;
text-wrap: normal !important;
-o-text-overflow: ellipsis !important;
text-overflow: ellipsis !important;
text-shadow: 0 1px 0 0 #fff !important;
line-height: 1.5 !important;
white-space: nowrap !important;
word-spacing: normal !important;
word-wrap: normal !important;
word-break: normal !important;
-moz-tab-size: 4 !important;
-o-tab-size: 4 !important;
tab-size: 4 !important;
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
letter-spacing: normal !important;
font-family: Monaco, monospace !important;
font-size: 21px !important;
font-style: italic !important;
font-variant: small-caps !important;
font-weight: bold !important;
font-size-adjust: none !important;
font-stretch: condensed !important;
font: normal 16px/1.25 Arial, sans-serif !important;
opacity: 0.5 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
filter: alpha(opacity=50) !important;
opacity: 1 !important;
-ms-filter: none !important;
filter: none !important;
resize: both !important;
cursor: pointer !important;
unicode-bidi: normal !important;
direction: rtl !important;
break-before: auto !important;
break-after: auto !important;
break-inside: none !important;
orphans: 3 !important;
widows: 3 !important;
zoom: 1 !important;
}
================================================
FILE: test/cases/importance.styl
================================================
@import 'nib'
.test
position: relative !important
top: 0 !important
right: 0 !important
bottom: 0 !important
left: 0 !important
z-index: 0 !important
float: left !important
clear: left !important
display: none !important
visibility: hidden !important
overflow: hidden !important
overflow-x: scroll !important
overflow-y: auto !important
clip: auto !important
box-sizing: border-box !important
margin: 0 !important
margin-top: 0 !important
margin-right: 0 !important
margin-bottom: 0 !important
margin-left: 0 !important
padding: 0 !important
padding-top: 0 !important
padding-right: 0 !important
padding-bottom: 0 !important
padding-left: 0 !important
width: 0 !important
height: 0 !important
min-width: 0 !important
min-height: 0 !important
max-height: 0 !important
max-width: 0 !important
outline: 0 !important
border-collapse: collapse !important
border-spacing: 0 !important
border-color: #000 !important
border-top-color: #000 !important
border-right-color: #000 !important
border-bottom-color: #000 !important
border-left-color: #000 !important
border-style: solid !important
border-top-style: solid !important
border-right-style: solid !important
border-bottom-style: solid !important
border-left-style: solid !important
border-width: 0 !important
border-top-width: 0 !important
border-right-width: 0 !important
border-bottom-width: 0 !important
border-left-width: 0 !important
border: 1px !important
border-top: 1px !important
border-right: 1px !important
border-bottom: 1px !important
border-left: 1px !important
border-radius: 50% !important
border-top-right-radius: 50% !important
border-top-left-radius: 50% !important
border-bottom-left-radius: 50% !important
border-bottom-right-radius: 50% !important
border-image: none !important
background-attachment: fixed !important
background-color: red !important
background-image: none !important
background-position-x: 0 !important
background-position-y: 0 !important
background-position: 0 !important
background-repeat: no-repeat !important
background-clip: border-box !important
background-origin: padding-box !important
background-size: 0 !important
background: none !important
box-shadow: 0 1px 0 #000 !important
color: rgba(0,0,0,0.5) !important
table-layout: fixed !important
caption-side: top !important
empty-cells: hide !important
list-style-image: none !important
list-style-position: inside !important
list-style-type: disc !important
list-style: none !important
quotes: none !important
content: "lol" !important
counter-increment: none !important
counter-reset: none !important
vertical-align: middle !important
text-align: center !important
text-align-last: right !important
text-decoration: none !important
text-indent: 0 !important
text-justify: auto !important
text-outline: none !important
text-transform: capitalize !important
text-wrap: normal !important
text-overflow: ellipsis !important
text-shadow: 0 1px 0 0 #FFF !important
line-height: 1.5 !important
white-space: nowrap !important
word-spacing: normal !important
word-wrap: normal !important
word-break: normal !important
tab-size: 4 !important
hyphens: manual !important
letter-spacing: normal !important
font-family: Monaco, monospace !important
font-size: 21px !important
font-style: italic !important
font-variant: small-caps !important
font-weight: bold !important
font-size-adjust: none !important
font-stretch: condensed !important
font: normal 16px/1.25 Arial, sans-serif !important
opacity: 0.5 !important
opacity: 1 !important
resize: both !important
cursor: pointer !important
unicode-bidi: normal !important
direction: rtl !important
break-before: auto !important
break-after: auto !important
break-inside: none !important
orphans: 3 !important
widows: 3 !important
zoom: 1 !important
================================================
FILE: test/cases/linear-gradient.css
================================================
body {
background: -webkit-linear-gradient(#fff, #000);
background: -moz-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);
background: linear-gradient(#fff, #000);
}
body {
background: -webkit-linear-gradient(top, #fff, #000);
background: -moz-linear-gradient(top, #fff, #000);
background: -o-linear-gradient(top, #fff, #000);
background: -ms-linear-gradient(top, #fff, #000);
background: linear-gradient(to bottom, #fff, #000);
}
body {
background: -webkit-linear-gradient(bottom, #fff, #000);
background: -moz-linear-gradient(bottom, #fff, #000);
background: -o-linear-gradient(bottom, #fff, #000);
background: -ms-linear-gradient(bottom, #fff, #000);
background: linear-gradient(to top, #fff, #000);
}
body {
background: -webkit-linear-gradient(top left, #fff, #000);
background: -moz-linear-gradient(top left, #fff, #000);
background: -o-linear-gradient(top left, #fff, #000);
background: -ms-linear-gradient(top left, #fff, #000);
background: linear-gradient(to bottom right, #fff, #000);
}
body {
background: -webkit-linear-gradient(45deg, #fff, #000);
background: -moz-linear-gradient(45deg, #fff, #000);
background: -o-linear-gradient(45deg, #fff, #000);
background: -ms-linear-gradient(45deg, #fff, #000);
background: linear-gradient(45deg, #fff, #000);
}
body {
background: -webkit-linear-gradient(135deg, #fff, #000);
background: -moz-linear-gradient(135deg, #fff, #000);
background: -o-linear-gradient(135deg, #fff, #000);
background: -ms-linear-gradient(135deg, #fff, #000);
background: linear-gradient(-45deg, #fff, #000);
}
body {
background: -webkit-linear-gradient(top left, #fff, #f00, #00f, #000);
background: -moz-linear-gradient(top left, #fff, #f00, #00f, #000);
background: -o-linear-gradient(top left, #fff, #f00, #00f, #000);
background: -ms-linear-gradient(top left, #fff, #f00, #00f, #000);
background: linear-gradient(to bottom right, #fff, #f00, #00f, #000);
}
body {
background: -webkit-linear-gradient(bottom right, #fff, #000 80%);
background: -moz-linear-gradient(bottom right, #fff, #000 80%);
background: -o-linear-gradient(bottom right, #fff, #000 80%);
background: -ms-linear-gradient(bottom right, #fff, #000 80%);
background: linear-gradient(to top left, #fff, #000 80%);
}
body {
background: -webkit-linear-gradient(right bottom, #fff, #000 80%);
background: -moz-linear-gradient(right bottom, #fff, #000 80%);
background: -o-linear-gradient(right bottom, #fff, #000 80%);
background: -ms-linear-gradient(right bottom, #fff, #000 80%);
background: linear-gradient(to left top, #fff, #000 80%);
}
body {
background: -webkit-linear-gradient(right bottom, #fff 80%, #000);
background: -moz-linear-gradient(right bottom, #fff 80%, #000);
background: -o-linear-gradient(right bottom, #fff 80%, #000);
background: -ms-linear-gradient(right bottom, #fff 80%, #000);
background: linear-gradient(to left top, #fff 80%, #000);
}
body {
background: -webkit-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000);
background: -moz-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000);
background: -o-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000);
background: -ms-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000);
background: linear-gradient(to left top, rgba(0,0,0,0.5) 80%, #000);
}
body {
background: -webkit-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000);
background: -moz-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000);
background: -o-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000);
background: -ms-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000);
background: linear-gradient(to left top, hsla(0,0%,0%,0.5) 80.5%, #000);
}
body {
background: -webkit-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000);
background: -moz-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000);
background: -o-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000);
background: -ms-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000);
background: linear-gradient(to left top, hsla(0,0%,0%,0.5) 80.5%, #000);
}
body {
background: -webkit-linear-gradient(right bottom, #fff 20px, #000);
background: -moz-linear-gradient(right bottom, #fff 20px, #000);
background: -o-linear-gradient(right bottom, #fff 20px, #000);
background: -ms-linear-gradient(right bottom, #fff 20px, #000);
background: linear-gradient(to left top, #fff 20px, #000);
}
body {
background: -webkit-linear-gradient(top, #fff, #000);
background: -moz-linear-gradient(top, #fff, #000);
background: -ms-linear-gradient(top, #fff, #000);
background: -o-linear-gradient(top, #fff, #000);
background: linear-gradient(to bottom, #fff, #000);
}
body {
background: -webkit-linear-gradient(top, #fff, #000), #fff;
background: -moz-linear-gradient(top, #fff, #000), #fff;
background: -ms-linear-gradient(top, #fff, #000), #fff;
background: -o-linear-gradient(top, #fff, #000), #fff;
background: linear-gradient(to bottom, #fff, #000), #fff;
}
body {
-webkit-border-image: -webkit-linear-gradient(top, #fff, #000) 20% stretch stretch;
-moz-border-image: -moz-linear-gradient(top, #fff, #000) 20% stretch stretch;
-o-border-image: -o-linear-gradient(top, #fff, #000) 20% stretch stretch;
border-image: linear-gradient(to bottom, #fff, #000) 20% stretch stretch;
}
body {
-webkit-border-image: -webkit-linear-gradient(top, #fff, #000) 20% stretch stretch;
-moz-border-image: -moz-linear-gradient(top, #fff, #000) 20% stretch stretch;
-o-border-image: -o-linear-gradient(top, #fff, #000) 20% stretch stretch;
border-image: linear-gradient(to bottom, #fff, #000) 20% fill stretch stretch;
}
body {
cursor: -webkit-linear-gradient(50deg, #f00, #0f0);
cursor: -moz-linear-gradient(50deg, #f00, #0f0);
cursor: -ms-linear-gradient(50deg, #f00, #0f0);
cursor: -o-linear-gradient(50deg, #f00, #0f0);
cursor: linear-gradient(40deg, #f00, #0f0);
}
body {
list-style: -webkit-linear-gradient(50deg, #f00, #0f0);
list-style: -moz-linear-gradient(50deg, #f00, #0f0);
list-style: -ms-linear-gradient(50deg, #f00, #0f0);
list-style: -o-linear-gradient(50deg, #f00, #0f0);
list-style: linear-gradient(40deg, #f00, #0f0);
}
body {
list-style-image: -webkit-linear-gradient(50deg, #f00, #0f0);
list-style-image: -moz-linear-gradient(50deg, #f00, #0f0);
list-style-image: -ms-linear-gradient(50deg, #f00, #0f0);
list-style-image: -o-linear-gradient(50deg, #f00, #0f0);
list-style-image: linear-gradient(40deg, #f00, #0f0);
}
================================================
FILE: test/cases/linear-gradient.styl
================================================
@import 'nib/vendor'
@import 'nib/gradients'
body
background: linear-gradient(white, black)
body
background: linear-gradient(top, white, black)
body
background: linear-gradient(to top, white, black)
body
background: linear-gradient(to bottom right, white, black)
body
background: linear-gradient(45deg, white, black)
body
background: linear-gradient(-45deg, white, black)
body
background: linear-gradient(top left, white, red, blue, black)
body
background: linear-gradient(bottom right, white, black 80%)
body
background: linear-gradient(right bottom, white, 80% black)
body
background: linear-gradient(right bottom, 80% white, black)
body
background: linear-gradient(right bottom, 80% rgba(#000,0.5), black)
body
background: linear-gradient(right bottom, 80.5% hsla(0,0,0,0.5), black)
body
background: linear-gradient(right bottom, 80.5% hsla(0,0%,0%,0.5), black)
body
background: linear-gradient(right bottom, 20px white, black)
vendor-prefixes = webkit moz ms o official
body
background: linear-gradient(top, white, black)
body
background: linear-gradient(top, white, black), white
body
border-image: linear-gradient(top, #fff, #000) 20% stretch stretch;
body
border-image: linear-gradient(top, #fff, #000) 20% fill stretch stretch;
gradient-var = linear-gradient(40deg, red, lime)
body
cursor: gradient-var
body
list-style: gradient-var
body
list-style-image: gradient-var
================================================
FILE: test/cases/multiple-gradients.css
================================================
.test1 {
background: -webkit-linear-gradient(bottom, #fff, #000), -webkit-linear-gradient(top, #000, #fff);
background: -moz-linear-gradient(bottom, #fff, #000), -moz-linear-gradient(top, #000, #fff);
background: -o-linear-gradient(bottom, #fff, #000), -o-linear-gradient(top, #000, #fff);
background: -ms-linear-gradient(bottom, #fff, #000), -ms-linear-gradient(top, #000, #fff);
background: linear-gradient(to top, #fff, #000), linear-gradient(to bottom, #000, #fff);
}
.test2 {
background: #fff -webkit-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -webkit-linear-gradient(top, #000, #fff) 10px bottom repeat-y;
background: #fff -moz-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -moz-linear-gradient(top, #000, #fff) 10px bottom repeat-y;
background: #fff -o-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -o-linear-gradient(top, #000, #fff) 10px bottom repeat-y;
background: #fff -ms-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -ms-linear-gradient(top, #000, #fff) 10px bottom repeat-y;
background: #fff linear-gradient(to top, #000, #fff) 0 0 no-repeat, linear-gradient(to bottom, #000, #fff) 10px bottom repeat-y;
}
.test3 {
background-image: -webkit-linear-gradient(bottom, #fff, #000), url("a.png"), -webkit-linear-gradient(top, #000, #fff);
background-image: -moz-linear-gradient(bottom, #fff, #000), url("a.png"), -moz-linear-gradient(top, #000, #fff);
background-image: -o-linear-gradient(bottom, #fff, #000), url("a.png"), -o-linear-gradient(top, #000, #fff);
background-image: -ms-linear-gradient(bottom, #fff, #000), url("a.png"), -ms-linear-gradient(top, #000, #fff);
background-image: linear-gradient(to top, #fff, #000), url("a.png"), linear-gradient(to bottom, #000, #fff);
}
.test4 {
background: -webkit-linear-gradient(top, #000, #fff), -webkit-linear-gradient(bottom, #fff, #000);
background: -moz-linear-gradient(top, #000, #fff), -moz-linear-gradient(bottom, #fff, #000);
background: -o-linear-gradient(top, #000, #fff), -o-linear-gradient(bottom, #fff, #000);
background: -ms-linear-gradient(top, #000, #fff), -ms-linear-gradient(bottom, #fff, #000);
background: linear-gradient(to bottom, #000, #fff), linear-gradient(to top, #fff, #000);
}
================================================
FILE: test/cases/multiple-gradients.styl
================================================
@import 'nib/vendor'
@import 'nib/gradients'
.test1
background: linear-gradient(to top, white, black),
linear-gradient(to bottom, black, white)
.test2
background: #fff \
linear-gradient(to top, black, white) 0 0 no-repeat,
linear-gradient(to bottom, black, white) 10px bottom repeat-y
.test3
background-image: linear-gradient(to top, white, black),
url(a.png),
linear-gradient(to bottom, black, white)
gradient1 = linear-gradient(to top, white, black)
gradient2 = linear-gradient(to bottom, black, white)
.test4
background: gradient2, gradient1
================================================
FILE: test/cases/normalize-reset.css
================================================
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
details,
section,
summary,
aside,
main,
menu,
nav,
figcaption,
figure,
footer,
header,
hgroup {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
b,
strong {
font-weight: bold;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
cursor: pointer;
-webkit-appearance: button;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type='checkbox'],
input[type='radio'] {
box-sizing: border-box;
padding: 0;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
height: auto;
}
input[type='search'] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
================================================
FILE: test/cases/normalize-reset.styl
================================================
@import 'nib/normalize'
normalize-css()
================================================
FILE: test/cases/radial-gradient.css
================================================
body {
background: -webkit-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0));
background: -moz-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0));
background: -o-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0));
background: -ms-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0));
background: radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0));
}
================================================
FILE: test/cases/radial-gradient.styl
================================================
@import 'nib/vendor'
@import 'nib/gradients'
body
background: radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0))
================================================
FILE: test/cases/relative.css
================================================
#login {
position: relative;
left: 10px;
}
================================================
FILE: test/cases/shadow-stroke.css
================================================
button {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
button {
text-shadow: -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), -1px 1px 0 rgba(0,0,0,0.5), 1px 1px 0 rgba(0,0,0,0.5);
}
button {
text-shadow: -1px -1px 0 #f00, 1px -1px 0 #f00, -1px 1px 0 #f00, 1px 1px 0 #f00;
}
================================================
FILE: test/cases/shadow-stroke.styl
================================================
@import 'nib/text/shadow-stroke'
button
shadow-stroke(#000)
button
shadow-stroke(rgba(0, 0, 0, 0.5))
button
shadow-stroke(red)
================================================
FILE: test/cases/text.ellipsis.css
================================================
button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button {
overflow: hidden;
text-overflow: ellipsis;
}
button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
================================================
FILE: test/cases/text.ellipsis.styl
================================================
@import 'nib/text/ellipsis'
@import 'nib/overflow'
button
ellipsis()
button
ellipsis(false)
button
overflow: ellipsis
================================================
FILE: test/cases/vendor.css
================================================
button {
-webkit-box-shadow: 1px 1px 5px #eee;
box-shadow: 1px 1px 5px #eee;
}
button {
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
button {
opacity: 0.75;
white-space: nowrap;
}
button {
-webkit-animation-name: myAnimation;
-moz-animation-name: myAnimation;
animation-name: myAnimation;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
}
button {
-webkit-animation: myAnimation 1s ease;
-moz-animation: myAnimation 1s ease;
animation: myAnimation 1s ease;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
section {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-moz-column-rule: 1px solid #bbb;
column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}
section {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-rule-width: 1px;
-moz-column-rule-width: 1px;
column-rule-width: 1px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-color: #bbb;
-moz-column-rule-color: #bbb;
column-rule-color: #bbb;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
section {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-rule-width: 1px;
-moz-column-rule-width: 1px;
column-rule-width: 1px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-color: #bbb;
-moz-column-rule-color: #bbb;
column-rule-color: #bbb;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}
button {
-webkit-background-origin: border, padding;
-moz-background-origin: border, padding;
background-origin: border-box, padding-box;
-webkit-background-clip: border, padding;
-moz-background-clip: border, padding;
background-clip: border-box, padding-box;
}
button {
-o-transition: all 0.1s ease-in-out 1s;
-webkit-transition: all 0.1s ease-in-out 1s;
-moz-transition: all 0.1s ease-in-out 1s;
transition: all 0.1s ease-in-out 1s;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
button {
-o-transition-property: all;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all;
-o-transition-duration: 0.1s;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
transition-duration: 0.1s;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-o-transition-delay: 1s;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
transition-delay: 1s;
}
button {
-o-transform: rotateY(45deg);
-webkit-transform: rotateY(45deg);
-moz-transform: rotateY(45deg);
transform: rotateY(45deg);
}
button {
-o-transform: perspective(500px);
-webkit-transform: perspective(500px);
-moz-transform: perspective(500px);
transform: perspective(500px);
}
button {
-webkit-perspective: 500;
-moz-perspective: 500;
perspective: 500;
}
section {
-o-border-image: url("image.png") 20% stretch stretch;
-webkit-border-image: url("image.png") 20% stretch stretch;
-moz-border-image: url("image.png") 20% stretch stretch;
border-image: url("image.png") 20% stretch stretch;
}
section {
-o-border-image: url("image.png") 20% stretch stretch;
-webkit-border-image: url("image.png") 20% stretch stretch;
-moz-border-image: url("image.png") 20% stretch stretch;
border-image: url("image.png") 20% fill stretch stretch;
}
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
section {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
================================================
FILE: test/cases/vendor.inherit.css
================================================
button {
-webkit-box-shadow: inherit;
box-shadow: inherit;
}
button {
opacity: inherit;
-ms-filter: inherit;
filter: inherit;
}
button {
opacity: inherit;
white-space: inherit;
}
button {
-webkit-animation-name: inherit;
-moz-animation-name: inherit;
animation-name: inherit;
-webkit-animation-delay: inherit;
-moz-animation-delay: inherit;
animation-delay: inherit;
-webkit-animation-duration: inherit;
-moz-animation-duration: inherit;
animation-duration: inherit;
-webkit-animation-iteration-count: inherit;
-moz-animation-iteration-count: inherit;
animation-iteration-count: inherit;
-webkit-animation-direction: inherit;
-moz-animation-direction: inherit;
animation-direction: inherit;
-webkit-animation-fill-mode: inherit;
-moz-animation-fill-mode: inherit;
animation-fill-mode: inherit;
-webkit-animation-play-state: inherit;
-moz-animation-play-state: inherit;
animation-play-state: inherit;
-webkit-animation-timing-function: inherit;
-moz-animation-timing-function: inherit;
animation-timing-function: inherit;
}
button {
-webkit-animation: inherit;
-moz-animation: inherit;
animation: inherit;
}
button {
-webkit-appearance: inherit;
-moz-appearance: inherit;
appearance: inherit;
}
section {
-webkit-column-count: inherit;
-moz-column-count: inherit;
column-count: inherit;
-webkit-column-rule: inherit;
-moz-column-rule: inherit;
column-rule: inherit;
-webkit-column-gap: inherit;
-moz-column-gap: inherit;
column-gap: inherit;
}
section {
-webkit-column-count: inherit;
-moz-column-count: inherit;
column-count: inherit;
-webkit-column-rule-width: inherit;
-moz-column-rule-width: inherit;
column-rule-width: inherit;
-webkit-column-rule-style: inherit;
-moz-column-rule-style: inherit;
column-rule-style: inherit;
-webkit-column-rule-color: inherit;
-moz-column-rule-color: inherit;
column-rule-color: inherit;
-webkit-column-width: inherit;
-moz-column-width: inherit;
column-width: inherit;
}
section {
-webkit-column-count: inherit;
-moz-column-count: inherit;
column-count: inherit;
-webkit-column-rule-width: inherit;
-moz-column-rule-width: inherit;
column-rule-width: inherit;
-webkit-column-rule-style: inherit;
-moz-column-rule-style: inherit;
column-rule-style: inherit;
-webkit-column-rule-color: inherit;
-moz-column-rule-color: inherit;
column-rule-color: inherit;
-webkit-column-gap: inherit;
-moz-column-gap: inherit;
column-gap: inherit;
}
button {
-webkit-background-origin: inherit;
-moz-background-origin: inherit;
background-origin: inherit;
-webkit-background-clip: inherit;
-moz-background-clip: inherit;
background-clip: inherit;
}
button {
-o-transition: inherit;
-webkit-transition: inherit;
-moz-transition: inherit;
transition: inherit;
-webkit-backface-visibility: inherit;
-moz-backface-visibility: inherit;
backface-visibility: inherit;
}
button {
-o-transition-property: inherit;
-webkit-transition-property: inherit;
-moz-transition-property: inherit;
transition-property: inherit;
-o-transition-duration: inherit;
-webkit-transition-duration: inherit;
-moz-transition-duration: inherit;
transition-duration: inherit;
-o-transition-timing-function: inherit;
-webkit-transition-timing-function: inherit;
-moz-transition-timing-function: inherit;
transition-timing-function: inherit;
-o-transition-delay: inherit;
-webkit-transition-delay: inherit;
-moz-transition-delay: inherit;
transition-delay: inherit;
}
button {
-o-transform: inherit;
-webkit-transform: inherit;
-moz-transform: inherit;
transform: inherit;
}
button {
-o-transform: inherit;
-webkit-transform: inherit;
-moz-transform: inherit;
transform: inherit;
}
button {
-webkit-perspective: inherit;
-moz-perspective: inherit;
perspective: inherit;
}
section {
-o-border-image: inherit;
-webkit-border-image: inherit;
-moz-border-image: inherit;
border-image: inherit;
}
section {
-o-border-image: inherit;
-webkit-border-image: inherit;
-moz-border-image: inherit;
border-image: inherit;
}
p {
-webkit-hyphens: inherit;
-moz-hyphens: inherit;
hyphens: inherit;
}
section {
-webkit-overflow-scrolling: inherit;
overflow-scrolling: inherit;
}
================================================
FILE: test/cases/vendor.inherit.styl
================================================
@import 'nib/vendor'
@import 'nib/gradients'
vendor-prefixes = webkit moz official
button
box-shadow: inherit
button
opacity: inherit
support-for-ie = false
button
opacity: inherit
whitespace: inherit
button
animation-name: inherit;
animation-delay: inherit;
animation-duration: inherit;
animation-iteration-count: inherit;
animation-direction: inherit;
animation-fill-mode: inherit;
animation-play-state: inherit;
animation-timing-function: inherit
button
animation: inherit;
button
appearance: inherit;
section
column-count: inherit;
column-rule: inherit;
column-gap: inherit;
section
column-count: inherit;
column-rule-width: inherit;
column-rule-style: inherit;
column-rule-color: inherit;
column-width: inherit;
section
column-count: inherit;
column-rule-width: inherit;
column-rule-style: inherit;
column-rule-color: inherit;
column-gap: inherit;
prepend(vendor-prefixes, o)
button
background-origin: inherit;
background-clip: inherit;
button
transition: inherit
backface-visibility: inherit
button
transition-property: inherit
transition-duration: inherit
transition-timing-function: inherit
transition-delay: inherit
button
transform: inherit
button
transform: inherit
button
perspective: inherit
section
border-image: inherit
section
border-image: inherit;
p
hyphens: inherit
section
overflow-scrolling: inherit
================================================
FILE: test/cases/vendor.initial.css
================================================
button {
-webkit-box-shadow: initial;
box-shadow: initial;
}
button {
opacity: initial;
-ms-filter: initial;
filter: initial;
}
button {
opacity: initial;
white-space: initial;
}
button {
-webkit-animation-name: initial;
-moz-animation-name: initial;
animation-name: initial;
-webkit-animation-delay: initial;
-moz-animation-delay: initial;
animation-delay: initial;
-webkit-animation-duration: initial;
-moz-animation-duration: initial;
animation-duration: initial;
-webkit-animation-iteration-count: initial;
-moz-animation-iteration-count: initial;
animation-iteration-count: initial;
-webkit-animation-direction: initial;
-moz-animation-direction: initial;
animation-direction: initial;
-webkit-animation-fill-mode: initial;
-moz-animation-fill-mode: initial;
animation-fill-mode: initial;
-webkit-animation-play-state: initial;
-moz-animation-play-state: initial;
animation-play-state: initial;
-webkit-animation-timing-function: initial;
-moz-animation-timing-function: initial;
animation-timing-function: initial;
}
button {
-webkit-animation: initial;
-moz-animation: initial;
animation: initial;
}
button {
-webkit-appearance: initial;
-moz-appearance: initial;
appearance: initial;
}
section {
-webkit-column-count: initial;
-moz-column-count: initial;
column-count: initial;
-webkit-column-rule: initial;
-moz-column-rule: initial;
column-rule: initial;
-webkit-column-gap: initial;
-moz-column-gap: initial;
column-gap: initial;
}
section {
-webkit-column-count: initial;
-moz-column-count: initial;
column-count: initial;
-webkit-column-rule-width: initial;
-moz-column-rule-width: initial;
column-rule-width: initial;
-webkit-column-rule-style: initial;
-moz-column-rule-style: initial;
column-rule-style: initial;
-webkit-column-rule-color: initial;
-moz-column-rule-color: initial;
column-rule-color: initial;
-webkit-column-width: initial;
-moz-column-width: initial;
column-width: initial;
}
section {
-webkit-column-count: initial;
-moz-column-count: initial;
column-count: initial;
-webkit-column-rule-width: initial;
-moz-column-rule-width: initial;
column-rule-width: initial;
-webkit-column-rule-style: initial;
-moz-column-rule-style: initial;
column-rule-style: initial;
-webkit-column-rule-color: initial;
-moz-column-rule-color: initial;
column-rule-color: initial;
-webkit-column-gap: initial;
-moz-column-gap: initial;
column-gap: initial;
}
button {
-webkit-background-origin: initial;
-moz-background-origin: initial;
background-origin: initial;
-webkit-background-clip: initial;
-moz-background-clip: initial;
background-clip: initial;
}
button {
-o-transition: initial;
-webkit-transition: initial;
-moz-transition: initial;
transition: initial;
-webkit-backface-visibility: initial;
-moz-backface-visibility: initial;
backface-visibility: initial;
}
button {
-o-transition-property: initial;
-webkit-transition-property: initial;
-moz-transition-property: initial;
transition-property: initial;
-o-transition-duration: initial;
-webkit-transition-duration: initial;
-moz-transition-duration: initial;
transition-duration: initial;
-o-transition-timing-function: initial;
-webkit-transition-timing-function: initial;
-moz-transition-timing-function: initial;
transition-timing-function: initial;
-o-transition-delay: initial;
-webkit-transition-delay: initial;
-moz-transition-delay: initial;
transition-delay: initial;
}
button {
-o-transform: initial;
-webkit-transform: initial;
-moz-transform: initial;
transform: initial;
}
button {
-o-transform: initial;
-webkit-transform: initial;
-moz-transform: initial;
transform: initial;
}
button {
-webkit-perspective: initial;
-moz-perspective: initial;
perspective: initial;
}
section {
-o-border-image: initial;
-webkit-border-image: initial;
-moz-border-image: initial;
border-image: initial;
}
section {
-o-border-image: initial;
-webkit-border-image: initial;
-moz-border-image: initial;
border-image: initial;
}
p {
-webkit-hyphens: initial;
-moz-hyphens: initial;
hyphens: initial;
}
section {
-webkit-overflow-scrolling: initial;
overflow-scrolling: initial;
}
================================================
FILE: test/cases/vendor.initial.styl
================================================
@import 'nib/vendor'
@import 'nib/gradients'
vendor-prefixes = webkit moz official
button
box-shadow: initial
button
opacity: initial
support-for-ie = false
button
opacity: initial
whitespace: initial
button
animation-name: initial;
animation-delay: initial;
animation-duration: initial;
animation-iteration-count: initial;
animation-direction: initial;
animation-fill-mode: initial;
animation-play-state: initial;
animation-timing-function: initial
button
animation: initial;
button
appearance: initial;
section
column-count: initial;
column-rule: initial;
column-gap: initial;
section
column-count: initial;
column-rule-width: initial;
column-rule-style: initial;
column-rule-color: initial;
column-width: initial;
section
column-count: initial;
column-rule-width: initial;
column-rule-style: initial;
column-rule-color: initial;
column-gap: initial;
prepend(vendor-prefixes, o)
button
background-origin: initial;
background-clip: initial;
button
transition: initial
backface-visibility: initial
button
transition-property: initial
transition-duration: initial
transition-timing-function: initial
transition-delay: initial
button
transform: initial
button
transform: initial
button
perspective: initial
section
border-image: initial
section
border-image: initial;
p
hyphens: initial
section
overflow-scrolling: initial
================================================
FILE: test/cases/vendor.placeholder.css
================================================
body::-webkit-input-placeholder {
color: #333;
font-weight: normal;
font-family: Helvetica, arial, sans-serif;
}
body:-moz-placeholder {
color: #333;
font-weight: normal;
font-family: Helvetica, arial, sans-serif;
}
body::-moz-placeholder {
color: #333;
font-weight: normal;
font-family: Helvetica, arial, sans-serif;
}
body:-ms-input-placeholder {
color: #333;
font-weight: normal;
font-family: Helvetica, arial, sans-serif;
}
.placeholder-red::-webkit-input-placeholder {
color: #f00;
}
.placeholder-red:-moz-placeholder {
color: #f00;
}
.placeholder-red::-moz-placeholder {
color: #f00;
}
.placeholder-red:-ms-input-placeholder {
color: #f00;
}
.placeholder-green::-webkit-input-placeholder {
color: #008000;
}
.placeholder-green:-moz-placeholder {
color: #008000;
}
.placeholder-green::-moz-placeholder {
color: #008000;
}
.placeholder-green:-ms-input-placeholder {
color: #008000;
}
.input-placeholder-gray::-webkit-input-placeholder {
color: #808080;
}
.input-placeholder-gray:-moz-placeholder {
color: #808080;
}
.input-placeholder-gray::-moz-placeholder {
color: #808080;
}
.input-placeholder-gray:-ms-input-placeholder {
color: #808080;
}
textarea::-webkit-input-placeholder {
font-style: italic;
font-weight: bold;
padding: 4px 10px;
}
textarea:-moz-placeholder {
font-style: italic;
font-weight: bold;
padding: 4px 10px;
}
textarea::-moz-placeholder {
font-style: italic;
font-weight: bold;
padding: 4px 10px;
}
textarea:-ms-input-placeholder {
font-style: italic;
font-weight: bold;
padding: 4px 10px;
}
================================================
FILE: test/cases/vendor.placeholder.styl
================================================
@import 'nib/vendor'
$placeholderFont = Helvetica, arial, sans-serif
body
placeholder(color #333, font-weight normal, font-family $placeholderFont)
.placeholder-red
placeholder(color red,)
green-placeholder()
color green
.placeholder-green
placeholder(green-placeholder)
.input-placeholder-gray
input-placeholder(color gray,)
textarea
placeholder((font-style italic) (font-weight bold) (padding '4px 10px'))
================================================
FILE: test/cases/vendor.styl
================================================
@import 'nib/vendor'
@import 'nib/gradients'
vendor-prefixes = webkit moz official
button
box-shadow: 1px 1px 5px #eee
button
opacity: 0.5
support-for-ie = false
button
opacity: 0.75
whitespace: no-wrap
button
animation-name: myAnimation;
animation-delay: 1s;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
animation-play-state: running;
animation-timing-function: ease
button
animation: myAnimation 1s ease;
button
appearance: none;
section
column-count: 2;
column-rule: 1px solid #bbb;
column-gap: 2em;
section
column-count: 2;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #bbb;
column-width: 200px;
section
column-count: 2;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #bbb;
column-gap: 2em;
prepend(vendor-prefixes, o)
button
background-origin: border-box, padding-box;
background-clip: border-box, padding-box;
button
transition: all 0.1s ease-in-out 1s
backface-visibility: hidden
button
transition-property: all
transition-duration: 0.1s
transition-timing-function: ease-in-out
transition-delay: 1s
button
transform: rotateY(45deg)
button
transform: perspective(500px)
button
perspective: 500
section
border-image: url("image.png") 20% stretch stretch;
section
border-image: url("image.png") 20% fill stretch stretch;
p
hyphens: auto
section
overflow-scrolling: touch
================================================
FILE: test/cases/vendor.values.css
================================================
button {
-webkit-transition: -webkit-transform;
-moz-transition: -moz-transform;
-o-transition: -o-transform;
-ms-transition: -ms-transform;
transition: transform;
}
button {
-webkit-transition: -webkit-transform 0.3s 0.2s linear;
-moz-transition: -moz-transform 0.3s 0.2s linear;
-o-transition: -o-transform 0.3s 0.2s linear;
-ms-transition: -ms-transform 0.3s 0.2s linear;
transition: transform 0.3s 0.2s linear;
}
button {
-webkit-transition: -webkit-transform cubic-bezier(1, 1, 1);
-moz-transition: -moz-transform cubic-bezier(1, 1, 1);
-o-transition: -o-transform cubic-bezier(1, 1, 1);
-ms-transition: -ms-transform cubic-bezier(1, 1, 1);
transition: transform cubic-bezier(1, 1, 1);
}
button {
-webkit-transition: -webkit-transform 2s, width 0.3s linear, height;
-moz-transition: -moz-transform 2s, width 0.3s linear, height;
-o-transition: -o-transform 2s, width 0.3s linear, height;
-ms-transition: -ms-transform 2s, width 0.3s linear, height;
transition: transform 2s, width 0.3s linear, height;
}
button {
-webkit-transition: height, -webkit-transform 2s, width 0.3s linear;
-moz-transition: height, -moz-transform 2s, width 0.3s linear;
-o-transition: height, -o-transform 2s, width 0.3s linear;
-ms-transition: height, -ms-transform 2s, width 0.3s linear;
transition: height, transform 2s, width 0.3s linear;
}
button {
-webkit-transition: -webkit-transform 1s !important;
-moz-transition: -moz-transform 1s !important;
-o-transition: -o-transform 1s !important;
-ms-transition: -ms-transform 1s !important;
transition: transform 1s !important;
}
button {
-webkit-transition: -webkit-transform, height !important;
-moz-transition: -moz-transform, height !important;
-o-transition: -o-transform, height !important;
-ms-transition: -ms-transform, height !important;
transition: transform, height !important;
}
button {
-webkit-transition: -webkit-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
-moz-transition: -moz-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
-o-transition: -o-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
-ms-transition: -ms-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
transition: transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
}
================================================
FILE: test/cases/vendor.values.styl
================================================
@import 'nib/vendor'
button
transition: transform
button
transition: transform .3s .2s linear
button
transition: transform cubic-bezier(1,1,1)
button
transition: transform 2s, width .3s linear, height
button
transition: height, transform 2s, width .3s linear
button
transition: transform 1s !important
button
transition: transform, height !important
button
transition: transform 1s, width 2s linear, cubic-bezier(1,1,1)
================================================
FILE: test/clearfix.styl
================================================
@import 'nib/clearfix'
support-for-ie = true
#clearfix-left-only,
#clearfix-left-right
clearfix()
background: blue
div
background: green
margin: 10px
width: 47%
div.left
float: left
div.right
float: right
#clearfix-left-right
margin-top: 10px
================================================
FILE: test/color-images.styl
================================================
@import 'nib/color-image'
#color-images
.rgba
background: color-image(rgba(blue, 0.3))
.rgb
background: color-image(rgb(200, 150, 150))
.hex
background: color-image(#fff)
.hexa
background: color-image(#ffffff80)
.hexa-short
background: color-image(#0005)
================================================
FILE: test/gradients.styl
================================================
@import 'nib/gradients'
#gradients tr
height: 50px
color: white
td
padding: 0
width: 150px
&:first-child
border-right: 1px solid #fff
#gradients
tr:nth-child(1)
td:first-child
background: linear-gradient(top, yellow, blue)
td:last-child
background: linear-gradient-image(50px, yellow, blue)
tr:nth-child(2)
td:first-child
background: linear-gradient(top, red, green, yellow, blue)
td:last-child
background: linear-gradient-image(50px, red, green, yellow, blue)
tr:nth-child(3)
td:first-child
background: linear-gradient(top, red, green 10%, 90% yellow, blue)
td:last-child
background: linear-gradient-image(50px, red, green 10%, 90% yellow, blue)
tr:nth-child(4)
td:first-child
background: linear-gradient(top, red 15, green 80%, white, 90% yellow, blue)
td:last-child
background: linear-gradient-image(50px, red 15, green 80%, white, 90% yellow, blue)
tr:nth-child(5)
td:first-child
background: linear-gradient(bottom, #fff, #000)
td:last-child
background: linear-gradient-image(50px bottom, #fff, #000)
tr:nth-child(6)
td:first-child
background: linear-gradient(left, #fff, #000)
td:last-child
background: linear-gradient-image(150px left, #fff, #000)
tr:nth-child(7)
td:first-child
background: linear-gradient(right, #008AB4, #E9FAFF, 2% #90E4FD, #1FCBFF, 80% #008AB4)
td:last-child
background: linear-gradient-image(150px right, #008AB4, #E9FAFF, 2% #90E4FD, #1FCBFF, 80% #008AB4)
tr:nth-child(8)
td:first-child
background: linear-gradient(top, red, 50% green, blue)
td:last-child
background: linear-gradient-image(50px top, red, 50% green, blue)
tr:nth-child(9)
td:first-child
background: linear-gradient(50px top, red, green, yellow, blue)
================================================
FILE: test/index.pug
================================================
html
head
title Nib
link(rel='stylesheet', href='/test.css')
link(rel='stylesheet', href='/gradients.css')
link(rel='stylesheet', href='/buttons.css')
link(rel='stylesheet', href='/clearfix.css')
link(rel='stylesheet', href='/color-images.css')
script(src='/jquery.min.js')
script.
$(function(){
$(':button, :submit, a.button').click(function(){
return false;
});
});
body
h2 Gradients
table#gradients
- var n = 9
tbody
- while (n--)
tr
td
td
h2 Color images
#color-images
.rgba rgba()
.hexa-short #0003
.hexa #ffffff80
.rgb rgb()
.hex #fff
h2 Clearfix
div#clearfix-left-only
div
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo
| turpis quis mauris tempus commodo a non tellus. Sed eu convallis
| mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed
| risus lectus. Proin vulputate elit sed eros consectetur interdum.
div#clearfix-left-right
div.left
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo
| turpis quis mauris tempus commodo a non tellus. Sed eu convallis
| mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed
| risus lectus. Proin vulputate elit sed eros consectetur interdum.
div.right
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo
| turpis quis mauris tempus commodo a non tellus. Sed eu convallis
| mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed
| risus lectus. Proin vulputate elit sed eros consectetur interdum.
================================================
FILE: test/public/.gitignore
================================================
================================================
FILE: test/runner.js
================================================
/**
* Module dependencies.
*/
var stylus = require('stylus'),
nib = require('../'),
expect = require('chai').expect,
fs = require('fs');
/**
* Read test/cases directory and filter all `.styl` files, then remove
* this extension for each file in the collection and prepare to test.
*/
var cases = fs.readdirSync('test/cases').filter(function(file){
return ~file.indexOf('.styl'); // bitwise flip to treat result as truthy.
}).map(function(file){
return file.replace('.styl', '');
});
/*
* For each `.styl` and `.css` pair in `test/cases`, compile stylus to css
* and compare actual result to expected css.
*/
describe('integration', function(){
cases.forEach(function(test){
var name = test.replace(/[-.]/g, ' ');
it(name, function(){
var path = 'test/cases/' + test + '.styl';
var styl = fs.readFileSync(path, 'utf8').replace(/\r/g, '');
var css = fs.readFileSync('test/cases/' + test + '.css', 'utf8').replace(/\r/g, '').trim();
var style = stylus(styl)
.use(nib())
.set('filename', path)
.define('url', stylus.url());
if (~test.indexOf('compress')) {
style.set('compress', true);
}
style.render(function(err, actual){
if (err) throw err;
expect(actual.trim()).equal(css);
});
});
});
});
================================================
FILE: test/server.js
================================================
/**
* Module dependencies.
*/
var stylus = require('stylus'),
serveStatic = require('serve-static'),
connect = require('connect'),
pug = require('pug'),
nib = require('../');
/**
* Server.
*/
var server = connect();
function compile(str, path) {
return stylus(str)
.set('filename', path)
.use(nib());
}
server.use(stylus.middleware({
src: __dirname
, dest: __dirname + '/public'
, force: true
, compile: compile
}));
server.use(serveStatic(__dirname + '/public'));
server.use(function(req, res){
pug.renderFile(__dirname + '/index.pug', function(err, str){
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end(str);
});
});
server.listen(3000);
console.log('Server listening on port 3000');
================================================
FILE: test/test.styl
================================================
@import 'nib/vendor'
gray = #ebebeb
body
padding: 50px
h1, h2, h3
font-family: helvetica, arial
table
border-collapse: collapse
td
padding: 3px 10px
border-left: 1px solid #eee
&:first-child
font: 12px helvetica, arial
tr:nth-child(4n)
border-bottom: 1px solid #eee
td
padding-bottom: 15px
tr:nth-child(4n+1)
td
padding-top: 15px
#color-images
width: 400
height: 300
background: url(http://f.cl.ly/items/0W1R2J2L3g2C2L3p1l1e/Image%202011.08.26%2011:42:20%20AM.png) center
box-sizing: border-box
padding-top: 130px
text-align: center
div
display: inline-block
width: 50px
height: 50px
margin: 0 15px
box-sizing: border-box
padding-top: 18px
border: 1px solid #fff
font: 9px Lucida Grande
color: #666
gitextract_t6ep1eh2/
├── .editorconfig
├── .github/
│ └── workflows/
│ └── ci.yml
├── .gitignore
├── .mocharc.json
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── docs/
│ └── README.md
├── iconic/
│ ├── demo.html
│ └── iconic_stroke.otf
├── index.styl
├── lib/
│ ├── nib/
│ │ ├── border-radius.styl
│ │ ├── border.styl
│ │ ├── clearfix.styl
│ │ ├── color-image.styl
│ │ ├── config.styl
│ │ ├── flex.styl
│ │ ├── gradients.styl
│ │ ├── iconic.styl
│ │ ├── image.styl
│ │ ├── index.styl
│ │ ├── normalize/
│ │ │ ├── base.styl
│ │ │ ├── embed.styl
│ │ │ ├── forms.styl
│ │ │ ├── groups.styl
│ │ │ ├── html5.styl
│ │ │ ├── index.styl
│ │ │ ├── links.styl
│ │ │ ├── tables.styl
│ │ │ └── text.styl
│ │ ├── overflow.styl
│ │ ├── positions.styl
│ │ ├── reset.styl
│ │ ├── size.styl
│ │ ├── text/
│ │ │ ├── aliases.styl
│ │ │ ├── ellipsis.styl
│ │ │ ├── hide-text.styl
│ │ │ ├── index.styl
│ │ │ ├── replace-text.styl
│ │ │ └── shadow-stroke.styl
│ │ └── vendor.styl
│ ├── nib.js
│ └── nodes/
│ ├── color-image.js
│ ├── gradient.js
│ └── vendor-helpers.js
├── package.json
└── test/
├── cases/
│ ├── absolute.css
│ ├── absolute.styl
│ ├── border-radius.css
│ ├── border-radius.styl
│ ├── border.css
│ ├── border.styl
│ ├── clearfix.css
│ ├── clearfix.styl
│ ├── fixed.css
│ ├── fixed.styl
│ ├── flex.css
│ ├── flex.styl
│ ├── image.css
│ ├── image.styl
│ ├── importance.css
│ ├── importance.styl
│ ├── linear-gradient.css
│ ├── linear-gradient.styl
│ ├── multiple-gradients.css
│ ├── multiple-gradients.styl
│ ├── normalize-reset.css
│ ├── normalize-reset.styl
│ ├── radial-gradient.css
│ ├── radial-gradient.styl
│ ├── relative.css
│ ├── shadow-stroke.css
│ ├── shadow-stroke.styl
│ ├── text.ellipsis.css
│ ├── text.ellipsis.styl
│ ├── vendor.css
│ ├── vendor.inherit.css
│ ├── vendor.inherit.styl
│ ├── vendor.initial.css
│ ├── vendor.initial.styl
│ ├── vendor.placeholder.css
│ ├── vendor.placeholder.styl
│ ├── vendor.styl
│ ├── vendor.values.css
│ └── vendor.values.styl
├── clearfix.styl
├── color-images.styl
├── gradients.styl
├── index.pug
├── public/
│ └── .gitignore
├── runner.js
├── server.js
└── test.styl
SYMBOL INDEX (6 symbols across 5 files)
FILE: lib/nib.js
function plugin (line 49) | function plugin() {
FILE: lib/nodes/color-image.js
function ColorImage (line 49) | function ColorImage(color) {
FILE: lib/nodes/gradient.js
function Gradient (line 72) | function Gradient(size, start) {
FILE: lib/nodes/vendor-helpers.js
function normalize (line 13) | function normalize(property, value, prefix){
function normalizeGradient (line 46) | function normalizeGradient(parts, prefix){
FILE: test/server.js
function compile (line 17) | function compile(str, path) {
Condensed preview — 94 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (135K chars).
[
{
"path": ".editorconfig",
"chars": 243,
"preview": "# This file is for unifying the coding style for different editors and IDEs\n# editorconfig.org\n\nroot = true\n\n[*]\nend_of_"
},
{
"path": ".github/workflows/ci.yml",
"chars": 1488,
"preview": "# Github actions workflow name\nname: CI\n\n# Triggers the workflow on push or pull request events\non:\n push:\n branches"
},
{
"path": ".gitignore",
"chars": 59,
"preview": ".idea\n*.css\n!test/cases/*.css\n.DS_Store\nnode_modules\n*.swp\n"
},
{
"path": ".mocharc.json",
"chars": 149,
"preview": "{\n \"require\": \"chai\",\n \"reporter\": \"spec\",\n \"diff\": true,\n \"color\": true,\n \"exit\": true,\n \"extension\": [\".js\"],\n "
},
{
"path": ".npmignore",
"chars": 89,
"preview": "node_modules\ntest\n.github\nCHANGELOG.md\n.mocharc.json\n.editorconfig\n.npmignore\n.gitignore\n"
},
{
"path": "CHANGELOG.md",
"chars": 956,
"preview": "# Changelog\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changel"
},
{
"path": "LICENSE",
"chars": 1157,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2022 iChenLei <chenleicoder@foxmail.com>\nCopyright (c) 2014 TJ Holowaychuk <tj@visi"
},
{
"path": "README.md",
"chars": 2320,
"preview": "# Nib [](https://www.npmjs.com/package/nib) [![npm](https://img.shields.io/npm/d"
},
{
"path": "docs/README.md",
"chars": 6524,
"preview": "# Mixins\n## Gradient\nNib's gradient support is by far the largest feature it provides. Not only is the syntax extremely "
},
{
"path": "iconic/demo.html",
"chars": 5517,
"preview": "<html>\n<head>\n<link rel=\"stylesheet\" href=\"iconic.css\" type=\"text/css\" media=\"screen\" title=\"no title\" charset=\"utf-8\">\n"
},
{
"path": "index.styl",
"chars": 19,
"preview": "@import 'lib/nib/'\n"
},
{
"path": "lib/nib/border-radius.styl",
"chars": 1489,
"preview": "/*\n * Helper for border-radius().\n */\n\n-apply-border-radius(pos, importance)\n if length(pos) == 3\n // border-radius:"
},
{
"path": "lib/nib/border.styl",
"chars": 151,
"preview": "/*\n * border: <color>\n * border: ...\n */\n\nborder(color, args...)\n if color is a 'color'\n border: 1px solid color arg"
},
{
"path": "lib/nib/clearfix.styl",
"chars": 763,
"preview": "/*\n * The Magnificent Micro Clearfix\n *\n * Useful for clearing floats without structural markup.\n * Prevents margin-coll"
},
{
"path": "lib/nib/color-image.styl",
"chars": 172,
"preview": "color-image(color)\n error('node-canvas is required for color-image()') unless has-canvas\n colorImage = create-color-im"
},
{
"path": "lib/nib/config.styl",
"chars": 150,
"preview": "/*\n * Support for ie defaulting to true.\n */\n\nsupport-for-ie ?= true\n\n/*\n * Default vendor prefixes.\n */\n\nvendor-prefixe"
},
{
"path": "lib/nib/flex.styl",
"chars": 5378,
"preview": "/*\n * Vendor \"display: flex\" support with fallback to obsolete versions.\n */\n\nflex-version ?= box flex\n\n//\n// 1. Display"
},
{
"path": "lib/nib/gradients.styl",
"chars": 2016,
"preview": "@import 'config'\n\n/*\n * Implicit color stop position.\n */\n\npos-in-stops(i, stops)\n len = length(stops)\n if len - 1 == "
},
{
"path": "lib/nib/iconic.styl",
"chars": 282,
"preview": "iconic-stroke(path)\n @font-face\n font-family: 'IconicStroke'\n src: url(path + '/iconic_stroke.eot')\n src: loca"
},
{
"path": "lib/nib/image.styl",
"chars": 956,
"preview": "/*\n * Define background-image as `path` with optional width and height, adding an\n * @2x variant.\n *\n * affected by gith"
},
{
"path": "lib/nib/index.styl",
"chars": 272,
"preview": "@import 'border'\n@import 'border-radius'\n@import 'clearfix'\n@import 'color-image'\n@import 'flex'\n@import 'gradients'\n@im"
},
{
"path": "lib/nib/normalize/base.styl",
"chars": 242,
"preview": "// Based in Nicolas Gallagher's git.io/normalize\nnormalize-base()\n html // Prevent iOS text size adjust after orientati"
},
{
"path": "lib/nib/normalize/embed.styl",
"chars": 206,
"preview": "// Based in Nicolas Gallagher's git.io/normalize\nnormalize-embed()\n img // No border when inside `a` in IE 8~10.\n bo"
},
{
"path": "lib/nib/normalize/forms.styl",
"chars": 2345,
"preview": "// Based in Nicolas Gallagher's git.io/normalize\nnormalize-forms()\n // Known limitation: Chrome and Safari on OS X allo"
},
{
"path": "lib/nib/normalize/groups.styl",
"chars": 480,
"preview": "// Based in Nicolas Gallagher's git.io/normalize\nnormalize-groups()\n figure // Margin should exist in IE 8~9 / Safari.\n"
},
{
"path": "lib/nib/normalize/html5.styl",
"chars": 747,
"preview": "// Based in Nicolas Gallagher's git.io/normalize\nnormalize-html5()\n // `block` display for HTML5 elements in IE 8~11 an"
},
{
"path": "lib/nib/normalize/index.styl",
"chars": 370,
"preview": "// Based in Nicolas Gallagher's git.io/normalize\n@import './base'\n@import './html5'\n@import './links'\n@import './text'\n@"
},
{
"path": "lib/nib/normalize/links.styl",
"chars": 219,
"preview": "// Based in Nicolas Gallagher's git.io/normalize\nnormalize-links()\n a // No gray bg color in active links in IE 10.\n "
},
{
"path": "lib/nib/normalize/tables.styl",
"chars": 194,
"preview": "// Based in Nicolas Gallagher's git.io/normalize\nnormalize-tables()\n table // Remove most spacing between table cells.\n"
},
{
"path": "lib/nib/normalize/text.styl",
"chars": 806,
"preview": "// Based in Nicolas Gallagher's git.io/normalize\nnormalize-text()\n abbr[title] // + style not present in IE 8~11, Safar"
},
{
"path": "lib/nib/overflow.styl",
"chars": 305,
"preview": "/*\n * Overflow utility. Maps to regular overflow, and adds an ellipsis value.\n *\n * Synopsis:\n *\n * overflow: <type>\n "
},
{
"path": "lib/nib/positions.styl",
"chars": 955,
"preview": "// helper\n\n-pos(type, args)\n i = 0\n position: unquote(type)\n for j in (1..4)\n if length(args) > i\n {args[i]}:"
},
{
"path": "lib/nib/reset.styl",
"chars": 1726,
"preview": "// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)\n\nglobal-reset()\n html, b"
},
{
"path": "lib/nib/size.styl",
"chars": 422,
"preview": "/*\n * Size utility.\n *\n * Synopsis:\n *\n * size: <width> <height> | <width & height>\n *\n * Examples:\n *\n * size: 10"
},
{
"path": "lib/nib/text/aliases.styl",
"chars": 132,
"preview": "/*\n * Alias of \"nowrap\".\n */\n\nno-wrap = unquote('nowrap')\n\n/*\n * Alias of \"white-space\".\n */\n\nwhitespace()\n white-space"
},
{
"path": "lib/nib/text/ellipsis.styl",
"chars": 162,
"preview": "/*\n * Ellipsis with wrapping disabled by default.\n */\n\nellipsis(no-wrap = true)\n if no-wrap\n white-space: nowrap\n o"
},
{
"path": "lib/nib/text/hide-text.styl",
"chars": 95,
"preview": "/*\n * Hide text.\n */\n\nhide-text()\n text-indent: 101%\n white-space: nowrap\n overflow: hidden\n"
},
{
"path": "lib/nib/text/index.styl",
"chars": 114,
"preview": "@import './aliases'\n@import './ellipsis'\n@import './hide-text'\n@import './replace-text'\n@import './shadow-stroke'\n"
},
{
"path": "lib/nib/text/replace-text.styl",
"chars": 168,
"preview": "/*\n * Replace text with an image.\n */\n\nreplace-text(image, x=50%, y=50%)\n hide-text()\n background-image image\n backgr"
},
{
"path": "lib/nib/text/shadow-stroke.styl",
"chars": 87,
"preview": "shadow-stroke(n)\n text-shadow: -1px -1px 0 n, 1px -1px 0 n, -1px 1px 0 n, 1px 1px 0 n\n"
},
{
"path": "lib/nib/vendor.styl",
"chars": 10296,
"preview": "use('../nodes/vendor-helpers.js')\n@import 'config'\n\n/*\n * Alias \"nowrap\" as \"no-wrap\".\n */\n\nno-wrap = unquote('nowrap')\n"
},
{
"path": "lib/nib.js",
"chars": 1300,
"preview": "/*!\n * nib\n * Copyright (c) 2010 TJ Holowaychuk <tj@vision-media.ca>\n * MIT Licensed\n */\n\n/**\n * Module dependencies.\n *"
},
{
"path": "lib/nodes/color-image.js",
"chars": 1482,
"preview": "/**\n * Module dependencies.\n */\n\nvar stylus = require('stylus'),\n Canvas = require('canvas'),\n nodes = stylus.node"
},
{
"path": "lib/nodes/gradient.js",
"chars": 3349,
"preview": "/**\n * Module dependencies.\n */\n\nvar stylus = require('stylus'),\n Canvas = require('canvas'),\n nodes = stylus.node"
},
{
"path": "lib/nodes/vendor-helpers.js",
"chars": 2678,
"preview": "var RE_GRADIENT_STOPS = /([\\(\\,]\\s*)(-?(?:\\d*\\.)?\\d+(?:%|px|em))(\\s+)((hsl|rgb)a?\\([^\\)]+\\)|#[^\\)\\,]+)/g,\n RE_GRADIEN"
},
{
"path": "package.json",
"chars": 716,
"preview": "{\n \"name\": \"nib\",\n \"description\": \"Stylus mixins and utilities\",\n \"version\": \"1.2.0\",\n \"license\": \"MIT\",\n \"reposito"
},
{
"path": "test/cases/absolute.css",
"chars": 318,
"preview": "#login {\n position: absolute;\n bottom: 0;\n right: 0;\n}\n#login {\n position: absolute;\n top: 5px;\n left: 10px;\n}\n#lo"
},
{
"path": "test/cases/absolute.styl",
"chars": 215,
"preview": "\n@import 'nib/positions'\n\n#login\n absolute bottom right\n\n#login\n absolute top 5px left 10px\n\n#login\n absolute top 5px"
},
{
"path": "test/cases/border-radius.css",
"chars": 604,
"preview": "button {\n border-radius: 1px 2px/3px 4px;\n}\nbutton {\n border-top-left-radius: 10px;\n}\nbutton {\n border-top-left-radiu"
},
{
"path": "test/cases/border-radius.styl",
"chars": 498,
"preview": "@import 'nib/border-radius'\n\nbutton\n border-radius: 1px 2px / 3px 4px\n\nbutton\n border-radius: top left 10px\n\nbutton\n "
},
{
"path": "test/cases/border.css",
"chars": 114,
"preview": ".foo {\n border: none;\n border: 1px solid #f00;\n border: 1px solid #0f0 !important;\n border: 1px solid #f00;\n}\n"
},
{
"path": "test/cases/border.styl",
"chars": 106,
"preview": "@import 'nib/border'\n\n.foo\n border: none\n border: red\n border: lime !important\n border: 1px solid red\n"
},
{
"path": "test/cases/clearfix.css",
"chars": 131,
"preview": "#clearfix {\n zoom: 1;\n}\n#clearfix:before,\n#clearfix:after {\n content: \"\";\n display: table;\n}\n#clearfix:after {\n clea"
},
{
"path": "test/cases/clearfix.styl",
"chars": 70,
"preview": "@import 'nib/clearfix'\n\nsupport-for-ie = true\n\n#clearfix\n clearfix()\n"
},
{
"path": "test/cases/fixed.css",
"chars": 226,
"preview": "#login {\n position: fixed;\n bottom: 0;\n right: 0;\n}\n#login {\n position: fixed;\n top: 5px;\n left: 10px;\n}\n#login {\n"
},
{
"path": "test/cases/fixed.styl",
"chars": 158,
"preview": "@import 'nib/positions'\n\n#login\n fixed: bottom right\n\n#login\n fixed: top 5px left 10px\n\n#login\n fixed: bottom left 10"
},
{
"path": "test/cases/flex.css",
"chars": 6288,
"preview": "section {\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n"
},
{
"path": "test/cases/flex.styl",
"chars": 1313,
"preview": "@import 'nib/vendor'\n@import 'nib/flex'\n\nsection\n display: flex\n flex-direction: row\n\n div\n flex: 1 0\n\nsection\n d"
},
{
"path": "test/cases/image.css",
"chars": 1563,
"preview": "#logo {\n background-image: url(\"/images/branding/logo.main.png\");\n}\n@media all and (-webkit-min-device-pixel-ratio: 1.5"
},
{
"path": "test/cases/image.styl",
"chars": 241,
"preview": "@import 'nib/image'\n\n#logo\n image: '/images/branding/logo.main.png'\n\n#logo\n image: '/images/branding/logo.main.png' 50"
},
{
"path": "test/cases/importance.css",
"chars": 4909,
"preview": ".test {\n position: relative !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !"
},
{
"path": "test/cases/importance.styl",
"chars": 3989,
"preview": "@import 'nib'\n\n.test\n position: relative !important\n top: 0 !important\n right: 0 !important\n bottom: 0 !important\n "
},
{
"path": "test/cases/linear-gradient.css",
"chars": 6655,
"preview": "body {\n background: -webkit-linear-gradient(#fff, #000);\n background: -moz-linear-gradient(#fff, #000);\n background: "
},
{
"path": "test/cases/linear-gradient.styl",
"chars": 1442,
"preview": "@import 'nib/vendor'\n@import 'nib/gradients'\n\nbody\n background: linear-gradient(white, black)\n\nbody\n background: linea"
},
{
"path": "test/cases/multiple-gradients.css",
"chars": 2228,
"preview": ".test1 {\n background: -webkit-linear-gradient(bottom, #fff, #000), -webkit-linear-gradient(top, #000, #fff);\n backgrou"
},
{
"path": "test/cases/multiple-gradients.styl",
"chars": 611,
"preview": "@import 'nib/vendor'\n@import 'nib/gradients'\n\n.test1\n background: linear-gradient(to top, white, black),\n "
},
{
"path": "test/cases/normalize-reset.css",
"chars": 2403,
"preview": "html {\n font-family: sans-serif;\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n}\nbody {\n margin: 0;\n"
},
{
"path": "test/cases/normalize-reset.styl",
"chars": 40,
"preview": "@import 'nib/normalize'\nnormalize-css()\n"
},
{
"path": "test/cases/radial-gradient.css",
"chars": 484,
"preview": "body {\n background: -webkit-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0));\n background: "
},
{
"path": "test/cases/radial-gradient.styl",
"chars": 141,
"preview": "@import 'nib/vendor'\n@import 'nib/gradients'\n\nbody\n background: radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.17"
},
{
"path": "test/cases/relative.css",
"chars": 47,
"preview": "#login {\n position: relative;\n left: 10px;\n}\n"
},
{
"path": "test/cases/shadow-stroke.css",
"chars": 326,
"preview": "button {\n text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;\n}\nbutton {\n text-shadow: -1"
},
{
"path": "test/cases/shadow-stroke.styl",
"chars": 136,
"preview": "@import 'nib/text/shadow-stroke'\n\nbutton\n shadow-stroke(#000)\n\nbutton\n shadow-stroke(rgba(0, 0, 0, 0.5))\n\nbutton\n sha"
},
{
"path": "test/cases/text.ellipsis.css",
"chars": 220,
"preview": "button {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\nbutton {\n overflow: hidden;\n text-ove"
},
{
"path": "test/cases/text.ellipsis.styl",
"chars": 127,
"preview": "@import 'nib/text/ellipsis'\n@import 'nib/overflow'\n\nbutton\n ellipsis()\n\nbutton\n ellipsis(false)\n\nbutton\n overflow: el"
},
{
"path": "test/cases/vendor.css",
"chars": 4637,
"preview": "button {\n -webkit-box-shadow: 1px 1px 5px #eee;\n box-shadow: 1px 1px 5px #eee;\n}\nbutton {\n opacity: 0.5;\n -ms-filter"
},
{
"path": "test/cases/vendor.inherit.css",
"chars": 4308,
"preview": "button {\n -webkit-box-shadow: inherit;\n box-shadow: inherit;\n}\nbutton {\n opacity: inherit;\n -ms-filter: inherit;\n f"
},
{
"path": "test/cases/vendor.inherit.styl",
"chars": 1427,
"preview": "@import 'nib/vendor'\n@import 'nib/gradients'\n\nvendor-prefixes = webkit moz official\n\nbutton\n box-shadow: inherit\n\nbutto"
},
{
"path": "test/cases/vendor.initial.css",
"chars": 4308,
"preview": "button {\n -webkit-box-shadow: initial;\n box-shadow: initial;\n}\nbutton {\n opacity: initial;\n -ms-filter: initial;\n f"
},
{
"path": "test/cases/vendor.initial.styl",
"chars": 1427,
"preview": "@import 'nib/vendor'\n@import 'nib/gradients'\n\nvendor-prefixes = webkit moz official\n\nbutton\n box-shadow: initial\n\nbutto"
},
{
"path": "test/cases/vendor.placeholder.css",
"chars": 1588,
"preview": "body::-webkit-input-placeholder {\n color: #333;\n font-weight: normal;\n font-family: Helvetica, arial, sans-serif;\n}\nb"
},
{
"path": "test/cases/vendor.placeholder.styl",
"chars": 426,
"preview": "@import 'nib/vendor'\n\n$placeholderFont = Helvetica, arial, sans-serif\n\nbody\n placeholder(color #333, font-weight normal"
},
{
"path": "test/cases/vendor.styl",
"chars": 1503,
"preview": "@import 'nib/vendor'\n@import 'nib/gradients'\n\nvendor-prefixes = webkit moz official\n\nbutton\n box-shadow: 1px 1px 5px #e"
},
{
"path": "test/cases/vendor.values.css",
"chars": 2283,
"preview": "button {\n -webkit-transition: -webkit-transform;\n -moz-transition: -moz-transform;\n -o-transition: -o-transform;\n -m"
},
{
"path": "test/cases/vendor.values.styl",
"chars": 444,
"preview": "@import 'nib/vendor'\n\nbutton\n transition: transform\n\nbutton\n transition: transform .3s .2s linear\n\nbutton\n transition"
},
{
"path": "test/clearfix.styl",
"chars": 278,
"preview": "@import 'nib/clearfix'\n\nsupport-for-ie = true\n\n#clearfix-left-only,\n#clearfix-left-right\n clearfix()\n background: blue"
},
{
"path": "test/color-images.styl",
"chars": 290,
"preview": "@import 'nib/color-image'\n\n#color-images\n .rgba\n background: color-image(rgba(blue, 0.3))\n\n .rgb\n background: co"
},
{
"path": "test/gradients.styl",
"chars": 1861,
"preview": "\n@import 'nib/gradients'\n\n#gradients tr\n height: 50px\n color: white\n td\n padding: 0\n width: 150px\n &:first-c"
},
{
"path": "test/index.pug",
"chars": 1754,
"preview": "html\n head\n title Nib\n link(rel='stylesheet', href='/test.css')\n link(rel='stylesheet', href='/gradients.css')"
},
{
"path": "test/public/.gitignore",
"chars": 0,
"preview": ""
},
{
"path": "test/runner.js",
"chars": 1331,
"preview": "/**\n * Module dependencies.\n */\nvar stylus = require('stylus'),\n nib = require('../'),\n expect = require('chai').e"
},
{
"path": "test/server.js",
"chars": 765,
"preview": "/**\n * Module dependencies.\n */\n\nvar stylus = require('stylus'),\n serveStatic = require('serve-static'),\n connect "
},
{
"path": "test/test.styl",
"chars": 809,
"preview": "@import 'nib/vendor'\n\ngray = #ebebeb\n\nbody\n padding: 50px\n\nh1, h2, h3\n font-family: helvetica, arial\n\ntable\n border-c"
}
]
// ... and 1 more files (download for full content)
About this extraction
This page contains the full source code of the visionmedia/nib GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 94 files (121.9 KB), approximately 37.5k tokens, and a symbol index with 6 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.