+
1. +

   …

   +

   …

   +
+

` tag. Never use multiple `
` tags. -* Items in list form should always be in `

`, `
`, or `

`. Never use a set of `

` or `

`. -* Every form input that has text attached should utilize a `` 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 ``. 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, `
`, `

---

`, ``, and ``. -* Don't set `tabindex` manually—rely on the browser to set the order. - -{% highlight html %} -

- This is my paragraph of special text. -

-{% endhighlight %} - -### Boolean attributes - -Many attributes don't require a value to be set, like `disabled` or `checked`, so don't set them. - -{% highlight html %} - - - - - - 1 - -{% endhighlight %} - -For more information, [read the WhatWG section](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes). - -### Lean markup - -Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. For example: - -{% highlight html %} - - - - - - - -{% endhighlight %} - -### Forms - -* Lean towards radio or checkbox lists instead of select menus. -* Wrap radio and checkbox inputs and their text in ``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 ``, ``, ``, and `` tags (and `scope` attribute) when appropriate. (Note: `` goes above `` for speed reasons. You want the browser to load the footer before a table full of data.) - -{% highlight html %} - - - - - - - - - - - - - - - - - - - -

Table header 1	Table header 2
Table footer 1	Table footer 2
Table data 1	Table data 2

-{% endhighlight %} - - - -## 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: - -{% highlight scss %} -// 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; -} -{% endhighlight %} - -## 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. - -{% highlight bash %} -stylesheets -├── github -│ ├── base.scss -│ ├── layout.scss -│ └── buttons.scss -├── github2 -│ ├── about.scss -│ └── blog.scss -└── mobile - ├── base.scss - └── files.scss -{% endhighlight %} - -### Including (S)CSS files - -Previously we used [Sprockets](https://github.com/sstephenson/sprockets) to **require** files in Primer and at GitHub. Nowadays, we use explicit lists of **imports** to control the cascade, specificity, and more. - -{% highlight scss %} -// Imports -@import "primer"; -@import "component"; -@import "another_component"; - -// Rules -.rule { ... } -{% endhighlight %} - -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: - -{% highlight html %} -

-
• Category 1
-
• Category 2
-
• Category 3
-

-{% endhighlight %} - -{% highlight scss %} -.category-list { // element + class namespace - - // Direct descendant selector > for list items - > li { - list-style-type: disc; - } - - // Minimal specificity for all links - a { - color: #f00; - } -} -{% endhighlight %} - -### 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/grep`ing 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/docs/img/apple-touch-icon-precomposed.png b/docs/img/apple-touch-icon-precomposed.png deleted file mode 100644 index e530c0f79a..0000000000 Binary files a/docs/img/apple-touch-icon-precomposed.png and /dev/null differ diff --git a/docs/layout.md b/docs/layout.md deleted file mode 100644 index 560fbfc38d..0000000000 --- a/docs/layout.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: page -title: 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 - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Container - -Center your page's contents with a `.container`. - -{% highlight html %} -

- -

-{% endhighlight %} - -The container applies `width: 980px;` and uses horizontal `margin`s 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 `

`. -- Add your columns with individual `

`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. - -{% example html %} -

-

-

- .one-fifth -

-

- .four-fifths -

-

- -

-

- .one-fourth -

-

- .three-fourths -

-

- -

-

- .one-third -

-

- .two-thirds -

-

- -

-

- .one-half -

-

- .one-half -

-

-

-{% endexample %} - -### Centered - -Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class. - -{% example html %} -

-

- .one-half -

-

-{% endexample %} \ No newline at end of file diff --git a/docs/markdown.md b/docs/markdown.md deleted file mode 100644 index 49142f11e7..0000000000 --- a/docs/markdown.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -layout: page -title: Markdown ---- - -Styles for rendering GitHub Flavored Markdown in any project. - -*Coming soon!* diff --git a/docs/nav.md b/docs/nav.md deleted file mode 100644 index 71ef7e9075..0000000000 --- a/docs/nav.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -layout: page -title: 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 - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Menu - -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`. - -{% example html %} - -{% endexample %} - -There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons. - -{% example html %} - -{% endexample %} - -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. - -{% example html %} - -{% endexample %} - - -## Tabnav - -When you need to toggle between different views, consider using a tabnav. It'll given you a left-aligned horizontal row of... tabs! - -{% example html %} -

- -

-{% endexample %} - -Use `.right` to align additional elements in the `.tabnav`: - -{% example html %} -

- Button - -

-{% endexample %} - -Additional bits of text and links can be styled for optimal placement with `.tabnav-extra`: - -{% example html %} -

-

- Tabnav widget text here. -

- -

-{% endexample %} - -{% example html %} -

-

- - Tabnav extra link - - - Tabnav extra link - -

- -

-{% endexample %} - -## 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. - -{% example html %} -

-
• - - 21 - First filter - -
-
• - - 3 - Second filter - -
-
• - - Third filter - -
-

-{% endexample %} - -## Breadcrumb - -*Coming soon...* diff --git a/docs/roadmap.md b/docs/roadmap.md deleted file mode 100644 index 0d688e97f2..0000000000 --- a/docs/roadmap.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -layout: simple -title: Roadmap ---- - -A brief—and incomplete—look at potential future Primer updates with a focus on rewriting components for simplicity and durability, as well as consolidating UI options. - -## v3 -- [ ] Document the `user-content` repo -- [ ] Refactor alerts to reduce selectors and overrides -- [ ] Deprecate the gradient mixin for Autoprefixer -- [ ] Clean up the utility classes - - [ ] De-dupe text color utilities - - [ ] Remove the `// Misc` utilities -- [ ] Remove `padding` and `margin` resets on `

`s and `
`s - -## v4 -- [ ] Refactor blankslates to reduce selectors, overrides, and UI options - -## v5 -- [ ] Refactor forms (most notably the `dl.form`) diff --git a/docs/scaffolding.md b/docs/scaffolding.md deleted file mode 100644 index 1e95d58459..0000000000 --- a/docs/scaffolding.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -layout: page -title: Scaffolding ---- - -Scaffolding refers to the global resets and dependencies that Primer is built upon. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## 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. - -{% highlight html %} - - - ... - -{% endhighlight %} - -## 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 `border`s. - -## Built on Normalize - -For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. diff --git a/docs/states.md b/docs/states.md deleted file mode 100644 index 3e339f7681..0000000000 --- a/docs/states.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: page -title: 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) - -{% example html %} -Open -Open -Open -{% endexample %} - -### Closed (red) - -{% example html %} -Closed -{% endexample %} - -### Merged (purple) - -{% example html %} -Merged -{% endexample %} diff --git a/docs/tooltips.md b/docs/tooltips.md deleted file mode 100644 index ba541418c8..0000000000 --- a/docs/tooltips.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: page -title: 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` - -Remember, `aria-label` and tooltip classes must go directly on `` and `` elements. Tooltip classes also conflict with Octicon classes, and as such, must go on a parent element instead of the icon. - -{% example html %} - - Text with a tooltip - -{% endexample %} diff --git a/docs/type.md b/docs/type.md deleted file mode 100644 index cd51a18b7e..0000000000 --- a/docs/type.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -layout: page -title: 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 - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Headings - -{% example html %} -

h1. Primer heading

-

h2. Primer heading

-

h3. Primer heading

-

h4. Primer heading

-

h5. Primer heading

-

h6. Primer heading

-{% endexample %} - -## Body text - -{% example html %} -

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.

-{% endexample %} - -## Lead - -Make a paragraph stand out by adding `.lead`. - -{% example html %} -

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

-{% endexample %} - -## Inline text elements - -Styling for common inline HTML5 elements. - -{% example html %} -

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.

-{% endexample %} - -## Blockquotes - -Wrap `

` around any HTML as the quote. For straight quotes, we recommend a `

