💄 eww.scss, use mix instead of opacity

This commit is contained in:
Laureηt 2023-06-04 01:07:54 +02:00
parent 17c0ae97bd
commit a3661187dc
Signed by: Laurent
SSH key fingerprint: SHA256:kZEpW8cMJ54PDeCvOhzreNr4FSh6R13CMGH/POoO8DI

View file

@ -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 { &.up {
opacity: 1; color: mix(nth($colors, $i), #4E4365, 30%);
} }
&.up { &.up.active {
color: mix(nth($colors, $i), #4E4365, 100%);
@if $i ==10 {
color: nth($colors, 10);
}
@else {
color: nth($colors, $i);
}
} }
&.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%);
} }
} }
} }