primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-23 11:27:26 +03:00
Code Issues Projects Releases Wiki Activity

Using variables when we can

Browse Source
This commit is contained in:
Jon Rohan 2016-03-04 12:28:38 -05:00
parent 307529a8b3
commit d4e3d9da55
10 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/docs.scss
View File

@ -53,15 +53,15 @@ body {
// //
.btn-reverse { .btn-reverse {
color: #fff; color: $text-white;
background: none; background: none;
border: 1px solid #fff; border: 1px solid #fff;
&:hover, &:hover,
&:active { &:active {
color: $text-blue; color: $text-blue;
background: #fff; background: $bg-white;
border-color: #fff; border-color: $white;
box-shadow: none; box-shadow: none;
} }
} }
@ -82,7 +82,7 @@ body {
color: rgba(255,255,255,.5); color: rgba(255,255,255,.5);
&:hover { &:hover {
color: #fff; color: $text-white;
text-decoration: none; text-decoration: none;
} }
} }
@ -90,7 +90,7 @@ body {
.masthead-logo { .masthead-logo {
display: inline-block; display: inline-block;
font-size: 1.5rem; font-size: 1.5rem;
color: #fff; color: $text-white;
.mega-octicon { .mega-octicon {
float: left; float: left;
@ -120,7 +120,7 @@ body {
} }
.active { .active {
color: #fff; color: $text-white;
font-weight: 500; font-weight: 500;
} }
@ -147,7 +147,7 @@ body {
padding-bottom: 4rem; padding-bottom: 4rem;
background-color: $bg-blue; background-color: $bg-blue;
font-size: 1.25rem; font-size: 1.25rem;
color: #fff; color: $text-white;
text-align: center; text-align: center;
h1 { h1 {
@ -219,7 +219,7 @@ body {
border-top: 1px solid #eee; border-top: 1px solid #eee;
strong { strong {
color: #333; color: $text-gray-dark;
} }
} }

2
scss/_avatars.scss
View File

@ -31,7 +31,7 @@
position: absolute; position: absolute;
right: -15%; right: -15%;
bottom: -9%; bottom: -9%;
background-color: #fff; // For transparent backgrounds background-color: $bg-white; // For transparent backgrounds
border-radius: 2px; border-radius: 2px;
box-shadow: -2px -2px 0 rgba(255, 255, 255, 0.8); box-shadow: -2px -2px 0 rgba(255, 255, 255, 0.8);
} }

2
scss/_base.scss
View File

@ -12,7 +12,7 @@ button {
body { body {
font: #{$body-font-size}/1.4 $body-font; font: #{$body-font-size}/1.4 $body-font;
color: $text-gray-dark; color: $text-gray-dark;
background-color: #fff; background-color: $bg-white;
} }
a { a {

2
scss/_blankslate.scss
View File

@ -60,7 +60,7 @@
code { code {
padding: 2px 5px 3px; padding: 2px 5px 3px;
font-size: 14px; font-size: 14px;
background: #fff; background: $bg-white;
border: 1px solid #eee; border: 1px solid #eee;
border-radius: 3px; border-radius: 3px;
} }

26
scss/_buttons.scss
View File

@ -6,7 +6,7 @@
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
color: #333; color: $text-gray-dark;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -84,7 +84,7 @@
// Green primary button // Green primary button
.btn-primary { .btn-primary {
color: #fff; color: $text-white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044; background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044); background-image: linear-gradient(#8add6d, #60b044);
@ -92,11 +92,11 @@
.counter { .counter {
color: #60b044; color: #60b044;
background-color: #fff; background-color: $bg-white;
} }
&:hover { &:hover {
color: #fff; color: $text-white;
background-color: darken(#60b044, 5%); background-color: darken(#60b044, 5%);
background-image: linear-gradient(darken(#8add6d, 5%), darken(#60b044, 5%)); background-image: linear-gradient(darken(#8add6d, 5%), darken(#60b044, 5%));
border-color: #4a993e; border-color: #4a993e;
@ -131,7 +131,7 @@
color: #900; color: #900;
&:hover { &:hover {
color: #fff; color: $text-white;
background-color: #b33630; background-color: #b33630;
background-image: linear-gradient(#dc5f59, #b33630); background-image: linear-gradient(#dc5f59, #b33630);
border-color: #cd504a; border-color: #cd504a;
@ -139,7 +139,7 @@
&:active, &:active,
&.selected { &.selected {
color: #fff; color: $text-white;
background-color: #b33630; background-color: #b33630;
background-image: none; background-image: none;
border-color: darken(#cd504a, 15%); border-color: darken(#cd504a, 15%);
@ -165,7 +165,7 @@
&.selected { &.selected {
.counter { .counter {
color: #b33630; color: #b33630;
background-color: #fff; background-color: $bg-white;
} }
} }
} }
@ -176,7 +176,7 @@
// areas like conversation timelines. // areas like conversation timelines.
.btn-outline { .btn-outline {
color: $text-blue; color: $text-blue;
background-color: #fff; // Reset default gradient backgrounds and colors background-color: $bg-white; // Reset default gradient backgrounds and colors
background-image: none; background-image: none;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
@ -189,14 +189,14 @@
&.selected, &.selected,
&.zeroclipboard-is-hover, &.zeroclipboard-is-hover,
&.zeroclipboard-is-active { &.zeroclipboard-is-active {
color: #fff; color: $text-white;
background-color: $bg-blue; background-color: $bg-blue;
background-image: none; background-image: none;
border-color: $blue; border-color: $blue;
.counter { .counter {
color: $text-blue; color: $text-blue;
background-color: #fff; background-color: $bg-white;
} }
} }
@ -209,7 +209,7 @@
&, &,
&:hover { &:hover {
color: $text-gray; color: $text-gray;
background-color: #fff; background-color: $bg-white;
background-image: none; background-image: none;
border-color: #e5e5e5; border-color: #e5e5e5;
} }
@ -268,7 +268,7 @@
} }
&:active { &:active {
color: #fff; color: $text-white;
background-color: #4183c4; background-color: #4183c4;
} }
} }
@ -285,7 +285,7 @@
line-height: 20px; line-height: 20px;
color: $text-gray-dark; color: $text-gray-dark;
vertical-align: middle; vertical-align: middle;
background-color: #fff; background-color: $bg-white;
border: 1px solid #ddd; border: 1px solid #ddd;
border-left: 0; border-left: 0;
border-top-right-radius: 3px; border-top-right-radius: 3px;

12
scss/_forms.scss
View File

@ -27,9 +27,9 @@ textarea {
min-height: 34px; min-height: 34px;
padding: 7px 8px; padding: 7px 8px;
font-size: 13px; font-size: 13px;
color: #333; color: $text-gray-dark;
vertical-align: middle; vertical-align: middle;
background-color: #fff; background-color: $bg-white;
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) 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. background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
border: 1px solid #ccc; border: 1px solid #ccc;
@ -57,7 +57,7 @@ input.input-contrast,
.input-contrast { .input-contrast {
background-color: #fafafa; background-color: #fafafa;
&:focus { background-color: #fff; } &:focus { background-color: $bg-white; }
} }
// Custom styling for HTML5 validation bubbles (WebKit only) // Custom styling for HTML5 validation bubbles (WebKit only)
@ -106,7 +106,7 @@ dl.form {
background-color: #fafafa; background-color: #fafafa;
&:focus { &:focus {
background-color: #fff; background-color: $bg-white;
} }
} }
@ -290,7 +290,7 @@ dl.form {
dd.error { dd.error {
font-size: 13px; font-size: 13px;
color: #fff; color: $text-white;
background-color: #bf1515; background-color: #bf1515;
border-color: #911; border-color: #911;
@ -469,7 +469,7 @@ input::-webkit-inner-spin-button {
padding: 8px 10px; padding: 8px 10px;
margin: 10px 0; margin: 10px 0;
font-size: 14px; font-size: 14px;
color: #333; color: $text-gray-dark;
background: #ffffe2; background: #ffffe2;
border: 1px solid #e7e4c2; border: 1px solid #e7e4c2;
border-radius: 4px; border-radius: 4px;

4
scss/_menu.scss
View File

@ -5,7 +5,7 @@
.menu { .menu {
margin-bottom: 15px; margin-bottom: 15px;
list-style: none; list-style: none;
background-color: #fff; background-color: $bg-white;
border: 1px solid #d8d8d8; border: 1px solid #d8d8d8;
border-radius: 3px; border-radius: 3px;
} }
@ -42,7 +42,7 @@
font-weight: bold; font-weight: bold;
color: #222; color: #222;
cursor: default; cursor: default;
background-color: #fff; background-color: $bg-white;
&::before { &::before {
position: absolute; position: absolute;

4
scss/_states.scss
View File

@ -13,9 +13,9 @@
padding: 4px 8px; padding: 4px 8px;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
color: #fff; color: $text-white;
text-align: center; text-align: center;
background-color: #999; background-color: $gray-light;
border-radius: 3px; border-radius: 3px;
} }

4
scss/_tabnav.scss
View File

@ -25,8 +25,8 @@
border-bottom: 0; border-bottom: 0;
&.selected { &.selected {
color: #333; color: $text-gray-dark;
background-color: #fff; background-color: $bg-white;
border-color: #ddd; border-color: #ddd;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }

2
scss/_type.scss
View File

@ -41,7 +41,7 @@ blockquote {
.text-emphasized { .text-emphasized {
font-weight: bold; font-weight: bold;
color: #333; color: $text-gray-dark;
} }
// Lists // Lists