`. - -{% example html %} -

-

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

-

-{% endexample %} - -## 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. - -{% example html %} -

-
• 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
-

-{% endexample %} - -### Ordered - -A list of items in which the order *does* explicitly matter. - -{% example html %} -

-
1. Lorem ipsum dolor sit amet
-
2. Nulla volutpat aliquam velit -
   -
   1. Phasellus iaculis neque
   -
   2. Purus sodales ultricies
   -
   3. Vestibulum laoreet porttitor sem
   -
   4. Ac tristique libero volutpat at
   -
   -
-
3. Faucibus porta lacus fringilla vel
-
4. Aenean sit amet erat nunc
-
5. Eget porttitor lorem
-

-{% endexample %} diff --git a/docs/utilities.md b/docs/utilities.md deleted file mode 100644 index 4d96c04b73..0000000000 --- a/docs/utilities.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -layout: page -title: Utilities ---- - -There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## 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. - -{% example html %} - - really-long-branch-name - -{% endexample %} - -You can reveal the entire string on hover with the addition of `.expandable`. - -{% example html %} - - this-is-a-really-long-branch-name - -{% endexample %} - -## Counter - -Add a number or unread indicator to navs and more with a counter. - -{% example html %} -9 -{% endexample %} - -## Floats - -Quickly float something to the left or right, and clear them later. - -{% example html %} -

- .left - .right -

-{% endexample %} - -## 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](/layout/#centered) or any other elements. - -{% example html %} - -{% endexample %} - - -## Text alignment - -Change the `text-align` on elements with a class. - -{% example html %} -

Left aligned text.

-

Right aligned text.

-

Center aligned text.

-{% endexample %} - -## Text color - -Change the `color` of elements with a class. - -{% example html %} -

Green/open text

-

Red/closed text

-

Merged text

-

Pending text

-{% endexample %} - -`.text-closed` and `.text-failure` are the same, as well as `.text-open` and `.text-success`. - -## Muted link - -When you need a hyperlink to not be `$brand-blue`, use a `.muted-link`. - -{% example html %} -Here is some example text. And a muted link. -{% endexample %} - -## 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. - -{% example html %} -

-

- -

-

-

Button -

-

-{% endexample %} diff --git a/docs/utilities/background-color.md b/docs/utilities/background-color.md new file mode 100644 index 0000000000..f4688b1fa8 --- /dev/null +++ b/docs/utilities/background-color.md @@ -0,0 +1,329 @@ +--- +layout: page +title: background-color +--- + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +These are the background colors we’re using in production — no more. All colors are managed in [fa-css-utilities](https://github.com/fac/fa-css-utilities). New colors should be added only when they’re actually being used in a component or other element in production. When adding a new color, justify it by linking to the Sass file where you’re using it in your PR. Then the team can approve the addition. + + +## Primary palette + +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-yellow); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-amber); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-red); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-purple); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-blue); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-green); +{% endexample %} +

+ +

+ + +## Darker variants + +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-amber--dark); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-red--dark); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-blue--dark); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-blue--x-dark); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-green--dark); +{% endexample %} +

+ +

+ + +## Lighter variants + +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-yellow--x-light); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-red--x-light); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-purple--x-light); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-blue--x-light); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(fa-green--x-light); +{% endexample %} +

+ +

+ + +## Grays + +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-1); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-2); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-3); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-4); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-5); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-6); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-7); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-8); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-9); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-10); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-11); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-12); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-13); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-14); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-15); +{% endexample %} +

+ +

+

+   +

+{% example scss %} +@include background-color(gray-16); +{% endexample %} +

+ +

+ +Related: [`text-color`]({{ site.baseurl }}/utilities/text-color/) diff --git a/docs/utilities/border-radius.md b/docs/utilities/border-radius.md new file mode 100644 index 0000000000..37e200fa56 --- /dev/null +++ b/docs/utilities/border-radius.md @@ -0,0 +1,4 @@ +--- +layout: page +title: border-radius +--- diff --git a/docs/utilities/border.md b/docs/utilities/border.md new file mode 100644 index 0000000000..6a4ba66703 --- /dev/null +++ b/docs/utilities/border.md @@ -0,0 +1,4 @@ +--- +layout: page +title: border +--- diff --git a/docs/utilities/font-family.md b/docs/utilities/font-family.md new file mode 100644 index 0000000000..92a69fd3e7 --- /dev/null +++ b/docs/utilities/font-family.md @@ -0,0 +1,59 @@ +--- +layout: page +title: font-family +--- + +

+

+

+ Source Sans Pro +

+

+{% example scss %} +@include font-family(default); +{% endexample %} +

+ +

+

+

+ Helvetica Neue +

+

+{% example scss %} +@include font-family(legacy); +{% endexample %} +

+ +

+

+

+ Effra +

+

+{% example scss %} +@include font-family(editorial); +{% endexample %} +

+ +

+

+

+ Swister +

+

+{% example scss %} +@include font-family(handwritten); +{% endexample %} +

+ +

+

+

+ Monaco +

+

+{% example scss %} +@include font-family(monospace); +{% endexample %} +

diff --git a/docs/utilities/font-size.md b/docs/utilities/font-size.md new file mode 100644 index 0000000000..ba210aa933 --- /dev/null +++ b/docs/utilities/font-size.md @@ -0,0 +1,284 @@ +--- +layout: page +title: font-size +--- + +## Standard scale + +

+

+

+ xx-small; size 3. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(xx-small); +{% endexample %} +

+ +

+

+

+ x-small; size 4. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(x-small); +{% endexample %} +

+ +

+

+

+ small; size 5. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(small); +{% endexample %} +

+ +

+

+

+ default; size 6. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(default); +{% endexample %} +

+ +

+

+

+ large; size 7. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(large); +{% endexample %} +

+ +

+

+

+ x-large; size 8. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. +

+

+{% example scss %} +@include font-size(x-large); +{% endexample %} +

+ +

+

+

+ xx-large; size 10. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. +

+

+{% example scss %} +@include font-size(xx-large); +@include line-height(tight); +{% endexample %} +

+ + + +## Full scale + +

+

+

+ Size 1. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+ {% example scss %} + @include font-size(1); + {% endexample %} +

+ +

+

+

+ Size 2. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(2); +{% endexample %} +

+ +

+

+

+ Size 3; xx-small. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(3); +{% endexample %} +

+ +

+

+

+ Size 4; x-small. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(4); +{% endexample %} +

+ +

+

+

+ Size 5; small. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(5); +{% endexample %} +

+ +

+

+

+ Size 6; default. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(6); +{% endexample %} +

+ +

+

+

+ Size 7; large. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. But whatever we make is only as good as the people making it. +

+

+{% example scss %} +@include font-size(7); +{% endexample %} +

+ +

+

+

+ Size 8; x-large. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier, and let them do things their way. +

+

+{% example scss %} +@include font-size(8); +{% endexample %} +

+ +

+

+

+ Size 9. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. We make products to empower people with the knowledge and means to make it easier. +

+

+{% example scss %} +@include font-size(9); +@include line-height(tight); +{% endexample %} +

+ +

+

+

+ Size 10; xx-large. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. +

+

+{% example scss %} +@include font-size(10); +@include line-height(tight); +{% endexample %} +

+ +

+

+

+ Size 11. FreeAgent is a company born out of the frustration that business finances are just too damn hard for freelancers and small businesses. +

+

+{% example scss %} +@include font-size(11); +@include line-height(x-tight); +{% endexample %} +

+ +

+

+

+ Size 12. FreeAgent is a company born out of the frustration that business finances are just too damn hard. +

+

+{% example scss %} +@include font-size(12); +@include line-height(xx-tight); +{% endexample %} +

+ +

+

+

+ Size 13. Business finances are just too damn hard. +

+

+{% example scss %} +@include font-size(13); +@include line-height(xx-tight); +{% endexample %} +

+ +

+

+

+ Size 14. Business finances are just too damn hard. +

+

+{% example scss %} +@include font-size(14); +@include line-height(xx-tight); +{% endexample %} +

+ +

+

+

+ Size 15. Business finances. +

+

+{% example scss %} +@include font-size(15); +@include line-height(xx-tight); +{% endexample %} +

+ +

+

+

+ Size 16. Business finances. +

+

+{% example scss %} +@include font-size(16); +@include line-height(xx-tight); +{% endexample %} +

+ +

+

+

+ Size 17. Business. +

+

+{% example scss %} +@include font-size(17); +@include line-height(xx-tight); +{% endexample %} +

diff --git a/docs/utilities/font-weight.md b/docs/utilities/font-weight.md new file mode 100644 index 0000000000..2d730a3dfd --- /dev/null +++ b/docs/utilities/font-weight.md @@ -0,0 +1,147 @@ +--- +layout: page +title: font-weight +--- + +Our primary typeface is [Source Sans Pro](https://github.com/adobe-fonts/source-sans-pro), an open-source face designed specifically for UI work. We serve it up via `@font-face` in a number of formats, as required by different browsers. WOFF2 is preferred due to it’s better compression, followed by WOFF. + +Settings for browser support, OpenType vs TrueType, and font directory path +can all be found in [_font-settings.scss](https://github.com/fac/fa-origin/blob/master/assets/scss/fonts/_font-settings.scss). + +

+

+

+ Source Sans Pro Extra Light (200) +

+

+{% example scss %} +@include font-weight(x-light); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Extra Light Italic (200) +

+

+{% example scss %} +font-style: italic; +@include font-weight(x-light); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Light (300) +

+

+{% example scss %} +@include font-weight(light); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Light Italic (300) +

+

+{% example scss %} +font-style: italic; +@include font-weight(light); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Regular (400) +

+

+{% example scss %} +@include font-weight(normal); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Regular Italic (400) +

+

+{% example scss %} +font-style: italic; +@include font-weight(normal); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Semi-Bold (600) +

+

+{% example scss %} +@include font-weight(semi-bold); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Semi-Bold Italic (600) +

+

+{% example scss %} +font-style: italic; +@include font-weight(semi-bold); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Bold (700) +

+

+{% example scss %} +@include font-weight(bold); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Bold Italic (700) +

+

+{% example scss %} +font-style: italic; +@include font-weight(bold); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Black (900) +

+

+{% example scss %} +@include font-weight(black); +{% endexample %} +

+ +

+

+

+ Source Sans Pro Black Italic (900) +

+

+{% example scss %} +font-style: italic; +@include font-weight(black); +{% endexample %} +

diff --git a/docs/utilities/list-item.md b/docs/utilities/list-item.md new file mode 100644 index 0000000000..c449361c04 --- /dev/null +++ b/docs/utilities/list-item.md @@ -0,0 +1,4 @@ +--- +layout: page +title: list-item +--- diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md new file mode 100644 index 0000000000..dac83e3e06 --- /dev/null +++ b/docs/utilities/spacing.md @@ -0,0 +1,340 @@ +--- +layout: page +title: spacing +--- + +## Standard scale + +

+

+

+   +

+

+{% example scss %} +@include margin(xx-small); +{% endexample %} +{% example scss %} +@include padding(xx-small); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(x-small); +{% endexample %} +{% example scss %} +@include padding(x-small); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(small); +{% endexample %} +{% example scss %} +@include padding(small); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(default); +{% endexample %} +{% example scss %} +@include padding(default); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(large); +@include padding(large); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(x-large); +@include padding(x-large); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(xx-large); +@include padding(xx-large); +{% endexample %} +

+ + + +## Full scale + +

+

+

+   +

+

+{% example scss %} +@include margin(1); +{% endexample %} +{% example scss %} +@include padding(1); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(2); +{% endexample %} +{% example scss %} +@include padding(2); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(3); +{% endexample %} +{% example scss %} +@include padding(3); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(4); +{% endexample %} +{% example scss %} +@include padding(4); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(5); +{% endexample %} +{% example scss %} +@include padding(5); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(6); +{% endexample %} +{% example scss %} +@include padding(6); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(7); +{% endexample %} +{% example scss %} +@include padding(7); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(8); +{% endexample %} +{% example scss %} +@include padding(8); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(9); +{% endexample %} +{% example scss %} +@include padding(9); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(10); +{% endexample %} +{% example scss %} +@include padding(10); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(11); +{% endexample %} +{% example scss %} +@include padding(11); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(12); +{% endexample %} +{% example scss %} +@include padding(12); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(13); +{% endexample %} +{% example scss %} +@include padding(13); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(14); +{% endexample %} +{% example scss %} +@include padding(14); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(15); +{% endexample %} +{% example scss %} +@include padding(15); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(16); +{% endexample %} +{% example scss %} +@include padding(16); +{% endexample %} +

+ +

+

+

+   +

+

+{% example scss %} +@include margin(17); +{% endexample %} +{% example scss %} +@include padding(17); +{% endexample %} +

diff --git a/docs/utilities/text-color.md b/docs/utilities/text-color.md new file mode 100644 index 0000000000..b4265a773e --- /dev/null +++ b/docs/utilities/text-color.md @@ -0,0 +1,281 @@ +--- +layout: page +title: text-color +--- + +These are the text colors we’re using in production — no more. All colors are managed in [fa-css-utilities](https://github.com/fac/fa-css-utilities). + +New colors should be added only when they’re actually being used in a component or other element in production. When adding a new color, justify it by linking to the Sass file where you’re using it in your PR. Then the team can approve the addition. + +## Standard palette + +

+ +

+

+ The default color for text +

+{% example scss %} +@include text-color(default); +{% endexample %} +

+ +

+

+ The dark color for text +

+{% example scss %} +@include text-color(dark); +{% endexample %} +

+ +

+

+ The light color for text +

+{% example scss %} +@include text-color(light); +{% endexample %} +

+ +

+

+ The x-light color for text +

+{% example scss %} +@include text-color(x-light); +{% endexample %} +

+ +

+

+ The xx-light color for text +

+{% example scss %} +@include text-color(xx-light); +{% endexample %} +

+ +

+

+ The positive color for text +

+{% example scss %} +@include text-color(positive); +{% endexample %} +

+ The `positive` value maps to `fa-green--text`. +

+

+ +

+

+ The warning color for text +

+{% example scss %} +@include text-color(warning); +{% endexample %} +

+ The `warning` value maps to `fa-amber`. +

+

+ +

+

+ The negative color for text +

+{% example scss %} +@include text-color(negative); +{% endexample %} +

+ The `negative` value maps to `fa-red--text`. +

+

+ +

+ + +## Full palette + +

+ +

+

+ The fa-blue color for text +

+ {% example scss %} +@include text-color(fa-blue); +{% endexample %} +

+ +

+

+ The fa-blue--dark color for text +

+ {% example scss %} +@include text-color(fa-blue--dark); +{% endexample %} +

+ +

+

+ The fa-blue--x-dark color for text +

+ {% example scss %} +@include text-color(fa-blue--x-dark); +{% endexample %} +

+ +

+

+ The fa-green--text color for text +

+ {% example scss %} +@include text-color(fa-green--text); + {% endexample %} +

+ `fa-green--text` is the text equivalent of `fa-green`. It’s slightly darker to compensate for the reduced contrast of letterforms compared to block colors, noticeable when sat side-by-side. +

+

+ +

+

+ The fa-purple color for text +

+ {% example scss %} +@include text-color(fa-purple); +{% endexample %} +

+ +

+

+ The fa-red--text color for text +

+ {% example scss %} +@include text-color(fa-red--text); + {% endexample %} +

+ `fa-red--text` is the text equivalent of `fa-red`. It’s slightly darker to compensate for the reduced contrast of letterforms compared to block colors, noticeable when sat side-by-side. +

+

+ +

+

+ The fa-red--dark color for text +

+ {% example scss %} +@include text-color(fa-red--dark); +{% endexample %} +

+ +

+

+ The fa-amber color for text +

+ {% example scss %} +@include text-color(fa-amber); +{% endexample %} +

+ +

+

+ The gray-1 color for text +

+ {% example scss %} +@include text-color(gray-1); +{% endexample %} +

+ +

+

+ The gray-2 color for text +

+ {% example scss %} +@include text-color(gray-2); +{% endexample %} +

+ +

+

+ The gray-3 color for text +

+ {% example scss %} +@include text-color(gray-3); +{% endexample %} +

+ +

+

+ The gray-4 color for text +

+ {% example scss %} +@include text-color(gray-4); +{% endexample %} +

+ +

+

+ The gray-5 color for text +

+ {% example scss %} +@include text-color(gray-5); +{% endexample %} +

+ +

+

+ The gray-6 color for text +

+ {% example scss %} +@include text-color(gray-6); +{% endexample %} +

+ +

+

+ The gray-7 color for text +

+ {% example scss %} +@include text-color(gray-7); +{% endexample %} +

+ +

+

+ The gray-8 color for text +

+ {% example scss %} +@include text-color(gray-8); +{% endexample %} +

+ +

+

+ The gray-9 color for text +

+ {% example scss %} +@include text-color(gray-9); +{% endexample %} +

+ +

+

+ The gray-10 color for text +

+ {% example scss %} +@include text-color(gray-10); +{% endexample %} +

+ +

+

+ The gray-11 color for text +

+ {% example scss %} +@include text-color(gray-11); +{% endexample %} +

+ +

+ +Related: [`background-color`]({{ site.baseurl }}/utilities/background-color/) diff --git a/docs/utilities/z-index.md b/docs/utilities/z-index.md new file mode 100644 index 0000000000..16ac8457ba --- /dev/null +++ b/docs/utilities/z-index.md @@ -0,0 +1,4 @@ +--- +layout: page +title: z-index +--- diff --git a/package.json b/package.json index 9aedd32d5c..24f6a95bb5 100644 --- a/package.json +++ b/package.json @@ -1,48 +1,40 @@ { - "name": "primer-css", - "version": "2.3.3", - "homepage": "http://primercss.io", - "author": "GitHub, Inc.", - "scss": "./scss/primer.scss", + "name": "origin-css", + "version": "0.2.1", + "homepage": "http://fac.github.io/origin", + "author": "FreeAgent", + "scss": "./assets/scss/origin.scss", "license": "MIT", "repository": { "type": "git", - "url": "git+https://github.com/primer/primer.git" + "url": "git+https://github.com/fac/origin.git" }, "devDependencies": { - "autoprefixer-core": "~5.2.1", "grunt": "~0.4.5", - "grunt-build-control": "~0.2.0", - "grunt-jekyll": "~0.4.2", - "grunt-parker": "~0.1.0", - "grunt-sass": "~0.18.0", + "grunt-browser-sync": "^2.1.3", + "grunt-build-control": "~0.2.2", "grunt-contrib-watch": "~0.6.1", - "grunt-postcss": "~0.5.1" + "grunt-jekyll": "~0.4.2", + "grunt-sass": "~0.18.1" }, - "description": "Primer is the CSS toolkit that powers GitHub's front-end design. It's purposefully limited to common components to provide our developers with the most flexibility, and to keep GitHub uniquely *GitHubby*. It's built with SCSS and available via Bower, so it's easy to include all or part of it within your own project.", + "description": "Origin is FreeAgent’s internal CSS framework. We’re a growing team working across a range of different projects and codebases, and making CSS work at scale is hard. Agreed principles, approaches, and patterns mean we can do better work faster. That’s what Origin gives us.", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/fac/origin/issues" }, - "main": "css/primer.css", + "main": "assets/scss/origin.scss", "directories": { "doc": "docs" }, "dependencies": { - "grunt-jekyll": "^0.4.2", - "grunt-autoprefixer": "^2.2.0", - "grunt-contrib-watch": "^0.6.1", - "grunt-sass": "^0.18.1", - "grunt-parker": "^0.1.3", - "grunt": "^0.4.5", - "grunt-build-control": "^0.2.2" + "fa-css-utilities": "~1.6.0" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ - "primer", + "origin", "css", - "github", - "primercss" + "freeagent", + "origincss" ] } diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml deleted file mode 100644 index 9b97d5ae3e..0000000000 --- a/scss/.scss-lint.yml +++ /dev/null @@ -1,410 +0,0 @@ -# This is the lint file for .scss files. It uses https://github.com/brigade/scss-lint -# to search through .scss files and point out errors. -# You can view these errors in your editor. -# -# Here's a link to all the default configurations -# https://github.com/brigade/scss-lint/blob/master/config/default.yml -# below is our settings. - -linters: - BangFormat: - enabled: true - space_before_bang: true - space_after_bang: false - severity: error - - BemDepth: - enabled: false - - BorderZero: - enabled: true - convention: zero # or `none` - severity: error - - ColorKeyword: - enabled: true - severity: error - - ColorVariable: - enabled: false - - Comment: - enabled: false - - DebugStatement: - enabled: true - severity: error - - DeclarationOrder: - enabled: false - - DuplicateProperty: - enabled: true - severity: error - - ElsePlacement: - enabled: true - style: same_line # or 'new_line' - severity: error - - EmptyLineBetweenBlocks: - enabled: true - ignore_single_line_blocks: true - severity: error - - EmptyRule: - enabled: false - - FinalNewline: - enabled: true - present: true - severity: error - - HexLength: - enabled: true - style: short # or 'long' - severity: error - - HexNotation: - enabled: true - style: lowercase # or 'uppercase' - severity: error - - HexValidation: - enabled: true - severity: error - - IdSelector: - enabled: false - severity: warning - - ImportantRule: - enabled: false - severity: error - - ImportPath: - enabled: true - leading_underscore: false - filename_extension: false - severity: error - - Indentation: - enabled: true - allow_non_nested_indentation: false - character: space # or 'tab' - width: 2 - severity: error - - LeadingZero: - enabled: true - style: include_zero - severity: error - - MergeableSelector: - enabled: true - force_nesting: true - severity: error - - NameFormat: - enabled: false - - NestingDepth: - enabled: true - max_depth: 5 - severity: error - - PlaceholderInExtend: - enabled: false - - PropertyCount: - enabled: false - - PropertySortOrder: - enabled: false - ignore_unspecified: true - severity: warning - order: - - position - - top - - right - - bottom - - left - - z-index - - display - - float - - width - - min-width - - max-width - - height - - min-height - - max-height - - box-sizing - - padding - - padding-top - - padding-right - - padding-bottom - - padding-left - - margin - - margin-top - - margin-right - - margin-bottom - - margin-left - - overflow - - overflow-x - - overflow-y - - clip - - clear - - font - - font-family - - font-size - - font-style - - font-weight - - font-variant - - font-size-adjust - - font-stretch - - font-effect - - font-emphasize - - font-emphasize-position - - font-emphasize-style - - font-smooth - - hyphens - - line-height - - color - - text-align - - text-align-last - - text-emphasis - - text-emphasis-color - - text-emphasis-style - - text-emphasis-position - - text-decoration - - text-indent - - text-justify - - text-outline - - text-overflow - - text-overflow-ellipsis - - text-overflow-mode - - text-shadow - - text-transform - - text-wrap - - letter-spacing - - word-break - - word-spacing - - word-wrap - - tab-size - - white-space - - vertical-align - - list-style - - list-style-position - - list-style-type - - list-style-image - - pointer-events - - fill - - fill-opacity - - stroke - - stroke-opacity - - stroke-width - - shape-rendering - - cursor - - visibility - - zoom - - flex-direction - - flex-order - - flex-pack - - flex-align - - table-layout - - empty-cells - - caption-side - - border-spacing - - border-collapse - - content - - quotes - - counter-reset - - counter-increment - - resize - - user-select - - nav-index - - nav-up - - nav-right - - nav-down - - nav-left - - background - - background-color - - background-image - - filter - - background-repeat - - background-attachment - - background-position - - background-position-x - - background-position-y - - background-clip - - background-origin - - background-size - - border - - border-color - - border-style - - border-width - - border-top - - border-top-color - - border-top-style - - border-top-width - - border-right - - border-right-color - - border-right-style - - border-right-width - - border-bottom - - border-bottom-color - - border-bottom-style - - border-bottom-width - - border-left - - border-left-color - - border-left-style - - border-left-width - - border-radius - - border-top-left-radius - - border-top-right-radius - - border-bottom-right-radius - - border-bottom-left-radius - - border-image - - border-image-source - - border-image-slice - - border-image-width - - border-image-outset - - border-image-repeat - - outline - - outline-width - - outline-style - - outline-color - - outline-offset - - box-shadow - - opacity - - transition - - transition-delay - - transition-timing-function - - transition-duration - - transition-property - - transform - - transform-origin - - animation - - animation-name - - animation-duration - - animation-fill-mode - - animation-play-state - - animation-timing-function - - animation-delay - - animation-iteration-count - - animation-direction - - PropertySpelling: - enabled: true - severity: error - extra_properties: [] - - PropertyUnits: - enabled: false - severity: error - global: ['em', 'rem', '%'] # Allow relative units globally - properties: - border: ['px'] # Only pixels - line-height: [] # No units allowed - margin: ['em', 'rem'] - - QualifyingElement: - enabled: false - allow_element_with_attribute: false - allow_element_with_class: false - allow_element_with_id: false - severity: warning - - SelectorDepth: - enabled: true - max_depth: 4 - severity: error - - SelectorFormat: - enabled: true - convention: ^((?!js\-))[a-z1-2\-\_]+ - severity: error - - Shorthand: - enabled: true - severity: error - - SingleLinePerProperty: - enabled: true - allow_single_line_rule_sets: true - severity: error - - SingleLinePerSelector: - enabled: true - severity: error - - SpaceAfterComma: - enabled: true - severity: error - - SpaceAfterPropertyColon: - enabled: true - style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned' - severity: error - - SpaceAfterPropertyName: - enabled: true - severity: error - - SpaceBeforeBrace: - enabled: true - style: space # or 'new_line' - allow_single_line_padding: true - severity: error - - SpaceBetweenParens: - enabled: true - spaces: 0 - severity: error - - StringQuotes: - enabled: true - style: double_quotes - severity: error - exclude: - - 'docs/css/_anchor.scss' - - TrailingSemicolon: - enabled: true - severity: error - - TrailingZero: - enabled: true - severity: error - - UnnecessaryMantissa: - enabled: true - severity: error - - UnnecessaryParentReference: - enabled: true - severity: error - - UrlFormat: - enabled: true - severity: error - - UrlQuotes: - enabled: true - severity: error - - VariableForProperty: - enabled: false - - VendorPrefix: - enabled: true - identifier_list: base - additional_identifiers: [] - excluded_identifiers: [] - severity: error - exclude: - - 'scss/_forms.scss' - - ZeroUnit: - enabled: true - severity: error diff --git a/scss/_alerts.scss b/scss/_alerts.scss deleted file mode 100644 index f28f2ad4e7..0000000000 --- a/scss/_alerts.scss +++ /dev/null @@ -1,106 +0,0 @@ -.flash-messages { - margin-top: 15px; - margin-bottom: 15px; -} - -.flash, -.flash-global { - position: relative; - font-size: 14px; - line-height: 1.6; - color: #246; - background-color: #e2eef9; - border: solid 1px #bac6d3; - - &.flash-warn { - color: #4c4a42; - background-color: #fff9ea; - border-color: #dfd8c2; - } - - &.flash-error { - color: #911; - background-color: #fcdede; - border-color: #d2b2b2; - } - - .flash-close { - float: right; - padding: 17px; // bigger hit area - margin-top: -15px; // negative margins to account for bigger padding - margin-right: -15px; - margin-left: 20px; - color: inherit; - text-decoration: none; - cursor: pointer; - opacity: 0.6; - - &:hover { - opacity: 1; - } - } - - p:last-child { - margin-bottom: 0; - } - - // Flashes can have an action button instead of the cross. - .flash-action { - float: right; - margin-top: -4px; - margin-left: 20px; - } - - // Make links stand out - a { - font-weight: bold; - } -} - -.flash { - padding: 15px; - border-radius: 3px; - - + .flash { margin-top: 5px; } -} - -// Add an icon -.flash-with-icon { - padding-left: 40px; - - > .octicon { - float: left; - margin-top: 3px; - margin-left: -25px; - } -} - - -// Global notices -// -// Useful for site-wide banners and global notifications. - -.flash-global { - padding: 10px; - margin-top: -1px; - border-width: 1px 0; - - h2, - p { - margin-top: 0; - margin-bottom: 0; - font-size: 14px; - line-height: 1.4; - } - - // Global flashes can have an action buttons too. - .flash-action { - margin-top: 5px; - } -} - -// Content within flash messages. -.flash-title { - margin-top: 0; - margin-bottom: 5px; -} diff --git a/scss/_avatars.scss b/scss/_avatars.scss deleted file mode 100644 index 7132b4c985..0000000000 --- a/scss/_avatars.scss +++ /dev/null @@ -1,37 +0,0 @@ -.avatar { - display: inline-block; - overflow: hidden; // Ensure page layout in Firefox should images fail to load - line-height: 1; - vertical-align: middle; - border-radius: 3px; -} - -.avatar-small { border-radius: 2px; } - -.avatar-link { - float: left; - line-height: 1; -} - -// User for example on /stars and /user for grids of avatars -.avatar-group-item { - display: inline-block; - margin-bottom: 3px; -} - -// .avatar-parent-child is when you see a small avatar at the bottom right -// corner of a larger avatar. -// -// No Styleguide version -.avatar-parent-child { - position: relative; -} - -.avatar-child { - position: absolute; - right: -15%; - bottom: -9%; - background-color: #fff; // For transparent backgrounds - border-radius: 2px; - box-shadow: -2px -2px 0 rgba(255, 255, 255, 0.8); -} diff --git a/scss/_base.scss b/scss/_base.scss deleted file mode 100644 index 532d19b0e9..0000000000 --- a/scss/_base.scss +++ /dev/null @@ -1,40 +0,0 @@ -* { - box-sizing: border-box; -} - -input, -select, -textarea, -button { - font: #{$body-font-size}/1.4 $body-font; -} - -body { - font: #{$body-font-size}/1.4 $body-font; - color: $brand-gray-dark; - background-color: #fff; -} - -a { - color: $brand-blue; - text-decoration: none; - - &:hover, - &:active { - text-decoration: underline; - } -} - -// Horizontal lines -// -// TODO-MDO: Remove `.rule` from everywhere and replace with `

