Refactor color variables thorgh the app
parent
11e31f851c
commit
81eb6e8b9e
|
@ -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;
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -104,7 +104,7 @@
|
||||||
input:disabled {
|
input:disabled {
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
+ div {
|
+ div {
|
||||||
background-color: $gray80;
|
background-color: $gray-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue