feat: ✨ move styles out of App.vue and modularize

2020-08-26 19:14:37 +02:00 · 2020-08-26 19:14:37 +02:00 · d7e8f55b41
commit d7e8f55b41
parent e0f67441bd
4 changed files with 133 additions and 0 deletions
--- a/src/scss/_flex.scss
+++ b/src/scss/_flex.scss
@ -0,0 +1,67 @@
+.flex {
+  display: flex;
+  flex-flow: row wrap;
+
+  &--row {
+    flex-direction: row;
+  }
+
+  &--column {
+    flex-direction: column;
+  }
+
+  &--nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &--center {
+    justify-content: center;
+
+    &-v {
+      align-items: center;
+    }
+  }
+
+  &--end {
+    justify-content: flex-end;
+
+    &-v {
+      align-items: flex-end;
+    }
+  }
+
+  > .col {
+    flex: 1 0 0;
+    max-width: 100%;
+
+    &--center {
+      text-align: center;
+
+      &-v {
+        align-self: center;
+      }
+    }
+
+    @for $i from 1 through 12 {
+      &-#{$i} {
+        $width: percentage(($i / 12));
+        flex: 0 0 $width;
+        max-width: $width;
+      }
+      @include mq-desktop {
+        &-d-#{$i} {
+          $width: percentage(($i / 12));
+          flex: 0 0 $width;
+          max-width: $width;
+        }
+      }
+      @include mq-mobile {
+        &-m-#{$i} {
+          $width: percentage(($i / 12));
+          flex: 0 0 $width;
+          max-width: $width;
+        }
+      }
+    }
+  }
+}