@import "compass/css3";
$fontSize: 2.25em; // size of award number
$size: 2em; // size of award
$bg: #1ac9a7;
$gold: #f9ad0e;
$ribbon: #f24735;
$ribbonBand: #8691a0;
$silver: #d1d7da;
$bronze: #df7e08;
$c: 'gold','silver','bronze';
$colors: $gold,$silver,$bronze;
body {
font-family: 'Open Sans', sans-serif;
background: $bg;
}
.awards {
max-width: (($size + (($size / 2) * 2)) * 3) * ($fontSize / 1em);
display: inline-flex;
flex-wrap: wrap;
flex-direction: row;
}
.award {
font-size: $fontSize;
font-weight: 600;
margin: $size / 2.25;
width: $size;
height: $size;
border-radius: 100%;
color: white;
text-align: center;
line-height: $size / 1.25;
vertical-align: middle;
position: relative;
border-width: $size / 10;
border-style: solid;
@include transform-style(preserve-3d);
@include transform(translateZ(1em));
// awards colors
@for $i from 1 through length($c) {
&.#{nth($c,$i)} {
box-shadow:
inset ($size / -25) ($size / -25) 0 darken(nth($colors,$i),15%),
($size / 20) ($size / 15) 0 rgba(black,0.1);
border-color: lighten(adjust-hue(nth($colors,$i),10),10%);
text-shadow: ($size / 45) ($size / 45) 0 darken(nth($colors,$i),20%);
@include background(linear-gradient(top left, nth($colors,$i) 50%, darken(nth($colors,$i),5%) 50%));
}
}
&:before, &:after {
content: "";
display: block;
position: absolute;
}
///// badge
&.badge {
&:before {
width: $size / 1.25;
height: $size / 2.25;
top: $size / -2;
@include transform(translateZ(-1em));
@include background(linear-gradient(left, $ribbonBand 33%, lighten($ribbonBand,30%) 33%, lighten($ribbonBand,30%) 66%, $ribbonBand 66%));
}
&:after {
border-style: solid;
border-width: ($size / 2.5) ($size / 2.5) 0;
border-color: $ribbonBand transparent;
top: $size / -18;
left: $size / -300;
@include transform(translateZ(-1em));
}
}
///// ribbon
&.ribbon {
&:before, &:after {
border-style: solid;
border-width: ($size / 15) ($size / 6);
width: 0;
height: $size / 3;
top: 100%;
z-index: -1;
}
&:before {
border-color: $ribbon $ribbon transparent $ribbon;
left: $size / 15;
@include transform(rotate(20deg) translateZ(-1em));
}
&:after {
left: $size / 2.25;
border-color: darken($ribbon,10%) darken($ribbon,10%) transparent darken($ribbon,10%);
@include transform(rotate(-20deg) translateZ(-2em));
}
}
}
View Compiled
