2 * ========================LICENSE_START=================================
5 * Copyright (C) 2019 AT&T Intellectual Property
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
11 * http://www.apache.org/licenses/LICENSE-2.0
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===================================
24 grid-template-columns: auto;
25 grid-template-rows: 0.5fr auto;
30 mat-sidenav-container, mat-sidenav-content, mat-sidenav {
48 .side-menu__container {
59 .side-menu__container-active {
63 .side-menu__container::before {
72 background-color: #0c1066;
74 transition: opacity 300ms linear;
78 .side-menu__container-active::before {
83 box-sizing: border-box;
84 transform: translateX(-103%);
92 background-color: white;
93 box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
95 grid-template-columns: 1fr;
96 grid-template-rows: 2fr 4fr 1fr;
98 transition: transform 300ms linear;
99 will-change: transform;
106 .menu-header.menu-header__dark {
111 background: linear-gradient(to right, #00FF9B, #5f84fb);
113 grid-template-rows: 1fr 4fr;
114 grid-template-columns: 1fr 4fr;
115 grid-template-areas: "greeting greeting" "image details";
116 box-sizing: border-box;
118 align-content: center;
120 box-shadow: 0 0.5rem 2rem rgba(0, 0, 255, 0.2);
138 letter-spacing: 0.15rem;
139 text-transform: uppercase;
141 justify-self: center;
155 margin-bottom: 0.5rem;
160 letter-spacing: 0.1rem;
168 .profile-image__container {
170 margin-right: 0.5rem;
176 justify-content: center;
178 background-color: white;
189 background-size: cover;
191 background-image: url('../assets/intelligence.png');
192 background-position: 50% 50%;
199 grid-template-columns: 1fr 1fr 0.25fr;
200 grid-template-rows: 1fr;
201 box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
205 transition: background-color 500ms linear;
206 animation: fadein 1s ease-in-out 0ms 1;
210 background-color: #2B244D;
214 .toggle-button__container {
220 .mode-toggle__input {
221 -webkit-appearance: none;
222 -moz-appearance: none;
228 border-radius: 0.5rem;
229 background-color: rgba(0, 0, 0, 0.5);
230 display: inline-block;
231 transition: background-color 300ms linear;
234 .mode-toggle__circle {
237 background-color: #2B244D;
241 box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
242 transition: left 300ms linear;
246 .mode-toggle__circle-checked {
247 background-color: white;
251 .mode-toggle__bg-checked {
252 background-color: #FF0070;
257 text-transform: uppercase;
258 letter-spacing: 0.1rem;
264 grid-template-rows: 1fr;
265 grid-template-columns: 1fr 1fr;
271 grid-template-rows: 1fr;
272 grid-template-columns: 1fr 1fr 1fr;
277 text-transform: uppercase;
278 letter-spacing: 0.1rem;
288 padding: 0.5rem 1.5rem;
306 .hamburger__icon__fill {
310 .hamburger__icon__fill-dark {
325 .main__container__body {
326 min-height: calc(100vh - 140px);
329 .main-container__bg {
336 transition: opacity 300ms linear;
339 .main-container__bg-dark {
341 background: linear-gradient(to bottom, #B290FF, #2E1D65);
342 transition: opacity 300ms linear;
347 background: transparent;
352 background-color: #2B244D;
356 .main-footer-licence {
360 .main-footer__bg-dark {
362 background: linear-gradient(to bottom, #B290FF, #2E1D65);
363 transition: opacity 300ms linear;
366 .main-footer-instance {
370 letter-spacing: 0.1rem;
374 .main-footer-instance:hover {
378 @media only screen and (max-width: 300px) {
396 text-decoration: none;
409 display: inline-block;