/* License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later */ @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); }