styledocco/share/docs.css

Generate documentation and style guides with design patterns from stylesheets.

/*
StyleDocco default styles
=========================
This is the default stylesheet for StyleDocco. It also serves as an example of
the documentation syntax. */
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
/*
Main layout
-----------
*/
body {
  /* Top/bottom paddings for bars */
  padding: 60px 0 40px;
  background-color: hsl(207, 10%, 90%);
  color: hsl(207, 5%, 30%);
}
/* The page content has a maximum width of 1500 pixels. */
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}
.section {
  position: relative;
  margin-bottom: 20px;
}
/* When StyleDocco encounters a first level heading, the documentation is
split into a new section with a pair of documentation and CSS code.

```
<article class="section">
  <div class="docs">
    <h1>Documentation</h1>
  </div>
  <div class="code"><pre><code>CSS code</code></pre></div>
</article>
``` */
.docs {
  position: relative;
  z-index: 2;
  width: 68%;
  min-height: 200px;
  background-color: hsl(207, 0%, 100%);
  background-clip: padding-box;
  border: 1px solid hsla(207, 5%, 5%, .1);
  border-radius: 5px;
  box-shadow: 0 0 3px hsla(207, 5%, 5%, .1);
}
.code {
  position: absolute;
  top: 5px; bottom: 5px;
  right: 0;
  z-index: 1;
  width: 33%;
  padding: 10px 10px 10px 20px;
  border-radius: 0 5px 5px 0;
  border: 1px solid hsla(207, 20%, 10%, .1);
  background-color: hsla(207, 20%, 95%, .9);
  background-clip: padding-box;
  opacity: .5;
  -webkit-transition: opacity .4s;
  -moz-transition:    opacity .4s;
  -o-transition:      opacity .4s;
  transition:         opacity .4s;
}
  .code:hover {
    opacity: 1;
  }

/* # Previews and code
Previews are rendered in sandboxed iframes with the documented CSS applied.
The code is editable and the previews will be automatically updated.

The width of the previews can be adjusted to test responsive designs. The
height will be automatically adjusted to fit the content. <small>Free hand
resizing currently only works properly in Firefox. In WebKit browsers you can
only enlarge the previews and other browsers have not implemented CSS `resize`
</small>. */
.preview {
  background: hsl(207, 0%, 100%);
  border-top: 1px solid hsl(207, 30%, 95%);
  position: relative;
  z-index: 1;
}
  .preview-code + .preview {
    margin-top: 0;
    border-top: 0;
  }
.preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/*
Editable code blocks have a desaturated orange background. They will be
automatically resized to fit the text inside.

    <textarea class="preview-code">Code</textarea>
*/
.preview-code {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  color: hsl(207, 9%, 37%);
  max-height: 200px;
  padding: 10px 20px;
  overflow-y: auto;
  background: hsl(207, 30%, 95%);
  border: 1px solid hsl(207, 30%, 85%);
  border-left: 0; border-right;
  box-shadow: inset 0 1px 2px hsla(207, 30%, 10%, .1);
  line-height: 1.1 !important;
  resize: none;
}
  .preview-code:focus {
    outline: 0;
    background: hsl(207, 30%, 97%);
    box-shadow: inset 0 1px 2px hsla(207, 30%, 10%, .1),
                0 0 5px hsla(207, 75%, 75%, .9);
  }
  .preview-code:last-child {
    border-bottom: 0;
    border-radius: 0 0 5px 5px;
  }
/* Previews are placed in a resizeable container as `iframe` elements cannot be
resized with the CSS `resize` property. */
.resizeable {
  padding: 15px;
  overflow: auto;
  background: hsl(207, 0%, 100%);
  box-shadow: 0 0 2px hsla(207, 10%, 20%, .2);
  resize: both;
}
/* No code is allowed to overflow horizontally. */
.preview-code, pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
}
.code pre {
  height: 100%;
  margin-top: 0;
}


