primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-25 07:33:41 +03:00
Code Issues Projects Releases Wiki Activity

no more -

Browse Source
This commit is contained in:
Jon Rohan 2016-03-04 10:42:22 -05:00
parent ef004fae69
commit 67322ab20d
11 changed files with 85 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/docs.scss
View File

@ -59,7 +59,7 @@ body {
&:hover,
&:active {
color: $brand-blue;
color: $blue;
background: #fff;
border-color: #fff;
box-shadow: none;
@ -76,7 +76,7 @@ body {
padding-bottom: 1rem;
margin-bottom: 1.5rem;
text-align: center;
background-color: $brand-blue;
background-color: $blue;
a {
color: rgba(255,255,255,.5);
@ -145,7 +145,7 @@ body {
margin-bottom: 3rem;
padding-top: 2rem;
padding-bottom: 4rem;
background-color: $brand-blue;
background-color: $blue;
font-size: 1.25rem;
color: #fff;
text-align: center;
@ -281,8 +281,8 @@ body {
.column {
padding: $grid-gutter;
font-family: $mono-font;
background-color: lighten($brand-green, 40%);
border: 1px solid lighten($brand-green, 30%);
background-color: lighten($green, 40%);
border: 1px solid lighten($green, 30%);
}
// Override Markdown styles to restore values from `_type.scss`
@ -347,12 +347,12 @@ body {
border-radius: .25rem;
}
.swatch-blue { background-color: $brand-blue; }
.swatch-green { background-color: $brand-green; }
.swatch-red { background-color: $brand-red; }
.swatch-orange { background-color: $brand-orange; }
.swatch-purple { background-color: $brand-purple; }
.swatch-blue { background-color: $blue; }
.swatch-green { background-color: $green; }
.swatch-red { background-color: $red; }
.swatch-orange { background-color: $orange; }
.swatch-purple { background-color: $purple; }
.swatch-gray-light { background-color: $brand-gray-light; }
.swatch-gray { background-color: $brand-gray; }
.swatch-gray-dark { background-color: $brand-gray-dark; }
.swatch-gray-light { background-color: $gray-light; }
.swatch-gray { background-color: $gray; }
.swatch-gray-dark { background-color: $gray-dark; }

2
docs/utilities.md
View File

@ -86,7 +86,7 @@ Change the `color` of elements with a class.
## Muted link
When you need a hyperlink to not be `$brand-blue`, use a `.muted-link`.
When you need a hyperlink to not be `$blue`, use a `.muted-link`.
{% example html %}
Here is some example text. <a class="muted-link" href="#">And a muted link.</a>

4
scss/_base.scss
View File

@ -11,12 +11,12 @@ button {
body {
font: #{$body-font-size}/1.4 $body-font;
color: $brand-gray-dark;
color: $gray-dark;
background-color: #fff;
}
a {
color: $brand-blue;
color: $blue;
text-decoration: none;
&:hover,

18
scss/_buttons.scss
View File

@ -175,7 +175,7 @@
// For when we need a linky-action that's not too heavy in busier
// areas like conversation timelines.
.btn-outline {
color: $brand-blue;
color: $blue;
background-color: #fff; // Reset default gradient backgrounds and colors
background-image: none;
border: 1px solid #e5e5e5;
@ -190,25 +190,25 @@
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
color: #fff;
background-color: $brand-blue;
background-color: $blue;
background-image: none;
border-color: $brand-blue;
border-color: $blue;
.counter {
color: $brand-blue;
color: $blue;
background-color: #fff;
}
}
&.selected:hover {
background-color: darken($brand-blue, 5%);
background-color: darken($blue, 5%);
}
&:disabled,
&.disabled {
&,
&:hover {
color: $brand-gray;
color: $gray;
background-color: #fff;
background-image: none;
border-color: #e5e5e5;
@ -282,7 +282,7 @@
font-size: 11px;
font-weight: bold;
line-height: 20px;
color: $brand-gray-dark;
color: $gray-dark;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ddd;
@ -296,7 +296,7 @@
}
&:hover {
color: $brand-blue;
color: $blue;
cursor: pointer;
}
}
@ -400,7 +400,7 @@
display: inline-block;
padding: 0;
font-size: inherit;
color: $brand-blue;
color: $blue;
white-space: nowrap;
cursor: pointer;
background-color: transparent;

8
scss/_filter-list.scss
View File

@ -11,12 +11,12 @@
}
&.pjax-active .filter-item {
color: $brand-gray;
color: $gray;
background-color: transparent;
&.pjax-active {
color: #fff;
background-color: $brand-blue;
background-color: $blue;
}
}
}
@ -28,7 +28,7 @@
margin-bottom: 5px;
overflow: hidden;
font-size: 14px;
color: $brand-gray;
color: $gray;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
@ -42,7 +42,7 @@
&.selected {
color: #fff;
background-color: $brand-blue;
background-color: $blue;
.octicon-remove-close {
float: right;

12
scss/_forms.scss
View File

@ -165,9 +165,9 @@ dl.form {
h4 {
margin: 4px 0 0;
&.is-error { color: $brand-red; }
&.is-error { color: $red; }
&.is-success { color: $brand-green; }
&.is-success { color: $green; }
+ p.note {
margin-top: 0;
@ -283,7 +283,7 @@ dl.form {
&.errored {
> dt label {
color: $brand-red;
color: $red;
}
dd.error {
@ -307,7 +307,7 @@ dl.form {
min-height: 17px;
margin: 4px 0 2px;
font-size: 12px;
color: $brand-gray;
color: $gray;
.spinner {
margin-right: 3px;
@ -492,12 +492,12 @@ input::-webkit-inner-spin-button {
}
.status-indicator-success:before {
color: $brand-green;
color: $green;
content: "\f03a"; // octicon-check
}
.status-indicator-failed:before {
color: $brand-red;
color: $red;
content: "\f02d"; // octicon-x
}

4
scss/_menu.scss
View File

@ -58,7 +58,7 @@
.octicon {
margin-right: 5px;
width: 16px;
color: $brand-gray-dark;
color: $gray-dark;
text-align: center;
}
@ -79,7 +79,7 @@
&.alert {
.counter {
color: $brand-red;
color: $red;
}
}
}

2
scss/_tabnav.scss
View File

@ -55,7 +55,7 @@
}
a.tabnav-extra:hover {
color: $brand-blue;
color: $blue;
text-decoration: none;
}

80
scss/_variables.scss
View File

@ -1,38 +1,3 @@
$container-width: 980px !default;
$grid-gutter: 10px !default;
// Brand colors
$brand-blue: #4078c0 !default;
$brand-gray-light: #999 !default;
$brand-gray: #767676 !default;
$brand-gray-dark: #333 !default;
$brand-green: #6cc644 !default;
$brand-red: #bd2c00 !default;
$brand-orange: #c9510c !default;
$brand-purple: #6e5494 !default;
// Font stack
$body-font: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
// The base body size
$body-font-size: 13px !default;
// Monospace font stack
$mono-font: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
// State indicators.
$status-open: $brand-green !default;
$status-closed: $brand-red !default;
$status-reverted: $status-closed !default;
$status-merged: $brand-purple !default;
$status-renamed: #fffa5d !default;
$status-pending: #cea61b !default;
// Repository type colors
$repo-private-text: #a1882b !default;
$repo-private-bg: #fff9ea !default;
$repo-private-icon: #e9dba5 !default;
// These are our margin and padding utility spacers. The default step size we
// use is 6px. This gives us a key of:
// 0 => 0px
@ -52,14 +17,49 @@ $spacers: (
) !default;
// Aliases for easy use
$spacer1: nth($spacers, 2) !default;
$spacer2: nth($spacers, 3) !default;
$spacer3: nth($spacers, 4) !default;
$spacer4: nth($spacers, 5) !default;
$spacer5: nth($spacers, 6) !default;
$spacer1: nth($spacers, 2) !default; // 3px
$spacer2: nth($spacers, 3) !default; // 6px
$spacer3: nth($spacers, 4) !default; // 12px
$spacer4: nth($spacers, 5) !default; // 24px
$spacer5: nth($spacers, 6) !default; // 36px
$container-width: 980px !default;
$grid-gutter: 10px !default;
// Brand colors
$blue: #4078c0 !default;
$gray-light: #999 !default;
$gray: #767676 !default;
$gray-dark: #333 !default;
$green: #6cc644 !default;
$red: #bd2c00 !default;
$orange: #c9510c !default;
$purple: #6e5494 !default;
// State indicators.
$status-open: $green !default;
$status-closed: $red !default;
$status-reverted: $status-closed !default;
$status-merged: $purple !default;
$status-renamed: #fffa5d !default;
$status-pending: #cea61b !default;
// Repository type colors
$repo-private-text: #a1882b !default;
$repo-private-bg: #fff9ea !default;
$repo-private-icon: #e9dba5 !default;
$border-blue: #c5d5dd !default;
$border-gray-light: #eee !default;
$border-gray: #e5e5e5 !default;
$border-gray-dark: #ddd !default;
$border-radius: 3px !default;
// Font stacks
$body-font: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
// Monospace font stack
$mono-font: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
// The base body size
$body-font-size: 13px !default;

10
scss/utilities/_colors.scss
View File

@ -3,9 +3,9 @@
.mute { color: #000 !important; }
.text-diff-added { color: darken($brand-green, 10%) !important; }
.text-diff-added { color: darken($green, 10%) !important; }
.text-diff-deleted { color: $brand-red !important; }
.text-diff-deleted { color: $red !important; }
.text-open,
.text-success { color: $status-open !important; }
@ -21,16 +21,16 @@
.text-pending { color: $status-pending !important; }
.text-error,
.text-failure { color: $brand-red !important; }
.text-failure { color: $red !important; }
// Muted link
//
// Have a link you need to be gray to start, and blue on hover? Use this.
.muted-link {
color: $brand-gray !important;
color: $gray !important;
&:hover {
color: $brand-blue !important;
color: $blue !important;
text-decoration: none !important;
}
}

4
scss/utilities/_typography.scss
View File

@ -10,8 +10,8 @@
}
// Text utilities
.text-muted { color: $brand-gray !important; }
.text-danger { color: $brand-red !important; }
.text-muted { color: $gray !important; }
.text-danger { color: $red !important; }
.text-small {
font-size: 12px !important;