houdini/app/assets/stylesheets/components/giving_indicator.css.scss

44 lines
No EOL
989 B
SCSS

@import 'mixins';
$indicator_size: 16px;
$indicator_color: $dark-grass;
.givingIndicator-wrapper{
width: 18px;
}
.givingIndicator {
height: $indicator_size;
width: $indicator_size;
@include border-radius(50%);
}
.givingIndicator[level='1'] {
@include opacity(0.3);
background: lighten($indicator_color, 50);
}
.givingIndicator[level='2'] {
@include opacity(0.4);
background: lighten($indicator_color, 40);
}
.givingIndicator[level='3'] {
@include opacity(0.5);
background: lighten($indicator_color, 30);
}
.givingIndicator[level='4'] {
@include opacity(0.6);
background: lighten($indicator_color, 20);
}
.givingIndicator[level='5'] {
@include opacity(0.7);
background: lighten($indicator_color, 10);
}
.givingIndicator[level='6'] {
@include opacity(0.8);
background: darken($indicator_color, 0);
}
.givingIndicator[level='7'] {
@include opacity(0.9);
background: darken($indicator_color, 10);
}
.givingIndicator[level='8'] {
background: darken($indicator_color, 20);
}