Merge pull request #25 from scorebreaker/add-sass

style: add sass support and general setup

Author: stackingcats

package.json

@@ -21,6 +21,7 @@
     "bignumber.js": "^9.0.1",
     "mobx": "^6.0.4",
     "mobx-react": "^7.0.5",
+    "node-sass": "4.14.1",
     "qrcode.react": "^1.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import "./styles/styles.scss";
 import App from "./App";
 
 ReactDOM.render(

src/styles/abstracts/_mixins.scss

@@ -0,0 +1,58 @@
+@mixin clearfix {
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin absCenter {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin respond($breakpoint) {
+  @if $breakpoint == small-phone {
+    @media only screen and (max-width: 22.8em) {
+      @content;
+    } //max 365px
+  }
+
+  @if $breakpoint == phone {
+    @media only screen and (max-width: 37.5em) {
+      @content;
+    } //max 600px
+  }
+
+  @if $breakpoint == tab-port {
+    @media only screen and (max-width: 56.25em) {
+      @content;
+    } // max 900px
+  }
+
+  @if $breakpoint == tab-land {
+    @media only screen and (max-width: 75em) {
+      @content;
+    } // max 1200px
+  }
+
+  @if $breakpoint == medium-desktop {
+    @media only screen and (max-width: 93.75em) {
+      @content;
+    } // max 1500px
+  }
+
+  @if $breakpoint == desktop {
+    @media only screen and (max-width: 112.5em) {
+      @content;
+    } //max 1800px
+  }
+
+  @if $breakpoint == big-desktop {
+    @media only screen and (min-width: 125em) {
+      @content;
+    } //min width 2000px
+  }
+}

src/styles/abstracts/_variables.scss

@@ -0,0 +1,5 @@
+// Grid
+$grid-width: 114rem;
+$gutter-vertical: 0rem;
+$gutter-vertical-small: 0rem;
+$gutter-horizontal: 0rem;

src/styles/base/_base.scss

@@ -0,0 +1,11 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+body {
+  box-sizing: border-box;
+}

src/styles/layout/_grid.scss

@@ -0,0 +1,70 @@
+.row {
+  max-width: $grid-width;
+  margin: 0 auto;
+
+  &:not(:last-child) {
+    margin-bottom: $gutter-vertical;
+
+    @include respond(tab-port) {
+      margin-bottom: $gutter-vertical-small;
+    }
+  }
+
+  @include respond(tab-port) {
+    max-width: 95%;
+  }
+
+  @include respond(phone) {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  @include clearfix;
+
+  [class^="col-"] {
+    float: left;
+
+    &:not(:last-child) {
+      margin-right: $gutter-horizontal;
+
+      @include respond(tab-port) {
+        margin-right: 0;
+        margin-bottom: $gutter-vertical-small;
+      }
+    }
+
+    @include respond(tab-port) {
+      width: 100% !important;
+    }
+  }
+
+  .col-1-of-2 {
+    width: calc((100% - #{$gutter-horizontal}) / 2);
+  }
+
+  .col-1-of-3 {
+    width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
+  }
+
+  .col-2-of-3 {
+    width: calc(
+      2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal}
+    );
+  }
+
+  .col-1-of-4 {
+    width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
+  }
+
+  .col-2-of-4 {
+    width: calc(
+      2 * ((100% - 3 * #{$gutter-horizontal}) / 4) + #{$gutter-horizontal}
+    );
+  }
+
+  .col-3-of-4 {
+    width: calc(
+      3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal}
+    );
+  }
+}

src/styles/styles.scss

@@ -0,0 +1,6 @@
+@import "./abstracts/mixins";
+@import "./abstracts/variables";
+
+@import "./base/base";
+
+@import "./layout/grid";