---

`s -hr, -.rule { - height: 0; - margin: 15px 0; - overflow: hidden; - background: transparent; - border: 0; - border-bottom: 1px solid #ddd; - @include clearfix(); -} diff --git a/scss/_blankslate.scss b/scss/_blankslate.scss deleted file mode 100644 index d77a93c0b9..0000000000 --- a/scss/_blankslate.scss +++ /dev/null @@ -1,73 +0,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); - - &.clean-background { - background: none; - border: 0; - box-shadow: none; - } - - &.capped { - border-radius: 0 0 3px 3px; - } - - &.spacious { - padding: 100px 60px 120px; - } - - &.has-fixed-width { - width: 485px; - margin: 0 auto; - } - - &.large-format { - h3 { - margin: 0.75em 0; - font-size: 20px; - } - - p { - font-size: 16px; - - &.has-fixed-width { - width: 540px; - margin: 0 auto; - text-align: left; - } - } - - .mega-octicon { - width: 40px; - height: 40px; - font-size: 40px; - color: #aaa; - } - - .octicon-inbox { - font-size: 48px; - line-height: 40px; - } - } - - code { - padding: 2px 5px 3px; - font-size: 14px; - background: #fff; - border: 1px solid #eee; - border-radius: 3px; - } - - > .mega-octicon { color: #aaa; } - - .mega-octicon + .mega-octicon { margin-left: 10px; } - - .tabnav + & { margin-top: 20px; } - - .context-loader.large-format-loader { padding-top: 50px; } -} diff --git a/scss/_counter.scss b/scss/_counter.scss deleted file mode 100644 index 6deb8d6535..0000000000 --- a/scss/_counter.scss +++ /dev/null @@ -1,10 +0,0 @@ -.counter { - display: inline-block; - padding: 2px 5px; - font-size: 11px; - font-weight: bold; - line-height: 1; - color: #666; - background-color: #eee; - border-radius: 20px; -} diff --git a/scss/_filter-list.scss b/scss/_filter-list.scss deleted file mode 100644 index 4233d2f7f3..0000000000 --- a/scss/_filter-list.scss +++ /dev/null @@ -1,67 +0,0 @@ -// Filters list -// -// A vertical list of filters. -.filter-list { - list-style-type: none; - - &.small .filter-item { - padding: 4px 10px; - margin: 0 0 2px; - font-size: 12px; - } - - &.pjax-active .filter-item { - color: $brand-gray; - background-color: transparent; - - &.pjax-active { - color: #fff; - background-color: $brand-blue; - } - } -} - -.filter-item { - position: relative; - display: block; - padding: 8px 10px; - margin-bottom: 5px; - overflow: hidden; - font-size: 14px; - color: $brand-gray; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - cursor: pointer; - border-radius: 3px; - - &:hover { - text-decoration: none; - background-color: #eee; - } - - &.selected { - color: #fff; - background-color: $brand-blue; - - .octicon-remove-close { - float: right; - opacity: 0.8; - } - } - - .count { - float: right; - font-weight: bold; - } - - .bar { - position: absolute; - top: 2px; - right: 0; - bottom: 2px; - z-index: -1; - display: inline-block; - background-color: #f1f1f1; - } -} diff --git a/scss/_flex-table.scss b/scss/_flex-table.scss deleted file mode 100644 index 84dc48b75f..0000000000 --- a/scss/_flex-table.scss +++ /dev/null @@ -1,20 +0,0 @@ -// Flex table is a module for creating dynamically resizable elements that -// always sit on the same horizontal line (e.g., they never wrap). Using -// tables means it's cross browser friendly. - -.flex-table { - display: table; -} - -// Place this on every "cell" -.flex-table-item { - display: table-cell; - width: 1%; - white-space: nowrap; - vertical-align: middle; -} - -// Place this on the largest or most important "cell" -.flex-table-item-primary { - width: 99%; -} diff --git a/scss/_forms.scss b/scss/_forms.scss deleted file mode 100644 index d4aa149af9..0000000000 --- a/scss/_forms.scss +++ /dev/null @@ -1,547 +0,0 @@ -// Base form controls -// -// Overrides for common inputs for easier styling. - -fieldset { - padding: 0; - margin: 0; - border: 0; -} - -label { - font-size: 13px; - font-weight: bold; -} - -.form-control, -input[type="text"], -input[type="password"], -input[type="email"], -input[type="number"], -input[type="tel"], -input[type="url"], -select, -textarea { - min-height: 34px; - padding: 7px 8px; - font-size: 13px; - color: #333; - vertical-align: middle; - background-color: #fff; - background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) - background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically. - border: 1px solid #ccc; - border-radius: 3px; - outline: none; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); - - &.focus, - &:focus { - border-color: #51a7e8; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); - } -} - -select { - &:not([multiple]) { - height: 34px; - vertical-align: middle; - } -} - -// Inputs with contrast for easy light gray backgrounds against white. -// input.class is needed here to increase specificity over input[…] -input.input-contrast, -.input-contrast { - background-color: #fafafa; - - &:focus { background-color: #fff; } -} - -// Custom styling for HTML5 validation bubbles (WebKit only) -::placeholder { - color: #aaa; -} - -// Mini inputs, to match .minibutton -input.input-mini { - min-height: 26px; - padding-top: 4px; - padding-bottom: 4px; - font-size: 12px; -} - -// Large inputs -input.input-large { - padding: 6px 10px; - font-size: 16px; -} - -// Full-width inputs -.input-block { - display: block; - width: 100%; -} - -// Inputs with monospace text -.input-monospace { - font-family: $mono-font; -} - -// Form groups -// -// Typical form groups - `` with a `

