Save only used selectors from flex.box library

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/app.scss

@@ -7,7 +7,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "~flex.box";
+@import "./flexbox";
 @import "../themes/theme-vars";
 @import "./fonts";
 

src/renderer/components/flexbox.scss

@@ -0,0 +1,114 @@
+//-- Flexbox
+.flex {
+  display: flex;
+
+  &.inline {
+    display: inline-flex;
+  }
+
+  &.fullsize {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &.column {
+    flex-direction: column;
+    &.reverse {
+      flex-direction: column-reverse;
+    }
+  }
+
+  &.reverse {
+    flex-direction: row-reverse;
+  }
+
+  &.wrap {
+    flex-wrap: wrap;
+    &-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+
+  &.auto {
+    > * {
+      flex: 1 1 0%;
+    }
+  }
+
+  &.center {
+    > * {
+      margin: auto;
+    }
+  }
+
+  $flex: flex-start flex-end center;
+  $justifyContent: join($flex, space-around space-between);
+  $alignContent: join($justifyContent, stretch);
+  $alignItems: join($flex, stretch baseline);
+
+  // align items in x-axis for flex=row (default) and in y-axis when flex=column mode
+  @each $mod in $justifyContent {
+    &.justify-#{$mod} {
+      justify-content: $mod;
+    }
+  }
+
+  @each $mod in $alignItems {
+    &.align-#{$mod} {
+      align-items: $mod;
+    }
+  }
+  @each $mod in $alignContent {
+    &.content-#{$mod} {
+      align-content: $mod;
+    }
+  }
+
+  // gaps
+  &.gaps {
+    $gap: var(--flex-gap, 1em);
+    &.column {
+      &:not(.reverse) > :not(:last-child) {
+        margin-bottom: $gap;
+      }
+      &.reverse > :not(:last-child) {
+        margin-top: $gap;
+      }
+    }
+    &:not(.column) {
+      &:not(.reverse) > :not(:last-child) {
+        margin-right: $gap;
+      }
+      &.reverse > :not(:last-child) {
+        margin-left: $gap;
+      }
+    }
+  }
+
+  // children
+  > .box {
+    &.grow {
+      flex: 1 0;
+      &-fixed {
+        flex: 1 0 0;
+      }
+    }
+    &.center {
+      margin: auto;
+    }
+    &.left {
+      margin-left: 0;
+      margin-right: auto;
+    }
+    &.right {
+      margin-right: 0;
+      margin-left: auto;
+    }
+
+    @each $mod in $alignItems {
+      &.self-#{$mod} {
+        align-self: $mod;
+      }
+    }
+  }
+}