Replace all color literals with color variables
parent
e0993206ef
commit
670129a2cc
|
@ -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} {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue