Merge pull request #2870 from jeff1evesque/feature-2866

#2866: Gently style analysis component

Author: jeff1evesque

src/scss/_navigation.scss

@@ -35,13 +35,13 @@
 .menu-container {
   .side-menu {
     a {
-      color: $gray-6;
+      color: $gray-7;
     }
 
     a:hover {
       background-color: $gray-1;
       border-right: .35rem solid $green-4;
-      color: $gray-7;
+      color: $gray-8;
     }
   }
 

src/scss/_variables.scss

@@ -8,10 +8,12 @@
 // Note: '//' comment(s), will not appear in the corresponding compiled css,
 //       whereas, '/* */' comment(s), will be preserved in the compiled output.
 
+$focus: #88d5e9;
 $gutter-1: 2rem;
-$gray-7: #1a1a1a;
-$gray-6: #333;
-$gray-5: #777;
+$gray-8: #1a1a1a;
+$gray-7: #333;
+$gray-6: #777;
+$gray-5: #bebebe;
 $gray-4: #d5d5d5;
 $gray-3: #ccc;
 $gray-2: #ddd;

src/scss/_webform.scss

@@ -25,10 +25,41 @@
 }
 
 form {
+  input,
+  select,
+  textarea {
+    border: 1px solid #gray-5;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0;
+    outline: none;
+    padding: .438rem;
+    -moz-transition: all .30s ease-in-out;
+    -ms-transition: all .30s ease-in-out;
+    -o-transition: all .30s ease-in-out;
+    -webkit-transition: all .30s ease-in-out;
+  }
+
+  input:focus,
+  select:focus,
+  textarea:focus {
+    border: 1px solid $focus;
+    -moz-box-shadow: 0 0 .5rem $focus;
+    -webkit-box-shadow: 0 0 .5rem $focus;
+    box-shadow: 0 0 .5rem $focus;
+  }
+
+  fieldset {
+    padding: .75rem 1.5rem 1rem;
+  }
+
   > fieldset {
+    border: 1px solid $gray-2;
     margin-top: $gutter-1 / 2;
 
     > fieldset {
+      border: 1px solid $gray-1;
       margin-top: $gutter-1 / 4;
     }
   }
@@ -38,20 +69,26 @@ form {
   }
 
   label {
-    color: $gray-6;
+    color: $gray-7;
   }
 
   .input-block {
     border: 1px solid $gray-4;
     border-radius: .1875rem;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, .085);
     box-sizing: border-box;
-    color: $gray-6;
+    color: $gray-7;
     display: block;
     font-size: .875rem;
     padding: .425rem .55rem;
     width: 100%;
   }
+
+  legend {
+    color: $gray-7;
+    font-size: .938rem;
+    padding: 0 $gutter-1 / 4;
+  }
 }
 
 .form-group {
@@ -68,6 +105,14 @@ fieldset .error {
   padding-top: 1.25rem;
 }
 
+.analysis-container {
+  form {
+    margin: .625rem auto;
+    padding: 0 0 .625rem 1.25rem;
+
+  }
+}
+
 .login-form {
   margin: 0 auto;
   width: 24rem;
@@ -105,7 +150,7 @@ fieldset .error {
 }
 
 .register-form {
-  color: $gray-6;
+  color: $gray-7;
   margin: 0 auto;
   width: 28rem;
 
@@ -115,7 +160,7 @@ fieldset .error {
   }
 
   label {
-    color: $gray-6;
+    color: $gray-7;
     display: block;
     font-weight: 600;
     margin: 0 0 .4rem;

src/scss/style.scss

@@ -53,7 +53,7 @@ h6 {
   background-image: linear-gradient($white-2, $gray-1);
   border: 1px solid $gray-4;
   border-radius: 3px;
-  color: $gray-6;
+  color: $gray-7;
   cursor: pointer;
   display: inline-block;
   font-size: 13px;
@@ -94,7 +94,7 @@ h6 {
 }
 
 .note {
-  color: $gray-5;
+  color: $gray-6;
   font-size: .75rem;
   margin: .4rem 0 .3rem;
 }