From ef40b91ef85799c168e464c81c165fb72b8ed259 Mon Sep 17 00:00:00 2001
From: mrszympek <bartlomiej.piela@versum.pl>
Date: Sat, 1 Jun 2019 17:23:43 +0200
Subject: [PATCH] Flag component

---
 pages/_docs/flags.md         | 22 ++++++++++++++++++++++
 pages/_includes/ui/flag.html |  1 +
 pages/flags.html             | 19 +++++++++++--------
 scss/ui/_flags.scss          | 14 +++++++++++---
 4 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 pages/_docs/flags.md
 create mode 100644 pages/_includes/ui/flag.html

diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md
new file mode 100644
index 000000000..bbc945ee2
--- /dev/null
+++ b/pages/_docs/flags.md
@@ -0,0 +1,22 @@
+---
+title: Flags
+menu: docs.flags
+---
+
+## Flag
+
+{% example html %}
+{% include ui/flag.html name="tg" class="mr-1" %}
+{% include ui/flag.html name="br" class="mr-1" %}
+{% include ui/flag.html name="pt" %}
+{% endexample %}
+
+## Flag sizes
+
+{% example html %}
+{% include ui/flag.html name="tg" class="flag-size-xl mr-1" %}
+{% include ui/flag.html name="br" class="flag-size-lg mr-1" %}
+{% include ui/flag.html name="pt" class="flag-size-md" %}
+{% include ui/flag.html name="gb" class="mr-1" %}
+{% include ui/flag.html name="gr" class="flag-size-sm" %}
+{% endexample %}
diff --git a/pages/_includes/ui/flag.html b/pages/_includes/ui/flag.html
new file mode 100644
index 000000000..00e3f5268
--- /dev/null
+++ b/pages/_includes/ui/flag.html
@@ -0,0 +1 @@
+<span class="flag flag-{{ include.name }}{% if include.class %} {{ include.class }}{% endif %}"></span>
diff --git a/pages/flags.html b/pages/flags.html
index 9d41100b7..bb1daab22 100644
--- a/pages/flags.html
+++ b/pages/flags.html
@@ -1,11 +1,14 @@
 ---
+title: Flags
+page-title: Flags
+done: true
 ---
 <div class="d-flex flex-row flex-wrap">
-	{% for flag in site.data.flags %}
-	<div class="d-flex flex-column text-center m-3">
-		<p class="d-inline-block">{{flag.name}}</p>
-		<span  class="flag flag-{{flag.flag}} my-3 mx-auto"></span>
-		<code>.flag .flag-{{flag.flag}}</code>
-	</div>
-	{% endfor %}
-</div>
\ No newline at end of file
+   {% for flag in site.data.flags %}
+   <div class="d-flex flex-column text-center m-3">
+      <p class="d-inline-block">{{flag.name}}</p>
+      {% include ui/flag.html name=flag.flag class="my-3 mx-auto" %}
+      <code>.flag .flag-{{flag.flag}}</code>
+   </div>
+   {% endfor %}
+</div>
diff --git a/scss/ui/_flags.scss b/scss/ui/_flags.scss
index cabe47b45..a75a5435d 100644
--- a/scss/ui/_flags.scss
+++ b/scss/ui/_flags.scss
@@ -19,13 +19,14 @@
   .flag {
     position: relative;
     display: inline-block;
-    width: 1.3333em;
-    height: 1em;
-    line-height: 1em;
+    width: 2em;
+    height: 2rem;
+    line-height: 2rem;
     background-repeat: no-repeat;
     background-position: 50%;
     background-size: contain;
     border-radius: 2px;
+    vertical-align: bottom;
   }
 
   .flag::before {
@@ -39,3 +40,10 @@
   }
 }
 
+@each $avatar-size, $size in $avatar-sizes {
+  .flag-size-#{$avatar-size} {
+    width: $size;
+    height: $size;
+    line-height: $size;
+  }
+}