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   .main-menu-button {
 141     background-color: transparent;
 142     border: none;
 143     color: $primary-background-color;
 144     font-size: 16px;
 145     line-height: 13px;
 146     width: 100%;
 147     height: 90px;
 148     text-align: center;
 149
 150     .view-inspect-button-icon {
 151       background-image: url($icons-folder-path + '/binocularicon.png');
 152     }
 153
 154     .inventory-button-icon {
 155       background-image: url($icons-folder-path + '/inventoryicon.png');
 156     }
 157
 158     .vnf-search-button-icon {
 159       background-image: url($icons-folder-path + '/vnfSearchicon.png');
 160     }
 161
 162     .configurable-view-button-icon {
 163       background-image: url($icons-folder-path + '/reports.svg');
 164       -webkit-filter: brightness(500);
 165       filter: brightness(500);
 166     }
 167   }
 168
 169   .main-menu-button:hover, .main-menu-button:focus {
 170     color: $text-color4;
 171     modal-backdrop.in
 172     .view-inspect-button-icon {
 173       background-image: url($icons-folder-path + '/binocularicon_hover.png');
 174     }
 175
 176     .inventory-button-icon {
 177       background-image: url($icons-folder-path + '/inventoryicon.png');
 178     }
 179
 180     .vnf-search-button-icon {
 181       background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
 182     }
 183
 184     .configurable-view-button-icon {
 185       background-image: url($icons-folder-path + '/reports.svg');
 186       -webkit-filter: brightness(1);
 187       filter: brightness(1);
 188     }
 189   }
 190
 191   .main-menu-button-active {
 192     background-color: $turquoise-blue;
 193     border: none;
 194     color: $text-color3;
 195     font-size: 16px;
 196     line-height: 13px;
 197     width: 100%;
 198     height: 90px;
 199     text-align: center;
 200     padding-top: 5px;
 201
 202     .view-inspect-button-icon {
 203       background-image: url($icons-folder-path + '/binocularicon_active.png');
 204     }
 205
 206     .inventory-button-icon {
 207       background-image: url($icons-folder-path + '/inventoryicon.png');
 208     }
 209
 210     .vnf-search-button-icon {
 211       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
 212     }
 213
 214     .configurable-view-button-icon {
 215       background-image: url($icons-folder-path + '/reports.svg');
 216       -webkit-filter: brightness(0.55);
 217       filter: brightness(0.55);
 218     }
 219   }
 220
 221   .search-bar {
 222     margin-bottom: 30px;
 223   }
 224 }