Misc CSS fixes

  * set max content width to 960px
  * created mixin for bold font
  * move app-header content to global header
  * minor global changes
  * changed input alignment for network config inputs
  * added pop-out button class
  * changed lightgrey color
  * fixed accordion header actions responsiveness
  * fixed input box border colors

Change-Id: Iffe26d526439d7f2bb6808528a975ab7374ff1b2
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

8 files changed, 96 insertions, 19 deletions

diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 9c5ba92..2f53391 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -1,10 +1,9 @@
 button, .button, input[type="submit"], .submit {
-  font-weight: bold;
   font-size: 1em;
-  @include fontFamily;
+  @include fontFamilyBold;
   text-transform: none;
   border-radius: 3px;
-  padding: .8rem 3.5rem .5rem;
+  padding: .5rem 2rem .5rem;
   height: auto;
   border: 0;
   overflow: hidden;
@@ -28,7 +27,7 @@ button, .button, input[type="submit"], .submit {
 input[type="submit"] {
   color: $primebtn__text;
   background: $primebtn__bg;
-  min-height: 50px;
+  min-height: 40px;
   &:hover {
     background: lighten($primebtn__bg, 8%);
     @include fastTransition-all;
@@ -58,7 +57,7 @@ input[type="submit"] {
   color: $secbtn__text;
   background: transparent;
   border: 2px solid $secbtn__border;
-  min-height: 50px;
+  min-height: 40px;
   &:hover {
     background: $lightbg__accent;
     cursor: pointer;
@@ -90,3 +89,34 @@ input[type="submit"] {
     margin-top: -3px;
   }
 }
+
+.btn-pop-out {
+  position: relative;
+  padding: 0 0 1em 2em;
+  color: $black;
+  &:hover {
+    text-decoration: underline;
+  }
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 3px;
+    width: 25px;
+    height: 20px;
+    display: inline-block;
+    border: 1px solid $black;
+    border-top: 4px solid $black;
+  }
+  &:after {
+    content: '\2794';
+    position: absolute;
+    transform: rotate(-45deg);
+    font-size: .9em;
+    font-weight: 700;
+    vertical-align: middle;
+    display: inline-block;
+    left: 11px;
+    top: 4px;
+  }
+}
\ No newline at end of file
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 76f65a9..a5a9d1b 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -3,11 +3,13 @@ $white: #ffffff;
 $black: #333;
 $darkgrey: #666;
 $medgrey: #d7dbe0;
-$lightgrey: #ccc;
+$lightgrey: #f5f7fa;
 $lightblue: #f0f2f5;
+$medblue: #3f71ec;
 $purple: #5A3EC8;
 $darkpurple: #20214f;
-$field__disabled: #d8d8d8;
+$field__disabled: #e6e6e6;
+$field__focus: #3C6DEF;
 $btn__disabled-txt: #a6a5a6;
 $btn__disabled-bg: #d8d8d8;
 
@@ -69,7 +71,7 @@ $not-present: $medium-lightbg;
 // Links
 $links: #648FFF;
 $links__hover: $lightbg__primary;
-$links__visited: $darkbg__primary;
+$links__visited: #8ea7ea;
 $links__disabled: rgba(27, 40, 52, 0.70);
 
 // Navigation
diff --git a/app/common/styles/base/core.scss b/app/common/styles/base/core.scss
index 13ba9e6..3dc8fea 100644
--- a/app/common/styles/base/core.scss
+++ b/app/common/styles/base/core.scss
@@ -16,7 +16,7 @@ a {
     color: $links__visited;
   }
   &:hover {
-    color: $links__hover;
+    text-decoration: underline;
   }
   :focus {
     color: $links;
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index b49c5b2..1157fa5 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -19,7 +19,7 @@ input[type='url'],
 input[type='text'],
 textarea {
   border-radius: 0px;
-  border: 1px solid $lightgrey;
+  border: 1px solid $medgrey;
   height: 3.1em;
   margin: 0 0 1em 0;
   background: $white;
@@ -27,17 +27,29 @@ textarea {
   transition: none !important;
   &:focus {
     border-color: $lightbg__accent;
-    border-bottom: 5px solid $lightbg__primary;
+    box-shadow: 0 -5px $field__focus inset;
   }
-  &:disabled, .disabled {
+  &:disabled,
+  .disabled {
     background: $field__disabled;
     border: 1px solid $lightbg__grey;
   }
   &.input__error {
-    border-color: $error-color;
+    box-shadow: 0 -5px $error-color inset;
+    color: $error-color;
+    &:focus {
+      box-shadow: 0 -5px $field__focus inset;
+    }
   }
 }
 
+input[readonly],
+input[readonly]:focus{
+  box-shadow: 0 0 0;
+  background: $field__disabled;
+  border: 1px solid $lightbg__grey;
+}
+
 textarea { padding: .2em;
   height: auto;}
 input[type="submit"], .submit {
diff --git a/app/common/styles/base/foundation.scss b/app/common/styles/base/foundation.scss
index 910be7a..9c31f8f 100644
--- a/app/common/styles/base/foundation.scss
+++ b/app/common/styles/base/foundation.scss
@@ -814,7 +814,7 @@ select[multiple] {
     display: block !important; } }
 
 .row {
-  max-width: 90rem;
+  max-width: 60.38rem; //960px
   margin-right: auto;
   margin-left: auto; }
 .row::before, .row::after {
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index acc8fd4..e29a4fc 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -30,11 +30,39 @@
   font-weight: 200;
 }
 
+@mixin fontFamilyBold {
+  font-family: Helvetica, Arial, Verdana, sans-serif;
+  font-weight: 700;
+}
+
 @mixin fontCourierBold {
   font-family: "Courier New", Helvetica, arial, sans-serif;
   font-weight: 700;
 }
 
+//Navigation icons
+@mixin navIcons {
+  color: $white;
+  fill: $white;
+  max-height: 40px;
+  stroke-width: .5;
+  display: block;
+  width: 40px;
+  margin: 0 auto .5em auto;
+  .st0 {
+    fill: none;
+    stroke: #fff;
+    stroke-width: 2;
+    stroke-miterlimit: 10;
+  }
+  .st1 {
+    fill: none;
+    stroke: #fff;
+    stroke-width: 4;
+    stroke-miterlimit: 10;
+  }
+}
+
 //Transitions mixin
 @mixin fastTransition-all {
   transition: all .5s ease;
@@ -71,6 +99,10 @@
   min-width: calc(100% * (1/2) - 5px);
 }
 
+@mixin vertCenter {
+  top: 50%;
+  transform: translateY(-50%);
+}
 
 @mixin indeterminate-bar {
   background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index dfad5a4..a9b65b2 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -52,4 +52,5 @@ h5, .h5 {
 .courier-bold {
   font-family: "Courier New", Helvetica, arial, sans-serif;
   font-weight: 700;
-}
\ No newline at end of file
+  margin-bottom: 0;
+}
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 5982d0f..80449f5 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -53,19 +53,19 @@
 }
 
 .no-margin {
-  margin: 0px !important;
+  margin: 0 !important;
 }
 
 .no-padding {
-  padding:0px !important;
+  padding:0 !important;
 }
 
 .no-bottom-margin {
-  margin-bottom: 0px !important;
+  margin-bottom: 0 !important;
 }
 
 .no-top-margin {
-  margin-top: 0px !important;
+  margin-top: 0 !important;
 }
 
 .btm-border-grey {