Update pattern to match ANR app by name
[portal/ric-dashboard.git] / webapp-frontend / src / app / app.component.css
1 /*-
2  * ========================LICENSE_START=================================
3  * O-RAN-SC
4  * %%
5  * Copyright (C) 2019 AT&T Intellectual Property and Nokia
6  * %%
7  * Licensed under the Apache License, Version 2.0 (the "License");
8  * you may not use this file except in compliance with the License.
9  * You may obtain a copy of the License at
10  *
11  *      http://www.apache.org/licenses/LICENSE-2.0
12  *
13  * Unless required by applicable law or agreed to in writing, software
14  * distributed under the License is distributed on an "AS IS" BASIS,
15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16  * See the License for the specific language governing permissions and
17  * limitations under the License.
18  * ========================LICENSE_END===================================
19  */
20 .root__container {
21   width: 100vw;
22   height: 100vh;
23   display: grid;
24   grid-template-columns: auto;
25   grid-template-rows: 0.5fr auto;
26   position: relative;
27 }
28
29 /*
30 ================
31     Header
32 ================
33 */
34 mat-sidenav-container, mat-sidenav-content, mat-sidenav {
35     height: 100%;
36 }
37
38 mat-sidenav {
39     width: 250px;
40 }
41
42 main {
43     padding: 10px;
44 }
45
46 /*
47     Slide Menu
48 = = = = = = = = =
49 */
50
51 .side-menu__container {
52   position: fixed;
53   left: 0;
54   top: 0;
55   width: 100%;
56   height: 100%;
57   overflow: hidden;
58   pointer-events: none;
59   z-index: 25;
60 }
61
62 .side-menu__container-active {
63   pointer-events: auto;
64 }
65
66 .side-menu__container::before {
67   content: '';
68   cursor: pointer;
69   position: absolute;
70   display: block;
71   top: 0;
72   left: 0;
73   height: 100%;
74   width: 100%;
75   background-color: #0c1066;
76   opacity: 0;
77   transition: opacity 300ms linear;
78   will-change: opacity;
79 }
80
81 .side-menu__container-active::before {
82   opacity: 0.3;
83 }
84
85 .slide-menu {
86   box-sizing: border-box;
87   transform: translateX(-103%);
88   position: relative;
89   top: 0;
90   left: 0;
91   z-index: 10;
92   height: 100%;
93   width: 90%;
94   max-width: 26rem;
95   background-color: white;
96   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
97   display: grid;
98   grid-template-columns: 1fr;
99   grid-template-rows: 2fr 4fr 1fr;
100   grid-gap: 1rem;
101   transition: transform 300ms linear;
102   will-change: transform;
103 }
104
105 .slide-menu-active {
106   transform: none;
107 }
108
109 .menu-header {
110   background: linear-gradient(to right, #00FF9B, #5f84fb);
111   display: grid;
112   grid-template-rows: 1fr 4fr;
113   grid-template-columns: 1fr 4fr;
114   grid-template-areas: "greeting greeting" "image details";
115   box-sizing: border-box;
116   width: 100%;
117   align-content: center;
118   color: white;
119   box-shadow: 0 0.5rem 2rem rgba(0, 0, 255, 0.2);
120 }
121
122 mat-drawer {
123   width: 340px;
124 }
125
126 mat-drawer-content {
127   overflow: overlay;
128 }
129
130 .menumargin-top {
131     margin-top: 10px;
132 }
133
134 .greeting__text {
135   grid-area: greeting;
136   font-size: 1.25rem;
137   letter-spacing: 0.15rem;
138   text-transform: uppercase;
139   margin-top: 1rem;
140   justify-self: center;
141   align-self: center;
142 }
143
144 .account-details {
145   grid-area: details;
146   display: flex;
147   flex-flow: column;
148   margin-left: 1rem;
149   align-self: center;
150 }
151
152 .name__text {
153   font-size: 1.15rem;
154   margin-bottom: 0.5rem;
155 }
156
157 .email__text {
158   font-size: 0.9rem;
159   letter-spacing: 0.1rem;
160 }
161
162 .menu-body {
163   display: grid;
164   width: 100%;
165 }
166
167 .profile-image__container {
168   grid-area: image;
169   margin-right: 0.5rem;
170   border-radius: 50%;
171   height: 4rem;
172   width: 4rem;
173   overflow: hidden;
174   display: flex;
175   justify-content: center;
176   align-items: center;
177   background-color: white;
178   align-self: center;
179   margin-left: 2rem;
180 }
181
182 .profile__image {
183   max-width: 4rem;
184 }
185
186 .home_bg_image{
187     height:40em;
188     background-size:cover;
189     width:auto;
190     background-image:url('../assets/intelligence.png');
191     background-position:50% 50%;
192 }
193
194 /*Header*/
195 .main__header {
196   width: 100%;
197   display: grid;
198   grid-template-columns: 1fr 1fr 0.25fr;
199   grid-template-rows: 1fr;
200   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
201   height: 4rem;
202   margin: 0;
203   align-items: center;
204   transition: background-color 500ms linear;
205   animation: fadein 1s ease-in-out 0ms 1;
206 }
207
208 .main__header-dark {
209   background-color: #2B244D;
210   color: white;
211 }
212
213 .toggle-button__container {
214   cursor: pointer;
215   position: relative;
216   margin: 0 0.5rem;
217 }
218
219 .mode-toggle__input {
220   -webkit-appearance: none;
221   -moz-appearance: none;
222 }
223
224 .mode-toggle__bg {
225   height: 1rem;
226   width: 2rem;
227   border-radius: 0.5rem;
228   background-color: rgba(0, 0, 0, 0.5);
229   display: inline-block;
230   transition: background-color 300ms linear;
231 }
232
233 .mode-toggle__circle {
234   height: 1.30rem;
235   width: 1.30rem;
236   background-color: #2B244D;
237   position: absolute;
238   top: -0.2rem;
239   border-radius: 50%;
240   box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
241   transition: left 300ms linear;
242   left: 0.1rem;
243 }
244
245 .mode-toggle__circle-checked {
246   background-color: white;
247   left: 1.75rem;
248 }
249
250 .mode-toggle__bg-checked {
251   background-color: #FF0070;
252 }
253
254 .mode-toggle__text {
255   font-size: 0.75rem;
256   text-transform: uppercase;
257   letter-spacing: 0.1rem;
258 }
259
260 /*Content*/
261 .left__section {
262   display: grid;
263   grid-template-rows: 1fr;
264   grid-template-columns: 1fr 1fr;
265   max-width: 5rem;
266 }
267
268 .left__section3Col {
269   display: grid;
270   grid-template-rows: 1fr;
271   grid-template-columns: 1fr 1fr 1fr;
272   max-width: 6rem;
273 }
274
275 .date__text {
276   text-transform: uppercase;
277   letter-spacing: 0.1rem;
278   display: inline;
279   margin: 0.5rem 0;
280 }
281
282 /*SVGs*/
283 .hamburger__icon {
284   position: relative;
285   z-index: 35;
286   height: 2rem;
287   padding: 0.5rem 1.5rem;
288   margin-right: 1rem;
289   cursor: pointer;
290 }
291
292 .logo__icon {
293   height: 2rem;
294   margin-left: 1rem;
295 }
296
297 .logo__text {
298   fill: #2B244D;
299 }
300
301 .logo__text-dark {
302   fill: #ffffff;
303 }
304
305 .hamburger__icon__fill {
306   fill: #2B244D;
307 }
308
309 .hamburger__icon__fill-dark {
310   fill: #ffffff;
311 }
312
313 /*
314 ================
315     Body
316 ================
317 */
318
319 .main__container {
320   height: 100%;
321   width: 100%;
322 }
323
324 .main__container__body {
325   min-height: calc(100vh - 140px);
326 }
327
328 .main-container__bg {
329   position: absolute;
330   top: 0;
331   left: 0;
332   z-index: -2;
333   opacity: 0;
334   background: white;
335   transition: opacity 300ms linear;
336 }
337
338 .main-container__bg-dark {
339   opacity: 1;
340   background: linear-gradient(to bottom, #B290FF, #2E1D65);
341   transition: opacity 300ms linear;
342 }
343
344 /*
345 ================-
346     Footer
347 ================
348 */
349 .main__footer {
350   background: transparent;
351   margin: 10px;
352   z-index: 100;
353   height: 35px;
354 }
355
356 .main__footer-dark {
357   background-color: #2B244D;
358   color: white;
359 }
360
361 .main-footer__bg-dark {
362   opacity: 1;
363   background: linear-gradient(to bottom, #B290FF, #2E1D65);
364   transition: opacity 300ms linear;
365 }
366
367 @media only screen and (max-width: 300px) {
368   .slide-menu {
369     width: 100%;
370   }
371 }