diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..00fed49 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +primercss.io \ No newline at end of file diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..845aabe Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/archive/about/index.html b/archive/about/index.html new file mode 100644 index 0000000..63c5cea --- /dev/null +++ b/archive/about/index.html @@ -0,0 +1,84 @@ + + + + + + + + + + + + + About · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+

+ About +

+
+

Learn more about this styleguide, particularly how it’s built and who maintains it.

+ +

What and why

+ +

Primer is GitHub’s internal CSS framework. It includes basic global styling for utilities, objects, components, and our general guidelines for writing HTML and CSS. It’s been used internally at GitHub for years now.

+ +

Future Updates

+ +

Primer is currently being overhauled. The upcoming version of Primer will add new styles and bring the existing styles up to date, improve the build process, and include new and improved documentation. New styles will be open-sourced in the Primer repo and on npm as we add them, and the new documentation site will be shared when it's complete, currently slated to happen in mid-to-late 2017.

+ +

Who

+ +

Maintained by the GitHub Design Systems team.

+ +
+
+
+ + + +
+ + + + + diff --git a/archive/alerts/index.html b/archive/alerts/index.html new file mode 100644 index 0000000..1615eae --- /dev/null +++ b/archive/alerts/index.html @@ -0,0 +1,217 @@ + + + + + + + + + + + + + Alerts · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Alerts +

+
+

Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.

+ +

Contents

+ + + +

Default

+ +

Flash messages start off looking decently neutral—they’re just light blue rounded rectangles.

+ +
+ Flash message goes here. +
+
<div class="flash">
+  Flash message goes here.
+</div>
+ +

You can put multiple paragraphs of text in a flash message—the last paragraph’s bottom margin will be automatically override.

+ +
+

This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more text, it'll eventually wrap to a new line.

+

And this is another paragraph.

+
+
<div class="flash">
+  <p>This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more text, it'll eventually wrap to a new line.</p>
+  <p>And this is another paragraph.</p>
+</div>
+ +

Should the need arise, you can quickly space out your flash message from surrounding content with a .flash-messages wrapper. Note the extra top and bottom margin in the example below.

+ +
+
+ Flash message goes here. +
+
+
<div class="flash-messages">
+  <div class="flash">
+    Flash message goes here.
+  </div>
+</div>
+ +

Variations

+ +

Add .flash-warn or .flash-error to the flash message to make it yellow or red, respectively.

+ +
+ Flash message goes here. +
+
<div class="flash flash-warn">
+  Flash message goes here.
+</div>
+ +
+ Flash message goes here. +
+
<div class="flash flash-error">
+  Flash message goes here.
+</div>
+ +

With icon

+ +

Add an icon to the left of the flash message to give it some funky fresh attention. Just add .flash-with-icon and your Octicon.

+ +
+ + Flash message with an icon goes here. +
+
<div class="flash flash-with-icon">
+  <span class="octicon octicon-alert"></span>
+  Flash message with an icon goes here.
+</div>
+ +

Dismiss

+ +

Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message.

+ +
+ + Dismissable flash message goes here. +
+
<div class="flash">
+  <span class="octicon octicon-x flash-close js-flash-close"></span>
+  Dismissable flash message goes here.
+</div>
+ + +
+
+
+ + + +
+ + + + + diff --git a/archive/avatars/index.html b/archive/avatars/index.html new file mode 100644 index 0000000..fb351ae --- /dev/null +++ b/archive/avatars/index.html @@ -0,0 +1,166 @@ + + + + + + + + + + + + + Avatars · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Avatars +

+
+

Avatars are images that users can set as their profile picture. On GitHub, they’re always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.

+ +

Contents

+ + + +

Basic example

+ +

Add .avatar to any <img> element to make it an avatar. This resets some key styles for alignment, address a Firefox image placeholder bug, and rounds the corners.

+ +

Be sure to set width and height attributes for maximum browser performance.

+ +
+
<img class="avatar" src="https://avatars3.githubusercontent.com/u/9919?v=3&s=144" width="72" height="72">
+ +

Small avatars

+ +

We occasionally use smaller avatars. Anything less than 48px wide should include the .avatar-small modifier class to reset the border-radius to a more appropriate level.

+ +
+
<img class="avatar avatar-small" src="https://avatars3.githubusercontent.com/u/9919?v=3&s=64" width="32" height="32">
+ +

Parent-child avatars

+ +

When you need a larger parent avatar, and a smaller child one, overlaid slightly, use the parent-child classes.

+ +
+ + +
+
<div class="avatar-parent-child left">
+  <img class="avatar" src="https://avatars3.githubusercontent.com/u/9919?v=3&s=96" width="48" height="48">
+  <img class="avatar avatar-child" src="https://avatars3.githubusercontent.com/u/9919?v=3&s=40" width="20" height="20">
+</div>
+ + +
+
+
+ + + +
+ + + + + diff --git a/archive/blankslate/index.html b/archive/blankslate/index.html new file mode 100644 index 0000000..4fd274b --- /dev/null +++ b/archive/blankslate/index.html @@ -0,0 +1,245 @@ + + + + + + + + + + + + + Blankslate · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Blankslate +

+
+

Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn’t there. Be sure to provide an action to add content as well.

+ +

Contents

+ + + +

Basic example

+ +

Wrap some content in the outer .blankslate wrapper to give it the blankslate appearance.

+ +
+

This is a blank slate

+

Use it to provide information when no dynamic content exists.

+
+
<div class="blankslate">
+  <h3>This is a blank slate</h3>
+  <p>Use it to provide information when no dynamic content exists.</p>
+</div>
+ +

With Octicons

+ +

When it helps the message, include (relevant) icons in your blank slate. Add .blankslate-icon to any .mega-octicons as the first elements in the blankslate, like so.

+ +
+ + + +

This is a blank slate

+

Use it to provide information when no dynamic content exists.

+
+
<div class="blankslate">
+  <span class="mega-octicon octicon-git-commit blankslate-icon"></span>
+  <span class="mega-octicon octicon-tag blankslate-icon"></span>
+  <span class="mega-octicon octicon-git-branch blankslate-icon"></span>
+  <h3>This is a blank slate</h3>
+  <p>Use it to provide information when no dynamic content exists.</p>
+</div>
+ +

Variations

+ +

Add an additional optional class to the .blankslate to change its appearance.

+ +

Narrow

+ +

Narrows the blankslate container to not occupy the entire available width.

+ +
+

This is a blank slate

+

Use it to provide information when no dynamic content exists.

+
+
<div class="blankslate blankslate-narrow">
+  <h3>This is a blank slate</h3>
+  <p>Use it to provide information when no dynamic content exists.</p>
+</div>
+ +

Capped

+ +

Removes the border-radius on the top corners.

+ +
+

This is a blank slate

+

Use it to provide information when no dynamic content exists.

+
+
<div class="blankslate blankslate-capped">
+  <h3>This is a blank slate</h3>
+  <p>Use it to provide information when no dynamic content exists.</p>
+</div>
+ +

Spacious

+ +

Significantly increases the vertical padding.

+ +
+

This is a blank slate

+

Use it to provide information when no dynamic content exists.

+
+
<div class="blankslate blankslate-spacious">
+  <h3>This is a blank slate</h3>
+  <p>Use it to provide information when no dynamic content exists.</p>
+</div>
+ +

Large

+ +

Increases the size of the text in the blankslate

+ +
+

This is a blank slate

+

Use it to provide information when no dynamic content exists.

+
+
<div class="blankslate blankslate-large">
+  <h3>This is a blank slate</h3>
+  <p>Use it to provide information when no dynamic content exists.</p>
+</div>
+ +

No background

+ +

Removes the background-color and border.

+ +
+

This is a blank slate

+

Use it to provide information when no dynamic content exists.

+
+
<div class="blankslate blankslate-clean-background">
+  <h3>This is a blank slate</h3>
+  <p>Use it to provide information when no dynamic content exists.</p>
+</div>
+ + +
+
+
+ + + +
+ + + + + diff --git a/archive/buttons/index.html b/archive/buttons/index.html new file mode 100644 index 0000000..09fe7a3 --- /dev/null +++ b/archive/buttons/index.html @@ -0,0 +1,353 @@ + + + + + + + + + + + + + Buttons · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Buttons +

+
+

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

+ +

Contents

+ + + +

Default buttons

+ +

Use the standard—yet classy—.btn for form actions and primary page actions. These are used extensively around the site.

+ +

When using a <button> element, always specify a type. When using a <a> element, always add role="button" for accessibility.

+ +
+Link button
+
<button class="btn" type="button">Button button</button>
+<a class="btn" href="#" role="button">Link button</a>
+ +

You can find them in two sizes: the default .btn and the smaller .btn-sm.

+ +
+
+
<button class="btn" type="button">Button</button>
+<button class="btn btn-sm" type="button">Small button</button>
+ +

Primary

+ +

Primary buttons are green and are used to indicate the primary action on a page. When you need your buttons to stand out, use .btn.btn-primary. You can use it with both button sizes—just add .btn-primary.

+ +
+
+
<button class="btn btn-primary" type="button">Primary button</button>
+<button class="btn btn-sm btn-primary" type="button">Small primary button</button>
+ +

Danger

+ +

Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add .btn-danger.

+ +
+
+
<button class="btn btn-danger" type="button">Danger button</button>
+<button class="btn btn-sm btn-danger" type="button">Small danger button</button>
+ +

Outline

+ +

Outline buttons downplay an action as they appear like boxy links. Just add .btn-outline and go.

+ +
+
+
<button class="btn btn-outline" type="button">Outline button</button>
+<button class="btn btn-sm btn-outline" type="button">Outline button</button>
+ +

Disabled state

+ +

Disable <button> elements with the boolean disabled attribute and <a> elements with the .disabled class.

+ +
+Disabled button
+
<button class="btn" type="button" disabled>Disabled button</button>
+<a class="btn disabled" href="#" role="button">Disabled button</a>
+ +

Similar styles are applied to primary, danger, and outline buttons:

+ +
+Disabled button
+
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
+<a class="btn btn-primary disabled" href="#" role="button">Disabled button</a>
+ +
+Disabled button
+
<button class="btn btn-danger" type="button" disabled>Disabled button</button>
+<a class="btn btn-danger disabled" href="#" role="button">Disabled button</a>
+ +
+Disabled button
+
<button class="btn btn-outline" type="button" disabled>Disabled button</button>
+<a class="btn btn-outline disabled" href="#" role="button">Disabled button</a>
+ +

Block buttons

+ +

Make any button full-width by adding .btn-block. It adds width: 100%;, changes the display from inline-block to block, and centers the button text.

+ +

+

+
<p><button class="btn btn-block" type="button">Block button</button></p>
+<p><button class="btn btn-sm btn-block" type="button">Small block button</button></p>
+ +

With counts

+ +

You can easily append a count to a small button. Add the .with-count class to the .btn-sm and then add the .social-count after the button.

+ +

Be sure to clear the float added by the additional class.

+ +
+ + + Watch + + +
+
<div class="clearfix">
+  <a class="btn btn-sm btn-with-count" href="#" role="button">
+    <span class="octicon octicon-eye"></span>
+    Watch
+  </a>
+  <a class="social-count" href="#">6</a>
+</div>
+ +

You can also use the counter component within buttons:

+ +
+ + + + + +
+
<button class="btn" type="button">
+  Button
+  <span class="counter">12</span>
+</button>
+
+<button class="btn btn-primary" type="button">
+  Button
+  <span class="counter">12</span>
+</button>
+
+<button class="btn btn-danger" type="button">
+  Button
+  <span class="counter">12</span>
+</button>
+
+<button class="btn btn-outline" type="button">
+  Button
+  <span class="counter">12</span>
+</button>
+ +

Button groups

+ +

Have a hankering for a series of buttons that are attached to one another? Wrap them in a .btn-group and the buttons will be rounded and spaced automatically.

+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+
<div class="btn-group">
+  <button class="btn" type="button">Button</button>
+  <button class="btn" type="button">Button</button>
+  <button class="btn" type="button">Button</button>
+</div>
+
+<div class="btn-group">
+  <button class="btn btn-outline" type="button">Button</button>
+  <button class="btn btn-outline" type="button">Button</button>
+  <button class="btn btn-outline" type="button">Button</button>
+</div>
+
+<div class="btn-group">
+  <button class="btn btn-sm" type="button">Button</button>
+  <button class="btn btn-sm" type="button">Button</button>
+  <button class="btn btn-sm" type="button">Button</button>
+</div>
+ +

Add .btn-group-form to <form>s within .btn-groups for proper spacing and rounded corners.

+ +
+
+ +
+ + +
+
<div class="btn-group">
+  <form class="btn-group-form">
+    <button class="btn" type="button">Button in a form</button>
+  </form>
+  <button class="btn" type="button">Button</button>
+  <button class="btn" type="button">Button</button>
+</div>
+ +

Hidden text button

+ +

Use .hidden-text-expander to indicate and toggle hidden text.

+ +
+ +
+
<span class="hidden-text-expander">
+  <button type="button" class="ellipsis-expander">&hellip;</button>
+</span>
+ +

You can also make the expander appear inline by adding .inline.

+ +
+
+
+ + + +
+ + + + + diff --git a/archive/colors/index.html b/archive/colors/index.html new file mode 100644 index 0000000..49077f7 --- /dev/null +++ b/archive/colors/index.html @@ -0,0 +1,141 @@ + + + + + + + + + + + + + Colors · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Colors +

+
+

The look and feel of our company and product relies on using a handful of specific colors that help convey meaning and purpose.

+ +

Branding

+ +
+
+
+
+
+ +

Grayscale

