mirror of
https://github.com/primer/css.git
synced 2024-09-20 13:17:29 +03:00
Merge remote-tracking branch 'upstream/master' into feat/centering
This commit is contained in:
Thomas Tuts
commit
5a3215f51b
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
|
||||
12
.hound.yml
Normal file
12
.hound.yml
Normal file
@ -0,0 +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:
|
||||
|
||||
@ -26,6 +26,9 @@ module.exports = function(grunt) {
|
||||
dist: {
|
||||
src: 'css/*.css'
|
||||
},
|
||||
docs: {
|
||||
src: '_site/*.css'
|
||||
}
|
||||
},
|
||||
|
||||
// Runs CSS reporting
|
||||
@ -60,7 +63,7 @@ module.exports = function(grunt) {
|
||||
|
||||
watch: {
|
||||
sass: {
|
||||
files: 'scss/**/*.scss',
|
||||
files: ['scss/**/*.scss', 'docs/docs.scss'],
|
||||
tasks: ['sass', 'autoprefixer', 'parker']
|
||||
}
|
||||
},
|
||||
@ -98,8 +101,8 @@ module.exports = function(grunt) {
|
||||
grunt.loadNpmTasks('grunt-sass');
|
||||
|
||||
// Generate and format the CSS
|
||||
grunt.registerTask('default', ['sass', 'autoprefixer', 'parker']);
|
||||
grunt.registerTask('default', ['sass', 'jekyll', 'autoprefixer', 'parker']);
|
||||
|
||||
// Publish to GitHub
|
||||
grunt.registerTask('publish', ['jekyll', 'buildcontrol:pages']);
|
||||
grunt.registerTask('publish', ['jekyll', 'autoprefixer:docs', 'buildcontrol:pages']);
|
||||
};
|
||||
|
||||
21
README.md
21
README.md
@ -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.
|
||||
|
||||
@ -24,7 +24,7 @@ _**Heads up!** We love open source, but Primer is unlikely to add new features t
|
||||
|
||||
### Manually
|
||||
|
||||
Download the [latest release](https://github.com/github/primer/releases/latest) and copy the SCSS files over to your own project. Once your files are in place, jump to the [usage guidelines](#usage) for including Primer into your own CSS.
|
||||
Download the [latest release](https://github.com/primer/primer/releases/latest) and copy the SCSS files over to your own project. Once your files are in place, jump to the [usage guidelines](#usage) for including Primer into your own CSS.
|
||||
|
||||
### Bower
|
||||
|
||||
@ -49,12 +49,12 @@ Once included, simply `@import` either the master SCSS file, or the individual f
|
||||
|
||||
```scss
|
||||
// Example: All of Primer
|
||||
@import "primer/scss/primer";
|
||||
@import "primer-css/scss/primer";
|
||||
|
||||
// Example: Individual files
|
||||
@import "primer/scss/variables";
|
||||
@import "primer/scss/mixins";
|
||||
@import "primer/scss/base";
|
||||
@import "primer-css/scss/variables";
|
||||
@import "primer-css/scss/mixins";
|
||||
@import "primer-css/scss/base";
|
||||
```
|
||||
|
||||
## Documentation
|
||||
@ -66,6 +66,7 @@ Primer's documentation is built with Jekyll and published to `http://primercss.i
|
||||
You'll need the following installed:
|
||||
|
||||
- Latest Jekyll (minimum v2.2.0): `$ gem install jekyll`
|
||||
- Latest Rouge: `$ gem install rouge`
|
||||
- Latest Sass: `$ gem install sass`
|
||||
- Latest Grunt CLI: `$ npm install -g grunt-cli`
|
||||
- [Node.js and npm](http://nodejs.org/download/)
|
||||
@ -129,6 +130,10 @@ $ bower install
|
||||
|
||||
Check in `bower.json` and all changes under `vendor/assets/bower_components`.
|
||||
|
||||
## Development
|
||||
|
||||
Development of Primer happens in our primary branch, `master`. For stable versions, see the [releases page](https://github.com/primer/primer/releases). `master` will always be up to date with the latest changes, including those which have yet to be released.
|
||||
|
||||
## Contributing
|
||||
|
||||
By contributing to Primer, you agree to the terms presented in our [CLA](CLA.md). *More information will be provided here soon.*
|
||||
@ -138,11 +143,11 @@ When contributing changes to Primer, be sure to do the following steps when open
|
||||
1. Bump the version number in `bower.json` (it's purely placebo right now, but it's good habit) and `package.json`.
|
||||
2. Run `grunt css` and commit the changes. This compiles the SCSS to CSS so we can do basic analysis on the number of selectors, file size, etc.
|
||||
|
||||
In addition, please read through our [contributing guidelines](https://github.com/github/primer/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
|
||||
In addition, please read through our [contributing guidelines](https://github.com/primer/primer/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
|
||||
|
||||
All HTML and CSS should conform to the [style guidelines](http://primercss.io/guidelines).
|
||||
|
||||
Editor preferences are available in the [editor config](https://github.com/github/primer/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
|
||||
Editor preferences are available in the [editor config](https://github.com/primer/primer/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
|
||||
|
||||
## Versioning
|
||||
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "primer-css",
|
||||
"version": "2.0.2",
|
||||
"version": "2.0.3",
|
||||
"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:** 30812
|
||||
- **Total Stylesheet Size:** 31130
|
||||
- **Total Media Queries:** 1
|
||||
- **Total Rules:** 404
|
||||
- **Selectors Per Rule:** 1.4405940594059405
|
||||
- **Total Selectors:** 582
|
||||
- **Identifiers Per Selector:** 2.1460481099656357
|
||||
- **Specificity Per Selector:** 16.6786941580756
|
||||
- **Total Rules:** 408
|
||||
- **Selectors Per Rule:** 1.4558823529411764
|
||||
- **Total Selectors:** 594
|
||||
- **Identifiers Per Selector:** 2.15993265993266
|
||||
- **Specificity Per Selector:** 16.914141414141415
|
||||
- **Top Selector Specificity:** 50
|
||||
- **Top Selector Specificity Selector:** .fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before
|
||||
- **Total Id Selectors:** 0
|
||||
- **Total Identifiers:** 1249
|
||||
- **Total Identifiers:** 1283
|
||||
- **Total Declarations:** 1003
|
||||
- **Total Unique Colors:** 79
|
||||
- **Total Unique Colors:** 78
|
||||
- **Total Important Keywords:** 1
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -9,7 +9,11 @@ Learn more about this styleguide, particularly how it's built and who maintains
|
||||
|
||||
Primer is GitHub's internal CSS framework. It includes basic global styling for typography, small components like buttons and tabs, and our general guidelines for writing HTML and CSS. It's been used internally at GitHub for years now.
|
||||
|
||||
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 ocassionally add, remove, or modify things.
|
||||
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
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ Be sure to set `width` and `height` attributes for maximum browser performance.
|
||||
|
||||
## Small avatars
|
||||
|
||||
We ocassionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
|
||||
{% example html %}
|
||||
<img class="avatar avatar-small" src="https://avatars3.githubusercontent.com/u/9919?v=3&s=32" width="32" height="32">
|
||||
|
||||
@ -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.
|
||||
@ -80,6 +106,30 @@ You can easily append a count to a **small button**. Add the `.with-count` class
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
You can also use the [counter](utilities/#counter) component within buttons:
|
||||
|
||||
{% example html %}
|
||||
<button class="btn" type="button">
|
||||
Button
|
||||
<span class="counter">12</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary" type="button">
|
||||
Button
|
||||
<span class="counter">12</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-danger" type="button">
|
||||
Button
|
||||
<span class="counter">12</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline" type="button">
|
||||
Button
|
||||
<span class="counter">12</span>
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
||||
## Button groups
|
||||
|
||||
Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.btn-group` and the buttons will be rounded and spaced automatically.
|
||||
|
||||
@ -3,6 +3,13 @@
|
||||
# only main files contain this front matter, not partials.
|
||||
---
|
||||
|
||||
/*
|
||||
* Primer documentation styles
|
||||
* http://primercss.io
|
||||
*
|
||||
* Released under MIT license. Copyright 2015 GitHub, Inc.
|
||||
*/
|
||||
|
||||
//
|
||||
// Import Primer itself
|
||||
//
|
||||
@ -274,8 +281,9 @@ body {
|
||||
border: 1px solid lighten($brand-green, 30%);
|
||||
}
|
||||
|
||||
// Override markdown styles
|
||||
ul {
|
||||
// Override Markdown styles to restore values from `_type.scss`
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 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
|
||||
|
||||
@ -66,6 +66,10 @@ Wrap `<blockquote>` around any <abbr title="HyperText Markup Language">HTML</abb
|
||||
|
||||
## Lists
|
||||
|
||||
<div class="flash">
|
||||
<strong>Heads up!</strong> The broken display of lists is <strong>intentional</strong> as Primer globally resets these elements for the time being. This will eventually be undone in the next major version.
|
||||
</div>
|
||||
|
||||
### Unordered
|
||||
|
||||
A list of items in which the order does *not* explicitly matter.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "primer",
|
||||
"version": "2.0.2",
|
||||
"version": "2.0.3",
|
||||
"homepage": "http://primercss.io",
|
||||
"author": "GitHub, Inc.",
|
||||
"scss": "./scss/primer.scss",
|
||||
|
||||
446
scss/.scss-lint.yml
Normal file
446
scss/.scss-lint.yml
Normal file
@ -0,0 +1,446 @@
|
||||
# This is the lint file for .scss files. It uses https://github.com/causes/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/causes/scss-lint/blob/master/config/default.yml
|
||||
# below is our settings.
|
||||
|
||||
linters:
|
||||
BangFormat:
|
||||
enabled: true
|
||||
space_before_bang: true
|
||||
space_after_bang: false
|
||||
|
||||
BorderZero:
|
||||
enabled: true
|
||||
convention: zero # or `none`
|
||||
|
||||
ColorKeyword:
|
||||
enabled: true
|
||||
|
||||
ColorVariable:
|
||||
enabled: false
|
||||
|
||||
Comment:
|
||||
enabled: false
|
||||
|
||||
DebugStatement:
|
||||
enabled: true
|
||||
|
||||
DeclarationOrder:
|
||||
enabled: true
|
||||
|
||||
DuplicateProperty:
|
||||
enabled: true
|
||||
|
||||
ElsePlacement:
|
||||
enabled: true
|
||||
style: same_line # or 'new_line'
|
||||
|
||||
EmptyLineBetweenBlocks:
|
||||
enabled: true
|
||||
ignore_single_line_blocks: true
|
||||
|
||||
EmptyRule:
|
||||
enabled: false
|
||||
|
||||
FinalNewline:
|
||||
enabled: true
|
||||
present: true
|
||||
|
||||
HexLength:
|
||||
enabled: true
|
||||
style: short # or 'long'
|
||||
|
||||
HexNotation:
|
||||
enabled: true
|
||||
style: lowercase # or 'uppercase'
|
||||
|
||||
HexValidation:
|
||||
enabled: true
|
||||
|
||||
IdSelector:
|
||||
enabled: true
|
||||
|
||||
ImportantRule:
|
||||
enabled: true
|
||||
|
||||
ImportPath:
|
||||
enabled: true
|
||||
leading_underscore: false
|
||||
filename_extension: false
|
||||
|
||||
Indentation:
|
||||
enabled: true
|
||||
allow_non_nested_indentation: false
|
||||
character: space # or 'tab'
|
||||
width: 2
|
||||
|
||||
LeadingZero:
|
||||
enabled: true
|
||||
style: include_zero
|
||||
|
||||
MergeableSelector:
|
||||
enabled: true
|
||||
force_nesting: true
|
||||
|
||||
NameFormat:
|
||||
enabled: false
|
||||
convention: hyphenated_lowercase # or 'BEM', or a regex pattern
|
||||
|
||||
NestingDepth:
|
||||
enabled: false
|
||||
max_depth: 3
|
||||
|
||||
PlaceholderInExtend:
|
||||
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",
|
||||
"-webkit-box-sizing",
|
||||
"box-sizing",
|
||||
"-webkit-appearance",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
"padding-bottom",
|
||||
"padding-left",
|
||||
"margin",
|
||||
"margin-top",
|
||||
"margin-right",
|
||||
"margin-bottom",
|
||||
"margin-left",
|
||||
"overflow",
|
||||
"overflow-x",
|
||||
"overflow-y",
|
||||
"-webkit-overflow-scrolling",
|
||||
"-ms-overflow-x",
|
||||
"-ms-overflow-y",
|
||||
"-ms-overflow-style",
|
||||
"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",
|
||||
"-webkit-hyphens",
|
||||
"-moz-hyphens",
|
||||
"hyphens",
|
||||
"line-height",
|
||||
"color",
|
||||
"text-align",
|
||||
"-webkit-text-align-last",
|
||||
"-moz-text-align-last",
|
||||
"-ms-text-align-last",
|
||||
"text-align-last",
|
||||
"text-emphasis",
|
||||
"text-emphasis-color",
|
||||
"text-emphasis-style",
|
||||
"text-emphasis-position",
|
||||
"text-decoration",
|
||||
"text-indent",
|
||||
"text-justify",
|
||||
"text-outline",
|
||||
"-ms-text-overflow",
|
||||
"text-overflow",
|
||||
"text-overflow-ellipsis",
|
||||
"text-overflow-mode",
|
||||
"text-shadow",
|
||||
"text-transform",
|
||||
"text-wrap",
|
||||
"-webkit-text-size-adjust",
|
||||
"-ms-text-size-adjust",
|
||||
"letter-spacing",
|
||||
"-ms-word-break",
|
||||
"word-break",
|
||||
"word-spacing",
|
||||
"-ms-word-wrap",
|
||||
"word-wrap",
|
||||
"-moz-tab-size",
|
||||
"-o-tab-size",
|
||||
"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",
|
||||
"-webkit-touch-callout",
|
||||
"-webkit-user-select",
|
||||
"-moz-user-select",
|
||||
"-ms-user-select",
|
||||
"-o-user-select",
|
||||
"user-select",
|
||||
"nav-index",
|
||||
"nav-up",
|
||||
"nav-right",
|
||||
"nav-down",
|
||||
"nav-left",
|
||||
"background",
|
||||
"background-color",
|
||||
"background-image",
|
||||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
|
||||
"filter:progid:DXImageTransform.Microsoft.gradient",
|
||||
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
|
||||
"filter",
|
||||
"background-repeat",
|
||||
"background-attachment",
|
||||
"background-position",
|
||||
"background-position-x",
|
||||
"background-position-y",
|
||||
"-webkit-background-clip",
|
||||
"-moz-background-clip",
|
||||
"background-clip",
|
||||
"background-origin",
|
||||
"-webkit-background-size",
|
||||
"-moz-background-size",
|
||||
"-o-background-size",
|
||||
"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",
|
||||
"-webkit-border-image",
|
||||
"-moz-border-image",
|
||||
"-o-border-image",
|
||||
"border-image",
|
||||
"-webkit-border-image-source",
|
||||
"-moz-border-image-source",
|
||||
"-o-border-image-source",
|
||||
"border-image-source",
|
||||
"-webkit-border-image-slice",
|
||||
"-moz-border-image-slice",
|
||||
"-o-border-image-slice",
|
||||
"border-image-slice",
|
||||
"-webkit-border-image-width",
|
||||
"-moz-border-image-width",
|
||||
"-o-border-image-width",
|
||||
"border-image-width",
|
||||
"-webkit-border-image-outset",
|
||||
"-moz-border-image-outset",
|
||||
"-o-border-image-outset",
|
||||
"border-image-outset",
|
||||
"-webkit-border-image-repeat",
|
||||
"-moz-border-image-repeat",
|
||||
"-o-border-image-repeat",
|
||||
"border-image-repeat",
|
||||
"outline",
|
||||
"outline-width",
|
||||
"outline-style",
|
||||
"outline-color",
|
||||
"outline-offset",
|
||||
"-webkit-box-shadow",
|
||||
"-moz-box-shadow",
|
||||
"box-shadow",
|
||||
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
|
||||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
|
||||
"opacity",
|
||||
"-ms-interpolation-mode",
|
||||
"-moz-transition",
|
||||
"-ms-transition",
|
||||
"-o-transition",
|
||||
"transition",
|
||||
"-moz-transition-delay",
|
||||
"-ms-transition-delay",
|
||||
"-o-transition-delay",
|
||||
"transition-delay",
|
||||
"-moz-transition-timing-function",
|
||||
"-ms-transition-timing-function",
|
||||
"-o-transition-timing-function",
|
||||
"transition-timing-function",
|
||||
"-moz-transition-duration",
|
||||
"-ms-transition-duration",
|
||||
"-o-transition-duration",
|
||||
"transition-duration",
|
||||
"-moz-transition-property",
|
||||
"-ms-transition-property",
|
||||
"-o-transition-property",
|
||||
"transition-property",
|
||||
"-webkit-transform",
|
||||
"-o-transform",
|
||||
"transform",
|
||||
"-webkit-transform-origin",
|
||||
"-o-transform-origin",
|
||||
"transform-origin",
|
||||
"-ms-animation",
|
||||
"-o-animation",
|
||||
"animation",
|
||||
"-ms-animation-name",
|
||||
"-o-animation-name",
|
||||
"animation-name",
|
||||
"-ms-animation-duration",
|
||||
"-o-animation-duration",
|
||||
"animation-duration",
|
||||
"-ms-animation-fill-mode",
|
||||
"-o-animation-fill-mode",
|
||||
"animation-fill-mode",
|
||||
"-ms-animation-play-state",
|
||||
"-o-animation-play-state",
|
||||
"animation-play-state",
|
||||
"-ms-animation-timing-function",
|
||||
"-o-animation-timing-function",
|
||||
"animation-timing-function",
|
||||
"-ms-animation-delay",
|
||||
"-o-animation-delay",
|
||||
"animation-delay",
|
||||
"-ms-animation-iteration-count",
|
||||
"-o-animation-iteration-count",
|
||||
"animation-iteration-count",
|
||||
"-ms-animation-direction",
|
||||
"-o-animation-direction",
|
||||
"animation-direction"
|
||||
]
|
||||
|
||||
PropertySpelling:
|
||||
enabled: true
|
||||
extra_properties: []
|
||||
|
||||
QualifyingElement:
|
||||
enabled: true
|
||||
allow_element_with_attribute: false
|
||||
allow_element_with_class: false
|
||||
allow_element_with_id: false
|
||||
|
||||
SelectorDepth:
|
||||
enabled: true
|
||||
max_depth: 4
|
||||
|
||||
SelectorFormat:
|
||||
enabled: false
|
||||
convention: hyphenated_lowercase # or 'BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
|
||||
|
||||
Shorthand:
|
||||
enabled: true
|
||||
|
||||
SingleLinePerProperty:
|
||||
enabled: true
|
||||
allow_single_line_rule_sets: true
|
||||
|
||||
SingleLinePerSelector:
|
||||
enabled: true
|
||||
|
||||
SpaceAfterComma:
|
||||
enabled: true
|
||||
|
||||
SpaceAfterPropertyColon:
|
||||
enabled: true
|
||||
style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
|
||||
|
||||
SpaceAfterPropertyName:
|
||||
enabled: true
|
||||
|
||||
SpaceBeforeBrace:
|
||||
enabled: true
|
||||
style: space # or 'new_line'
|
||||
allow_single_line_padding: true
|
||||
|
||||
SpaceBetweenParens:
|
||||
enabled: true
|
||||
spaces: 0
|
||||
|
||||
StringQuotes:
|
||||
enabled: true
|
||||
style: double_quotes
|
||||
|
||||
TrailingSemicolon:
|
||||
enabled: true
|
||||
|
||||
TrailingZero:
|
||||
enabled: false
|
||||
|
||||
UnnecessaryMantissa:
|
||||
enabled: true
|
||||
|
||||
UnnecessaryParentReference:
|
||||
enabled: true
|
||||
|
||||
UrlFormat:
|
||||
enabled: true
|
||||
|
||||
UrlQuotes:
|
||||
enabled: true
|
||||
|
||||
VariableForProperty:
|
||||
enabled: false
|
||||
properties: []
|
||||
|
||||
VendorPrefix:
|
||||
enabled: true
|
||||
identifier_list: base
|
||||
additional_identifiers: []
|
||||
excluded_identifiers: []
|
||||
|
||||
ZeroUnit:
|
||||
enabled: true
|
||||
@ -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;
|
||||
@ -26,6 +27,12 @@
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
// Darken for just a tad more contrast against the button background
|
||||
.counter {
|
||||
text-shadow: none;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
border-color: #51a7e8;
|
||||
@ -38,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;
|
||||
}
|
||||
|
||||
@ -70,12 +78,19 @@
|
||||
.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 {
|
||||
color: #60b044;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
@ -92,7 +107,8 @@
|
||||
&,
|
||||
&:hover {
|
||||
color: #fefefe;
|
||||
@include gradient(#c3ecb4, #add39f);
|
||||
background-color: #add39f;
|
||||
background-image: linear-gradient(#c3ecb4, #add39f);
|
||||
border-color: #b9dcac #b9dcac #a7c89b;
|
||||
}
|
||||
}
|
||||
@ -104,7 +120,8 @@
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
@include gradient(#dc5f59, #b33630);
|
||||
background-color: #b33630;
|
||||
background-image: linear-gradient(#dc5f59, #b33630);
|
||||
border-color: #cd504a;
|
||||
}
|
||||
|
||||
@ -121,10 +138,20 @@
|
||||
&,
|
||||
&:hover {
|
||||
color: #cb7f7f;
|
||||
@include gradient(#fefefe, #efefef);
|
||||
background-color: #efefef;
|
||||
background-image: linear-gradient(#fefefe, #efefef);
|
||||
border-color: #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.selected {
|
||||
.counter {
|
||||
color: #b33630;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outline button
|
||||
@ -137,6 +164,10 @@
|
||||
background-image: none;
|
||||
border: 1px solid #e5e5e5;
|
||||
|
||||
.counter {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.selected,
|
||||
@ -147,6 +178,11 @@
|
||||
background-color: $brand-blue;
|
||||
background-image: none;
|
||||
border-color: $brand-blue;
|
||||
|
||||
.counter {
|
||||
color: $brand-blue;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
@ -154,7 +190,8 @@
|
||||
&,
|
||||
&:hover {
|
||||
color: #777;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
@ -168,23 +205,6 @@
|
||||
}
|
||||
|
||||
|
||||
// Octicon buttons
|
||||
//
|
||||
// Improve alignemnt of Octicons within buttons and minibuttons. Also auto tweak
|
||||
// the right arrow to float right for ease of use.
|
||||
.btn {
|
||||
> .octicon-arrow-right {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Required because we nuke the padding on minibuttons
|
||||
.btn-sm > .octicon-arrow-right {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
// Minibutton overrides
|
||||
//
|
||||
// Tweak `line-height` to make them smaller.
|
||||
@ -250,9 +270,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;
|
||||
}
|
||||
}
|
||||
|
||||
265
scss/_forms.scss
265
scss/_forms.scss
@ -42,7 +42,7 @@ textarea {
|
||||
}
|
||||
|
||||
// Inputs with contrast for easy light gray backgrounds against white.
|
||||
// input.class is needed here to increase specifity over input[…]
|
||||
// input.class is needed here to increase specificity over input[…]
|
||||
input.input-contrast,
|
||||
.input-contrast {
|
||||
background-color: #fafafa;
|
||||
@ -378,236 +378,6 @@ dl.form {
|
||||
select { margin-top: 5px; }
|
||||
}
|
||||
|
||||
// IE 9
|
||||
html.no-dnd-uploads {
|
||||
.drag-and-drop {
|
||||
min-height: 32px;
|
||||
|
||||
.default {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-enabled textarea {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-and-drop {
|
||||
padding: 7px 10px;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
color: #aaa;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #ccc;
|
||||
border-top: 0;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
|
||||
.default,
|
||||
.loading,
|
||||
.error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $brand-red;
|
||||
}
|
||||
|
||||
// Spinner
|
||||
img {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.is-default .drag-and-drop .default {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-uploading .drag-and-drop .loading {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-bad-file .drag-and-drop .bad-file {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-too-big .drag-and-drop .too-big {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-empty .drag-and-drop .empty {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-bad-browser .drag-and-drop .bad-browser {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.drag-and-drop-error-info {
|
||||
font-weight: normal;
|
||||
color: #aaa;
|
||||
|
||||
a {
|
||||
color: $brand-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.is-failed .drag-and-drop .failed-request {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.manual-file-chooser {
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
padding: 5px;
|
||||
margin-left: -80px;
|
||||
cursor: pointer;
|
||||
opacity: 0.0001;
|
||||
}
|
||||
|
||||
.manual-file-chooser:hover + .manual-file-chooser-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn {
|
||||
// align manual-file-chooser inside a button
|
||||
.manual-file-chooser {
|
||||
top: 0;
|
||||
padding: 0;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
// Focused Textarea styles
|
||||
.upload-enabled textarea {
|
||||
display: block;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.focused .drag-and-drop {
|
||||
@extend input[type="text"]:focus;
|
||||
box-shadow: rgba(#51a7e8, 0.5) 0 0 3px;
|
||||
}
|
||||
|
||||
// Dropping a file on top
|
||||
.dragover textarea,
|
||||
.dragover .drag-and-drop {
|
||||
box-shadow: rgba(#c9ff00, 1) 0 0 3px;
|
||||
}
|
||||
|
||||
|
||||
// Form style with a write and a preview tab
|
||||
.previewable-comment-form {
|
||||
position: relative;
|
||||
|
||||
.tabnav {
|
||||
position: relative;
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
|
||||
.comment {
|
||||
border: 1px solid #cacaca;
|
||||
}
|
||||
|
||||
.comment-header .comment-header-actions { display: none; }
|
||||
|
||||
.comment-form-error { margin-bottom: 10px; }
|
||||
|
||||
.write-content,
|
||||
.preview-content {
|
||||
display: none;
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
|
||||
&.write-selected .write-content,
|
||||
&.preview-selected .preview-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
max-height: 500px;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
|
||||
&.fullscreen-contents:focus {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// A two column form, with a .main and a .sidebar column
|
||||
//
|
||||
// Override some `.timeline-comment-wrapper` defaults.
|
||||
// The `div` is needed to be more specific than the other class.
|
||||
div.composer {
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Override the previewable comment form defaults
|
||||
.composer .comment-form-textarea {
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.composer-infobar {
|
||||
height: 35px;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.composer .tabnav { margin: 0 0 10px; }
|
||||
|
||||
.infobar-widget {
|
||||
|
||||
&.milestone {
|
||||
position: relative; // requires so that the `right: 0;` below works
|
||||
float: right;
|
||||
|
||||
.select-menu-modal-holder { right: 0; }
|
||||
}
|
||||
|
||||
&.assignee {
|
||||
float: left;
|
||||
|
||||
.css-truncate-target {
|
||||
max-width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.text,
|
||||
.avatar,
|
||||
.select-menu {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 3px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 200px;
|
||||
overflow: hidden; // round the corners if 100%
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hide the up/down buttons in <input type="number"> in the login form, the
|
||||
// input is used for two-factor auth codes, type="number" makes it more usable
|
||||
@ -672,39 +442,6 @@ input::-webkit-inner-spin-button {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
h2.account {
|
||||
margin: 15px 0 0;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
p.explain {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
strong {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
margin-right: 5px;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.minibutton {
|
||||
top: -4px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.options-content p.explain {
|
||||
padding: 10px 10px 0;
|
||||
margin-top: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
@include clearfix;
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
// Grid system
|
||||
//
|
||||
// Create rows with `.columns` to clear the flaoted columns and outdent the
|
||||
// Create rows with `.columns` to clear the floated columns and outdent the
|
||||
// padding on `.column`s with negative margin for alignment.
|
||||
|
||||
.columns {
|
||||
@ -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);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// A rounded corner box containing a lable "open" or "closed"
|
||||
// A rounded corner box containing a label "open" or "closed"
|
||||
// Without a state it is grey.
|
||||
//
|
||||
// open - green background
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
// Truncate
|
||||
//
|
||||
// css-truncate will shorten text with an elipsis.
|
||||
// css-truncate will shorten text with an ellipsis.
|
||||
|
||||
.css-truncate {
|
||||
// Truncate double target
|
||||
//
|
||||
// css-truncate will shorten text with an elipsis. The maximum width
|
||||
// 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,
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
/*
|
||||
* 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.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user