$android-card-height: 210px;
%card-shape {
height: $android-card-height;
width: $android-card-height/1.5;
text-align: center;
@include border-radius( 30px );
}
%card {
@extend %card-shape;
background-color: $off-white;
background-image: $campfire-logo;
background-position: center center;
background-repeat: no-repeat;
background-size: 80% auto;
@include box-shadow( 0 1px 3px 0 rgba(0,0,0, .4) );
$symbols: (
$ants-fruits-flowers-eggs,
$boomerang,
$bush-berry,
$campsite,
$digging-sticks,
$emu,
$hole-cloud-nest,
$honey-ant-site,
$honey-ant,
$meeting-place,
$people-sitting,
$person,
$rain,
$grub,
$woomera,
$yam
);
$symbols-count: length($symbols);
@for $i from 1 through $symbols-count {
$current-symbol: nth($symbols, $i);
&:nth-of-type(#{$i}) { background-image: $current-symbol; }
}
}//%card
$campfire: image-url("campfire.png");
$campfire-2x: image-url("campfire@2x.png");
$star: image-url("star.png");
$tree: image-url("tree.png");
$campfire-logo: image-url("campsite.png");
$next-arrow: image-url("travel-camp-to-left.png");
$prev-arrow: image-url("travel-camp-to-right.png");
$ants-fruits-flowers-eggs: image-url("ants-fruits-flowers-eggs.png");
$boomerang: image-url("boomerang.png");
$bush-berry: image-url("bush-berry.png");
$campsite: image-url("campsite.png");
$digging-sticks: image-url("digging-clapping-sticks.png");
$emu: image-url("emu-2.png");
$hole-cloud-nest: image-url("hole-cloud-nest.png");
$honey-ant-site: image-url("honey-ant-site.png");
$honey-ant: image-url("honey-ant.png");
$meeting-place: image-url("meeting-place.png");
$people-sitting: image-url("people-sitting.png");
$person: image-url("person.png");
$rain: image-url("rain.png");
$grub: image-url("witchetty-grub.png");
$woomera: image-url("woomera.png");
$yam: image-url("yam-plant.png");