Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
55 lines (49 sloc) 2.05 KB
// Philippines
// http://www.crwflags.com/fotw/flags/ph.html
// http://www.vexilla-mundi.com/philippines_flag.html
@mixin flag-phl() {
// Note: The three small stars should be slightly rotated, on this version
// they are not
@include ratio(1 / 2);
$unit: $h90;
$blue: #0033a0;
$red: #bf0d3e;
$yellow: #fed141;
$white: #FFF;
$half-triangle-hypotenuse: 90 * $unit;
$half-triangle-small-size: 45 * $unit;
$triangle-width: sqrt($half-triangle-hypotenuse * $half-triangle-hypotenuse - $half-triangle-small-size * $half-triangle-small-size) * 1px;
// Positions of the big star, according to the flag
$star-big-size: 38 * $unit;
$star-big-left: $triangle-width * 1 / 3;
$star-big-right-from-tip-of-triangle: $triangle-width * 2 / 3;
$star-big-top: 45 * $unit;
// Positions of the small stars, according to the flag
$star-small-size: 10 * $unit;
$triangle-angle: 30deg;
$star-small-distance-from-angle: 14 * $unit;
$star-small-distance-short: sin($triangle-angle) * $star-small-distance-from-angle;
$star-small-distance-long: cos($triangle-angle) * $star-small-distance-from-angle;
@include two-lines($blue, $red);
// The :before will simply contain the small stars, using text-shadow to
// duplicate them.
&:after {
@include symbol($UTF8_BLACK_STAR, transparent, $star-small-size, 0, 0);
text-shadow:
$star-small-distance-short $star-small-distance-long 0px $yellow,
$star-small-distance-short ($height - $star-small-distance-long) 0px $yellow,
($triangle-width - $star-small-distance-from-angle) $h2 0px $yellow
;
}
// The :after will contain the triangle, as well as the big star. The star is
// positioned at the center of the height, but slightly to the left. We also
// use a lower z-index that the before to put it below the small stars.
&:before {
@include triangle($white, $triangle-width);
content: $UTF8_PHL;
text-indent: $triangle-width / 3 - $star-big-size / 2;
line-height: $height;
color: $yellow;
font-size: $star-big-size;
}
};