resources/scss/header/_layout.scss

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