scsslint, flash styling, new parent start

app/assets/javascripts/main.js

@@ -7,4 +7,8 @@ function getPersonPhone(id, collection){
 }
 
 $( document ).ready(function() {
+  $('[data-id=alert_close]').on('click', function(){
+    $(this).parent().slideUp();
+  });
+
 });

app/assets/stylesheets/main.scss

@@ -1,8 +1,12 @@
 // maybe this? => https://color.adobe.com/Theme-1-color-theme-6893131/edit/?copy=true
-$white: #F2E8DF;
-$light: #C7C9CD;
-$grey: #8E969D;
+$black: #000;
+$white: #fff;
+$light: #c7c9cd;
+$grey: #8e969d;
 $dark: #646267;
+$taupe: #f2e8df;
+$blue: #211caf;
+$red: #b10001;
 
 @mixin inline-ul {
   display: inline-block;
@@ -25,8 +29,8 @@ $dark: #646267;
 }
 
 html {
+  background-color: $taupe;
   color: $dark;
-  background-color: $white;
   margin: 0;
   padding: 0;
 }
@@ -57,8 +61,10 @@ body {
 .sub-nav {
   @include inline-ul;
   margin: -19px -15px 0;
+
   a {
     color: $dark;
+
     &:hover {
       background-color: $light;
     }
@@ -68,6 +74,7 @@ body {
 
 form {
   width: 100%;
+
   * {
     font-size: 14px;
     line-height: 1.6em;
@@ -89,11 +96,11 @@ form {
     padding: 5px;
   }
 
-  [type=submit]{
+  [type=submit] {
     margin: 0.6em 0;
   }
 
-  textarea{
+  textarea {
     height: 5em;
     max-width: 300px;
     padding: 5px;
@@ -101,3 +108,48 @@ form {
   }
 
 }
+
+.alertbox {
+  background-color: $white;
+  border: 2px solid $white;
+  color: $dark;
+  left: calc(50% - 125px);
+  margin-bottom: 15px;
+  padding: 10px 35px 10px 20px;
+  position: absolute;
+  top: 20px;
+  width: 250px;
+  z-index: 50;
+  & + & { position: relative; }
+
+  &.box-blue {
+    background-color: $blue;
+    border-color: $light;
+    color: $white;
+  }
+
+  &.box-red {
+    background-color: $red;
+    color: $white;
+  }
+
+  .box-close {
+    cursor: pointer;
+    display: inline-block;
+    float: right;
+    height: 15px;
+    margin-top: 1px;
+    position: relative;
+    right: -25px;
+    width: 15px;
+
+    &:before {
+      color: $white;
+      content: "\00d7";
+      left: 3px;
+      position: relative;
+      top: -2px;
+    }
+  }
+
+}