+ +
+
+
+ +
+
+
+ + + +
+ + + + + diff --git a/archive/docs.css b/archive/docs.css new file mode 100644 index 0000000..c1bb088 --- /dev/null +++ b/archive/docs.css @@ -0,0 +1,6 @@ +/*! + * Primer + * http://primercss.io + * + * Released under MIT license. Copyright 2015 GitHub, Inc. + *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}*{box-sizing:border-box}input,select,textarea,button{font:13px/1.4 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}body{font:13px/1.4 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";color:#333;background-color:#fff}a{color:#4078c0;text-decoration:none}a:hover,a:active{text-decoration:underline}hr,.rule{height:0;margin:15px 0;overflow:hidden;background:transparent;border:0;border-bottom:1px solid #ddd}hr::before,.rule::before{display:table;content:""}hr::after,.rule::after{display:table;clear:both;content:""}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}button{cursor:pointer}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0;line-height:1.5}h1{font-size:30px}h2{font-size:21px}h3{font-size:16px}h4{font-size:14px}h5{font-size:12px}h6{font-size:11px}p{margin-top:0;margin-bottom:10px}small{font-size:90%}blockquote{margin:0}ul,ol{padding-left:0;margin-top:0;margin-bottom:0}ol ol,ul ol{list-style-type:lower-roman}ul ul ol,ul ol ol,ol ul ol,ol ol ol{list-style-type:lower-alpha}dd{margin-left:0}tt,code{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px}pre{margin-top:0;margin-bottom:0;font:12px Consolas,"Liberation Mono",Menlo,Courier,monospace}.border{border:1px #e5e5e5 solid !important}.border-top{border-top:1px #e5e5e5 solid !important}.border-right{border-right:1px #e5e5e5 solid !important}.border-bottom{border-bottom:1px #e5e5e5 solid !important}.border-left{border-left:1px #e5e5e5 solid !important}.border-y{border-top:1px #e5e5e5 solid !important;border-bottom:1px #e5e5e5 solid !important}.border-blue{border-color:#c5d5dd !important}.border-gray-light{border-color:#eee !important}.border-gray-dark{border-color:#ddd !important}.border-0{border:0 !important}.border-top-0{border-top:0 !important}.border-right-0{border-right:0 !important}.border-bottom-0{border-bottom:0 !important}.border-left-0{border-left:0 !important}.rounded-0{border-radius:0 !important}.rounded-1{border-radius:3px !important}.rounded-2{border-radius:6px !important}.bg-white{background-color:#fff !important}.bg-blue{background-color:#4078c0 !important}.bg-blue-light{background-color:#f2f8fa !important}.bg-gray-dark{background-color:#333 !important}.bg-gray{background-color:#f5f5f5 !important}.bg-gray-light{background-color:#fafafa !important}.bg-green{background-color:#6cc644 !important}.bg-red{background-color:#bd2c00 !important}.text-blue{color:#4078c0 !important}.danger,.text-closed,.text-danger,.text-diff-deleted,.text-error,.text-failure,.text-reverted,.text-red{color:#bd2c00 !important}.text-gray-light{color:#999 !important}.text-muted,.text-gray{color:#767676 !important}.mute,.text-gray-dark{color:#333 !important}.text-diff-added,.text-success,.text-open,.text-green{color:#55a532 !important}.text-orange{color:#c9510c !important}.text-merged,.text-purple{color:#6e5494 !important}.text-white{color:#fff !important}.text-inherit{color:inherit !important}.link-blue{color:#4078c0 !important}.link-gray-dark{color:#333 !important}.link-gray{color:#767676 !important}.text-renamed{color:#fffa5d !important}.text-pending{color:#cea61b !important}.muted-link{color:#767676 !important}.muted-link:hover{color:#4078c0 !important;text-decoration:none}.position-static{position:static !important}.position-relative{position:relative !important}.position-absolute{position:absolute !important}.position-fixed{position:fixed !important}.top-0{top:0 !important}.right-0{right:0 !important}.bottom-0{bottom:0 !important}.left-0{left:0 !important}.d-block{display:block !important}.d-inline{display:inline !important}.d-inline-block{display:inline-block !important}.hidden,.d-none{display:none !important}.clearfix::before{display:table;content:""}.clearfix::after{display:table;clear:both;content:""}.right,.float-right{float:right !important}.left,.float-left{float:left !important}.m-0{margin:0 !important}.mt-0{margin-top:0 !important}.mr-0{margin-right:0 !important}.mb-0{margin-bottom:0 !important}.ml-0{margin-left:0 !important}.mx-0{margin-right:0 !important;margin-left:0 !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.m-1{margin:3px !important}.mt-1{margin-top:3px !important}.mr-1{margin-right:3px !important}.mb-1{margin-bottom:3px !important}.ml-1{margin-left:3px !important}.mx-1{margin-right:3px !important;margin-left:3px !important}.my-1{margin-top:3px !important;margin-bottom:3px !important}.m-2{margin:6px !important}.mt-2{margin-top:6px !important}.mr-2{margin-right:6px !important}.mb-2{margin-bottom:6px !important}.ml-2{margin-left:6px !important}.mx-2{margin-right:6px !important;margin-left:6px !important}.my-2{margin-top:6px !important;margin-bottom:6px !important}.m-3{margin:12px !important}.mt-3{margin-top:12px !important}.mr-3{margin-right:12px !important}.mb-3{margin-bottom:12px !important}.ml-3{margin-left:12px !important}.mx-3{margin-right:12px !important;margin-left:12px !important}.my-3{margin-top:12px !important;margin-bottom:12px !important}.m-4{margin:24px !important}.mt-4{margin-top:24px !important}.mr-4{margin-right:24px !important}.mb-4{margin-bottom:24px !important}.ml-4{margin-left:24px !important}.mx-4{margin-right:24px !important;margin-left:24px !important}.my-4{margin-top:24px !important;margin-bottom:24px !important}.m-5{margin:36px !important}.mt-5{margin-top:36px !important}.mr-5{margin-right:36px !important}.mb-5{margin-bottom:36px !important}.ml-5{margin-left:36px !important}.mx-5{margin-right:36px !important;margin-left:36px !important}.my-5{margin-top:36px !important;margin-bottom:36px !important}.m-6{margin:48px !important}.mt-6{margin-top:48px !important}.mr-6{margin-right:48px !important}.mb-6{margin-bottom:48px !important}.ml-6{margin-left:48px !important}.mx-6{margin-right:48px !important;margin-left:48px !important}.my-6{margin-top:48px !important;margin-bottom:48px !important}.m-auto{margin-right:auto !important;margin-left:auto !important}.p-0{padding:0 !important}.pt-0{padding-top:0 !important}.pr-0{padding-right:0 !important}.pb-0{padding-bottom:0 !important}.pl-0{padding-left:0 !important}.px-0{padding-right:0 !important;padding-left:0 !important}.py-0{padding-top:0 !important;padding-bottom:0 !important}.p-1{padding:3px !important}.pt-1{padding-top:3px !important}.pr-1{padding-right:3px !important}.pb-1{padding-bottom:3px !important}.pl-1{padding-left:3px !important}.px-1{padding-right:3px !important;padding-left:3px !important}.py-1{padding-top:3px !important;padding-bottom:3px !important}.p-2{padding:6px !important}.pt-2{padding-top:6px !important}.pr-2{padding-right:6px !important}.pb-2{padding-bottom:6px !important}.pl-2{padding-left:6px !important}.px-2{padding-right:6px !important;padding-left:6px !important}.py-2{padding-top:6px !important;padding-bottom:6px !important}.p-3{padding:12px !important}.pt-3{padding-top:12px !important}.pr-3{padding-right:12px !important}.pb-3{padding-bottom:12px !important}.pl-3{padding-left:12px !important}.px-3{padding-right:12px !important;padding-left:12px !important}.py-3{padding-top:12px !important;padding-bottom:12px !important}.p-4{padding:24px !important}.pt-4{padding-top:24px !important}.pr-4{padding-right:24px !important}.pb-4{padding-bottom:24px !important}.pl-4{padding-left:24px !important}.px-4{padding-right:24px !important;padding-left:24px !important}.py-4{padding-top:24px !important;padding-bottom:24px !important}.p-5{padding:36px !important}.pt-5{padding-top:36px !important}.pr-5{padding-right:36px !important}.pb-5{padding-bottom:36px !important}.pl-5{padding-left:36px !important}.px-5{padding-right:36px !important;padding-left:36px !important}.py-5{padding-top:36px !important;padding-bottom:36px !important}.p-6{padding:48px !important}.pt-6{padding-top:48px !important}.pr-6{padding-right:48px !important}.pb-6{padding-bottom:48px !important}.pl-6{padding-left:48px !important}.px-6{padding-right:48px !important;padding-left:48px !important}.py-6{padding-top:48px !important;padding-bottom:48px !important}.text-right{text-align:right !important}.text-left{text-align:left !important}.text-center{text-align:center !important}.text-normal{font-weight:normal !important}.text-bold{font-weight:bold !important}.text-italic{font-style:italic !important}.no-underline{text-decoration:none !important}.no-wrap{white-space:nowrap !important}.vertical-middle{vertical-align:middle !important}.text-small{font-size:12px !important}.lead,.page-title+.markdown-body>p:first-child{margin-bottom:30px;font-size:20px;font-weight:300;color:#555}.text-emphasized{font-weight:bold;color:#333}fieldset{padding:0;margin:0;border:0}label{font-size:13px;font-weight:bold}.form-control,.form-select{min-height:34px;padding:7px 8px;font-size:13px;color:#333;vertical-align:middle;background-color:#fff;background-repeat:no-repeat;background-position:right 8px center;border:1px solid #ddd;border-radius:3px;outline:none;box-shadow:inset 0 1px 2px rgba(0,0,0,0.075)}.form-control.focus,.form-control:focus,.form-select.focus,.form-select:focus{border-color:#51a7e8;outline:none;box-shadow:inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5)}.input-contrast{background-color:#fafafa}.input-contrast:focus{background-color:#fff}::-webkit-input-placeholder{color:#999}::-moz-placeholder{color:#999}:-ms-input-placeholder{color:#999}::placeholder{color:#999}.input-sm{min-height:26px;padding-top:4px;padding-bottom:4px;font-size:12px}.input-lg{padding:6px 10px;font-size:16px}.input-block{display:block;width:100%}.input-monospace{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}.form-checkbox{padding-left:20px;margin:15px 0;vertical-align:middle}.form-checkbox label em.highlight{position:relative;left:-4px;padding:2px 4px;font-style:normal;background:#fffbdc;border-radius:3px}.form-checkbox input[type=checkbox],.form-checkbox input[type=radio]{float:left;margin:2px 0 0 -20px;vertical-align:middle}.form-checkbox .note{display:block;margin:0;font-size:12px;font-weight:normal;color:#666}.hfields{margin:15px 0}.hfields::before{display:table;content:""}.hfields::after{display:table;clear:both;content:""}.hfields .form-group{float:left;margin:0 30px 0 0}.hfields .form-group dt label{display:inline-block;margin:5px 0 0;color:#666}.hfields .form-group dt img{position:relative;top:-2px}.hfields .btn{float:left;margin:28px 25px 0 -20px}.hfields .form-select{margin-top:5px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none;appearance:none}.form-actions::before{display:table;content:""}.form-actions::after{display:table;clear:both;content:""}.form-actions .btn{float:right}.form-actions .btn+.btn{margin-right:5px}.form-warning{padding:8px 10px;margin:10px 0;font-size:14px;color:#4c4a42;background:#fff9ea;border:1px solid #dfd8c2;border-radius:3px}.form-warning p{margin:0;line-height:1.5}.form-warning a{font-weight:bold}.form-select{display:inline-block;max-width:100%;height:34px;padding-right:24px;padding-right:8px \9;background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;background-image:none \9;background-size:8px 10px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-select::-ms-expand{opacity:0}.form-select[multiple]{height:auto}.select-sm{height:26px;min-height:26px;padding-top:3px;padding-bottom:3px;font-size:12px}.select-sm[multiple]{height:auto;min-height:0}.form-group{margin:15px 0}.form-group .form-control{width:440px;max-width:100%;margin-right:5px;background-color:#fafafa}.form-group .form-control:focus{background-color:#fff}.form-group .form-control.shorter{width:130px}.form-group .form-control.short{width:250px}.form-group .form-control.long{width:100%}.form-group textarea.form-control{width:100%;height:200px;min-height:200px}.form-group textarea.form-control.short{height:50px;min-height:50px}.form-group dt{margin:0 0 6px}.form-group label{position:relative}.form-group.flattened dt{float:left;margin:0;line-height:32px}.form-group.flattened dd{line-height:32px}.form-group dd h4{margin:4px 0 0}.form-group dd h4.is-error{color:#bd2c00}.form-group dd h4.is-success{color:#55a532}.form-group dd h4+.note{margin-top:0}.form-group.required dt label::after{padding-left:5px;color:#bd2c00;content:"*"}.form-group .success,.form-group .error,.form-group .indicator{display:none;font-size:12px;font-weight:bold}.form-group.loading{opacity:0.5}.form-group.loading .indicator{display:inline}.form-group.loading .spinner{display:inline-block;vertical-align:middle}.form-group.successful .success{display:inline;color:#55a532}.form-group.warn .warning,.form-group.warn .error,.form-group.errored .warning,.form-group.errored .error{position:absolute;z-index:10;display:inline-block;max-width:450px;padding:5px 8px;margin:3px 0 0;font-size:13px;font-weight:normal;border-style:solid;border-width:1px;border-radius:3px}.form-group.warn .warning::after,.form-group.warn .warning::before,.form-group.warn .error::after,.form-group.warn .error::before,.form-group.errored .warning::after,.form-group.errored .warning::before,.form-group.errored .error::after,.form-group.errored .error::before{position:absolute;bottom:100%;left:10px;z-index:15;width:0;height:0;pointer-events:none;content:" ";border:solid transparent}.form-group.warn .warning::after,.form-group.warn .error::after,.form-group.errored .warning::after,.form-group.errored .error::after{border-width:5px}.form-group.warn .warning::before,.form-group.warn .error::before,.form-group.errored .warning::before,.form-group.errored .error::before{margin-left:-1px;border-width:6px}.form-group.warn .warning{color:#4c4a42;background-color:#fff9ea;border-color:#dfd8c2}.form-group.warn .warning::after{border-bottom-color:#fff9ea}.form-group.warn .warning::before{border-bottom-color:#dfd8c2}.form-group.errored label{color:#bd2c00}.form-group.errored .error{color:#911;background-color:#fcdede;border-color:#d2b2b2}.form-group.errored .error::after{border-bottom-color:#fcdede}.form-group.errored .error::before{border-bottom-color:#d2b2b2}.note{min-height:17px;margin:4px 0 2px;font-size:12px;color:#767676}.note .spinner{margin-right:3px;vertical-align:middle}dl.form-group>dd .form-control.is-autocheck-loading,dl.form-group>dd .form-control.is-autocheck-successful,dl.form-group>dd .form-control.is-autocheck-errored{padding-right:30px}dl.form-group>dd .form-control.is-autocheck-loading{background-image:url("/images/spinners/octocat-spinner-16px.gif")}dl.form-group>dd .form-control.is-autocheck-successful{background-image:url("/images/modules/ajax/success.png")}dl.form-group>dd .form-control.is-autocheck-errored{background-image:url("/images/modules/ajax/error.png")}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){dl.form-group>dd .form-control.is-autocheck-loading,dl.form-group>dd .form-control.is-autocheck-successful,dl.form-group>dd .form-control.is-autocheck-errored{background-size:16px 16px}dl.form-group>dd .form-control.is-autocheck-loading{background-image:url("/images/spinners/octocat-spinner-32.gif")}dl.form-group>dd .form-control.is-autocheck-successful{background-image:url("/images/modules/ajax/success@2x.png")}dl.form-group>dd .form-control.is-autocheck-errored{background-image:url("/images/modules/ajax/error@2x.png")}}.form-cards{height:31px;margin:0 0 15px}.form-cards .card{float:left;width:47px;height:31px;text-indent:-9999px;background-image:url("/images/modules/pricing/credit-cards-@1x.png");background-position:0 0;opacity:0.6}.form-cards .card.visa{background-position:0 0}.form-cards .card.amex{background-position:-50px 0}.form-cards .card.mastercard{background-position:-100px 0}.form-cards .card.discover{background-position:-150px 0}.form-cards .card.jcb{background-position:-200px 0}.form-cards .card.dinersclub{background-position:-250px 0}.form-cards .card.enabled{opacity:1}.form-cards .card.disabled{opacity:0.2}.form-cards>.cards{margin:0}.form-cards>.cards>li{float:left;margin:0 4px 0 0;list-style-type:none}.form-cards>.cards>li.text{line-height:31px}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){.form-cards>.cards .card{background-image:url("/images/modules/pricing/credit-cards-@2x.png");background-size:300px 31px}}.status-indicator{display:inline-block;width:16px;height:16px;margin-left:5px;vertical-align:text-bottom}.status-indicator .octicon{display:none}.status-indicator-success{width:12px;margin-left:7px}.status-indicator-success::before{content:""}.status-indicator-success .octicon-check{display:inline-block;color:#6cc644;fill:#6cc644}.status-indicator-success .octicon-x{display:none}.status-indicator-failed{margin-left:7px}.status-indicator-failed::before{content:""}.status-indicator-failed .octicon-check{display:none}.status-indicator-failed .octicon-x{display:inline-block;color:#bd2c00;fill:#bd2c00}.status-indicator-loading{width:16px;background:url("/images/spinners/octocat-spinner-32-EAF2F5.gif") 0 0 no-repeat;background-size:16px}.inline-form{display:inline-block}.inline-form .btn-plain{background-color:transparent;border:0}.drag-and-drop{padding:7px 10px;margin:0;font-size:13px;line-height:16px;color:#767676;background-color:#fafafa;border:1px solid #ccc;border-top:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.drag-and-drop .default,.drag-and-drop .loading,.drag-and-drop .error{display:none}.drag-and-drop .error{color:#bd2c00}.drag-and-drop img{vertical-align:top}.is-default .drag-and-drop .default{display:inline-block}.is-uploading .drag-and-drop .loading{display:inline-block}.is-bad-file .drag-and-drop .bad-file{display:inline-block}.is-duplicate-filename .drag-and-drop .duplicate-filename{display:inline-block}.is-too-big .drag-and-drop .too-big{display:inline-block}.is-hidden-file .drag-and-drop .hidden-file{display:inline-block}.is-empty .drag-and-drop .empty{display:inline-block}.is-bad-permissions .drag-and-drop .bad-permissions{display:inline-block}.is-repository-required .drag-and-drop .repository-required{display:inline-block}.drag-and-drop-error-info{font-weight:normal;color:#767676}.drag-and-drop-error-info a{color:#4078c0}.is-failed .drag-and-drop .failed-request{display:inline-block}.manual-file-chooser{position:absolute;width:240px;padding:5px;margin-left:-80px;cursor:pointer;opacity:0.0001}.manual-file-chooser:hover+.manual-file-chooser-text{text-decoration:underline}.btn .manual-file-chooser{top:0;padding:0;line-height:34px}.upload-enabled textarea{display:block;border-bottom:1px dashed #ddd;border-bottom-right-radius:0;border-bottom-left-radius:0}.focused .drag-and-drop{border-color:#51a7e8;box-shadow:rgba(81,167,232,0.5) 0 0 3px}.dragover textarea,.dragover .drag-and-drop{box-shadow:#c9ff00 0 0 3px}.write-content{position:relative}.previewable-comment-form{position:relative}.previewable-comment-form .tabnav{position:relative;padding:10px 10px 0}.previewable-comment-form .comment{border:1px solid #cacaca}.previewable-comment-form .comment-form-error{margin-bottom:10px}.previewable-comment-form .write-content,.previewable-comment-form .preview-content{display:none;padding:0 0 10px;margin:0 10px}.previewable-comment-form.write-selected .write-content,.previewable-comment-form.preview-selected .preview-content{display:block}.previewable-comment-form textarea{display:block;width:100%;min-height:100px;max-height:500px;padding:10px;resize:vertical}.form-action-spacious{margin-top:10px}div.composer{margin-top:0;border:0}.composer .comment-form-textarea{height:200px;min-height:200px}.composer .tabnav{margin:0 0 10px}h2.account{margin:15px 0 0;font-size:18px;font-weight:normal;color:#666}p.explain{position:relative;font-size:12px;color:#666}p.explain strong{color:#333}p.explain .octicon{margin-right:5px;color:#bbb}p.explain .minibutton{top:-4px;float:right}.form-group label{position:static}.container{width:980px;margin-right:auto;margin-left:auto}.container::before{display:table;content:""}.container::after{display:table;clear:both;content:""}.columns{margin-right:-10px;margin-left:-10px}.columns::before{display:table;content:""}.columns::after{display:table;clear:both;content:""}.column{float:left;padding-right:10px;padding-left:10px}.one-third{width:33.333333%}.two-thirds{width:66.666667%}.one-fourth{width:25%}.one-half{width:50%}.three-fourths{width:75%}.one-fifth{width:20%}.four-fifths{width:80%}.single-column{padding-right:10px;padding-left:10px}.table-column{display:table-cell;width:1%;padding-right:10px;padding-left:10px;vertical-align:top}.centered{display:block;float:none;margin-right:auto;margin-left:auto}.btn{position:relative;display:inline-block;padding:6px 12px;font-size:13px;font-weight:bold;line-height:20px;color:#333;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#eee;background-image:-webkit-linear-gradient(#fcfcfc, #eee);background-image:linear-gradient(#fcfcfc, #eee);border:1px solid #d5d5d5;border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.btn i{font-style:normal;font-weight:500;opacity:0.6}.btn .octicon{vertical-align:text-top}.btn .counter{text-shadow:none;background-color:#e5e5e5}.btn:focus{text-decoration:none;border-color:#51a7e8;outline:none;box-shadow:0 0 5px rgba(81,167,232,0.5)}.btn:focus:hover,.btn.selected:focus{border-color:#51a7e8}.btn:hover,.btn:active,.btn.zeroclipboard-is-hover,.btn.zeroclipboard-is-active{text-decoration:none;background-color:#ddd;background-image:-webkit-linear-gradient(#eee, #ddd);background-image:linear-gradient(#eee, #ddd);border-color:#ccc}.btn:active,.btn.selected,.btn.zeroclipboard-is-active{background-color:#dcdcdc;background-image:none;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)}.btn.selected:hover{background-color:#cfcfcf}.btn:disabled,.btn:disabled:hover,.btn.disabled,.btn.disabled:hover{color:rgba(102,102,102,0.5);cursor:default;background-color:rgba(229,229,229,0.5);background-image:none;border-color:rgba(197,197,197,0.5);box-shadow:none}.btn-primary{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.15);background-color:#60b044;background-image:-webkit-linear-gradient(#8add6d, #60b044);background-image:linear-gradient(#8add6d, #60b044);border-color:#5ca941}.btn-primary .counter{color:#60b044;background-color:#fff}.btn-primary:hover{color:#fff;background-color:#569e3d;background-image:-webkit-linear-gradient(#79d858, #569e3d);background-image:linear-gradient(#79d858, #569e3d);border-color:#4a993e}.btn-primary:active,.btn-primary.selected{text-shadow:0 1px 0 rgba(0,0,0,0.15);background-color:#569e3d;background-image:none;border-color:#418737}.btn-primary.selected:hover{background-color:#4c8b36}.btn-primary:disabled,.btn-primary:disabled:hover,.btn-primary.disabled,.btn-primary.disabled:hover{color:#fefefe;background-color:#add39f;background-image:-webkit-linear-gradient(#c3ecb4, #add39f);background-image:linear-gradient(#c3ecb4, #add39f);border-color:#b9dcac #b9dcac #a7c89b}.btn-danger{color:#900}.btn-danger:hover{color:#fff;background-color:#b33630;background-image:-webkit-linear-gradient(#dc5f59, #b33630);background-image:linear-gradient(#dc5f59, #b33630);border-color:#cd504a}.btn-danger:active,.btn-danger.selected{color:#fff;background-color:#b33630;background-image:none;border-color:#9f312c}.btn-danger.selected:hover{background-color:#9f302b}.btn-danger:disabled,.btn-danger:disabled:hover,.btn-danger.disabled,.btn-danger.disabled:hover{color:#cb7f7f;background-color:#efefef;background-image:-webkit-linear-gradient(#fefefe, #efefef);background-image:linear-gradient(#fefefe, #efefef);border-color:#e1e1e1}.btn-danger:hover .counter,.btn-danger:active .counter,.btn-danger.selected .counter{color:#b33630;background-color:#fff}.btn-outline{color:#4078c0;background-color:#fff;background-image:none;border:1px solid #e5e5e5}.btn-outline .counter{background-color:#eee}.btn-outline:hover,.btn-outline:active,.btn-outline.selected,.btn-outline.zeroclipboard-is-hover,.btn-outline.zeroclipboard-is-active{color:#fff;background-color:#4078c0;background-image:none;border-color:#4078c0}.btn-outline:hover .counter,.btn-outline:active .counter,.btn-outline.selected .counter,.btn-outline.zeroclipboard-is-hover .counter,.btn-outline.zeroclipboard-is-active .counter{color:#4078c0;background-color:#fff}.btn-outline.selected:hover{background-color:#396cad}.btn-outline:disabled,.btn-outline:disabled:hover,.btn-outline.disabled,.btn-outline.disabled:hover{color:#767676;background-color:#fff;background-image:none;border-color:#e5e5e5}.btn-with-count{float:left;border-top-right-radius:0;border-bottom-right-radius:0}.btn-sm{padding:2px 10px}.hidden-text-expander{display:block}.hidden-text-expander.inline{position:relative;top:-1px;display:inline-block;margin-left:5px;line-height:0}.hidden-text-expander a,.ellipsis-expander{display:inline-block;height:12px;padding:0 5px 5px;font-size:12px;font-weight:bold;line-height:6px;color:#555;text-decoration:none;vertical-align:middle;background:#ddd;border:0;border-radius:1px}.hidden-text-expander a:hover,.ellipsis-expander:hover{text-decoration:none;background-color:#ccc}.hidden-text-expander a:active,.ellipsis-expander:active{color:#fff;background-color:#4183c4}.social-count{float:left;padding:2px 7px;font-size:11px;font-weight:bold;line-height:20px;color:#333;vertical-align:middle;background-color:#fff;border:1px solid #ddd;border-left:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.social-count:hover,.social-count:active{text-decoration:none}.social-count:hover{color:#4078c0;cursor:pointer}.btn-block{display:block;width:100%;text-align:center}.btn-link{display:inline-block;padding:0;font-size:inherit;color:#4078c0;white-space:nowrap;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.btn-link:hover,.btn-link:focus{text-decoration:underline}.btn-link:focus{outline:none}.btn-group{display:inline-block;vertical-align:middle}.btn-group::before{display:table;content:""}.btn-group::after{display:table;clear:both;content:""}.btn-group .btn{position:relative;float:left}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0}.btn-group .btn:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group .btn:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .btn:hover,.btn-group .btn:active,.btn-group .btn.selected{z-index:2}.btn-group .btn:focus{z-index:3}.btn-group .btn+.btn{margin-left:-1px}.btn-group .btn+.btn-group-form,.btn-group .btn-group-form+.btn,.btn-group .btn-group-form+.btn-group-form{margin-left:-1px}.btn-group .btn-group-form{float:left}.btn-group .btn-group-form .btn{border-radius:0}.btn-group .btn-group-form:first-child .btn{border-top-left-radius:3px;border-bottom-left-radius:3px}.btn-group .btn-group-form:last-child .btn{border-top-right-radius:3px;border-bottom-right-radius:3px}.btn-group+.btn-group,.btn-group+.btn{margin-left:5px}.flash{position:relative;padding:15px;font-size:14px;line-height:1.5;color:#246;background-color:#e2eef9;border:1px solid #bac6d3;border-radius:3px}.flash p:last-child{margin-bottom:0}.flash-messages{margin-bottom:20px}.flash-close{float:right;width:34px;height:44px;margin:-11px;line-height:40px;color:inherit;text-align:center;cursor:pointer;background:none;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0.6}.flash-close:hover{opacity:1}.flash-action{float:right;margin-top:-4px;margin-left:20px}.flash-warn{color:#4c4a42;background-color:#fff9ea;border-color:#dfd8c2}.flash-error{color:#911;background-color:#fcdede;border-color:#d2b2b2}.flash-full{margin-top:-1px;border-width:1px 0;border-radius:0}.flash-with-icon .container{padding-left:40px}.flash-with-icon .flash-icon{float:left;margin-top:3px;margin-left:-25px}.flash-content{margin-top:0;margin-bottom:0;line-height:1.5}.warning{padding:0.5em;margin-bottom:0.8em;font-weight:bold;background-color:#fffccc}.avatar{display:inline-block;overflow:hidden;line-height:1;vertical-align:middle;border-radius:3px}.avatar-small{border-radius:2px}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-parent-child{position:relative}.avatar-child{position:absolute;right:-15%;bottom:-9%;background-color:#fff;border-radius:2px;box-shadow:-2px -2px 0 rgba(255,255,255,0.8)}.avatar-stack{display:inline-block;white-space:nowrap}.avatar-stack .avatar{position:relative;z-index:2;display:inline-block;width:20px;height:20px;margin-right:-15px;background-color:#fff;border-right:1px solid #fff;border-radius:2px;-webkit-transition:margin 0.1s ease-in-out;transition:margin 0.1s ease-in-out}.avatar-stack .avatar:first-child{z-index:3}.avatar-stack .avatar:last-child{z-index:1;margin-right:0}.avatar-stack:hover .avatar{margin-right:3px}.avatar-stack:hover .avatar:last-child{margin-right:0}.blankslate{position:relative;padding:30px;text-align:center;background-color:#fafafa;border:1px solid #e5e5e5;border-radius:3px;box-shadow:inset 0 0 10px rgba(0,0,0,0.05)}.blankslate code{padding:2px 5px 3px;font-size:14px;background:#fff;border:1px solid #eee;border-radius:3px}.blankslate-icon{margin-right:5px;margin-bottom:10px;margin-left:5px;color:#aaa}.blankslate-capped{border-radius:0 0 3px 3px}.blankslate-spacious{padding:100px 60px 120px}.blankslate-narrow{width:485px;margin:0 auto}.blankslate-large h3{margin:0.75em 0;font-size:20px}.blankslate-large p{font-size:16px}.blankslate-large p.has-fixed-width{width:540px;margin:0 auto;text-align:left}.blankslate-clean-background{background:none;border:0;box-shadow:none}.counter{display:inline-block;padding:2px 5px;font-size:11px;font-weight:bold;line-height:1;color:#666;background-color:#eee;border-radius:20px}.menu{margin-bottom:15px;list-style:none;background-color:#fff;border:1px solid #d8d8d8;border-radius:3px}.menu-item{position:relative;display:block;padding:8px 10px;text-shadow:0 1px 0 #fff;border-bottom:1px solid #eee}.menu-item:first-child{border-top:0;border-top-left-radius:2px;border-top-right-radius:2px}.menu-item:first-child::before{border-top-left-radius:2px}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:2px;border-bottom-left-radius:2px}.menu-item:last-child::before{border-bottom-left-radius:2px}.menu-item:hover{text-decoration:none;background-color:#f9f9f9}.menu-item.selected{font-weight:bold;color:#222;cursor:default;background-color:#fff}.menu-item.selected::before{position:absolute;top:0;bottom:0;left:0;width:2px;content:"";background-color:#d26911}.menu-item .octicon{width:16px;margin-right:5px;color:#333;text-align:center}.menu-item .counter{float:right;margin-left:5px}.menu-item .menu-warning{float:right;color:#d26911}.menu-item .avatar{float:left;margin-right:5px}.menu-item.alert .counter{color:#bd2c00}.menu-heading{display:block;padding:8px 10px;margin-top:0;margin-bottom:0;font-size:13px;font-weight:bold;line-height:20px;color:#555;background-color:#f7f7f7;border-bottom:1px solid #eee}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.menu-heading:last-child{border-bottom:0;border-bottom-right-radius:2px;border-bottom-left-radius:2px}.tabnav{margin-top:0;margin-bottom:15px;border-bottom:1px solid #ddd}.tabnav .counter{margin-left:5px}.tabnav-tabs{margin-bottom:-1px}.tabnav-tab{display:inline-block;padding:8px 12px;font-size:14px;line-height:20px;color:#666;text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0}.tabnav-tab.selected{color:#333;background-color:#fff;border-color:#ddd;border-radius:3px 3px 0 0}.tabnav-tab:hover,.tabnav-tab:focus{text-decoration:none}.tabnav-extra{display:inline-block;padding-top:10px;margin-left:10px;font-size:12px;color:#666}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:#4078c0;text-decoration:none}.tabnav-btn{margin-left:10px}.filter-list{list-style-type:none}.filter-list.small .filter-item{padding:4px 10px;margin:0 0 2px;font-size:12px}.filter-list.pjax-active .filter-item{color:#767676;background-color:transparent}.filter-list.pjax-active .filter-item.pjax-active{color:#fff;background-color:#4078c0}.filter-item{position:relative;display:block;padding:8px 10px;margin-bottom:5px;overflow:hidden;font-size:14px;color:#767676;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:3px}.filter-item:hover{text-decoration:none;background-color:#eee}.filter-item.selected{color:#fff;background-color:#4078c0}.filter-item.selected .octicon-remove-close{float:right;opacity:0.8}.filter-item .count{float:right;font-weight:bold}.filter-item .bar{position:absolute;top:2px;right:0;bottom:2px;z-index:-1;display:inline-block;background-color:#f1f1f1}.subnav{margin-bottom:20px}.subnav::before{display:table;content:""}.subnav::after{display:table;clear:both;content:""}.subnav>.right{margin-left:10px}.subnav-bordered{padding-bottom:20px;border-bottom:1px solid #eee}.subnav-flush{margin-bottom:0}.subnav-item{position:relative;float:left;padding:7px 14px;font-weight:bold;color:#666;border:1px solid #e5e5e5}.subnav-item+.subnav-item{margin-left:-1px}.subnav-item:hover,.subnav-item:focus{text-decoration:none;background-color:#f5f5f5}.subnav-item.selected,.subnav-item.selected:hover,.subnav-item.selected:focus{z-index:2;color:#fff;background-color:#4078c0;border-color:#4078c0}.subnav-item:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.subnav-item:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.subnav-search{position:relative;margin-left:10px}.subnav-search-input{width:320px;padding-left:30px;color:#767676;border-color:#d5d5d5}.subnav-search-input-wide{width:500px}.subnav-search-icon{position:absolute;top:9px;left:8px;display:block;color:#ccc;text-align:center;pointer-events:none}.subnav-search-context .btn{color:#555;border-top-right-radius:0;border-bottom-right-radius:0}.subnav-search-context .btn:hover,.subnav-search-context .btn:focus,.subnav-search-context .btn:active,.subnav-search-context .btn.selected{z-index:2}.subnav-search-context+.subnav-search{margin-left:-1px}.subnav-search-context+.subnav-search .subnav-search-input{border-top-left-radius:0;border-bottom-left-radius:0}.subnav-search-context .select-menu-modal-holder{z-index:30}.subnav-search-context .select-menu-modal{width:220px}.subnav-search-context .select-menu-item-icon{color:inherit}.subnav-spacer-right{padding-right:10px}.state{display:inline-block;padding:4px 8px;font-weight:bold;line-height:20px;color:#fff;text-align:center;background-color:#999;border-radius:3px}.state-open,.state-proposed,.state-reopened{background-color:#6cc644}.state-merged{background-color:#6e5494}.state-closed{background-color:#bd2c00}.state-renamed{background-color:#fffa5d}.tooltipped{position:relative}.tooltipped::after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font:normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";-webkit-font-smoothing:subpixel-antialiased;color:#fff;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,0.8);border-radius:3px;opacity:0}.tooltipped::before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(0,0,0,0.8);pointer-events:none;content:"";border:5px solid transparent;opacity:0}@-webkit-keyframes tooltip-appear{from{opacity:0}to{opacity:1}}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.tooltipped:hover::before,.tooltipped:hover::after,.tooltipped:active::before,.tooltipped:active::after,.tooltipped:focus::before,.tooltipped:focus::after{display:inline-block;text-decoration:none;-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:.4s;animation-delay:.4s}.tooltipped-no-delay:hover::before,.tooltipped-no-delay:hover::after,.tooltipped-no-delay:active::before,.tooltipped-no-delay:active::after,.tooltipped-no-delay:focus::before,.tooltipped-no-delay:focus::after{opacity:1;-webkit-animation:none;animation:none}.tooltipped-multiline:hover::after,.tooltipped-multiline:active::after,.tooltipped-multiline:focus::after{display:table-cell}.tooltipped-s::after,.tooltipped-se::after,.tooltipped-sw::after{top:100%;right:50%;margin-top:5px}.tooltipped-s::before,.tooltipped-se::before,.tooltipped-sw::before{top:auto;right:50%;bottom:-5px;margin-right:-5px;border-bottom-color:rgba(0,0,0,0.8)}.tooltipped-se::after{right:auto;left:50%;margin-left:-15px}.tooltipped-sw::after{margin-right:-15px}.tooltipped-n::after,.tooltipped-ne::after,.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:5px}.tooltipped-n::before,.tooltipped-ne::before,.tooltipped-nw::before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,0.8)}.tooltipped-ne::after{right:auto;left:50%;margin-left:-15px}.tooltipped-nw::after{margin-right:-15px}.tooltipped-s::after,.tooltipped-n::after{-webkit-transform:translateX(50%);transform:translateX(50%)}.tooltipped-w::after{right:100%;bottom:50%;margin-right:5px;-webkit-transform:translateY(50%);transform:translateY(50%)}.tooltipped-w::before{top:50%;bottom:50%;left:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,0.8)}.tooltipped-e::after{bottom:50%;left:100%;margin-left:5px;-webkit-transform:translateY(50%);transform:translateY(50%)}.tooltipped-e::before{top:50%;right:-5px;bottom:50%;margin-top:-5px;border-right-color:rgba(0,0,0,0.8)}.tooltipped-multiline::after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate}.tooltipped-multiline.tooltipped-s::after,.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.tooltipped-multiline.tooltipped-w::after,.tooltipped-multiline.tooltipped-e::after{right:100%}@media screen and (min-width: 0\0){.tooltipped-multiline::after{width:250px}}.tooltipped-sticky::before,.tooltipped-sticky::after{display:inline-block}.tooltipped-sticky.tooltipped-multiline::after{display:table-cell}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){.tooltipped-w::after{margin-right:4.5px}}.flex-table{display:table}.flex-table-item{display:table-cell;width:1%;white-space:nowrap;vertical-align:middle}.flex-table-item-primary{width:99%}.css-truncate.css-truncate-target,.css-truncate .css-truncate-target{display:inline-block;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}.css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target,.css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target,.css-truncate.expandable:hover .css-truncate-target,.css-truncate.expandable:hover.css-truncate-target{max-width:10000px !important}@font-face{font-family:'octicons';src:url("./fonts/octicons.eot?#iefix&v=22dab811a5aa6c7ae0f71074a3480b993f7ef79b") format("embedded-opentype"),url("./fonts/octicons.woff?v=22dab811a5aa6c7ae0f71074a3480b993f7ef79b") format("woff"),url("./fonts/octicons.ttf?v=22dab811a5aa6c7ae0f71074a3480b993f7ef79b") format("truetype"),url("./fonts/octicons.svg?v=22dab811a5aa6c7ae0f71074a3480b993f7ef79b#octicons") format("svg");font-weight:normal;font-style:normal}.octicon,.mega-octicon{font:normal normal normal 16px/1 octicons;display:inline-block;text-decoration:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mega-octicon{font-size:32px}.octicon-alert:before{content:'\f02d'}.octicon-arrow-down:before{content:'\f03f'}.octicon-arrow-left:before{content:'\f040'}.octicon-arrow-right:before{content:'\f03e'}.octicon-arrow-small-down:before{content:'\f0a0'}.octicon-arrow-small-left:before{content:'\f0a1'}.octicon-arrow-small-right:before{content:'\f071'}.octicon-arrow-small-up:before{content:'\f09f'}.octicon-arrow-up:before{content:'\f03d'}.octicon-microscope:before,.octicon-beaker:before{content:'\f0dd'}.octicon-bell:before{content:'\f0de'}.octicon-bold:before{content:'\f0e2'}.octicon-book:before{content:'\f007'}.octicon-bookmark:before{content:'\f07b'}.octicon-briefcase:before{content:'\f0d3'}.octicon-broadcast:before{content:'\f048'}.octicon-browser:before{content:'\f0c5'}.octicon-bug:before{content:'\f091'}.octicon-calendar:before{content:'\f068'}.octicon-check:before{content:'\f03a'}.octicon-checklist:before{content:'\f076'}.octicon-chevron-down:before{content:'\f0a3'}.octicon-chevron-left:before{content:'\f0a4'}.octicon-chevron-right:before{content:'\f078'}.octicon-chevron-up:before{content:'\f0a2'}.octicon-circle-slash:before{content:'\f084'}.octicon-circuit-board:before{content:'\f0d6'}.octicon-clippy:before{content:'\f035'}.octicon-clock:before{content:'\f046'}.octicon-cloud-download:before{content:'\f00b'}.octicon-cloud-upload:before{content:'\f00c'}.octicon-code:before{content:'\f05f'}.octicon-comment-add:before,.octicon-comment:before{content:'\f02b'}.octicon-comment-discussion:before{content:'\f04f'}.octicon-credit-card:before{content:'\f045'}.octicon-dash:before{content:'\f0ca'}.octicon-dashboard:before{content:'\f07d'}.octicon-database:before{content:'\f096'}.octicon-clone:before,.octicon-desktop-download:before{content:'\f0dc'}.octicon-device-camera:before{content:'\f056'}.octicon-device-camera-video:before{content:'\f057'}.octicon-device-desktop:before{content:'\f27c'}.octicon-device-mobile:before{content:'\f038'}.octicon-diff:before{content:'\f04d'}.octicon-diff-added:before{content:'\f06b'}.octicon-diff-ignored:before{content:'\f099'}.octicon-diff-modified:before{content:'\f06d'}.octicon-diff-removed:before{content:'\f06c'}.octicon-diff-renamed:before{content:'\f06e'}.octicon-ellipsis:before{content:'\f09a'}.octicon-eye-unwatch:before,.octicon-eye-watch:before,.octicon-eye:before{content:'\f04e'}.octicon-file-binary:before{content:'\f094'}.octicon-file-code:before{content:'\f010'}.octicon-file-directory:before{content:'\f016'}.octicon-file-media:before{content:'\f012'}.octicon-file-pdf:before{content:'\f014'}.octicon-file-submodule:before{content:'\f017'}.octicon-file-symlink-directory:before{content:'\f0b1'}.octicon-file-symlink-file:before{content:'\f0b0'}.octicon-file-text:before{content:'\f011'}.octicon-file-zip:before{content:'\f013'}.octicon-flame:before{content:'\f0d2'}.octicon-fold:before{content:'\f0cc'}.octicon-gear:before{content:'\f02f'}.octicon-gift:before{content:'\f042'}.octicon-gist:before{content:'\f00e'}.octicon-gist-secret:before{content:'\f08c'}.octicon-git-branch-create:before,.octicon-git-branch-delete:before,.octicon-git-branch:before{content:'\f020'}.octicon-git-commit:before{content:'\f01f'}.octicon-git-compare:before{content:'\f0ac'}.octicon-git-merge:before{content:'\f023'}.octicon-git-pull-request-abandoned:before,.octicon-git-pull-request:before{content:'\f009'}.octicon-globe:before{content:'\f0b6'}.octicon-graph:before{content:'\f043'}.octicon-heart:before{content:'\2665'}.octicon-history:before{content:'\f07e'}.octicon-home:before{content:'\f08d'}.octicon-horizontal-rule:before{content:'\f070'}.octicon-hubot:before{content:'\f09d'}.octicon-inbox:before{content:'\f0cf'}.octicon-info:before{content:'\f059'}.octicon-issue-closed:before{content:'\f028'}.octicon-issue-opened:before{content:'\f026'}.octicon-issue-reopened:before{content:'\f027'}.octicon-italic:before{content:'\f0e4'}.octicon-jersey:before{content:'\f019'}.octicon-key:before{content:'\f049'}.octicon-keyboard:before{content:'\f00d'}.octicon-law:before{content:'\f0d8'}.octicon-light-bulb:before{content:'\f000'}.octicon-link:before{content:'\f05c'}.octicon-link-external:before{content:'\f07f'}.octicon-list-ordered:before{content:'\f062'}.octicon-list-unordered:before{content:'\f061'}.octicon-location:before{content:'\f060'}.octicon-gist-private:before,.octicon-mirror-private:before,.octicon-git-fork-private:before,.octicon-lock:before{content:'\f06a'}.octicon-logo-gist:before{content:'\f0ad'}.octicon-logo-github:before{content:'\f092'}.octicon-mail:before{content:'\f03b'}.octicon-mail-read:before{content:'\f03c'}.octicon-mail-reply:before{content:'\f051'}.octicon-mark-github:before{content:'\f00a'}.octicon-markdown:before{content:'\f0c9'}.octicon-megaphone:before{content:'\f077'}.octicon-mention:before{content:'\f0be'}.octicon-milestone:before{content:'\f075'}.octicon-mirror-public:before,.octicon-mirror:before{content:'\f024'}.octicon-mortar-board:before{content:'\f0d7'}.octicon-mute:before{content:'\f080'}.octicon-no-newline:before{content:'\f09c'}.octicon-octoface:before{content:'\f008'}.octicon-organization:before{content:'\f037'}.octicon-package:before{content:'\f0c4'}.octicon-paintcan:before{content:'\f0d1'}.octicon-pencil:before{content:'\f058'}.octicon-person-add:before,.octicon-person-follow:before,.octicon-person:before{content:'\f018'}.octicon-pin:before{content:'\f041'}.octicon-plug:before{content:'\f0d4'}.octicon-repo-create:before,.octicon-gist-new:before,.octicon-file-directory-create:before,.octicon-file-add:before,.octicon-plus:before{content:'\f05d'}.octicon-primitive-dot:before{content:'\f052'}.octicon-primitive-square:before{content:'\f053'}.octicon-pulse:before{content:'\f085'}.octicon-question:before{content:'\f02c'}.octicon-quote:before{content:'\f063'}.octicon-radio-tower:before{content:'\f030'}.octicon-repo-delete:before,.octicon-repo:before{content:'\f001'}.octicon-repo-clone:before{content:'\f04c'}.octicon-repo-force-push:before{content:'\f04a'}.octicon-gist-fork:before,.octicon-repo-forked:before{content:'\f002'}.octicon-repo-pull:before{content:'\f006'}.octicon-repo-push:before{content:'\f005'}.octicon-rocket:before{content:'\f033'}.octicon-rss:before{content:'\f034'}.octicon-ruby:before{content:'\f047'}.octicon-search-save:before,.octicon-search:before{content:'\f02e'}.octicon-server:before{content:'\f097'}.octicon-settings:before{content:'\f07c'}.octicon-shield:before{content:'\f0e1'}.octicon-log-in:before,.octicon-sign-in:before{content:'\f036'}.octicon-log-out:before,.octicon-sign-out:before{content:'\f032'}.octicon-smiley:before{content:'\f0e7'}.octicon-squirrel:before{content:'\f0b2'}.octicon-star-add:before,.octicon-star-delete:before,.octicon-star:before{content:'\f02a'}.octicon-stop:before{content:'\f08f'}.octicon-repo-sync:before,.octicon-sync:before{content:'\f087'}.octicon-tag-remove:before,.octicon-tag-add:before,.octicon-tag:before{content:'\f015'}.octicon-tasklist:before{content:'\f0e5'}.octicon-telescope:before{content:'\f088'}.octicon-terminal:before{content:'\f0c8'}.octicon-text-size:before{content:'\f0e3'}.octicon-three-bars:before{content:'\f05e'}.octicon-thumbsdown:before{content:'\f0db'}.octicon-thumbsup:before{content:'\f0da'}.octicon-tools:before{content:'\f031'}.octicon-trashcan:before{content:'\f0d0'}.octicon-triangle-down:before{content:'\f05b'}.octicon-triangle-left:before{content:'\f044'}.octicon-triangle-right:before{content:'\f05a'}.octicon-triangle-up:before{content:'\f0aa'}.octicon-unfold:before{content:'\f039'}.octicon-unmute:before{content:'\f0ba'}.octicon-unverified:before{content:'\f0e8'}.octicon-verified:before{content:'\f0e6'}.octicon-versions:before{content:'\f064'}.octicon-watch:before{content:'\f0e0'}.octicon-remove-close:before,.octicon-x:before{content:'\f081'}.octicon-zap:before{content:'\26A1'}.markdown-body{font-family:"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body::before{display:table;content:""}.markdown-body::after{display:table;clear:both;content:""}.markdown-body>*:first-child{margin-top:0 !important}.markdown-body>*:last-child{margin-bottom:0 !important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:#c00}.markdown-body .anchor{display:inline-block;padding-right:2px;margin-left:-18px}.markdown-body .anchor:focus{outline:none}.markdown-body p,.markdown-body blockquote,.markdown-body ul,.markdown-body ol,.markdown-body dl,.markdown-body table,.markdown-body pre{margin-top:0;margin-bottom:16px}.markdown-body hr{height:4px;padding:0;margin:16px 0;background-color:#e7e7e7;border:0 none}.markdown-body blockquote{padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body kbd{display:inline-block;padding:3px 5px;font-size:11px;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:solid 1px #ccc;border-bottom-color:#bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:1em;margin-bottom:16px;font-weight:bold;line-height:1.4}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:#000;vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 tt,.markdown-body h1 code,.markdown-body h2 tt,.markdown-body h2 code,.markdown-body h3 tt,.markdown-body h3 code,.markdown-body h4 tt,.markdown-body h4 code,.markdown-body h5 tt,.markdown-body h5 code,.markdown-body h6 tt,.markdown-body h6 code{font-size:inherit}.markdown-body h1{padding-bottom:0.3em;font-size:2.25em;line-height:1.2;border-bottom:1px solid #eee}.markdown-body h1 .anchor{line-height:1}.markdown-body h2{padding-bottom:0.3em;font-size:1.75em;line-height:1.225;border-bottom:1px solid #eee}.markdown-body h2 .anchor{line-height:1}.markdown-body h3{font-size:1.5em;line-height:1.43}.markdown-body h3 .anchor{line-height:1.2}.markdown-body h4{font-size:1.25em}.markdown-body h4 .anchor{line-height:1.2}.markdown-body h5{font-size:1em}.markdown-body h5 .anchor{line-height:1.1}.markdown-body h6{font-size:1em;color:#777}.markdown-body h6 .anchor{line-height:1.1}.markdown-body ul,.markdown-body ol{padding-left:2em}.markdown-body ul.no-list,.markdown-body ol.no-list{padding:0;list-style-type:none}.markdown-body ul ul,.markdown-body ul ol,.markdown-body ol ol,.markdown-body ol ul{margin-top:0;margin-bottom:0}.markdown-body li>p{margin-top:16px}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}.markdown-body table{display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table th{font-weight:bold}.markdown-body table th,.markdown-body table td{padding:6px 13px;border:1px solid #ddd}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body img{max-width:100%;box-sizing:content-box;background-color:#fff}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{max-width:none;vertical-align:text-top;background-color:transparent}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid #ddd}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{display:block;padding:5px 0 0;clear:both;color:#333}.markdown-body span.align-center{display:block;overflow:hidden;clear:both}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{display:block;overflow:hidden;clear:both}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body code,.markdown-body tt{padding:0;padding-top:0.2em;padding-bottom:0.2em;margin:0;font-size:85%;background-color:rgba(0,0,0,0.04);border-radius:3px}.markdown-body code::before,.markdown-body code::after,.markdown-body tt::before,.markdown-body tt::after{letter-spacing:-0.2em;content:"\00a0"}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body pre{word-wrap:normal}.markdown-body pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}.markdown-body .highlight{margin-bottom:16px}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code,.markdown-body pre tt{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.markdown-body pre code::before,.markdown-body pre code::after,.markdown-body pre tt::before,.markdown-body pre tt::after{content:normal}@font-face{font-family:'anchorjs-link';src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"),url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff");font-weight:normal;font-style:normal}.anchor-link{float:left;width:1em;height:1em;margin-left:-1.2em;opacity:0;color:inherit;text-align:center;speak:none;font-family:"anchorjs-link";font-style:normal;font-weight:normal;font-variant:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width: 34em){.anchor-link{display:none}}*:hover>.anchor-link,.anchor-link:focus{opacity:.75;-webkit-transition:color .16s linear;transition:color .16s linear}*:hover>.anchor-link:hover,.anchor-link:focus:hover{opacity:1;text-decoration:none}.highlight .hll{background-color:#ffc}.highlight .c{color:#999}.highlight .err{color:#a00;background-color:#faa}.highlight .k{color:#069}.highlight .o{color:#555}.highlight .cm{color:#09f;font-style:italic}.highlight .cp{color:#099}.highlight .c1{color:#999}.highlight .cs{color:#999}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gr{color:#f00}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gu{color:#030}.highlight .gt{color:#9c6}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#f60}.highlight .s{color:#d44950}.highlight .na{color:#4f9fcf}.highlight .nb{color:#366}.highlight .nc{color:#0a8}.highlight .no{color:#360}.highlight .nd{color:#99f}.highlight .ni{color:#999}.highlight .ne{color:#c00}.highlight .nf{color:#c0f}.highlight .nl{color:#99f}.highlight .nn{color:#0cf}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .ow{color:#000}.highlight .w{color:#bbb}.highlight .mf{color:#f60}.highlight .mh{color:#f60}.highlight .mi{color:#f60}.highlight .mo{color:#f60}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{color:#c30;font-style:italic}.highlight .s2{color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sx{color:#c30}.highlight .sr{color:#3aa}.highlight .s1{color:#c30}.highlight .ss{color:#fc3}.highlight .bp{color:#366}.highlight .vc{color:#033}.highlight .vg{color:#033}.highlight .vi{color:#033}.highlight .il{color:#f60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}html{font-size:16px}body{font-family:"Helvetica Neue",Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem}.container{width:auto;max-width:1020px;padding-left:20px;padding-right:20px}.markdown-body{overflow:visible}.btn-reverse{color:#fff;background:none;border:1px solid #fff}.btn-reverse:hover,.btn-reverse:active{color:#4078c0;background:#fff;border-color:#fff;box-shadow:none}.masthead{padding-top:1rem;padding-bottom:1rem;margin-bottom:1.5rem;text-align:center;background-color:#4078c0}.masthead a{color:rgba(255,255,255,0.5)}.masthead a:hover{color:#fff;text-decoration:none}.masthead .masthead-logo{display:inline-block;font-size:1.5rem;color:#fff}.masthead .masthead-logo .mega-octicon{float:left;margin-right:.5rem}@media (min-width: 34em){.masthead{text-align:left}.masthead .masthead-logo{float:left}}.masthead-nav{margin-top:1rem;font-size:1rem}.masthead-nav a{display:inline-block}.masthead-nav a:not(:last-child){margin-right:1.25rem}.masthead-nav .active{color:#fff;font-weight:500}@media (max-width: 34em){.masthead-nav{padding-top:1rem;border-top:0.075rem solid rgba(255,255,255,0.25)}}@media (min-width: 34em){.masthead-nav{float:right;margin-top:.5rem}}.jumbotron{margin-top:-2rem;margin-bottom:3rem;padding-top:2rem;padding-bottom:4rem;background-color:#4078c0;font-size:1.25rem;color:#fff;text-align:center}.jumbotron h1{font-size:2.5em;font-weight:normal}.jumbotron .btn{padding:.75em 1.15em;font-size:inherit;font-weight:normal;line-height:1}@media (min-width: 34em){.jumbotron{padding-top:6rem;padding-bottom:8rem;font-size:1.5rem;text-align:left}}@media (max-width: 760px){.about-that .column{float:none;width:100%;margin-bottom:30px}}.about-that p{padding-right:.5rem;color:#555;line-height:1.5}.about-that h2{font-weight:normal}@media (max-width: 34em){.docs-layout>.column{float:none;width:100%}}.footer{padding-top:3rem;padding-bottom:3rem;margin-top:3rem;line-height:1.75;color:#7a7a7a;border-top:1px solid #eee}.footer strong{color:#333}.docs-menu{margin-bottom:1.5rem;font-size:14px}@media (min-width: 34em){.docs-menu{margin-right:1rem}}.highlight{margin:0}.docs-example{position:relative;padding:15px;font-size:13px;line-height:1.4;border:1px solid #e5e5e5;border-radius:.25rem .25rem 0 0}.docs-example p,.docs-example h1,.docs-example h2,.docs-example h3,.docs-example h4,.docs-example h5,.docs-example h6{margin-top:0;margin-bottom:0}.docs-example+.highlight{margin-top:-1px;border:1px solid #e5e5e5;border-radius:0 0 .25rem .25rem}.docs-example>p:last-child,.docs-example>.menu:last-child,.docs-example>.tabnav:last-child,.docs-example>blockquote:last-child{margin-bottom:0}.docs-example .menu,.docs-example .filter-list,.docs-example .sunken-menu{max-width:200px}.docs-example .container{width:100%;padding-left:10px;padding-right:10px}.docs-example .columns+.columns{margin-top:10px}.docs-example .column{padding:10px;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;background-color:#e7f6e0;border:1px solid #c8eab9}.docs-example ul,.docs-example ol{padding-left:0;margin-top:0;margin-bottom:0}.docs-example .form-group{margin:15px 0}.docs-example .form-group:first-child{margin-top:0}.docs-example .form-group:last-child{margin-bottom:0}.docs-example .form-group>dt{margin:0 0 6px;font-style:normal}.docs-example .form-group>dd{padding:0;margin-bottom:0}.docs-example .flex-table-item>.btn{margin-left:10px}#markdown-toc>li:first-child{display:none}.swatch{display:inline-block;width:6rem;height:6rem;border-radius:.25rem}.swatch-blue{background-color:#4078c0}.swatch-green{background-color:#6cc644}.swatch-red{background-color:#bd2c00}.swatch-orange{background-color:#c9510c}.swatch-purple{background-color:#6e5494}.swatch-gray-light{background-color:#fafafa}.swatch-gray{background-color:#f5f5f5}.swatch-gray-dark{background-color:#333} diff --git a/archive/fonts/octicons.eot b/archive/fonts/octicons.eot new file mode 100644 index 0000000..97502f1 Binary files /dev/null and b/archive/fonts/octicons.eot differ diff --git a/archive/fonts/octicons.svg b/archive/fonts/octicons.svg new file mode 100644 index 0000000..0908706 --- /dev/null +++ b/archive/fonts/octicons.svg @@ -0,0 +1,188 @@ + + + + +(c) 2012-2016 GitHub + +When using the GitHub logos, be sure to follow the GitHub logo guidelines (https://github.com/logos) + +Font License: SIL OFL 1.1 (http://scripts.sil.org/OFL) +Applies to all font files + +Code License: MIT (http://choosealicense.com/licenses/mit/) +Applies to all other files + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archive/fonts/octicons.ttf b/archive/fonts/octicons.ttf new file mode 100644 index 0000000..0a62bb9 Binary files /dev/null and b/archive/fonts/octicons.ttf differ diff --git a/archive/fonts/octicons.woff b/archive/fonts/octicons.woff new file mode 100644 index 0000000..a5d36a4 Binary files /dev/null and b/archive/fonts/octicons.woff differ diff --git a/archive/forms/index.html b/archive/forms/index.html new file mode 100644 index 0000000..ae8ea13 --- /dev/null +++ b/archive/forms/index.html @@ -0,0 +1,498 @@ + + + + + + + + + + + + + Forms · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Forms +

+
+

Style individual form controls and utilize common layouts.

+ +
+ Heads up! Forms need some reworking to clean up the specificity and required markup. We'll get to that soon! +
+ +

Contents

+ + + +

Overview

+ +
    +
  • We reset several elements’ default styles for cross browser consistency and easier manipulation later. This includes <fieldset>s, WebKit validation bubbles, and most textual <input>s.
    • +
  • Specific types of textual <input>s are styled automatically, but .form-control is available should you need it.
    • +
  • Always declare a type on your <button>s.
    • +
  • Form layouts rely on form groups.
    • +
+ +

Example form

+ +

Form controls in Primer currently have no basic layout specified (this is by design). You’ll need to use <fieldset>s, <div>s, or other elements and styles to rearrange them.

+ +
+ + + + + + + + + + + + +
+
<form>
+  <label for="name">Name</label>
+  <input class="form-control" type="text" id="name">
+
+  <label for="email">Email address</label>
+  <input class="form-control" type="email" id="email">
+
+  <label>
+    <input type="checkbox"> Remember me
+  </label>
+
+  <label>
+    <input type="radio" id="herp" name="herpderp" checked> Herp
+  </label>
+  <label>
+    <input type="radio" id="derp" name="herpderp"> Derp
+  </label>
+
+  <button class="btn" type="submit">Submit</button>
+</form>
+ +

Form contrast

+ +

Textual form controls have a white background by default. You can change this to a light gray with .input-contrast.

+ +
+ + +
+
<form>
+  <input class="form-control" type="text" placeholder="Default input">
+  <input class="form-control input-contrast" type="text" placeholder="Input with contrast">
+</form>
+ +

Sizing

+ +

Make inputs smaller, larger, or full-width with an additional class.

+ +

Small

+ +
+ +
+
<form>
+  <input class="form-control input-sm" type="text" placeholder="Small input">
+</form>
+ +

Large

+ +
+ +
+
<form>
+  <input class="form-control input-lg" type="text" placeholder="Large input">
+</form>
+ +

Block

+ +
+ +
+
<form>
+  <input class="form-control input-block" type="text" placeholder="Full-width input">
+</form>
+ +

Selects

+ +

Primer adds light height and vertical-align styles to <select>s for all browsers to render them consistently with textual inputs.

+ +
+ +
+
<form>
+  <select class="form-select">
+    <option>Choose an option</option>
+    <option>Git</option>
+    <option>Subversion</option>
+    <option>Social Coding</option>
+    <option>Beets</option>
+    <option>Bears</option>
+    <option>Battlestar Galactica</option>
+  </select>
+</form>
+ +

Small

+ +

Use the .select-sm class to resize both default and custom <select>s to match the size of our small buttons.

+ +
+ +
+
<select class="form-select select-sm">
+  <option>Choose an option</option>
+  <option>Git</option>
+  <option>Subversion</option>
+  <option>Social Coding</option>
+  <option>Beets</option>
+  <option>Bears</option>
+  <option>Battlestar Galactica</option>
+</select>
+
+<select class="form-select select-sm">
+  <option>Choose an option</option>
+  <option>Git</option>
+  <option>Subversion</option>
+  <option>Social Coding</option>
+  <option>Beets</option>
+  <option>Bears</option>
+  <option>Battlestar Galactica</option>
+</select>
+ +

Form groups

+ +
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+
<form>
+  <dl class="form-group">
+    <dt><label>Example Text</label></dt>
+    <dd><input class="form-control" type="text" value="Example Value"></dd>
+  </dl>
+
+  <dl class="form-group">
+    <dt><label>Example Select</label></dt>
+    <dd>
+      <select class="form-select">
+        <option>Choose an option</option>
+        <option>Git</option>
+        <option>Subversion</option>
+        <option>Social Coding</option>
+        <option>Beets</option>
+        <option>Bears</option>
+        <option>Battlestar Galactica</option>
+      </select>
+    </dd>
+  </dl>
+
+  <dl class="form-group">
+    <dt><label>Example Textarea</label></dt>
+    <dd>
+      <textarea class="form-control"></textarea>
+    </dd>
+  </dl>
+</form>
+ +

Form group validation

+ +

Convey errors and warnings for form groups. Add the appropriate class—either .errored or .warn—to the <dl class="form-group"> to start. Then, house your error messaging in an additional <dd> with either .error or .warning.

+ +
+
+
+
+
This example input has an error.
+
+
+
+
+
+
This example input has a warning.
+
+
+
<form>
+  <dl class="form-group errored">
+    <dt><label>Example Text</label></dt>
+    <dd><input class="form-control" type="text" value="Example Value"></dd>
+    <dd class="error">This example input has an error.</dd>
+  </dl>
+  <br>
+  <dl class="form-group warn">
+    <dt><label>Example Text</label></dt>
+    <dd><input class="form-control" type="text" value="Example Value"></dd>
+    <dd class="warning">This example input has a warning.</dd>
+  </dl>
+</form>
+ +

Checkboxes and radios

+ +

Utilities to spice up the alignment and styling of checkbox and radio controls.

+ +
+
+ +

+ This will do insanely awesome and amazing things! +

+
+
+
<form>
+  <div class="form-checkbox">
+    <label>
+      <input type="checkbox" checked="checked">
+      Available for hire
+    </label>
+    <p class="note">
+      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!
+    </p>
+  </div>
+</form>
+ +

You may also add emphasis to the label:

+ +
+
+ +
+
+
<form>
+  <div class="form-checkbox">
+    <label>
+      <input type="checkbox" checked="checked">
+      <em class="highlight">Available for hire</em>
+    </label>
+  </div>
+</form>
+ +

Input group

+ +

Attached an input and button to one another.

+ +
+
+ + + + +
+
+
<form>
+  <div class="input-group">
+    <input class="form-control" type="text" placeholder="Username">
+    <span class="input-group-button">
+      <button class="btn">
+        <span class="octicon octicon-clippy"></span>
+      </button>
+    </span>
+  </div>
+</form>
+ +

Form actions

+ +

Align buttons to the right—via float: right on the buttons—in forms with .form-actions. The floats are automatically cleared for you.

+ +
+ + +
+
<div class="form-actions">
+  <button type="button" class="btn btn-primary">Save changes</button>
+  <button type="button" class="btn">Cancel</button>
+</div>
+ + +
+
+
+ + + +
+ + + + + diff --git a/archive/guidelines/index.html b/archive/guidelines/index.html new file mode 100644 index 0000000..c86bf46 --- /dev/null +++ b/archive/guidelines/index.html @@ -0,0 +1,373 @@ + + + + + + + + + + + + + Guidelines · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Guidelines +

+
+

Best practices and guidelines for writing HTML and CSS with approachable formatting, syntax, and more.

+ +

Contents

+ + + +

HTML

+ +

General formatting

+ +
    +
  • Use soft-tabs with a two space indent. Spaces are the only way to guarantee code renders the same in any person’s environment.
    • +
  • Paragraphs of text should always be placed in a <p> tag. Never use multiple <br> tags.
    • +
  • Items in list form should always be in <ul>, <ol>, or <dl>. Never use a set of <div> or <p>.
    • +
  • Every form input that has text attached should utilize a <label> tag. Especially radio or checkbox elements.
    • +
  • Even though quotes around attributes is optional, always put quotes around attributes for readability.
    • +
  • Avoid writing closing tag comments, like <!-- /.element -->. This just adds to page load time. Plus, most editors have indentation guides and open-close tag highlighting.
    • +
  • Avoid trailing slashes in self-closing elements. For example, <br>, <hr>, <img>, and <input>.
    • +
  • Don’t set tabindex manually—rely on the browser to set the order.
    • +
+ +
<p class="line-note" data-attribute="106">
+  This is my paragraph of special text.
+</p>
+ +

Boolean attributes

+ +

Many attributes don’t require a value to be set, like disabled or checked, so don’t set them.

+ +
<input type="text" disabled>
+
+<input type="checkbox" value="1" checked>
+
+<select>
+  <option value="1" selected>1</option>
+</select>
+ +

For more information, read the WhatWG section.

+ +

Lean markup

+ +

Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. For example:

+ +
<!-- Not so great -->
+<span class="avatar">
+  <img src="...">
+</span>
+
+<!-- Better -->
+<img class="avatar" src="...">
+ +

Forms

+ +
    +
  • Lean towards radio or checkbox lists instead of select menus.
    • +
  • Wrap radio and checkbox inputs and their text in <label>s. No need for for attributes here—the wrapping automatically associates the two.
    • +
  • Form buttons should always include an explicit type. Use primary buttons for the type="submit" button and regular buttons for type="button".
    • +
  • The primary form button must come first in the DOM, especially for forms with multiple submit buttons. The visual order should be preserved with float: right; on each button.
    • +
+ +

Tables

+ +

Make use of <thead>, <tfoot>, <tbody>, and <th> tags (and scope attribute) when appropriate. (Note: <tfoot> goes above <tbody> for speed reasons. You want the browser to load the footer before a table full of data.)

+ +
<table summary="This is a chart of invoices for 2011.">
+  <thead>
+    <tr>
+      <th scope="col">Table header 1</th>
+      <th scope="col">Table header 2</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <td>Table footer 1</td>
+      <td>Table footer 2</td>
+    </tr>
+  </tfoot>
+  <tbody>
+    <tr>
+      <td>Table data 1</td>
+      <td>Table data 2</td>
+    </tr>
+  </tbody>
+</table>
+ +

SCSS

+ +

Spacing

+ +
    +
  • Use soft-tabs with a two space indent. Spaces are the only way to guarantee code renders the same in any person’s environment.
    • +
  • Put spaces after : in property declarations.
    • +
  • Put spaces before { in rule declarations.
    • +
  • Put line breaks between rulesets.
    • +
  • When grouping selectors, keep individual selectors to a single line.
    • +
  • Place closing braces of declaration blocks on a new line.
    • +
  • Each declaration should appear on its own line for more accurate error reporting.
    • +
+ +

Formatting

+ +
    +
  • Use hex color codes #000 unless using rgba() in raw CSS (SCSS’ rgba() function is overloaded to accept hex colors as a param, e.g., rgba(#000, .5)).
    • +
  • Use // for comment blocks (instead of /* */).
    • +
  • Avoid specifying units for zero values, e.g., margin: 0; instead of margin: 0px;.
    • +
  • Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values.
    • +
