1
1
mirror of https://github.com/primer/css.git synced 2024-11-26 23:56:04 +03:00

Merge branch 'master' into btn_counters

Conflicts:
	css/.primer-stats.md
	css/primer.css
This commit is contained in:
Mark Otto 2015-03-30 11:06:44 -07:00
commit 1b9900e4c1
19 changed files with 98 additions and 34 deletions

11
.editorconfig Normal file
View File

@ -0,0 +1,11 @@
# editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

View File

@ -1,3 +1,12 @@
scss:
enabled: false
config_file: scss/.scss-style.yml
ruby:
enabled: false
coffee_script:
enabled: false
java_script:
enabled: false

View File

@ -10,7 +10,7 @@ Before you do, would you mind reading [this license agreement](CLA.md)? If you o
## Using the issue tracker
The [issue tracker](https://github.com/twbs/bootstrap/issues) is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions:
The [issue tracker](https://github.com/primer/primer/issues) is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions:
* Please **do not** use the issue tracker for personal support requests.
* Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others.
@ -28,7 +28,7 @@ Guidelines for bug reports:
2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository.
3. **Isolate the problem** — ideally create a [reduced test case](http://css-tricks.com/6263-reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs.
@ -63,7 +63,7 @@ Adhering to the following process is the best way to get your work included in t
2. Configure and install the dependencies: `bower install`
3. Create a new branch: `git checkout -b my-branch-name`
4. Make your change, add tests, and make sure the tests still pass
5. Push to your fork and [submit a pull request][pr]
5. Push to your fork and [submit a pull request][https://help.github.com/articles/creating-a-pull-request/]
6. Pat your self on the back and wait for your pull request to be reviewed and merged.
Here are a few things you can do that will increase the likelihood of your pull request being accepted:

View File

@ -1,6 +1,6 @@
# Primer
Primer is the CSS toolkit that power 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.
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.
[**Read the Primer documentation**](http://primercss.io) to learn more.

View File

@ -3,13 +3,13 @@
"version": "2.0.2",
"ignore": [
"docs/",
"script/",
".gitignore",
".hound.yml",
".scss-lint.yml",
"_config.yml",
"Gemfile",
"Gemfile.lock",
"Rakefile"
"Gruntfile.js"
],
"main": [
"scss/primer.scss"

View File

@ -7,17 +7,17 @@
### css/primer.css
- **Total Stylesheets:** 1
- **Total Stylesheet Size:** 31044
- **Total Stylesheet Size:** 30929
- **Total Media Queries:** 1
- **Total Rules:** 407
- **Selectors Per Rule:** 1.4422604422604424
- **Total Selectors:** 587
- **Identifiers Per Selector:** 2.1499148211243613
- **Specificity Per Selector:** 16.75809199318569
- **Total Rules:** 408
- **Selectors Per Rule:** 1.4436274509803921
- **Total Selectors:** 589
- **Identifiers Per Selector:** 2.1494057724957556
- **Specificity Per Selector:** 16.769100169779286
- **Top Selector Specificity:** 50
- **Top Selector Specificity Selector:** .fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before
- **Total Id Selectors:** 0
- **Total Identifiers:** 1262
- **Total Declarations:** 1009
- **Total Unique Colors:** 79
- **Total Identifiers:** 1266
- **Total Declarations:** 1003
- **Total Unique Colors:** 78
- **Total Important Keywords:** 1

File diff suppressed because one or more lines are too long

View File

@ -11,6 +11,10 @@ Primer is GitHub's internal CSS framework. It includes basic global styling for
Open-sourcing Primer means sharing and learning with the community. There's a lot we can improve upon in Primer, and help is always appreciated. While we don't currently plan on building this out as a competitor to other front-end frameworks, we will occasionally add, remove, or modify things.
### Browser support
Primer currently supports Internet Explorer 9+ and the latest two versions of Chrome, Safari, and Firefox on OS X and Windows. While not a responsive or mobile-focused project, Mobile Safari and Chrome for Android should render just fine. Support for Linux-based browsers is not strictly guaranteed, but accounted for whenever possible.
### Future updates
See the [roadmap](/roadmap) for a rough outline on what's slated for future versions of Primer.

View File

@ -3,7 +3,7 @@ layout: page
title: Blankslate
---
Blankslates inform 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.
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
@ -37,7 +37,7 @@ When it helps the message, include `.mega-octicon`s as the first elements in the
## Variations
Add an additional optional class to the `.blankslate` to change it's appearance.
Add an additional optional class to the `.blankslate` to change its appearance.
### Fixed width

View File

@ -55,6 +55,32 @@ Outline buttons downplay an action as they appear like boxy links. Just add `.bt
<button class="btn btn-sm btn-outline" type="button">Outline button</button>
{% endexample %}
## Disabled state
Disable `<button>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.
{% example html %}
<button class="btn" type="button" disabled>Disabled button</button>
<a class="btn disabled" href="#" role="button">Disabled button</a>
{% endexample %}
Similar styles are applied to primary, danger, and outline buttons:
{% example html %}
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
<a class="btn btn-primary disabled" href="#" role="button">Disabled button</a>
{% endexample %}
{% example html %}
<button class="btn btn-danger" type="button" disabled>Disabled button</button>
<a class="btn btn-danger disabled" href="#" role="button">Disabled button</a>
{% endexample %}
{% example html %}
<button class="btn btn-outline" type="button" disabled>Disabled button</button>
<a class="btn btn-outline disabled" href="#" role="button">Disabled button</a>
{% endexample %}
## 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.

View File

@ -281,7 +281,7 @@ body {
border: 1px solid lighten($brand-green, 30%);
}
// Override markdown styles
// Override Markdown styles to restore values from `_type.scss`
ul {
padding: 0;
margin-top: 0;

View File

@ -191,7 +191,7 @@ Here, we have two desktop bundles to support IE9's maximum selector limit per CS
### Including (S)CSS files
Use [Sprockets](https://github.com/sstephenson/sprockets) to **require** files. However, you should explicitly **import** any scss that does not generate styles (`globals/`) in the particular SCSS file you'll be needing it's helpers in. Here's a good example:
Use [Sprockets](https://github.com/sstephenson/sprockets) to **require** files. However, you should explicitly **import** any scss that does not generate styles (`globals/`) in the particular SCSS file you'll be needing its helpers in. Here's a good example:
{% highlight scss %}
//= require_tree ./plugins

View File

@ -29,7 +29,7 @@ The container applies `width: 980px;` and uses horizontal `margin`s to center it
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 outter row to clear the floated columns with `<div class="columns">`.
- 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`).

View File

@ -118,7 +118,7 @@ Additional bits of text and links can be styled for optimal placement with `.tab
## Filter list
A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill it's background with blue and make the text white.
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 %}
<ul class="filter-list">

View File

@ -16,6 +16,7 @@ A brief—and incomplete—look at potential future Primer updates with a focus
- [ ] Clean up the utility classes
- [ ] De-dupe text color utilities
- [ ] Remove the `// Misc` utilities
- [ ] Remove `padding` and `margin` resets on `<ul>`s and `<ol>`s
## v4
- [ ] Refactor blankslates to reduce selectors, overrides, and UI options

View File

@ -68,7 +68,7 @@ Wrap `<blockquote>` around any <abbr title="HyperText Markup Language">HTML</abb
### Unordered
A list of items in which the order does *not* explicitly matter.
A list of items in which the order does *not* explicitly matter. **The broken display is intended** as Primer resets `<ul>`s and `<ol>`s for the time being. This will eventually be undone in the next major version.
{% example html %}
<ul>

View File

@ -10,7 +10,8 @@
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
@include gradient(#fcfcfc, #eee);
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
user-select: none;
@ -44,7 +45,8 @@
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
text-decoration: none;
@include gradient(#eee, #ddd);
background-color: #ddd;
background-image: linear-gradient(#eee, #ddd);
border-color: #ccc;
}
@ -76,7 +78,8 @@
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
@include gradient(#8add6d, #60b044);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: darken(#60b044, 2%);
.counter {
@ -86,7 +89,8 @@
&:hover {
color: #fff;
@include gradient(darken(#8add6d, 5%), darken(#60b044, 5%));
background-color: darken(#60b044, 5%);
background-image: linear-gradient(darken(#8add6d, 5%), darken(#60b044, 5%));
border-color: #4a993e;
}
@ -103,7 +107,8 @@
&,
&:hover {
color: #fefefe;
@include gradient(#c3ecb4, #add39f);
background-color: #add39f;
background-image: linear-gradient(#c3ecb4, #add39f);
border-color: #b9dcac #b9dcac #a7c89b;
}
}
@ -115,7 +120,8 @@
&:hover {
color: #fff;
@include gradient(#dc5f59, #b33630);
background-color: #b33630;
background-image: linear-gradient(#dc5f59, #b33630);
border-color: #cd504a;
}
@ -132,7 +138,8 @@
&,
&:hover {
color: #cb7f7f;
@include gradient(#fefefe, #efefef);
background-color: #efefef;
background-image: linear-gradient(#fefefe, #efefef);
border-color: #e1e1e1;
}
}
@ -174,7 +181,8 @@
&,
&:hover {
color: #777;
background-color: #f5f5f5;
background-color: #fff;
background-image: none;
border-color: #e5e5e5;
}
}
@ -270,9 +278,13 @@
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
&:hover,
&:active {
text-decoration: none;
}
&:hover {
color: $brand-blue;
text-decoration: none;
cursor: pointer;
}
}

View File

@ -26,11 +26,11 @@
// Column widths
.one-third {
width: 33%;
width: 33.333333%;
}
.two-thirds {
width: 67%;
width: 66.666667%;
}
.one-fourth {

View File

@ -21,6 +21,7 @@
// $end - The color hex at the bottom.
@mixin gradient($start: #fafafa, $end: #eaeaea) {
@warn "Gradient mixin is deprecated.";
background-color: $end;
// FF 3.6+
background-image: -moz-linear-gradient($start, $end);