resources/scss/header/_layout.scss

   1 /**
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 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 .header {
  22   background-color: $background-header-color1;
  23   //display: flex;
  24   align-items: center;
  25   margin: 0px;
  26   padding: 5px 0px 0px 0px;
  27
  28   .dropdown-toggle {
  29     border: none;
  30     .fa-bars {
  31       font-size: 18px;
  32     }
  33   }
  34
  35   .application-title {
  36     font-size: $heading-font-1;
  37     color: $text-color11;
  38     width: 127px;
  39     margin-right: 20px;
  40     padding: 2px 20px 0 10px;
  41     border-right: solid 1px $border-color5;
  42   }
  43
  44   .data-integrity-search-bar-wrapper {
  45     display: flex;
  46     align-items: center;
  47     .inline-message-alert {
  48       padding: 0;
  49       margin: 0 0 0 10px;
  50       height: 32px;
  51     }
  52   }
  53 }
  54
  55 .secondary-header {
  56   background-color: $background-header-color2;
  57   margin: 0px;
  58   padding: 10px 20px 5px 20px;
  59   border-top: solid 2px $border-color5;
  60   border-bottom: solid 2px $border-color5;
  61   width: 100%;
  62
  63   .secondary-title {
  64     color: $text-color2;
  65     font-size: $heading-font-3;
  66     font-weight: bold;
  67     padding: 5px 20px 0px 0px;
  68     border-right: solid 1px $border-color5;
  69     margin: 0px 25px 0px 0px;
  70   }
  71 }
  72
  73 .toggle-view-button {
  74   color: $text-color11;
  75   background-color: transparent;
  76   font-size: 20px;
  77   padding: 2px 5px;
  78   margin-left: 10px;
  79   border: none;
  80   vertical-align: text-bottom;
  81 }
  82
  83 .toggle-view-button:hover {
  84   color: $text-color3;
  85   outline: none;
  86 }
  87
  88 .toggle-view-button:focus {
  89   color: $primary-background-color;
  90   outline: none;
  91 }
  92
  93 .toggle-view-button-active {
  94   color: $text-color11;
  95   background-color: transparent;
  96   font-size: 20px;
  97   padding: 2px 5px;
  98   margin-left: 10px;
  99   outline: none;
 100   border: none;
 101   vertical-align: text-bottom;
 102 }
 103
 104  .modal {
 105    top: 43px;
 106  }
 107
 108 .modal-backdrop.in{
 109   opacity: 0;
 110 }
 111
 112 .modal-main-menu {
 113   position: absolute;
 114   left: 0px;
 115   width: 250px;
 116   height: 100%;
 117   margin: 0px;
 118   box-shadow: none;
 119
 120   .modal-content {
 121     height: 100%;
 122     box-shadow: none;
 123     background-color: $background-color2;
 124
 125     .modal-body {
 126       margin: 0px;
 127       padding: 0px;
 128     }
 129   }
 130
 131   .button-icon {
 132     margin: 0px auto;
 133     width: 80px;
 134     height: 40px;
 135     background-repeat: no-repeat;
 136     background-position: center;
 137     margin-bottom: 5px;
 138   }
 139
 140   .font-awesome-icon{
 141     font-size: 32px;
 142     margin-top: 5px;
 143   }
 144
 145   .main-menu-button {
 146     background-color: transparent;
 147     border: none;
 148     color: $primary-background-color;
 149     font-size: 16px;
 150     line-height: 13px;
 151     width: 100%;
 152     height: 90px;
 153     text-align: center;
 154
 155     .view-inspect-button-icon {
 156       background-image: url($icons-folder-path + '/binocularicon.png');
 157     }
 158
 159     .inventory-button-icon {
 160       background-image: url($icons-folder-path + '/inventoryicon.png');
 161     }
 162
 163     .vnf-search-button-icon {
 164       background-image: url($icons-folder-path + '/vnfSearchicon.png');
 165     }
 166
 167     .browse-button-icon {
 168       background-image: url($icons-folder-path + '/vnfSearchicon.png');
 169     }
 170
 171     .byoq-ext-button-icon {
 172       background-image: url($icons-folder-path + '/vnfSearchicon.png');
 173     }
 174
 175     .custom-query-button-icon {
 176       background-image: url($icons-folder-path + '/vnfSearchicon.png');
 177     }
 178
 179     .specialized-search-button-icon {
 180       background-image: url($icons-folder-path + '/vnfSearchicon.png');
 181     }
 182
 183     .configurable-view-button-icon {
 184       background-image: url($icons-folder-path + '/reports.svg');
 185       -webkit-filter: brightness(500);
 186       filter: brightness(500);
 187     }
 188   }
 189
 190   .main-menu-button:hover, .main-menu-button:focus {
 191     color: $text-color4;
 192     modal-backdrop.in
 193     .view-inspect-button-icon {
 194       background-image: url($icons-folder-path + '/binocularicon_hover.png');
 195     }
 196
 197     .inventory-button-icon {
 198       background-image: url($icons-folder-path + '/inventoryicon.png');
 199     }
 200
 201     .vnf-search-button-icon {
 202       background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
 203     }
 204
 205     .browse-button-icon {
 206       background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
 207     }
 208
 209     .byoq-ext-button-icon {
 210       background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
 211     }
 212
 213     .custom-query-button-icon {
 214       background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
 215     }
 216
 217     .specialized-search-button-icon {
 218       background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
 219     }
 220
 221     .configurable-view-button-icon {
 222       background-image: url($icons-folder-path + '/reports.svg');
 223       -webkit-filter: brightness(1);
 224       filter: brightness(1);
 225     }
 226   }
 227
 228   .main-menu-button-active {
 229     background-color: $turquoise-blue;
 230     border: none;
 231     color: $text-color3;
 232     font-size: 16px;
 233     line-height: 13px;
 234     width: 100%;
 235     height: 90px;
 236     text-align: center;
 237     padding-top: 5px;
 238
 239     .view-inspect-button-icon {
 240       background-image: url($icons-folder-path + '/binocularicon_active.png');
 241     }
 242
 243     .inventory-button-icon {
 244       background-image: url($icons-folder-path + '/inventoryicon.png');
 245     }
 246
 247     .vnf-search-button-icon {
 248       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
 249     }
 250
 251     .browse-button-icon {
 252       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
 253     }
 254
 255     .byoq-ext-button-icon {
 256       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
 257     }
 258
 259     .custom-query-button-icon {
 260       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
 261     }
 262
 263     .specialized-search-button-icon {
 264       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
 265     }
 266
 267     .configurable-view-button-icon {
 268       background-image: url($icons-folder-path + '/reports.svg');
 269       -webkit-filter: brightness(0.55);
 270       filter: brightness(0.55);
 271     }
 272   }
 273
 274   .search-bar {
 275     margin-bottom: 30px;
 276   }
 277 }