flag fixes

pages/_data/invoices.yml

@@ -7,6 +7,7 @@
   status: success
   status-name: Paid
   price: $887
+  country: us
 
 -
   invoice: "00450"
@@ -17,6 +18,7 @@
   status: warning
   status-name: Pending
   price: $1200
+  country: gb
 
 -
   invoice: "00452"
@@ -27,6 +29,7 @@
   status: warning
   status-name: Pending
   price: $534
+  country: de
 
 -
   invoice: "00450"
@@ -37,6 +40,7 @@
   status: secondary
   status-name: Due in 2 Weeks
   price: $1500
+  country: br
 
 -
   invoice: "00450"
@@ -47,6 +51,7 @@
   status: danger
   status-name: Paid Today
   price: $648
+  country: pl
 
 -
   invoice: "00450"
@@ -57,6 +62,7 @@
   status: secondary
   status-name: Due in 3 Weeks
   price: $300
+  country: br
 
 -
   invoice: "00450"
@@ -67,6 +73,7 @@
   status: success
   status-name: Paid Today
   price: $2500
+  country: us
 
 -
   invoice: "00450"
@@ -87,6 +94,7 @@
   status: success
   status-name: Paid
   price: $887
+  country: us
 
 -
   invoice: "00450"
@@ -97,6 +105,7 @@
   status: warning
   status-name: Pending
   price: $1200
+  country: us
 
 -
   invoice: "00452"
@@ -107,6 +116,7 @@
   status: warning
   status-name: Pending
   price: $534
+  country: us
 
 -
   invoice: "00450"
@@ -117,6 +127,7 @@
   status: secondary
   status-name: Due in 2 Weeks
   price: $1500
+  country: us
 
 -
   invoice: "00450"
@@ -127,6 +138,7 @@
   status: danger
   status-name: Paid Today
   price: $648
+  country: us
 
 -
   invoice: "00450"
@@ -137,6 +149,7 @@
   status: secondary
   status-name: Due in 3 Weeks
   price: $300
+  country: us
 
 -
   invoice: "00450"
@@ -147,6 +160,7 @@
   status: success
   status-name: Paid Today
   price: $2500
+  country: us
 
 -
   invoice: "00450"
@@ -157,3 +171,4 @@
   status: success
   status-name: Paid Today
   price: $940
+  country: us

pages/_docs/flags.md

@@ -18,5 +18,4 @@ menu: docs.flags
 {% 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 %}

pages/_includes/cards/invoices.html

@@ -23,6 +23,7 @@
             <td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
             <td><a href="invoice.html" class="text-inherit">{{ invoice.name }}</a></td>
             <td>
+               {% include ui/flag.html name=invoice.country %}
                {{ invoice.client }}
             </td>
             <td>

scss/_variables.scss

@@ -147,7 +147,6 @@ $sizes: (
 $generate-social-colors: true !default;
 $generate-color-hues: true !default;
 $generate-colors: true !default;
-$generate-flags: true !default;
 
 $enable-gradients: false !default;
 
@@ -232,3 +231,12 @@ $input-border-radius: $border-radius !default;
 $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
 $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
 
+/**
+Flags
+ */
+$generate-flags: true !default;
+$flag-sizes: (
+  "md": 2rem,
+  "lg": 3rem,
+  "xl": 4rem
+) !default;

scss/ui/_flags.scss

@@ -19,18 +19,14 @@
   .flag {
     position: relative;
     display: inline-block;
-    width: 2em;
-    height: 2rem;
-    line-height: 2rem;
+    width: 1.125rem * 1.33333;
+    height: 1.125rem;
     background-repeat: no-repeat;
-    background-position: 50%;
-    background-size: contain;
-    border-radius: 2px;
-    vertical-align: bottom;
-  }
-
-  .flag::before {
-    content: "\00a0";
+    background-position: center;
+    background-size: cover;
+    border-radius: 3px;
+    border: 1px solid $border-color;
+    vertical-align: -3px;
   }
 
   @each $country in $countries {
@@ -38,12 +34,11 @@
       background-image: url("/img/flags/#{$country}.svg");
     }
   }
-}
 
-@each $avatar-size, $size in $avatar-sizes {
-  .flag-size-#{$avatar-size} {
-    width: $size;
-    height: $size;
-    line-height: $size;
+  @each $flag-size, $size in $flag-sizes {
+    .flag-size-#{$flag-size} {
+      width: $size * 1.33333;
+      height: $size;
+    }
   }
 }