From e4f117bf7da92ae3ea1917dcb3531c2e7bb1eb20 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Wed, 2 Mar 2016 17:40:09 -0800 Subject: [PATCH] First commit: this starts off on a pretty solid foot because we iterated on it a lot already. --- .babelrc | 7 + .eslintrc | 48 + CONTRIBUTING.md | 82 + README.md | 50 + content/example.md | 431 ++++ content/introduction.md | 3 + css/base.css | 3758 +++++++++++++++++++++++++++++ css/railscasts.css | 100 + css/style.css | 151 ++ index.html | 17 + package.json | 64 + src/components/app.js | 171 ++ src/components/content.js | 116 + src/components/navigation.js | 94 + src/components/navigation_item.js | 26 + src/components/rounded_toggle.js | 42 + src/components/section.js | 56 + src/content.js | 7 + src/index.js | 13 + src/render.js | 18 + test/content.js | 121 + 21 files changed, 5375 insertions(+) create mode 100644 .babelrc create mode 100644 .eslintrc create mode 100644 CONTRIBUTING.md create mode 100644 README.md create mode 100644 content/example.md create mode 100644 content/introduction.md create mode 100644 css/base.css create mode 100644 css/railscasts.css create mode 100644 css/style.css create mode 100644 index.html create mode 100644 package.json create mode 100644 src/components/app.js create mode 100644 src/components/content.js create mode 100644 src/components/navigation.js create mode 100644 src/components/navigation_item.js create mode 100644 src/components/rounded_toggle.js create mode 100644 src/components/section.js create mode 100644 src/content.js create mode 100644 src/index.js create mode 100644 src/render.js create mode 100644 test/content.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..005e78a --- /dev/null +++ b/.babelrc @@ -0,0 +1,7 @@ +{ + "presets": [ + "stage-0", + "es2015", + "react" + ] +} diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..72524da --- /dev/null +++ b/.eslintrc @@ -0,0 +1,48 @@ +{ + "parser": "babel-eslint", + "env": { + "browser": true, + "node": true + }, + "plugins": [ + "react", + "babel" + ], + "globals": { + }, + "extends": "eslint:recommended", + "rules": { + "comma-dangle": [2, "never"], + "jsx-quotes": [2, "prefer-single"], + "key-spacing": [0], + "max-len": [1, 360], + "no-bitwise": [2], + "no-console": [0], + "no-redeclare": [2], + "no-trailing-spaces": [2], + "no-undef": [2], + "no-underscore-dangle": [0], + "no-unused-vars": [2], + "no-use-before-define": [0], + "quotes": [2, "single"], + "react/display-name": [2, { "acceptTranspilerName": true }], + "react/jsx-no-bind": 2, + "react/jsx-no-duplicate-props": 2, + "react/jsx-no-undef": 2, + "react/jsx-uses-react": 2, + "react/react-in-jsx-scope": 2, + "react/no-unknown-property": [2], + "react/prop-types": 2, + "react/require-extension": [2, { "extensions": [".js", ".jsx"] }], + "react/self-closing-comp": [2], + "react/wrap-multilines": [2], + "semi": [2, "always"], + "space-after-keywords": [2, "always"], + "space-before-blocks": 2, + "space-before-function-paren": [2, "never"], + "space-before-keywords": [2, "always"], + "space-in-parens": [2, "never"], + "strict": [0], + "valid-typeof": 2 + } +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..a04cd2b --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,82 @@ +## Topics + +Topics contain information that applies to web services in general (not specific to APIs). + +## API endpoints + +Each individual API should have its own markdown file in the /content directory. Use snake case for filenames. + +Each API file should have: + +- H2 naming the API (i.e. "Wobbles") + - description of the API + - H3 naming the object or resource that is retrieved/created/deleted by the API + - description of the method + - list of parameters + - example requests and responses + +Make sure the API is also included in the nav by adding it to `content.js`. + +### Description + +A one- or two-sentence description explaining what the API does (not how to use it). + +### Object + +Each API should have a description of the primary resources returned and manipulated +using the API. + +- H3 naming the object (i.e. "The wobble object") +- One sentence explaining what the object is. +- Two-column table to describe the object: + - property name / type / required + - property description +- If the object is severely nested, use a nested list instead of a table + +### Methods + +List all methods for interacting with the API. + +Each method: + +- H3 naming the method (i.e. "Retrieve a font") +- Endpoint (h4?) + - do not include base URL in endpoint + - endpoints should use [three backtick markdown format with syntax highlighting](https://help.github.com/articles/github-flavored-markdown/#syntax-highlighting) with `url` as the language +- A description of what the method does. (NOT how to use it.) +- (how do we define scopes?) +- If necessary, a description of accepted values/filetypes and limits/restrictions +- Two-column table to describe parameters + - parameter name + - parameter description and accepted values + +### Examples + +Each method should have H4 headers for examples: + +- Example request +- Example request body (if applicable) +- Example response + +There should be four examples under each header, one for each library. Use +[three backtick markdown format with syntax highlighting](https://help.github.com/articles/github-flavored-markdown/#syntax-highlighting): + +## Style conventions + +- Always JSON, never `JSON` or json. +- Do **not** include access tokens in example URLs. +- h2 and h3 will be included in side nav +- code blocks/h4/blockquotes will be pushed to the right + +## Lingo + +- the parts of a JSON object are called **properties** +- querystring parameters are called **parameters** + +## Formatting JSON + +We need to show JSON examples, but we want to make the documentation readable +on a wide range of monitors: so it needs to be somewhat narrow and compact. +Usually stringifying JSON with indentation of 2 spaces does the trick: +if that isn't enough, use [json-pretty-compact-cli](https://github.com/tmcw/json-pretty-compact-cli) +or another more tasteful formatter. diff --git a/README.md b/README.md new file mode 100644 index 0000000..1bb70e4 --- /dev/null +++ b/README.md @@ -0,0 +1,50 @@ +# Docbox + +**REST API Documentation powered by Markdown** + +Docbox is an open source version of Mapbox's REST API documentation system. It takes structured Markdown files and generates a friendly two-column layout with navigation, permalinks, and examples. The documentation source files that Docbox uses are friendly for documentation authors and free of presentational code: it's just Markdown. + +_Docbox is a [Mapbox](http://mapbox.com/) community open source project. We built an awesome system for our REST API documentation and wanted to share it with you. Not a Mapbox product, so there's no guaranteed support and may have some rough edges._ + +Docbox is a JavaScript application written with React. The core magic is thanks to the [remark](http://remark.js.org/) Markdown parser, which enables the layout: after parsing a file into an [Abstract Syntax Tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree), we can move examples to the right, prose to the left, and build the navigation system. + +It also has a supercharged **test suite**. Our tests check for everything from broken links to invalid examples and structure problems: this way, the application is only concerned with output and you can proactively enforce consistency and correctness. We even extract JavaScript examples from documentation and test them with [eslint](http://eslint.org/) + +When you're ready to ship, Docbox's `build` task minifies JavaScript and uses React's server rendering code to make documentation indexable for search engines and viewable without JavaScript. + +## Writing Documentation + +Documentation is written as Markdown files in the `content` directory, and is organized by the `src/content.js` file - that file requires each documentation page and puts them in order. This demo has a little bit of content - [content/example.md](content/example.md) and [content/introduction.md](content/introduction.md), so that there's an example to follow. + +## Development + +We care about the ease of writing documentation. Docbox comes with batteries included: after you `npm install` the project, you can run `npm start` and its development server, [budo](https://github.com/mattdesl/budo), will serve the website locally and update automatically. + +To run the site locally: + +1. Clone this repository + 2. `git clone https://github.com/mapbox/docbox.git` +2. `npm install` +3. `npm start` +4. Open http://localhost:9966/ + +## Tests + +Tests cover both the source code of Docbox as well as the content in the `content/` directory. + +To run tests: + +1. Clone this repository + 2. `git clone https://github.com/mapbox/docbox.git` +2. `npm install` +3. `npm test` + + +## Deployment + +The `npm run build` command builds a `bundle.js` file that contains all of the JavaScript code and content needed to show the site, and creates an `index.html` file that already contains the site content. Note that this _replaces_ the existing `index.html` file, so it's best to run this only when deploying the site and to undo changes to `index.html` if you want to keep working on content. + +1. Clone this repository + 2. `git clone https://github.com/mapbox/docbox.git` +2. `npm install` +3. `npm run build` \ No newline at end of file diff --git a/content/example.md b/content/example.md new file mode 100644 index 0000000..087ccb6 --- /dev/null +++ b/content/example.md @@ -0,0 +1,431 @@ +## Wobble + +This is our high-quality wobbles API. You can use this API to request +and remove different wobbles at a low wibble price. + +### List wobbles + +Lists all wobbles for a particular account. + +```endpoint +GET /wobbles/v1/{username} wobbles:read +``` + +#### Example request + +```curl +$ curl https://wobble.biz/wobbles/v1/{username} +``` + +```bash +$ wbl wobbles list +``` + +```javascript +client.listWobbles(function(err, wobbles) { + console.log(wobbles); +}); +``` + +```python +wobbles.list() +``` + +#### Example response + +```json +[ + { + "owner": "{username}", + "id": "{wobble_id}", + "created": "{timestamp}", + "modified": "{timestamp}" + }, + { + "owner": "{username}", + "id": "{wobble_id}", + "created": "{timestamp}", + "modified": "{timestamp}" + } +] +``` + +### Create wobble + +Creates a new, empty wobble. + +```endpoint +POST /wobbles/v1/{username} wobbles:write +``` + +#### Example request + +```curl +curl -X POST https://wobble.biz/wobbles/v1/{username} +``` + +```bash +$ wbl wobbles create +``` + +```javascript +client.createWobble({ + name: 'example', + description: 'An example wobble' +}, function(err, wobble) { + console.log(wobble); +}); +``` + +```python +response = wobbles.create( + name='example', description='An example wobble') +``` + +#### Example request body + +```json +{ + "name": "foo", + "description": "bar" +} +``` + +Property | Description +---|--- +`name` | (optional) the name of the wobble +`description` | (optional) a description of the wobble + +#### Example response + +```json +{ + "owner": "{username}", + "id": "{wobble_id}", + "name": null, + "description": null, + "created": "{timestamp}", + "modified": "{timestamp}" +} +``` + +### Retrieve a wobble + +Returns a single wobble. + +```endpoint +GET /wobbles/v1/{username}/{wobble_id} wobbles:read +``` + +Retrieve information about an existing wobble. + +#### Example request + +```curl +curl https://wobble.biz/wobbles/v1/{username}/{wobble_id} +``` + +```bash +$ wbl wobble read-wobble wobble-id +``` + +```python +attrs = wobbles.read_wobble(wobble_id).json() +``` + +```javascript +client.readWobble('wobble-id', + function(err, wobble) { + console.log(wobble); + }); +``` + +#### Example response + +```json +{ + "owner": "{username}", + "id": "{wobble_id}", + "created": "{timestamp}", + "modified": "{timestamp}" +} +``` + +### Update a wobble + +Updates the properties of a particular wobble. + +```endpoint +PATCH /wobbles/v1/{username}/{wobble_id} wobbles:write +``` + +#### Example request + +```curl +curl --request PATCH https://wobble.biz/wobbles/v1/{username}/{wobble_id} \ + -d @data.json +``` + +```python +resp = wobbles.update_wobble( + wobble_id, + name='updated example', + description='An updated example wobble' + ).json() +``` + +```bash +$ wbl wobble update-wobble wobble-id +``` + +```javascript +var options = { name: 'foo' }; +client.updateWobble('wobble-id', options, function(err, wobble) { + console.log(wobble); +}); +``` + +#### Example request body + +```json +{ + "name": "foo", + "description": "bar" +} +``` + +Property | Description +---|--- +`name` | (optional) the name of the wobble +`description` | (optional) a description of the wobble + +#### Example response + +```json +{ + "owner": "{username}", + "id": "{wobble_id}", + "name": "foo", + "description": "bar", + "created": "{timestamp}", + "modified": "{timestamp}" +} +``` + +### Delete a wobble + +Deletes a wobble, including all wibbles it contains. + +```endpoint +DELETE /wobbles/v1/{username}/{wobble_id} wobbles:write +``` + +#### Example request + +```curl +curl -X DELETE https://wobble.biz/wobbles/v1/{username}/{wobble_id} +``` + +```bash +$ wbl wobble delete-wobble wobble-id +``` + +```python +resp = wobbles.delete_wobble(wobble_id) +``` + +```javascript +client.deleteWobble('wobble-id', function(err) { + if (!err) console.log('deleted!'); +}); +``` + +#### Example response + +> HTTP 204 + +### List wibbles + +List all the wibbles in a wobble. The response body will be a +WobbleCollection. + +```endpoint +GET /wobbles/v1/{username}/{wobble_id}/wibbles wobbles:read +``` + +#### Example request + +```curl +curl https://wobble.biz/wobbles/v1/{username}/{wobble_id}/wibbles +``` + +```bash +$ wbl wobble list-wibbles wobble-id +``` + +```python +collection = wobbles.list_wibbles(wobble_id).json() +``` + +```javascript +client.listWobbles('wobble-id', {}, function(err, collection) { + console.log(collection); +}); +``` + +#### Example response + +```json +{ + "type": "Wobble", + "wibbles": [ + { + "id": "{wibble_id}", + "type": "Wobble", + "properties": { + "prop0": "value0" + } + }, + { + "id": "{wibble_id}", + "type": "Wobble", + "properties": { + "prop0": "value0" + } + } + ] +} +``` + +### Insert or update a wibble + +Inserts or updates a wibble in a wobble. If there's already a wibble +with the given ID in the wobble, it will be replaced. If there isn't +a wibble with that ID, a new wibble is created. + +```endpoint +PUT /wobbles/v1/{username}/{wobble_id}/wibbles/{wibble_id} wobbles:write +``` + +#### Example request + +```curl +curl https://wobble.biz/wobbles/v1/{username}/{wobble_id}/wibbles/{wibble_id} \ + -X PUT \ + -d @file.geojson +``` + +```bash +$ wbl wobble put-wibble wobble-id wibble-id 'geojson-wibble' +``` + +```javascript +var wibble = { + "type": "Wobble", + "properties": { "name": "Null Island" } +}; +client.insertWobble(wibble, 'wobble-id', function(err, wibble) { + console.log(wibble); +}); +``` + +#### Example request body + +```json +{ + "id": "{wibble_id}", + "type": "Wobble", + "properties": { + "prop0": "value0" + } +} +``` + +Property | Description +--- | --- +`id` | the id of an existing wibble in the wobble + +#### Example response + +```json +{ + "id": "{wibble_id}", + "type": "Wobble", + "properties": { + "prop0": "value0" + } +} +``` + +### Retrieve a wibble + +Retrieves a wibble in a wobble. + +```endpoint +GET /wobbles/v1/{username}/{wobble_id}/wibbles/{wibble_id} wobbles:read +``` + +#### Example request + +```curl +curl https://wobble.biz/wobbles/v1/{username}/{wobble_id}/wibbles/{wibble_id} +``` + +```bash +$ wbl wobble read-wibble wobble-id wibble-id +``` + +```javascript +client.readWobble('wibble-id', 'wobble-id', + function(err, wibble) { + console.log(wibble); + }); +``` + +```python +wibble = wobbles.read_wibble(wobble_id, '2').json() +``` + +#### Example response + +```json +{ + "id": "{wibble_id}", + "type": "Wobble", + "properties": { + "prop0": "value0" + } +} +``` + +### Delete a wibble + +Removes a wibble from a wobble. + +```endpoint +DELETE /wobbles/v1/{username}/{wobble_id}/wibbles/{wibble_id} wobbles:write +``` + +#### Example request + +```javascript +client.deleteWobble('wibble-id', 'wobble-id', function(err, wibble) { + if (!err) console.log('deleted!'); +}); +``` + +```curl +curl -X DELETE https://wobble.biz/wobbles/v1/{username}/{wobble_id}/wibbles/{wibble_id} +``` + +```python +resp = wobbles.delete_wibble(wobble_id, wibble_id) +``` + +```bash +$ wbl wobble delete-wibble wobble-id wibble-id +``` + +#### Example response + +> HTTP 204 diff --git a/content/introduction.md b/content/introduction.md new file mode 100644 index 0000000..2cb186f --- /dev/null +++ b/content/introduction.md @@ -0,0 +1,3 @@ +## Our API + +Welcome to coolcorp biz! This is our API documentation. diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..7ae181d --- /dev/null +++ b/css/base.css @@ -0,0 +1,3758 @@ +/* ------------------------------------------------------- +This file is Copyright (C) 2015 Mapbox Inc. All rights reserved. +You may not duplicate, copy, or reuse any portion without express written +permission from Mapbox. +------------------------------------------------------- */ + +/* Reset ♥ Adapted from http://meyerweb.com/eric/tools/css/reset/ +------------------------------------------------------- */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin:0; + padding:0; + border:0; + font-size:100%; + font:inherit; + vertical-align:baseline; + } +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display:block; + } +body { line-height:1; } +ol, ul { list-style:none; } +blockquote, q { quotes:none; } +blockquote:before, blockquote:after, +q:before, q:after { content:''; content:none; } +/* tables still need 'cellspacing="0"' in the markup */ +table { border-collapse: collapse; border-spacing:0; } +/* remember to define focus styles. Hee Haw */ +:focus { outline:0; } + + +*, *:after, *:before { + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing:border-box; + } + + +/* Special button reset */ +[type=submit], +button, +button::-moz-focus-inner { + border: 0; + padding: 0; + font:15px/20px sans-serif; +} + +/* Inline Elements: Defaults +------------------------------------------------------- */ +body, +input, +textarea { + color:#404040; + color:rgba(0,0,0,0.75); + font:15px/20px sans-serif; + -webkit-font-smoothing: antialiased; +} + +body { background:#fff; } +.dark { color:#fff; } + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family:sans-serif; + font-weight:bold; + margin:0; + } + +em h1, h1 em, +em h2, h2 em, +em h3, h3 em, +em h4, h4 em, +em h5, h5 em, +em h6, h6 em { + font-family:'Open Sans Bold Italic', sans-serif; + } + +h1 { + font-size:30px; + line-height:40px; + } +h2 { + font-size:22px; + line-height:30px; + padding-top: 5px; + padding-bottom:5px; + } + +h3 { + font-size:15px; + line-height:20px; + } + +h4, h5, h6 { + font-size:12px; + line-height:20px; + } + +p { margin-bottom:20px; } + +p:last-child { margin-bottom:0; } + +small, +.prose.small, +.small { + font-size:12px; + line-height:20px; + letter-spacing:0; + } + +small { display:block; } + +.micro, +.prose .micro, +.prose.micro { + font-size:10px; + line-height:20px; + letter-spacing:0; + } + +.strong, +strong { + font-family:'Open Sans Bold', sans-serif; + font-weight:normal; + } + strong em, + em strong { font-family:'Open Sans Bold Italic', sans-serif; } + +address, +em { + font-family:'Open Sans Italic', sans-serif; + } + +/* Fancy font style */ + +h1.fancy, +h2.fancy, +h3.fancy { + font-family:'Brandon', sans-serif; + } + +h1.fancy { + font-size:60px; + line-height:80px; + letter-spacing:3px; + text-transform: uppercase; + } +h2.fancy { + padding-top: 0; + padding-bottom: 0; + font-size:40px; + letter-spacing:2px; + line-height:50px; + text-transform: uppercase; + } + +.prose-big h3.fancy, +h3.fancy { + font-size:28px; + letter-spacing:2px; + line-height:40px; + text-transform: uppercase; + } + +/* deprecated */ +h1.futura, +h2.futura, +h3.futura { + font-family:'Brandon', sans-serif; + } + +h1.futura { + font-size:60px; + line-height:80px; + letter-spacing:3px; + text-transform: uppercase; + } +h2.futura { + padding-top: 0; + padding-bottom: 0; + font-size:40px; + letter-spacing:2px; + line-height:50px; + text-transform: uppercase; + } + +.prose-big h3.futura, +h3.futura { + font-size:28px; + letter-spacing:2px; + line-height:40px; + text-transform: uppercase; + } + +/* Links */ +a, +a > code { + color:#3887BE; + text-decoration:none; + } + a:hover > code, + a.active, + a:hover { color:#63b6e5; } + a:focus { + box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05); + } + +.dark a, +a.dark, +.dark a > code { color:rgba(255,255,255,.5); } +a.dark.active, +.dark a.active, +a.dark:hover, +.dark a:hover > code, +.dark a:hover { color:white; } +.dark a:focus { + box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); + } + +a.quiet, +a.quiet > code { + color:rgba(0,0,0,0.5); + } +a.quiet.active, a.quiet:hover { color:rgba(0,0,0,0.75); } + +.dark a.quiet, +a.quiet.dark { color:white; } + +.dark a.quiet:hover, +a.quiet.dark.active, a.quiet.dark:hover { color:rgba(255,255,255,0.5); } + +/* Buttons */ +.button { + background-color:#3887be; + text-align:center; + color:#fff; + display:inline-block; + margin:0px; + padding:10px; + position:relative; + border:none; + cursor:pointer; + border-radius:3px; + white-space:nowrap; + text-overflow:ellipsis; + /* Protects button metrics in .prose context */ + font-family:'Open Sans Bold', sans-serif; + line-height:20px; + font-size:12px; + -webkit-appearance:none; + + /* The button element needs to be forced this */ + -webkit-font-smoothing:antialiased; + } + +.button.short { + height: 30px; + padding-top: 5px; + padding-bottom: 5px; + vertical-align: middle; +} + +.button.stroke { + background-color: transparent; + box-shadow: 0px 0px 0px 2px #3887be inset; + color: #3887be; +} + +.button.stroke.short { + padding-top: 5px; + padding-bottom: 4px; +} + +.button.stroke:hover { + background-color: transparent; + color: #52a1d8; + box-shadow: 0px 0px 0px 2px #52a1d8 inset; +} + +.button.stroke.active { + color: white; + background-color: #3887be; + box-shadow: 0px 0px 0px 2px transparent inset; +} + +.button:hover, +.button.active { + color:#fff; + } + +.dark .button, +.dark .button:hover, +.dark .quiet.button, +.dark .quiet.button:hover { + color: white; +} + +.dark .button.stroke { + border: none; + box-shadow: 0px 0px 0px 2px white inset; + color: white; +} + +.dark .button.stroke:hover, +.dark .button.stroke.active { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255,255,255,.5) inset; + color: rgba(255,255,255,.75); +} + +.dark .button.stroke.quiet { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255,255,255,.25)inset; + color: rgba(255,255,255,.5); +} + +.dark .button.quiet.stroke:hover, +.dark .button.quiet.stroke.active { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255,255,255,.75)inset; + color: rgba(255,255,255,.75); +} + +.button:focus { + box-shadow: inset 0 0 0 3px rgba(0,0,0,0.1); +} + +.button:hover, +.button.active { + background-color:#52a1d8; + } + +.button.loud { + background-color:#8889cc; + } +.button.fill-purple.active, +.button.fill-purple:hover, +.button.loud.active, +.button.loud:hover { + background-color:#a4a4e5; + } + +.button.quiet { + background-color:rgba(0,0,0,0.25); + color:#fff; + } +.button.quiet.active, +.button.quiet:hover { + background-color:rgba(0,0,0,0.5); + color:#fff; + box-shadow: + inset rgba(0,0,0,0) 0 0 0, + inset rgba(0,0,0,0) 0 0 0; + } + +/* Buttons with fill classes applied */ +.button.fill-pink.active, +.button.fill-pink:hover { + background-color:#ff88bc; + } +.button.fill-red.active, +.button.fill-red:hover { + background-color:#ff6e7f; + } +.button.fill-orange.active, +.button.fill-orange:hover { + background-color:#ffa286; + } +.button.fill-mustard.active, +.button.fill-mustard:hover { + background-color:#ffca55; + } +.button.fill-green.active, +.button.fill-green:hover { + background-color:#70d29b; + } +.button.fill-teal.active, +.button.fill-teal:hover { + background-color:#5bc9bf; + } +.button.fill-purple.active, +.button.fill-purple:hover { + background-color:#a4a4e5; + } +.button.fill-denim.active, +.button.fill-denim:hover { + background-color:#6a8099; + } +.button.fill-darkblue.active, +.button.fill-darkblue:hover { + background-color:#465f77; + } +.button.fill-cyan.active, +.button.fill-cyan:hover { + background-color:#55ccea; + } +.button.fill-blue.active, +.button.fill-blue:hover { + background-color:#52a1d8; + } +.button.fill-darken0.active, +.button.fill-darken0:hover { + background-color:rgba(0,0,0,0.25); + } +.button.fill-darken1.active, +.button.fill-darken1:hover { + background-color:rgba(0,0,0,0.5); + } +.button.fill-darken2.active, +.button.fill-darken2:hover { + background-color:rgba(0,0,0,0.75); + } +.button.fill-lighten0.active, +.button.fill-lighten0:hover { + background-color:rgba(255,255,255,0.25); + } +.button.fill-lighten1.active, +.button.fill-lighten1:hover { + background-color:rgba(255,255,255,0.5); + } + +.button.stroke.quiet { + background: transparent; + box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.25) inset; + color: rgba(0,0,0,0.5); +} + +.button.stroke.quiet:hover { + box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.5) inset; + color: rgba(0,0,0,.5); +} + +.button.stroke.quiet.active:hover, +.button.stroke.quiet.active { + box-shadow: 0px 0px 0px 2px transparent inset; + background: rgba(0,0,0,0.5); + color: white; +} + +.button.stroke.loud { + background: transparent; + box-shadow: 0px 0px 0px 2px #8889cc inset; + color: #8889cc; +} + +.button.stroke.loud:hover { + box-shadow: 0px 0px 0px 2px #a4a4e5 inset; + color: #a4a4e5; + background-color:transparent; +} + +.button.stroke.loud.active { + box-shadow: 0px 0px 0px 2px transparent inset; + color: white; + background-color:#8889cc; +} + +.dark .button.quiet { + color:#fff; + background-color:rgba(255,255,255,0.10); + } + +.dark .button.quiet.active, +.dark .button.quiet:hover { + background-color:rgba(255,255,255,0.25); + } + +.button.disabled, +.button:disabled { + background:rgba(0,0,0,.1); + color:rgba(0,0,0,0.25); + cursor: default; + } + +.button.disabled:hover, +.button:disabled:hover { + background:rgba(0,0,0,.1); + } + +.button.disabled:focus, +.button:disabled:focus { + box-shadow:none; + } + +.dark .button.disabled, +.dark .button:disabled { + background:rgba(255,255,255,.05); + color: rgba(255,255,255,.5); + } + +.dark .button.disabled:hover, +.dark .button:disabled:hover { + background:rgba(255,255,255,.05); + } + +/* Tab style for links that toggle between views + * NOTE: THE .tabs class in DEPRECATED - for a similar UI component use rounded-toggle ; + */ +.tabs { + display:inline-block; + } + .tabs, + .pill.tabs { + -webkit-border-radius:3px; + border-radius:3px; + } + .tabs > a { + border-top:1px solid rgba(0,0,0,0.25); + border-bottom:1px solid rgba(0,0,0,0.25); + background:transparent; + color:rgba(0,0,0,.5); + font-family:'Open Sans Bold', sans-serif; + font-size:12px; + text-align:center; + display:inline-block; + height:40px; + margin:0; + padding:10px; + white-space:nowrap; + text-overflow:ellipsis; + } + .tabs > * { + border:0 solid rgba(0,0,0,0.25); + border-right-width:1px; + } + .tabs > *:first-child { + border-left-width:1px; + border-radius: 3px 0 0 3px; + } + .tabs > *:last-child { + border-radius: 0 3px 3px 0; + } + .tabs > *:hover { + background:rgba(0,0,0,0.05); + color:rgba(0,0,0,.5); + } + .tabs > *.active { + background:rgba(0,0,0,0.1); + color:rgba(0,0,0,.5); + } + +.dark.tabs, +.dark.tabs > *, +.dark .tabs, +.dark .tabs > * { + border-color:rgba(255,255,255,0.25); + color:rgba(255,255,255,1); + } + .dark.tabs > *:hover, + .dark .tabs > *:hover { + background-color:rgba(225,255,255,0.1); + color:rgba(255,255,255,1); + } + .dark.tabs > *.active, + .dark .tabs > *.active { + background-color:rgba(225,255,255,0.15); + color:rgba(255,255,255,1); + } + +/* Pill wrapper for joining buttons. */ +.pill { + display:inline-block; + } + .pill > * { + border-radius:0 0 0 0; + border:0 solid white; + border-left-width:1px; + } + .pill > *:first-of-type { + border-radius:3px 0 0 3px; + border-left-width:0; + } + .pill > *:last-of-type { + border-radius:0 3px 3px 0; + } + .pill > *:only-child { + border-radius:3px; + } + +.pill .button.stroke { + border: none; + box-shadow: 0px 0px 0px 2px #3887be inset; + border-right-width: 2px; + border-left-width: 0; +} +.pill .button.stroke:hover { + background-color: transparent; + color: #52a1d8; + box-shadow: 0px 0px 0px 2px #52a1d8 inset; +} + +.pill .button.stroke:not(:first-of-type) { + margin-left: -2px; +} + +/* Vertical pill if pill contents is full width */ +.pill > .col12 { + text-align: left; + border-bottom-width:1px; + border-left-width:0; + } + .pill > .button.stroke.col12:not(:first-of-type) { + margin-left: 0px; + margin-top: -2px; + } + .pill > .col12:first-of-type { + border-radius:3px 3px 0 0; + } + .pill > .col12:last-of-type { + border-radius:0 0 3px 3px; + } + .pill > .col12:only-child, + .pill > .col12:only-of-type { + border-radius: 3px; + } + +.dark.fill-dark .pill > * { border-color:#404040; } +.fill-gray .pill > *, +.fill-grey .pill > * { border-color:#eee; } +.fill-white .pill > * { border-color:#fff; } +.fill-light .pill > * { border-color:#f8f8f8; } +/* deprecated, use fill-cyan */ +.fill-blue-light .pill > * { border-color:#52a1d8;} +.fill-cyan .pill > * { border-color:#3bb2d0;} +.fill-blue .pill > * { border-color:#3887be; } +.fill-denim .pill > * { border-color:#50667f; } +.fill-navy .pill > * { border-color:#28353d; } +.fill-navy-dark .pill > * { border-color:#222B30; } +.fill-purple .pill > * { border-color:#8a8acb; } +.fill-midnight .pill > * { border-color:#142736; } +.fill-darkblue .pill > * { background-color:#223b53; } +.fill-red .pill > * { background-color:#e55e5e; } +.fill-teal .pill > * { background-color:#41afa5; } +.fill-pink .pill > * { background-color:#ed6498; } +.fill-mustard .pill > * { background-color:#fbb03b; } + +.dark.fill-darken1 .pill > *, +.dark.fill-darken2 .pill > *, +.dark.fill-darken3 .pill > * { + border-color:#000; + border-color:rgba(0,0,0,0.5); + } +.fill-lighten1 .pill > *, +.fill-lighten2 .pill > *, +.fill-lighten3 .pill > * { + border-color:#fff; + border-color:rgba(255,255,255,0.5); + } + +.pill > .stroke { box-shadow: 0px 0px 0px 2px #3887be inset; } +.pill > .quiet.stroke { box-shadow: 0px 0px 0px 2px rgba(0,0,0,.25) inset; } +.pill > .loud.stroke { box-shadow: 0px 0px 0px 2px #8889cc inset; } + +.dark .pill > .stroke { box-shadow: 0px 0px 0px 2px white inset; } +.dark .pill > .stroke:hover { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255,255,255,.5) inset; color: rgba(255,255,255,.75);} +.dark .pill > .quiet.stroke { box-shadow: 0px 0px 0px 2px rgba(255,255,255,.25) inset; } + +.pill input[type=text] { + border:1px solid rgba(0,0,0,0.1); + border-radius:0; + } + +.pill input[type=text]:focus { + border:1px solid rgba(0,0,0,0.25); + } + +/* Pill style for input followed by button */ +.input-pill input[type='text'], +.input-pill input[type=text]:focus { border-right-width: 0;} + +.input-pill input[type='text'] + .button { + border-left-width: 0; + border-radius: 0 3px 3px 0; +} + +/* make your pills toggles */ +.toggle * { + width:40px; + padding:0; + overflow:hidden; + white-space:nowrap; + } +.toggle .big.button.icon:not(.active) { + padding-left:0; + } +.toggle .active { + background:#52a1d8; + color:rgba(255,255,255,0.75); + padding:10px; + width:auto; + color:#cdecf3; + } + +/* Rounded toggle for filtering/modifying lists */ +.rounded-toggle { + margin-top: 5px; + margin-bottom: 5px; + padding: 2px; + border-radius: 15px; + vertical-align: middle; + background: rgba(0,0,0,.1) +} + +.dark .rounded-toggle { background: rgba(255,255,255,.1);} + +.rounded-toggle > * { + cursor:pointer; + vertical-align: top; + display: inline-block; + border-radius: 16px; + padding: 3px 10px; + font-size: 12px; + color: rgba(0,0,0,0.5); + line-height: 20px; +} + +.rounded-toggle > *:empty { padding-left: 5px; padding-right: 5px; } +.rounded-toggle > *:hover { color: rgba(0,0,0,0.75); } +.dark .rounded-toggle > * { color: white;} + +.dark .rounded-toggle *:hover { color: rgba(255,255,255,0.75); } + +.rounded-toggle input[type=radio] { display:none; } + +.rounded-toggle input[type=radio]:checked + label, +.rounded-toggle .active { background: white; color: rgba(0,0,0,.5); } + +.dark .rounded-toggle input[type=radio]:checked + label, +.dark .rounded-toggle .active { color: white; } + +.fill-dark .rounded-toggle input[type=radio]:checked + label, +.fill-dark .rounded-toggle .active { background-color:#404040; } +.fill-gray .rounded-toggle input[type=radio]:checked + label, +.fill-gray .rounded-toggle .active, +.fill-grey .rounded-toggle input[type=radio]:checked + label, +.fill-grey .rounded-toggle .active { background:#eee; } +.fill-grey-dark .rounded-toggle input[type=radio]:checked + label, +.fill-grey-dark .rounded-toggle .active, +.fill-gray-dark .rounded-toggle input[type=radio]:checked + label, +.fill-gray-dark .rounded-toggle .active { background:#404040; } +.fill-white .rounded-toggle input[type=radio]:checked + label, +.fill-white .rounded-toggle .active { background:#fff; } +.fill-light .rounded-toggle input[type=radio]:checked + label, +.fill-light .rounded-toggle .active { background:#f8f8f8; } +/* deprecated, use fill-cyan */ +.fill-blue-light .rounded-toggle input[type=radio]:checked + label, +.fill-blue-light .rounded-toggle .active { background:#52a1d8; } +.fill-blue-cyan .rounded-toggle input[type=radio]:checked + label, +.fill-blue-cyan .rounded-toggle .active { background:#3bb2d0; } +.fill-blue .rounded-toggle input[type=radio]:checked + label, +.fill-blue .rounded-toggle .active { background:#3887be; } +.fill-midnight .rounded-toggle input[type=radio]:checked + label, +.fill-midnight .rounded-toggle .active { background:#142736; } +.fill-denim .rounded-toggle input[type=radio]:checked + label, +.fill-denim .rounded-toggle .active { background:#50667f; } +.fill-navy .rounded-toggle input[type=radio]:checked + label, +.fill-navy .rounded-toggle .active { background:#28353d; } +.fill-navy-dark .rounded-toggle input[type=radio]:checked + label, +.fill-navy-dark .rounded-toggle .active { background:#222B30; } +.fill-purple .rounded-toggle input[type=radio]:checked + label, +.fill-purple .rounded-toggle .active { background:#8a8acb; } +.fill-green .rounded-toggle input[type=radio]:checked + label, +.fill-green .rounded-toggle .active { background:#56b881; } +.fill-yellow .rounded-toggle input[type=radio]:checked + label, +.fill-yellow .rounded-toggle .active { background:#f1f075; } +.fill-orange .rounded-toggle input[type=radio]:checked + label, +.fill-orange .rounded-toggle .active { background:#f9886c; } +.fill-darkblue .rounded-toggle input[type=radio]:checked + label, +.fill-darkblue .rounded-toggle .active { background-color:#223b53; } +.fill-red .rounded-toggle input[type=radio]:checked + label, +.fill-red .rounded-toggle .active { background-color:#e55e5e; } +.fill-teal .rounded-toggle input[type=radio]:checked + label, +.fill-teal .rounded-toggle .active { background-color:#41afa5; } +.fill-pink .rounded-toggle input[type=radio]:checked + label, +.fill-pink .rounded-toggle .active { background-color:#ed6498; } +.fill-mustard .rounded-toggle input[type=radio]:checked + label, +.fill-mustard .rounded-toggle .active { background-color:#fbb03b; } + +.short.rounded-toggle { + margin-top: 3px; + margin-bottom: 3px; +} + +.rounded-toggle.short input[type=radio] + label, +.rounded-toggle.short > * { + font-size: 10px; + padding:0 7px; +} + +img { + max-width:100%; + vertical-align:top; + } + .center img, + img.center { margin-left:auto; margin-right:auto; } + +/* images defined with background size - +placed here so width will be overriden by grid widths*/ +.thumbnail { height: 30px; width: 30px;} +.small-graphic { height: 60px; width: 60px;} +.big-graphic { height: 120px; width: 120px;} + +abbr { + border-bottom:1px dotted #000; + cursor:help; + } + +hr { + margin:0 0 20px; + border:0; + height:1px; + background:#f8f8f8; + background:rgba(0,0,0,.05); + } + +.dark hr { + background:rgba(255,255,255,.05); +} + +/* Block Quotes */ +blockquote, +q { + quotes:none; + font-style:normal; + padding-left:20px; + margin:10px; + } + +blockquote:before, +blockquote:after, +q:before, +q:after { + content:''; + } + +/* Keyboard styles */ +kbd { + background: rgba(0,0,0,.025); + color: rgba(0,0,0,.5); + border: 1px solid rgba(0,0,0,.1); + font-size:12px; + line-height:20px; + border-radius: 3px; + padding:2px 3px; + box-shadow: 0 1px 0 0 rgba(0,0,0,.1); + font-weight: normal; +} + +.dark kbd { + background: rgba(255,255,255,.025); + color: rgba(255,255,255,.5); + border-color: rgba(255,255,255,.1); + } + +/* Code Blocks & Pre */ +.code, +code, +em code, +code em, +code strong, +strong code, +pre, +em pre, +pre em, +pre strong, +strong pre { + font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; + white-space: pre-wrap; +} + +strong code, +code strong, +code.strong, +strong.code, +.strong.code, +.code .strong, +code .strong, +pre strong, +strong pre, +pre.strong, +.strong pre, +pre .strong { + font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; + font-weight:bold; +} + +code em, +em code, +pre em, +em pre { + font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; + font-style:italic; +} + +code, +pre { + background:rgba(0,0,0,0.025); + font-size:12px; + line-height:20px; + padding:3px; + border-radius: 3px; + } +pre { + display:block; + padding:10px; + word-break:break-all; + word-wrap:break-word; + white-space:pre; + white-space:pre-wrap; + -moz-tab-size:4; + tab-size:4; + } + pre code { + background:transparent; + padding:0; + } + +.pre-scrollable { + max-height:300px; + overflow-y:scroll; + } + +/* sub/superscripts */ +sup, +sub { + height:0; + line-height:1; + vertical-align:baseline; + _vertical-align:bottom; + position:relative; + font-size:75%; + } +sup { + bottom:1ex; + } +sub { + top:.5ex; + } + +/* Form basics +-------------------------------------------------- */ + +form fieldset { + margin: 0 0 20px; + } +form fieldset:last-child { + margin-bottom: 0; + } + +form fieldset label { + font:12px/20px 'Open Sans Bold', sans-serif; + display:block; + margin:0 0 5px; + } + .dark label { + color:#f0f0f0; + color:rgba(255,255,255,0.75); + } + +form fieldset label.inline { margin-bottom: 0;} + +input, +select, +button { + vertical-align:top; + } +textarea, +input[type=password], +input[type=text], +input[type=date], +input[type=email], +input[type=number] { + display:inline-block; + height:40px; + margin:0; + color:rgba(0,0,0,.5); + padding:10px; + -webkit-appearance:none; + } +textarea.code, +input.code, +input[type=password].code, +input[type=text].code, +input[type=date].code, +input[type=email].code, +input[type=number].code { + font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; + white-space: pre-wrap; + } +textarea, +input[type=password], +input[type=text], +input[type=date], +input[type=email], +input[type=number] { + background-color:#fff; + border:1px solid rgba(0,0,0,0.1); + -webkit-transition:border-color .05s; + -moz-transition:border-color .05s; + -ms-transition:border-color .05s; + transition:border-color .05s; + } + .dark textarea, + .dark input[type=password], + .dark input[type=text], + .dark input[type=date], + .dark input[type=email], + .dark input[type=number] { + background:#404040; + background:rgba(0,0,0,0.25); + border-color:#eee; + border-color:rgba(255,255,255,0.25); + color:#fff; + box-shadow:none; + } + textarea:focus, + input[type=password]:focus, + input[type=text]:focus, + input[type=date]:focus, + input[type=email]:focus, + input[type=number]:focus { + outline:thin dotted\8; /* ie8 below */ + border-color:rgba(0,0,0,0.25); + color:#404040; + } + .dark textarea:focus, + .dark input[type=password]:focus, + .dark input[type=text]:focus, + .dark input[type=date]:focus, + .dark input[type=email]:focus, + .dark input[type=number]:focus { + border-color:rgba(255,255,255,0.75); + color:#fff; + } + +textarea:disabled, +input[type=text]:disabled, +input[type=date]:disabled, +input[type=email]:disabled, +input[type=number]:disabled, +input[type=password]:disabled { + border-color:rgba(0,0,0,0.125); + color: rgba(0,0,0,0.5); +} + .dark textarea:disabled, + .dark input[type='text']:disabled { + border-color:rgba(255,255,255,0.25); + color: rgba(255,255,255,0.5); + } + +textarea.short, +input[type=password].short, +input[type=text].short, +input[type=date].short, +input[type=email].short, +input[type=number].short { + height: 30px; + padding:5px; + -webkit-appearance:none; + } + textarea.short { height: 60px;} + +textarea.stretch, +input.stretch[type=text], +input.stretch[type=email], +input.stretch[type=number], +input.stretch[type=password] { width:100%; } + +textarea.clean, +input[type=password].clean, +input[type=text].clean, +input[type=date].clean, +input[type=email].clean, +input[type=number].clean, +.dark textarea.clean, +.dark input[type=password].clean, +.dark input[type=text].clean, +.dark input[type=date].clean, +.dark input[type=email].clean, +.dark input[type=number].clean { + border-width: 0; +} + +textarea.clean:focus, +input[type=password].clean:focus, +input[type=text].clean:focus, +input[type=date].clean:focus, +input[type=email].clean:focus, +input[type=number].clean:focus { + background-color: rgba(0,0,0,.05); +} + +.dark textarea.clean:focus, +.dark input[type=password].clean:focus, +.dark input[type=text].clean:focus, +.dark input[type=date].clean:focus, +.dark input[type=email].clean:focus, +.dark input[type=number].clean:focus { + background-color: rgba(0,0,0,.35); +} + +/* Special Form Components */ +.with-icon { + position:relative; + } + .with-icon input[type=text], + .with-icon input[type=date], + .with-icon input[type=email], + .with-icon input[type=number] { + padding-left:35px; + } + .with-icon .icon { + position:absolute; + top:10px; + left:10px; + } + +.with-icon input[type=text], +.with-icon input[type=date], +.with-icon input[type=email], +.with-icon input[type=number] { padding-left: 30px; } +.with-icon .short ~ .icon { left:5px; top: 5px; } + +.with-icon-right { + position:relative; + } + .with-icon-right input[type=text], + .with-icon-right input[type=date], + .with-icon-right input[type=email], + .with-icon-right input[type=number] { + padding-right:35px; + } + .with-icon-right .icon { + position:absolute; + top:10px; + right:10px; + } + +.with-icon-right input[type=text], +.with-icon-right input[type=date], +.with-icon-right input[type=email], +.with-icon-right input[type=number] { + padding-right: 30px; +} + +.with-icon-right .short ~ .icon { right:5px; top: 5px;} + +textarea { + height:80px; + max-width:none; + overflow:auto; + resize:none; + } + textarea.resize { resize:both; } + +select { + margin-top: 1px; + margin-bottom: 1px; + } + +input[type=range], +input[type=range]::-webkit-slider-thumb { + -webkit-appearance:none; + margin:0; padding:0; border:0; + } +input[type=range] { + display:inline-block!important; + vertical-align:middle; + height:12px; + padding:0 2px; + border:2px solid transparent; + background:rgba(0,0,0,0.25); + min-width:100px; + overflow:hidden; + cursor:pointer; + } + input[type=range]::-ms-fill-upper { background:transparent; } + input[type=range]::-ms-fill-lower { background:rgba(255,255,255,0.25); } + +/* Browser thingies */ +input[type=range]::-moz-range-track { opacity:0; } +input[type=range]::-ms-track { opacity:0; } +input[type=range]::-ms-tooltip { display:none; } + +/* For whatever reason, these need to be defined + * on their own so dont group them */ +input[type=range]::-webkit-slider-thumb { + background:rgba(255,255,255,0.75); + height:12px; width:20px; + border-radius:3px; + cursor:ew-resize; + box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px; + } +input[type=range]::-ms-thumb { + margin:0;padding:0;border:0; + background:rgba(255,255,255,0.75); + height:12px; width:20px; + border-radius:3px; + cursor:ew-resize; + box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px; + } +input[type=range]::-moz-range-thumb { + margin:0;padding:0;border:0; + background:rgba(255,255,255,0.75); + height:12px; width:20px; + border-radius:3px; + cursor:ew-resize; + box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px; + } + +input[type=range]:disabled::-moz-range-thumb { cursor: default;} +input[type=range]:disabled::-ms-thumb { cursor: default;} +input[type=range]:disabled::-webkit-slider-thumb { cursor: default;} +input[type=range]:disabled { cursor: default; } + +/* Checkboxes +** DEPRECATED - use checkbox-pill instead +-------------------------------------------------- */ + +.checkbox input[type=checkbox] { display:none; } +.checkbox .button { + cursor:pointer; + padding:10px; + } + .checkbox .button:hover { + background: rgba(0,0,0,0.025); + } + .checkbox input[type=checkbox]:checked + .button { + background: rgba(0,0,0,0.05); + } + .checkbox input[type=checkbox] + .icon:before { + background-color:#fff; + margin-right:5px; + box-shadow:0 0 0 1px rgba(0,0,0,0.25) inset; + } + .checkbox input[type=checkbox]:not(:checked) + .icon:before { + content: ''; + } + .dark.checkbox input[type=checkbox] + .icon:before, + .dark .checkbox input[type=checkbox] + .icon:before { + background-color:rgba(0,0,0,0.25); + } + +.pill.checkbox input[type=checkbox]:checked + .button { + background-color:rgba(0,0,0,0.1); +} + +.dark .pill.checkbox input[type=checkbox]:checked + .button, +.dark.pill.checkbox input[type=checkbox]:checked + .button { + background-color:rgba(255,255,255,0.2); +} + +/* Checkbox pill - use in conjunction with pill + button +-------------------------------------------------- */ + +.checkbox-pill input[type=checkbox] { display: none;} +.checkbox-pill input[type=checkbox] + *:before { background-color: rgba(0,0,0,0.25); border-radius: 2px;} +.checkbox-pill input[type=checkbox]:not(:checked) + *:before { content: '';} +.checkbox-pill input[type=checkbox]:checked + .button { background-color: #52a1d8;} +.checkbox-pill input[type=checkbox]:checked + .button.quiet { background-color: rgba(0,0,0,.5);} +.checkbox-pill input[type=checkbox]:checked + .button.loud { background-color: #a4a4e5;} +.dark.checkbox-pill input[type=checkbox]:checked + .button.quiet, +.dark .checkbox-pill input[type=checkbox]:checked + .button.quiet { background-color: rgba(255,255,255,0.25);} + +/* Radio pill - use in conjunction with pill + button +-------------------------------------------------- */ + +.radio-pill input[type=radio] { display: none;} +.radio-pill input[type=radio] + .button:before { overflow: hidden;} +.radio-pill input[type=radio]:not(:checked) + .button:before { width: 0;} +.radio-pill input[type=radio]:checked + .button { background-color: #52a1d8;} +.radio-pill input[type=radio]:checked + .button.quiet { background-color: rgba(0,0,0,.5);} +.radio-pill input[type=radio]:checked + .button.loud { background-color: #a4a4e5;} +.dark.radio-pill input[type=radio]:checked + .button.quiet, +.dark .radio-pill input[type=radio]:checked + .button.quiet { background-color: rgba(255,255,255,0.25);} + +/* Tables +-------------------------------------------------- */ +table { + width:100%; + background-color:transparent; + border-collapse:collapse; + border-spacing:0; + } + table th, + table td { + padding:4px 0; + text-align:left; + vertical-align:top; + border-bottom:1px solid #ddd; + } + table th { + font-family:'Open Sans Bold', sans-serif; + } + table thead th { + vertical-align:bottom; + } + +table.fixed { + table-layout:fixed; + } + +.scroll-styled .highlight pre, +.scroll-styled { + overflow:auto; + } +.scroll-styled .highlight pre::webkit-scrollbar, +.scroll-styled::-webkit-scrollbar { + width:8px; + height:8px; + border-left:0; + background:rgba(0,0,0,0.1); + } +.scroll-styled .highlight pre::webkit-scrollbar:hover, +.scroll-styled::-webkit-scrollbar:hover { + background:rgba(0,0,0,0.15); + } +.scroll-styled .highlight pre::webkit-scrollbar-track, +.scroll-styled::-webkit-scrollbar-track { + background:none; + } +.scroll-styled .highlight pre::webkit-scrollbar-thumb, +.scroll-styled::-webkit-scrollbar-thumb { + background:rgba(0,0,0,0.1); + border-radius:0; + } + +.dark .scroll-styled::-webkit-scrollbar { + width:8px; + height:8px; + background:rgba(255,255,255,0.1); + border-radius:0; + } +.dark .scroll-styled::-webkit-scrollbar:hover { + background:rgba(255,255,255,0.15); + } +.dark .scroll-styled::-webkit-scrollbar-thumb { + background:rgba(255,255,255,0.1); + } + +/* Inline Elements: Formatted for read content +------------------------------------------------------- */ +.prose { line-height:25px; } +.prose section { margin-bottom:20px; } + +.title, +.prose h1, +.prose h2, +.prose h3, +.prose h4, +.prose h5, +.prose h6, +.prose p, +.prose ul, +.prose ol, +.prose img, +.prose blockquote, +.prose pre, +.prose iframe, +.prose object, +.prose div.highlight { + display:block; + margin-bottom:20px; + word-wrap:break-word; + } +.prose h2 { + padding-top:0; + padding-bottom:0; + } +.prose h1, +.prose h2 { + padding-top:40px; + } +.prose h3, +.prose h4, +.prose h5, +.prose h6 { + padding-top:20px; + } +.prose h1:first-child, +.prose h2:first-child, +.prose h3:first-child, +.prose h4:first-child, +.prose h5:first-child, +.prose h6:first-child { + padding-top:0; + } +.prose blockquote { + padding:20px; + margin:0 0 20px 0; + background-color:#f8f8f8; + background-color:rgba(0,0,0,.05); + } +.prose blockquote p:last-child { + margin:0; + } +.prose p > video, +.prose p > iframe, +.prose p a > iframe, +.prose p > img, +.prose p a > img, +.prose li > video, +.prose li > iframe, +.prose li a > iframe, +.prose li > img, +.prose li a > img { + max-width:100%; + max-height:600px; + margin-right:auto; + margin-left:auto; + } + +table.prose, +.prose table { + border:1px solid #ddd; + } +table.prose th, +table.prose td, +.prose table th, +.prose table td { + padding:8px; + border:1px solid #ddd; + } +table.prose th, +.prose table th { + background-color:rgba(0,0,0,0.05); + } + +.prose ul { + list-style:disc; + margin-left:40px; + } +.prose ol { + list-style:decimal; + margin-left:40px; + } +.prose ul li, +.prose ol li { + margin-bottom:10px; + } + +/* Dark read content styling */ +.dark .prose h1, +.dark .prose h2, +.dark .prose h3 { + color:#fff; + } + +h1.small, +h2.small, +h3.small, +h4.small, +h5.small, +h6.small, +h1.micro, +h2.micro, +h3.micro, +h4.micro, +h5.micro, +h6.micro { + text-transform:uppercase; + } + +.prose h1:last-child, +.prose h2:last-child, +.prose h3:last-child, +.prose h4:last-child, +.prose h5:last-child, +.prose h6:last-child, +.prose p:last-child, +.prose ul:last-child, +.prose ol:last-child, +.prose ul li:last-child, +.prose ol li:last-child, +.prose img:last-child, +.prose blockquote:last-child, +.prose pre:last-child, +.prose iframe:last-child, +.prose object:last-child { + margin-bottom: 0; +} + +/* Larger default font sizes for read content. This + * class should be used in conjunction with .prose +------------------------------------------------------- */ +.prose-big, +.prose-big h3, +.prose-big h4, +.prose-big h5, +.prose-big h6 { + font-size:18px; + line-height:30px; + } +.prose-big .small, +.prose-big small { + font-size:15px; + line-height:25px; + } + +/* Inline Elements: Anchor link styling +------------------------------------------------------- */ +h1 a[href^='#'], +h2 a[href^='#'], +.doc h1[id], +.doc h2[id], +.doc h3[id], +.doc h4[id] { + cursor:pointer; + color:rgba(0, 0, 0, 0.75); + } + +.dark h1 a[href^='#'], +.dark h2 a[href^='#'], +h1 .dark > a[href^='#'], +h2 .dark > a[href^='#'] { + color: white; +} + +/* Icons +------------------------------------------------------- */ +@font-face { + font-family:'icon'; + src:url('icon.eot?v=24'); + src:url('icon.eot?v=24#iefix') format('embedded-opentype'), + url('icon.woff?v=24') format('woff'); + font-weight:normal; + font-style:normal; + } + +.rcon:after, +.icon:before { + font-family: 'icon'; + content:''; + display:inline-block; + width:20px; + height:20px; + font-size: 20px; + color: inherit; + vertical-align:top; + -webkit-background-size:4320px 60px; + background-size:4320px 60px; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + } + +.rcon.big:after, +.icon.big:before { + font-size: 40px; + width:40px; + height:40px; + } + +.prose-big .icon, +.prose-big .rcon, +.prose .icon, +.prose .rcon { + line-height: 20px; +} + +.icon.big { line-height:40px; } +.icon:not(.big):before { margin-right:5px; } +.icon:empty:before { margin:0; } + +/* +:not(input) exists on this rule to allow inputs with a value to take a width, because +otherwise these are considered empty +*/ +.button.icon:empty:not(input) { width:40px; padding:10px; } +.button.short.icon:empty { width:30px; padding:5px; } + +.big.button.icon { + line-height: 40px; + padding-left: 10px; + padding-top: 0; + padding-bottom: 0; + } + +/* Generated with icomoon.com +Note: :after rules and alternative names need to be added manually. +Alternate exists for: +.close -> .x +*/ + +/* before */ +.icon.map:before { + content: "\e900"; +} +.icon.studio:before { + content: "\e901"; +} +.icon.analytics:before { + content: "\e902"; +} +.icon.coding:before { + content: "\e903"; +} +.icon.bike:before { + content: "\e904"; +} +.icon.car:before { + content: "\e905"; +} +.icon.drone:before { + content: "\e906"; +} +.icon.walk:before { + content: "\e907"; +} +.icon.certificate:before { + content: "\e908"; +} +.icon.server:before { + content: "\e909"; +} +.icon.caret-down:before { + content: "\e6a5"; +} +.icon.caret-left:before { + content: "\e6a6"; +} +.icon.caret-right:before { + content: "\e6a7"; +} +.icon.caret-up:before { + content: "\e6a8"; +} +.icon.step-ramp:before { + content: "\e69c"; +} +.icon.smooth-ramp:before { + content: "\e69d"; +} +.icon.bug:before { + content: "\e69e"; +} +.icon.bell:before { + content: "\e69f"; +} +.icon.polygon:before { + content: "\e600"; +} +.icon.minus-document:before { + content: "\e601"; +} +.icon.plus-document:before { + content: "\e602"; +} +.icon.check-document:before { + content: "\e603"; +} +.icon.grid:before { + content: "\e604"; +} +.icon.osm:before { + content: "\e605"; +} +.icon.at:before { + content: "\e606"; +} +.icon.history:before { + content: "\e607"; +} +.icon.palette:before { + content: "\e608"; +} +.icon.sun:before { + content: "\e609"; +} +.icon.account:before { + content: "\e60a"; +} +.icon.adjust-stroke:before { + content: "\e60b"; +} +.icon.alert:before { + content: "\e60c"; +} +.icon.android:before { + content: "\e60d"; +} +.icon.antialias:before { + content: "\e60e"; +} +.icon.apple:before { + content: "\e60f"; +} +.icon.arrive:before { + content: "\e610"; +} +.icon.arrowright:before { + content: "\e611"; +} +.icon.bear-left:before { + content: "\e612"; +} +.icon.bear-right:before { + content: "\e613"; +} +.icon.bolt:before { + content: "\e614"; +} +.icon.book:before { + content: "\e615"; +} +.icon.bookmark:before { + content: "\e616"; +} +.icon.brackets:before { + content: "\e617"; +} +.icon.building:before { + content: "\e618"; +} +.icon.cap-butt:before { + content: "\e619"; +} +.icon.cap-round:before { + content: "\e61a"; +} +.icon.cap-square:before { + content: "\e61b"; +} +.icon.cart:before { + content: "\e61c"; +} +.icon.check:before { + content: "\e61d"; +} +.icon.clipboard:before { + content: "\e61e"; +} +.icon.close:before { + content: "\e61f"; +} +.icon.x:before { + content: "\e61f"; +} +.icon.cloud:before { + content: "\e620"; +} +.icon.compass:before { + content: "\e621"; +} +.icon.contact:before { + content: "\e622"; +} +.icon.creditcard:before { + content: "\e623"; +} +.icon.cross-edge:before { + content: "\e624"; +} +.icon.crosshair:before { + content: "\e625"; +} +.icon.dasharray:before { + content: "\e626"; +} +.icon.dashboard:before { + content: "\e627"; +} +.icon.data:before { + content: "\e628"; +} +.icon.depart:before { + content: "\e629"; +} +.icon.document:before { + content: "\e62a"; +} +.icon.down:before { + content: "\e62b"; +} +.icon.duplicate:before { + content: "\e62c"; +} +.icon.en:before { + content: "\e62d"; +} +.icon.enter-roundabout:before { + content: "\e62e"; +} +.icon.eye:before { + content: "\e62f"; +} +.icon.facebook:before { + content: "\e630"; +} +.icon.floppy:before { + content: "\e631"; +} +.icon.folder:before { + content: "\e632"; +} +.icon.nofolder:before { + content: "\e6a9"; +} +.icon.font:before { + content: "\e633"; +} +.icon.forward:before { + content: "\e634"; +} +.icon.foursquare:before { + content: "\e635"; +} +.icon.fullscreen:before { + content: "\e636"; +} +.icon.gap-width:before { + content: "\e637"; +} +.icon.github:before { + content: "\e638"; +} +.icon.gl:before { + content: "\e639"; +} +.icon.globe:before { + content: "\e63a"; +} +.icon.graph:before { + content: "\e63b"; +} +.icon.hand:before { + content: "\e63c"; +} +.icon.harddrive:before { + content: "\e63d"; +} +.icon.heart:before { + content: "\e63e"; +} +.icon.help:before { + content: "\e63f"; +} +.icon.home:before { + content: "\e640"; +} +.icon.info:before { + content: "\e641"; +} +.icon.inspect:before { + content: "\e642"; +} +.icon.join-miter:before { + content: "\e643"; +} +.icon.join-bevel:before { + content: "\e644"; +} +.icon.join-round:before { + content: "\e645"; +} +.icon.l-r-arrow:before { + content: "\e646"; +} +.icon.land:before { + content: "\e647"; +} +.icon.landuse:before { + content: "\e648"; +} +.icon.layers:before { + content: "\e649"; +} +.icon.leaflet:before { + content: "\e64a"; +} +.icon.levels:before { + content: "\e64b"; +} +.icon.lifebuoy:before { + content: "\e64c"; +} +.icon.line-miter-limit:before { + content: "\e64d"; +} +.icon.line-round-limit:before { + content: "\e64e"; +} +.icon.link:before { + content: "\e64f"; +} +.icon.linkedin:before { + content: "\e650"; +} +.icon.lock:before { + content: "\e651"; +} +.icon.logout:before { + content: "\e652"; +} +.icon.mail:before { + content: "\e653"; +} +.icon.mapbox:before { + content: "\e654"; +} +.icon.marker:before { + content: "\e655"; +} +.icon.icon-halo:before { + content: "\e6a2"; +} +.icon.symbol-layer:before { + content: "\e6aa"; +} +.icon.max-text-angle:before { + content: "\e656"; +} +.icon.menu:before { + content: "\e657"; +} +.icon.minus:before { + content: "\e658"; +} +.icon.mobile:before { + content: "\e659"; +} +.icon.mt:before { + content: "\e65a"; +} +.icon.next:before { + content: "\e65b"; +} +.icon.noeye:before { + content: "\e65c"; +} +.icon.opacity:before { + content: "\e65d"; +} +.icon.package:before { + content: "\e65e"; +} +.icon.paint:before { + content: "\e65f"; +} +.icon.pencil:before { + content: "\e660"; +} +.icon.picture:before { + content: "\e661"; +} +.icon.plus:before { + content: "\e662"; +} +.icon.point-line:before { + content: "\e663"; +} +.icon.point:before { + content: "\e664"; +} +.icon.polyline:before { + content: "\e665"; +} +.icon.prev:before { + content: "\e666"; +} +.icon.printer:before { + content: "\e667"; +} +.icon.raster:before { + content: "\e668"; +} +.icon.redo:before { + content: "\e669"; +} +.icon.refresh:before { + content: "\e66a"; +} +.icon.return:before { + content: "\e66b"; +} +.icon.rotate:before { + content: "\e66c"; +} +.icon.rss:before { + content: "\e66d"; +} +.icon.satellite:before { + content: "\e66e"; +} +.icon.search:before { + content: "\e66f"; +} +.icon.share:before { + content: "\e670"; +} +.icon.sharp-left:before { + content: "\e671"; +} +.icon.sharp-right:before { + content: "\e672"; +} +.icon.sprocket:before { + content: "\e673"; +} +.icon.stackoverflow:before { + content: "\e674"; +} +.icon.star:before { + content: "\e675"; +} +.icon.street:before { + content: "\e676"; +} +.icon.text-align-bottom-center:before { + content: "\e677"; +} +.icon.text-align-bottom-left:before { + content: "\e678"; +} +.icon.text-align-bottom-right:before { + content: "\e679"; +} +.icon.text-align-center-center:before { + content: "\e67a"; +} +.icon.text-align-center-left:before { + content: "\e67b"; +} +.icon.text-align-center-right:before { + content: "\e67c"; +} +.icon.text-align-overlap:before { + content: "\e67d"; +} +.icon.text-align-top-center:before { + content: "\e67e"; +} +.icon.text-align-top-left:before { + content: "\e67f"; +} +.icon.text-align-top-right:before { + content: "\e680"; +} +.icon.text-halo:before { + content: "\e6a3"; +} +.icon.text-halo-width:before { + content: "\e681"; +} +.icon.text-ignore-placement:before { + content: "\e682"; +} +.icon.text-justify-center:before { + content: "\e683"; +} +.icon.text-justify-left:before { + content: "\e684"; +} +.icon.text-justify-right:before { + content: "\e685"; +} +.icon.text-letter-spacing:before { + content: "\e686"; +} +.icon.text-line-height:before { + content: "\e687"; +} +.icon.text-max-width:before { + content: "\e688"; +} +.icon.text-padding:before { + content: "\e689"; +} +.icon.text-rotate:before { + content: "\e68a"; +} +.icon.text-size:before { + content: "\e68b"; +} +.icon.tilemill:before { + content: "\e68c"; +} +.icon.time:before { + content: "\e68d"; +} +.icon.tooltip:before { + content: "\e68e"; +} +.icon.transform-lowercase:before { + content: "\e68f"; +} +.icon.transform-uppercase:before { + content: "\e690"; +} +.icon.trash:before { + content: "\e691"; +} +.icon.position:before { + content: "\e6a4"; +} +.icon.turn-left:before { + content: "\e692"; +} +.icon.turn-right:before { + content: "\e693"; +} +.icon.twitter:before { + content: "\e694"; +} +.icon.tx:before { + content: "\e695"; +} +.icon.u-d-arrow:before { + content: "\e696"; +} +.icon.u-turn:before { + content: "\e697"; +} +.icon.undo:before { + content: "\e698"; +} +.icon.up:before { + content: "\e699"; +} +.icon.video:before { + content: "\e69a"; +} +.icon.water:before { + content: "\e69b"; +} +.icon.quotes:before { + content: "\e6a0"; +} +.icon.number:before { + content: "\e6a1"; +} +.icon.line:before { + content: "\e6ab"; +} +.icon.fill:before { + content: "\e6ac"; +} +.icon.map:before { + content: "\e900"; +} +.icon.studio:before { + content: "\e901"; +} +.icon.tileset:before { + content: "\e90a"; +} +.icon.point-line-poly:before { + content: "\e90b"; +} + +/* ------------------------------------------------------- */ +/* after */ +/* ------------------------------------------------------- */ +.rcon.map:after { + content: "\e900"; +} +.rcon.studio:after { + content: "\e901"; +} +.rcon.analytics:after { + content: "\e902"; +} +.rcon.coding:after { + content: "\e903"; +} +.rcon.bike:after { + content: "\e904"; +} +.rcon.car:after { + content: "\e905"; +} +.rcon.drone:after { + content: "\e906"; +} +.rcon.walk:after { + content: "\e907"; +} +.rcon.certificate:after { + content: "\e908"; +} +.rcon.server:after { + content: "\e909"; +} +.rcon.caret-down:after { + content: "\e6a5"; +} +.rcon.caret-left:after { + content: "\e6a6"; +} +.rcon.caret-right:after { + content: "\e6a7"; +} +.rcon.caret-up:after { + content: "\e6a8"; +} +.rcon.step-ramp:after { + content: "\e69c"; +} +.rcon.smooth-ramp:after { + content: "\e69d"; +} +.rcon.bug:after { + content: "\e69e"; +} +.rcon.bell:after { + content: "\e69f"; +} +.rcon.polygon:after { + content: "\e600"; +} +.rcon.minus-document:after { + content: "\e601"; +} +.rcon.plus-document:after { + content: "\e602"; +} +.rcon.check-document:after { + content: "\e603"; +} +.rcon.grid:after { + content: "\e604"; +} +.rcon.osm:after { + content: "\e605"; +} +.rcon.at:after { + content: "\e606"; +} +.rcon.history:after { + content: "\e607"; +} +.rcon.palette:after { + content: "\e608"; +} +.rcon.sun:after { + content: "\e609"; +} +.rcon.account:after { + content: "\e60a"; +} +.rcon.adjust-stroke:after { + content: "\e60b"; +} +.rcon.alert:after { + content: "\e60c"; +} +.rcon.android:after { + content: "\e60d"; +} +.rcon.antialias:after { + content: "\e60e"; +} +.rcon.apple:after { + content: "\e60f"; +} +.rcon.arrive:after { + content: "\e610"; +} +.rcon.arrowright:after { + content: "\e611"; +} +.rcon.bear-left:after { + content: "\e612"; +} +.rcon.bear-right:after { + content: "\e613"; +} +.rcon.bolt:after { + content: "\e614"; +} +.rcon.book:after { + content: "\e615"; +} +.rcon.bookmark:after { + content: "\e616"; +} +.rcon.brackets:after { + content: "\e617"; +} +.rcon.building:after { + content: "\e618"; +} +.rcon.cap-butt:after { + content: "\e619"; +} +.rcon.cap-round:after { + content: "\e61a"; +} +.rcon.cap-square:after { + content: "\e61b"; +} +.rcon.cart:after { + content: "\e61c"; +} +.rcon.check:after { + content: "\e61d"; +} +.rcon.clipboard:after { + content: "\e61e"; +} +.rcon.close:after { + content: "\e61f"; +} +.rcon.x:after { + content: "\e61f"; +} +.rcon.cloud:after { + content: "\e620"; +} +.rcon.compass:after { + content: "\e621"; +} +.rcon.contact:after { + content: "\e622"; +} +.rcon.creditcard:after { + content: "\e623"; +} +.rcon.cross-edge:after { + content: "\e624"; +} +.rcon.crosshair:after { + content: "\e625"; +} +.rcon.dasharray:after { + content: "\e626"; +} +.rcon.dashboard:after { + content: "\e627"; +} +.rcon.data:after { + content: "\e628"; +} +.rcon.depart:after { + content: "\e629"; +} +.rcon.document:after { + content: "\e62a"; +} +.rcon.down:after { + content: "\e62b"; +} +.rcon.duplicate:after { + content: "\e62c"; +} +.rcon.en:after { + content: "\e62d"; +} +.rcon.enter-roundabout:after { + content: "\e62e"; +} +.rcon.eye:after { + content: "\e62f"; +} +.rcon.facebook:after { + content: "\e630"; +} +.rcon.floppy:after { + content: "\e631"; +} +.rcon.folder:after { + content: "\e632"; +} +.rcon.nofolder:after { + content: "\e6a9"; +} +.rcon.font:after { + content: "\e633"; +} +.rcon.forward:after { + content: "\e634"; +} +.rcon.foursquare:after { + content: "\e635"; +} +.rcon.fullscreen:after { + content: "\e636"; +} +.rcon.gap-width:after { + content: "\e637"; +} +.rcon.github:after { + content: "\e638"; +} +.rcon.gl:after { + content: "\e639"; +} +.rcon.globe:after { + content: "\e63a"; +} +.rcon.graph:after { + content: "\e63b"; +} +.rcon.hand:after { + content: "\e63c"; +} +.rcon.harddrive:after { + content: "\e63d"; +} +.rcon.heart:after { + content: "\e63e"; +} +.rcon.help:after { + content: "\e63f"; +} +.rcon.home:after { + content: "\e640"; +} +.rcon.info:after { + content: "\e641"; +} +.rcon.inspect:after { + content: "\e642"; +} +.rcon.join-miter:after { + content: "\e643"; +} +.rcon.join-bevel:after { + content: "\e644"; +} +.rcon.join-round:after { + content: "\e645"; +} +.rcon.l-r-arrow:after { + content: "\e646"; +} +.rcon.land:after { + content: "\e647"; +} +.rcon.landuse:after { + content: "\e648"; +} +.rcon.layers:after { + content: "\e649"; +} +.rcon.leaflet:after { + content: "\e64a"; +} +.rcon.levels:after { + content: "\e64b"; +} +.rcon.lifebuoy:after { + content: "\e64c"; +} +.rcon.line-miter-limit:after { + content: "\e64d"; +} +.rcon.line-round-limit:after { + content: "\e64e"; +} +.rcon.link:after { + content: "\e64f"; +} +.rcon.linkedin:after { + content: "\e650"; +} +.rcon.lock:after { + content: "\e651"; +} +.rcon.logout:after { + content: "\e652"; +} +.rcon.mail:after { + content: "\e653"; +} +.rcon.mapbox:after { + content: "\e654"; +} +.rcon.marker:after { + content: "\e655"; +} +.rcon.icon-halo:after { + content: "\e6a2"; +} +.rcon.symbol-layer:after { + content: "\e6aa"; +} +.rcon.max-text-angle:after { + content: "\e656"; +} +.rcon.menu:after { + content: "\e657"; +} +.rcon.minus:after { + content: "\e658"; +} +.rcon.mobile:after { + content: "\e659"; +} +.rcon.mt:after { + content: "\e65a"; +} +.rcon.next:after { + content: "\e65b"; +} +.rcon.noeye:after { + content: "\e65c"; +} +.rcon.opacity:after { + content: "\e65d"; +} +.rcon.package:after { + content: "\e65e"; +} +.rcon.paint:after { + content: "\e65f"; +} +.rcon.pencil:after { + content: "\e660"; +} +.rcon.picture:after { + content: "\e661"; +} +.rcon.plus:after { + content: "\e662"; +} +.rcon.point-line:after { + content: "\e663"; +} +.rcon.point:after { + content: "\e664"; +} +.rcon.polyline:after { + content: "\e665"; +} +.rcon.prev:after { + content: "\e666"; +} +.rcon.printer:after { + content: "\e667"; +} +.rcon.raster:after { + content: "\e668"; +} +.rcon.redo:after { + content: "\e669"; +} +.rcon.refresh:after { + content: "\e66a"; +} +.rcon.return:after { + content: "\e66b"; +} +.rcon.rotate:after { + content: "\e66c"; +} +.rcon.rss:after { + content: "\e66d"; +} +.rcon.satellite:after { + content: "\e66e"; +} +.rcon.search:after { + content: "\e66f"; +} +.rcon.share:after { + content: "\e670"; +} +.rcon.sharp-left:after { + content: "\e671"; +} +.rcon.sharp-right:after { + content: "\e672"; +} +.rcon.sprocket:after { + content: "\e673"; +} +.rcon.stackoverflow:after { + content: "\e674"; +} +.rcon.star:after { + content: "\e675"; +} +.rcon.street:after { + content: "\e676"; +} +.rcon.text-align-bottom-center:after { + content: "\e677"; +} +.rcon.text-align-bottom-left:after { + content: "\e678"; +} +.rcon.text-align-bottom-right:after { + content: "\e679"; +} +.rcon.text-align-center-center:after { + content: "\e67a"; +} +.rcon.text-align-center-left:after { + content: "\e67b"; +} +.rcon.text-align-center-right:after { + content: "\e67c"; +} +.rcon.text-align-overlap:after { + content: "\e67d"; +} +.rcon.text-align-top-center:after { + content: "\e67e"; +} +.rcon.text-align-top-left:after { + content: "\e67f"; +} +.rcon.text-align-top-right:after { + content: "\e680"; +} +.rcon.text-halo:after { + content: "\e6a3"; +} +.rcon.text-halo-width:after { + content: "\e681"; +} +.rcon.text-ignore-placement:after { + content: "\e682"; +} +.rcon.text-justify-center:after { + content: "\e683"; +} +.rcon.text-justify-left:after { + content: "\e684"; +} +.rcon.text-justify-right:after { + content: "\e685"; +} +.rcon.text-letter-spacing:after { + content: "\e686"; +} +.rcon.text-line-height:after { + content: "\e687"; +} +.rcon.text-max-width:after { + content: "\e688"; +} +.rcon.text-padding:after { + content: "\e689"; +} +.rcon.text-rotate:after { + content: "\e68a"; +} +.rcon.text-size:after { + content: "\e68b"; +} +.rcon.tilemill:after { + content: "\e68c"; +} +.rcon.time:after { + content: "\e68d"; +} +.rcon.tooltip:after { + content: "\e68e"; +} +.rcon.transform-lowercase:after { + content: "\e68f"; +} +.rcon.transform-uppercase:after { + content: "\e690"; +} +.rcon.trash:after { + content: "\e691"; +} +.rcon.position:after { + content: "\e6a4"; +} +.rcon.turn-left:after { + content: "\e692"; +} +.rcon.turn-right:after { + content: "\e693"; +} +.rcon.twitter:after { + content: "\e694"; +} +.rcon.tx:after { + content: "\e695"; +} +.rcon.u-d-arrow:after { + content: "\e696"; +} +.rcon.u-turn:after { + content: "\e697"; +} +.rcon.undo:after { + content: "\e698"; +} +.rcon.up:after { + content: "\e699"; +} +.rcon.video:after { + content: "\e69a"; +} +.rcon.water:after { + content: "\e69b"; +} +.rcon.quotes:after { + content: "\e6a0"; +} +.rcon.number:after { + content: "\e6a1"; +} +.rcon.line:after { + content: "\e6ab"; +} +.rcon.fill:after { + content: "\e6ac"; +} +.rcon.map:after { + content: "\e900"; +} +.rcon.studio:after { + content: "\e901"; +} +.rcon.tileset:after { + content: "\e90a"; +} +.rcon.point-line-poly:after { + content: "\e90b"; +} + +/* Multicolored icons */ +.icon.checkmark:before { + background:transparent url(base@2x.png) 0px 0px no-repeat; + -webkit-background-size:100px 350px; + background-size:100px 350px; +} + +/* Credit card icons */ +.credit-card { + background:url(credit-cards@2x.png) 0 0 no-repeat; + height:30px; + width:45px; + display:inline-block; + vertical-align:top; + -webkit-background-size:320px 70px; + background-size:320px 70px; + } + .credit-card.visa { background-position:0 0; } + .credit-card.mastercard { background-position:-55px 0; } + .credit-card.american-express { background-position:-110px 0; } + .credit-card.jcb { background-position:-165px 0; } + .credit-card.discover { background-position:-220px 0; } + .credit-card.diners-club { background-position:-275px 0; } + + .credit-card.disabled.visa { background-position:0 -40px; } + .credit-card.disabled.mastercard { background-position:-55px -40px; } + .credit-card.disabled.american-express { background-position:-110px -40px; } + .credit-card.disabled.jcb { background-position:-165px -40px; } + .credit-card.disabled.discover { background-position:-220px -40px; } + .credit-card.disabled.diners-club { background-position:-275px -40px; } + +/* Components +------------------------------------------------------- */ +.box { + margin-bottom:20px; + border:1px solid rgba(0,0,0,0.10); + } + .box:last-child { margin-bottom: 0;} + .box figure, + .box .box-heading { + border-bottom:1px solid rgba(0,0,0,0.1); + } + .box figure:last-child { + border-bottom:none; + } + +/* Modals */ +.modal-content { + background:rgba(0,0,0,0.50); + position:fixed; + overflow: auto; + top:0; + left:0; + right:0; + opacity:0; + height: 0; + z-index:99999; + pointer-events: none; + } +.modal-content.active { + height: auto; + bottom: 0; + opacity:1; + pointer-events: all; + } +.modal-popup { + opacity:0; + position:absolute; + overflow-y:auto; + height:100%; + left:0; + right:0; + } +.modal-content .modal-body { + border-radius: 3px; + overflow: hidden; + margin-top:40px; + margin-left:auto; + margin-right:auto; + float:none; + } +.modal-auth .sliding { + height:100%; + overflow-y:auto; + } +.modal-auth .sliding, +.modal-auth .sliding > * { width:100%; } + +/* Ensures layers modals stack correctly. */ +.modal-popup { z-index: 1; } + +/* Keeps sign in screen from scrolling based on sign up modal's height. */ +.modal-auth .sliding .active2 { overflow-y:hidden; } + +/* Hide older modals when younger modals are in dom. */ +.modal-popup:last-child { opacity:1; } + +/* Notifications */ +.note { + background:#f0f8fc; + padding:10px; + } + .note.error { background:#f9886c; } + .note.warning { background:#f1f075; } + +.prose .note, +.note.prose { + margin-bottom:20px; + } + +.prose .note:last-child, +.note.prose:last-child { + margin-bottom:0; + } + +.note pre { background:#fff; } + +/* Columns +------------------------------------------------------- */ +.limiter { + width:83.3333%; + max-width:1000px; + margin-left:auto; + margin-right:auto; + } + +.col0 { float:left; width:04.1666%; max-width:50px; } +.col1 { float:left; width:08.3333%; max-width:100px; } +.col2 { float:left; width:16.6666%; max-width:200px; } +.col3 { float:left; width:25.0000%; max-width:300px; } +.col4 { float:left; width:33.3333%; max-width:400px; } +.col5 { float:left; width:41.6666%; max-width:500px; } +.col6 { float:left; width:50.0000%; max-width:600px; } +.col7 { float:left; width:58.3333%; max-width:700px; } +.col8 { float:left; width:66.6666%; max-width:800px; } +.col9 { float:left; width:75.0000%; max-width:900px; } +.col10 { float:left; width:83.3333%; max-width:1000px; } +.col11 { float:left; width:91.6666%; max-width:1100px; } +.col12 { width:100%; display:block; } + +.fifths > * { + float: left; + width: 20%; +} + +.unlimiter .col0, +.unlimiter .col1, +.unlimiter .col2, +.unlimiter .col3, +.unlimiter .col4, +.unlimiter .col5, +.unlimiter .col6, +.unlimiter .col7, +.unlimiter .col8, +.unlimiter .col9, +.unlimiter .col10, +.unlimiter .col11 { + max-width: none; +} + +.margin0 { margin-left:04.1666%; } +.margin1 { margin-left:08.3333%; } +.margin2 { margin-left:16.6666%; } +.margin3 { margin-left:25.0000%; } +.margin4 { margin-left:33.3333%; } +.margin5 { margin-left:41.6666%; } +.margin6 { margin-left:50.0000%; } +.margin7 { margin-left:58.3333%; } +.margin8 { margin-left:66.6666%; } +.margin9 { margin-left:75.0000%; } +.margin10 { margin-left:83.3333%; } +.margin11 { margin-left:91.6666%; } +.margin12 { margin-left:100.0000%; } + +/* reverse margins on right-floated elements */ +.margin0r { margin-right:04.1666%; } +.margin1r { margin-right:08.3333%; } +.margin2r { margin-right:16.6666%; } +.margin3r { margin-right:25.0000%; } +.margin4r { margin-right:33.3333%; } +.margin5r { margin-right:41.6666%; } +.margin6r { margin-right:50.0000%; } +.margin7r { margin-right:58.3333%; } +.margin8r { margin-right:66.6666%; } +.margin9r { margin-right:75.0000%; } +.margin10r { margin-right:83.3333%; } +.margin11r { margin-right:91.6666%; } +.margin12r { margin-right:100.0000%; } + +.row0 { height: 0px;} +.row1 { height: 40px;} +.row2 { height: 80px;} +.row3 { height: 120px;} +.row4 { height: 160px;} +.row5 { height: 200px;} +.row6 { height: 240px;} +.row7 { height: 280px;} +.row8 { height: 320px;} +.row9 { height: 360px;} +.row10 { height: 400px;} +.row11 { height: 440px;} +.row12 { height: 480px;} +.row13 { height: 520px;} +.row14 { height: 560px;} +.row15 { height: 600px;} +.row16 { height: 640px;} + +/* Pixel grid +-------------------------------------------------- */ + +.width4 { width: 40px; float: left; } +.width8 { width: 80px; float: left; } +.width12 { width: 120px; float: left; } +.width16 { width: 160px; float: left; } +.width20 { width: 200px; float: left; } +.width24 { width: 240px; float: left; } +.width28 { width: 280px; float: left; } +.width32 { width: 320px; float: left; } +.width36 { width: 360px; float: left; } +.width40 { width: 400px; float: left; } + + +/* DEPRECATED - DO NOT USE +-------------------------------------------------- */ + +.fcol000 { width: 5px; float: left; } +.fcol00 { width: 10px; float: left; } +.fcol0 { width: 20px; float: left; } +.fcol1 { width: 30px; float: left; } +.fcol2 { width: 60px; float: left; } +.fcol3 { width: 90px; float: left; } +.fcol4 { width: 120px; float: left; } +.fcol5 { width: 150px; float: left; } +.fcol6 { width: 180px; float: left; } +.fcol7 { width: 210px; float: left; } +.fcol8 { width: 240px; float: left; } +.fcol9 { width: 270px; float: left; } +.fcol10 { width: 300px; float: left; } +.fcol11 { width: 330px; float: left; } +.fcol12 { width: 360px; float: left; } + +.fmargin000 { margin-left: 5px; } +.fmargin00 { margin-left: 10px; } +.fmargin0 { margin-left: 20px; } +.fmargin1 { margin-left: 30px; } +.fmargin2 { margin-left: 60px; } +.fmargin3 { margin-left: 90px; } +.fmargin4 { margin-left: 120px; } +.fmargin5 { margin-left: 150px; } +.fmargin6 { margin-left: 180px; } +.fmargin7 { margin-left: 210px; } +.fmargin8 { margin-left: 240px; } +.fmargin9 { margin-left: 270px; } +.fmargin10 { margin-left: 300px; } +.fmargin11 { margin-left: 330px; } +.fmargin12 { margin-left: 360px; } +.fmargin13 { margin-left: 390px; } +.fmargin14 { margin-left: 420px; } +.fmargin15 { margin-left: 450px; } +.fmargin16 { margin-left: 480px; } + +.fmargin00r { margin-right: 10px; } +.fmargin0r { margin-right: 20px; } +.fmargin1r { margin-right: 30px; } +.fmargin2r { margin-right: 60px; } +.fmargin3r { margin-right: 90px; } + +/* Margins +------------------------------------------------------- */ + +.space-left0 { margin-left: 5px;} +.space-left1 { margin-left: 10px;} +.space-left2 { margin-left: 20px;} +.space-left3 { margin-left: 30px;} +.space-left4 { margin-left: 40px;} +.space-left8 { margin-left: 80px;} +.space-left12 { margin-left: 120px;} +.space-left16 { margin-left: 160px;} +.space-left20 { margin-left: 200px;} +.space-left24 { margin-left: 240px;} + +.space-right0 { margin-right: 5px;} +.space-right1 { margin-right: 10px;} +.space-right2 { margin-right: 20px;} +.space-right3 { margin-right: 30px;} +.space-right4 { margin-right: 40px;} +.space-right8 { margin-right: 80px;} +.space-right12 { margin-right: 120px;} +.space-right16 { margin-right: 160px;} +.space-right20 { margin-right: 200px;} +.space-right24 { margin-right: 240px;} + +.space-bottom0 { margin-bottom: 5px;} +.space-bottom1 { margin-bottom: 10px;} +.space-bottom, /* deprecated, use space-bottom2 */ +.space-bottom2 { margin-bottom: 20px;} +.space-bottom4 { margin-bottom: 40px;} +.space-bottom8 { margin-bottom: 80px;} + +.space-top0 { margin-top: 5px;} +.space-top1 { margin-top: 10px;} +.space-top2 { margin-top: 20px;} +.space-top4 { margin-top: 40px;} +.space-top8 { margin-top: 80px;} + +/* Padding +------------------------------------------------------- */ +.pad0 { padding:5px; } +.pad0y { padding-top:5px; padding-bottom:5px; } +.pad0x { padding-right:5px; padding-left:5px; } + +.pad1 { padding:10px; } +.pad2 { padding:20px; } +.pad4 { padding:40px; } + +.pad1x { padding-left: 10px; padding-right: 10px;} +.pad2x { padding-left: 20px; padding-right: 20px;} +.pad4x { padding-left: 40px; padding-right: 40px;} + +.pad1y { padding-top: 10px; padding-bottom: 10px;} +.pad2y { padding-top: 20px; padding-bottom: 20px;} +.pad4y { padding-top: 40px; padding-bottom: 40px;} + +.pad8 { padding: 80px; } +.pad8y { padding-top: 80px; padding-bottom: 80px;} +.pad8x { padding-left: 80px; padding-right: 80px;} + +/* Keylines +------------------------------------------------------- */ +.keyline-all { border:1px solid rgba(0,0,0,0.10); } +.keyline-top { border-top:1px solid rgba(0,0,0,0.10); } +.keyline-right { border-right:1px solid rgba(0,0,0,0.10); } +.keyline-bottom { border-bottom:1px solid rgba(0,0,0,0.10); } +.keyline-left { border-left:1px solid rgba(0,0,0,0.10); } + +.dark .keyline-all { border:1px solid rgba(255,255,255,0.25); } +.dark .keyline-top { border-top:1px solid rgba(255,255,255,0.25); } +.dark .keyline-right { border-right:1px solid rgba(255,255,255,0.25); } +.dark .keyline-bottom { border-bottom:1px solid rgba(255,255,255,0.25); } +.dark .keyline-left { border-left:1px solid rgba(255,255,255,0.25); } + +/* Absolute containers +------------------------------------------------------- */ +.pin-top, +.pin-right, +.pin-bottom, +.pin-left, +.pin-topleft, +.pin-topright, +.pin-bottomleft, +.pin-bottomright { + position:absolute; + } + .pin-bottom { right:0; bottom:0; left:0; } + .pin-top { top:0; right:0; left:0; } + .pin-left { top:0; bottom:0; left:0; } + .pin-right { top:0; right:0; bottom:0; } + .pin-bottomright { bottom:0; right:0; } + .pin-bottomleft { bottom:0; left:0; } + .pin-topright { top:0; right:0; } + .pin-topleft { top:0; left:0; } + +/* Fixed containers +------------------------------------------------------- */ +.fixed-top, +.fixed-right, +.fixed-bottom, +.fixed-left, +.fixed-topleft, +.fixed-topright, +.fixed-bottomleft, +.fixed-bottomright { + position:fixed; + } + .fixed-bottom { right:0; bottom:0; left:0; } + .fixed-top { top:0; right:0; left:0; } + .fixed-left { top:0; bottom:0; left:0; } + .fixed-right { top:0; right:0; bottom:0; } + .fixed-bottomright { bottom:0; right:0; } + .fixed-bottomleft { bottom:0; left:0; } + .fixed-topright { top:0; right:0; } + .fixed-topleft { top:0; left:0; } + + + +/* Fills +-------------------------------------------------------- */ +.fill-dark { background-color:#404040; } +.fill-gray, +.fill-grey { background:#eee; } +.fill-grey-dark, +.fill-gray-dark { background:#404040; } +.fill-white { background:#fff; } +.fill-light { background:#f8f8f8; } +/* deprecated, use fill-cyan */ +.fill-blue-light { background:#52a1d8; } +.fill-cyan { background:#3bb2d0; } +.fill-midnight { background:#142736; } + +.fill-blue { background:#3887be; } +.fill-denim { background:#50667f; } +.fill-navy { background:#28353d; } +.fill-navy-dark { background:#222B30; } +.fill-purple { background:#8a8acb; } +.fill-green { background:#56b881; } +.fill-yellow { background:#f1f075; } +.fill-orange { background:#f9886c; } + +.fill-darkblue { background-color:#223b53; } +.fill-red { background-color:#e55e5e; } +.fill-teal { background-color:#41afa5; } +.fill-pink { background-color:#ed6498; } +.fill-mustard { background-color:#fbb03b; } + +.fill-darken0 { background:rgba(0,0,0,0.05); } +.fill-darken1 { background:rgba(0,0,0,0.25); } +.fill-darken2 { background:rgba(0,0,0,0.50); } +.fill-darken3 { background:rgba(0,0,0,0.75); } + +.fill-lighten0 { background:rgba(255,255,255,0.10); } +.fill-lighten1 { background:rgba(255,255,255,0.25); } +.fill-lighten2 { background:rgba(255,255,255,0.50); } +.fill-lighten3 { background:rgba(255,255,255,0.75); } + +.mb-logo { + background:#fff; + position:relative; + z-index:10; + } + +.mb-logo { + background:transparent url(base@2x.png) no-repeat 0 0; + display:inline-block; + vertical-align:top; + height:40px; + width:100px; + text-indent:-999em; + overflow:hidden; + -webkit-background-size:100px 350px; + background-size:100px 350px; + } + .dark .mb-logo, + .mb-logo.white { background-position:0px -60px; } + .mb-logo.quiet { background-position:0px -120px; } + .mb-logo.small { + width:65px; + height:20px; + background-position:0 -180px; + } + .mb-logo.small.white { background-position:0 -240px;} + .mb-logo.small.quiet { background-position:0 -300px;} + +/* Pygments Syntax Highlighting +------------------------------------------------------- */ +pre .hll { background-color:#ffffcc } + +/* No Styling, Just Default: + + pre .nx, Normal Text + pre .ni Name.Entity + pre .nf Name.Entity + pre .no Name.Constant +*/ + +/* Comments */ +pre .o, /* Operator */ +pre .c, +pre .c1, +pre .cp, +pre .cm { color:#999; font-style:italic; } +pre .err { color:#F00000; background-color:#F0A0A0 } /* Error */ + +pre .k { color:#404040; font-weight:bold; } /* Keyword */ +pre .css .k { font-weight:normal; } + +pre .cs { color:#404040; font-style:italic; } /* Comment.Special */ +pre .gd { color:#A00000; } /* Generic.Deleted */ +pre .ge { font-style:italic } /* Generic.Emph */ +pre .gs { font-weight:bold; } /* Generic.Strong */ +pre .gr { color:#FF0000; } /* Generic.Error */ +pre .gh { color:#000080; } /* Generic.Heading */ +pre .gi { color:#00A000; } /* Generic.Inserted */ +pre .go { color:#808080; } /* Generic.Output */ +pre .gp { color:#c65d09; } /* Generic.Prompt */ +pre .gu { color:#800080; } /* Generic.Subheading */ +pre .gt { color:#0040D0; } /* Generic.Traceback */ +pre .kc { color:#D24400; } /* Keyword.Constant */ + +/* Keyword.Declaration + * Keyword.Namespace + * Keyword.Reserved */ +pre .kd, +pre .kn, +pre .kr, +pre .nt { color:#0B5A91; } /* Name.Tag */ + +/* Literal.Number */ +pre .mh, +pre .mo, +pre .il, +pre .mi, +pre .kt, +pre .mf, +pre .nl, /* Name.Label */ +pre .na, /* Name.Attribute */ +pre .m { color:#0C9DC2; } /* Keyword.Type */ +pre .kp { color:#0080f0; } /* Keyword.Pseudo */ + +pre .nc { color:#DF6637; } /* Name.Class */ +pre .css .nc { color:#75A21C; } + +pre .nd { color:#505050; } /* Name.Decorator */ +pre .ne { color:#F00000; } /* Name.Exception */ + +pre .nn { color:#0e84b5; } /* Name.Namespace */ + +pre .nv { color:#003060; } /* Name.Variable */ +pre .ow { color:#404040; } /* Operator.Word */ +pre .w { color:#bbbbbb; } /* Text.Whitespace */ +pre .sc { color:#8080F0; } /* Literal.String.Char */ +pre .sd { color:#D04020; } /* Literal.String.Doc */ + +/* Name.Builtin / Name.Builtin.Pseudo */ +pre .bp, +pre .nb { color:#007020; } + +/* Literal.String */ +pre .s, +pre .sh, +pre .sb, +pre .s1, +pre .sr, +pre .se { color:#75A21C; } + +pre .si { background-color:#eee; } /* Literal.String.Interpol */ +pre .p { color:#444444; } /* Normal Text */ +pre .ss { color:#f0c080; } /* Literal.String.Symbol */ +pre .vc { color:#c0c0f0; } /* Name.Variable.Class */ +pre .vg { color:#f08040; } /* Name.Variable.Global */ +pre .vi { color:#a0a0f0; } /* Name.Variable.Instance */ + +/* CSS Animations/Transitions +-------------------------------------------------- */ +.animate { + -webkit-transition:all .125s; + -moz-transition:all .125s; + -ms-transition:all .125s; + transition:all .125s; + } + +.offcanvas-top { + -webkit-transform:translateY(-100%); + -moz-transform:translateY(-100%); + -ms-transform:translateY(-100%); + transform:translateY(-100%); + } +.offcanvas-right { + -webkit-transform:translateX(100%); + -moz-transform:translateX(100%); + -ms-transform:translateX(100%); + transform:translateX(100%); + } +.offcanvas-bottom { + -webkit-transform:translateY(100%); + -moz-transform:translateY(100%); + -ms-transform:translateY(100%); + transform:translateY(100%); + } +.offcanvas-left { + -webkit-transform:translateX(-100%); + -moz-transform:translateX(-100%); + -ms-transform:translateX(-100%); + transform:translateX(-100%); + } + +.offcanvas-top.active, +.offcanvas-bottom.active, +.offcanvas-top:target, +.offcanvas-bottom:target { + -webkit-transform:translateY(0); + -moz-transform:translateY(0); + -ms-transform:translateY(0); + transform:translateY(0); + } + +.offcanvas-left.active, +.offcanvas-right.active, +.offcanvas-left:target, +.offcanvas-right:target { + -webkit-transform:translateX(0); + -moz-transform:translateX(0); + -ms-transform:translateX(0); + transform:translateX(0); + } + +/* Sliding panes */ +.sliding { position:relative; } +.sliding > * { position:absolute; } +.sliding.h > * { + -webkit-transform:translateX(-100%); + -moz-transform:translateX(-100%); + -ms-transform:translateX(-100%); + transform:translateX(-100%); + } +.sliding.v > * { + -webkit-transform:translateY(-100%); + -moz-transform:translateY(-100%); + -ms-transform:translateY(-100%); + transform:translateY(-100%); + } +.sliding.h.active1 > *:nth-child( 1), +.sliding.h.active2 > *:nth-child( 2), +.sliding.h.active3 > *:nth-child( 3), +.sliding.h.active4 > *:nth-child( 4), +.sliding.h.active5 > *:nth-child( 5), +.sliding.h.active6 > *:nth-child( 6), +.sliding.h.active7 > *:nth-child( 7), +.sliding.h.active8 > *:nth-child( 8), +.sliding.h.active9 > *:nth-child( 9) { + -webkit-transform:translateX(0%); + -moz-transform:translateX(0%); + -ms-transform:translateX(0%); + transform:translateX(0%); + } +.sliding.h.active1 > *:nth-child( n+2), +.sliding.h.active2 > *:nth-child( n+3), +.sliding.h.active3 > *:nth-child( n+4), +.sliding.h.active4 > *:nth-child( n+5), +.sliding.h.active5 > *:nth-child( n+6), +.sliding.h.active6 > *:nth-child( n+7), +.sliding.h.active7 > *:nth-child( n+8), +.sliding.h.active8 > *:nth-child( n+9), +.sliding.h.active9 > *:nth-child(n+10) { + -webkit-transform:translateX(100%); + -moz-transform:translateX(100%); + -ms-transform:translateX(100%); + transform:translateX(100%); + } + +.sliding.v.active1 > *:nth-child( 1), +.sliding.v.active2 > *:nth-child( 2), +.sliding.v.active3 > *:nth-child( 3), +.sliding.v.active4 > *:nth-child( 4), +.sliding.v.active5 > *:nth-child( 5), +.sliding.v.active6 > *:nth-child( 6), +.sliding.v.active7 > *:nth-child( 7), +.sliding.v.active8 > *:nth-child( 8), +.sliding.v.active9 > *:nth-child( 9), +.sliding.v.active10> *:nth-child( 10), +.sliding.v.active11> *:nth-child( 11), +.sliding.v.active12> *:nth-child( 12), +.sliding.v.active13> *:nth-child( 13), +.sliding.v.active14> *:nth-child( 14), +.sliding.v.active15> *:nth-child( 15), +.sliding.v.active16> *:nth-child( 16), +.sliding.v.active17> *:nth-child( 17), +.sliding.v.active18> *:nth-child( 18), +.sliding.v.active19> *:nth-child( 19), +.sliding.v.active20> *:nth-child( 20) { + -webkit-transform:translateY(0%); + -moz-transform:translateY(0%); + -ms-transform:translateY(0%); + transform:translateY(0%); + } +.sliding.v.active1 > *:nth-child( n+2), +.sliding.v.active2 > *:nth-child( n+3), +.sliding.v.active3 > *:nth-child( n+4), +.sliding.v.active4 > *:nth-child( n+5), +.sliding.v.active5 > *:nth-child( n+6), +.sliding.v.active6 > *:nth-child( n+7), +.sliding.v.active7 > *:nth-child( n+8), +.sliding.v.active8 > *:nth-child( n+9), +.sliding.v.active9 > *:nth-child(n+10), +.sliding.v.active10> *:nth-child(n+11), +.sliding.v.active11> *:nth-child(n+12), +.sliding.v.active12> *:nth-child(n+13), +.sliding.v.active13> *:nth-child(n+14), +.sliding.v.active14> *:nth-child(n+15), +.sliding.v.active15> *:nth-child(n+16), +.sliding.v.active16> *:nth-child(n+17), +.sliding.v.active17> *:nth-child(n+18), +.sliding.v.active18> *:nth-child(n+19), +.sliding.v.active19> *:nth-child(n+20), +.sliding.v.active20> *:nth-child(n+21) { + -webkit-transform:translateY(100%); + -moz-transform:translateY(100%); + -ms-transform:translateY(100%); + transform:translateY(100%); + } + +/* Markup free clearing +Details: http://www.positioniseverything.net/easyclearing.html +------------------------------------------------------- */ +.clearfix { display:block; } +.clearfix:after { + content:''; + display:block; + height:0; + clear:both; + visibility:hidden; + } + +/* Additional Utility Classes +------------------------------------------------------- */ +.fr { float:right; } +.fl { float:left; } +.unfloat { float:none; } +.dot { border-radius:50%; } +.quiet { color:#7f7f7f; color: rgba(0,0,0,.5); } +.dark .quiet { color: #7f7f7f; color: rgba(255,255,255,.5);} +.center { text-align:center; } +.contain { position:relative; } +.clip { overflow:hidden; } +.hidden.hidden { display:none; } +.text-left { text-align:left; } +.text-right { text-align:right; } +.space > * { margin-right:5px; } +.hide-tablet, .hide-mobile { display:block; } +.show-tablet, .show-mobile { display:none; } +.show-mobile { display:none; } +.show-mobile.inline { display:none; } +img.inline, .inline { display:inline-block; } +.break-word { word-wrap:break-word; } +.align-middle { vertical-align: middle;} +.align-top { vertical-align: top;} +.block { display:block; } +.scroll-h { overflow-x:auto; } +.scroll-v { overflow-y:auto; } +.capitalize { text-transform:capitalize; } +.z1 { z-index:1; } +.z2 { z-index:2; } +.z8 { z-index:8; } +.z10 { z-index:10; } +.z100 { z-index:100; } +.round { border-radius:3px; } +.round-top { border-radius:3px 3px 0 0; } +.round-right { border-radius:0 3px 3px 0; } +.round-bottom { border-radius:0 0 3px 3px; } +.round-left { border-radius:3px 0 0 3px; } +.round-topleft { border-top-left-radius: 3px;} +.round-bottomleft { border-bottom-left-radius: 3px;} +.round-topright { border-top-right-radius: 3px;} +.round-bottomright { border-bottom-right-radius: 3px;} +.shadow { box-shadow: 0 0 25px 0 rgba(0,0,0,0.15); } +.uppercase { text-transform: uppercase; } +.noevents { pointer-events: none;} + +.unround, +.pill.unround .unround { border-radius:0;} + +.caption { + display:block; + } + .prose .caption { + font-size: 12px; + margin: -20px 0 20px + } + +.truncate { + text-overflow:ellipsis; + white-space:nowrap; + overflow:hidden; + } + +/* Loading overlay +------------------------------------------------------- */ +.loading:after, +.loading:before { + content:''; + display:block; + position:absolute; + z-index:10; + } +.loading:before { + background:transparent; + left:0; + top:0; + width:100%; + height:100%; + } +.loading:after { + background:rgba(0,0,0,.2) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMzEyMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjUgcjEwMDQwIgogICB3aWR0aD0iMjQiCiAgIGhlaWdodD0iMjQiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImxvYWRzb3VyY2UyLnN2ZyI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMzEyOCI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczMxMjYiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMTgyIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjcwOCIKICAgICBpZD0ibmFtZWR2aWV3MzEyNCIKICAgICBzaG93Z3JpZD0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLWJib3g9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOnpvb209IjE2IgogICAgIGlua3NjYXBlOmN4PSI4Ljk3Nzk0NzciCiAgICAgaW5rc2NhcGU6Y3k9IjEwLjczMjQ3NiIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNDgyIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIxMjciCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMTIyIgogICAgIHNob3dndWlkZXM9ImZhbHNlIgogICAgIGlua3NjYXBlOmd1aWRlLWJib3g9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LXBhdGhzPSJ0cnVlIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwIgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIj4KICAgIDxpbmtzY2FwZTpncmlkCiAgICAgICB0eXBlPSJ4eWdyaWQiCiAgICAgICBpZD0iZ3JpZDMxMzIiCiAgICAgICBlbXBzcGFjaW5nPSI1IgogICAgICAgdmlzaWJsZT0idHJ1ZSIKICAgICAgIGVuYWJsZWQ9InRydWUiCiAgICAgICBzbmFwdmlzaWJsZWdyaWRsaW5lc29ubHk9InRydWUiCiAgICAgICBvcmlnaW54PSItMTQ4cHgiCiAgICAgICBvcmlnaW55PSItMzU4cHgiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIG9yaWVudGF0aW9uPSItMC43MDcxMDY3OCwwLjcwNzEwNjc4IgogICAgICAgcG9zaXRpb249IjEyLDEyIgogICAgICAgaWQ9Imd1aWRlNDEwNSIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8cGF0aAogICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MTI7bWFya2VyOm5vbmU7dmlzaWJpbGl0eTp2aXNpYmxlO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIKICAgICBkPSJNIDEyIDAgTCAxMiA1IEMgMTUuODY1OTkzIDUgMTkgOC4xMzQwMDY3IDE5IDEyIEwgMjQgMTIgQyAyNCA1LjM3MjU4MyAxOC42Mjc0MTcgMCAxMiAwIHogIgogICAgIGlkPSJwYXRoMzk1NiIgLz4KICA8cGF0aAogICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgc3R5bGU9Im9wYWNpdHk6MC40O2NvbG9yOiMwMDAwMDA7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxMjttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIgogICAgIGQ9Ik0gMTIsMCBDIDUuMzcyNTgzLDAgMCw1LjM3MjU4MyAwLDEyIGMgMCwzLjE4MjU5OCAxLjI0OTU2Myw2LjI0OTU2MyAzLjUsOC41IDIuMjUwNDM3LDIuMjUwNDM3IDUuMzE3NDAyLDMuNSA4LjUsMy41IDMuMTgyNTk4LDAgNi4yNDk1NjMsLTEuMjQ5NTYzIDguNSwtMy41IEMgMjIuNzUwNDM3LDE4LjI0OTU2MyAyNCwxNS4xODI1OTggMjQsMTIgbCAtNSwwIGMgMCwzLjg2NTk5MyAtMy4xMzQwMDcsNyAtNyw3IEMgOC4xMzQwMDY4LDE5IDUsMTUuODY1OTkzIDUsMTIgNSw4LjEzNDAwNjcgOC4xMzQwMDY4LDUgMTIsNSB6IgogICAgIGlkPSJwYXRoMzE3NCIKICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2NjY2NjY2NjIiAvPgo8L3N2Zz4K) 50% 50% no-repeat; + left:50%; + top:50%; + margin:-20px 0 0 -20px; + width:40px; + height:40px; + border-radius:50%; + -webkit-animation: rotate 1s linear infinite; + -moz-animation: rotate 1s linear infinite; + -ms-animation: rotate 1s linear infinite; + animation: rotate 1s linear infinite; + } + +.spinner:after { + content:''; + position:absolute; + right:5px; + top:50%; + border-radius:50%; + background:rgba(0,0,0,.5) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMzEyMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjUgcjEwMDQwIgogICB3aWR0aD0iMjQiCiAgIGhlaWdodD0iMjQiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImxvYWRzb3VyY2UyLnN2ZyI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMzEyOCI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczMxMjYiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMTgyIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjcwOCIKICAgICBpZD0ibmFtZWR2aWV3MzEyNCIKICAgICBzaG93Z3JpZD0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLWJib3g9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOnpvb209IjE2IgogICAgIGlua3NjYXBlOmN4PSI4Ljk3Nzk0NzciCiAgICAgaW5rc2NhcGU6Y3k9IjEwLjczMjQ3NiIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNDgyIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIxMjciCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMTIyIgogICAgIHNob3dndWlkZXM9ImZhbHNlIgogICAgIGlua3NjYXBlOmd1aWRlLWJib3g9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LXBhdGhzPSJ0cnVlIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwIgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIj4KICAgIDxpbmtzY2FwZTpncmlkCiAgICAgICB0eXBlPSJ4eWdyaWQiCiAgICAgICBpZD0iZ3JpZDMxMzIiCiAgICAgICBlbXBzcGFjaW5nPSI1IgogICAgICAgdmlzaWJsZT0idHJ1ZSIKICAgICAgIGVuYWJsZWQ9InRydWUiCiAgICAgICBzbmFwdmlzaWJsZWdyaWRsaW5lc29ubHk9InRydWUiCiAgICAgICBvcmlnaW54PSItMTQ4cHgiCiAgICAgICBvcmlnaW55PSItMzU4cHgiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIG9yaWVudGF0aW9uPSItMC43MDcxMDY3OCwwLjcwNzEwNjc4IgogICAgICAgcG9zaXRpb249IjEyLDEyIgogICAgICAgaWQ9Imd1aWRlNDEwNSIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8cGF0aAogICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MTI7bWFya2VyOm5vbmU7dmlzaWJpbGl0eTp2aXNpYmxlO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIKICAgICBkPSJNIDEyIDAgTCAxMiA1IEMgMTUuODY1OTkzIDUgMTkgOC4xMzQwMDY3IDE5IDEyIEwgMjQgMTIgQyAyNCA1LjM3MjU4MyAxOC42Mjc0MTcgMCAxMiAwIHogIgogICAgIGlkPSJwYXRoMzk1NiIgLz4KICA8cGF0aAogICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgc3R5bGU9Im9wYWNpdHk6MC40O2NvbG9yOiMwMDAwMDA7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxMjttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIgogICAgIGQ9Ik0gMTIsMCBDIDUuMzcyNTgzLDAgMCw1LjM3MjU4MyAwLDEyIGMgMCwzLjE4MjU5OCAxLjI0OTU2Myw2LjI0OTU2MyAzLjUsOC41IDIuMjUwNDM3LDIuMjUwNDM3IDUuMzE3NDAyLDMuNSA4LjUsMy41IDMuMTgyNTk4LDAgNi4yNDk1NjMsLTEuMjQ5NTYzIDguNSwtMy41IEMgMjIuNzUwNDM3LDE4LjI0OTU2MyAyNCwxNS4xODI1OTggMjQsMTIgbCAtNSwwIGMgMCwzLjg2NTk5MyAtMy4xMzQwMDcsNyAtNyw3IEMgOC4xMzQwMDY4LDE5IDUsMTUuODY1OTkzIDUsMTIgNSw4LjEzNDAwNjcgOC4xMzQwMDY4LDUgMTIsNSB6IgogICAgIGlkPSJwYXRoMzE3NCIKICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2NjY2NjY2NjIiAvPgo8L3N2Zz4K) 50% 50% no-repeat; + background-size: 20px; + margin:-15px 0 0 -15px; + width:30px; + height:30px; + opacity:.5; + -webkit-animation: rotate 1s linear infinite; + -moz-animation: rotate 1s linear infinite; + -ms-animation: rotate 1s linear infinite; + animation: rotate 1s linear infinite; + } + +@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } + @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } + @-ms-keyframes rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } + @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } + +/* Small Screen Layout +------------------------------------------------------- */ +@media only screen and (max-width:900px) { + .limiter { + width: 100%; + padding-left:20px; + padding-right:20px; + } +} + +/* Tablet Layout +------------------------------------------------------- */ +@media only screen and (max-width:770px) { + .hide-tablet { display:none; } + .show-tablet { display:block; } +} + +/* Mobile Layout +------------------------------------------------------- */ +@media only screen and (max-width:640px) { + a:link { -webkit-tap-highlight-color:rgba(0,0,0,0); } + label .inline a { font-weight:normal; } + + .row1 { height:auto; min-height: 40px;} + .row2 { height:auto; min-height: 80px;} + .row3 { height:auto; min-height: 120px;} + .row4 { height:auto; min-height: 160px;} + .row5 { height:auto; min-height: 200px;} + .row6 { height:auto; min-height: 240px;} + .row7 { height:auto; min-height: 280px;} + .row8 { height:auto; min-height: 320px;} + .row9 { height:auto; min-height: 360px;} + .row10 { height:auto; min-height: 400px;} + .row11 { height:auto; min-height: 440px;} + .row12 { height:auto; min-height: 480px;} + .row13 { height:auto; min-height: 520px;} + .row14 { height:auto; min-height: 560px;} + .row15 { height:auto; min-height: 600px;} + .row16 { height:auto; min-height: 640px;} + + .col1, + .col2, + .col3, + .col4, + .col5, + .col6, + .col7, + .col8, + .col9, + .col10, + .col11, + .col12, + .fifths > * { width:100%; max-width:100%; } + .margin0, + .margin1, + .margin2, + .margin3, + .margin4, + .margin5, + .margin6, + .margin7, + .margin8, + .margin9, + .margin10, + .margin11, + .margin12 { margin-left:0; } + .pad8 { padding:40px; } + .pad8y { padding-top:40px; padding-bottom:40px;} + .pad8x { padding-left:40px; padding-right:40px;} + .pad4y { padding-top:20px; padding-bottom:20px; } + .pad4 { padding:20px; } + .pad4x { padding-left:20px; padding-right:20px; } + .pad2 { padding:10px; } + .pad2y { padding-top:10px; padding-bottom:10px; } + .pad2x { padding-right:10px; padding-left:10px; } + .title { margin-bottom:10px; } + .space-bottom2, .space-bottom { margin-bottom:10px; } + .space-bottom4 { margin-bottom:20px; } + .space-bottom8 { margin-bottom:40px;} + .space-top2 { margin-top:10px;} + .space-top4 { margin-top:20px;} + .space-top8 { margin-top:40px;} + .hide-mobile { display:none!important; } + .show-mobile { display:block!important; } + .show-mobile.inline { display:inline-block!important; } + + .pill:not(.mobile-cols) > *:not(.stroke) { + width:100%; + border-left-width:0; + border-bottom-width:1px; + } + .pill:not(.mobile-cols) > *:first-of-type { + border-radius:3px 3px 0 0; + } + .pill:not(.mobile-cols) > *:last-of-type:not(.stroke) { + border-bottom-width:0; + border-radius:0 0 3px 3px; + } + .tabs:not(.mobile-cols) > a { border-right-width:0; border-bottom-width:1px; } + .tabs:not(.mobile-cols) > a:last-of-type { border-bottom:none; } + + .mobile-cols > .col0 { float:left; width:04.1666%; } + .mobile-cols > .col1 { float:left; width:08.3333%; } + .mobile-cols > .col2 { float:left; width:16.6666%; } + .mobile-cols > .col3 { float:left; width:25.0000%; } + .mobile-cols > .col4 { float:left; width:33.3333%; } + .mobile-cols > .col5 { float:left; width:41.6666%; } + .mobile-cols > .col6 { float:left; width:50.0000%; } + .mobile-cols > .col7 { float:left; width:58.3333%; } + .mobile-cols > .col8 { float:left; width:66.6666%; } + .mobile-cols > .col9 { float:left; width:75.0000%; } + .mobile-cols > .col10 { float:left; width:83.3333%; } + .mobile-cols > .col11 { float:left; width:91.6666%; } + + .mobile-cols > .margin0 { margin-left:04.1666%; } + .mobile-cols > .margin1 { margin-left:08.3333%; } + .mobile-cols > .margin2 { margin-left:16.6666%; } + .mobile-cols > .margin3 { margin-left:25.0000%; } + .mobile-cols > .margin4 { margin-left:33.3333%; } + .mobile-cols > .margin5 { margin-left:41.6666%; } + .mobile-cols > .margin6 { margin-left:50.0000%; } + .mobile-cols > .margin7 { margin-left:58.3333%; } + .mobile-cols > .margin8 { margin-left:66.6666%; } + .mobile-cols > .margin9 { margin-left:75.0000%; } + .mobile-cols > .margin10 { margin-left:83.3333%; } + .mobile-cols > .margin11 { margin-left:91.6666%; } + .mobile-cols > .margin12 { margin-left:100.0000%; } + + /* Fanct gets too big, revert to defaults */ + h1.fancy { font-size:40px;line-height:60px;} + h2.fancy { + font-size:30px; + line-height:40px; + } + h3.fancy { + font-size:20px; + line-height:30px; + } + + /* Deprecated */ + h1.futura { font-size:40px;line-height:60px;} + h2.futura { + font-size:30px; + line-height:40px; + } + h3.futura { + font-size:20px; + line-height:30px; + } + + /* Anchor icon adds noise to the page on smaller displays */ + .doc h1[id]:before, + .doc h2[id]:before, + .doc h3[id]:before, + .doc h4[id]:before { visibility:hidden; } + + /* Lower the size back down to standard + * .prose units on mobile */ + .prose-big, + .prose-big h3, + .prose-big h4, + .prose-big h5, + .prose-big h6 { + font-size:15px; + line-height:25px; + } + .prose-big .small, + .prose-big small { + font-size:12px; + line-height:20px; + } +} + +/* Print +------------------------------------------------------- */ +@media print { + + /* Inline rules */ + body, input, textarea, p { + color:#000; + font:12px/20px sans-serif; + } + .prose a:after { content:' [' attr(href) '] '; } + + /* Cut pad rules in half, matches mobile rules */ + .pad4 { padding:20px; } + .pad8 { padding:40px 20px; } + .pad4y { padding-top:20px; padding-bottom:20px; } + .pad4x { padding-left:20px; padding-right:20px; } + .pad2 { padding:10px; } + .pad2y { padding-top:10px; padding-bottom:10px; } + .pad2x { padding-right:10px; padding-left:10px; } + + /* Icon sprites dont show up be default so kill'em */ + .rcon:after, .icon:before { width:0; height:0; } + + /* TODO Depreciate */ + .noprint { display:none; } +} diff --git a/css/railscasts.css b/css/railscasts.css new file mode 100644 index 0000000..ba65abf --- /dev/null +++ b/css/railscasts.css @@ -0,0 +1,100 @@ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #232323; + color: #e6e1dc; +} + +.hljs-comment, +.hljs-quote { + color: #bc9458; + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag { + color: #c26230; +} + +.hljs-string, +.hljs-number, +.hljs-regexp, +.hljs-variable, +.hljs-template-variable { + color: #a5c261; +} + +.hljs-subst { + color: #519f50; +} + +.hljs-tag, +.hljs-name { + color: #e8bf6a; +} + +.hljs-type { + color: #da4939; +} + + +.hljs-symbol, +.hljs-bullet, +.hljs-built_in, +.hljs-builtin-name, +.hljs-attr, +.hljs-link { + color: #6d9cbe; +} + +.hljs-params { + color: #d0d0ff; +} + +.hljs-attribute { + color: #cda869; +} + +.hljs-meta { + color: #9b859d; +} + +.hljs-title, +.hljs-section { + color: #ffc66d; +} + +.hljs-addition { + background-color: #144212; + color: #e6e1dc; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #600; + color: #e6e1dc; + display: inline-block; + width: 100%; +} + +.hljs-selector-class { + color: #9b703f; +} + +.hljs-selector-id { + color: #8b98ab; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-link { + text-decoration: underline; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..ed05054 --- /dev/null +++ b/css/style.css @@ -0,0 +1,151 @@ +/* BASE OVERRIDES */ + +/* Add buffer for nicer anchor links */ +.prose h2:first-child { + padding-top: 20px; +} + +.prose h3:first-child { + padding-top: 20px; +} + +/* Header gets big */ +@media only screen and (max-width:960px) { + .prose h2:first-child { + padding-top: 60px; + } + + .prose h3:first-child { + padding-top: 60px; + } +} + +/* Header gets bigger */ +@media only screen and (max-width:640px) { + .prose h2:first-child { + padding-top: 100px; + } + + .prose h3:first-child { + padding-top: 100px; + } +} + + +/* tables are too giant */ +.prose table, +.prose table code { + margin-bottom: 20px; + font-size: 12px; + line-height: 1.5; +} + +.prose table th, .prose table td { + padding: 5px; +} + +.scroll-styled::-webkit-scrollbar { + width: 6px; + height: 6px; + background: transparent; + } +.scroll-styled::-webkit-scrollbar:hover { + background: transparent; +} +.scroll-styled::-webkit-scrollbar-track { + background:none; + } +.scroll-styled::-webkit-scrollbar-thumb { + background: rgba(0,0,0,.18); + width: 6px; + border:none; + border-radius: 3px; + } +.scroll-styled::-webkit-scrollbar-thumb:hover { + background: rgba(0,0,0,.25); + } +.scroll-styled::-webkit-scrollbar-track:hover { + background: transparent; +} + +.dark.keyline-top, +.dark.keyline-bottom { + border-color: #313131; +} + +html, body, #app, .container { + height: 100%; +} + +body pre { + padding: 0; +} + +/* BASE ADDONS */ +.fill-dark2 { background-color: #313131; } +.fill-dark2 .rounded-toggle input[type=radio]:checked + label, +.fill-dark2 .rounded-toggle .active { background-color: #313131; } +.space-top3 { margin-top: 30px;} +.space-top5 { margin-top: 50px;} +.line-height15 { line-height: 15px; } +.pad00y { padding-top: 2px; padding-bottom: 2px; } +.space-bottom00 { margin-bottom: 3px;} + +.endpoint { + width: 100%; + display: flex; +} + +.endpoint-method { +} + +.endpoint-url { + flex-grow: 1; + word-wrap: break-word; +} + +.endpoint-url a { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 2px; + font-weight:bold; + padding: 2px; + color: #fff; +} + +.endpoint-url a:hover { + background-color: rgba(255, 255, 255, 0.15); +} + +.endpoint-token { +} + +a.hljs-linked { + border-radius: 2px; + color: #a5c261; + background: #383C2F; + padding: 2px; +} + +body .prose blockquote { + padding: 5px 10px; + background: #232323; +} + +.preview { + background-image: -webkit-linear-gradient(#F1F075, #F1F075); + background-size: 10px 10px; + background-repeat: repeat-y; +} + +.preview h2::after, +.preview h3::after { + content: 'PREVIEW'; + background-color: #F1F075; + border-radius: 2px; + font-size: 9px; + font-weight: normal; + padding: 2px 5px; + color: rgba(0, 0, 0, 0.5); + margin-left: 10px; + vertical-align: middle; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..6cb9aad --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + + Mapbox + + + + + + + +
APP
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..c32d8ba --- /dev/null +++ b/package.json @@ -0,0 +1,64 @@ +{ + "name": "docbox", + "version": "1.0.0", + "description": "an api documentation website", + "main": "index.js", + "scripts": { + "start": "budo src/index.js --serve=bundle.js --live", + "test": "npm run test-unit && eslint src && npm run prerender -- /dev/null && rm -rf lib", + "test-unit": "mocha --compilers js:babel-register test", + "prerender": "babel src --out-dir lib && node lib/render.js", + "build": "NODE_ENV=production browserify src/index.js | uglifyjs -c -m > bundle.js && npm run prerender -- index.html" + }, + "browserify": { + "transform": [ + "babelify", + "brfs" + ] + }, + "keywords": [ + "api", + "documentation" + ], + "author": "Tom MacWright", + "license": "ISC", + "dependencies": { + "babel-cli": "^6.4.0", + "babel-eslint": "^4.1.6", + "babel-polyfill": "^6.3.14", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-stage-0": "^6.3.13", + "babelify": "^7.2.0", + "brfs": "^1.4.2", + "browserify": "^13.0.0", + "cssnano": "^3.4.0", + "es6-promise": "^3.0.2", + "eslint": "^1.10.3", + "eslint-plugin-babel": "^3.0.0", + "eslint-plugin-react": "^3.14.0", + "github-slugger": "^1.0.1", + "isomorphic-fetch": "^2.2.0", + "lodash.debounce": "^4.0.3", + "minifyify": "^7.1.0", + "react": "^0.14.6", + "react-dom": "^0.14.6", + "react-pure-render": "^1.0.2", + "react-visibility-sensor": "^3.0.0", + "react-waypoint": "^1.2.0", + "remark": "^3.2.0", + "remark-highlight.js": "^2.0.0", + "remark-html": "^2.0.2", + "remark-slug": "^3.0.1", + "unist-util-select": "^1.3.0", + "unist-util-visit": "^1.0.0" + }, + "devDependencies": { + "babel-register": "^6.3.13", + "expect": "^1.13.4", + "mocha": "^2.3.4", + "to-vfile": "^1.0.0", + "budo": "^7.1.0", + "uglifyjs": "^2.4.10" + } +} diff --git a/src/components/app.js b/src/components/app.js new file mode 100644 index 0000000..5abbbc7 --- /dev/null +++ b/src/components/app.js @@ -0,0 +1,171 @@ +import React from 'react'; +import Navigation from './navigation'; +import Content from './content'; +import RoundedToggle from './rounded_toggle'; +import PureRenderMixin from 'react-pure-render/mixin'; +import GithubSlugger from 'github-slugger'; +import debounce from 'lodash.debounce'; + +let slugger = new GithubSlugger(); +let slug = title => { slugger.reset(); return slugger.slug(title); }; + +let languageOptions = ['curl', 'cli', 'python', 'javascript']; + +let debouncedReplaceState = debounce(hash => { + window.history.replaceState('', '', hash); +}, 100); + +var App = React.createClass({ + mixins: [PureRenderMixin], + propTypes: { + content: React.PropTypes.string.isRequired, + ast: React.PropTypes.object.isRequired + }, + getInitialState() { + var active = 'Introduction'; + + if (process.browser) { + let hash = window.location.hash.split('#').pop(); + let mqls = { + 'desktop': window.matchMedia('(min-width: 961px)'), + 'tablet': window.matchMedia('(max-width: 960px)'), + 'mobile': window.matchMedia('(max-width: 640px)') + }; + Object.keys(mqls).forEach(key => { + mqls[key].addListener(this.mediaQueryChanged); + }); + if (hash) { + let headingForHash = this.props.ast.children + .filter(child => child.type === 'heading') + .find(heading => heading.data.id === hash); + if (headingForHash) { + active = headingForHash.children[0].value; + } + } + return { + mqls: mqls, + queries: {}, + language: 'curl', + activeSection: active, + showNav: false + }; + } else { + return { + mqls: { + desktop: true + }, + queries: { + desktop: true + }, + language: 'curl', + activeSection: '', + showNav: false + }; + } + }, + toggleNav() { + this.setState({ showNav: !this.state.showNav }); + }, + componentDidMount() { + this.mediaQueryChanged(); + }, + mediaQueryChanged() { + var queries = { + mobile: this.state.mqls.mobile.matches, + tablet: this.state.mqls.tablet.matches, + desktop: this.state.mqls.desktop.matches + }; + this.setState({ queries }); + }, + componentWillUnmount() { + Object.keys(this.state.mqls).forEach(key => + this.state.mqls[key].removeListener(this.mediaQueryChanged)); + }, + onChangeLanguage(language) { + this.setState({ language }); + }, + onSpy(activeSection) { + this.setState({ activeSection }); + }, + componentDidUpdate(_, prevState) { + if (prevState.activeSection !== this.state.activeSection) { + // when the section changes, replace the hash + debouncedReplaceState(`#${slug(this.state.activeSection)}`); + } else if (prevState.language !== this.state.language) { + // when the language changes, use the hash to set scroll + window.location = window.location; + } + }, + handleClick(activeSection) { + setTimeout(() => { + this.setState({ activeSection }); + }, 10); + if (!this.state.queries.desktop) { + this.toggleNav(); + } + }, + render() { + let { ast } = this.props; + let { activeSection, queries, showNav } = this.state; + return (
+ + {/* Content background */ } + {!queries.mobile &&
+
+
} + + {/* Desktop nav */ } + {queries.desktop &&
+ +
} + + {/* Content */ } +
+ +
+ + {/* Language toggle */ } +
+
+ +
+
+ + {/* Header */ } +
+ +
+ {queries.desktop ? 'Example API Documentation' : + queries.mobile ? 'API Docs' : 'Example API Docs'} +
+ {queries.tablet &&
+ + {showNav &&
+ +
} +
} +
+ +
); + } +}); + +module.exports = App; diff --git a/src/components/content.js b/src/components/content.js new file mode 100644 index 0000000..6f209b4 --- /dev/null +++ b/src/components/content.js @@ -0,0 +1,116 @@ +import React from 'react'; +import Section from './section'; +import PureRenderMixin from 'react-pure-render/mixin'; + +function highlightTokens(str) { + return str.replace(/{[\w_]+}/g, + (str) => '' + str + '') + .replace( + /{@2x}/g, + `{@2x}`); +} + +function transformURL(node) { + let { value } = node; + let parts = value.split(/\s+/); + if (parts.length === 3) { + return { + type: 'html', + value: `
+
${parts[0]}
+
${highlightTokens(parts[1])}
+
+ ${parts[2]} + + Token scope + +
+
` + }; + } else { + return { + type: 'html', + value: `
+
${parts[0]}
+
${highlightTokens(parts[1])}
+
` + }; + } +} + +function chunkifyAST(ast, language) { + var preview = false; + return ast.children.reduce((chunks, node) => { + if (node.type === 'heading' && node.depth === 1) { + return chunks; + } else if (node.type === 'heading' && node.depth < 4) { + chunks.push([node]); + } else { + chunks[chunks.length - 1].push(node); + } + return chunks; + }, [[]]).filter(chunk => chunk.length) + .map(chunk => { + var left = [], right = [], title; + if (language === 'cli') { + language = 'bash'; + } + if (chunk[0].depth < 3) { + preview = false; + } + chunk.forEach(node => { + if (node.type === 'code') { + if (node.lang === 'json' || node.lang === 'http' || node.lang === 'html') { + right.push(node); + } else if (node.lang === language) { + if (language === 'curl') { + right.push({ ...node, lang: 'bash' }); + } else { + right.push(node); + } + } else if (node.lang === 'endpoint') { + right.push(transformURL(node)); + } + } else if (node.type === 'heading' && node.depth >= 4) { + right.push(node); + } else if (node.type === 'blockquote') { + right.push(node); + } else if (node.type === 'heading' && node.depth < 4 && !title) { + title = node.children[0].value; + left.push(node); + } else if (node.type === 'html') { + if (node.value.indexOf('$/, '') + .trim(); + if (content === 'preview') { + preview = true; + } + } + } else { + left.push(node); + } + }); + return { left, right, title, preview }; + }); +} + +var Content = React.createClass({ + mixins: [PureRenderMixin], + propTypes: { + ast: React.PropTypes.object.isRequired, + language: React.PropTypes.string.isRequired, + onSpy: React.PropTypes.func.isRequired + }, + render() { + return (
+ {chunkifyAST(this.props.ast, this.props.language).map((chunk, i) =>
)} +
); + } +}); + +module.exports = Content; diff --git a/src/components/navigation.js b/src/components/navigation.js new file mode 100644 index 0000000..abe4964 --- /dev/null +++ b/src/components/navigation.js @@ -0,0 +1,94 @@ +import React from 'react'; +import PureRenderMixin from 'react-pure-render/mixin'; +import NavigationItem from './navigation_item'; + +function getAllInSectionFromChild(headings, idx) { + for (var i = idx; i > 0; i--) { + if (headings[i].depth === 2) { + return getAllInSection(headings, i); + } + } +} + +function getAllInSection(headings, idx) { + var activeHeadings = []; + for (var i = idx + 1; i < headings.length; i++) { + if (headings[i].depth === 3) { + activeHeadings.push(headings[i].children[0].value); + } else if (headings[i].depth === 2) { + break; + } + } + return activeHeadings; +} + +var Navigation = React.createClass({ + mixins: [PureRenderMixin], + propTypes: { + ast: React.PropTypes.object.isRequired, + activeSection: React.PropTypes.string, + handleClick: React.PropTypes.func.isRequired + }, + render() { + var activeHeadings = []; + let headings = this.props.ast.children + .filter(child => child.type === 'heading'); + + if (this.props.activeSection) { + + let activeHeadingIdx = headings.findIndex(heading => + heading.children[0].value === this.props.activeSection); + let activeHeading = headings[activeHeadingIdx]; + + if (activeHeading.depth === 3) { + activeHeadings = [this.props.activeSection] + .concat(getAllInSectionFromChild(headings, activeHeadingIdx)); + } + + // this could potentially have children, try to find them + if (activeHeading.depth === 2) { + activeHeadings = [this.props.activeSection] + .concat(getAllInSection(headings, activeHeadingIdx)); + } + } + + activeHeadings = activeHeadings.reduce((memo, heading) => { + memo[heading] = true; + return memo; + }, {}); + + return (
+ {headings + .map((child, i) => { + let sectionName = child.children[0].value; + var active = sectionName === this.props.activeSection; + if (child.depth === 1) { + return (
{sectionName}
); + } else if (child.depth === 2) { + return (); + } else if (child.depth === 3) { + if (activeHeadings.hasOwnProperty(sectionName)) { + return (
+ +
); + } + } + })} +
); + } +}); + +module.exports = Navigation; diff --git a/src/components/navigation_item.js b/src/components/navigation_item.js new file mode 100644 index 0000000..2b9926c --- /dev/null +++ b/src/components/navigation_item.js @@ -0,0 +1,26 @@ +import React from 'react'; +import PureRenderMixin from 'react-pure-render/mixin'; + +var NavigationItem = React.createClass({ + mixins: [PureRenderMixin], + propTypes: { + sectionName: React.PropTypes.string.isRequired, + active: React.PropTypes.bool.isRequired, + handleClick: React.PropTypes.func.isRequired, + href: React.PropTypes.string.isRequired + }, + onClick() { + this.props.handleClick(this.props.sectionName); + }, + render() { + var {sectionName, href, active} = this.props; + return ( + {sectionName} + ); + } +}); + +module.exports = NavigationItem; diff --git a/src/components/rounded_toggle.js b/src/components/rounded_toggle.js new file mode 100644 index 0000000..a4de107 --- /dev/null +++ b/src/components/rounded_toggle.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PureRenderMixin from 'react-pure-render/mixin'; + +var RoundedToggle = React.createClass({ + mixins: [PureRenderMixin], + propTypes: { + options: React.PropTypes.array.isRequired, + active: React.PropTypes.string.isRequired, + onChange: React.PropTypes.func.isRequired + }, + render() { + let { options, active } = this.props; + return (
+ {options.map(option => + )} +
); + } +}); + +var RoundedToggleOption = React.createClass({ + mixins: [PureRenderMixin], + propTypes: { + option: React.PropTypes.string.isRequired, + className: React.PropTypes.string.isRequired, + onClick: React.PropTypes.func.isRequired + }, + onClick() { + this.props.onClick(this.props.option); + }, + render() { + let { className, option } = this.props; + return ({option}); + } +}); + +module.exports = RoundedToggle; diff --git a/src/components/section.js b/src/components/section.js new file mode 100644 index 0000000..5d9f085 --- /dev/null +++ b/src/components/section.js @@ -0,0 +1,56 @@ +import React from 'react'; +import remark from 'remark'; +import remarkHTML from 'remark-html'; +import remarkHighlight from 'remark-highlight.js'; +import Waypoint from 'react-waypoint'; +import PureRenderMixin from 'react-pure-render/mixin'; + +function renderHighlighted(nodes) { + return { + __html: remark() + .use(remarkHTML) + .stringify(remark().use(remarkHighlight).run({ + type: 'root', + children: nodes + })) + .replace( + /"{timestamp}"<\/span>/g, + `"{timestamp}"`) + }; +} + +var Section = React.createClass({ + mixins: [PureRenderMixin], + propTypes: { + chunk: React.PropTypes.object.isRequired, + onSpy: React.PropTypes.func.isRequired + }, + waypointEnterFromAbove(e, direction) { + if (direction === 'above') { + this.props.onSpy(this.props.chunk.title); + } + }, + waypointEnterFromBelow(e, direction) { + if (direction === 'below') { + this.props.onSpy(this.props.chunk.title); + } + }, + render() { + let { chunk } = this.props; + let { left, right, preview } = chunk; + return (
+ +
+ {(right.length > 0) &&
} +
+ +
+
); + } +}); + +module.exports = Section; diff --git a/src/content.js b/src/content.js new file mode 100644 index 0000000..93f7886 --- /dev/null +++ b/src/content.js @@ -0,0 +1,7 @@ +var fs = require('fs'); + +module.exports = + '# Introduction\n' + + fs.readFileSync('./content/introduction.md', 'utf8') + '\n' + + '# Example\n' + + fs.readFileSync('./content/example.md', 'utf8') + '\n'; diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..f6816e6 --- /dev/null +++ b/src/index.js @@ -0,0 +1,13 @@ +import 'babel-polyfill'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './components/app'; +import remark from 'remark'; +import slug from 'remark-slug'; +import content from './content'; + +var ast = remark().use(slug).run(remark().parse(content)); + +ReactDOM.render( + , + document.getElementById('app')); diff --git a/src/render.js b/src/render.js new file mode 100644 index 0000000..24ad6e8 --- /dev/null +++ b/src/render.js @@ -0,0 +1,18 @@ +import React from 'react'; +import ReactDOMServer from 'react-dom/server'; +import App from './components/app'; +import remark from 'remark'; +import slug from 'remark-slug'; +import content from './content'; +import fs from 'fs'; + +var ast = remark().use(slug).run(remark().parse(content)); + +var template = fs.readFileSync('./index.html', 'utf8'); + +var target = process.argv[2]; + +fs.writeFileSync(target, + template.replace('APP', + ReactDOMServer.renderToString( + ))); diff --git a/test/content.js b/test/content.js new file mode 100644 index 0000000..1a0efb9 --- /dev/null +++ b/test/content.js @@ -0,0 +1,121 @@ +/* global it describe */ +var remark = require('remark'); +var expect = require('expect'); +var visit = require('unist-util-visit'); +var select = require('unist-util-select'); +var fs = require('fs'); +var GithubSlugger = require('github-slugger'); +var { linter } = require('eslint'); +var allPages = require('../src/content'); + +var slugger = new GithubSlugger(); +var actionVerbs = /^(List|Retrieve|Remove|Search|Create|Delete)/; + +let isSectionTitle = (title) => title.match(actionVerbs); +let getSectionTitle = chunk => chunk[0].children[0].value; + +function extractSections(ast) { + return ast.children.reduce((chunks, node) => { + if (node.type === 'heading' && node.depth === 1) { + return chunks; + } else if (node.type === 'heading' && node.depth === 3) { + chunks.push([node]); + } else { + chunks[chunks.length - 1].push(node); + } + return chunks; + }, [[]]) + .filter(chunk => chunk.length) + .filter(chunk => { + return isSectionTitle(getSectionTitle(chunk)); + }) + .map(chunk => ({ type: 'root', children: chunk })); +} + +var slugs = {}; +describe('global rules', () => { + var ast = remark.parse(allPages); + var seen = {}; + /** + * Check that titles are unique. This is to ensure that permalinks + * are unique. + */ + + visit(ast, 'heading', node => { + slugs['#' + slugger.slug(node.children[0].value)] = true; + if (node.depth > 3) return; + var { value } = node.children[0]; + it('title ' + value + ' is unique', () => { + expect(seen.hasOwnProperty(value)) + .toEqual(false, 'Title `' + value + '` should be unique'); + seen[value] = true; + }); + }); + +}); + +describe('content', () => { + fs.readdirSync('./content').forEach(function(file) { + describe(file, () => { + var content = fs.readFileSync('./content/' + file, 'utf8'); + var ast = remark.parse(content); + + it('links are valid', function() { + visit(ast, 'link', node => { + if (node.href && node.href[0] === '#') { + expect(slugs[node.href]) + .toExist('A link to ' + node.href + ' at ' + + node.position.start.line + ' of ' + file + ' was invalid'); + } + }); + }); + + it('has h2 title', function() { + expect(ast.children[0].type).toEqual('heading'); + expect(ast.children[0].depth).toEqual(2); + }); + + it('has API description', function() { + expect(ast.children[1].type === 'paragraph' || ast.children[1].type === 'html').toEqual(true); + }); + + it('has valid json', () => { + select(ast, 'code[lang=json]').forEach(node => { + expect(function() { + JSON.parse(node.value); + }).toNotThrow(null, 'a JSON code block at L:' + + node.position.start.line + ' of ' + file + ' was invalid'); + }); + }); + + it('has valid javascript', () => { + select(ast, 'code[lang=javascript]').forEach(node => { + var messages = linter.verify(node.value); + expect(messages).toEqual([], 'a JS code block at L:' + + node.position.start.line + ' of ' + file + ' was invalid'); + }); + }); + + extractSections(ast).forEach(chunk => { + describe(getSectionTitle(chunk.children), function() { + it('has an endpoint and that endpoint has a valid method', () => { + var endpoint = select(chunk, 'code[lang=endpoint]'); + expect(endpoint.length).toBeGreaterThan(0); + expect(endpoint[0].value.toString()).toMatch(/^(PUT|POST|GET|DELETE|PATCH)/); + }); + if (!file.match(/(style|static_gl|maps|static_classic|uploads)/)) { + it('has python example', () => { + expect(select(chunk, 'code[lang=python]').length).toBeGreaterThan(0); + }); + it('has js example', () => { + expect(select(chunk, 'code[lang=javascript]').length).toBeGreaterThan(0); + }); + it('has curl example', () => { + expect(select(chunk, 'code[lang=curl]').length).toBeGreaterThan(0); + }); + } + }); + }); + }); + }); +});