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

Using variables when we can

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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