Luke Towers 5b7d9041fd
Integrate flag-icon-css (#3797)
Replaced the existing PNG flag icons with the flag-icon-css library that uses SVGs, has more flags, and is more active (i.e well maintained). Credit to @mariavilaro & @w20k. Thanks to @petehalverson for Octodock for easy testing of this.
2018-09-25 08:23:18 -06:00

47 lines
1.1 KiB
Plaintext

//
// Dependencies
// --------------------------------------------------
@import "../vendor/flag-icon/less/variables";
//
// Overriding path variable
// --------------------------------------------------
@flag-icon-css-path: 'vendor/flag-icon/flags';
//
// Flag
// --------------------------------------------------
[class^="flag-"],
[class*=" flag-"] {
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: unit((4 / 3), em);
line-height: 1em;
&:before {
content: "\00a0";
}
&.oc-flag-squared {
width: 1em;
}
}
.flag-icon(@country) {
.flag-@{country} {
background-image: ~"url(@{flag-icon-css-path}@{flag-icon-rect-path}/@{country}.svg)";
&.oc-flag-squared {
background-image: ~"url(@{flag-icon-css-path}@{flag-icon-square-path}/@{country}.svg)";
}
}
}
//
// Generate all flags
// --------------------------------------------------
@import "../vendor/flag-icon/less/flag-icon-list";
@import "../vendor/flag-icon/less/flag-icon-more";