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:
commit
1b9900e4c1
11
.editorconfig
Normal file
11
.editorconfig
Normal 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
|
@ -1,3 +1,12 @@
|
||||
scss:
|
||||
enabled: false
|
||||
config_file: scss/.scss-style.yml
|
||||
|
||||
ruby:
|
||||
enabled: false
|
||||
|
||||
coffee_script:
|
||||
enabled: false
|
||||
|
||||
java_script:
|
||||
enabled: false
|
||||
|
@ -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:
|
||||
|
@ -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.
|
||||
|
||||
|
@ -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"
|
||||
|
@ -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
@ -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.
|
||||
|
@ -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
|
||||
|
||||
|
@ -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.
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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`).
|
||||
|
||||
|
@ -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">
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -26,11 +26,11 @@
|
||||
|
||||
// Column widths
|
||||
.one-third {
|
||||
width: 33%;
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.two-thirds {
|
||||
width: 67%;
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.one-fourth {
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user