+ +

Misc

+ +

As a rule of thumb, avoid unnecessary nesting in SCSS. At most, aim for three levels. If you cannot help it, step back and rethink your overall strategy (either the specificity needed, or the layout of the nesting).

+ +

Examples

+ +

Here are some good examples that apply the above guidelines:

+ +
// Example of good basic formatting practices
+.styleguide-format {
+  color: #000;
+  background-color: rgba(0, 0, 0, .5);
+  border: 1px solid #0f0;
+}
+
+// Example of individual selectors getting their own lines (for error reporting)
+.multiple,
+.classes,
+.get-new-lines {
+  display: block;
+}
+
+// Avoid unnecessary shorthand declarations
+.not-so-good {
+  margin: 0 0 20px;
+}
+.good {
+  margin-bottom: 20px;
+}
+ +

File organization

+ +

In general, a flat directory of files works best, but at GitHub we break things down by bundles (separate compiled CSS files) and sections (directories of related content).

+ +

Bundles

+ +

GitHub.com uses a handful of bundles. Here’s a simplified representation of our two desktop bundles (split to support IE9’s maximum selector limit per CSS file) and a dedicated mobile bundle for our separate mobile views.

+ +
stylesheets
+├── github
+│   ├── base.scss
+│   ├── layout.scss
+│   └── buttons.scss
+├── github2
+│   ├── about.scss
+│   └── blog.scss
+└── mobile
+    ├── base.scss
+    └── files.scss
+ +

