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
 163   .main-menu-button:hover, .main-menu-button:focus {
 164     color: $text-color4;
 165     modal-backdrop.in
 166     .view-inspect-button-icon {
 167       background-image: url($icons-folder-path + '/binocularicon_hover.png');
 168     }
 169
 170     .inventory-button-icon {
 171       background-image: url($icons-folder-path + '/inventoryicon.png');
 172     }
 173
 174     .vnf-search-button-icon {
 175       background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
 176     }
 177   }
 178
 179   .main-menu-button-active {
 180     background-color: $turquoise-blue;
 181     border: none;
 182     color: $text-color3;
 183     font-size: 16px;
 184     line-height: 13px;
 185     width: 100%;
 186     height: 90px;
 187     text-align: center;
 188
 189     .view-inspect-button-icon {
 190       background-image: url($icons-folder-path + '/binocularicon_active.png');
 191     }
 192
 193     .inventory-button-icon {
 194       background-image: url($icons-folder-path + '/inventoryicon.png');
 195     }
 196
 197     .vnf-search-button-icon {
 198       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
 199     }
 200   }
 201
 202   .search-bar {
 203     margin-bottom: 30px;
 204   }
 205 }