/*
# Navigation

Fixed to top with a small drop shadow.
```
<nav class="bar top"></nav>
```
*/
.bar {
  position: fixed;
  left: 0; right: 0;
  z-index: 1010;
  min-height: 40px;
  line-height: 40px;
  background-image: -webkit-linear-gradient(hsla(207, 10%, 35%, .97),
                                            hsla(207, 5%, 25%, .92));
  background-image:    -moz-linear-gradient(hsla(207, 10%, 35%, .97),
                                            hsla(207, 5%, 25%, .92));
  background-image:      -o-linear-gradient(hsla(207, 10%, 35%, .97),
                                            hsla(207, 5%, 25%, .92));
  background-image:         linear-gradient(hsla(207, 10%, 35%, .97),
                                            hsla(207, 5%, 25%, .92));
}
.bar.top {
  top: 0;
  box-shadow: 0 1px 2px hsla(207, 5%, 0%, .2);
}
.bar.bottom {
  bottom: 0;
  box-shadow: 0 -1px 2px hsla(207, 5%, 0%, .2);
}
.bar ul {
  margin: 0 !important;
}
.bar li {
  display: block;
  list-style: none;
}
.bar .icon path {
  fill: hsla(27, 10%, 75%, .75);
}
.docs .icon path {
  fill: hsla(207, 10%, 75%, .5);
}
  .docs .permalink:hover .icon path {
    fill: hsl(207, 10%, 75%);
  }
.bar button {
  color: hsla(27, 10%, 75%, .75);
}
  .bar button:hover .icon path,
  .bar button.is-active .icon path {
    fill: hsl(27, 10%, 85%);
  }
  .bar button:hover, .bar button.is-active {
    color: hsl(27, 10%, 85%);
  }
.bar .icon {
  vertical-align: middle;
  display: inline-block;
}
.bar, .bar a, .bar a:visited {
  color: hsl(27, 10%, 85%);
  text-shadow: 1px 1px 0 hsla(27, 5%, 0%, .5);
}
    .bar a:hover,
    .bar a.is-active {
      color: hsl(27, 10%, 95%);
      text-shadow: 1px 1px 0 hsla(27, 5%, 0%, 1);
      text-decoration: none;
    }
/* ```
<div class="bar top"><a href="#" class="brand">Site name</a></div>
``` */
.brand {
  float: left;
  margin-right: 20px;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
}
.brand, a.brand, a.brand:visited {
  color: hsl(27, 5%, 5%);
  text-shadow: 1px 1px 0 hsla(27, 5%, 100%, .2);
}
  .brand:hover, a.brand:hover {
    color: hsl(27, 5%, 0%);
    text-shadow: 1px 1px 0 hsla(27, 5%, 100%, .3);
    text-decoration: none;
  }

/*
## Dropdown and search ##

    <div class="bar top">
      <ul class="menu">
        <li><a href="#">css-file</a>
        <li><a href="#" class="dropdown-toggle is-active" unselectable="on"
               data-toggle="dropdown-1">folder</a>
            <ul class="dropdown" id="dropdown-1">
              <li><a href="#">css-file</a>
              <li><a href="#">css-file</a>
            </ul>
      </ul>
    </div>
*/
.menu {
  font-size: 12px;
}
.menu > li {
  float: left;
  position: relative;
}
.menu a {
  display: block;
  margin-right: 15px;
}

.dropdown-toggle {
  position: relative;
  padding-right: 15px;
}
 /* Arrow */
