├── .gitignore
├── src
    ├── showcase
    │   ├── styles
    │   │   └── index.styl
    │   ├── index.jsx
    │   ├── scope.jsx
    │   └── pages
    │   │   ├── examples
    │   │       └── home
    │   │       │   ├── simple.example
    │   │       │   └── sizes.example
    │   │   └── home.jsx
    ├── layout.jsx
    └── layout-mixin.jsx
├── images
    ├── simple.png
    └── with-sizes.png
├── showcase
    ├── README.md
    ├── styles
    │   ├── demo.css
    │   ├── syntax.css
    │   ├── showcase.styl
    │   ├── codemirror.css
    │   └── normalize.css
    ├── webpack.config.js
    ├── index.html
    └── index.jsx
├── package.json
├── LICENSE.txt
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/src/showcase/styles/index.styl:
--------------------------------------------------------------------------------
1 | .playground {
2 |   max-width: none;
3 | }


--------------------------------------------------------------------------------
/images/simple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/walmartlabs/layout/HEAD/images/simple.png


--------------------------------------------------------------------------------
/images/with-sizes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/walmartlabs/layout/HEAD/images/with-sizes.png


--------------------------------------------------------------------------------
/showcase/README.md:
--------------------------------------------------------------------------------
 1 | showcase
 2 | ========
 3 | 
 4 | Simple React component showcase system. To start:
 5 | 
 6 | ```
 7 | npm install
 8 | npm start
 9 | ```
10 | 


--------------------------------------------------------------------------------
/src/showcase/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react/addons';
 2 | 
 3 | import Home from './pages/home';
 4 | 
 5 | /*
 6 | This is the menu of all of the showcase pages
 7 | */
 8 | 
 9 | export default [
10 |   <Home/>
11 | ];
12 | 


--------------------------------------------------------------------------------
/src/showcase/scope.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | This should include all of the components you want
3 | to reference in your playground and return an
4 | object that contains them all
5 | */
6 | export default {
7 |   Layout: require('../layout.jsx')
8 | };
9 | 


--------------------------------------------------------------------------------
/src/showcase/pages/examples/home/simple.example:
--------------------------------------------------------------------------------
1 | <Layout x-small={3} small={4} style={{minHeight:50}}>
2 |   <div style={{background:'#eee', padding:'1em'}}>A</div>
3 |   <div style={{background:'#ccc', padding:'1em'}}>B</div>
4 |   <div style={{background:'#eee', padding:'1em'}}>C</div>
5 | </Layout>
6 | 


--------------------------------------------------------------------------------
/src/showcase/pages/examples/home/sizes.example:
--------------------------------------------------------------------------------
1 | <Layout x-small-sizes={[5,4,3]} small-sizes={[2,6,2]} style={{minHeight:50}}>
2 |   <div style={{background:'#eee', padding:'1em'}}>A</div>
3 |   <div style={{background:'#ccc', padding:'1em'}}>B</div>
4 |   <div style={{background:'#eee', padding:'1em'}}>C</div>
5 | </Layout>
6 | 


--------------------------------------------------------------------------------
/showcase/styles/demo.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #efefef;
 3 | }
 4 | 
 5 | #root { padding: 40px; }
 6 | 
 7 | .playground {
 8 |   max-width: 800px;
 9 |   margin: auto;
10 |   box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
11 | }
12 | .playgroundCode, .CodeMirror {
13 |   border-radius: 5px 5px 0px 0px;
14 | }
15 | 
16 | .CodeMirror {
17 |   padding: 10px;
18 | }
19 | 
20 | .playgroundPreview {
21 |   background: white;
22 |   border-radius: 0px 0px 5px 5px;
23 |   padding: 10px;
24 | }
25 | 
26 | .playgroundError {
27 |   padding: 10px;
28 |   font-size: 12px;
29 |   color: white;
30 |   background: #F2777A;
31 | }


--------------------------------------------------------------------------------
/src/showcase/pages/home.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react/addons';
 2 | 
 3 | import Playground from 'component-playground';
 4 | import assign from 'object-assign';
 5 | 
 6 | export default React.createClass({
 7 |   getDefaultProps() {
 8 |     return {
 9 |       title: 'Home',
10 |       route: 'home'
11 |     }
12 |   },
13 |   render() {
14 |     return (
15 |       <div className="component-documentation">
16 |         <h1>Layout Showcase</h1>
17 | 
18 |         <p>A simple multi-column example.</p>
19 | 
20 |         <Playground
21 |           codeText={require("raw!./examples/home/simple.example")}
22 |           scope={assign({React}, require('../scope.jsx'))}
23 |           noRender={true}/><br/>
24 | 
25 |         <p>A sample using column sizes.</p>
26 | 
27 |         <Playground
28 |           codeText={require("raw!./examples/home/sizes.example")}
29 |           scope={assign({React}, require('../scope.jsx'))}
30 |           noRender={true}/>
31 |       </div>
32 |     )
33 |   }
34 | });
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "layout",
 3 |   "version": "0.0.1",
 4 |   "description": "A React responsive helper component",
 5 |   "main": "src/layout.jsx",
 6 |   "author": "",
 7 |   "scripts": {
 8 |     "showcase": "webpack-dev-server --config showcase/webpack.config.js"
 9 |   },
