Refactor color variables thorgh the app

stable
Xavier Julián 2015-04-08 08:27:32 +02:00
parent 11e31f851c
commit 81eb6e8b9e
10 changed files with 17 additions and 25 deletions

View File

@ -5,21 +5,9 @@ $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;
@ -27,10 +15,14 @@ $dark-taiga: #879b89;
$red-light: #ff8282; $red-light: #ff8282;
$red: #f00; $red: #f00;
$postit: #fff8e4;
$postit-hover: #f1e8cd;
$postit-dark-hover: #cfc29b;
//Loading bar
$green-japanese-laurel: #237400;
$green-olive: #618000;
$red-amaranth: #e43050; $red-amaranth: #e43050;
$purple-eggplant: #810061; $purple-eggplant: #810061;
$yellow-pear: #bbe831; $yellow-pear: #bbe831;
$postit: #fff8e4;
$postit-hover: #f1e8cd;
$postit-dark-hover: #cfc29b;

View File

@ -3,12 +3,12 @@
// Blockquotes // Blockquotes
blockquote, blockquote,
blockquote p { blockquote p {
color: $gray46-47; color: $gray;
font-style: italic; font-style: italic;
line-height: 24px; line-height: 24px;
} }
blockquote { blockquote {
border-left: 1px solid $gray87-88; border-left: 1px solid $gray-light;
margin: 0 0 20px; margin: 0 0 20px;
padding: 9px 20px 0 19px; padding: 9px 20px 0 19px;
cite { cite {

View File

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

View File

@ -80,7 +80,7 @@ strong {
} }
hr { hr {
border: solid $gray87-88; border: solid $blackish;
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: $gray-saltpan; background-color: rgba($green-taiga, .3);
opacity: 1; opacity: 1;
} }
.icon { .icon {

View File

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

View File

@ -104,7 +104,7 @@
input:disabled { input:disabled {
cursor: auto; cursor: auto;
+ div { + div {
background-color: $gray80; background-color: $gray-light;
} }
} }
} }

View File

@ -6,7 +6,7 @@
li { li {
@extend %larger; @extend %larger;
@extend %title; @extend %title;
border-bottom: 1px solid $gray-tower-gray; border-bottom: 1px solid $gray-light;
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 $gray-tower-gray; border-bottom: 1px solid $gray-light;
text-transform: uppercase; text-transform: uppercase;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;

View File

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