resources/scss/header/_layout.scss

   1 /**
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  *
  21  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  22  */
  23
  24 .header {
  25   background-color: $background-header-color1;
  26   //display: flex;
  27   align-items: center;
  28   margin: 0px;
  29   padding: 5px 0px 0px 0px;
  30
  31   .dropdown-toggle {
  32     border: none;
  33     .fa-bars {
  34       font-size: 18px;
  35     }
  36   }
  37
  38   .application-title {
  39     font-size: $heading-font-1;
  40     color: $text-color11;
  41     width: 127px;
  42     margin-right: 20px;
  43     padding: 2px 20px 0 10px;
  44     border-right: solid 1px $border-color5;
  45   }
  46
  47   .data-integrity-search-bar-wrapper {
  48     display: flex;
  49     align-items: center;
  50     .inline-message-alert {
  51       padding: 0;
  52       margin: 0 0 0 10px;
  53       height: 32px;
  54     }
  55   }
  56 }
  57
  58 .secondary-header {
  59   background-color: $background-header-color2;
  60   margin: 0px;
  61   padding: 10px 20px 5px 20px;
  62   border-top: solid 2px $border-color5;
  63   border-bottom: solid 2px $border-color5;
  64   width: 100%;
  65
  66   .secondary-title {
  67     color: $text-color2;
  68     font-size: $heading-font-3;
  69     font-weight: bold;
  70     padding: 5px 20px 0px 0px;
  71     border-right: solid 1px $border-color5;
  72     margin: 0px 25px 0px 0px;
  73   }
  74 }
  75
  76 .toggle-view-button {
  77   color: $text-color11;
  78   background-color: transparent;
  79   font-size: 20px;
  80   padding: 2px 5px;
  81   margin-left: 10px;
  82   border: none;
  83   vertical-align: text-bottom;
  84 }
  85
  86 .toggle-view-button:hover {
  87   color: $text-color3;
  88   outline: none;
  89 }
  90
  91 .toggle-view-button:focus {
  92   color: $primary-background-color;
  93   outline: none;
  94 }
  95
  96 .toggle-view-button-active {
  97   color: $text-color11;
  98   background-color: transparent;
  99   font-size: 20px;
 100   padding: 2px 5px;
 101   margin-left: 10px;
 102   outline: none;
 103   border: none;
 104   vertical-align: text-bottom;
 105 }
 106
 107  .modal {
 108    top: 43px;
 109  }
 110
 111 .modal-backdrop.in{
 112   opacity: 0;
 113 }
 114
 115 .modal-main-menu {
 116   position: absolute;
 117   left: 0px;
 118   width: 250px;
 119   height: 100%;
 120   margin: 0px;
 121   box-shadow: none;
 122
 123   .modal-content {
 124     height: 100%;
 125     box-shadow: none;
 126     background-color: $background-color2;
 127
 128     .modal-body {
 129       margin: 0px;
 130       padding: 0px;
 131     }
 132   }
 133
 134   .button-icon {
 135     margin: 0px auto;
 136     width: 80px;
 137     height: 40px;
 138     background-repeat: no-repeat;
 139     background-position: center;
 140     margin-bottom: 5px;
 141   }
 142
 143   .main-menu-button {
 144     background-color: transparent;
 145     border: none;
 146     color: $primary-background-color;
 147     font-size: 16px;
 148     line-height: 13px;
 149     width: 100%;
 150     height: 90px;
 151     text-align: center;
 152
 153     .view-inspect-button-icon {
 154       background-image: url($icons-folder-path + '/binocularicon.png');
 155     }
 156
 157     .inventory-button-icon {
 158       background-image: url($icons-folder-path + '/inventoryicon.png');
 159     }
 160
 161     .vnf-search-button-icon {
 162       background-image: url($icons-folder-path + '/vnfSearchicon.png');
 163     }
 164   }
 165
 166   .main-menu-button:hover, .main-menu-button:focus {
 167     color: $text-color4;
 168     modal-backdrop.in
 169     .view-inspect-button-icon {
 170       background-image: url($icons-folder-path + '/binocularicon_hover.png');
 171     }
 172
 173     .inventory-button-icon {
 174       background-image: url($icons-folder-path + '/inventoryicon.png');
 175     }
 176
 177     .vnf-search-button-icon {
 178       background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
 179     }
 180   }
 181
 182   .main-menu-button-active {
 183     background-color: $turquoise-blue;
 184     border: none;
 185     color: $text-color3;
 186     font-size: 16px;
 187     line-height: 13px;
 188     width: 100%;
 189     height: 90px;
 190     text-align: center;
 191
 192     .view-inspect-button-icon {
 193       background-image: url($icons-folder-path + '/binocularicon_active.png');
 194     }
 195
 196     .inventory-button-icon {
 197       background-image: url($icons-folder-path + '/inventoryicon.png');
 198     }
 199
 200     .vnf-search-button-icon {
 201       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
 202     }
 203   }
 204
 205   .search-bar {
 206     margin-bottom: 30px;
 207   }
 208 }