Including (S)CSS files

+ +

Previously we used Sprockets to require files in Primer and at GitHub. Nowadays, we use explicit lists of imports to control the cascade, specificity, and more.

+ +
// Imports
+@import "primer";
+@import "component";
+@import "another_component";
+
+// Rules
+.rule { ... }
+ +

This is also how Primer’s styles are to be included, should you need them.

+ +

Pixels vs. ems

+ +

Use px for font-size, because it offers absolute control over text. Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

+ +

Class naming conventions

+ +

Never reference js- prefixed class names from CSS files. js- are used exclusively from JS files.

+ +

Use the is- prefix for state rules that are shared between CSS and JS.

+ +

Specificity (classes vs. ids)

+ +

Elements that occur exactly once inside a page should use IDs, otherwise, use classes. When in doubt, use a class name.

+ +
    +
  • Good candidates for ids: header, footer, modal popups.
    • +
  • Bad candidates for ids: navigation, item listings, item view pages (ex: issue view).
    • +
+ +

When styling a component, start with an element + class namespace (prefer class names over ids), prefer direct descendant selectors by default, and use as little specificity as possible. Here is a good example:

+ +
<ul class="category-list">
+  <li class="item">Category 1</li>
+  <li class="item">Category 2</li>
+  <li class="item">Category 3</li>
+</ul>
+ +
.category-list { // element + class namespace
+
+  // Direct descendant selector > for list items
+  > li {
+    list-style-type: disc;
+  }
+
+  // Minimal specificity for all links
+  a {
+    color: #f00;
+  }
+}
+ +

