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
  25 .header {
  26   padding: 0px;
  27   background-color: $blue;
  28   //display: flex;
  29   align-items: center;
  30   margin: 0px;
  31   padding: 5px 5px 1px 5px;
  32
  33   .dropdown-toggle {
  34     border: none;
  35     .fa-bars {
  36       font-size: 18px;
  37     }
  38   }
  39
  40   .application-title {
  41     font-size: $heading-font-1;
  42     color: $white;
  43     width: 127px;
  44     height: 45px;
  45     margin-right: 20px;
  46     margin-top: 5px;
  47     margin-bottom: 5px;
  48     padding: 2px 20px 0 20px;
  49     border-right: solid 1px $light-gray;
  50   }
  51 }
  52
  53 .secondary-header {
  54   background-color: $tlv-light-gray;
  55   margin: 0px;
  56   padding: 10px 20px 5px 20px;
  57   border-top: solid 2px $light-gray;
  58   border-bottom: solid 2px $light-gray;
  59
  60   .secondary-title {
  61     color: $black;
  62     font-size: $heading-font-2;
  63     padding: 5px 20px 0px 0px;
  64     border-right: solid 1px $light-gray;
  65     margin: 0px 25px 0px 0px;
  66   }
  67 }
  68
  69 .toggle-view-button {
  70   color: $white;
  71   background-color: transparent;
  72   font-size: 20px;
  73   padding: 10px 15px;
  74   border: none;
  75   vertical-align: text-bottom;
  76 }
  77
  78 .toggle-view-button:hover, .toggle-view-button:focus {
  79   color: #3C4143;
  80 }
  81
  82 .toggle-view-button-active {
  83   color: $blue;
  84   background-color: $white;
  85   font-size: 20px;
  86   padding: 10px 15px;
  87   border: none;
  88   vertical-align: text-bottom;
  89 }
  90
  91  .modal {
  92    top: 56px;
  93  }
  94
  95 .modal-backdrop.in{
  96   opacity: 0;
  97 }
  98
  99 .modal-main-menu {
 100   position: absolute;
 101   left: 0px;
 102   width: 250px;
 103   height: 100%;
 104   margin: 0px;
 105   box-shadow: none;
 106
 107   .modal-content {
 108     height: 100%;
 109     box-shadow: none;
 110     background-color: rgba(0, 0, 0, 0.7);
 111
 112     .modal-body {
 113       margin: 0px;
 114       padding: 0px;
 115     }
 116   }
 117
 118   .button-icon {
 119     margin: 0px auto;
 120     width: 80px;
 121     height: 40px;
 122     background-repeat: no-repeat;
 123     background-position: center;
 124     margin-bottom: 5px;
 125   }
 126
 127   .main-menu-button {
 128     background-color: transparent;
 129     border: none;
 130     color: #F8F8F8;
 131     font-size: 16px;
 132     line-height: 13px;
 133     width: 100%;
 134     height: 90px;
 135     text-align: center;
 136
 137     .view-inspect-button-icon {
 138       background-image: url($icons-folder-path + '/binocularicon.png');
 139     }
 140
 141     .inventory-button-icon {
 142       background-image: url($icons-folder-path + '/inventoryicon.png');
 143     }
 144
 145     .vnf-search-button-icon {
 146       background-image: url($icons-folder-path + '/vnfSearchicon.png');
 147     }
 148   }
 149
 150   .main-menu-button:hover, .main-menu-button:focus {
 151     color: $blue;
 152     modal-backdrop.in
 153     .view-inspect-button-icon {
 154       background-image: url($icons-folder-path + '/binocularicon_hover.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_hover.png');
 163     }
 164   }
 165
 166   .main-menu-button-active {
 167     background-color: $blue;
 168     border: none;
 169     color: #3C4143;
 170     font-size: 16px;
 171     line-height: 13px;
 172     width: 100%;
 173     height: 90px;
 174     text-align: center;
 175
 176     .view-inspect-button-icon {
 177       background-image: url($icons-folder-path + '/binocularicon_active.png');
 178     }
 179
 180     .inventory-button-icon {
 181       background-image: url($icons-folder-path + '/inventoryicon.png');
 182     }
 183
 184     .vnf-search-button-icon {
 185       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
 186     }
 187   }
 188
 189   .search-bar {
 190     margin-bottom: 30px;
 191   }
 192 }