.dropdown-toggle:after {
  display: block;
  position: absolute;
  right: 0;
  top: 18px;
  content: '';
  border: 4px solid;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.nav-results,
.dropdown {
  position: absolute;
  z-index: 1020;
  top: 32px;
  left: -16px;
  width: 175px;
  max-height: 500px;
  padding: 10px 0;
  overflow-y: auto;
  word-wrap: break-word;
  font-size: 11px;
  line-height: 20px;
  background-color: hsla(207, 10%, 25%, .97);
  border: 1px solid hsla(207, 5%, 70%, .3);
  border-radius: 3px;
  box-shadow: 0 0 3px hsla(207, 5%, 0%, .2);
}
.toc-list {
  width: 200px;
}
.nav-results {
  right: 0;
  width: 200px;
  left: auto;
  padding: 5px 0;
}
.nav-results-filename {
  display: block;
  font-size: 10px;
  opacity: .75;
}
.nav-results a {
  display: block;
  line-height: 15px;
  padding: 5px 10px;
}
 /* Match everything after the first non-hidden `li`. */
.nav-results li:not([hidden]) ~ li a {
  border-top: 1px solid hsla(27, 10%, 90%, .1);
}
.dropdown a {
  padding: 0 15px;
}
.dropdown li:hover {
  background-color: hsl(207, 10%, 22%);
}
.nav {
  float: right;
  position: relative;
}
.nav input[type="search"] {
  padding: 2px 4px;
  color: #fff;
  width: 150px;
  border: 1px solid hsla(207, 5%, 0%, .3);
  background: hsla(207, 12%, 40%, .9);
  box-shadow: inset 1px 1px 3px hsla(207, 5%, 0%, .05),
                    1px 1px 0 hsla(207, 5%, 100%, .05);
  border-radius: 10px;
  -webkit-appearance: textfield;
}
  .nav input[type="search"]:focus {
    outline: 0;
    background: hsla(207, 7%, 45%, .9);
  }


/*
# Settings and configuration #
*/
.settings {
  text-align: center;
}
.bar button {
  display: inline-block;
  vertical-align: middle;
  padding: 0 5px;
  margin: 0 3px;
  background: transparent;
}
.bar button:first-child {
  margin-left: 0;
}
.settings .auto {
  line-height: 32px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: -1px;
  text-shadow: none;
  text-transform: uppercase;
}
/*
# Typography and text styles

We use the generic `sans-serif` font family to get Arial on Windows and
Helvetica on Mac. The body font-size is set to 14px.

    Lorem ipsum dolor sit amet. */
body {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.618;
}
/* Paragraphs, lists, tables and blockquotes get some bottom margins as well
as side margins.

    <p>Paragraph #1
    <p>Paragraph #2
    <ul><li>List</ul> */
.docs pre, p, ol, ul, dl,
figure, blockquote, table {
  margin-left: 20px; margin-right: 20px;
}
.preview, .docs pre,
p, ol, ul, dl,
figure, blockquote, table {
  margin-top: 10px;
}
  ul ul, ol ol, ul ol, ol ul,
  blockquote p:last-child {
    margin-top: 0;
  }
ul, ol {
  padding-left: 1.5em;
}
p:last-child, ol:last-child, ul:last-child, dl:last-child {
  margin-bottom: 20px;
}
/* Headings get font-sizes at a modular scale of 5:6.

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h2>
    <h4>Heading 4</h2>
    <h5>Heading 5</h2>
    <h6>Heading 6</h3> */
hr,
h1, h2, h3, h4, h5, h6 {
  margin: 1em 20px .5em;
}
  h1:first-of-type {
    margin-top: 20px;
  }
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  color: hsl(207, 10%, 50%);
}
h1 a, h1 a:hover, h1 a:visited {
  color: inherit;
  text-decoration: inherit;
}
h1 {
  font-size: 3.052em;
  font-weight: normal;
  color: hsl(207, 10%, 45%);
}
h2 {
  font-size: 1.953em;
}
h3 {
  font-size: 1.536em;
}
h1, h2, h3 {
  letter-spacing: -.025em;
}
h4 {
  font-size: 1.25em;
}
h5 {
  font-size: 1em;
  text-transform: uppercase;
}
h6 {
  font-size: 1em;
}
.permalink {
  position: absolute;
  top: 15px; right: 15px;
}

/*
# Links

To show pseudo selectors styles in previews, add the pseudo selector
(including the `:`) as a regular class.

    <a href="#">Link</a>
    <a href="#" class=":hover">Link</a>
    <a href="#" class=":visited">Link</a>
*/
a {
  color: hsl(207, 90%, 50%);
  text-decoration: none;
}
  a:hover {
    color: hsl(207, 95%, 40%);
    text-decoration: underline;
  }
  a:visited {
    color: hsl(207, 100%, 35%);
  }

/*
# Code
For displaying code, we prefer [Ubuntu Mono](http://font.ubuntu.com),
falling back on some fonts that should look better at smaller sizes than the
default monospace fonts.

```
<pre>
<code>The font in &lt;pre&gt; code blocks is small but legible.</code>
</pre>
```

```php
<?php
echo "Hello World;
?>
``` */
.preview-code,
pre, code, var {
  font-style: normal;
  font-family: "Ubuntu Mono", "Andale Mono", "DejaVu Sans Mono", "Monaco", "Bitstream Vera Sans Mono", "Consolas", "Lucida Console", monospace;
  font-size: 12px;
}
.docs pre, code, var {
  padding: .1em 3px;
  background: hsla(207, 5%, 0%, .025);
  border: 1px solid hsla(207, 5%, 0%, .05);
  border-radius: 3px;
}
.code pre {
  line-height: 1.1 !important;
}
pre code {
  padding: 0;
  background: transparent;
  border: 0;
}

/* Helper classes */
.cf:before, .cf:after { content: ''; display: table; }
.cf:after { clear: both; }
[unselectable="on"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
[hidden] {
  display: none !important;
}
small {
  font-size: 85%;
  opacity: .9;
}