Move all hex colors in SASS to variables and all variations to darken/lighten

This commit is contained in:
Eugen Rochko
2017-01-23 16:01:46 +01:00
parent d4d56b8af0
commit f855d645b2
9 changed files with 203 additions and 199 deletions

View File

@ -2,7 +2,7 @@
width: 100%;
height: 100%;
position: fixed;
background: #1a1c23;
background: darken($color1, 2%);
overflow-y: scroll;
.sidebar {
@ -10,7 +10,7 @@
position: fixed;
left: 0;
height: 100%;
background: #282c37;
background: $color1;
.logo {
display: block;
@ -25,7 +25,7 @@
a {
display: block;
padding: 15px 25px;
color: rgba(255, 255, 255, 0.7);
color: rgba($color5, 0.7);
text-decoration: none;
transition: all 200ms linear;
@ -34,17 +34,17 @@
}
&:hover {
color: #fff;
background-color: darken(#282c37, 5%);
color: $color5;
background-color: darken($color1, 5%);
transition: all 100ms linear;
}
&.selected {
color: #fff;
background-color: #2b90d9;
color: $color5;
background-color: $color4;
&:hover {
background-color: lighten(#2b90d9, 5%);
background-color: lighten($color4, 5%);
}
}
}
@ -84,21 +84,21 @@
a {
display: inline-block;
color: rgba(255, 255, 255, 0.7);
color: rgba($color5, 0.7);
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
border-bottom: 2px solid #282c37;
border-bottom: 2px solid $color1;
&:hover {
color: #fff;
border-bottom: 2px solid lighten(#282c37, 5%);
color: $color5;
border-bottom: 2px solid lighten($color1, 5%);
}
&.selected {
color: #2b90d9;
border-bottom: 2px solid #2b90d9;
color: $color4;
border-bottom: 2px solid $color4;
}
}
}