feat(flags): add more base64 emblems

adam-sokolowski · Apr 18, 2020 · d5b9b99 · d5b9b99
1 parent aad6ad5
commit d5b9b99
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 97 deletions.
diff --git a/src/flags/_index.scss b/src/flags/_index.scss
@@ -9,7 +9,6 @@ $flag-height: $flag-size / 3 * 2;
   width: $flag-size;
   height: $flag-height;
   overflow: hidden;
-  border: 1px solid #d6d6d6;
 
   &-xl {
     transform: scale(calc(2));

diff --git a/src/flags/a.scss b/src/flags/a.scss
@@ -48,7 +48,7 @@
   @include threePart(#0018a8, #fedf00, #d0103a, to right);
 
   &::after {
-    @include flagBase64Symbol($emblem-ad, 34%, 20%, 20px, 20px);
+    @include flagBase64Symbol($emblem-ad, 36%, 25%, $flag-size / 3.5, $flag-size / 3.5);
   }
 }
 // Angola
@@ -78,6 +78,15 @@
 // Australia
 &-au {
   background: #0018a8;
+
+    &::before {
+      @include flagSymbol("\e940", #fff, 25%, 60%, $flag-width / 6);
+    }
+
+    &::after {
+      @include flagSymbol("\e93c", #fff, 45%, 20%, $flag-width / 2);
+    }
+
 }
 // Austria
 &-at {

diff --git a/src/flags/b.scss b/src/flags/b.scss
@@ -42,6 +42,11 @@
 // Belize
 &-bz {
   background: linear-gradient( to bottom, #ce1126 15%, #052d74 15%, #052d74 85%, #ce1126 85%, #ce1126 100%);
+
+    &::after {
+      @include flagBase64Symbol($emblem-bz, 33%, 27%, $flag-size / 3.2, $flag-size / 3.2);
+    }
+
 }
 // Benin
 &-bj {

diff --git a/src/flags/c.scss b/src/flags/c.scss
@@ -269,42 +269,3 @@
       #d7141a 50%
     );
 }
-
-// Congo
-// &-cg {
-//   position: relative;
-//   background:
-//     linear-gradient(
-//       152deg,
-//       #00a3dd 40%,
-//       #fcd116 40%,
-//       #fcd116 43%,
-//       #d21034 43%,
-//       #d21034 57%,
-//       #fcd116 57%,
-//       #fcd116 60%,
-//       #00a3dd 60%
-//     );
-
-//   &::before {
-//     position: absolute;
-//     top: $flag-size * 0.05;
-//     margin-top: 0;
-//     margin-left: 5%;
-//     font-size: $flag-size / 4;
-//     color: #ffce00;
-//     content: "★";
-//   }
-// }
-// // Congo
-// &-cd {
-//   background:
-//     linear-gradient(
-//       135deg,
-//       #009543 40%,
-//       #fbde4a 40%,
-//       #fbde4a 60%,
-//       #d21034 60%,
-//       #d21034 60%
-//     );
-// }
diff --git a/src/flags/p.scss b/src/flags/p.scss
@@ -26,7 +26,6 @@
     content: "★";
     transform: rotate(15deg);
   }
-
 }
 // Palau
 &-pw {
@@ -97,10 +96,19 @@
 // Paraguay
 &-py {
   @include threePart(#ef3340, #fff, #0033a0);
+
+  &::after {
+    @include flagBase64Symbol($emblem-py, 37%, 33%, $flag-size / 4.5, $flag-size / 4.5);
+  }
 }
 // Peru
 &-pe {
   @include threePart(#d91023, #fff, #d91023, to right);
+
+    &::after {
+      @include flagBase64Symbol($emblem-pe, 36%, 25%, $flag-size / 3.5, $flag-size / 3.5);
+    }
+
 }
 // Philippines
 &-ph {
@@ -132,46 +140,8 @@
 // Portugal
 &-pt {
   @include threePart(#006600, #ff0000, #ff0000, to right);
-}
-
-// // Puerto Rico
-// &-pr {
-//   position: relative;
-//   background:
-//     linear-gradient(
-//       146deg,
-//       #0333ec 25%,
-//       transparent 15%
-//     ) 0 $flag-width / 3,
-//     linear-gradient(
-//       34deg,
-//       #0333ec 25%,
-//       transparent 15%
-//     ) 0 $flag-width / 3,
-//     linear-gradient(
-//       to bottom,
-//       #e40007 20%,
-//       #fff 20%,
-//       #fff 40%,
-//       #e40007 40%,
-//       #e40007 60%,
-//       #fff 60%,
-//       #fff 80%,
-//       #e40007 80%,
-//       #e40007 100%
-//     );
-
-//   &::before {
-//     position: absolute;
-//     top: 35%;
-//     left: 8%;
-//     font-size: $flag-size / 6;
-//     color: #fff;
-//     content: "★";
-//   }
-// }
 
-// // Pitcairn
-// &-pn {
-//  //
-// }
+  &::after {
+    @include flagBase64Symbol($emblem-pt, 15%, 25%, $flag-size / 3, $flag-size / 3);
+  }
+}
diff --git a/src/flags/t.scss b/src/flags/t.scss
@@ -166,7 +166,38 @@
 }
 // Tunisia
 &-tn {
-  background: #e70013;
+  background:
+    radial-gradient(
+      $flag-size / 1.25 at 50% 50%,
+      #fff 0,
+      #fff 30%,
+      transparent 30%,
+      transparent 100%
+    )
+    #e70013;
+
+  &::before {
+    position: absolute;
+    top: 25%;
+    right: 0;
+    left: 15%;
+    width: $flag-size / 3;
+    height: $flag-size / 3;
+    margin-right: auto;
+    margin-left: auto;
+    content: "";
+    border-radius: 50%;
+    box-shadow: -$flag-size / 15 0 0 $flag-size / 60 #e70013;
+  }
+
+  &::after {
+    position: absolute;
+    top: 38%;
+    left: 47%;
+    font-size: $flag-size / 6;
+    color: #e70013;
+    content: "★";
+  }
 }
 // Turkey
 &-tr {
@@ -205,11 +236,10 @@
 &-tv {
   background: #1085bd;
 
-
-
     &::before {
       @include flagBase64Symbol($emblem-union-jack, 0, 0, $flag-width / 1.75, $flag-width / 3.5);
     }
+
     &::after {
       @include flagSymbol("\e944", #fed100, 50%, 30%, $flag-width / 2.5);
     }

diff --git a/src/helpers/_flag-base64-symbols.scss b/src/helpers/_flag-base64-symbols.scss
diff --git a/stories/index.scss b/stories/index.scss
@@ -40,6 +40,7 @@ body {
   padding: 10px;
 }
 
-.margin {
+.container {
   margin: 20px 0;
+  border: 1px solid #e9e9e9;
 }
diff --git a/stories/index.stories.js b/stories/index.stories.js
@@ -14,16 +14,16 @@ const size = select('Size', sizes, 'm');
 const getTemplate = (letter) => `
   <div class="padding">
     ${COUNTRY_CODES
-      .filter(country => country.name.startsWith(letter))
-      .map(country => `
+    .filter(country => country.name.startsWith(letter))
+    .map(country => `
         <div class="wrapper">
-          <div class="margin flag flag-${size} flag-${country.code.toLowerCase()}"></div>
+          <div class="container flag flag-${size} flag-${country.code.toLowerCase()}"></div>
             <div class="label">[${country.code}] - ${country.name}</div>
         </div>`
-      )
-      .toString()
-      .replace(/,/g, '')
-    }
+    )
+    .toString()
+    .replace(/,/g, '')
+  }
 </div>`;
 
 storiesOf('Countries', module)