├── .gitignore ├── README.md ├── example ├── .babelrc ├── index.html ├── package.json ├── public │ └── bundle.js ├── serverDev.js ├── src │ ├── components │ │ ├── Buttons │ │ │ ├── Buttons.css │ │ │ └── Buttons.js │ │ ├── Forms │ │ │ └── Forms.js │ │ ├── Grids │ │ │ └── Grids.js │ │ ├── Menus │ │ │ └── Menus.js │ │ ├── NotFound.js │ │ ├── Snippet │ │ │ ├── Snippet.css │ │ │ └── Snippet.js │ │ └── Tables │ │ │ └── Tables.js │ ├── containers │ │ ├── ButtonsDemo.js │ │ ├── FormsDemo.js │ │ ├── GridsDemo.js │ │ ├── Main.js │ │ ├── MenusDemo.js │ │ ├── Navigation.js │ │ └── TablesDemo.js │ ├── create-router.js │ ├── index.js │ ├── reducers │ │ └── list.js │ └── store.js └── webpack.config.dev.js ├── index.js ├── lib ├── base.css ├── buttons.css ├── forms-nr.css ├── forms.css ├── grids-nr.css ├── grids.css ├── index.js ├── menus.css └── tables.css └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # pure-css 2 | 3 | [![npm version](https://badge.fury.io/js/pure-css.svg)](https://badge.fury.io/js/pure-css) 4 | 5 | A [css module](https://github.com/css-modules/css-modules) compatible version of [purecss](https://github.com/yahoo/pure/). 6 | 7 | You will need to use [react-css-modules](https://github.com/gajus/react-css-modules) to make use of the class names as purecss classes are not camelCase. 8 | 9 | It would be possible to make a version compatible to just css modules, however most implementations of a virtual dom should have a higher order component for allowing normal class names and this will be the future direction for css modules. 10 | 11 | It could also be an approach to rewrite the current style names in pure to be more compatible with css modules, see [issue #1](https://github.com/StevenIseki/pure-css/issues/1). 12 | 13 | ## Version 14 | 15 | #### `1.0.1` uses purecss `0.6.0` 16 | 17 | ## Installation 18 | 19 | `npm install pure-css --save-dev` 20 | 21 | ## Usage 22 | Simply import your pure css module 23 | 24 | `import { buttons, grids } from 'pure-css'` 25 | 26 | Then use it for styling your elements. 27 | 28 | ```jsx 29 |
30 |
31 | ``` 32 | 33 | ## Example 34 | 35 | Check out the full working example [here](https://github.com/StevenIseki/pure-css/tree/master/example) 36 | 37 | ```jsx 38 | import React from 'react' 39 | import CSSModules from 'react-css-modules' 40 | 41 | import { buttons, grids } from 'pure-css' 42 | let styles = {} 43 | Object.assign(styles, grids, buttons) 44 | 45 | class Test extends React.Component { 46 | render () { 47 | return ( 48 |
49 |
50 | 51 |
52 |
53 | ); 54 | } 55 | } 56 | 57 | export default CSSModules(Test, styles); 58 | ``` 59 | 60 | ## License 61 | 62 | [MIT](http://isekivacenz.mit-license.org/) 63 | -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"] 3 | } -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pure CSS Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pure-css-example", 3 | "version": "1.0.0", 4 | "description": "an example of using pure-css with css modules", 5 | "scripts": { 6 | "start": "npm run start:dev", 7 | "start:dev": "node serverDev.js" 8 | }, 9 | "author": "Steven Iseki ", 10 | "license": "MIT", 11 | "homepage": "https://github.com/StevenIseki/pure-css", 12 | "devDependencies": { 13 | "autoprefixer": "^6.1.0", 14 | "babel-core": "^6.0.20", 15 | "babel-loader": "^6.0.1", 16 | "babel-preset-es2015": "^6.0.15", 17 | "babel-preset-react": "^6.0.15", 18 | "babel-preset-stage-0": "^6.0.15", 19 | "css-loader": "^0.15.1", 20 | "express": "^4.13.3", 21 | "extract-text-webpack-plugin": "^0.9.1", 22 | "postcss-loader": "^0.7.0", 23 | "pure-css": "^1.0.3", 24 | "raw-loader": "^0.5.1", 25 | "redux-devtools": "^2.1.5", 26 | "style-loader": "^0.13.0", 27 | "webpack": "^1.9.6", 28 | "webpack-dev-middleware": "^1.2.0", 29 | "webpack-hot-middleware": "^2.0.0" 30 | }, 31 | "dependencies": { 32 | "react": "^0.14.0", 33 | "react-css-modules": "^3.6.1", 34 | "react-dom": "^0.14.0", 35 | "react-redux": "^4.0.0", 36 | "react-router5": "^1.0.0", 37 | "redux": "^3.0.4", 38 | "redux-router5": "^1.0.0", 39 | "router5": "^1.0.0", 40 | "router5-history": "^1.0.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /example/serverDev.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var express = require('express'); 3 | var webpack = require('webpack'); 4 | var config = require('./webpack.config.dev'); 5 | 6 | var app = express(); 7 | var compiler = webpack(config); 8 | 9 | app.use(require('webpack-dev-middleware')(compiler, { 10 | noInfo: true, 11 | publicPath: config.output.publicPath 12 | })); 13 | 14 | app.get('*', function(req, res) { 15 | res.sendFile(path.join(__dirname, 'index.html')); 16 | }); 17 | 18 | app.listen(3000, 'localhost', function(err) { 19 | if (err) { 20 | console.log(err); 21 | return; 22 | } 23 | 24 | console.log('Listening at http://localhost:3000'); 25 | }); 26 | -------------------------------------------------------------------------------- /example/src/components/Buttons/Buttons.css: -------------------------------------------------------------------------------- 1 | /* 2 | Just an example of adding custom styles to a component 3 | on top of purecss styles 4 | */ -------------------------------------------------------------------------------- /example/src/components/Buttons/Buttons.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import { connect } from 'react-redux'; 4 | 5 | let styles = {} 6 | import { buttons } from 'pure-css' 7 | Object.assign(styles, buttons) 8 | 9 | function Buttons( props) { 10 | 11 | const { route } = props; 12 | 13 | return ( 14 |
15 | 16 |

Default Buttons

17 | 18 | 19 |

Disabled Buttons

20 | 21 | 22 |

Active Buttons

23 | 24 | 25 |

Primary Buttons

26 | 27 | 28 |

Buttons with different sizes

29 | 30 | 31 | 32 | 33 | 34 |
35 | ); 36 | } 37 | 38 | export default connect()( 39 | CSSModules(Buttons, styles, {allowMultiple: true} ) 40 | ); 41 | -------------------------------------------------------------------------------- /example/src/components/Forms/Forms.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import { connect } from 'react-redux'; 4 | 5 | let styles = {} 6 | import { forms, buttons } from 'pure-css' 7 | Object.assign(styles, forms, buttons) 8 | 9 | function Menus( props) { 10 | 11 | const { route } = props; 12 | 13 | return ( 14 |
15 |
16 | A Stacked Form 17 | 18 | 19 | 20 | 21 | 22 | 27 | 28 | 32 | 33 |
34 |
35 | ); 36 | } 37 | 38 | export default connect()( 39 | CSSModules(Menus, styles, {allowMultiple: true} ) 40 | ); 41 | -------------------------------------------------------------------------------- /example/src/components/Grids/Grids.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import { connect } from 'react-redux'; 4 | 5 | let styles = {} 6 | import { buttons, grids } from 'pure-css' 7 | Object.assign(styles, grids, buttons) 8 | 9 | function Buttons( props) { 10 | 11 | const { route } = props; 12 | 13 | return ( 14 |
15 |
16 |

17 | This grid is responsive, at medium and above it is 1/3 18 | Below medium it is 1/1. medium is ≥ 768px 19 |

20 |
21 |
22 |

23 | Just a note, you can mix purecss modules in... 24 | e.g. we have a button in this grid 25 |

26 | 27 |
28 | 29 |
30 |

Here is the third grid row.

31 |
32 |
33 | ); 34 | } 35 | 36 | export default connect()( 37 | CSSModules(Buttons, styles, {allowMultiple: true} ) 38 | ); 39 | -------------------------------------------------------------------------------- /example/src/components/Menus/Menus.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import { connect } from 'react-redux'; 4 | 5 | let styles = {} 6 | import { menus } from 'pure-css' 7 | Object.assign(styles, menus) 8 | 9 | function Menus( props) { 10 | 11 | const { route } = props; 12 | 13 | return ( 14 |
15 | 16 |
17 | 25 |
26 | 27 |
28 | ); 29 | } 30 | 31 | export default connect()( 32 | CSSModules(Menus, styles, {allowMultiple: true} ) 33 | ); 34 | -------------------------------------------------------------------------------- /example/src/components/NotFound.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function NotFound(props) { 4 | return ( 5 |
6 |
7 | ) 8 | } 9 | -------------------------------------------------------------------------------- /example/src/components/Snippet/Snippet.css: -------------------------------------------------------------------------------- 1 | .root { 2 | margin-top: 32px; 3 | } 4 | 5 | .output { 6 | background: white; 7 | color: #333; 8 | border-radius: 10px; 9 | margin: 20px; 10 | border: 1px solid #003957; 11 | border-top-width: 0; 12 | } 13 | 14 | .outputContent { 15 | padding: 40px 30px; 16 | } 17 | 18 | .file { 19 | background: #003957; 20 | color: rgba(255, 255, 255, 0.9); 21 | border-radius: 10px; 22 | margin: 20px; 23 | } 24 | 25 | .fileName { 26 | background: #011E2D; 27 | color: #00B37D; 28 | padding: 10px 20px; 29 | border-radius: 10px 10px 0 0; 30 | } 31 | 32 | .pre { 33 | overflow: auto; 34 | font-family: menlo, consolas, monospace; 35 | font-size: 14px; 36 | line-height: 20px; 37 | padding: 5px 20px 20px; 38 | } -------------------------------------------------------------------------------- /example/src/components/Snippet/Snippet.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import styles from './Snippet.css'; 4 | 5 | class Snippet extends Component { 6 | 7 | render() { 8 | return ( 9 |
10 | 11 |
12 |
Output
13 |
14 | { this.props.children } 15 |
16 |
17 | 18 | { 19 | this.props.files.map(file => ( 20 |
21 |
{ file.name }
22 | 
{ file.source }
23 |
24 | )) 25 | } 26 | 27 |
28 | ); 29 | } 30 | }; 31 | 32 | export default CSSModules(Snippet, styles); -------------------------------------------------------------------------------- /example/src/components/Tables/Tables.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import { connect } from 'react-redux'; 4 | 5 | let styles = {} 6 | import { tables } from 'pure-css' 7 | Object.assign(styles, tables) 8 | 9 | function Tables( props) { 10 | 11 | const { route } = props; 12 | 13 | return ( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
#MakeModelYear
1HondaAccord2009
2ToyotaCamry2012
3HyundaiElantra2010
50 | ); 51 | } 52 | 53 | export default connect()( 54 | CSSModules(Tables, styles, {allowMultiple: true} ) 55 | ); 56 | -------------------------------------------------------------------------------- /example/src/containers/ButtonsDemo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import { connect } from 'react-redux'; 4 | import Buttons from '../components/Buttons/Buttons' 5 | 6 | import Snippet from '../components/Snippet/Snippet' 7 | 8 | import js from '!!raw!../components/Buttons/Buttons'; 9 | import css from '!!raw!../components/Buttons/Buttons.css'; 10 | 11 | function ButtonsDemo( props) { 12 | 13 | const { route } = props; 14 | 15 | const files = [ 16 | { name: './Buttons.js', source: js }, 17 | { name: './Buttons.css', source: css } 18 | ]; 19 | 20 | return ( 21 |
22 | 23 | 24 | 25 |
26 | ); 27 | } 28 | 29 | export default connect()(ButtonsDemo) 30 | -------------------------------------------------------------------------------- /example/src/containers/FormsDemo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import { connect } from 'react-redux'; 4 | import Forms from '../components/Forms/Forms' 5 | 6 | import Snippet from '../components/Snippet/Snippet' 7 | 8 | import js from '!!raw!../components/Forms/Forms' 9 | 10 | function FormsDemo( props) { 11 | 12 | const { route } = props; 13 | 14 | const files = [ 15 | { name: './Forms.js', source: js } 16 | ]; 17 | 18 | return ( 19 |
20 | 21 | 22 | 23 |
24 | ); 25 | } 26 | 27 | export default connect()(FormsDemo) 28 | -------------------------------------------------------------------------------- /example/src/containers/GridsDemo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import { connect } from 'react-redux'; 4 | import Grids from '../components/Grids/Grids' 5 | 6 | import Snippet from '../components/Snippet/Snippet' 7 | 8 | import js from '!!raw!../components/Grids/Grids'; 9 | 10 | function GridsDemo( props) { 11 | 12 | const { route } = props; 13 | 14 | const files = [ 15 | { name: './Grids.js', source: js } 16 | ]; 17 | 18 | return ( 19 |
20 | 21 | 22 | 23 |
24 | ); 25 | } 26 | 27 | export default connect()(GridsDemo) 28 | -------------------------------------------------------------------------------- /example/src/containers/Main.js: -------------------------------------------------------------------------------- 1 | import React, { createElement } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { routeNodeSelector } from 'redux-router5'; 4 | 5 | import GridsDemo from './GridsDemo'; 6 | import ButtonsDemo from './ButtonsDemo'; 7 | import MenusDemo from './MenusDemo'; 8 | import FormsDemo from './FormsDemo'; 9 | import TablesDemo from './TablesDemo'; 10 | import NotFound from '../components/NotFound'; 11 | 12 | const components = { 13 | 'buttons': ButtonsDemo, 14 | 'grids': GridsDemo, 15 | 'menus': MenusDemo, 16 | 'forms': FormsDemo, 17 | 'tables': TablesDemo 18 | }; 19 | 20 | function Main(props) { 21 | const { route } = props; 22 | const segment = route ? route.name.split('.')[0] : undefined; 23 | return createElement(components[segment] || NotFound); 24 | } 25 | 26 | export default connect(routeNodeSelector(''))(Main); 27 | -------------------------------------------------------------------------------- /example/src/containers/MenusDemo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import { connect } from 'react-redux'; 4 | import Menus from '../components/Menus/Menus' 5 | 6 | import Snippet from '../components/Snippet/Snippet' 7 | 8 | import js from '!!raw!../components/Menus/Menus' 9 | 10 | function MenusDemo( props) { 11 | 12 | const { route } = props; 13 | 14 | const files = [ 15 | { name: './Menus.js', source: js } 16 | ]; 17 | 18 | return ( 19 |
20 | 21 | 22 | 23 |
24 | ); 25 | } 26 | 27 | export default connect()(MenusDemo) 28 | -------------------------------------------------------------------------------- /example/src/containers/Navigation.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react' 2 | import CSSModules from 'react-css-modules' 3 | import { connect } from 'react-redux' 4 | import { bindActionCreators } from 'redux' 5 | import { actions } from 'redux-router5' 6 | 7 | import { menus } from 'pure-css' 8 | let styles = {} 9 | Object.assign(styles, menus) 10 | 11 | class Nav extends Component { 12 | constructor(props, context) { 13 | super(props); 14 | this.router = context.router; 15 | } 16 | 17 | render() { 18 | const { navigateTo, route } = this.props 19 | 20 | return ( 21 | 42 | ); 43 | } 44 | } 45 | 46 | Nav.contextTypes = { 47 | router: PropTypes.object.isRequired 48 | }; 49 | 50 | export default connect( 51 | state => state.router.route, 52 | dispatch => bindActionCreators({ navigateTo: actions.navigateTo }, dispatch) 53 | )( CSSModules(Nav, styles, {allowMultiple: true} ) ); 54 | -------------------------------------------------------------------------------- /example/src/containers/TablesDemo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import { connect } from 'react-redux'; 4 | import Tables from '../components/Tables/Tables' 5 | 6 | import Snippet from '../components/Snippet/Snippet' 7 | 8 | import js from '!!raw!../components/Tables/Tables' 9 | 10 | function TablesDemo( props) { 11 | 12 | const { route } = props; 13 | 14 | const files = [ 15 | { name: './Tables.js', source: js } 16 | ]; 17 | 18 | return ( 19 |
20 | 21 | 22 | 23 |
24 | ); 25 | } 26 | 27 | export default connect()(TablesDemo) 28 | -------------------------------------------------------------------------------- /example/src/create-router.js: -------------------------------------------------------------------------------- 1 | import { Router5 } from 'router5' 2 | import historyPlugin from 'router5-history'; 3 | 4 | export default function createRouter(routes) { 5 | const router = new Router5() 6 | .setOption('useHash', false) 7 | .setOption('defaultRoute', 'buttons') 8 | // Routes 9 | .addNode('buttons', '/buttons') 10 | .addNode('grids', '/grids') 11 | .addNode('menus', '/menus') 12 | .addNode('forms', '/forms') 13 | .addNode('tables', '/tables') 14 | // Plugins 15 | .usePlugin(Router5.loggerPlugin()) 16 | .usePlugin(historyPlugin()); 17 | 18 | return router; 19 | }; 20 | -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Provider } from 'react-redux'; 3 | import { RouterProvider } from 'react-router5'; 4 | import ReactDOM from 'react-dom'; 5 | import createRouter from './create-router' 6 | import configureStore from './store'; 7 | 8 | import Navigation from './containers/Navigation'; 9 | import Main from './containers/Main'; 10 | 11 | function App(props) { 12 | return ( 13 | 14 |
15 | 16 | 17 |
18 |
19 |
20 |
21 | ); 22 | } 23 | 24 | const router = createRouter(); 25 | 26 | router.start((err, state) => { 27 | const store = configureStore(router, { router: { route: state }}); 28 | 29 | const wrappedApp = ( 30 | 31 | 32 | 33 | 34 | 35 | ); 36 | 37 | ReactDOM.render(wrappedApp, document.getElementById('root')); 38 | }); 39 | -------------------------------------------------------------------------------- /example/src/reducers/list.js: -------------------------------------------------------------------------------- 1 | const initialState = {} 2 | 3 | export default function list(state = initialState, action) { 4 | switch (action.type) { 5 | default: 6 | return state; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /example/src/store.js: -------------------------------------------------------------------------------- 1 | import { compose, createStore, applyMiddleware, combineReducers } from 'redux'; 2 | import { router5Middleware, router5Reducer } from 'redux-router5'; 3 | import list from './reducers/list'; 4 | 5 | export default function configureStore(router, initialState = {}) { 6 | const createStoreWithMiddleware = applyMiddleware(router5Middleware(router))(createStore); 7 | 8 | const store = createStoreWithMiddleware(combineReducers({ 9 | router: router5Reducer, 10 | list 11 | }), initialState); 12 | 13 | window.store = store; 14 | return store; 15 | } 16 | -------------------------------------------------------------------------------- /example/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var autoprefixer = require('autoprefixer'); 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 5 | 6 | module.exports = { 7 | devtool: 'source-map', 8 | entry: ['./src/index'], 9 | output: { 10 | filename: 'bundle.js', 11 | path: path.join(__dirname, 'public'), 12 | publicPath: '/public/' 13 | }, 14 | module: { 15 | loaders: [ 16 | { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, 17 | { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') } 18 | ] 19 | }, 20 | postcss: function () { 21 | return [autoprefixer]; 22 | }, 23 | plugins: [ 24 | new ExtractTextPlugin('style.css', { allChunks: true }) 25 | ] 26 | 27 | }; -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var base = require('./lib/base.css'); 4 | var buttons = require('./lib/buttons.css'); 5 | var formsNr = require('./lib/forms-nr.css'); 6 | var forms = require('./lib/forms.css'); 7 | var gridsNr = require('./lib/grids-nr.css'); 8 | var grids = require('./lib/grids.css'); 9 | var menus = require('./lib/menus.css'); 10 | var tables = require('./lib/tables.css'); 11 | 12 | module.exports = { 13 | base: base, 14 | buttons: buttons, 15 | formsNr: formsNr, 16 | forms: forms, 17 | gridsNr: gridsNr, 18 | grids: grids, 19 | menus: menus, 20 | tables: tables 21 | }; 22 | -------------------------------------------------------------------------------- /lib/base.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Pure v0.6.0 3 | Copyright 2014 Yahoo! Inc. All rights reserved. 4 | Licensed under the BSD License. 5 | https://github.com/yahoo/pure/blob/master/LICENSE.md 6 | */ 7 | /*! 8 | normalize.css v^3.0 | MIT License | git.io/normalize 9 | Copyright (c) Nicolas Gallagher and Jonathan Neal 10 | */ 11 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 12 | 13 | /** 14 | * 1. Set default font family to sans-serif. 15 | * 2. Prevent iOS text size adjust after orientation change, without disabling 16 | * user zoom. 17 | */ 18 | 19 | html { 20 | font-family: sans-serif; /* 1 */ 21 | -ms-text-size-adjust: 100%; /* 2 */ 22 | -webkit-text-size-adjust: 100%; /* 2 */ 23 | } 24 | 25 | /** 26 | * Remove default margin. 27 | */ 28 | 29 | body { 30 | margin: 0; 31 | } 32 | 33 | /* HTML5 display definitions 34 | ========================================================================== */ 35 | 36 | /** 37 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 38 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 39 | * and Firefox. 40 | * Correct `block` display not defined for `main` in IE 11. 41 | */ 42 | 43 | article, 44 | aside, 45 | details, 46 | figcaption, 47 | figure, 48 | footer, 49 | header, 50 | hgroup, 51 | main, 52 | menu, 53 | nav, 54 | section, 55 | summary { 56 | display: block; 57 | } 58 | 59 | /** 60 | * 1. Correct `inline-block` display not defined in IE 8/9. 61 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 62 | */ 63 | 64 | audio, 65 | canvas, 66 | progress, 67 | video { 68 | display: inline-block; /* 1 */ 69 | vertical-align: baseline; /* 2 */ 70 | } 71 | 72 | /** 73 | * Prevent modern browsers from displaying `audio` without controls. 74 | * Remove excess height in iOS 5 devices. 75 | */ 76 | 77 | audio:not([controls]) { 78 | display: none; 79 | height: 0; 80 | } 81 | 82 | /** 83 | * Address `[hidden]` styling not present in IE 8/9/10. 84 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 85 | */ 86 | 87 | [hidden], 88 | template { 89 | display: none; 90 | } 91 | 92 | /* Links 93 | ========================================================================== */ 94 | 95 | /** 96 | * Remove the gray background color from active links in IE 10. 97 | */ 98 | 99 | a { 100 | background-color: transparent; 101 | } 102 | 103 | /** 104 | * Improve readability when focused and also mouse hovered in all browsers. 105 | */ 106 | 107 | a:active, 108 | a:hover { 109 | outline: 0; 110 | } 111 | 112 | /* Text-level semantics 113 | ========================================================================== */ 114 | 115 | /** 116 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 117 | */ 118 | 119 | abbr[title] { 120 | border-bottom: 1px dotted; 121 | } 122 | 123 | /** 124 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 125 | */ 126 | 127 | b, 128 | strong { 129 | font-weight: bold; 130 | } 131 | 132 | /** 133 | * Address styling not present in Safari and Chrome. 134 | */ 135 | 136 | dfn { 137 | font-style: italic; 138 | } 139 | 140 | /** 141 | * Address variable `h1` font-size and margin within `section` and `article` 142 | * contexts in Firefox 4+, Safari, and Chrome. 143 | */ 144 | 145 | h1 { 146 | font-size: 2em; 147 | margin: 0.67em 0; 148 | } 149 | 150 | /** 151 | * Address styling not present in IE 8/9. 152 | */ 153 | 154 | mark { 155 | background: #ff0; 156 | color: #000; 157 | } 158 | 159 | /** 160 | * Address inconsistent and variable font size in all browsers. 161 | */ 162 | 163 | small { 164 | font-size: 80%; 165 | } 166 | 167 | /** 168 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 169 | */ 170 | 171 | sub, 172 | sup { 173 | font-size: 75%; 174 | line-height: 0; 175 | position: relative; 176 | vertical-align: baseline; 177 | } 178 | 179 | sup { 180 | top: -0.5em; 181 | } 182 | 183 | sub { 184 | bottom: -0.25em; 185 | } 186 | 187 | /* Embedded content 188 | ========================================================================== */ 189 | 190 | /** 191 | * Remove border when inside `a` element in IE 8/9/10. 192 | */ 193 | 194 | img { 195 | border: 0; 196 | } 197 | 198 | /** 199 | * Correct overflow not hidden in IE 9/10/11. 200 | */ 201 | 202 | svg:not(:root) { 203 | overflow: hidden; 204 | } 205 | 206 | /* Grouping content 207 | ========================================================================== */ 208 | 209 | /** 210 | * Address margin not present in IE 8/9 and Safari. 211 | */ 212 | 213 | figure { 214 | margin: 1em 40px; 215 | } 216 | 217 | /** 218 | * Address differences between Firefox and other browsers. 219 | */ 220 | 221 | hr { 222 | -moz-box-sizing: content-box; 223 | box-sizing: content-box; 224 | height: 0; 225 | } 226 | 227 | /** 228 | * Contain overflow in all browsers. 229 | */ 230 | 231 | pre { 232 | overflow: auto; 233 | } 234 | 235 | /** 236 | * Address odd `em`-unit font size rendering in all browsers. 237 | */ 238 | 239 | code, 240 | kbd, 241 | pre, 242 | samp { 243 | font-family: monospace, monospace; 244 | font-size: 1em; 245 | } 246 | 247 | /* Forms 248 | ========================================================================== */ 249 | 250 | /** 251 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 252 | * styling of `select`, unless a `border` property is set. 253 | */ 254 | 255 | /** 256 | * 1. Correct color not being inherited. 257 | * Known issue: affects color of disabled elements. 258 | * 2. Correct font properties not being inherited. 259 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 260 | */ 261 | 262 | button, 263 | input, 264 | optgroup, 265 | select, 266 | textarea { 267 | color: inherit; /* 1 */ 268 | font: inherit; /* 2 */ 269 | margin: 0; /* 3 */ 270 | } 271 | 272 | /** 273 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 274 | */ 275 | 276 | button { 277 | overflow: visible; 278 | } 279 | 280 | /** 281 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 282 | * All other form control elements do not inherit `text-transform` values. 283 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 284 | * Correct `select` style inheritance in Firefox. 285 | */ 286 | 287 | button, 288 | select { 289 | text-transform: none; 290 | } 291 | 292 | /** 293 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 294 | * and `video` controls. 295 | * 2. Correct inability to style clickable `input` types in iOS. 296 | * 3. Improve usability and consistency of cursor style between image-type 297 | * `input` and others. 298 | */ 299 | 300 | button, 301 | html input[type="button"], /* 1 */ 302 | input[type="reset"], 303 | input[type="submit"] { 304 | -webkit-appearance: button; /* 2 */ 305 | cursor: pointer; /* 3 */ 306 | } 307 | 308 | /** 309 | * Re-set default cursor for disabled elements. 310 | */ 311 | 312 | button[disabled], 313 | html input[disabled] { 314 | cursor: default; 315 | } 316 | 317 | /** 318 | * Remove inner padding and border in Firefox 4+. 319 | */ 320 | 321 | button::-moz-focus-inner, 322 | input::-moz-focus-inner { 323 | border: 0; 324 | padding: 0; 325 | } 326 | 327 | /** 328 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 329 | * the UA stylesheet. 330 | */ 331 | 332 | input { 333 | line-height: normal; 334 | } 335 | 336 | /** 337 | * It's recommended that you don't attempt to style these elements. 338 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 339 | * 340 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 341 | * 2. Remove excess padding in IE 8/9/10. 342 | */ 343 | 344 | input[type="checkbox"], 345 | input[type="radio"] { 346 | box-sizing: border-box; /* 1 */ 347 | padding: 0; /* 2 */ 348 | } 349 | 350 | /** 351 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 352 | * `font-size` values of the `input`, it causes the cursor style of the 353 | * decrement button to change from `default` to `text`. 354 | */ 355 | 356 | input[type="number"]::-webkit-inner-spin-button, 357 | input[type="number"]::-webkit-outer-spin-button { 358 | height: auto; 359 | } 360 | 361 | /** 362 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 363 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 364 | * (include `-moz` to future-proof). 365 | */ 366 | 367 | input[type="search"] { 368 | -webkit-appearance: textfield; /* 1 */ 369 | -moz-box-sizing: content-box; 370 | -webkit-box-sizing: content-box; /* 2 */ 371 | box-sizing: content-box; 372 | } 373 | 374 | /** 375 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 376 | * Safari (but not Chrome) clips the cancel button when the search input has 377 | * padding (and `textfield` appearance). 378 | */ 379 | 380 | input[type="search"]::-webkit-search-cancel-button, 381 | input[type="search"]::-webkit-search-decoration { 382 | -webkit-appearance: none; 383 | } 384 | 385 | /** 386 | * Define consistent border, margin, and padding. 387 | */ 388 | 389 | fieldset { 390 | border: 1px solid #c0c0c0; 391 | margin: 0 2px; 392 | padding: 0.35em 0.625em 0.75em; 393 | } 394 | 395 | /** 396 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 397 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 398 | */ 399 | 400 | legend { 401 | border: 0; /* 1 */ 402 | padding: 0; /* 2 */ 403 | } 404 | 405 | /** 406 | * Remove default vertical scrollbar in IE 8/9/10/11. 407 | */ 408 | 409 | textarea { 410 | overflow: auto; 411 | } 412 | 413 | /** 414 | * Don't inherit the `font-weight` (applied by a rule above). 415 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 416 | */ 417 | 418 | optgroup { 419 | font-weight: bold; 420 | } 421 | 422 | /* Tables 423 | ========================================================================== */ 424 | 425 | /** 426 | * Remove most spacing between table cells. 427 | */ 428 | 429 | table { 430 | border-collapse: collapse; 431 | border-spacing: 0; 432 | } 433 | 434 | td, 435 | th { 436 | padding: 0; 437 | } 438 | 439 | /*csslint important:false*/ 440 | 441 | /* ========================================================================== 442 | Pure Base Extras 443 | ========================================================================== */ 444 | 445 | /** 446 | * Extra rules that Pure adds on top of Normalize.css 447 | */ 448 | 449 | /** 450 | * Always hide an element when it has the `hidden` HTML attribute. 451 | */ 452 | 453 | .hidden, 454 | [hidden] { 455 | display: none !important; 456 | } 457 | 458 | /** 459 | * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining 460 | * aspect ratio. 461 | */ 462 | .pure-img { 463 | max-width: 100%; 464 | height: auto; 465 | display: block; 466 | } -------------------------------------------------------------------------------- /lib/buttons.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Pure v0.6.0 3 | Copyright 2014 Yahoo! Inc. All rights reserved. 4 | Licensed under the BSD License. 5 | https://github.com/yahoo/pure/blob/master/LICENSE.md 6 | */ 7 | .pure-button { 8 | /* Structure */ 9 | display: inline-block; 10 | zoom: 1; 11 | line-height: normal; 12 | white-space: nowrap; 13 | vertical-align: middle; 14 | text-align: center; 15 | cursor: pointer; 16 | -webkit-user-drag: none; 17 | -webkit-user-select: none; 18 | -moz-user-select: none; 19 | -ms-user-select: none; 20 | user-select: none; 21 | -webkit-box-sizing: border-box; 22 | -moz-box-sizing: border-box; 23 | box-sizing: border-box; 24 | } 25 | 26 | /* Firefox: Get rid of the inner focus border */ 27 | .pure-button::-moz-focus-inner { 28 | padding: 0; 29 | border: 0; 30 | } 31 | 32 | /*csslint outline-none:false*/ 33 | 34 | .pure-button { 35 | font-family: inherit; 36 | font-size: 100%; 37 | padding: 0.5em 1em; 38 | color: #444; /* rgba not supported (IE 8) */ 39 | color: rgba(0, 0, 0, 0.80); /* rgba supported */ 40 | border: 1px solid #999; /*IE 6/7/8*/ 41 | border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ 42 | background-color: #E6E6E6; 43 | text-decoration: none; 44 | border-radius: 2px; 45 | } 46 | 47 | .pure-button-hover, 48 | .pure-button:hover, 49 | .pure-button:focus { 50 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0); 51 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10))); 52 | background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); 53 | background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10)); 54 | background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); 55 | background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); 56 | } 57 | .pure-button:focus { 58 | outline: 0; 59 | } 60 | .pure-button-active, 61 | .pure-button:active { 62 | box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; 63 | border-color: #000\9; 64 | } 65 | 66 | .pure-button[disabled], 67 | .pure-button-disabled, 68 | .pure-button-disabled:hover, 69 | .pure-button-disabled:focus, 70 | .pure-button-disabled:active { 71 | border: none; 72 | background-image: none; 73 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 74 | filter: alpha(opacity=40); 75 | -khtml-opacity: 0.40; 76 | -moz-opacity: 0.40; 77 | opacity: 0.40; 78 | cursor: not-allowed; 79 | box-shadow: none; 80 | } 81 | 82 | .pure-button-hidden { 83 | display: none; 84 | } 85 | 86 | /* Firefox: Get rid of the inner focus border */ 87 | .pure-button::-moz-focus-inner{ 88 | padding: 0; 89 | border: 0; 90 | } 91 | 92 | .pure-button-primary, 93 | .pure-button-selected, 94 | a.pure-button-primary, 95 | a.pure-button-selected { 96 | background-color: rgb(0, 120, 231); 97 | color: #fff; 98 | } -------------------------------------------------------------------------------- /lib/forms-nr.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Pure v0.6.0 3 | Copyright 2014 Yahoo! Inc. All rights reserved. 4 | Licensed under the BSD License. 5 | https://github.com/yahoo/pure/blob/master/LICENSE.md 6 | */ 7 | /*csslint box-model:false*/ 8 | /* 9 | Box-model set to false because we're setting a height on select elements, which 10 | also have border and padding. This is done because some browsers don't render 11 | the padding. We explicitly set the box-model for select elements to border-box, 12 | so we can ignore the csslint warning. 13 | */ 14 | 15 | .pure-form input[type="text"], 16 | .pure-form input[type="password"], 17 | .pure-form input[type="email"], 18 | .pure-form input[type="url"], 19 | .pure-form input[type="date"], 20 | .pure-form input[type="month"], 21 | .pure-form input[type="time"], 22 | .pure-form input[type="datetime"], 23 | .pure-form input[type="datetime-local"], 24 | .pure-form input[type="week"], 25 | .pure-form input[type="number"], 26 | .pure-form input[type="search"], 27 | .pure-form input[type="tel"], 28 | .pure-form input[type="color"], 29 | .pure-form select, 30 | .pure-form textarea { 31 | padding: 0.5em 0.6em; 32 | display: inline-block; 33 | border: 1px solid #ccc; 34 | box-shadow: inset 0 1px 3px #ddd; 35 | border-radius: 4px; 36 | vertical-align: middle; 37 | -webkit-box-sizing: border-box; 38 | -moz-box-sizing: border-box; 39 | box-sizing: border-box; 40 | } 41 | 42 | /* 43 | Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 44 | since IE8 won't execute CSS that contains a CSS3 selector. 45 | */ 46 | .pure-form input:not([type]) { 47 | padding: 0.5em 0.6em; 48 | display: inline-block; 49 | border: 1px solid #ccc; 50 | box-shadow: inset 0 1px 3px #ddd; 51 | border-radius: 4px; 52 | -webkit-box-sizing: border-box; 53 | -moz-box-sizing: border-box; 54 | box-sizing: border-box; 55 | } 56 | 57 | 58 | /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ 59 | /* May be able to remove this tweak as color inputs become more standardized across browsers. */ 60 | .pure-form input[type="color"] { 61 | padding: 0.2em 0.5em; 62 | } 63 | 64 | 65 | .pure-form input[type="text"]:focus, 66 | .pure-form input[type="password"]:focus, 67 | .pure-form input[type="email"]:focus, 68 | .pure-form input[type="url"]:focus, 69 | .pure-form input[type="date"]:focus, 70 | .pure-form input[type="month"]:focus, 71 | .pure-form input[type="time"]:focus, 72 | .pure-form input[type="datetime"]:focus, 73 | .pure-form input[type="datetime-local"]:focus, 74 | .pure-form input[type="week"]:focus, 75 | .pure-form input[type="number"]:focus, 76 | .pure-form input[type="search"]:focus, 77 | .pure-form input[type="tel"]:focus, 78 | .pure-form input[type="color"]:focus, 79 | .pure-form select:focus, 80 | .pure-form textarea:focus { 81 | outline: 0; 82 | border-color: #129FEA; 83 | } 84 | 85 | /* 86 | Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 87 | since IE8 won't execute CSS that contains a CSS3 selector. 88 | */ 89 | .pure-form input:not([type]):focus { 90 | outline: 0; 91 | border-color: #129FEA; 92 | } 93 | 94 | .pure-form input[type="file"]:focus, 95 | .pure-form input[type="radio"]:focus, 96 | .pure-form input[type="checkbox"]:focus { 97 | outline: thin solid #129FEA; 98 | outline: 1px auto #129FEA; 99 | } 100 | .pure-form .pure-checkbox, 101 | .pure-form .pure-radio { 102 | margin: 0.5em 0; 103 | display: block; 104 | } 105 | 106 | .pure-form input[type="text"][disabled], 107 | .pure-form input[type="password"][disabled], 108 | .pure-form input[type="email"][disabled], 109 | .pure-form input[type="url"][disabled], 110 | .pure-form input[type="date"][disabled], 111 | .pure-form input[type="month"][disabled], 112 | .pure-form input[type="time"][disabled], 113 | .pure-form input[type="datetime"][disabled], 114 | .pure-form input[type="datetime-local"][disabled], 115 | .pure-form input[type="week"][disabled], 116 | .pure-form input[type="number"][disabled], 117 | .pure-form input[type="search"][disabled], 118 | .pure-form input[type="tel"][disabled], 119 | .pure-form input[type="color"][disabled], 120 | .pure-form select[disabled], 121 | .pure-form textarea[disabled] { 122 | cursor: not-allowed; 123 | background-color: #eaeded; 124 | color: #cad2d3; 125 | } 126 | 127 | /* 128 | Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 129 | since IE8 won't execute CSS that contains a CSS3 selector. 130 | */ 131 | .pure-form input:not([type])[disabled] { 132 | cursor: not-allowed; 133 | background-color: #eaeded; 134 | color: #cad2d3; 135 | } 136 | .pure-form input[readonly], 137 | .pure-form select[readonly], 138 | .pure-form textarea[readonly] { 139 | background-color: #eee; /* menu hover bg color */ 140 | color: #777; /* menu text color */ 141 | border-color: #ccc; 142 | } 143 | 144 | .pure-form input:focus:invalid, 145 | .pure-form textarea:focus:invalid, 146 | .pure-form select:focus:invalid { 147 | color: #b94a48; 148 | border-color: #e9322d; 149 | } 150 | .pure-form input[type="file"]:focus:invalid:focus, 151 | .pure-form input[type="radio"]:focus:invalid:focus, 152 | .pure-form input[type="checkbox"]:focus:invalid:focus { 153 | outline-color: #e9322d; 154 | } 155 | .pure-form select { 156 | /* Normalizes the height; padding is not sufficient. */ 157 | height: 2.25em; 158 | border: 1px solid #ccc; 159 | background-color: white; 160 | } 161 | .pure-form select[multiple] { 162 | height: auto; 163 | } 164 | .pure-form label { 165 | margin: 0.5em 0 0.2em; 166 | } 167 | .pure-form fieldset { 168 | margin: 0; 169 | padding: 0.35em 0 0.75em; 170 | border: 0; 171 | } 172 | .pure-form legend { 173 | display: block; 174 | width: 100%; 175 | padding: 0.3em 0; 176 | margin-bottom: 0.3em; 177 | color: #333; 178 | border-bottom: 1px solid #e5e5e5; 179 | } 180 | 181 | .pure-form-stacked input[type="text"], 182 | .pure-form-stacked input[type="password"], 183 | .pure-form-stacked input[type="email"], 184 | .pure-form-stacked input[type="url"], 185 | .pure-form-stacked input[type="date"], 186 | .pure-form-stacked input[type="month"], 187 | .pure-form-stacked input[type="time"], 188 | .pure-form-stacked input[type="datetime"], 189 | .pure-form-stacked input[type="datetime-local"], 190 | .pure-form-stacked input[type="week"], 191 | .pure-form-stacked input[type="number"], 192 | .pure-form-stacked input[type="search"], 193 | .pure-form-stacked input[type="tel"], 194 | .pure-form-stacked input[type="color"], 195 | .pure-form-stacked input[type="file"], 196 | .pure-form-stacked select, 197 | .pure-form-stacked label, 198 | .pure-form-stacked textarea { 199 | display: block; 200 | margin: 0.25em 0; 201 | } 202 | 203 | /* 204 | Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 205 | since IE8 won't execute CSS that contains a CSS3 selector. 206 | */ 207 | .pure-form-stacked input:not([type]) { 208 | display: block; 209 | margin: 0.25em 0; 210 | } 211 | .pure-form-aligned input, 212 | .pure-form-aligned textarea, 213 | .pure-form-aligned select, 214 | /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ 215 | .pure-form-aligned .pure-help-inline, 216 | .pure-form-message-inline { 217 | display: inline-block; 218 | *display: inline; 219 | *zoom: 1; 220 | vertical-align: middle; 221 | } 222 | .pure-form-aligned textarea { 223 | vertical-align: top; 224 | } 225 | 226 | /* Aligned Forms */ 227 | .pure-form-aligned .pure-control-group { 228 | margin-bottom: 0.5em; 229 | } 230 | .pure-form-aligned .pure-control-group label { 231 | text-align: right; 232 | display: inline-block; 233 | vertical-align: middle; 234 | width: 10em; 235 | margin: 0 1em 0 0; 236 | } 237 | .pure-form-aligned .pure-controls { 238 | margin: 1.5em 0 0 11em; 239 | } 240 | 241 | /* Rounded Inputs */ 242 | .pure-form input.pure-input-rounded, 243 | .pure-form .pure-input-rounded { 244 | border-radius: 2em; 245 | padding: 0.5em 1em; 246 | } 247 | 248 | /* Grouped Inputs */ 249 | .pure-form .pure-group fieldset { 250 | margin-bottom: 10px; 251 | } 252 | .pure-form .pure-group input, 253 | .pure-form .pure-group textarea { 254 | display: block; 255 | padding: 10px; 256 | margin: 0 0 -1px; 257 | border-radius: 0; 258 | position: relative; 259 | top: -1px; 260 | } 261 | .pure-form .pure-group input:focus, 262 | .pure-form .pure-group textarea:focus { 263 | z-index: 3; 264 | } 265 | .pure-form .pure-group input:first-child, 266 | .pure-form .pure-group textarea:first-child { 267 | top: 1px; 268 | border-radius: 4px 4px 0 0; 269 | margin: 0; 270 | } 271 | .pure-form .pure-group input:first-child:last-child, 272 | .pure-form .pure-group textarea:first-child:last-child { 273 | top: 1px; 274 | border-radius: 4px; 275 | margin: 0; 276 | } 277 | .pure-form .pure-group input:last-child, 278 | .pure-form .pure-group textarea:last-child { 279 | top: -2px; 280 | border-radius: 0 0 4px 4px; 281 | margin: 0; 282 | } 283 | .pure-form .pure-group button { 284 | margin: 0.35em 0; 285 | } 286 | 287 | .pure-form .pure-input-1 { 288 | width: 100%; 289 | } 290 | .pure-form .pure-input-2-3 { 291 | width: 66%; 292 | } 293 | .pure-form .pure-input-1-2 { 294 | width: 50%; 295 | } 296 | .pure-form .pure-input-1-3 { 297 | width: 33%; 298 | } 299 | .pure-form .pure-input-1-4 { 300 | width: 25%; 301 | } 302 | 303 | /* Inline help for forms */ 304 | /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ 305 | .pure-form .pure-help-inline, 306 | .pure-form-message-inline { 307 | display: inline-block; 308 | padding-left: 0.3em; 309 | color: #666; 310 | vertical-align: middle; 311 | font-size: 0.875em; 312 | } 313 | 314 | /* Block help for forms */ 315 | .pure-form-message { 316 | display: block; 317 | color: #666; 318 | font-size: 0.875em; 319 | } -------------------------------------------------------------------------------- /lib/forms.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Pure v0.6.0 3 | Copyright 2014 Yahoo! Inc. All rights reserved. 4 | Licensed under the BSD License. 5 | https://github.com/yahoo/pure/blob/master/LICENSE.md 6 | */ 7 | /*csslint box-model:false*/ 8 | /* 9 | Box-model set to false because we're setting a height on select elements, which 10 | also have border and padding. This is done because some browsers don't render 11 | the padding. We explicitly set the box-model for select elements to border-box, 12 | so we can ignore the csslint warning. 13 | */ 14 | 15 | .pure-form input[type="text"], 16 | .pure-form input[type="password"], 17 | .pure-form input[type="email"], 18 | .pure-form input[type="url"], 19 | .pure-form input[type="date"], 20 | .pure-form input[type="month"], 21 | .pure-form input[type="time"], 22 | .pure-form input[type="datetime"], 23 | .pure-form input[type="datetime-local"], 24 | .pure-form input[type="week"], 25 | .pure-form input[type="number"], 26 | .pure-form input[type="search"], 27 | .pure-form input[type="tel"], 28 | .pure-form input[type="color"], 29 | .pure-form select, 30 | .pure-form textarea { 31 | padding: 0.5em 0.6em; 32 | display: inline-block; 33 | border: 1px solid #ccc; 34 | box-shadow: inset 0 1px 3px #ddd; 35 | border-radius: 4px; 36 | vertical-align: middle; 37 | -webkit-box-sizing: border-box; 38 | -moz-box-sizing: border-box; 39 | box-sizing: border-box; 40 | } 41 | 42 | /* 43 | Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 44 | since IE8 won't execute CSS that contains a CSS3 selector. 45 | */ 46 | .pure-form input:not([type]) { 47 | padding: 0.5em 0.6em; 48 | display: inline-block; 49 | border: 1px solid #ccc; 50 | box-shadow: inset 0 1px 3px #ddd; 51 | border-radius: 4px; 52 | -webkit-box-sizing: border-box; 53 | -moz-box-sizing: border-box; 54 | box-sizing: border-box; 55 | } 56 | 57 | 58 | /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ 59 | /* May be able to remove this tweak as color inputs become more standardized across browsers. */ 60 | .pure-form input[type="color"] { 61 | padding: 0.2em 0.5em; 62 | } 63 | 64 | 65 | .pure-form input[type="text"]:focus, 66 | .pure-form input[type="password"]:focus, 67 | .pure-form input[type="email"]:focus, 68 | .pure-form input[type="url"]:focus, 69 | .pure-form input[type="date"]:focus, 70 | .pure-form input[type="month"]:focus, 71 | .pure-form input[type="time"]:focus, 72 | .pure-form input[type="datetime"]:focus, 73 | .pure-form input[type="datetime-local"]:focus, 74 | .pure-form input[type="week"]:focus, 75 | .pure-form input[type="number"]:focus, 76 | .pure-form input[type="search"]:focus, 77 | .pure-form input[type="tel"]:focus, 78 | .pure-form input[type="color"]:focus, 79 | .pure-form select:focus, 80 | .pure-form textarea:focus { 81 | outline: 0; 82 | border-color: #129FEA; 83 | } 84 | 85 | /* 86 | Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 87 | since IE8 won't execute CSS that contains a CSS3 selector. 88 | */ 89 | .pure-form input:not([type]):focus { 90 | outline: 0; 91 | border-color: #129FEA; 92 | } 93 | 94 | .pure-form input[type="file"]:focus, 95 | .pure-form input[type="radio"]:focus, 96 | .pure-form input[type="checkbox"]:focus { 97 | outline: thin solid #129FEA; 98 | outline: 1px auto #129FEA; 99 | } 100 | .pure-form .pure-checkbox, 101 | .pure-form .pure-radio { 102 | margin: 0.5em 0; 103 | display: block; 104 | } 105 | 106 | .pure-form input[type="text"][disabled], 107 | .pure-form input[type="password"][disabled], 108 | .pure-form input[type="email"][disabled], 109 | .pure-form input[type="url"][disabled], 110 | .pure-form input[type="date"][disabled], 111 | .pure-form input[type="month"][disabled], 112 | .pure-form input[type="time"][disabled], 113 | .pure-form input[type="datetime"][disabled], 114 | .pure-form input[type="datetime-local"][disabled], 115 | .pure-form input[type="week"][disabled], 116 | .pure-form input[type="number"][disabled], 117 | .pure-form input[type="search"][disabled], 118 | .pure-form input[type="tel"][disabled], 119 | .pure-form input[type="color"][disabled], 120 | .pure-form select[disabled], 121 | .pure-form textarea[disabled] { 122 | cursor: not-allowed; 123 | background-color: #eaeded; 124 | color: #cad2d3; 125 | } 126 | 127 | /* 128 | Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 129 | since IE8 won't execute CSS that contains a CSS3 selector. 130 | */ 131 | .pure-form input:not([type])[disabled] { 132 | cursor: not-allowed; 133 | background-color: #eaeded; 134 | color: #cad2d3; 135 | } 136 | .pure-form input[readonly], 137 | .pure-form select[readonly], 138 | .pure-form textarea[readonly] { 139 | background-color: #eee; /* menu hover bg color */ 140 | color: #777; /* menu text color */ 141 | border-color: #ccc; 142 | } 143 | 144 | .pure-form input:focus:invalid, 145 | .pure-form textarea:focus:invalid, 146 | .pure-form select:focus:invalid { 147 | color: #b94a48; 148 | border-color: #e9322d; 149 | } 150 | .pure-form input[type="file"]:focus:invalid:focus, 151 | .pure-form input[type="radio"]:focus:invalid:focus, 152 | .pure-form input[type="checkbox"]:focus:invalid:focus { 153 | outline-color: #e9322d; 154 | } 155 | .pure-form select { 156 | /* Normalizes the height; padding is not sufficient. */ 157 | height: 2.25em; 158 | border: 1px solid #ccc; 159 | background-color: white; 160 | } 161 | .pure-form select[multiple] { 162 | height: auto; 163 | } 164 | .pure-form label { 165 | margin: 0.5em 0 0.2em; 166 | } 167 | .pure-form fieldset { 168 | margin: 0; 169 | padding: 0.35em 0 0.75em; 170 | border: 0; 171 | } 172 | .pure-form legend { 173 | display: block; 174 | width: 100%; 175 | padding: 0.3em 0; 176 | margin-bottom: 0.3em; 177 | color: #333; 178 | border-bottom: 1px solid #e5e5e5; 179 | } 180 | 181 | .pure-form-stacked input[type="text"], 182 | .pure-form-stacked input[type="password"], 183 | .pure-form-stacked input[type="email"], 184 | .pure-form-stacked input[type="url"], 185 | .pure-form-stacked input[type="date"], 186 | .pure-form-stacked input[type="month"], 187 | .pure-form-stacked input[type="time"], 188 | .pure-form-stacked input[type="datetime"], 189 | .pure-form-stacked input[type="datetime-local"], 190 | .pure-form-stacked input[type="week"], 191 | .pure-form-stacked input[type="number"], 192 | .pure-form-stacked input[type="search"], 193 | .pure-form-stacked input[type="tel"], 194 | .pure-form-stacked input[type="color"], 195 | .pure-form-stacked input[type="file"], 196 | .pure-form-stacked select, 197 | .pure-form-stacked label, 198 | .pure-form-stacked textarea { 199 | display: block; 200 | margin: 0.25em 0; 201 | } 202 | 203 | /* 204 | Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 205 | since IE8 won't execute CSS that contains a CSS3 selector. 206 | */ 207 | .pure-form-stacked input:not([type]) { 208 | display: block; 209 | margin: 0.25em 0; 210 | } 211 | .pure-form-aligned input, 212 | .pure-form-aligned textarea, 213 | .pure-form-aligned select, 214 | /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ 215 | .pure-form-aligned .pure-help-inline, 216 | .pure-form-message-inline { 217 | display: inline-block; 218 | *display: inline; 219 | *zoom: 1; 220 | vertical-align: middle; 221 | } 222 | .pure-form-aligned textarea { 223 | vertical-align: top; 224 | } 225 | 226 | /* Aligned Forms */ 227 | .pure-form-aligned .pure-control-group { 228 | margin-bottom: 0.5em; 229 | } 230 | .pure-form-aligned .pure-control-group label { 231 | text-align: right; 232 | display: inline-block; 233 | vertical-align: middle; 234 | width: 10em; 235 | margin: 0 1em 0 0; 236 | } 237 | .pure-form-aligned .pure-controls { 238 | margin: 1.5em 0 0 11em; 239 | } 240 | 241 | /* Rounded Inputs */ 242 | .pure-form input.pure-input-rounded, 243 | .pure-form .pure-input-rounded { 244 | border-radius: 2em; 245 | padding: 0.5em 1em; 246 | } 247 | 248 | /* Grouped Inputs */ 249 | .pure-form .pure-group fieldset { 250 | margin-bottom: 10px; 251 | } 252 | .pure-form .pure-group input, 253 | .pure-form .pure-group textarea { 254 | display: block; 255 | padding: 10px; 256 | margin: 0 0 -1px; 257 | border-radius: 0; 258 | position: relative; 259 | top: -1px; 260 | } 261 | .pure-form .pure-group input:focus, 262 | .pure-form .pure-group textarea:focus { 263 | z-index: 3; 264 | } 265 | .pure-form .pure-group input:first-child, 266 | .pure-form .pure-group textarea:first-child { 267 | top: 1px; 268 | border-radius: 4px 4px 0 0; 269 | margin: 0; 270 | } 271 | .pure-form .pure-group input:first-child:last-child, 272 | .pure-form .pure-group textarea:first-child:last-child { 273 | top: 1px; 274 | border-radius: 4px; 275 | margin: 0; 276 | } 277 | .pure-form .pure-group input:last-child, 278 | .pure-form .pure-group textarea:last-child { 279 | top: -2px; 280 | border-radius: 0 0 4px 4px; 281 | margin: 0; 282 | } 283 | .pure-form .pure-group button { 284 | margin: 0.35em 0; 285 | } 286 | 287 | .pure-form .pure-input-1 { 288 | width: 100%; 289 | } 290 | .pure-form .pure-input-2-3 { 291 | width: 66%; 292 | } 293 | .pure-form .pure-input-1-2 { 294 | width: 50%; 295 | } 296 | .pure-form .pure-input-1-3 { 297 | width: 33%; 298 | } 299 | .pure-form .pure-input-1-4 { 300 | width: 25%; 301 | } 302 | 303 | /* Inline help for forms */ 304 | /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ 305 | .pure-form .pure-help-inline, 306 | .pure-form-message-inline { 307 | display: inline-block; 308 | padding-left: 0.3em; 309 | color: #666; 310 | vertical-align: middle; 311 | font-size: 0.875em; 312 | } 313 | 314 | /* Block help for forms */ 315 | .pure-form-message { 316 | display: block; 317 | color: #666; 318 | font-size: 0.875em; 319 | } 320 | 321 | @media only screen and (max-width : 480px) { 322 | .pure-form button[type="submit"] { 323 | margin: 0.7em 0 0; 324 | } 325 | 326 | .pure-form input:not([type]), 327 | .pure-form input[type="text"], 328 | .pure-form input[type="password"], 329 | .pure-form input[type="email"], 330 | .pure-form input[type="url"], 331 | .pure-form input[type="date"], 332 | .pure-form input[type="month"], 333 | .pure-form input[type="time"], 334 | .pure-form input[type="datetime"], 335 | .pure-form input[type="datetime-local"], 336 | .pure-form input[type="week"], 337 | .pure-form input[type="number"], 338 | .pure-form input[type="search"], 339 | .pure-form input[type="tel"], 340 | .pure-form input[type="color"], 341 | .pure-form label { 342 | margin-bottom: 0.3em; 343 | display: block; 344 | } 345 | 346 | .pure-group input:not([type]), 347 | .pure-group input[type="text"], 348 | .pure-group input[type="password"], 349 | .pure-group input[type="email"], 350 | .pure-group input[type="url"], 351 | .pure-group input[type="date"], 352 | .pure-group input[type="month"], 353 | .pure-group input[type="time"], 354 | .pure-group input[type="datetime"], 355 | .pure-group input[type="datetime-local"], 356 | .pure-group input[type="week"], 357 | .pure-group input[type="number"], 358 | .pure-group input[type="search"], 359 | .pure-group input[type="tel"], 360 | .pure-group input[type="color"] { 361 | margin-bottom: 0; 362 | } 363 | 364 | .pure-form-aligned .pure-control-group label { 365 | margin-bottom: 0.3em; 366 | text-align: left; 367 | display: block; 368 | width: 100%; 369 | } 370 | 371 | .pure-form-aligned .pure-controls { 372 | margin: 1.5em 0 0 0; 373 | } 374 | 375 | /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ 376 | .pure-form .pure-help-inline, 377 | .pure-form-message-inline, 378 | .pure-form-message { 379 | display: block; 380 | font-size: 0.75em; 381 | /* Increased bottom padding to make it group with its related input element. */ 382 | padding: 0.2em 0 0.8em; 383 | } 384 | } -------------------------------------------------------------------------------- /lib/grids-nr.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Pure v0.6.0 3 | Copyright 2014 Yahoo! Inc. All rights reserved. 4 | Licensed under the BSD License. 5 | https://github.com/yahoo/pure/blob/master/LICENSE.md 6 | */ 7 | /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ 8 | 9 | .pure-g { 10 | letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ 11 | *letter-spacing: normal; /* reset IE < 8 */ 12 | *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ 13 | text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ 14 | 15 | /* 16 | Sets the font stack to fonts known to work properly with the above letter 17 | and word spacings. See: https://github.com/yahoo/pure/issues/41/ 18 | 19 | The following font stack makes Pure Grids work on all known environments. 20 | 21 | * FreeSans: Ships with many Linux distros, including Ubuntu 22 | 23 | * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and 24 | Arial to get picked up by the browser, even though neither is available 25 | in Chrome OS. 26 | 27 | * Droid Sans: Ships with all versions of Android. 28 | 29 | * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. 30 | */ 31 | font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 32 | 33 | /* 34 | Use flexbox when possible to avoid `letter-spacing` side-effects. 35 | 36 | NOTE: Firefox (as of 25) does not currently support flex-wrap, so the 37 | `-moz-` prefix version is omitted. 38 | */ 39 | 40 | display: -webkit-flex; 41 | -webkit-flex-flow: row wrap; 42 | 43 | /* IE10 uses display: flexbox */ 44 | display: -ms-flexbox; 45 | -ms-flex-flow: row wrap; 46 | 47 | /* Prevents distributing space between rows */ 48 | -ms-align-content: flex-start; 49 | -webkit-align-content: flex-start; 50 | align-content: flex-start; 51 | } 52 | 53 | /* Opera as of 12 on Windows needs word-spacing. 54 | The ".opera-only" selector is used to prevent actual prefocus styling 55 | and is not required in markup. 56 | */ 57 | .opera-only :-o-prefocus, 58 | .pure-g { 59 | word-spacing: -0.43em; 60 | } 61 | 62 | .pure-u { 63 | display: inline-block; 64 | *display: inline; /* IE < 8: fake inline-block */ 65 | zoom: 1; 66 | letter-spacing: normal; 67 | word-spacing: normal; 68 | vertical-align: top; 69 | text-rendering: auto; 70 | } 71 | 72 | /* 73 | Resets the font family back to the OS/browser's default sans-serif font, 74 | this the same font stack that Normalize.css sets for the `body`. 75 | */ 76 | .pure-g [class *= "pure-u"] { 77 | font-family: sans-serif; 78 | } 79 | 80 | .pure-u-1, 81 | .pure-u-1-1, 82 | .pure-u-1-2, 83 | .pure-u-1-3, 84 | .pure-u-2-3, 85 | .pure-u-1-4, 86 | .pure-u-3-4, 87 | .pure-u-1-5, 88 | .pure-u-2-5, 89 | .pure-u-3-5, 90 | .pure-u-4-5, 91 | .pure-u-5-5, 92 | .pure-u-1-6, 93 | .pure-u-5-6, 94 | .pure-u-1-8, 95 | .pure-u-3-8, 96 | .pure-u-5-8, 97 | .pure-u-7-8, 98 | .pure-u-1-12, 99 | .pure-u-5-12, 100 | .pure-u-7-12, 101 | .pure-u-11-12, 102 | .pure-u-1-24, 103 | .pure-u-2-24, 104 | .pure-u-3-24, 105 | .pure-u-4-24, 106 | .pure-u-5-24, 107 | .pure-u-6-24, 108 | .pure-u-7-24, 109 | .pure-u-8-24, 110 | .pure-u-9-24, 111 | .pure-u-10-24, 112 | .pure-u-11-24, 113 | .pure-u-12-24, 114 | .pure-u-13-24, 115 | .pure-u-14-24, 116 | .pure-u-15-24, 117 | .pure-u-16-24, 118 | .pure-u-17-24, 119 | .pure-u-18-24, 120 | .pure-u-19-24, 121 | .pure-u-20-24, 122 | .pure-u-21-24, 123 | .pure-u-22-24, 124 | .pure-u-23-24, 125 | .pure-u-24-24 { 126 | display: inline-block; 127 | *display: inline; 128 | zoom: 1; 129 | letter-spacing: normal; 130 | word-spacing: normal; 131 | vertical-align: top; 132 | text-rendering: auto; 133 | } 134 | 135 | .pure-u-1-24 { 136 | width: 4.1667%; 137 | *width: 4.1357%; 138 | } 139 | 140 | .pure-u-1-12, 141 | .pure-u-2-24 { 142 | width: 8.3333%; 143 | *width: 8.3023%; 144 | } 145 | 146 | .pure-u-1-8, 147 | .pure-u-3-24 { 148 | width: 12.5000%; 149 | *width: 12.4690%; 150 | } 151 | 152 | .pure-u-1-6, 153 | .pure-u-4-24 { 154 | width: 16.6667%; 155 | *width: 16.6357%; 156 | } 157 | 158 | .pure-u-1-5 { 159 | width: 20%; 160 | *width: 19.9690%; 161 | } 162 | 163 | .pure-u-5-24 { 164 | width: 20.8333%; 165 | *width: 20.8023%; 166 | } 167 | 168 | .pure-u-1-4, 169 | .pure-u-6-24 { 170 | width: 25%; 171 | *width: 24.9690%; 172 | } 173 | 174 | .pure-u-7-24 { 175 | width: 29.1667%; 176 | *width: 29.1357%; 177 | } 178 | 179 | .pure-u-1-3, 180 | .pure-u-8-24 { 181 | width: 33.3333%; 182 | *width: 33.3023%; 183 | } 184 | 185 | .pure-u-3-8, 186 | .pure-u-9-24 { 187 | width: 37.5000%; 188 | *width: 37.4690%; 189 | } 190 | 191 | .pure-u-2-5 { 192 | width: 40%; 193 | *width: 39.9690%; 194 | } 195 | 196 | .pure-u-5-12, 197 | .pure-u-10-24 { 198 | width: 41.6667%; 199 | *width: 41.6357%; 200 | } 201 | 202 | .pure-u-11-24 { 203 | width: 45.8333%; 204 | *width: 45.8023%; 205 | } 206 | 207 | .pure-u-1-2, 208 | .pure-u-12-24 { 209 | width: 50%; 210 | *width: 49.9690%; 211 | } 212 | 213 | .pure-u-13-24 { 214 | width: 54.1667%; 215 | *width: 54.1357%; 216 | } 217 | 218 | .pure-u-7-12, 219 | .pure-u-14-24 { 220 | width: 58.3333%; 221 | *width: 58.3023%; 222 | } 223 | 224 | .pure-u-3-5 { 225 | width: 60%; 226 | *width: 59.9690%; 227 | } 228 | 229 | .pure-u-5-8, 230 | .pure-u-15-24 { 231 | width: 62.5000%; 232 | *width: 62.4690%; 233 | } 234 | 235 | .pure-u-2-3, 236 | .pure-u-16-24 { 237 | width: 66.6667%; 238 | *width: 66.6357%; 239 | } 240 | 241 | .pure-u-17-24 { 242 | width: 70.8333%; 243 | *width: 70.8023%; 244 | } 245 | 246 | .pure-u-3-4, 247 | .pure-u-18-24 { 248 | width: 75%; 249 | *width: 74.9690%; 250 | } 251 | 252 | .pure-u-19-24 { 253 | width: 79.1667%; 254 | *width: 79.1357%; 255 | } 256 | 257 | .pure-u-4-5 { 258 | width: 80%; 259 | *width: 79.9690%; 260 | } 261 | 262 | .pure-u-5-6, 263 | .pure-u-20-24 { 264 | width: 83.3333%; 265 | *width: 83.3023%; 266 | } 267 | 268 | .pure-u-7-8, 269 | .pure-u-21-24 { 270 | width: 87.5000%; 271 | *width: 87.4690%; 272 | } 273 | 274 | .pure-u-11-12, 275 | .pure-u-22-24 { 276 | width: 91.6667%; 277 | *width: 91.6357%; 278 | } 279 | 280 | .pure-u-23-24 { 281 | width: 95.8333%; 282 | *width: 95.8023%; 283 | } 284 | 285 | .pure-u-1, 286 | .pure-u-1-1, 287 | .pure-u-5-5, 288 | .pure-u-24-24 { 289 | width: 100%; 290 | } -------------------------------------------------------------------------------- /lib/grids.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Pure v0.6.0 3 | Copyright 2014 Yahoo! Inc. All rights reserved. 4 | Licensed under the BSD License. 5 | https://github.com/yahoo/pure/blob/master/LICENSE.md 6 | */ 7 | /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ 8 | 9 | .pure-g { 10 | letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ 11 | *letter-spacing: normal; /* reset IE < 8 */ 12 | *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ 13 | text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ 14 | 15 | /* 16 | Sets the font stack to fonts known to work properly with the above letter 17 | and word spacings. See: https://github.com/yahoo/pure/issues/41/ 18 | 19 | The following font stack makes Pure Grids work on all known environments. 20 | 21 | * FreeSans: Ships with many Linux distros, including Ubuntu 22 | 23 | * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and 24 | Arial to get picked up by the browser, even though neither is available 25 | in Chrome OS. 26 | 27 | * Droid Sans: Ships with all versions of Android. 28 | 29 | * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. 30 | */ 31 | font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 32 | 33 | /* 34 | Use flexbox when possible to avoid `letter-spacing` side-effects. 35 | 36 | NOTE: Firefox (as of 25) does not currently support flex-wrap, so the 37 | `-moz-` prefix version is omitted. 38 | */ 39 | 40 | display: -webkit-flex; 41 | -webkit-flex-flow: row wrap; 42 | 43 | /* IE10 uses display: flexbox */ 44 | display: -ms-flexbox; 45 | -ms-flex-flow: row wrap; 46 | 47 | /* Prevents distributing space between rows */ 48 | -ms-align-content: flex-start; 49 | -webkit-align-content: flex-start; 50 | align-content: flex-start; 51 | } 52 | 53 | /* Opera as of 12 on Windows needs word-spacing. 54 | The ".opera-only" selector is used to prevent actual prefocus styling 55 | and is not required in markup. 56 | */ 57 | .opera-only :-o-prefocus, 58 | .pure-g { 59 | word-spacing: -0.43em; 60 | } 61 | 62 | .pure-u { 63 | display: inline-block; 64 | *display: inline; /* IE < 8: fake inline-block */ 65 | zoom: 1; 66 | letter-spacing: normal; 67 | word-spacing: normal; 68 | vertical-align: top; 69 | text-rendering: auto; 70 | } 71 | 72 | /* 73 | Resets the font family back to the OS/browser's default sans-serif font, 74 | this the same font stack that Normalize.css sets for the `body`. 75 | */ 76 | .pure-g [class *= "pure-u"] { 77 | font-family: sans-serif; 78 | } 79 | 80 | .pure-u-1, 81 | .pure-u-1-1, 82 | .pure-u-1-2, 83 | .pure-u-1-3, 84 | .pure-u-2-3, 85 | .pure-u-1-4, 86 | .pure-u-3-4, 87 | .pure-u-1-5, 88 | .pure-u-2-5, 89 | .pure-u-3-5, 90 | .pure-u-4-5, 91 | .pure-u-5-5, 92 | .pure-u-1-6, 93 | .pure-u-5-6, 94 | .pure-u-1-8, 95 | .pure-u-3-8, 96 | .pure-u-5-8, 97 | .pure-u-7-8, 98 | .pure-u-1-12, 99 | .pure-u-5-12, 100 | .pure-u-7-12, 101 | .pure-u-11-12, 102 | .pure-u-1-24, 103 | .pure-u-2-24, 104 | .pure-u-3-24, 105 | .pure-u-4-24, 106 | .pure-u-5-24, 107 | .pure-u-6-24, 108 | .pure-u-7-24, 109 | .pure-u-8-24, 110 | .pure-u-9-24, 111 | .pure-u-10-24, 112 | .pure-u-11-24, 113 | .pure-u-12-24, 114 | .pure-u-13-24, 115 | .pure-u-14-24, 116 | .pure-u-15-24, 117 | .pure-u-16-24, 118 | .pure-u-17-24, 119 | .pure-u-18-24, 120 | .pure-u-19-24, 121 | .pure-u-20-24, 122 | .pure-u-21-24, 123 | .pure-u-22-24, 124 | .pure-u-23-24, 125 | .pure-u-24-24 { 126 | display: inline-block; 127 | *display: inline; 128 | zoom: 1; 129 | letter-spacing: normal; 130 | word-spacing: normal; 131 | vertical-align: top; 132 | text-rendering: auto; 133 | } 134 | 135 | .pure-u-1-24 { 136 | width: 4.1667%; 137 | *width: 4.1357%; 138 | } 139 | 140 | .pure-u-1-12, 141 | .pure-u-2-24 { 142 | width: 8.3333%; 143 | *width: 8.3023%; 144 | } 145 | 146 | .pure-u-1-8, 147 | .pure-u-3-24 { 148 | width: 12.5000%; 149 | *width: 12.4690%; 150 | } 151 | 152 | .pure-u-1-6, 153 | .pure-u-4-24 { 154 | width: 16.6667%; 155 | *width: 16.6357%; 156 | } 157 | 158 | .pure-u-1-5 { 159 | width: 20%; 160 | *width: 19.9690%; 161 | } 162 | 163 | .pure-u-5-24 { 164 | width: 20.8333%; 165 | *width: 20.8023%; 166 | } 167 | 168 | .pure-u-1-4, 169 | .pure-u-6-24 { 170 | width: 25%; 171 | *width: 24.9690%; 172 | } 173 | 174 | .pure-u-7-24 { 175 | width: 29.1667%; 176 | *width: 29.1357%; 177 | } 178 | 179 | .pure-u-1-3, 180 | .pure-u-8-24 { 181 | width: 33.3333%; 182 | *width: 33.3023%; 183 | } 184 | 185 | .pure-u-3-8, 186 | .pure-u-9-24 { 187 | width: 37.5000%; 188 | *width: 37.4690%; 189 | } 190 | 191 | .pure-u-2-5 { 192 | width: 40%; 193 | *width: 39.9690%; 194 | } 195 | 196 | .pure-u-5-12, 197 | .pure-u-10-24 { 198 | width: 41.6667%; 199 | *width: 41.6357%; 200 | } 201 | 202 | .pure-u-11-24 { 203 | width: 45.8333%; 204 | *width: 45.8023%; 205 | } 206 | 207 | .pure-u-1-2, 208 | .pure-u-12-24 { 209 | width: 50%; 210 | *width: 49.9690%; 211 | } 212 | 213 | .pure-u-13-24 { 214 | width: 54.1667%; 215 | *width: 54.1357%; 216 | } 217 | 218 | .pure-u-7-12, 219 | .pure-u-14-24 { 220 | width: 58.3333%; 221 | *width: 58.3023%; 222 | } 223 | 224 | .pure-u-3-5 { 225 | width: 60%; 226 | *width: 59.9690%; 227 | } 228 | 229 | .pure-u-5-8, 230 | .pure-u-15-24 { 231 | width: 62.5000%; 232 | *width: 62.4690%; 233 | } 234 | 235 | .pure-u-2-3, 236 | .pure-u-16-24 { 237 | width: 66.6667%; 238 | *width: 66.6357%; 239 | } 240 | 241 | .pure-u-17-24 { 242 | width: 70.8333%; 243 | *width: 70.8023%; 244 | } 245 | 246 | .pure-u-3-4, 247 | .pure-u-18-24 { 248 | width: 75%; 249 | *width: 74.9690%; 250 | } 251 | 252 | .pure-u-19-24 { 253 | width: 79.1667%; 254 | *width: 79.1357%; 255 | } 256 | 257 | .pure-u-4-5 { 258 | width: 80%; 259 | *width: 79.9690%; 260 | } 261 | 262 | .pure-u-5-6, 263 | .pure-u-20-24 { 264 | width: 83.3333%; 265 | *width: 83.3023%; 266 | } 267 | 268 | .pure-u-7-8, 269 | .pure-u-21-24 { 270 | width: 87.5000%; 271 | *width: 87.4690%; 272 | } 273 | 274 | .pure-u-11-12, 275 | .pure-u-22-24 { 276 | width: 91.6667%; 277 | *width: 91.6357%; 278 | } 279 | 280 | .pure-u-23-24 { 281 | width: 95.8333%; 282 | *width: 95.8023%; 283 | } 284 | 285 | .pure-u-1, 286 | .pure-u-1-1, 287 | .pure-u-5-5, 288 | .pure-u-24-24 { 289 | width: 100%; 290 | } 291 | 292 | /*! 293 | Pure v0.6.0 294 | Copyright 2014 Yahoo! Inc. All rights reserved. 295 | Licensed under the BSD License. 296 | https://github.com/yahoo/pure/blob/master/LICENSE.md 297 | */ 298 | @media screen and (min-width: 35.5em) { 299 | .pure-u-sm-1, 300 | .pure-u-sm-1-1, 301 | .pure-u-sm-1-2, 302 | .pure-u-sm-1-3, 303 | .pure-u-sm-2-3, 304 | .pure-u-sm-1-4, 305 | .pure-u-sm-3-4, 306 | .pure-u-sm-1-5, 307 | .pure-u-sm-2-5, 308 | .pure-u-sm-3-5, 309 | .pure-u-sm-4-5, 310 | .pure-u-sm-5-5, 311 | .pure-u-sm-1-6, 312 | .pure-u-sm-5-6, 313 | .pure-u-sm-1-8, 314 | .pure-u-sm-3-8, 315 | .pure-u-sm-5-8, 316 | .pure-u-sm-7-8, 317 | .pure-u-sm-1-12, 318 | .pure-u-sm-5-12, 319 | .pure-u-sm-7-12, 320 | .pure-u-sm-11-12, 321 | .pure-u-sm-1-24, 322 | .pure-u-sm-2-24, 323 | .pure-u-sm-3-24, 324 | .pure-u-sm-4-24, 325 | .pure-u-sm-5-24, 326 | .pure-u-sm-6-24, 327 | .pure-u-sm-7-24, 328 | .pure-u-sm-8-24, 329 | .pure-u-sm-9-24, 330 | .pure-u-sm-10-24, 331 | .pure-u-sm-11-24, 332 | .pure-u-sm-12-24, 333 | .pure-u-sm-13-24, 334 | .pure-u-sm-14-24, 335 | .pure-u-sm-15-24, 336 | .pure-u-sm-16-24, 337 | .pure-u-sm-17-24, 338 | .pure-u-sm-18-24, 339 | .pure-u-sm-19-24, 340 | .pure-u-sm-20-24, 341 | .pure-u-sm-21-24, 342 | .pure-u-sm-22-24, 343 | .pure-u-sm-23-24, 344 | .pure-u-sm-24-24 { 345 | display: inline-block; 346 | *display: inline; 347 | zoom: 1; 348 | letter-spacing: normal; 349 | word-spacing: normal; 350 | vertical-align: top; 351 | text-rendering: auto; 352 | } 353 | 354 | .pure-u-sm-1-24 { 355 | width: 4.1667%; 356 | *width: 4.1357%; 357 | } 358 | 359 | .pure-u-sm-1-12, 360 | .pure-u-sm-2-24 { 361 | width: 8.3333%; 362 | *width: 8.3023%; 363 | } 364 | 365 | .pure-u-sm-1-8, 366 | .pure-u-sm-3-24 { 367 | width: 12.5000%; 368 | *width: 12.4690%; 369 | } 370 | 371 | .pure-u-sm-1-6, 372 | .pure-u-sm-4-24 { 373 | width: 16.6667%; 374 | *width: 16.6357%; 375 | } 376 | 377 | .pure-u-sm-1-5 { 378 | width: 20%; 379 | *width: 19.9690%; 380 | } 381 | 382 | .pure-u-sm-5-24 { 383 | width: 20.8333%; 384 | *width: 20.8023%; 385 | } 386 | 387 | .pure-u-sm-1-4, 388 | .pure-u-sm-6-24 { 389 | width: 25%; 390 | *width: 24.9690%; 391 | } 392 | 393 | .pure-u-sm-7-24 { 394 | width: 29.1667%; 395 | *width: 29.1357%; 396 | } 397 | 398 | .pure-u-sm-1-3, 399 | .pure-u-sm-8-24 { 400 | width: 33.3333%; 401 | *width: 33.3023%; 402 | } 403 | 404 | .pure-u-sm-3-8, 405 | .pure-u-sm-9-24 { 406 | width: 37.5000%; 407 | *width: 37.4690%; 408 | } 409 | 410 | .pure-u-sm-2-5 { 411 | width: 40%; 412 | *width: 39.9690%; 413 | } 414 | 415 | .pure-u-sm-5-12, 416 | .pure-u-sm-10-24 { 417 | width: 41.6667%; 418 | *width: 41.6357%; 419 | } 420 | 421 | .pure-u-sm-11-24 { 422 | width: 45.8333%; 423 | *width: 45.8023%; 424 | } 425 | 426 | .pure-u-sm-1-2, 427 | .pure-u-sm-12-24 { 428 | width: 50%; 429 | *width: 49.9690%; 430 | } 431 | 432 | .pure-u-sm-13-24 { 433 | width: 54.1667%; 434 | *width: 54.1357%; 435 | } 436 | 437 | .pure-u-sm-7-12, 438 | .pure-u-sm-14-24 { 439 | width: 58.3333%; 440 | *width: 58.3023%; 441 | } 442 | 443 | .pure-u-sm-3-5 { 444 | width: 60%; 445 | *width: 59.9690%; 446 | } 447 | 448 | .pure-u-sm-5-8, 449 | .pure-u-sm-15-24 { 450 | width: 62.5000%; 451 | *width: 62.4690%; 452 | } 453 | 454 | .pure-u-sm-2-3, 455 | .pure-u-sm-16-24 { 456 | width: 66.6667%; 457 | *width: 66.6357%; 458 | } 459 | 460 | .pure-u-sm-17-24 { 461 | width: 70.8333%; 462 | *width: 70.8023%; 463 | } 464 | 465 | .pure-u-sm-3-4, 466 | .pure-u-sm-18-24 { 467 | width: 75%; 468 | *width: 74.9690%; 469 | } 470 | 471 | .pure-u-sm-19-24 { 472 | width: 79.1667%; 473 | *width: 79.1357%; 474 | } 475 | 476 | .pure-u-sm-4-5 { 477 | width: 80%; 478 | *width: 79.9690%; 479 | } 480 | 481 | .pure-u-sm-5-6, 482 | .pure-u-sm-20-24 { 483 | width: 83.3333%; 484 | *width: 83.3023%; 485 | } 486 | 487 | .pure-u-sm-7-8, 488 | .pure-u-sm-21-24 { 489 | width: 87.5000%; 490 | *width: 87.4690%; 491 | } 492 | 493 | .pure-u-sm-11-12, 494 | .pure-u-sm-22-24 { 495 | width: 91.6667%; 496 | *width: 91.6357%; 497 | } 498 | 499 | .pure-u-sm-23-24 { 500 | width: 95.8333%; 501 | *width: 95.8023%; 502 | } 503 | 504 | .pure-u-sm-1, 505 | .pure-u-sm-1-1, 506 | .pure-u-sm-5-5, 507 | .pure-u-sm-24-24 { 508 | width: 100%; 509 | } 510 | } 511 | 512 | @media screen and (min-width: 48em) { 513 | .pure-u-md-1, 514 | .pure-u-md-1-1, 515 | .pure-u-md-1-2, 516 | .pure-u-md-1-3, 517 | .pure-u-md-2-3, 518 | .pure-u-md-1-4, 519 | .pure-u-md-3-4, 520 | .pure-u-md-1-5, 521 | .pure-u-md-2-5, 522 | .pure-u-md-3-5, 523 | .pure-u-md-4-5, 524 | .pure-u-md-5-5, 525 | .pure-u-md-1-6, 526 | .pure-u-md-5-6, 527 | .pure-u-md-1-8, 528 | .pure-u-md-3-8, 529 | .pure-u-md-5-8, 530 | .pure-u-md-7-8, 531 | .pure-u-md-1-12, 532 | .pure-u-md-5-12, 533 | .pure-u-md-7-12, 534 | .pure-u-md-11-12, 535 | .pure-u-md-1-24, 536 | .pure-u-md-2-24, 537 | .pure-u-md-3-24, 538 | .pure-u-md-4-24, 539 | .pure-u-md-5-24, 540 | .pure-u-md-6-24, 541 | .pure-u-md-7-24, 542 | .pure-u-md-8-24, 543 | .pure-u-md-9-24, 544 | .pure-u-md-10-24, 545 | .pure-u-md-11-24, 546 | .pure-u-md-12-24, 547 | .pure-u-md-13-24, 548 | .pure-u-md-14-24, 549 | .pure-u-md-15-24, 550 | .pure-u-md-16-24, 551 | .pure-u-md-17-24, 552 | .pure-u-md-18-24, 553 | .pure-u-md-19-24, 554 | .pure-u-md-20-24, 555 | .pure-u-md-21-24, 556 | .pure-u-md-22-24, 557 | .pure-u-md-23-24, 558 | .pure-u-md-24-24 { 559 | display: inline-block; 560 | *display: inline; 561 | zoom: 1; 562 | letter-spacing: normal; 563 | word-spacing: normal; 564 | vertical-align: top; 565 | text-rendering: auto; 566 | } 567 | 568 | .pure-u-md-1-24 { 569 | width: 4.1667%; 570 | *width: 4.1357%; 571 | } 572 | 573 | .pure-u-md-1-12, 574 | .pure-u-md-2-24 { 575 | width: 8.3333%; 576 | *width: 8.3023%; 577 | } 578 | 579 | .pure-u-md-1-8, 580 | .pure-u-md-3-24 { 581 | width: 12.5000%; 582 | *width: 12.4690%; 583 | } 584 | 585 | .pure-u-md-1-6, 586 | .pure-u-md-4-24 { 587 | width: 16.6667%; 588 | *width: 16.6357%; 589 | } 590 | 591 | .pure-u-md-1-5 { 592 | width: 20%; 593 | *width: 19.9690%; 594 | } 595 | 596 | .pure-u-md-5-24 { 597 | width: 20.8333%; 598 | *width: 20.8023%; 599 | } 600 | 601 | .pure-u-md-1-4, 602 | .pure-u-md-6-24 { 603 | width: 25%; 604 | *width: 24.9690%; 605 | } 606 | 607 | .pure-u-md-7-24 { 608 | width: 29.1667%; 609 | *width: 29.1357%; 610 | } 611 | 612 | .pure-u-md-1-3, 613 | .pure-u-md-8-24 { 614 | width: 33.3333%; 615 | *width: 33.3023%; 616 | } 617 | 618 | .pure-u-md-3-8, 619 | .pure-u-md-9-24 { 620 | width: 37.5000%; 621 | *width: 37.4690%; 622 | } 623 | 624 | .pure-u-md-2-5 { 625 | width: 40%; 626 | *width: 39.9690%; 627 | } 628 | 629 | .pure-u-md-5-12, 630 | .pure-u-md-10-24 { 631 | width: 41.6667%; 632 | *width: 41.6357%; 633 | } 634 | 635 | .pure-u-md-11-24 { 636 | width: 45.8333%; 637 | *width: 45.8023%; 638 | } 639 | 640 | .pure-u-md-1-2, 641 | .pure-u-md-12-24 { 642 | width: 50%; 643 | *width: 49.9690%; 644 | } 645 | 646 | .pure-u-md-13-24 { 647 | width: 54.1667%; 648 | *width: 54.1357%; 649 | } 650 | 651 | .pure-u-md-7-12, 652 | .pure-u-md-14-24 { 653 | width: 58.3333%; 654 | *width: 58.3023%; 655 | } 656 | 657 | .pure-u-md-3-5 { 658 | width: 60%; 659 | *width: 59.9690%; 660 | } 661 | 662 | .pure-u-md-5-8, 663 | .pure-u-md-15-24 { 664 | width: 62.5000%; 665 | *width: 62.4690%; 666 | } 667 | 668 | .pure-u-md-2-3, 669 | .pure-u-md-16-24 { 670 | width: 66.6667%; 671 | *width: 66.6357%; 672 | } 673 | 674 | .pure-u-md-17-24 { 675 | width: 70.8333%; 676 | *width: 70.8023%; 677 | } 678 | 679 | .pure-u-md-3-4, 680 | .pure-u-md-18-24 { 681 | width: 75%; 682 | *width: 74.9690%; 683 | } 684 | 685 | .pure-u-md-19-24 { 686 | width: 79.1667%; 687 | *width: 79.1357%; 688 | } 689 | 690 | .pure-u-md-4-5 { 691 | width: 80%; 692 | *width: 79.9690%; 693 | } 694 | 695 | .pure-u-md-5-6, 696 | .pure-u-md-20-24 { 697 | width: 83.3333%; 698 | *width: 83.3023%; 699 | } 700 | 701 | .pure-u-md-7-8, 702 | .pure-u-md-21-24 { 703 | width: 87.5000%; 704 | *width: 87.4690%; 705 | } 706 | 707 | .pure-u-md-11-12, 708 | .pure-u-md-22-24 { 709 | width: 91.6667%; 710 | *width: 91.6357%; 711 | } 712 | 713 | .pure-u-md-23-24 { 714 | width: 95.8333%; 715 | *width: 95.8023%; 716 | } 717 | 718 | .pure-u-md-1, 719 | .pure-u-md-1-1, 720 | .pure-u-md-5-5, 721 | .pure-u-md-24-24 { 722 | width: 100%; 723 | } 724 | } 725 | 726 | @media screen and (min-width: 64em) { 727 | .pure-u-lg-1, 728 | .pure-u-lg-1-1, 729 | .pure-u-lg-1-2, 730 | .pure-u-lg-1-3, 731 | .pure-u-lg-2-3, 732 | .pure-u-lg-1-4, 733 | .pure-u-lg-3-4, 734 | .pure-u-lg-1-5, 735 | .pure-u-lg-2-5, 736 | .pure-u-lg-3-5, 737 | .pure-u-lg-4-5, 738 | .pure-u-lg-5-5, 739 | .pure-u-lg-1-6, 740 | .pure-u-lg-5-6, 741 | .pure-u-lg-1-8, 742 | .pure-u-lg-3-8, 743 | .pure-u-lg-5-8, 744 | .pure-u-lg-7-8, 745 | .pure-u-lg-1-12, 746 | .pure-u-lg-5-12, 747 | .pure-u-lg-7-12, 748 | .pure-u-lg-11-12, 749 | .pure-u-lg-1-24, 750 | .pure-u-lg-2-24, 751 | .pure-u-lg-3-24, 752 | .pure-u-lg-4-24, 753 | .pure-u-lg-5-24, 754 | .pure-u-lg-6-24, 755 | .pure-u-lg-7-24, 756 | .pure-u-lg-8-24, 757 | .pure-u-lg-9-24, 758 | .pure-u-lg-10-24, 759 | .pure-u-lg-11-24, 760 | .pure-u-lg-12-24, 761 | .pure-u-lg-13-24, 762 | .pure-u-lg-14-24, 763 | .pure-u-lg-15-24, 764 | .pure-u-lg-16-24, 765 | .pure-u-lg-17-24, 766 | .pure-u-lg-18-24, 767 | .pure-u-lg-19-24, 768 | .pure-u-lg-20-24, 769 | .pure-u-lg-21-24, 770 | .pure-u-lg-22-24, 771 | .pure-u-lg-23-24, 772 | .pure-u-lg-24-24 { 773 | display: inline-block; 774 | *display: inline; 775 | zoom: 1; 776 | letter-spacing: normal; 777 | word-spacing: normal; 778 | vertical-align: top; 779 | text-rendering: auto; 780 | } 781 | 782 | .pure-u-lg-1-24 { 783 | width: 4.1667%; 784 | *width: 4.1357%; 785 | } 786 | 787 | .pure-u-lg-1-12, 788 | .pure-u-lg-2-24 { 789 | width: 8.3333%; 790 | *width: 8.3023%; 791 | } 792 | 793 | .pure-u-lg-1-8, 794 | .pure-u-lg-3-24 { 795 | width: 12.5000%; 796 | *width: 12.4690%; 797 | } 798 | 799 | .pure-u-lg-1-6, 800 | .pure-u-lg-4-24 { 801 | width: 16.6667%; 802 | *width: 16.6357%; 803 | } 804 | 805 | .pure-u-lg-1-5 { 806 | width: 20%; 807 | *width: 19.9690%; 808 | } 809 | 810 | .pure-u-lg-5-24 { 811 | width: 20.8333%; 812 | *width: 20.8023%; 813 | } 814 | 815 | .pure-u-lg-1-4, 816 | .pure-u-lg-6-24 { 817 | width: 25%; 818 | *width: 24.9690%; 819 | } 820 | 821 | .pure-u-lg-7-24 { 822 | width: 29.1667%; 823 | *width: 29.1357%; 824 | } 825 | 826 | .pure-u-lg-1-3, 827 | .pure-u-lg-8-24 { 828 | width: 33.3333%; 829 | *width: 33.3023%; 830 | } 831 | 832 | .pure-u-lg-3-8, 833 | .pure-u-lg-9-24 { 834 | width: 37.5000%; 835 | *width: 37.4690%; 836 | } 837 | 838 | .pure-u-lg-2-5 { 839 | width: 40%; 840 | *width: 39.9690%; 841 | } 842 | 843 | .pure-u-lg-5-12, 844 | .pure-u-lg-10-24 { 845 | width: 41.6667%; 846 | *width: 41.6357%; 847 | } 848 | 849 | .pure-u-lg-11-24 { 850 | width: 45.8333%; 851 | *width: 45.8023%; 852 | } 853 | 854 | .pure-u-lg-1-2, 855 | .pure-u-lg-12-24 { 856 | width: 50%; 857 | *width: 49.9690%; 858 | } 859 | 860 | .pure-u-lg-13-24 { 861 | width: 54.1667%; 862 | *width: 54.1357%; 863 | } 864 | 865 | .pure-u-lg-7-12, 866 | .pure-u-lg-14-24 { 867 | width: 58.3333%; 868 | *width: 58.3023%; 869 | } 870 | 871 | .pure-u-lg-3-5 { 872 | width: 60%; 873 | *width: 59.9690%; 874 | } 875 | 876 | .pure-u-lg-5-8, 877 | .pure-u-lg-15-24 { 878 | width: 62.5000%; 879 | *width: 62.4690%; 880 | } 881 | 882 | .pure-u-lg-2-3, 883 | .pure-u-lg-16-24 { 884 | width: 66.6667%; 885 | *width: 66.6357%; 886 | } 887 | 888 | .pure-u-lg-17-24 { 889 | width: 70.8333%; 890 | *width: 70.8023%; 891 | } 892 | 893 | .pure-u-lg-3-4, 894 | .pure-u-lg-18-24 { 895 | width: 75%; 896 | *width: 74.9690%; 897 | } 898 | 899 | .pure-u-lg-19-24 { 900 | width: 79.1667%; 901 | *width: 79.1357%; 902 | } 903 | 904 | .pure-u-lg-4-5 { 905 | width: 80%; 906 | *width: 79.9690%; 907 | } 908 | 909 | .pure-u-lg-5-6, 910 | .pure-u-lg-20-24 { 911 | width: 83.3333%; 912 | *width: 83.3023%; 913 | } 914 | 915 | .pure-u-lg-7-8, 916 | .pure-u-lg-21-24 { 917 | width: 87.5000%; 918 | *width: 87.4690%; 919 | } 920 | 921 | .pure-u-lg-11-12, 922 | .pure-u-lg-22-24 { 923 | width: 91.6667%; 924 | *width: 91.6357%; 925 | } 926 | 927 | .pure-u-lg-23-24 { 928 | width: 95.8333%; 929 | *width: 95.8023%; 930 | } 931 | 932 | .pure-u-lg-1, 933 | .pure-u-lg-1-1, 934 | .pure-u-lg-5-5, 935 | .pure-u-lg-24-24 { 936 | width: 100%; 937 | } 938 | } 939 | 940 | @media screen and (min-width: 80em) { 941 | .pure-u-xl-1, 942 | .pure-u-xl-1-1, 943 | .pure-u-xl-1-2, 944 | .pure-u-xl-1-3, 945 | .pure-u-xl-2-3, 946 | .pure-u-xl-1-4, 947 | .pure-u-xl-3-4, 948 | .pure-u-xl-1-5, 949 | .pure-u-xl-2-5, 950 | .pure-u-xl-3-5, 951 | .pure-u-xl-4-5, 952 | .pure-u-xl-5-5, 953 | .pure-u-xl-1-6, 954 | .pure-u-xl-5-6, 955 | .pure-u-xl-1-8, 956 | .pure-u-xl-3-8, 957 | .pure-u-xl-5-8, 958 | .pure-u-xl-7-8, 959 | .pure-u-xl-1-12, 960 | .pure-u-xl-5-12, 961 | .pure-u-xl-7-12, 962 | .pure-u-xl-11-12, 963 | .pure-u-xl-1-24, 964 | .pure-u-xl-2-24, 965 | .pure-u-xl-3-24, 966 | .pure-u-xl-4-24, 967 | .pure-u-xl-5-24, 968 | .pure-u-xl-6-24, 969 | .pure-u-xl-7-24, 970 | .pure-u-xl-8-24, 971 | .pure-u-xl-9-24, 972 | .pure-u-xl-10-24, 973 | .pure-u-xl-11-24, 974 | .pure-u-xl-12-24, 975 | .pure-u-xl-13-24, 976 | .pure-u-xl-14-24, 977 | .pure-u-xl-15-24, 978 | .pure-u-xl-16-24, 979 | .pure-u-xl-17-24, 980 | .pure-u-xl-18-24, 981 | .pure-u-xl-19-24, 982 | .pure-u-xl-20-24, 983 | .pure-u-xl-21-24, 984 | .pure-u-xl-22-24, 985 | .pure-u-xl-23-24, 986 | .pure-u-xl-24-24 { 987 | display: inline-block; 988 | *display: inline; 989 | zoom: 1; 990 | letter-spacing: normal; 991 | word-spacing: normal; 992 | vertical-align: top; 993 | text-rendering: auto; 994 | } 995 | 996 | .pure-u-xl-1-24 { 997 | width: 4.1667%; 998 | *width: 4.1357%; 999 | } 1000 | 1001 | .pure-u-xl-1-12, 1002 | .pure-u-xl-2-24 { 1003 | width: 8.3333%; 1004 | *width: 8.3023%; 1005 | } 1006 | 1007 | .pure-u-xl-1-8, 1008 | .pure-u-xl-3-24 { 1009 | width: 12.5000%; 1010 | *width: 12.4690%; 1011 | } 1012 | 1013 | .pure-u-xl-1-6, 1014 | .pure-u-xl-4-24 { 1015 | width: 16.6667%; 1016 | *width: 16.6357%; 1017 | } 1018 | 1019 | .pure-u-xl-1-5 { 1020 | width: 20%; 1021 | *width: 19.9690%; 1022 | } 1023 | 1024 | .pure-u-xl-5-24 { 1025 | width: 20.8333%; 1026 | *width: 20.8023%; 1027 | } 1028 | 1029 | .pure-u-xl-1-4, 1030 | .pure-u-xl-6-24 { 1031 | width: 25%; 1032 | *width: 24.9690%; 1033 | } 1034 | 1035 | .pure-u-xl-7-24 { 1036 | width: 29.1667%; 1037 | *width: 29.1357%; 1038 | } 1039 | 1040 | .pure-u-xl-1-3, 1041 | .pure-u-xl-8-24 { 1042 | width: 33.3333%; 1043 | *width: 33.3023%; 1044 | } 1045 | 1046 | .pure-u-xl-3-8, 1047 | .pure-u-xl-9-24 { 1048 | width: 37.5000%; 1049 | *width: 37.4690%; 1050 | } 1051 | 1052 | .pure-u-xl-2-5 { 1053 | width: 40%; 1054 | *width: 39.9690%; 1055 | } 1056 | 1057 | .pure-u-xl-5-12, 1058 | .pure-u-xl-10-24 { 1059 | width: 41.6667%; 1060 | *width: 41.6357%; 1061 | } 1062 | 1063 | .pure-u-xl-11-24 { 1064 | width: 45.8333%; 1065 | *width: 45.8023%; 1066 | } 1067 | 1068 | .pure-u-xl-1-2, 1069 | .pure-u-xl-12-24 { 1070 | width: 50%; 1071 | *width: 49.9690%; 1072 | } 1073 | 1074 | .pure-u-xl-13-24 { 1075 | width: 54.1667%; 1076 | *width: 54.1357%; 1077 | } 1078 | 1079 | .pure-u-xl-7-12, 1080 | .pure-u-xl-14-24 { 1081 | width: 58.3333%; 1082 | *width: 58.3023%; 1083 | } 1084 | 1085 | .pure-u-xl-3-5 { 1086 | width: 60%; 1087 | *width: 59.9690%; 1088 | } 1089 | 1090 | .pure-u-xl-5-8, 1091 | .pure-u-xl-15-24 { 1092 | width: 62.5000%; 1093 | *width: 62.4690%; 1094 | } 1095 | 1096 | .pure-u-xl-2-3, 1097 | .pure-u-xl-16-24 { 1098 | width: 66.6667%; 1099 | *width: 66.6357%; 1100 | } 1101 | 1102 | .pure-u-xl-17-24 { 1103 | width: 70.8333%; 1104 | *width: 70.8023%; 1105 | } 1106 | 1107 | .pure-u-xl-3-4, 1108 | .pure-u-xl-18-24 { 1109 | width: 75%; 1110 | *width: 74.9690%; 1111 | } 1112 | 1113 | .pure-u-xl-19-24 { 1114 | width: 79.1667%; 1115 | *width: 79.1357%; 1116 | } 1117 | 1118 | .pure-u-xl-4-5 { 1119 | width: 80%; 1120 | *width: 79.9690%; 1121 | } 1122 | 1123 | .pure-u-xl-5-6, 1124 | .pure-u-xl-20-24 { 1125 | width: 83.3333%; 1126 | *width: 83.3023%; 1127 | } 1128 | 1129 | .pure-u-xl-7-8, 1130 | .pure-u-xl-21-24 { 1131 | width: 87.5000%; 1132 | *width: 87.4690%; 1133 | } 1134 | 1135 | .pure-u-xl-11-12, 1136 | .pure-u-xl-22-24 { 1137 | width: 91.6667%; 1138 | *width: 91.6357%; 1139 | } 1140 | 1141 | .pure-u-xl-23-24 { 1142 | width: 95.8333%; 1143 | *width: 95.8023%; 1144 | } 1145 | 1146 | .pure-u-xl-1, 1147 | .pure-u-xl-1-1, 1148 | .pure-u-xl-5-5, 1149 | .pure-u-xl-24-24 { 1150 | width: 100%; 1151 | } 1152 | } -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | import base from './base.css' 2 | import buttons from './buttons.css' 3 | import forms from './forms.css' 4 | import grids from './grids.css' 5 | import menus from './menus.css' 6 | 7 | export { 8 | base, 9 | buttons, 10 | forms, 11 | grids, 12 | menus 13 | } -------------------------------------------------------------------------------- /lib/menus.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Pure v0.6.0 3 | Copyright 2014 Yahoo! Inc. All rights reserved. 4 | Licensed under the BSD License. 5 | https://github.com/yahoo/pure/blob/master/LICENSE.md 6 | */ 7 | /*csslint adjoining-classes: false, box-model:false*/ 8 | .pure-menu { 9 | -webkit-box-sizing: border-box; 10 | -moz-box-sizing: border-box; 11 | box-sizing: border-box; 12 | } 13 | 14 | .pure-menu-fixed { 15 | position: fixed; 16 | left: 0; 17 | top: 0; 18 | z-index: 3; 19 | } 20 | 21 | .pure-menu-list, 22 | .pure-menu-item { 23 | position: relative; 24 | } 25 | 26 | .pure-menu-list { 27 | list-style: none; 28 | margin: 0; 29 | padding: 0; 30 | } 31 | 32 | .pure-menu-item { 33 | padding: 0; 34 | margin: 0; 35 | height: 100%; 36 | } 37 | 38 | .pure-menu-link, 39 | .pure-menu-heading { 40 | display: block; 41 | text-decoration: none; 42 | white-space: nowrap; 43 | } 44 | 45 | /* HORIZONTAL MENU */ 46 | .pure-menu-horizontal { 47 | width: 100%; 48 | white-space: nowrap; 49 | } 50 | 51 | .pure-menu-horizontal .pure-menu-list { 52 | display: inline-block; 53 | } 54 | 55 | /* Initial menus should be inline-block so that they are horizontal */ 56 | .pure-menu-horizontal .pure-menu-item, 57 | .pure-menu-horizontal .pure-menu-heading, 58 | .pure-menu-horizontal .pure-menu-separator { 59 | display: inline-block; 60 | *display: inline; 61 | zoom: 1; 62 | vertical-align: middle; 63 | } 64 | 65 | /* Submenus should still be display: block; */ 66 | .pure-menu-item .pure-menu-item { 67 | display: block; 68 | } 69 | 70 | .pure-menu-children { 71 | display: none; 72 | position: absolute; 73 | left: 100%; 74 | top: 0; 75 | margin: 0; 76 | padding: 0; 77 | z-index: 3; 78 | } 79 | 80 | .pure-menu-horizontal .pure-menu-children { 81 | left: 0; 82 | top: auto; 83 | width: inherit; 84 | } 85 | 86 | .pure-menu-allow-hover:hover > .pure-menu-children, 87 | .pure-menu-active > .pure-menu-children { 88 | display: block; 89 | position: absolute; 90 | } 91 | 92 | /* Vertical Menus - show the dropdown arrow */ 93 | .pure-menu-has-children > .pure-menu-link:after { 94 | padding-left: 0.5em; 95 | content: "\25B8"; 96 | font-size: small; 97 | } 98 | 99 | /* Horizontal Menus - show the dropdown arrow */ 100 | .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { 101 | content: "\25BE"; 102 | } 103 | 104 | /* scrollable menus */ 105 | .pure-menu-scrollable { 106 | overflow-y: scroll; 107 | overflow-x: hidden; 108 | } 109 | 110 | .pure-menu-scrollable .pure-menu-list { 111 | display: block; 112 | } 113 | 114 | .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { 115 | display: inline-block; 116 | } 117 | 118 | .pure-menu-horizontal.pure-menu-scrollable { 119 | white-space: nowrap; 120 | overflow-y: hidden; 121 | overflow-x: auto; 122 | -ms-overflow-style: none; 123 | -webkit-overflow-scrolling: touch; 124 | /* a little extra padding for this style to allow for scrollbars */ 125 | padding: .5em 0; 126 | } 127 | 128 | .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar { 129 | display: none; 130 | } 131 | 132 | /* misc default styling */ 133 | 134 | .pure-menu-separator { 135 | background-color: #ccc; 136 | height: 1px; 137 | margin: .3em 0; 138 | } 139 | 140 | .pure-menu-horizontal .pure-menu-separator { 141 | width: 1px; 142 | height: 1.3em; 143 | margin: 0 .3em ; 144 | } 145 | 146 | .pure-menu-heading { 147 | text-transform: uppercase; 148 | color: #565d64; 149 | } 150 | 151 | .pure-menu-link { 152 | color: #777; 153 | } 154 | 155 | .pure-menu-children { 156 | background-color: #fff; 157 | } 158 | 159 | .pure-menu-link, 160 | .pure-menu-disabled, 161 | .pure-menu-heading { 162 | padding: .5em 1em; 163 | } 164 | 165 | .pure-menu-disabled { 166 | opacity: .5; 167 | } 168 | 169 | .pure-menu-disabled .pure-menu-link:hover { 170 | background-color: transparent; 171 | } 172 | 173 | .pure-menu-active > .pure-menu-link, 174 | .pure-menu-link:hover, 175 | .pure-menu-link:focus { 176 | background-color: #eee; 177 | } 178 | 179 | .pure-menu-selected .pure-menu-link, 180 | .pure-menu-selected .pure-menu-link:visited { 181 | color: #000; 182 | } -------------------------------------------------------------------------------- /lib/tables.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Pure v0.6.0 3 | Copyright 2014 Yahoo! Inc. All rights reserved. 4 | Licensed under the BSD License. 5 | https://github.com/yahoo/pure/blob/master/LICENSE.md 6 | */ 7 | .pure-table { 8 | /* Remove spacing between table cells (from Normalize.css) */ 9 | border-collapse: collapse; 10 | border-spacing: 0; 11 | empty-cells: show; 12 | border: 1px solid #cbcbcb; 13 | } 14 | 15 | .pure-table caption { 16 | color: #000; 17 | font: italic 85%/1 arial, sans-serif; 18 | padding: 1em 0; 19 | text-align: center; 20 | } 21 | 22 | .pure-table td, 23 | .pure-table th { 24 | border-left: 1px solid #cbcbcb;/* inner column border */ 25 | border-width: 0 0 0 1px; 26 | font-size: inherit; 27 | margin: 0; 28 | overflow: visible; /*to make ths where the title is really long work*/ 29 | padding: 0.5em 1em; /* cell padding */ 30 | } 31 | 32 | /* Consider removing this next declaration block, as it causes problems when 33 | there's a rowspan on the first cell. Case added to the tests. issue#432 */ 34 | .pure-table td:first-child, 35 | .pure-table th:first-child { 36 | border-left-width: 0; 37 | } 38 | 39 | .pure-table thead { 40 | background-color: #e0e0e0; 41 | color: #000; 42 | text-align: left; 43 | vertical-align: bottom; 44 | } 45 | 46 | /* 47 | striping: 48 | even - #fff (white) 49 | odd - #f2f2f2 (light gray) 50 | */ 51 | .pure-table td { 52 | background-color: transparent; 53 | } 54 | .pure-table-odd td { 55 | background-color: #f2f2f2; 56 | } 57 | 58 | /* nth-child selector for modern browsers */ 59 | .pure-table-striped tr:nth-child(2n-1) td { 60 | background-color: #f2f2f2; 61 | } 62 | 63 | /* BORDERED TABLES */ 64 | .pure-table-bordered td { 65 | border-bottom: 1px solid #cbcbcb; 66 | } 67 | .pure-table-bordered tbody > tr:last-child > td { 68 | border-bottom-width: 0; 69 | } 70 | 71 | 72 | /* HORIZONTAL BORDERED TABLES */ 73 | 74 | .pure-table-horizontal td, 75 | .pure-table-horizontal th { 76 | border-width: 0 0 1px 0; 77 | border-bottom: 1px solid #cbcbcb; 78 | } 79 | .pure-table-horizontal tbody > tr:last-child > td { 80 | border-bottom-width: 0; 81 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pure-css", 3 | "version": "1.0.3", 4 | "description": "A css module compatible version of purecss", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/StevenIseki/pure-css.git" 9 | }, 10 | "keywords": [ 11 | "pure", 12 | "purecss", 13 | "css", 14 | "css-module", 15 | "css module", 16 | "react", 17 | "reactjs", 18 | "react-component" 19 | ], 20 | "authors": [ 21 | "ericf ", 22 | "tilomitra ", 23 | "msweeney ", 24 | "jamesalley " 25 | ], 26 | "license": "MIT" 27 | } 28 | --------------------------------------------------------------------------------