.container {
max-width: 100%;
width: 100%;
}
.docs-example {
display: flex;
align-items: center;
margin: 0 auto;
justify-content: center;
position: relative;
}
.docs-iframe {
}
.docs-example:hover .docs-iframe {
}
.docs-resize {
width: 100%;
}
.docs-iframe {
border: 0;
height: auto;
width: 100%;
/* min-width: 320px; */
/* max-width: 100%; */
}
/* .c-resize--left, */
/* .c-resize--right { */
/* background-color: green; */
/* display: inline-block; */
/* width: 5px; */
/* height: 20px; */
/* } */
.swatch {
padding: .25em;
margin: 0 .3em .3em 0;
word-break: break-all;
word-wrap: break-word;
overflow: hidden;
}
.color-property {
font-size: 80%;
}
/*---
section: mdcss GitHub
---
[![NPM Version][npm-img]][npm] [![Build Status][ci-img]][ci]
[mdcss GitHub] is a theme for [mdcss] based on the documentation styles seen
across GitHub.
[ci]: https://travis-ci.org/jonathantneal/mdcss-theme-github
[ci-img]: https://img.shields.io/travis/jonathantneal/mdcss-theme-github.svg
[mdcss]: https://github.com/jonathantneal/mdcss
[npm]: https://www.npmjs.com/package/mdcss-theme-github
[npm-img]: https://img.shields.io/npm/v/mdcss-theme-github.svg
[mdcss GitHub]: https://github.com/jonathantneal/mdcss-theme-github
*/
/*---
title: Usage
section: mdcss GitHub
---
Add [mdcss] and [mdcss GitHub] to your build tool:
```bash
npm install mdcss mdcss-theme-github --save-dev
```
Whenever [mdcss] is used, reference this theme.
```js
require('mdcss')({
theme: require('mdcss-theme-github')({ /* options */ })
})
```
[mdcss]: https://github.com/jonathantneal/mdcss
[mdcss GitHub]: https://github.com/jonathantneal/mdcss-theme-github
*/
/*---
title: Options
section: mdcss GitHub
---
Options control the look and feel of the mdcss GitHub theme as well as any
iframe examples that may be used.
#### `title`
Type: `String`
Default: `'Style Guide'`
The page title to be used by the style guide.
#### `logo`
Type: `String`
Default: `'mdcss-logo.png'`
The page logo to be used by the style guide.
#### `examples.base`
Type: `String`
Default: `null`
The base URL to use for all relative URLs contained within an example,
including CSS and JavaScript references.
#### `examples.target`
Type: `String`
Default: `'_self'`
The frame to open example hyperlinks from within an example.
#### `examples.css`
Type: `Array`
Default: `['style.css']`
A list of CSS files to be used by examples.
#### `examples.js`
Type: `Array`
Default: `null`
A list of JavaScript files to be used by examples.
#### `examples.bodyjs`
Type: `Array`
Default: `null`
A list of JavaScript files to be used by examples, inserted after the example.
#### `examples.htmlcss`
Type: `String`
Default: `'background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:0;position:static;width:auto'`
A string of styles applied to the `` wrapping the example. These default
styles are used to create a seamless effect with the styleguide.
#### `examples.bodycss`
Type: `String`
Default: `'background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:16px;position:static;width:auto'`
A string of styles applied to the `` wrapping the example. These default
styles are used to create a seamless effect with the styleguide.
*/
/*---
title: Examples
section: Overview
---
The `example` keyword is used by code blocks to indicate that code will be
rendered as a living example on the page.
An `example:html` code block
generates an iframe using the contents of the code block, followed by the
original code block. For example:
````css
```example:html
```
````
is rendered as:
```example:html
```
An `example` code block generates an iframe using the contents of the code
block without also rendering the original code block. For example:
````css
```example
```
````
is rendered as:
```example
```
*/
/*---
title: Colors
section: Overview
---
Color examples are generated with `example:color` code blocks. For example:
````css
```example:color
@color: #ffffff @name: White
@color: #f8f8f8 @name: White Smoke
@color: #e7e7e7 @name: Whisper
@color: #777777 @name: Grey
@color: #565454 @name: Matterhorn
@color: #4078c0 @name: Steel Blue
@color: #333333 @name: Night Rider
```
````
is rendered as:
```example:color
@color: #ffffff @name: White
@color: #f8f8f8 @name: White Smoke
@color: #e7e7e7 @name: Whisper
@color: #777777 @name: Grey
@color: #565454 @name: Matterhorn
@color: #4078c0 @name: Steel Blue
@color: #333333 @name: Night Rider
```
*/
/*---
title: Order
section: Overview
---
The `order` heading detail is used to control the order of sections in the generated style guide. A negative order value will shift the item before non-ordered items, while a positive order value will push the item after non-ordered values.
```css
/*---
section: First Section
order: -1
---
```
Attached to a subsection, the order detail will control the position of the subsection inside the section.
```css
/*---
title: Last Subsection
section: Third Section
order: 1
---
*/
/*---
title: Typography
section: Overview
---
This theme uses a common Helvetica font stack with a relative line height of
1.6 times the font size.
*/
/*---
title: Headings
section: Typography
---
Headings match GitHub documentation conventions.
```example:html
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
```
*/
/*---
title: Iconography
section: Overview
---
This theme uses no iconography.
*/
/*---
title: Layout
---
We use flex to horizontally stack the heading and main content areas.
The navigation remains fixed while you scroll.
*/
/*---
title: Visual Language
---
This is just a sample section. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur,
aliquam commodi consequuntur id error ipsam suscipit quas doloremque
perferendis quam! Ullam, debitis ab maiores.
```html
```
*/
/*---
title: Hero
section: Visual Language
---
This is just a sample section. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur,
aliquam commodi consequuntur id error ipsam suscipit quas doloremque
perferendis quam! Ullam, debitis ab maiores.
*/
/*---
title: Figure
section: Visual Language
---
This is just a sample section. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur,
aliquam commodi consequuntur id error ipsam suscipit quas doloremque
perferendis quam! Ullam, debitis ab maiores.
*/
/*---
title: Blockquote
section: Visual Language
---
This is just a sample section. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur,
aliquam commodi consequuntur id error ipsam suscipit quas doloremque
perferendis quam! Ullam, debitis ab maiores.
*/
/*---
title: Media
section: Visual Language
---
This is just a sample section. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur,
aliquam commodi consequuntur id error ipsam suscipit quas doloremque
perferendis quam! Ullam, debitis ab maiores.
*/
/*---
title: Aspect
section: Visual Language
order: -1
---
This is just a sample section. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur,
aliquam commodi consequuntur id error ipsam suscipit quas doloremque
perferendis quam! Ullam, debitis ab maiores.
*/
The page logo to be used by the style guide.
#### `examples.base`
Type: `String`
Default: `null`
The base URL to use for all relative URLs contained within an example,
including CSS and JavaScript references.
#### `examples.target`
Type: `String`
Default: `'_self'`
The frame to open example hyperlinks from within an example.
#### `examples.css`
Type: `Array`
Default: `['style.css']`
A list of CSS files to be used by examples.
#### `examples.js`
Type: `Array`
Default: `null`
A list of JavaScript files to be used by examples.
#### `examples.bodyjs`
Type: `Array`
Default: `null`
A list of JavaScript files to be used by examples, inserted after the example.
#### `examples.htmlcss`
Type: `String`
Default: `'background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:0;position:static;width:auto'`
A string of styles applied to the `` wrapping the example. These default
styles are used to create a seamless effect with the styleguide.
#### `examples.bodycss`
Type: `String`
Default: `'background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:16px;position:static;width:auto'`
A string of styles applied to the `` wrapping the example. These default
styles are used to create a seamless effect with the styleguide.
*/
/*---
title: Examples
section: Overview
---
The `example` keyword is used by code blocks to indicate that code will be
rendered as a living example on the page.
An `example:html` code block
generates an iframe using the contents of the code block, followed by the
original code block. For example:
````css
```example:html
```
````
is rendered as:
```example:html
```
An `example` code block generates an iframe using the contents of the code
block without also rendering the original code block. For example:
````css
```example
```
````
is rendered as:
```example
```
*/
/*---
title: Colors
section: Overview
---
Color examples are generated with `example:color` code blocks. For example:
````css
```example:color
@color: #ffffff @name: White
@color: #f8f8f8 @name: White Smoke
@color: #e7e7e7 @name: Whisper
@color: #777777 @name: Grey
@color: #565454 @name: Matterhorn
@color: #4078c0 @name: Steel Blue
@color: #333333 @name: Night Rider
```
````
is rendered as:
```example:color
@color: #ffffff @name: White
@color: #f8f8f8 @name: White Smoke
@color: #e7e7e7 @name: Whisper
@color: #777777 @name: Grey
@color: #565454 @name: Matterhorn
@color: #4078c0 @name: Steel Blue
@color: #333333 @name: Night Rider
```
*/
/*---
title: Order
section: Overview
---
The `order` heading detail is used to control the order of sections in the generated style guide. A negative order value will shift the item before non-ordered items, while a positive order value will push the item after non-ordered values.
```css
/*---
section: First Section
order: -1
---
```
Attached to a subsection, the order detail will control the position of the subsection inside the section.
```css
/*---
title: Last Subsection
section: Third Section
order: 1
---
*/
/*---
title: Typography
section: Overview
---
This theme uses a common Helvetica font stack with a relative line height of
1.6 times the font size.
*/
/*---
title: Headings
section: Typography
---
Headings match GitHub documentation conventions.
```example:html