Migrate bourbon and neat from bower to npm (#688)

* Migrate bourbon and neat from bower to npm

* upgrade bourbon libraries

* fix box-sizing

* remove console.log

frontend/.nvmrc

@@ -1 +1 @@
-v12.22.6
+v14.21.3

frontend/app.json

@@ -2,7 +2,7 @@
   "buildpacks": [
     {
       "url": "https://github.com/lstoll/heroku-buildpack-monorepo"
-    }
+    },
     {
       "url": "https://buildpack-registry.s3.amazonaws.com/buildpacks/aedev/emberjs.tgz"
     }
@@ -11,7 +11,7 @@
     "ACME_KEY_1": {
       "description": "used to identify folder with heroku-buildpack-monorepo",
       "value": "frontend"
-    },
+    }
   },
   "formation": {
     "web": {

frontend/app/styles/bitters/_grid-settings.scss

@@ -1,5 +1,3 @@
-@import "neat-helpers"; // or "../neat/neat-helpers" when not in Rails
-
 // Neat Overrides
 // $column: 90px;
 // $gutter: 30px;
@@ -9,6 +7,3 @@
 // Neat Breakpoints
 $medium-screen: 600px;
 $large-screen: 900px;
-
-$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
-$large-screen-up: new-breakpoint(min-width $large-screen 8);

frontend/app/styles/bitters/_variables.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 
 // Typography
-$base-font-family: $helvetica;
+$base-font-family: $font-stack-helvetica;
 $heading-font-family: $base-font-family;
 
 // Font Sizes

frontend/app/styles/components/checkin/tracked-level.scss

@@ -34,7 +34,7 @@
 
       .tooltip {
         @include position(absolute, null 0 3em 0);
-        @include transition (all 0.2s ease-in-out);
+        transition: all 0.2s ease-in-out;
         background-color: black;
         background: black;
         border-radius: 3px;

frontend/app/styles/components/label-switch.scss

@@ -26,7 +26,7 @@
     display: none;
 
     + .checkbox {
-      @include transition(all 0.3s ease);
+      transition: all 0.3s ease;
       border-radius: $switch-radius;
       border: none;
       cursor: pointer;
@@ -39,8 +39,8 @@
 
       &:before {
         @include position(absolute, 2px 0 0 2px);
-        @include transform(scale(1));
-        @include transition(all 0.3s ease);
+        transform: scale(1);
+        transition: all 0.3s ease;
         background-color: $switch-background;
         border-radius: $switch-radius;
         content: "";
@@ -51,7 +51,7 @@
 
       &:after {
         @include position(absolute, 2px 0 0 2px);
-        @include transition(all 0.3s ease);
+        transition: all 0.3s ease;
         @include size($knob-size);
         background-color: $switch-background;
         border-radius: $knob-radius;
@@ -65,7 +65,7 @@
       + .checkbox {
 
         &:before {
-          @include transform(scale(0));
+          transform: scale(0);
         }
 
         &:after {

frontend/app/styles/components/step-controls.scss

@@ -3,7 +3,7 @@
   margin-top: 20px;
   .back,
   .forward {
-    @include span-columns(6);
+    @include grid-column(6);
     text-align: center;
     a {
       margin-top: 8px;

frontend/app/styles/global.scss

@@ -658,4 +658,4 @@ input[type=checkbox]{
 .flex-container.right-nav a:nth-child(2) {
   padding-right: 8px;
   padding-left: 8px;
-}
+}

frontend/app/styles/mixins.scss

@@ -14,3 +14,22 @@
 	@include card;
 	max-width: 500px;
 }
+
+@mixin outer-container {
+  @include clearfix;
+  box-sizing: border-box;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+
+  *,::after,::before {
+    box-sizing: border-box;
+}
+}
+
+@mixin media($query) {
+  @media screen and (min-width: $query) {
+    @content;
+  }
+}

frontend/bower.json

@@ -1,8 +1,6 @@
 {
   "name": "flaredown",
   "dependencies": {
-    "bourbon": "4.2.3",
-    "neat": "~1.7.2",
     "pace": "vectart/pace",
     "d3": "~3.5.13",
     "drag-drop-polyfill": "2.0.0-beta.1",

frontend/ember-cli-build.js

@@ -19,6 +19,13 @@ module.exports = function(defaults) {
       }
     },
 
+    sassOptions: {
+      includePaths: [
+        'node_modules/bourbon/core',
+        'node_modules/bourbon-neat/core',
+      ]
+    },
+
     fingerprint: {
       exclude: [
         'weather/clear-day',