Move all hex colors in SASS to variables and all variations to darken/lighten
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user