10 |   "license": "MIT",
11 |   "dependencies": {
12 |     "react": "^0.13.3"
13 |   },
14 |   "devDependencies": {
15 |     "babel-core": "^5.1.13",
16 |     "babel-eslint": "^2.0.2",
17 |     "babel-loader": "^5.0.0",
18 |     "component-playground": "0.0.8",
19 |     "css-loader": "^0.12.0",
20 |     "expose-loader": "^0.7.0",
21 |     "html-webpack-plugin": "^1.6.1",
22 |     "html-webpack-template": "^2.4.0",
23 |     "json-loader": "^0.5.2",
24 |     "object-assign": "^2.0.0",
25 |     "raw-loader": "^0.5.1",
26 |     "react-bootstrap": "^0.24.4",
27 |     "react-geomicons": "^2.0.3",
28 |     "react-router": "^0.13.3",
29 |     "react-tools": "^0.13.2",
30 |     "style-loader": "^0.12.1",
31 |     "stylus-loader": "^1.1.0",
32 |     "webpack": "^1.8.10",
33 |     "webpack-dev-server": "^1.10.1"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/showcase/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var path = require("path");
 4 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 5 | 
 6 | module.exports = {
 7 |   cache: true,
 8 |   debug: false,
 9 |   devtool: false,
10 |   entry: "./showcase/index.jsx",
11 |   output: {
12 |     path: path.join(__dirname, "assets"),
13 |     filename: 'bundle.js'
14 |   },
15 |   module: {
16 |     loaders: [{
17 |         test: /\.(jsx)$/,
18 |         exclude: [/node_modules\/^((?!@walmart).)*$/],
19 |         loader: 'babel-loader?stage=1'
20 |       }, {
21 |         test: /\.css$/,
22 |         loader: "style-loader!css-loader"
23 |       }, {
24 |         test: /\.styl$/,
25 |         loader: "style-loader!css-loader!stylus-loader"
26 |       }, {
27 |         test: /\.json$/,
28 |         loader: "json-loader"
29 |       }
30 |     ]
31 |   },
32 |   resolve: {
33 |     root: [__dirname],
34 |     modulesDirectories: ['node_modules', 'src'],
35 |     extensions: ['','.js','.jsx']
36 |   },
37 |   plugins: [
38 |     new HtmlWebpackPlugin({
39 |       template: 'showcase/index.html'
40 |     })
41 |   ]
42 | 
43 | };
44 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Walmart Labs
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/src/layout.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react/addons";
 2 | import layoutMixin from "./layout-mixin";
 3 | 
 4 | /**
 5 | A layout manager that makes it easy to build responsive layouts with different
 6 | numbers of columns at different breakpoints.
 7 | 
 8 | For example this layout is one column in `x-small` media size, and three columns
 9 | in `medium` and above.
10 | 
11 | ```jsx
12 | <Layout x-small={1} medium={3}>
13 |   <div>A</div><div>B</div><div>C</div>
14 | </Layout>
15 | ```
16 | 
17 | And this layout is one column in `x-small` media size, and three columns
18 | in `medium` where the columns are 2, 8 and 2 wide (using the 12 grid layout
19 | sizing).
20 | 
21 | ```jsx
22 | <Layout x-small={1} medium-sizes={[2,8,2]}>
23 |   <div>A</div><div>B</div><div>C</div>
24 | </Layout>
25 | ```
26 | @import {Layout}
27 | @component Layout
28 | */
29 | const BaseClass = React.createClass({
30 |   mixins: [layoutMixin()],
31 |   propTypes: {
32 |     children: React.PropTypes.node,
33 |     className: React.PropTypes.string
34 |   },
35 |   displayName: "Layout",
36 |   render() {
37 |     return this.layoutChildren(this.props.children, this.props,
38 |       this.props.className);
39 |   }
40 | });
41 | 
42 | BaseClass.layoutMixin = layoutMixin;
43 | 
44 | export default BaseClass;
45 | 
46 | 


--------------------------------------------------------------------------------
/showcase/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>React Showcase</title>
 5 |     <meta charset="utf-8" />
 6 |     <!--[if lt IE 9]>
 7 |     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
 8 |     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.js"></script>
 9 |     <![endif]-->
10 |     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
11 |     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/monokai.min.css"/>
12 |   </head>
13 |   <body>
14 |     <div id="root-component">
15 |       <!-- this is where the root react component will get rendered -->
16 |     </div>
17 |     <!-- Normally, es5-shim is also in the conditional comment, but needed for phantomjs .bind() polyfill. -->
18 |     <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-shim.min.js"></script>
19 |     <!--[if lt IE 9]>
20 |     <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-sham.min.js"></script>
21 |     <![endif]-->
22 |     <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
23 |     <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>
24 |     <script src="bundle.js"></script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/showcase/styles/syntax.css:
--------------------------------------------------------------------------------
 1 | /* Based on Sublime Text's Monokai theme */
 2 | 
 3 | .cm-s-monokai.CodeMirror {background: #1B2B34; color: #CDD3DE;}
 4 | .cm-s-monokai div.CodeMirror-selected {background: #a7adba !important;}
 5 | .cm-s-monokai.CodeMirror ::selection { background: #4f5b66; }
 6 | .cm-s-monokai.CodeMirror ::-moz-selection { background: rgba(73, 72, 62, .99); }
 7 | .cm-s-monokai .CodeMirror-gutters {background: #272822; border-right: 0px;}
 8 | .cm-s-monokai .CodeMirror-guttermarker { color: white; }
 9 | .cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
10 | .cm-s-monokai .CodeMirror-linenumber {color: #d0d0d0;}
11 | .cm-s-monokai .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;}
12 | 
13 | .cm-s-monokai span.cm-comment {color: #65737e;}
14 | .cm-s-monokai span.cm-atom {color: #F99157;}
15 | .cm-s-monokai span.cm-number {color: #F99157;}
16 | 
17 | .cm-s-monokai span.cm-property {color: #6699CC;}
18 | .cm-s-monokai span.cm-attribute {color: #C594C5;}
19 | .cm-s-monokai span.cm-keyword {color: #F2777A;}
20 | .cm-s-monokai span.cm-string {color: #99C794;}
21 | .cm-s-monokai span.cm-string-2 {color: #CDD3DE;}
22 | 
23 | .cm-s-monokai span.cm-variable {color: #CDD3DE;}
24 | .cm-s-monokai span.cm-variable-2 {color: #9effff;}
25 | .cm-s-monokai span.cm-def {color: #fd971f;}
26 | .cm-s-monokai span.cm-bracket {color: #f8f8f2;}
27 | .cm-s-monokai span.cm-tag {color: #f92672;}
28 | .cm-s-monokai span.cm-link {color: #ae81ff;}
29 | .cm-s-monokai span.cm-error {background: #f92672; color: #f8f8f0;}
30 | 
31 | .cm-s-monokai .CodeMirror-activeline-background {background: #373831 !important;}
32 | .cm-s-monokai .CodeMirror-matchingbracket {
33 |   text-decoration: underline;
34 |   color: white !important;
35 | }


--------------------------------------------------------------------------------
/src/layout-mixin.jsx:
--------------------------------------------------------------------------------
 1 | /* eslint max-statements:0 */
 2 | 
 3 | import React from "react/addons";
 4 | 
 5 | export default () => {
 6 |   return {
 7 |     layoutChildren(children, options, className) {
 8 |       const colMap = {1: 12, 2: 6, 3: 4, 4: 3, 6: 2, 12: 1};
 9 | 
10 |       const breakpoints = this.props.breakpoints || [
11 |         {name: 'x-small', format: (n,t) => `col-xs-${n}`},
12 |         {name: 'small', format: (n,t) => `col-sm-${n}`},
13 |         {name: 'medium', format: (n,t) => `col-md-${n}`},
14 |         {name: 'large', format: (n,t) => `col-lg-${n}`}
15 |       ];
16 | 
17 |       let breakpointMap = {};
18 |       for(var b in breakpoints) {
19 |         breakpointMap[breakpoints[b].name] = breakpoints[b].format;
20 |       }
21 | 
22 |       let cMap = {};
23 |       cMap[breakpoints[0].name] = [12];
24 |       for(var b in breakpoints) {
25 |         let bucket = breakpoints[b];
26 |         if (options[bucket.name] && colMap[options[bucket.name]]) {
27 |           cMap[bucket.name] = [colMap[options[bucket.name]]];
28 |         }
29 | 
30 |         if (options[bucket.name + '-sizes']) {
31 |           cMap[bucket.name] = options[bucket.name + '-sizes'];
32 |         }
33 |       }
34 | 
35 |       let wrappedChildren = React.Children.map(children, (child, index) => {
36 |         let classes = className ? [className] : [];
37 |         for (let k in cMap) {
38 |           var width = cMap[k][index % cMap[k].length];
39 |           var formatter = breakpointMap[k];
40 |           classes.push(formatter(width, 12));
41 |         }
42 |         return (<div className={classes.join(" ")}>{child}</div>);
43 |       });
44 | 
45 |       return (
46 |         <div className={options.rowClass || 'row'} style={options.style}>
47 |           {wrappedChildren}
48 |         </div>
49 |       );
50 |     }
51 |   };
52 | };
53 | 


--------------------------------------------------------------------------------
/showcase/index.jsx:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import './styles/showcase.styl';
 4 | 
 5 | import React from 'react/addons';
 6 | import Router from 'react-router';
 7 | import Pages from '../src/showcase/index';
 8 | 
 9 | const {DefaultRoute, Link, Route, RouteHandler} = Router;
10 | 
11 | const Index = React.createClass({
12 |   getInitialState() {
13 |     return {
14 |       navVisible: false
15 |     };
16 |   },
17 | 
18 |   _toggleNav() {
19 |     this.setState({
20 |       navVisible: !this.state.navVisible
21 |     });
22 |   },
23 | 
24 |   render() {
25 |     return (
26 |       <div className={this.state.navVisible ? 'is-navigable' : ''}>
27 |         <div className='guide-nav'>
28 |           <ol className='nav-list'>
29 |             {Pages.map((page, index) => {
30 |               return (
31 |                 <li key={index}>
32 |                   <Link
33 |                     className='guide-nav-link'
34 |                     onClick={this._toggleNav}
35 |                     to={page.props.route}>
36 |                     <span className='guide-nav-item-reference'></span>
37 |                     {page.props.title}
38 |                   </Link>
39 |                 </li>
40 |               );
41 |             })}
42 |           </ol>
43 |         </div>
44 |         <div className='guide-slider-wrapper'>
45 |           <header className='guide-header guide-slider'>
46 |             <div onClick={this._toggleNav} className='guide-nav-toggle'>
47 |               <i className="glyphicon glyphicon-th-list" />
48 |             </div>
49 |             <div className='guide-container'>
50 |               React Showcase
51 |             </div>
52 |           </header>
53 |           <div className='guide-content guide-slider'>
54 |             <div className='guide-container'>
55 |               <RouteHandler />
56 |             </div>
57 |           </div>
58 |         </div>
59 |       </div>
60 |     );
61 |   }
62 | });
63 | 
64 | const routes = (
65 |   <Route name="index" path="/" handler={Index}>
66 |     {Pages.map((page, index) => {
67 |       if (page.props.route === 'home') {
68 |         return <DefaultRoute name={page.props.route} handler={page.type} key={index} />;
69 |       } else {
70 |         return <Route name={page.props.route} handler={page.type} key={index} />
71 |       }
72 |     })}
73 |   </Route>
74 | );
75 | 
76 | Router.run(routes, function (Handler) {
77 |   React.render(<Handler/>, document.getElementById('root-component'));
78 | });
79 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ***
 2 | # NOTICE:
 3 | 
 4 | ## This repository has been archived and is not supported.
 5 | 
 6 | [![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/)
 7 | ***
 8 | NOTICE: SUPPORT FOR THIS PROJECT HAS ENDED 
 9 | 
10 | This projected was owned and maintained by Walmart. This project has reached its end of life and Walmart no longer supports this project.
11 | 
12 | We will no longer be monitoring the issues for this project or reviewing pull requests. You are free to continue using this project under the license terms or forks of this project at your own risk. This project is no longer subject to Walmart's bug bounty program or other security monitoring.
13 | 
14 | 
15 | ## Actions you can take
16 | 
17 | We recommend you take the following action:
18 | 
19 |   * Review any configuration files used for build automation and make appropriate updates to remove or replace this project
20 |   * Notify other members of your team and/or organization of this change
21 |   * Notify your security team to help you evaluate alternative options
22 | 
23 | ## Forking and transition of ownership
24 | 
25 | For [security reasons](https://www.theregister.co.uk/2018/11/26/npm_repo_bitcoin_stealer/), Walmart does not transfer the ownership of our primary repos on Github or other platforms to other individuals/organizations. Further, we do not transfer ownership of packages for public package management systems.
26 | 
27 | If you would like to fork this package and continue development, you should choose a new name for the project and create your own packages, build automation, etc.
28 | 
29 | Please review the licensing terms of this project, which continue to be in effect even after decommission.
30 | 
31 | Layout
32 | ======
33 | 
34 | Layout is a responsive helper component that we use in our responsive designs at [Walmart Labs](http://walmartlabs.com).
35 | 
36 | This screenshot shows a simple multi-column layout using the Bootstrap grid.
37 | 
38 | ![Simple multi-column layout](./images/simple.png)
39 | 
40 | In this case it's 3 columns wide in `x-small` and 4 columns wide in `small`.
41 | 
42 | In this next example we show specifying the widths of the individual columns (in 12 column layout values) for both `x-small` and `small`.
43 | 
44 | ![Layout with column sizes](./images/with-sizes.png)
45 | 
46 | ## Running the example
47 | 
48 | To install and run do:
49 | 
50 | ```
51 | npm install
52 | npm run showcase
53 | ```
54 | 
55 | ## Usage
56 | 
57 | Default column options are based on a 12 column layout.
58 | 
59 | ### Simple Multi-Columns
60 | 
61 | Using the following `props` allows you to pass in a number of columns (max 12) (`integer`) to display the columns at a consistent width.
62 | 
63 | Each prop type correlates to a breakpoint:
64 | 
65 | - `x-small` - `integer` Displays at <= 768px
66 | - `small` - `integer` Displays between 768px and 992px
67 | - `medium` - `integer` Displays between 992px and 1200px
68 | - `large` - `integer` Displays above 1200px
69 | 
70 | Options:
71 | 
72 | Number of columns: `1, 2, 3, 4, 6, 12`
73 | 
74 | ### custom column widths at specific breakpoints
75 | 
76 | Using the following `props` allows you to pass in an array of column **ratios**. This is different than the above option.
77 | 
78 | - `x-small-sizes` - Displays each child column at defined widths at <= 768px
79 | - `small-sizes` - Displays each child column at defined widths between 768px and 992px
80 | - `medium-sizes` - Displays each child column at defined widths between 992px and 1200px
81 | - `large-sizes` - Displays each child column at defined widths above 1200px
82 | 
83 | Options:
84 | 
85 | Array of width of columns: `1, 2, 3, 4, 6, 12`
86 | 


--------------------------------------------------------------------------------
/showcase/styles/showcase.styl:
--------------------------------------------------------------------------------
  1 | @import "./normalize.css";
  2 | @import "./demo.css";
  3 | @import "./syntax.css";
  4 | @import "./codemirror.css";
  5 | 
  6 | body {
  7 |   margin: 0;
  8 | }
  9 | 
 10 | .guide-header.guide-slider {
 11 |   background: #007dc6;
 12 |   -moz-osx-font-smoothing: grayscale;
 13 |   -webkit-font-smoothing: antialiased;
 14 |   position: fixed;
 15 |   top: 0;
 16 |   right: 0;
 17 |   left: 0;
 18 |   z-index: 302;
 19 |   color: #fff;
 20 | }
 21 | 
 22 | .guide-header .guide-container {
 23 |   max-width: 800px;
 24 |   margin: auto;
 25 |   font-size: 24px;
 26 |   padding: 20px 0px;
 27 |   z-index: 1;
 28 | }
 29 | 
 30 | .guide-slider-wrapper {
 31 |   overflow: hidden;
 32 |   width: 100%;
 33 | }
 34 | 
 35 | .responsive .guide-container-responsive {
 36 |   width: auto;
 37 |   min-width: 320px;
 38 |   max-width: 1366px;
 39 | }
 40 | 
 41 | .guide-container {
 42 |   position: relative;
 43 |   width: 1024px;
 44 |   margin: 0 auto;
 45 |   padding: 0 20px;
 46 | }
 47 | 
 48 | .guide-slider {
 49 |   position: relative;
 50 |   left: 0;
 51 |   z-index: 301;
 52 |   transition: .2s ease -webkit-transform;
 53 |   transition: .2s ease transform;
 54 | }
 55 | 
 56 | .is-navigable .guide-slider {
 57 |   -webkit-transform: translate3d(225px,0,0);
 58 |   transform: translate3d(225px,0,0);
 59 | }
 60 | 
 61 | .guide-content {
 62 |   display: block;
 63 |   min-height: 100vh;
 64 |   padding: 90px 0 30px;
 65 |   background: #eee;
 66 | }
 67 | 
 68 | .guide-content .playground {
 69 |   margin-top 20px;
 70 | }
 71 | 
 72 | .guide-nav-toggle {
 73 |   position: relative;
 74 |   display: block;
 75 |   left: 0;
 76 |   padding: 25px;
 77 |   width: 60px;
 78 |   float: left;
 79 |   top: 0;
 80 |   cursor: pointer;
 81 |   z-index: 200;
 82 | }
 83 | 
 84 | .guide-nav-toggle:hover i {
 85 |   color: #ccc;
 86 | }
 87 | 
 88 | .guide-heading {
 89 |   font-size: 36px;
 90 |   font-weight: 600;
 91 |   max-width: 800px;
 92 |   margin: 20px auto;
 93 | }
 94 | 
 95 | .component-documentation h3 {
 96 |   max-width: 800px;
 97 |   margin: 20px auto;
 98 | }
 99 | 
100 | .guide-heading a {
101 |   margin-left: 10px;
102 |   font-size: 18px;
103 |   display: inline;
104 | }
105 | 
106 | .guide-heading-reference {
107 |   position: relative;
108 |   top: 12px;
109 |   display: inline-block;
110 |   margin-right: 10px;
111 |   color: #aaa;
112 |   font-size: 22px;
113 |   vertical-align: top;
114 | }
115 | 
116 | .guide-nav {
117 |   -moz-osx-font-smoothing: grayscale;
118 |   -webkit-font-smoothing: antialiased;
119 |   position: fixed;
120 |   bottom: 0;
121 |   left: 0;
122 |   top: 0;
123 |   padding-top: 20px;
124 |   overflow: auto;
125 |   width: 225px;
126 |   background: #444;
127 |   -webkit-overflow-scrolling: touch;
128 | }
129 | 
130 | .nav-list {
131 |   margin: 0;
132 |   padding: 0;
133 |   list-style: none;
134 |   text-align: left;
135 | }
136 | 
137 | .showcase-search {
138 |   position: relative;
139 |   padding: 20px;
140 | }
141 | 
142 | .showcase-typeahead {
143 |   width: 155px !important;
144 | }
145 | 
146 | .showcase-typeahead-cancel {
147 |   color: #999;
148 |   position: absolute;
149 |   top: 36px;
150 |   left: 150px;
151 |   cursor: pointer;
152 |   font-size: 24px;
153 | }
154 | 
155 | .guide-nav-link, .guide-nav-category-name {
156 |   display: block;
157 |   position: relative;
158 |   padding: 5px 15px;
159 |   color: #fff;
160 |   font-size: 18px;
161 |   font-weight: 400;
162 |   text-decoration: none;
163 |   cursor: pointer;
164 | }
165 | 
166 | .guide-nav-category-name {
167 |   width: 80%;
168 |   display: inline-block;
169 | }
170 | 
171 | .guide-nav-category-link, .guide-nav-category-link:hover {
172 |   color: #fff;
173 |   font-size: 18px;
174 | }
175 | 
176 | .guide-nav-link:hover, .guide-nav-category-name:hover, .guide-nav-category-dropdown:hover {
177 |   color: #fff;
178 |   background-color: #0070b2;
179 | }
180 | 
181 | .guide-nav-category .guide-nav-category-dropdown {
182 |   width: 20%;
183 |   height: 100%;
184 |   color: #fff;
185 |   display: inline-block;
186 |   padding: 7px;
187 |   padding-left: 15px;
188 |   cursor: pointer;
189 |   border-left: 1px solid #aaa;
190 | }
191 | 
192 | .guide-nav-category-dropdown-list {
193 |   border: 1px solid #aaa;
194 |   border-left: none;
195 |   border-right: none;
196 |   background-color: #333;
197 | }
198 | 
199 | .guide-nav-sublink, .showcase-typeahead-no-results {
200 |   position: relative;
201 |   display: block;
202 |   padding: 3px 15px;
203 |   margin-left: 30px;
204 |   color: #fff;
205 |   font-size: 14px;
206 |   font-weight: 400;
207 |   text-decoration: none;
208 | }
209 | 
210 | .showcase-typeahead-no-results {
211 |   padding: 0;
212 | }
213 | 
214 | .guide-nav-sublink:before {
215 |   content: "-";
216 |   position: absolute;
217 |   top: 3px;
218 |   left: 0;
219 | }
220 | 
221 | .guide-nav-item-reference {
222 |   position: relative;
223 |   top: 5px;
224 |   display: inline-block;
225 |   width: 14px;
226 |   margin-right: 5px;
227 |   margin-left: -4px;
228 |   color: #999;
229 |   font-size: 12px;
230 |   font-weight: 600;
231 |   text-align: right;
232 |   vertical-align: top;
233 | }
234 | 
235 | pre.code {
236 |   border: 1px solid #ccc;
237 |   background: white;
238 |   padding: 5px;
239 |   border-radius: 3px;
240 |   font-size: x-small;
241 | }
242 | 
243 | span.code {
244 |   padding: 2px;
245 |   border: 1px solid #ccc;
246 |   border-radius: 3px;
247 |   background: white;
248 |   color: red;
249 |   font-family: Courier, Courier New, sans-serif;
250 | }
251 | 
252 | @media (max-width: 1200px) {
253 |   .guide-content .guide-container, .guide-heading {
254 |     width: auto;
255 |   }
256 | }
257 | 
258 | @import "../../src/showcase/styles/index.styl";
259 | 


--------------------------------------------------------------------------------
/showcase/styles/codemirror.css:
--------------------------------------------------------------------------------
  1 | /* BASICS */
  2 | 
  3 | .CodeMirror {
  4 |   /* Set height, width, borders, and global font properties here */
  5 |   font-family: monospace;
  6 | }
  7 | .CodeMirror-scroll {
  8 |   /* Set scrolling behaviour here */
  9 |   overflow: auto;
 10 | }
 11 | 
 12 | /* PADDING */
 13 | 
 14 | .CodeMirror-lines {
 15 |   padding: 14px 0; /* Vertical padding around content */
 16 | }
 17 | .CodeMirror pre {
 18 |   padding: 0 14px; /* Horizontal padding of content */
 19 | }
 20 | 
 21 | .CodeMirror-scrollbar-filler {
 22 |   background-color: white; /* The little square between H and V scrollbars */
 23 | }
 24 | 
 25 | /* GUTTER */
 26 | 
 27 | .CodeMirror-gutters {
 28 |   border-right: 1px solid #ddd;
 29 |   background-color: #f7f7f7;
 30 | }
 31 | .CodeMirror-linenumbers {}
 32 | .CodeMirror-linenumber {
 33 |   padding: 0 3px 0 5px;
 34 |   min-width: 20px;
 35 |   text-align: right;
 36 |   color: #999;
 37 | }
 38 | 
 39 | /* CURSOR */
 40 | 
 41 | .CodeMirror div.CodeMirror-cursor {
 42 |   border-left: 1px solid black;
 43 | }
 44 | /* Shown when moving in bi-directional text */
 45 | .CodeMirror div.CodeMirror-secondarycursor {
 46 |   border-left: 1px solid silver;
 47 | }
 48 | .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
 49 |   width: auto;
 50 |   border: 0;
 51 |   background: transparent;
 52 |   background: rgba(0, 200, 0, .4);
 53 |   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800);
 54 | }
 55 | /* Kludge to turn off filter in ie9+, which also accepts rgba */
 56 | .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor:not(#nonsense_id) {
 57 |   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 58 | }
 59 | /* Can style cursor different in overwrite (non-insert) mode */
 60 | .CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
 61 | 
 62 | /* DEFAULT THEME */
 63 | 
 64 | .cm-s-default .cm-keyword {color: #708;}
 65 | .cm-s-default .cm-atom {color: #219;}
 66 | .cm-s-default .cm-number {color: #164;}
 67 | .cm-s-default .cm-def {color: #00f;}
 68 | .cm-s-default .cm-variable {color: black;}
 69 | .cm-s-default .cm-variable-2 {color: #05a;}
 70 | .cm-s-default .cm-variable-3 {color: #085;}
 71 | .cm-s-default .cm-property {color: black;}
 72 | .cm-s-default .cm-operator {color: black;}
 73 | .cm-s-default .cm-comment {color: #a50;}
 74 | .cm-s-default .cm-string {color: #a11;}
 75 | .cm-s-default .cm-string-2 {color: #f50;}
 76 | .cm-s-default .cm-meta {color: #555;}
 77 | .cm-s-default .cm-error {color: #f00;}
 78 | .cm-s-default .cm-qualifier {color: #555;}
 79 | .cm-s-default .cm-builtin {color: #30a;}
 80 | .cm-s-default .cm-bracket {color: #997;}
 81 | .cm-s-default .cm-tag {color: #170;}
 82 | .cm-s-default .cm-attribute {color: #00c;}
 83 | .cm-s-default .cm-header {color: blue;}
 84 | .cm-s-default .cm-quote {color: #090;}
 85 | .cm-s-default .cm-hr {color: #999;}
 86 | .cm-s-default .cm-link {color: #00c;}
 87 | 
 88 | .cm-negative {color: #d44;}
 89 | .cm-positive {color: #292;}
 90 | .cm-header, .cm-strong {font-weight: bold;}
 91 | .cm-em {font-style: italic;}
 92 | .cm-emstrong {font-style: italic; font-weight: bold;}
 93 | .cm-link {text-decoration: underline;}
 94 | 
 95 | .cm-invalidchar {color: #f00;}
 96 | 
 97 | div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
 98 | div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 99 | 
100 | /* STOP */
101 | 
102 | /* The rest of this file contains styles related to the mechanics of
103 |    the editor. You probably shouldn't touch them. */
104 | 
105 | .CodeMirror {
106 |   line-height: 1;
107 |   position: relative;
108 |   overflow: hidden;
109 | }
110 | 
111 | .CodeMirror-scroll {
112 |   /* 30px is the magic margin used to hide the element's real scrollbars */
113 |   /* See overflow: hidden in .CodeMirror, and the paddings in .CodeMirror-sizer */
114 |   margin-bottom: -30px; margin-right: -30px;
115 |   padding-bottom: 30px; padding-right: 30px;
116 |   height: 100%;
117 |   outline: none; /* Prevent dragging from highlighting the element */
118 |   position: relative;
119 | }
120 | .CodeMirror-sizer {
121 |   position: relative;
122 | }
123 | 
124 | /* The fake, visible scrollbars. Used to force redraw during scrolling
125 |    before actuall scrolling happens, thus preventing shaking and
126 |    flickering artifacts. */
127 | .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler {
128 |   position: absolute;
129 |   z-index: 6;
130 |   display: none;
131 | }
132 | .CodeMirror-vscrollbar {
133 |   right: 0; top: 0;
134 |   overflow-x: hidden;
135 |   overflow-y: scroll;
136 | }
137 | .CodeMirror-hscrollbar {
138 |   bottom: 0; left: 0;
139 |   overflow-y: hidden;
140 |   overflow-x: scroll;
141 | }
142 | .CodeMirror-scrollbar-filler {
143 |   right: 0; bottom: 0;
144 |   z-index: 6;
145 | }
146 | 
147 | .CodeMirror-gutters {
148 |   position: absolute; left: 0; top: 0;
149 |   height: 100%;
150 |   z-index: 3;
151 | }
152 | .CodeMirror-gutter {
153 |   height: 100%;
154 |   display: inline-block;
155 |   /* Hack to make IE7 behave */
156 |   *zoom:1;
157 |   *display:inline;
158 | }
159 | .CodeMirror-gutter-elt {
160 |   position: absolute;
161 |   cursor: default;
162 |   z-index: 4;
163 | }
164 | 
165 | .CodeMirror-lines {
166 |   cursor: text;
167 | }
168 | .CodeMirror pre {
169 |   /* Reset some styles that the rest of the page might have set */
170 |   -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; border-radius: 0;
171 |   border-width: 0;
172 |   background: transparent;
173 |   font-family: inherit;
174 |   font-size: inherit;
175 |   margin: 0;
176 |   white-space: pre;
177 |   word-wrap: normal;
178 |   line-height: inherit;
179 |   color: inherit;
180 |   z-index: 2;
181 |   position: relative;
182 |   overflow: visible;
183 | }
184 | .CodeMirror-wrap pre {
185 |   word-wrap: break-word;
186 |   white-space: pre-wrap;
187 |   word-break: normal;
188 | }
189 | .CodeMirror-linebackground {
190 |   position: absolute;
191 |   left: 0; right: 0; top: 0; bottom: 0;
192 |   z-index: 0;
193 | }
194 | 
195 | .CodeMirror-linewidget {
196 |   position: relative;
197 |   z-index: 2;
198 |   overflow: auto;
199 | }
200 | 
201 | .CodeMirror-wrap .CodeMirror-scroll {
202 |   overflow-x: hidden;
203 | }
204 | 
205 | .CodeMirror-measure {
206 |   position: absolute;
207 |   width: 100%; height: 0px;
208 |   overflow: hidden;
209 |   visibility: hidden;
210 | }
211 | .CodeMirror-measure pre { position: static; }
212 | 
213 | .CodeMirror div.CodeMirror-cursor {
214 |   position: absolute;
215 |   visibility: hidden;
216 |   border-right: none;
217 |   width: 0;
218 | }
219 | .CodeMirror-focused div.CodeMirror-cursor {
220 |   visibility: visible;
221 | }
222 | 
223 | .CodeMirror-selected { background: #d9d9d9; }
224 | .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
225 | 
226 | .cm-searching {
227 |   background: #ffa;
228 |   background: rgba(255, 255, 0, .4);
229 | }
230 | 
231 | /* IE7 hack to prevent it from returning funny offsetTops on the spans */
232 | .CodeMirror span { *vertical-align: text-bottom; }
233 | 
234 | @media print {
235 |   /* Hide the cursor when printing */
236 |   .CodeMirror div.CodeMirror-cursor {
237 |     visibility: hidden;
238 |   }
239 | }


--------------------------------------------------------------------------------
/showcase/styles/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 29 |  * Correct `block` display not defined for `main` in IE 11.
 30 |  */
 31 | 
 32 | article,
 33 | aside,
 34 | details,
 35 | figcaption,
 36 | figure,
 37 | footer,
 38 | header,
 39 | hgroup,
 40 | main,
 41 | nav,
 42 | section,
 43 | summary {
 44 |   display: block;
 45 | }
 46 | 
 47 | /**
 48 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 49 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 50 |  */
 51 | 
 52 | audio,
 53 | canvas,
 54 | progress,
 55 | video {
 56 |   display: inline-block; /* 1 */
 57 |   vertical-align: baseline; /* 2 */
 58 | }
 59 | 
 60 | /**
 61 |  * Prevent modern browsers from displaying `audio` without controls.
 62 |  * Remove excess height in iOS 5 devices.
 63 |  */
 64 | 
 65 | audio:not([controls]) {
 66 |   display: none;
 67 |   height: 0;
 68 | }
 69 | 
 70 | /**
 71 |  * Address `[hidden]` styling not present in IE 8/9/10.
 72 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 73 |  */
 74 | 
 75 | [hidden],
 76 | template {
 77 |   display: none;
 78 | }
 79 | 
 80 | /* Links
 81 |    ========================================================================== */
 82 | 
 83 | /**
 84 |  * Remove the gray background color from active links in IE 10.
 85 |  */
 86 | 
 87 | a {
 88 |   background: transparent;
 89 | }
 90 | 
 91 | /**
 92 |  * Improve readability when focused and also mouse hovered in all browsers.
 93 |  */
 94 | 
 95 | a:active,
 96 | a:hover {
 97 |   outline: 0;
 98 | }
 99 | 
100 | /* Text-level semantics
101 |    ========================================================================== */
102 | 
103 | /**
104 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
105 |  */
106 | 
107 | abbr[title] {
108 |   border-bottom: 1px dotted;
109 | }
110 | 
111 | /**
112 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
113 |  */
114 | 
115 | b,
116 | strong {
117 |   font-weight: bold;
118 | }
119 | 
120 | /**
121 |  * Address styling not present in Safari and Chrome.
122 |  */
123 | 
124 | dfn {
125 |   font-style: italic;
126 | }
127 | 
128 | /**
129 |  * Address variable `h1` font-size and margin within `section` and `article`
130 |  * contexts in Firefox 4+, Safari, and Chrome.
131 |  */
132 | 
133 | h1 {
134 |   font-size: 2em;
135 |   margin: 0.67em 0;
136 | }
137 | 
138 | /**
139 |  * Address styling not present in IE 8/9.
140 |  */
141 | 
142 | mark {
143 |   background: #ff0;
144 |   color: #000;
145 | }
146 | 
147 | /**
148 |  * Address inconsistent and variable font size in all browsers.
149 |  */
150 | 
151 | small {
152 |   font-size: 80%;
153 | }
154 | 
155 | /**
156 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
157 |  */
158 | 
159 | sub,
160 | sup {
161 |   font-size: 75%;
162 |   line-height: 0;
163 |   position: relative;
164 |   vertical-align: baseline;
165 | }
166 | 
167 | sup {
168 |   top: -0.5em;
169 | }
170 | 
171 | sub {
172 |   bottom: -0.25em;
173 | }
174 | 
175 | /* Embedded content
176 |    ========================================================================== */
177 | 
178 | /**
179 |  * Remove border when inside `a` element in IE 8/9/10.
180 |  */
181 | 
182 | img {
183 |   border: 0;
184 | }
185 | 
186 | /**
187 |  * Correct overflow not hidden in IE 9/10/11.
188 |  */
189 | 
190 | svg:not(:root) {
191 |   overflow: hidden;
192 | }
193 | 
194 | /* Grouping content
195 |    ========================================================================== */
196 | 
197 | /**
198 |  * Address margin not present in IE 8/9 and Safari.
199 |  */
200 | 
201 | figure {
202 |   margin: 1em 40px;
203 | }
204 | 
205 | /**
206 |  * Address differences between Firefox and other browsers.
207 |  */
208 | 
209 | hr {
210 |   -moz-box-sizing: content-box;
211 |   box-sizing: content-box;
212 |   height: 0;
213 | }
214 | 
215 | /**
216 |  * Contain overflow in all browsers.
217 |  */
218 | 
219 | pre {
220 |   overflow: auto;
221 | }
222 | 
223 | /**
224 |  * Address odd `em`-unit font size rendering in all browsers.
225 |  */
226 | 
227 | code,
228 | kbd,
229 | pre,
230 | samp {
231 |   font-family: monospace, monospace;
232 |   font-size: 1em;
233 | }
234 | 
235 | /* Forms
236 |    ========================================================================== */
237 | 
238 | /**
239 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
240 |  * styling of `select`, unless a `border` property is set.
241 |  */
242 | 
243 | /**
244 |  * 1. Correct color not being inherited.
245 |  *    Known issue: affects color of disabled elements.
246 |  * 2. Correct font properties not being inherited.
247 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
248 |  */
249 | 
250 | button,
251 | input,
252 | optgroup,
253 | select,
254 | textarea {
255 |   color: inherit; /* 1 */
256 |   font: inherit; /* 2 */
257 |   margin: 0; /* 3 */
258 | }
259 | 
260 | /**
261 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
262 |  */
263 | 
264 | button {
265 |   overflow: visible;
266 | }
267 | 
268 | /**
269 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
270 |  * All other form control elements do not inherit `text-transform` values.
271 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
272 |  * Correct `select` style inheritance in Firefox.
273 |  */
274 | 
275 | button,
276 | select {
277 |   text-transform: none;
278 | }
279 | 
280 | /**
281 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
282 |  *    and `video` controls.
283 |  * 2. Correct inability to style clickable `input` types in iOS.
284 |  * 3. Improve usability and consistency of cursor style between image-type
285 |  *    `input` and others.
286 |  */
287 | 
288 | button,
289 | html input[type="button"], /* 1 */
290 | input[type="reset"],
291 | input[type="submit"] {
292 |   -webkit-appearance: button; /* 2 */
293 |   cursor: pointer; /* 3 */
294 | }
295 | 
296 | /**
297 |  * Re-set default cursor for disabled elements.
298 |  */
299 | 
300 | button[disabled],
301 | html input[disabled] {
302 |   cursor: default;
303 | }
304 | 
305 | /**
306 |  * Remove inner padding and border in Firefox 4+.
307 |  */
308 | 
309 | button::-moz-focus-inner,
310 | input::-moz-focus-inner {
311 |   border: 0;
312 |   padding: 0;
313 | }
314 | 
315 | /**
316 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
317 |  * the UA stylesheet.
318 |  */
319 | 
320 | input {
321 |   line-height: normal;
322 | }
323 | 
324 | /**
325 |  * It's recommended that you don't attempt to style these elements.
326 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
327 |  *
328 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
329 |  * 2. Remove excess padding in IE 8/9/10.
330 |  */
331 | 
332 | input[type="checkbox"],
333 | input[type="radio"] {
334 |   box-sizing: border-box; /* 1 */
335 |   padding: 0; /* 2 */
336 | }
337 | 
338 | /**
339 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
340 |  * `font-size` values of the `input`, it causes the cursor style of the
341 |  * decrement button to change from `default` to `text`.
342 |  */
343 | 
344 | input[type="number"]::-webkit-inner-spin-button,
345 | input[type="number"]::-webkit-outer-spin-button {
346 |   height: auto;
347 | }
348 | 
349 | /**
350 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
351 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
352 |  *    (include `-moz` to future-proof).
353 |  */
354 | 
355 | input[type="search"] {
356 |   -webkit-appearance: textfield; /* 1 */
357 |   -moz-box-sizing: content-box;
358 |   -webkit-box-sizing: content-box; /* 2 */
359 |   box-sizing: content-box;
360 | }
361 | 
362 | /**
363 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
364 |  * Safari (but not Chrome) clips the cancel button when the search input has
365 |  * padding (and `textfield` appearance).
366 |  */
367 | 
368 | input[type="search"]::-webkit-search-cancel-button,
369 | input[type="search"]::-webkit-search-decoration {
370 |   -webkit-appearance: none;
371 | }
372 | 
373 | /**
374 |  * Define consistent border, margin, and padding.
375 |  */
376 | 
377 | fieldset {
378 |   border: 1px solid #c0c0c0;
379 |   margin: 0 2px;
380 |   padding: 0.35em 0.625em 0.75em;
381 | }
382 | 
383 | /**
384 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
385 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
386 |  */
387 | 
388 | legend {
389 |   border: 0; /* 1 */
390 |   padding: 0; /* 2 */
391 | }
392 | 
393 | /**
394 |  * Remove default vertical scrollbar in IE 8/9/10/11.
395 |  */
396 | 
397 | textarea {
398 |   overflow: auto;
399 | }
400 | 
401 | /**
402 |  * Don't inherit the `font-weight` (applied by a rule above).
403 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
404 |  */
405 | 
406 | optgroup {
407 |   font-weight: bold;
408 | }
409 | 
410 | /* Tables
411 |    ========================================================================== */
412 | 
413 | /**
414 |  * Remove most spacing between table cells.
415 |  */
416 | 
417 | table {
418 |   border-collapse: collapse;
419 |   border-spacing: 0;
420 | }
421 | 
422 | td,
423 | th {
424 |   padding: 0;
425 | }
426 | 


--------------------------------------------------------------------------------