X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=resources%2Fscss%2Fheader%2F_layout.scss;h=2d63f003e44cb69fb19780ac135638376f94b81f;hb=HEAD;hp=e641f4bc3ad1581df9aec0b959f3119464fa2626;hpb=c1917730a648ddbb6cd51307cea9464a697700d8;p=aai%2Fsparky-fe.git

diff --git a/resources/scss/header/_layout.scss b/resources/scss/header/_layout.scss
index e641f4b..2d63f00 100644
--- a/resources/scss/header/_layout.scss
+++ b/resources/scss/header/_layout.scss
@@ -2,8 +2,8 @@
  * ============LICENSE_START=======================================================
  * org.onap.aai
  * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
+ * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2017-2018 Amdocs
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,18 +17,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
 .header {
-  padding: 0px;
-  background-color: $blue;
+  background-color: $background-header-color1;
   //display: flex;
   align-items: center;
   margin: 0px;
-  padding: 5px 5px 1px 5px;
+  padding: 5px 0px 0px 0px;
 
   .dropdown-toggle {
     border: none;
@@ -39,57 +34,75 @@
 
   .application-title {
     font-size: $heading-font-1;
-    color: $white;
+    color: $text-color11;
     width: 127px;
-    height: 45px;
     margin-right: 20px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    padding: 2px 20px 0 20px;
-    border-right: solid 1px $light-gray;
+    padding: 2px 20px 0 10px;
+    border-right: solid 1px $border-color5;
+  }
+
+  .data-integrity-search-bar-wrapper {
+    display: flex;
+    align-items: center;
+    .inline-message-alert {
+      padding: 0;
+      margin: 0 0 0 10px;
+      height: 32px;
+    }
   }
 }
 
 .secondary-header {
-  background-color: $tlv-light-gray;
+  background-color: $background-header-color2;
   margin: 0px;
   padding: 10px 20px 5px 20px;
-  border-top: solid 2px $light-gray;
-  border-bottom: solid 2px $light-gray;
+  border-top: solid 2px $border-color5;
+  border-bottom: solid 2px $border-color5;
+  width: 100%;
 
   .secondary-title {
-    color: $black;
-    font-size: $heading-font-2;
+    color: $text-color2;
+    font-size: $heading-font-3;
+    font-weight: bold;
     padding: 5px 20px 0px 0px;
-    border-right: solid 1px $light-gray;
+    border-right: solid 1px $border-color5;
     margin: 0px 25px 0px 0px;
   }
 }
 
 .toggle-view-button {
-  color: $white;
+  color: $text-color11;
   background-color: transparent;
   font-size: 20px;
-  padding: 10px 15px;
+  padding: 2px 5px;
+  margin-left: 10px;
   border: none;
   vertical-align: text-bottom;
 }
 
-.toggle-view-button:hover, .toggle-view-button:focus {
-  color: #3C4143;
+.toggle-view-button:hover {
+  color: $text-color3;
+  outline: none;
+}
+
+.toggle-view-button:focus {
+  color: $primary-background-color;
+  outline: none;
 }
 
 .toggle-view-button-active {
-  color: $blue;
-  background-color: $white;
+  color: $text-color11;
+  background-color: transparent;
   font-size: 20px;
-  padding: 10px 15px;
+  padding: 2px 5px;
+  margin-left: 10px;
+  outline: none;
   border: none;
   vertical-align: text-bottom;
 }
 
  .modal {
-   top: 56px;
+   top: 43px;
  }
 
 .modal-backdrop.in{
@@ -107,7 +120,7 @@
   .modal-content {
     height: 100%;
     box-shadow: none;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: $background-color2;
 
     .modal-body {
       margin: 0px;
@@ -124,10 +137,15 @@
     margin-bottom: 5px;
   }
 
+  .font-awesome-icon{
+    font-size: 32px;
+    margin-top: 5px;
+  }
+
   .main-menu-button {
     background-color: transparent;
     border: none;
-    color: #F8F8F8;
+    color: $primary-background-color;
     font-size: 16px;
     line-height: 13px;
     width: 100%;
@@ -145,10 +163,32 @@
     .vnf-search-button-icon {
       background-image: url($icons-folder-path + '/vnfSearchicon.png');
     }
+
+    .browse-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon.png');
+    }
+
+    .byoq-ext-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon.png');
+    }
+
+    .custom-query-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon.png');
+    }
+
+    .specialized-search-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon.png');
+    }
+
+    .configurable-view-button-icon {
+      background-image: url($icons-folder-path + '/reports.svg');
+      -webkit-filter: brightness(500);
+      filter: brightness(500);
+    }
   }
 
   .main-menu-button:hover, .main-menu-button:focus {
-    color: $blue;
+    color: $text-color4;
     modal-backdrop.in
     .view-inspect-button-icon {
       background-image: url($icons-folder-path + '/binocularicon_hover.png');
@@ -161,17 +201,40 @@
     .vnf-search-button-icon {
       background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
     }
+
+    .browse-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
+    }
+
+    .byoq-ext-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
+    }
+
+    .custom-query-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
+    }
+
+    .specialized-search-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
+    }
+
+    .configurable-view-button-icon {
+      background-image: url($icons-folder-path + '/reports.svg');
+      -webkit-filter: brightness(1);
+      filter: brightness(1);
+    }
   }
 
   .main-menu-button-active {
-    background-color: $blue;
+    background-color: $turquoise-blue;
     border: none;
-    color: #3C4143;
+    color: $text-color3;
     font-size: 16px;
     line-height: 13px;
     width: 100%;
     height: 90px;
     text-align: center;
+    padding-top: 5px;
 
     .view-inspect-button-icon {
       background-image: url($icons-folder-path + '/binocularicon_active.png');
@@ -184,6 +247,28 @@
     .vnf-search-button-icon {
       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
     }
+
+    .browse-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
+    }
+
+    .byoq-ext-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
+    }
+
+    .custom-query-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
+    }
+
+    .specialized-search-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
+    }
+
+    .configurable-view-button-icon {
+      background-image: url($icons-folder-path + '/reports.svg');
+      -webkit-filter: brightness(0.55);
+      filter: brightness(0.55);
+    }
   }
 
   .search-bar {