feat(flags): add initial flag styling files

README.md

@@ -1,2 +1,2 @@
-# sass-skeleton
-Skeleton for sass libraries
+# flags
+As SCSS as it gets flag's collection

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "@adso/sass-skeleton",
+  "name": "@adso-sass/flags",
   "version": "1.0.0",
-  "description": "Skeleton for sass libraries",
+  "description": "SCSS flags collection",
   "repository": {
     "type": "git",
-    "url": "[email protected]:adam-sokolowski/sass-skeleton.git"
+    "url": "[email protected]:adam-sokolowski/flags.git"
   },
   "keywords": [
     "sass",

src/flags/_mixins.scss

@@ -0,0 +1,43 @@
+@mixin twoPart ($top, $bottom, $direction: to bottom) {
+  background:
+    linear-gradient(
+      $direction,
+      $top 50%,
+      $bottom 50%,
+    );
+}
+
+@mixin threePart ($top, $middle, $bottom, $direction: to bottom) {
+  background:
+    linear-gradient(
+      $direction,
+      $top,
+      $top calc(100% / 3),
+      $middle calc(100% / 3),
+      $middle calc(100% / 3 * 2),
+      $bottom calc(100% / 3 * 2),
+      $bottom 100%,
+    );
+}
+
+@mixin flagSymbol ($content, $color, $left, $top, $size : 20px) {
+  position: absolute;
+  font-family: 'flag-symbols';
+  content: $content;
+  color: $color;
+  left: $left;
+  top: $top;
+  font-size: $size;
+}
+
+@mixin flagBase64Symbol ($content, $left: 20%, $top: 20%, $width : 20px, $height : 20px) {
+  position: absolute;
+  content: '';
+  background-image: url($content);
+  left: $left;
+  top: $top;
+  width: $width;
+  height: $height;
+  background-size: $width, $height;
+
+}

src/flags/a.scss

@@ -0,0 +1,147 @@
+// Afghanistan
+&-af {
+  @include threePart(#000, #d32011, #007a36, to right);
+
+  &::before {
+    @include flagSymbol("\e901", #fff, 32%, 23%);
+  }
+}
+// Albania
+&-al {
+  background: #da291c;
+
+  &::before {
+    @include flagSymbol("\e903", #000, 33%, 25%);
+  }
+}
+// Algeria
+&-dz {
+  @include twoPart(#007229, #fff, to right);
+
+  &::before {
+    position: absolute;
+    top: 30.5%;
+    right: 0;
+    left: 0;
+    margin-right: auto;
+    margin-left: auto;
+    background: transparent;
+    height: $motion-flag-size / 4;
+    width: $motion-flag-size / 4;
+    content: "";
+    border-radius: 50%;
+    box-shadow: -3px 0 0 2px #d21034;
+  }
+
+  &::after {
+    position: absolute;
+    content: "★";
+    color: #d21034;
+    top: 38%;
+    left: 48%;
+    transform: rotate(15deg);
+    font-size: $motion-flag-size / 6;
+  }
+
+}
+// American Samoa
+&-as {
+  background:
+    linear-gradient(
+      -20deg,
+      #fff 31%,
+      transparent 15%
+    ) 0 $motion-flag-size / 3,
+    linear-gradient(
+      -160deg,
+      #fff 31%,
+      transparent 15%
+    ) 0 $motion-flag-size / 3,
+    linear-gradient(
+      -20deg,
+      #b00018 34%,
+      transparent 15%
+    ) 0 $motion-flag-size / 3,
+    linear-gradient(
+      -160deg,
+      #b00018 34%,
+      transparent 15%
+    ) 0 $motion-flag-size / 3
+    #000053;
+
+    &:after {
+      @include flagBase64Symbol($emblem-as, 60%, 20%, 20px, 20px);
+    }
+
+}
+// Andorra
+&-ad {
+  @include threePart(#0018a8, #fedf00, #d0103a, to right);
+
+  &:after {
+    @include flagBase64Symbol($emblem-ad, 33%, 20%, 20px, 20px);
+  }
+}
+// Angola
+&-ao {
+  @include twoPart(#dc143c,#000);
+
+  &::before {
+    @include flagSymbol("\e904", #fedf00, 25%, 10%, $motion-flag-size / 2);
+  }
+}
+// Anguilla
+&-ai {
+  background: #00247d;
+}
+// Antarctica
+&-aq {
+  background: #3a7dce;
+
+  &::before {
+    @include flagSymbol("\e905", #fff, 15%, 15%, $motion-flag-size / 2);
+  }
+}
+// Antigua and Barbuda
+&-ag {
+  //
+}
+// Argentina
+&-ar {
+  @include threePart(#4891d9, #fff, #4891d9);
+
+  &:after {
+    @include flagBase64Symbol($emblem-ar, 35%, 25%, 18px, 18px);
+  }
+}
+// Armenia
+&-am {
+  @include threePart(#d90012, #0033a0, #f2a800);
+}
+// Aruba
+&-aw {
+  background:
+    linear-gradient(
+      #39c 70%,
+      #ff0 70%,
+      #ff0 75%,
+      #39c 75%,
+      #39c 80%,
+      #ff0 80%,
+      #ff0 85%,
+      #39c 85%,
+      #39c 100%
+    );
+}
+// Australia
+&-au {
+  background: #0018a8;
+}
+// Austria
+&-at {
+  @include threePart(#ed2939, #fff, #ed2939, to right);
+}
+// Azerbaijan
+&-az {
+  @include threePart(#00b5e2, #ef3340, #509e2f);
+}