e641f4bc3ad1581df9aec0b959f3119464fa2626
[aai/sparky-fe.git] / 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 }

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use