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:
parent
307529a8b3
commit
d4e3d9da55
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -60,7 +60,7 @@
|
||||
code {
|
||||
padding: 2px 5px 3px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
background: $bg-white;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -41,7 +41,7 @@ blockquote {
|
||||
|
||||
.text-emphasized {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
color: $text-gray-dark;
|
||||
}
|
||||
|
||||
// Lists
|
||||
|
Loading…
Reference in New Issue
Block a user