` containing the label and -// `

containing the form elements. -dl.form { - margin: 15px 0; - - input[type="text"], - input[type="password"], - input[type="email"], - input[type="url"], - select, - textarea { - background-color: #fafafa; - - &:focus { - background-color: #fff; - } - } - - // The Label - > dt { - margin: 0 0 6px; - - label { - position: relative; - } - } - - &.flattened > dt { - float: left; - margin: 0; - line-height: 32px; - } - - &.flattened > dd { - line-height: 32px; - } - - // - // Form Elements - // - - > dd { - // Text fields - input[type="text"], - input[type="password"], - input[type="email"], - input[type="url"] { - width: 440px; - max-width: 100%; - margin-right: 5px; - } - - input { - &.shorter { width: 130px; } - - &.short { width: 250px; } - - &.long { width: 100%; } - } - - // Textarea - textarea { - width: 100%; - height: 200px; - min-height: 200px; - - &.short { - height: 50px; - min-height: 50px; - } - } - - h4 { - margin: 4px 0 0; - - &.is-error { color: $brand-red; } - - &.is-success { color: $brand-green; } - - + p.note { - margin-top: 0; - } - } - } - - // - // Variants - // - - &.required { - > dt > label:after { - padding-left: 5px; - color: #9f1006; - content: "*"; - } - } - - // Form AJAX states - // - // Form fields that need feedback for AJAX loading, success - // states and errored states. - .success, - .error, - .indicator { - display: none; - font-size: 12px; - font-weight: bold; - } - - &.loading { - opacity: 0.5; - - .indicator { - display: inline; - } - - .spinner { - display: inline-block; - vertical-align: middle; - } - } - - &.successful { - .success { - display: inline; - color: #390; - } - } - - // Form validation - // - // Our inline errors - - &.warn, - &.errored { - dd.warning, - dd.error { - display: inline-block; - position: absolute; - max-width: 450px; // Keep our long errors readable - z-index: 10; - margin: 2px 0 0; - padding: 5px 8px; - font-size: 13px; - font-weight: normal; - border-radius: 3px; - } - - dd.warning:after, - dd.warning:before, - dd.error:after, - dd.error:before { - bottom: 100%; - z-index: 15; - left: 10px; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - - dd.warning:after, - dd.error:after { - border-width: 5px; - } - - dd.warning:before, - dd.error:before { - border-width: 6px; - margin-left: -1px; - } - } - - &.warn { - dd.warning { - color: #4e401e; - background-color: #ffe5a7; - border: 1px solid #e7ce94; - - &:after { - border-bottom-color: #ffe5a7; - } - - &:before { - border-bottom-color: #cdb683; - } - } - } - - &.errored { - > dt label { - color: $brand-red; - } - - dd.error { - color: #fff; - background-color: #bf1515; - border-color: #911; - font-size: 13px; - - &:after { - border-bottom-color: #bf1515; - } - - &:before { - border-bottom-color: #911; - } - } - } -} - -.note { - min-height: 17px; - margin: 4px 0 2px; - font-size: 12px; - color: $brand-gray; - - .spinner { - margin-right: 3px; - vertical-align: middle; - } -} - - -// Checkboxes and Radiobuttons -// -// For checkboxes and radio button selections. -.form-checkbox { - padding-left: 20px; - margin: 15px 0; - vertical-align: middle; - - label { - - em.highlight { - position: relative; - left: -4px; - padding: 2px 4px; - font-style: normal; - background: #fffbdc; - border-radius: 3px; - } - } - - input[type=checkbox], - input[type=radio] { - float: left; - margin: 2px 0 0 -20px; - vertical-align: middle; - } - - .note { - display: block; - margin: 0; - font-size: 12px; - font-weight: normal; - color: #666; - } -} - - -// Field groups -// -// Wrap field groups in `` to lay them out horizontally - great for -// the top of pages with autosave. -.hfields { - margin: 15px 0; - @include clearfix; - - dl.form { - float: left; - margin: 0 30px 0 0; - - > dt { - label { - display: inline-block; - margin: 5px 0 0; - color: #666; - } - - img { - position: relative; - top: -2px; - } - } - } - - .btn { - float: left; - margin: 28px 25px 0 -20px; - } - - select { margin-top: 5px; } -} - - -// Hide the up/down buttons in in the login form, the -// input is used for two-factor auth codes, type="number" makes it more usable -// on phones -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - margin: 0; - -webkit-appearance: none; -} - - -// Input groups -.input-group { - display: table; - - input { - position: relative; - width: 100%; - - &:focus { - z-index: 2; - } - } - - input[type="text"] + .btn { - margin-left: 0; - } - - // For when you want the input group to behave like inline-block. - &.inline { - display: inline-table; - } -} - -.input-group input, -.input-group-button { - display: table-cell; -} - -.input-group-button { - width: 1%; - vertical-align: middle; // Match the inputs -} - -.input-group input:first-child, -.input-group-button:first-child .btn { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.input-group-button:first-child .btn { - margin-right: -1px; -} - -.input-group input:last-child, -.input-group-button:last-child .btn { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.input-group-button:last-child .btn { - margin-left: -1px; -} - -.form-actions { - @include clearfix; - - .btn { - float: right; - - + .btn { - margin-right: 5px; - } - } -} - -.form-warning { - padding: 8px 10px; - margin: 10px 0; - font-size: 14px; - color: #333; - background: #ffffe2; - border: 1px solid #e7e4c2; - border-radius: 4px; - - p { - margin: 0; - line-height: 1.5; - } - - strong { color: #000; } - - a { font-weight: bold; } -} - - -// Inline verification -// -// Used for example when autosaving checkboxes in settings. -.status-indicator { - @include icon-bootstrap(16px); - margin-left: 5px; -} - -.status-indicator-success:before { - color: $brand-green; - content: "\f03a"; // octicon-check -} - -.status-indicator-failed:before { - color: $brand-red; - content: "\f02d"; // octicon-x -} - - -// Custom select -// -// Apply `.select` to any `` element for custom styles. - -.select { - display: inline-block; - max-width: 100%; - padding: 7px 24px 7px 8px; - vertical-align: middle; - background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center; - background-size: 8px 10px; - box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075); - // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec. - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - // IE9 hacks to hide the background-image and reduce padding - padding-right: 8px \9; - background-image: none \9; - - &:focus { - outline: none; - border-color: #51a7e8; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); - } - - // Hides the default caret in IE11 - &::-ms-expand { - opacity: 0; - } -} - -.select-sm { - padding-top: 3px; - padding-bottom: 3px; - font-size: 12px; - - &:not([multiple]) { - height: 26px; - min-height: 26px; - } -} diff --git a/scss/_normalize.scss b/scss/_normalize.scss deleted file mode 100644 index fd4a1fa54b..0000000000 --- a/scss/_normalize.scss +++ /dev/null @@ -1,423 +0,0 @@ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; /* 2 */ -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} diff --git a/scss/_states.scss b/scss/_states.scss deleted file mode 100644 index 5be5b06146..0000000000 --- a/scss/_states.scss +++ /dev/null @@ -1,32 +0,0 @@ -// A rounded corner box containing a label "open" or "closed" -// Without a state it is grey. -// -// open - green background -// reopened - green background -// closed - red background -// merged - purple background -// renamed - orange background -// -// No styleguide reference -.state { - display: inline-block; - padding: 4px 8px; - font-weight: bold; - line-height: 20px; - color: #fff; - text-align: center; - border-radius: 3px; - background-color: #999; -} - -.state-open, -.state-proposed, -.state-reopened { - background-color: $status-open; -} - -.state-merged { background-color: $status-merged; } - -.state-closed { background-color: $status-closed; } - -.state-renamed { background-color: $status-renamed; } diff --git a/scss/_tabnav.scss b/scss/_tabnav.scss deleted file mode 100644 index 9c1ea1b906..0000000000 --- a/scss/_tabnav.scss +++ /dev/null @@ -1,65 +0,0 @@ -// Outer wrapper -.tabnav { - margin-top: 0; - margin-bottom: 15px; - border-bottom: 1px solid #ddd; - - .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; - border: 1px solid transparent; - border-bottom: 0; - - &.selected { - color: #333; - background-color: #fff; - border-color: #ddd; - border-radius: 3px 3px 0 0; - } - - &:hover { text-decoration: none; } -} - -// Tabnav extras -// -// Tabnav extras are non-tab elements that sit in the tabnav. Usually they're -// inline text or links. - -.tabnav-extra { - display: inline-block; - padding-top: 10px; - margin-left: 10px; - font-size: 12px; - color: #666; - - > .octicon { - margin-right: 2px; - } -} - -a.tabnav-extra:hover { - color: $brand-blue; - text-decoration: none; -} - -// Tabnav buttons -// -// For when there are multiple buttons, space them out appropriately. Requires -// the buttons to be floated or inline-block. - -.tabnav-btn { - margin-left: 10px; -} diff --git a/scss/_tooltips.scss b/scss/_tooltips.scss deleted file mode 100644 index 7327e1bdd5..0000000000 --- a/scss/_tooltips.scss +++ /dev/null @@ -1,254 +0,0 @@ -$multiline-max-width: 250px; -$tooltip-background-color: rgba(0, 0, 0, 0.8); -$tooltip-text-color: #fff; - -.tooltipped { - position: relative; -} - -// This is the tooltip bubble -.tooltipped:after { - position: absolute; - z-index: 1000000; - display: none; - padding: 5px 8px; - font: normal normal 11px/1.5 $body-font; - color: $tooltip-text-color; - 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: $tooltip-background-color; - border-radius: 3px; - -webkit-font-smoothing: subpixel-antialiased; -} - -// This is the tooltip arrow -.tooltipped:before { - position: absolute; - z-index: 1000001; - display: none; - width: 0; - height: 0; - color: $tooltip-background-color; - pointer-events: none; - content: ""; - border: 5px solid transparent; -} - -// This will indicate when we'll activate the tooltip -.tooltipped:hover, -.tooltipped:active, -.tooltipped:focus { - &:before, - &:after { - display: inline-block; - text-decoration: none; - } -} - -.tooltipped-multiline:hover, -.tooltipped-multiline:active, -.tooltipped-multiline:focus { - &:after { - display: table-cell; - } -} - -// Tooltipped south -.tooltipped-s, -.tooltipped-se, -.tooltipped-sw { - &:after { - top: 100%; - right: 50%; - margin-top: 5px; - } - - &:before { - top: auto; - right: 50%; - bottom: -5px; - margin-right: -5px; - border-bottom-color: $tooltip-background-color; - } -} - -.tooltipped-se { - &:after { - right: auto; - left: 50%; - margin-left: -15px; - } -} - -.tooltipped-sw:after { - margin-right: -15px; -} - -// Tooltips above the object -.tooltipped-n, -.tooltipped-ne, -.tooltipped-nw { - &:after { - right: 50%; - bottom: 100%; - margin-bottom: 5px; - } - - &:before { - top: -5px; - right: 50%; - bottom: auto; - margin-right: -5px; - border-top-color: $tooltip-background-color; - } -} - -.tooltipped-ne { - &:after { - right: auto; - left: 50%; - margin-left: -15px; - } -} - -.tooltipped-nw:after { - margin-right: -15px; -} - -// Move the tooltip body to the center of the object. -.tooltipped-s:after, -.tooltipped-n:after { - transform: translateX(50%); -} - -// Tooltipped to the left -.tooltipped-w { - &:after { - right: 100%; - bottom: 50%; - margin-right: 5px; - transform: translateY(50%); - } - - &:before { - top: 50%; - bottom: 50%; - left: -5px; - margin-top: -5px; - border-left-color: $tooltip-background-color; - } -} - -// tooltipped to the right -.tooltipped-e { - &:after { - bottom: 50%; - left: 100%; - margin-left: 5px; - transform: translateY(50%); - } - - &:before { - top: 50%; - right: -5px; - bottom: 50%; - margin-top: -5px; - border-right-color: $tooltip-background-color; - } -} - -// Multiline tooltips -// -// `.tooltipped-multiline` Add this class when you have long content. -// The downside is you cannot preformat the text with newlines and `[w,e]` -// are always `$multiline-max-width` wide. -.tooltipped-multiline { - &:after { - width: max-content; - max-width: $multiline-max-width; - word-break: break-word; - word-wrap: normal; - white-space: pre-line; - border-collapse: separate; - } - - &.tooltipped-s:after, - &.tooltipped-n:after { - right: auto; - left: 50%; - transform: translateX(-50%); - } - - &.tooltipped-w:after, - &.tooltipped-e:after { - right: 100%; - } -} - -@media screen and (min-width:0\0) { - // IE9 and IE10 rule sets go here - .tooltipped-multiline:after { - width: $multiline-max-width; - } -} - -// Sticky tooltips -// -// Always show the tooltip. -.tooltipped-sticky { - &:before, - &:after { - display: inline-block; - } - - &.tooltipped-multiline { - &:after { - display: table-cell; - } - } -} - -// Alert tooltips -// -// Colors for different alert states. -@mixin colorizeTooltip($text-color, $background-color) { - &:after { - color: $text-color; - background: $background-color; - } - - .tooltipped-s, - .tooltipped-se, - .tooltipped-sw { - &:before { - border-bottom-color: $background-color; - } - } - - &.tooltipped-n, - &.tooltipped-ne, - &.tooltipped-nw { - &:before { - border-top-color: $background-color; - } - } - - &.tooltipped-e:before { - border-right-color: $background-color; - } - - &.tooltipped-w:before { - border-left-color: $background-color; - } -} - -.fullscreen-overlay-enabled.dark-theme .tooltipped { - @include colorizeTooltip(#000, rgba(255, 255, 255, 0.8)); -} diff --git a/scss/_truncate.scss b/scss/_truncate.scss deleted file mode 100644 index 7e38d828c6..0000000000 --- a/scss/_truncate.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Truncate -// -// css-truncate will shorten text with an ellipsis. - -.css-truncate { - // Truncate double target - // - // 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 - &.css-truncate-target, - .css-truncate-target { - display: inline-block; - max-width: 125px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - vertical-align: top; - } - - &.expandable.zeroclipboard-is-hover .css-truncate-target, - &.expandable.zeroclipboard-is-hover.css-truncate-target, - &.expandable:hover .css-truncate-target, - &.expandable:hover.css-truncate-target { - max-width: 10000px !important; - } -} diff --git a/scss/_type.scss b/scss/_type.scss deleted file mode 100644 index 2710e2111f..0000000000 --- a/scss/_type.scss +++ /dev/null @@ -1,92 +0,0 @@ -// Headings -// -------------------------------------------------- - -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 15px; - margin-bottom: 15px; - line-height: 1.1; -} - -h1 { font-size: 30px; } -h2 { font-size: 21px; } -h3 { font-size: 16px; } -h4 { font-size: 14px; } -h5 { font-size: 12px; } -h6 { font-size: 11px; } - - -// Body text -// -------------------------------------------------- - -small { - font-size: 90%; -} - -blockquote { - margin: 0; -} - -// Large leading paragraphs -.lead { - margin-bottom: 30px; - font-size: 20px; - font-weight: 300; - color: #555; -} - -// Text utilities -.text-muted { color: $brand-gray; } -.text-danger { color: $brand-red; } - -.text-emphasized { - font-weight: bold; - color: #333; -} - - -// Lists -// -------------------------------------------------- - -ul, -ol { - padding: 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; -} - - -// Code -// -------------------------------------------------- - -tt, -code { - font-family: $mono-font; - font-size: 12px; -} - -pre { - margin-top: 0; - margin-bottom: 0; - font: 12px $mono-font; -} diff --git a/scss/_utility.scss b/scss/_utility.scss deleted file mode 100644 index e83a7735b2..0000000000 --- a/scss/_utility.scss +++ /dev/null @@ -1,86 +0,0 @@ -// Clear floats -.clearfix { - @include clearfix; -} - -// Floats -.right { float: right; } - -.left { float: left; } - - -// Layout - -// Centers content horizontally. Can be used inside or outside the grid. -.centered { - display: block; - float: none; - margin-left: auto; - margin-right: auto; -} - - -// Text alignment -.text-right { text-align: right; } - -.text-left { text-align: left; } - -.text-center { text-align: center; } - - -// Text states -.danger { color: #c00; } - -.mute { color: #000; } - -.text-diff-added { color: darken($brand-green, 10%); } - -.text-diff-deleted { color: $brand-red; } - -.text-open, -.text-success { color: $status-open; } - -.text-closed { color: $status-closed; } - -.text-reverted { color: $status-reverted; } - -.text-merged { color: $status-merged; } - -.text-renamed { color: $status-renamed; } - -.text-pending { color: $status-pending; } - -.text-error, -.text-failure { color: $brand-red; } - - -// Muted link -// -// Have a link you need to be gray to start, and blue on hover? Use this. -.muted-link { - color: $brand-gray; - - &:hover { - color: $brand-blue; - text-decoration: none; - } -} - -// Misc -.hidden { - display: none; -} - -.warning { - padding: 0.5em; - margin-bottom: 0.8em; - font-weight: bold; - background-color: #fffccc; -} - -.error_box { - padding: 1em; - font-weight: bold; - background-color: #ffebe8; - border: 1px solid #dd3c10; -} diff --git a/scss/primer.scss b/scss/primer.scss deleted file mode 100644 index 2466d45075..0000000000 --- a/scss/primer.scss +++ /dev/null @@ -1,39 +0,0 @@ -/* - * Primer - * http://primercss.io - * - * Released under MIT license. Copyright 2015 GitHub, Inc. - */ - -// Primer master file -// -// Imports all Primer files in their intended order for easy mass-inclusion. -// Should you need specific files, you can easily use separate `@import`s. - -// Global requirements -@import "variables"; -@import "mixins"; - -// Basecoat -@import "normalize"; -@import "base"; -@import "type"; -@import "layout"; -@import "forms"; -@import "utility"; - -// Components -@import "alerts"; -@import "avatars"; -@import "blankslate"; -@import "counter"; -@import "buttons"; -@import "menu"; -@import "tabnav"; -@import "filter-list"; -@import "states"; -@import "tooltips"; - -// Utilities -@import "flex-table"; -@import "truncate";