💄 eww.scss, use mix instead of opacity
This commit is contained in:
parent
17c0ae97bd
commit
a3661187dc
|
@ -21,13 +21,12 @@ $colors: $rosewater, $flamingo, $pink, $mauve, $red, $maroon, $peach, $yellow, $
|
||||||
@for $i from 1 through 10 {
|
@for $i from 1 through 10 {
|
||||||
&.entry-#{$i} {
|
&.entry-#{$i} {
|
||||||
.text {
|
.text {
|
||||||
opacity: 0.3;
|
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
color: $crust;
|
color: $crust;
|
||||||
background-color: nth($colors, $i);
|
background-color: mix(nth($colors, $i), #4E4365, 30%);
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
opacity: 1;
|
background-color: mix(nth($colors, $i), #4E4365, 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.empty {
|
&.empty {
|
||||||
|
@ -36,34 +35,31 @@ $colors: $rosewater, $flamingo, $pink, $mauve, $red, $maroon, $peach, $yellow, $
|
||||||
}
|
}
|
||||||
|
|
||||||
.seperator {
|
.seperator {
|
||||||
opacity: 0.3;
|
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
|
|
||||||
&.active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.up {
|
&.up {
|
||||||
|
color: mix(nth($colors, $i), #4E4365, 30%);
|
||||||
@if $i ==10 {
|
|
||||||
color: nth($colors, 10);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@else {
|
&.up.active {
|
||||||
color: nth($colors, $i);
|
color: mix(nth($colors, $i), #4E4365, 100%);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.down {
|
&.down {
|
||||||
margin-left: -12px;
|
margin-left: -12px;
|
||||||
|
margin-right: -1px;
|
||||||
|
|
||||||
@if $i ==10 {
|
@if $i ==10 {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@else {
|
@else {
|
||||||
color: nth($colors, $i + 1);
|
&.active {
|
||||||
|
color: mix(nth($colors, $i + 1), #4E4365, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
color: mix(nth($colors, $i + 1), #4E4365, 30%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue