Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
159 lines (146 sloc) 4.75 KB
// Macedonia (the former Yugoslav Republic of)
// http://www.crwflags.com/fotw/flags/mk.html
// http://www.vexilla-mundi.com/macedonia_flag.html
@mixin flag-mkd() {
@include ratio(1 / 2);
$unit: $h140;
$yellow: #ffd100;
$red: #c8102e;
$circle-radius: 20 * $unit;
$circle-border: 5 * $unit;
$circle-full-width: ($circle-radius + $circle-border) * 2;
$center-x: $width / 2;
$center-y: $height / 2;
$ray-width-large: 42 * $unit;
$ray-width-small: 28 * $unit;
$ray-spacing-large: 84 * $unit;
$ray-spacing-small: 56 * $unit;
// I have 8 rays, named top-left, top, top-right, right, bottom-right, bottom,
// bottom-left and left.
// The right and left rays go directly to the center.
// The top and bottom rays go to an imaginary point 10 $units from the center
// The diagonal rays have one side following the diagonal, but the other hits
// an imaginary point 2.5 $units from the center
// I will name all points at the base of the rays A and B, in clockwise order.
// Each of the points will have an x and y
// Let's write that down:
// TOP LEFT
$top-left-A-x: 0;
$top-left-A-y: 0;
$top-left-B-x: $ray-width-large;
$top-left-B-y: 0;
$top-left-center-A-x: $center-x;
$top-left-center-A-y: $center-y;
$top-left-center-B-x: $center-x;
$top-left-center-B-y: $center-y - 2.5 * $unit;
// TOP
$top-A-x: $ray-width-large + $ray-spacing-large;
$top-A-y: 0;
$top-B-x: $ray-width-large + $ray-spacing-large + $ray-width-small;
$top-B-y: 0;
$top-center-x: $center-x;
$top-center-y: $center-y - 10 * $unit;
// TOP RIGHT
$top-right-A-x: $width - $ray-width-large;
$top-right-A-y: 0;
$top-right-B-x: $width;
$top-right-B-y: 0;
$top-right-center-A-x: $center-x;
$top-right-center-A-y: $center-y - 2.5 * $unit;
$top-right-center-B-x: $center-x;
$top-right-center-B-y: $center-y;
// RIGHT
$right-A-x: $width;
$right-A-y: $ray-spacing-small;
$right-B-x: $width;
$right-B-y: $height - $ray-spacing-small;
$right-center-x: $center-x;
$right-center-y: $center-y;
// BOTTOM RIGHT
$bottom-right-A-x: $width;
$bottom-right-A-y: $height;
$bottom-right-B-x: $width - $ray-width-large;
$bottom-right-B-y: $height;
$bottom-right-center-A-x: $center-x;
$bottom-right-center-A-y: $center-y;
$bottom-right-center-B-x: $center-x;
$bottom-right-center-B-y: $center-y + 2.5 * $unit;
// BOTTOM
$bottom-A-x: $width - $ray-width-large - $ray-spacing-large;
$bottom-A-y: $height;
$bottom-B-x: $ray-width-large + $ray-spacing-large;
$bottom-B-y: $height;
$bottom-center-x: $center-x;
$bottom-center-y: $center-y + 10 * $unit;
// BOTTOM LEFT
$bottom-left-A-x: $ray-width-large;
$bottom-left-A-y: $height;
$bottom-left-B-x: 0;
$bottom-left-B-y: $height;
$bottom-left-center-A-x: $center-x;
$bottom-left-center-A-y: $center-y + 2.5 * $unit;
$bottom-left-center-B-x: $center-x;
$bottom-left-center-B-y: $center-y;
// LEFT
$left-A-x: 0;
$left-A-y: $ray-spacing-small + $ray-width-small;
$left-B-x: 0;
$left-B-y: $ray-spacing-small;
$left-center-x: $center-x;
$left-center-y: $center-y;
background: $yellow;
// Red overlay, with cuts in clip-path to show the yellow underneath,
// simulating rays
&:before {
background: $red;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
clip-path: polygon(
$top-left-A-x $top-left-A-y,
$top-left-center-A-x $top-left-center-A-y,
$top-left-center-B-x $top-left-center-B-y,
$top-left-B-x $top-left-B-y,
$top-A-x $top-A-y,
$top-center-x $top-center-y,
$top-B-x $top-B-y,
$top-right-A-x $top-right-A-y,
$top-right-center-A-x $top-right-center-A-y,
$top-right-center-B-x $top-right-center-B-y,
$top-right-B-x $top-right-B-y,
$right-A-x $right-A-y,
$right-center-x $right-center-y,
$right-B-x $right-B-y,
$bottom-right-A-x $bottom-right-A-y,
$bottom-right-center-A-x $bottom-right-center-A-y,
$bottom-right-center-B-x $bottom-right-center-B-y,
$bottom-right-B-x $bottom-right-B-y,
$bottom-A-x $bottom-A-y,
$bottom-center-x $bottom-center-y,
$bottom-B-x $bottom-B-y,
$bottom-left-A-x $bottom-left-A-y,
$bottom-left-center-A-x $bottom-left-center-A-y,
$bottom-left-center-B-x $bottom-left-center-B-y,
$bottom-left-B-x $bottom-left-B-y,
$left-A-x $left-A-y,
$left-center-x $left-center-y,
$left-B-x $left-B-y
);
}
// Bordered-circle in the center
&:after {
content: '';
display: block;
background: $yellow;
border-radius: 50%;
width: $circle-full-width;
height: $circle-full-width;
border: $circle-border solid $red;
position: absolute;
top: $h2 - $circle-full-width / 2;
left: $w2 - $circle-full-width / 2;
}
};