Integrate Materialize library

Gemfile

@@ -9,8 +9,7 @@ gem "rails", "~> 6.0.3"
 # assets
 gem "autoprefixer-rails"
 gem "aws-sdk-s3"
-gem "foundation-icons-sass-rails"
-gem "foundation-rails"
+gem "materialize-sass"
 gem "image_processing"
 gem "premailer-rails"
 gem "sass-rails", "~> 5.0.0", ">= 5.0.6"

Gemfile.lock

@@ -94,10 +94,6 @@ GEM
       aws-sigv4 (~> 1.1)
     aws-sigv4 (1.1.4)
       aws-eventstream (~> 1.0, >= 1.0.2)
-    babel-source (5.8.35)
-    babel-transpiler (0.7.0)
-      babel-source (>= 4.0, < 6)
-      execjs (~> 2.0)
     bcrypt (3.1.16)
     bindex (0.8.1)
     bootsnap (1.4.6)
@@ -172,13 +168,6 @@ GEM
       activesupport
       capybara
       i18n
-    foundation-icons-sass-rails (3.0.0)
-      railties (>= 3.1.1)
-      sass-rails (>= 3.1.1)
-    foundation-rails (6.6.2.0)
-      railties (>= 3.1.0)
-      sass (>= 3.3.0)
-      sprockets-es6 (>= 0.9.0)
     foundation_emails (2.2.1.0)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
@@ -238,6 +227,8 @@ GEM
     mail (2.7.1)
       mini_mime (>= 0.1.1)
     marcel (1.0.1)
+    materialize-sass (1.0.0)
+      autoprefixer-rails (>= 6.0.3)
     memory_profiler (0.9.7)
     meta-tags (2.14.0)
       actionpack (>= 3.2.0, < 6.2)
@@ -432,10 +423,6 @@ GEM
     sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    sprockets-es6 (0.9.2)
-      babel-source (>= 5.8.11)
-      babel-transpiler
-      sprockets (>= 3.0.0)
     sprockets-rails (3.2.2)
       actionpack (>= 4.0)
       activesupport (>= 4.0)
@@ -501,8 +488,6 @@ DEPENDENCIES
   faker
   flamegraph
   formulaic
-  foundation-icons-sass-rails
-  foundation-rails
   google-analytics-rails
   guard-rspec
   health_check
@@ -512,6 +497,7 @@ DEPENDENCIES
   kaminari
   launchy
   letter_opener
+  materialize-sass
   memory_profiler
   meta-tags
   newrelic_rpm

app/assets/javascripts/application.js

@@ -1,4 +1,2 @@
-//= require foundation
 //= require_tree .
-
-$(document).foundation();
+//= require materialize

app/assets/stylesheets/components/all.scss

@@ -1,4 +1,4 @@
 @import "forms";
-@import "navigation";
-@import "notifications";
+// @import "navigation";
+// @import "notifications";
 @import "container";

app/assets/stylesheets/components/forms.scss

@@ -3,13 +3,13 @@
     color: $form-label-color-invalid;
   }
 
-  input,
-  textarea,
-  select {
-    @include form-input-error;
-  }
+  // input,
+  // textarea,
+  // select {
+  //   @include form-input-error;
+  // }
 
-  .error {
-    @include form-error;
-  }
+  // .error {
+  //   @include form-error;
+  // }
 }

app/assets/stylesheets/core/all.scss

@@ -1,2 +1,2 @@
+@import "materialize";
 @import "settings";
-@import "foundation_and_overrides";

app/assets/stylesheets/core/settings.scss

@@ -60,7 +60,7 @@
 //  55. Top Bar
 //  56. Xy Grid
 
-@import 'util/util';
+// @import 'util/util';
 
 // 1. Global
 // ---------
@@ -75,6 +75,8 @@ $foundation-palette: (
   warning: #ffae00,
   alert: #cc4b37,
 );
+$warning-color: #ffae00;
+$alert-color: #cc4b37;
 $light-gray: #e6e6e6;
 $medium-gray: #cacaca;
 $dark-gray: #8a8a8a;
@@ -100,7 +102,7 @@ $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 $print-hrefs: true;
 
-@include add-foundation-colors;
+// @include add-foundation-colors;
 
 // 2. Breakpoints
 // --------------
@@ -808,9 +810,9 @@ $table-is-striped: true;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
 $table-head-background: smart-scale($table-background, $table-color-scale / 2);
-$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+// $table-head-row-hover: darken($table-head-background, $table-hover-scale);
 $table-foot-background: smart-scale($table-background, $table-color-scale);
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+// $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
 $table-head-font-color: $body-font-color;
 $table-foot-font-color: $body-font-color;
 $show-header-for-stacked: false;

app/views/application/_navigation.html.slim

@@ -1,4 +1,4 @@
-.title-bar data-hide-for="medium" data-responsive-toggle="navigation_menu"
+.title-bar.hide-on-med-and-up data-responsive-toggle="navigation_menu"
   button.menu-icon data-toggle="" type="button"
   title-bar-title Menu