CSS Specificity guidelines

+ +
    +
  • If you must use an id selector (#selector) make sure that you have no more than one in your rule declaration. A rule like #header .search #quicksearch { ... } is considered harmful.
    • +
  • When modifying an existing element for a specific use, try to use specific class names. Instead of .listings-layout.bigger use rules like .listings-layout.listings-bigger. Think about ack/greping your code in the future.
    • +
  • The class names disabled, mousedown, danger, hover, selected, and active should always be namespaced by a class (button.selected is a good example).
    • +
+ +
+
+
+ + + +
+ + + + + diff --git a/archive/img/apple-touch-icon-precomposed.png b/archive/img/apple-touch-icon-precomposed.png new file mode 100644 index 0000000..e530c0f Binary files /dev/null and b/archive/img/apple-touch-icon-precomposed.png differ diff --git a/archive/index.html b/archive/index.html new file mode 100644 index 0000000..7e427e8 --- /dev/null +++ b/archive/index.html @@ -0,0 +1,92 @@ + + + + + + + + + + + + + Home · Primer + + + + + + + + + + + + +
+
+ + + +
+
+ + +
+
+

Primer

+

The CSS toolkit and guidelines that power GitHub.

+ + + Read the docs + +
+
+ +
+
+
+

Made at GitHub

+

Primer is the basecoat of GitHub, made by nerds just like you who share a passion for HTML and CSS.

+
+
+

Open source

+

Available for use under the MIT license and built with open source projects like SCSS, Jekyll, Grunt, and more.

+
+
+

Build tools

+

Includes a small Gruntfile for compiling our SCSS, Autoprefixer for vendor prefixes, and Parker for CSS stats.

+
+
+
+ + +
+ + + + +
+ + + + + diff --git a/archive/js/anchor.min.js b/archive/js/anchor.min.js new file mode 100644 index 0000000..68c3cb7 --- /dev/null +++ b/archive/js/anchor.min.js @@ -0,0 +1,6 @@ +/*! + * AnchorJS - v1.1.1 - 2015-05-23 + * https://github.com/bryanbraun/anchorjs + * Copyright (c) 2015 Bryan Braun; Licensed MIT + */ +function AnchorJS(A){"use strict";this.options=A||{},this._applyRemainingDefaultOptions=function(A){this.options.icon=this.options.hasOwnProperty("icon")?A.icon:"",this.options.visible=this.options.hasOwnProperty("visible")?A.visible:"hover",this.options.placement=this.options.hasOwnProperty("placement")?A.placement:"right",this.options.class=this.options.hasOwnProperty("class")?A.class:""},this._applyRemainingDefaultOptions(A),this.add=function(A){var e,t,o,n,i,s,a,l,c,r,h,g,B,Q;if(this._applyRemainingDefaultOptions(this.options),A){if("string"!=typeof A)throw new Error("The selector provided to AnchorJS was invalid.")}else A="h1, h2, h3, h4, h5, h6";if(e=document.querySelectorAll(A),0===e.length)return!1;for(this._addBaselineStyles(),t=document.querySelectorAll("[id]"),o=[].map.call(t,function(A){return A.id}),i=0;i',B=document.createElement("div"),B.innerHTML=g,Q=B.childNodes,"always"===this.options.visible&&(Q[0].style.opacity="1"),""===this.options.icon&&(Q[0].style.fontFamily="anchorjs-icons",Q[0].style.fontStyle="normal",Q[0].style.fontVariant="normal",Q[0].style.fontWeight="normal"),"left"===this.options.placement?(Q[0].style.position="absolute",Q[0].style.marginLeft="-1em",Q[0].style.paddingRight="0.5em",e[i].insertBefore(Q[0],e[i].firstChild)):(Q[0].style.paddingLeft="0.375em",e[i].appendChild(Q[0]))}return this},this.remove=function(A){for(var e,t=document.querySelectorAll(A),o=0;o + + + + + + + + + + + + Layout · Primer + + + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Layout +

+
+

Primer’s layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it’s just containers, rows, and columns.

+ +

You can find all the below styles in _layout.scss.

+ +

Contents

+ + + +

Container

+ +

Center your page’s contents with a .container.

+ +
<div class="container">
+  <!-- contents here -->
+</div>
+ +

The container applies width: 980px; and uses horizontal margins to center it.

+ +

Grid

+ +

How it works

+ +

The grid is pretty standard—you create rows with .columns and individual columns with a column class and fraction class. Here’s how it works:

+ +
    +
  • Add a .container to encapsulate everything and provide ample horizontal gutter space.
    • +
  • Create your outer row to clear the floated columns with <div class="columns">.
    • +
  • Add your columns with individual <div class="column">s.
    • +
  • Add your fractional width classes to set the width of the columns (e.g., .one-fourth).
    • +
+ +

Demo

+ +

In practice, your columns will look like the example below.

+ +
+
+
+ .one-fifth +
+
+ .four-fifths +
+
+ +
+
+ .one-fourth +
+
+ .three-fourths +
+
+ +
+
+ .one-third +
+
+ .two-thirds +
+
+ +
+
+ .one-half +
+
+ .one-half +
+
+
+
<div class="container">
+  <div class="columns">
+    <div class="one-fifth column">
+      .one-fifth
+    </div>
+    <div class="four-fifths column">
+      .four-fifths
+    </div>
+  </div>
+
+  <div class="columns">
+    <div class="one-fourth column">
+      .one-fourth
+    </div>
+    <div class="three-fourths column">
+      .three-fourths
+    </div>
+  </div>
+
+  <div class="columns">
+    <div class="one-third column">
+      .one-third
+    </div>
+    <div class="two-thirds column">
+      .two-thirds
+    </div>
+  </div>
+
+  <div class="columns">
+    <div class="one-half column">
+      .one-half
+    </div>
+    <div class="one-half column">
+      .one-half
+    </div>
+  </div>
+</div>
+ +

Centered

+ +

Columns can be centered by adding .centered to the .column class.

+ +
+
+ .one-half +
+
+
<div class="columns">
+  <div class="one-half column centered">
+    .one-half
+  </div>
+</div>
+ +
+
+
+ + +
+ Copyright GitHub 2016.
+ Created and maintained by the CSS team at GitHub. Currently v4.0.1. +
+
+ + + + + diff --git a/archive/markdown/index.html b/archive/markdown/index.html new file mode 100644 index 0000000..3c4db40 --- /dev/null +++ b/archive/markdown/index.html @@ -0,0 +1,129 @@ + + + + + + + + + + + + + Markdown · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Markdown +

+
+

Styles for rendering GitHub Flavored Markdown in any project.

+ +

Coming soon!

+ +
+
+
+ + +
+ Copyright GitHub 2016.
+ Created and maintained by the CSS team at GitHub. Currently v4.0.1. +
+
+ + + + + diff --git a/archive/nav/index.html b/archive/nav/index.html new file mode 100644 index 0000000..3cbae95 --- /dev/null +++ b/archive/nav/index.html @@ -0,0 +1,343 @@ + + + + + + + + + + + + + Navigation · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Navigation +

+
+

Primer comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.

+ +

Contents

+ + + + + +

The menu is a vertical list of navigational links. A menu’s width and placement must be set by you. If you like, just use our grid columns as a parent. Otherwise, apply a custom width.

+ +
+
<nav class="menu">
+  <a class="menu-item selected" href="#">Account</a>
+  <a class="menu-item" href="#">Profile</a>
+  <a class="menu-item" href="#">Emails</a>
+  <a class="menu-item" href="#">Notifications</a>
+</nav>
+ +

There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.

+ +
+
<nav class="menu">
+  <a class="menu-item selected" href="#">
+    <span class="octicon octicon-tools"></span>
+    Account
+  </a>
+  <a class="menu-item" href="#">
+    <span class="octicon octicon-person"></span>
+    Profile
+  </a>
+  <a class="menu-item" href="#">
+    <span class="octicon octicon-mail"></span>
+    Emails
+  </a>
+  <a class="menu-item" href="#">
+    <span class="octicon octicon-radio-tower"></span>
+    <span class="counter">3</span>
+    Notifications
+  </a>
+</nav>
+ +

You can also add optional headings to a menu. Feel free to use nearly any semantic element with the .menu-heading class, including inline elements, headings, and more.

+ +
+
<nav class="menu">
+  <span class="menu-heading">Menu heading</span>
+  <a class="menu-item selected" href="#">Account</a>
+  <a class="menu-item" href="#">Profile</a>
+  <a class="menu-item" href="#">Emails</a>
+  <a class="menu-item" href="#">Notifications</a>
+</nav>
+ +

Tabnav

+ +

When you need to toggle between different views, consider using a tabnav. It’ll given you a left-aligned horizontal row of… tabs!

+ +
+ +
+
<div class="tabnav">
+  <nav class="tabnav-tabs">
+    <a href="#" class="tabnav-tab selected">Foo tab</a>
+    <a href="#" class="tabnav-tab">Bar tab</a>
+  </nav>
+</div>
+ +

Use .right to align additional elements in the .tabnav:

+ +
+ Button + +
+
<div class="tabnav">
+  <a class="btn btn-sm right" href="#">Button</a>
+  <nav class="tabnav-tabs">
+    <a href="#" class="tabnav-tab selected">Foo Tab</a>
+    <a href="#" class="tabnav-tab">Bar Tab</a>
+  </nav>
+</div>
+ +

Additional bits of text and links can be styled for optimal placement with .tabnav-extra:

+ +
+
+ Tabnav widget text here. +
+ +
+
<div class="tabnav">
+  <div class="tabnav-extra right">
+    Tabnav widget text here.
+  </div>
+  <nav class="tabnav-tabs">
+    <a href="#" class="tabnav-tab selected">Foo Tab</a>
+    <a href="#" class="tabnav-tab">Bar Tab</a>
+  </nav>
+</div>
+ +
+
+ + Tabnav extra link + + + Tabnav extra link + +
+ +
+
<div class="tabnav">
+  <div class="right">
+    <a class="tabnav-extra" href="#">
+      Tabnav extra link
+    </a>
+    <a class="tabnav-extra" href="#">
+      Tabnav extra link
+    </a>
+  </div>
+  <nav class="tabnav-tabs">
+    <a href="#" class="tabnav-tab selected">Foo Tab</a>
+    <a href="#" class="tabnav-tab">Bar Tab</a>
+  </nav>
+</div>
+ +

Filter list

+ +

A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.

+ +
+
<ul class="filter-list">
+  <li>
+    <a href="#" class="filter-item selected">
+      <span class="count">21</span>
+      First filter
+    </a>
+  </li>
+  <li>
+    <a href="#" class="filter-item">
+      <span class="count">3</span>
+      Second filter
+    </a>
+  </li>
+  <li>
+    <a href="#" class="filter-item">
+      Third filter
+    </a>
+  </li>
+</ul>
+ + + +

Coming soon…

+ +
+
+
+ + +
+ Copyright GitHub 2016.
+ Created and maintained by the CSS team at GitHub. Currently v4.0.1. +
+
+ + + + + diff --git a/archive/scaffolding/index.html b/archive/scaffolding/index.html new file mode 100644 index 0000000..96bb12b --- /dev/null +++ b/archive/scaffolding/index.html @@ -0,0 +1,153 @@ + + + + + + + + + + + + + Scaffolding · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Scaffolding +

+
+

Scaffolding refers to the global resets and dependencies that Primer is built upon.

+ +

Contents

+ + + +

HTML5 doctype

+ +

Primer makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your pages.

+ +
<!DOCTYPE html>
+<html lang="en">
+  ...
+</html>
+ +

Box-sizing

+ +

We reset box-sizing to border-box for every element in Primer. This allows us to more easily assign widths to elements that also have padding and borders.

+ +

Built on Normalize

+ +

For improved cross-browser rendering, we use Normalize.css to correct small inconsistencies across browsers and devices.

+ +
+
+
+ + +
+ Copyright GitHub 2016.
+ Created and maintained by the CSS team at GitHub. Currently v4.0.1. +
+
+ + + + + diff --git a/archive/states/index.html b/archive/states/index.html new file mode 100644 index 0000000..d20a25a --- /dev/null +++ b/archive/states/index.html @@ -0,0 +1,147 @@ + + + + + + + + + + + + + States · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ States +

+
+

States, or state indicators, inform users of the current status of a particular item. Included common states are Open, Closed, or Merged, each requiring it’s own modifier class.

+ +

Open (green)

+ +
Open +Open +Open
+
<span class="state state-open">Open</span>
+<span class="state state-proposed">Open</span>
+<span class="state state-reopened">Open</span>
+ +

Closed (red)

+ +
Closed
+
<span class="state state-closed">Closed</span>
+ +

Merged (purple)

+ +
Merged
+
<span class="state state-merged">Merged</span>
+ + +
+
+
+ + +
+ Copyright GitHub 2016.
+ Created and maintained by the CSS team at GitHub. Currently v4.0.1. +
+
+ + + + + diff --git a/archive/tooltips/index.html b/archive/tooltips/index.html new file mode 100644 index 0000000..3bcdc31 --- /dev/null +++ b/archive/tooltips/index.html @@ -0,0 +1,203 @@ + + + + + + + + + + + + + Tooltips · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Tooltips +

+
+

Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an aria-label attribute.

+ +

In addition, you’ll want to specify a direction:

+ +
    +
  • .tooltipped-n
    • +
  • .tooltipped-ne
    • +
  • .tooltipped-e
    • +
  • .tooltipped-se
    • +
  • .tooltipped-s
    • +
  • .tooltipped-sw
    • +
  • .tooltipped-w
    • +
  • .tooltipped-nw
    • +
+ +

Tooltip classes will conflict with Octicon classes, and as such, must go on a parent element instead of the icon.

+ +
+ Tooltip North + + + Tooltip North East + + + Tooltip East + + + Tooltip South East + + + Tooltip South + + + Tooltip South West + + + Tooltip West + + + Tooltip North West +
+
<span class="tooltipped tooltipped-n border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip North
+</span>
+<span class="tooltipped tooltipped-ne border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip North East
+</span>
+<span class="tooltipped tooltipped-e border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip East
+</span>
+<span class="tooltipped tooltipped-se border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip South East
+</span>
+<span class="tooltipped tooltipped-s border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip South
+</span>
+<span class="tooltipped tooltipped-sw border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip South West
+</span>
+<span class="tooltipped tooltipped-w border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip West
+</span>
+<span class="tooltipped tooltipped-nw border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip North West
+</span>
+ +

Tooltips No Delay

+ +

By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. .tooltipped-no-delay

+ +
+ Tooltip no delay +
+
<span class="tooltipped tooltipped-n tooltipped-no-delay border p-2" aria-label="This is the tooltip.">
+  Tooltip no delay
+</span>
+ + +
+
+
+ + +
+ Copyright GitHub 2016.
+ Created and maintained by the CSS team at GitHub. Currently v4.0.1. +
+
+ + + + + diff --git a/archive/type/index.html b/archive/type/index.html new file mode 100644 index 0000000..c34f6e5 --- /dev/null +++ b/archive/type/index.html @@ -0,0 +1,283 @@ + + + + + + + + + + + + + Typography · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Typography +

+
+

Headings, paragraphs, blockquotes, lists, and more have some global resets. It’s worth noting these aren’t the same as our Markdown styles.

+ +

Contents

+ + + +

Headings

+ +

h1. Primer heading

+

h2. Primer heading

+

h3. Primer heading

+

h4. Primer heading

+
h5. Primer heading
+
h6. Primer heading
+
<h1>h1. Primer heading</h1>
+<h2>h2. Primer heading</h2>
+<h3>h3. Primer heading</h3>
+<h4>h4. Primer heading</h4>
+<h5>h5. Primer heading</h5>
+<h6>h6. Primer heading</h6>
+ +

Body text

+ +

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

+

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
+<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ +

Lead

+ +

Make a paragraph stand out by adding .lead.

+ +

+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. +

+
<p class="lead">
+  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
+</p>
+ +

Inline text elements

+ +

Styling for common inline HTML5 elements.

+ +

You can use the mark tag to highlight text.

+

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

+

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

This line rendered as italicized text.

+
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
+<p><del>This line of text is meant to be treated as deleted text.</del></p>
+<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+<p><u>This line of text will render as underlined</u></p>
+<p><small>This line of text is meant to be treated as fine print.</small></p>
+<p><strong>This line rendered as bold text.</strong></p>
+<p><em>This line rendered as italicized text.</em></p>
+ +

Blockquotes

+ +

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+
<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+</blockquote>
+ +

Lists

+ +
+ Heads up! The broken display of lists is intentional as Primer globally resets these elements for the time being. This will eventually be undone in the next major version. +
+ +

Unordered

+ +

A list of items in which the order does not explicitly matter.

+ +
    +
  • Lorem ipsum dolor sit amet
    • +
  • Nulla volutpat aliquam velit +
      +
    • Phasellus iaculis neque
      • +
    • Purus sodales ultricies
      • +
    • Vestibulum laoreet porttitor sem
      • +
    • Ac tristique libero volutpat at
      • +
    +
    • +
  • Faucibus porta lacus fringilla vel
    • +
  • Aenean sit amet erat nunc
    • +
  • Eget porttitor lorem
    • +
+
<ul>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Nulla volutpat aliquam velit
+    <ul>
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ul>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ul>
+ +

Ordered

+ +

A list of items in which the order does explicitly matter.

+ +
    +
  1. Lorem ipsum dolor sit amet
    2. +
  2. Nulla volutpat aliquam velit +
      +
    1. Phasellus iaculis neque
      2. +
    2. Purus sodales ultricies
      3. +
    3. Vestibulum laoreet porttitor sem
      4. +
    4. Ac tristique libero volutpat at
      5. +
    +
    3. +
  3. Faucibus porta lacus fringilla vel
    4. +
  4. Aenean sit amet erat nunc
    5. +
  5. Eget porttitor lorem
    6. +
+
<ol>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Nulla volutpat aliquam velit
+    <ol>
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ol>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ol>
+ + +
+
+
+ + +
+ Copyright GitHub 2016.
+ Created and maintained by the CSS team at GitHub. Currently v4.0.1. +
+
+ + + + + diff --git a/archive/utilities/index.html b/archive/utilities/index.html new file mode 100644 index 0000000..7b3c0b4 --- /dev/null +++ b/archive/utilities/index.html @@ -0,0 +1,411 @@ + + + + + + + + + + + + + Utilities · Primer + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ + + + + + +
+
+

+ Utilities +

+
+

There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more.

+ +

Contents

+ + + +

Truncation

+ +

.css-truncate will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of the .css-truncate-target.

+ +
+ really-long-branch-name +
+
<span class="branch-ref css-truncate css-truncate-target">
+  really-long-branch-name
+</span>
+ +

You can reveal the entire string on hover with the addition of .expandable.

+ +
+
<span class="css-truncate expandable">
+  <span class="branch-ref css-truncate-target">this-is-a-really-long-branch-name</span>
+</span>
+ +

Counter

+ +

Add a number or unread indicator to navs and more with a counter.

+ +
9
+
<span class="counter">9</span>
+ +

Floats

+ +

Quickly float something to the left or right, and clear them later.

+ +
+ .left + .right +
+
<div class="clearfix">
+  <code class="left">.left</code>
+  <code class="right">.right</code>
+</div>
+ +

Centering content

+ +

Easily center block level content if it’s not taking up the full width of the parent. Can be used on grid columns or any other elements.

+ +
+
<nav class="menu centered">
+  <a class="menu-item selected" href="#">Account</a>
+  <a class="menu-item" href="#">Profile</a>
+  <a class="menu-item" href="#">Emails</a>
+  <a class="menu-item" href="#">Notifications</a>
+</nav>
+ +

Text alignment

+ +

Change the text-align on elements with a class.

+ +

Left aligned text.

+

Right aligned text.

+

Center aligned text.

+
<p class="text-left">Left aligned text.</p>
+<p class="text-right">Right aligned text.</p>
+<p class="text-center">Center aligned text.</p>
+ +

Background colors

+ +

Fill in an element with background colors.

+ +
.bg-white +.bg-gray-dark +.bg-blue +.bg-blue-light +.bg-gray +.bg-gray-light +.bg-green +.bg-red
+
<span class="d-inline-block p-3 bg-white">.bg-white</span>
+<span class="d-inline-block p-3 bg-gray-dark text-white">.bg-gray-dark</span>
+<span class="d-inline-block p-3 bg-blue">.bg-blue</span>
+<span class="d-inline-block p-3 bg-blue-light">.bg-blue-light</span>
+<span class="d-inline-block p-3 bg-gray">.bg-gray</span>
+<span class="d-inline-block p-3 bg-gray-light">.bg-gray-light</span>
+<span class="d-inline-block p-3 bg-green">.bg-green</span>
+<span class="d-inline-block p-3 bg-red">.bg-red</span>
+ +

Text color

+ +

Change the color of elements with a class.

+ +
.text-blue +.text-red +.text-gray-light +.text-gray +.text-gray-dark +.text-green +.text-orange +.text-purple +.text-white +.text-inherit
+
<span class="text-blue">.text-blue</span>
+<span class="text-red">.text-red</span>
+<span class="text-gray-light">.text-gray-light</span>
+<span class="text-gray">.text-gray</span>
+<span class="text-gray-dark">.text-gray-dark</span>
+<span class="text-green">.text-green</span>
+<span class="text-orange">.text-orange</span>
+<span class="text-purple">.text-purple</span>
+<span class="text-white bg-gray-dark">.text-white</span>
+<span class="text-inherit">.text-inherit</span>
+ + + +

The default link color is blue, but there are a couple of other options to use for deemphasized links. On :hover all links will turn blue.

+ +

Here is some example text. And a .link-blue

+

Here is some example text. And a .link-gray

+

Here is some example text. And a .link-gray-dark

+
<p>Here is some example text. <a class="link-blue" href="#">And a .link-blue</a></p>
+<p>Here is some example text. <a class="link-gray" href="#">And a .link-gray</a></p>
+<p>Here is some example text. <a class="link-gray-dark" href="#">And a .link-gray-dark</a></p>
+ +

Flex table

+ +

Flex table is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it’s cross browser friendly back to at least IE9.

+ +

Additional margin or padding may be required to properly space content.

+ +
+
+ +
+
+ +
+
+
<div class="flex-table">
+  <div class="flex-table-item flex-table-item-primary">
+    <input class="input-block" type="text" placeholder="Long flexible input form">
+  </div>
+  <div class="flex-table-item">
+    <button class="btn" type="button">Button</button>
+  </div>
+</div>
+ +

Margin

+ +

You have the option to set margin sizes from 0-5. You also have the optional direction using t,r,b,l,x,y.

+ +
.mr-0
+
.mr-1
+
.mr-2
+
.mr-3
+
.mr-4
+
.mr-5
+
.mx-5
+
.my-5
+
.m-2
+
<div class="d-inline-block border p-2 mr-0">.mr-0</div>
+<div class="d-inline-block border p-2 mr-1">.mr-1</div>
+<div class="d-inline-block border p-2 mr-2">.mr-2</div>
+<div class="d-inline-block border p-2 mr-3">.mr-3</div>
+<div class="d-inline-block border p-2 mr-4">.mr-4</div>
+<div class="d-inline-block border p-2 mr-5">.mr-5</div>
+<div class="d-inline-block border p-2 mx-2">.mx-5</div>
+<div class="d-inline-block border p-2 my-2">.my-5</div>
+<div class="d-inline-block border p-2 m-2">.m-2</div>
+ +

Padding

+ +

You have the option to set padding sizes from 0-5. You also have the optional direction using t,b,x,y.

+ +
.pt-0
+
.pt-1
+
.pt-2
+
.pt-3
+
.pt-4
+
.pt-5
+
.p-3
+
.px-3
+
.py-3
+
<div class="d-inline-block border pt-0">.pt-0</div>
+<div class="d-inline-block border pt-1">.pt-1</div>
+<div class="d-inline-block border pt-2">.pt-2</div>
+<div class="d-inline-block border pt-3">.pt-3</div>
+<div class="d-inline-block border pt-4">.pt-4</div>
+<div class="d-inline-block border pt-5">.pt-5</div>
+<div class="d-inline-block border p-3">.p-3</div>
+<div class="d-inline-block border px-3">.px-3</div>
+<div class="d-inline-block border py-3">.py-3</div>
+ +

Positioning

+ +

We include classes for setting positioning as well as setting the top-0, right-0, bottom-0, left-0 to zero. Your options for positioning are position-static, position-absolute, position-relative, position-fixed.

+ +
+ .position-relative +
.position-absolute.right-0.top-0
+
+
<div class="p-3 border position-relative">
+  .position-relative
+  <div class="border position-absolute right-0 top-0 p-1">.position-absolute.right-0.top-0</div>
+</div>
+ +

Display

+ +

You can set your display with these utilities.

+ +
.d-block +.d-inline +.d-inline-block +.d-none
+
<span class="border text-center d-block p-2">.d-block</span>
+<span class="border text-center d-inline p-2">.d-inline</span>
+<span class="border text-center d-inline-block p-2">.d-inline-block</span>
+<span class="border text-center d-none p-2">.d-none</span>
+ +

Borders

+ +

With these border utilities you can set common borders.

+ +
.border
+
.border-top
+
.border-right
+
.border-bottom
+
.border-left
+
<div class="border p-3 mb-3">.border</div>
+<div class="border-top p-3 mb-3">.border-top</div>
+<div class="border-right p-3 mb-3">.border-right</div>
+<div class="border-bottom p-3 mb-3">.border-bottom</div>
+<div class="border-left p-3 mb-3">.border-left</div>
+ +

Border colors

+ +

Add these classes with .border and you’ll have some common border colors.

+ +
.border-blue
+
.border-gray-light
+
.border-gray-dark
+
<div class="border p-3 mb-3 border-blue">.border-blue</div>
+<div class="border p-3 mb-3 border-gray-light">.border-gray-light</div>
+<div class="border p-3 mb-3 border-gray-dark">.border-gray-dark</div>
+ +

No borders

+ +

To remove a border from one side you can use -0 postfix.

+ +
.border-0
+
.border-top-0
+
.border-right-0
+
.border-bottom-0
+
.border-left-0
+
<div class="border border-0 p-3 mb-3">.border-0</div>
+<div class="border border-top-0 p-3 mb-3">.border-top-0</div>
+<div class="border border-right-0 p-3 mb-3">.border-right-0</div>
+<div class="border border-bottom-0 p-3 mb-3">.border-bottom-0</div>
+<div class="border border-left-0 p-3 mb-3">.border-left-0</div>
+ + +
+
+
+ + +
+ Copyright GitHub 2016.
+ Created and maintained by the CSS team at GitHub. Currently v4.0.1. +
+
+ + + + + diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..8588057 Binary files /dev/null and b/favicon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8716d59 --- /dev/null +++ b/index.html @@ -0,0 +1,105 @@ + + + + + + + + Primer + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+
+ Install + Changelog +
+ Star +
+
+
+
+

Primer

+

The design system that powers GitHub

+ Install Primer 9.3.0 +
+
+
+
+
+

Primer has underdone a lot of changes in the past 18 months. We've been consolidating and updating the CSS to make more resuable and flexible styles, we turned Primer CSS into a monorepo and improved our build process, and we've been building a new documentation website that we'll make public in fall, 2017. In the meantime, you can still view the old documentation website, or you can find up-to-date documentation for styles within the README.md or docs folder of each Primer module.

+
+ +
+

Packages

+

Primer CSS includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.

+ + + +
+ + +
+
+ + + + diff --git a/primer-logo.png b/primer-logo.png new file mode 100644 index 0000000..5bb6219 Binary files /dev/null and b/primer-logo.png differ