houdini/app/assets/stylesheets/components/giving_indicator.css.scss
2020-06-15 10:26:57 -05:00

46 lines
No EOL
1.1 KiB
SCSS

/* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later
Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE */
@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);
}