Merge pull request #274 from billalxcode/billalxcode/flags-country-pl…

…ugin

Added additional flag components

src/assets/scss/_mazer.scss

@@ -31,6 +31,7 @@
     2.18 Icons
     2.19 Comment
     2.20 Placeholder
+    2.21 Flag
 4. Pages
     4.0 Layout
     4.1 Auth
@@ -105,6 +106,9 @@
 // - 2.20 Placeholder
 @import "./components/placeholders";
 
+// - 2.21 Flag
+@import "./components/flag";
+
 // - 4.0 Layout
 @import "./layouts/main.scss";
 

src/assets/scss/_variables.scss

@@ -60,6 +60,8 @@ $alert-colors: (
     ),
 ) !default;
 
+$assets-path: '/assets' !default;
+
 // $btn-colors uses $theme-colors background color by default
 $btn-colors: (
   primary: (

src/assets/scss/components/_flag.scss

@@ -0,0 +1,61 @@
+// Original assets: https://github.com/hampusborgos/country-flags
+
+$countries: (
+    'ad', 'ae', 'af', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 
+    'bj', 'bl', 'bm', 'bn', 'bo', 'bq', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'cn', 
+    'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'dz', 'ec', 'ee', 'eg', 'eh', 'er', 'es', 'et', 'eu', 'fi', 'fj', 
+    'fk', 'fm', 'fo', 'fr', 'ga', 'gb-eng', 'gb-nir', 'gb-sct', 'gb-wls', 'gb', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq',
+    'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hm', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm',
+    'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn', 'kp', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly',
+    'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mm', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na',
+    'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt',
+    'pw', 'py', 'qa', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'sd', 'se', 'sg', 'sh', 'si', 'sj', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'ss',
+    'st', 'sv', 'sx', 'sy', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'um',
+    'us', 'uy', 'uz', 'va', 'vc', 've', 'vg', 'vi', 'vn', 'vu', 'wf', 'ws', 'xk', 'ye', 'yt', 'za', 'zm', 'zw'
+);
+
+$sizes: (
+    'sm': (
+        size: 24px
+    ),
+    'md': (
+        size: 32px
+    ),
+    'md2': (
+        size: 40px
+    ),
+    'lg': (
+        size: 48px
+    ),
+    'xl': (
+        size: 60px
+    ),
+    '2xl': (
+        size: 120px
+    ),
+    '3xl': (
+        size: 180px
+    )
+);
+
+.flag {
+    position: relative;
+    display: inline-block;
+    height: 32px;
+    aspect-ratio: 1.33333;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+
+@each $country in $countries {
+    .flag-country-#{$country} {
+        background-image: url("/assets/static/images/flags/#{$country}.svg");
+    }
+}
+
+@each $flag-size, $size in $sizes {
+    .flag-#{$flag-size} {
+        height: map-get($map: $size, $key: size);
+    }
+}