Replace all color literals with color variables

stable
Jonathan Barratt 2015-03-31 19:19:31 +07:00
parent e0993206ef
commit 670129a2cc
13 changed files with 32 additions and 16 deletions

View File

@ -13,7 +13,7 @@
height: 5px; height: 5px;
} }
$colors-list: #bbe831 #237400 #e43050 #810061 #618000; $colors-list: $yellow-pear $green-japanese-laurel $red-amaranth $purple-eggplant $green-olive;
@each $current-color in $colors-list { @each $current-color in $colors-list {
$i: index($colors-list, $current-color) - 1; $i: index($colors-list, $current-color) - 1;
.item-#{$i} { .item-#{$i} {

View File

@ -5,9 +5,21 @@ $blackish: #050505;
$grayer: #444; $grayer: #444;
$gray: #555; $gray: #555;
$gray-light: #b8b8b8; $gray-light: #b8b8b8;
$gray-tower-gray: #a6b2a7;
$gray-saltpan: #e9f0da;
$gray-silver: #cdcdcd;
$gray46-47: #777;
$gray60: #999;
$gray80: #ccc;
$gray87-88: #ddd;
$gray-mine-shaft: #232323;
$whitish: #f5f5f5; $whitish: #f5f5f5;
$white: #fff; $white: #fff;
$green-japanese-laurel: #237400;
$green-olive: #618000;
$green-christi: #74a218;
$green-taiga: #72a114; $green-taiga: #72a114;
$fresh-taiga: #9dce0a; $fresh-taiga: #9dce0a;
$dark-taiga: #879b89; $dark-taiga: #879b89;
@ -15,6 +27,10 @@ $dark-taiga: #879b89;
$red-light: #ff8282; $red-light: #ff8282;
$red: #f00; $red: #f00;
$red-amaranth: #e43050;
$purple-eggplant: #810061;
$yellow-pear: #bbe831;
$postit: #fff8e4; $postit: #fff8e4;
$postit-hover: #f1e8cd; $postit-hover: #f1e8cd;
$postit-dark-hover: #cfc29b; $postit-dark-hover: #cfc29b;

View File

@ -5,8 +5,8 @@ html {
} }
body { body {
@extend %text; @extend %text;
background: #fff; // fallback background: $white; // fallback
color: #444; color: $grayer;
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
.master { .master {

View File

@ -3,17 +3,17 @@
// Blockquotes // Blockquotes
blockquote, blockquote,
blockquote p { blockquote p {
color: #777; color: $gray46-47;
font-style: italic; font-style: italic;
line-height: 24px; line-height: 24px;
} }
blockquote { blockquote {
border-left: 1px solid #ddd; border-left: 1px solid $gray87-88;
margin: 0 0 20px; margin: 0 0 20px;
padding: 9px 20px 0 19px; padding: 9px 20px 0 19px;
cite { cite {
@extend %small; @extend %small;
color: #555; color: $gray;
display: block; display: block;
&:before { &:before {
content: '\2014 \0020'; content: '\2014 \0020';

View File

@ -100,7 +100,7 @@
text-align: center; text-align: center;
width: 200px; width: 200px;
.form-header { .form-header {
color: #999; color: $gray60;
} }
} }
.register-form { .register-form {

View File

@ -80,7 +80,7 @@ strong {
} }
hr { hr {
border: solid #ddd; border: solid $gray87-88;
border-width: 1px 0 0; border-width: 1px 0 0;
clear: both; clear: both;
height: 0; height: 0;

View File

@ -19,7 +19,7 @@
vertical-align: top; vertical-align: top;
width: 32%; width: 32%;
&.active { &.active {
background-color: #e9f0da; background-color: $gray-saltpan;
opacity: 1; opacity: 1;
} }
.icon { .icon {

View File

@ -139,7 +139,7 @@
} }
input:checked { input:checked {
+ div { + div {
background-color: #74a218; background-color: $green-christi;
margin-left: 50%; margin-left: 50%;
transition: all .2s linear; transition: all .2s linear;
} }

View File

@ -88,7 +88,7 @@
} }
input:checked { input:checked {
+ div { + div {
background-color: #74a218; background-color: $green-christi;
margin-left: 50%; margin-left: 50%;
transition: all .2s linear; transition: all .2s linear;
} }
@ -104,7 +104,7 @@
input:disabled { input:disabled {
cursor: auto; cursor: auto;
+ div { + div {
background-color: #ccc; background-color: $gray80;
} }
} }
} }

View File

@ -6,7 +6,7 @@
li { li {
@extend %larger; @extend %larger;
@extend %title; @extend %title;
border-bottom: 1px solid #a6b2a7; border-bottom: 1px solid $gray-tower-gray;
text-transform: uppercase; text-transform: uppercase;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;

View File

@ -6,7 +6,7 @@
li { li {
@extend %larger; @extend %larger;
@extend %title; @extend %title;
border-bottom: 1px solid #a6b2a7; border-bottom: 1px solid $gray-tower-gray;
text-transform: uppercase; text-transform: uppercase;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;

View File

@ -1,5 +1,5 @@
.projects-nav { .projects-nav {
background-color: #232323; background-color: $gray-mine-shaft;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;

View File

@ -2,7 +2,7 @@
li { li {
@extend %large; @extend %large;
@extend %title; @extend %title;
border-bottom: 1px solid #cdcdcd; border-bottom: 1px solid $gray-silver;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
.icon { .icon {