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;
34 mat-sidenav-container,
57 .side-menu__container {
68 .side-menu__container-active {
72 .side-menu__container::before {
81 background-color: #0c1066;
83 transition: opacity 300ms linear;
87 .side-menu__container-active::before {
92 box-sizing: border-box;
93 transform: translateX(-103%);
101 background-color: white;
102 box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
104 grid-template-columns: 1fr;
105 grid-template-rows: 2fr 4fr 1fr;
107 transition: transform 300ms linear;
108 will-change: transform;
115 .menu-header.menu-header__dark {
120 background: linear-gradient(to right, rgb(181, 199, 192), #82bbb6);
122 grid-template-rows: 1fr 4fr;
123 grid-template-columns: 1fr 4fr;
124 grid-template-areas: "greeting greeting""image details";
125 box-sizing: border-box;
127 align-content: center;
129 box-shadow: 0 0.5rem 2rem rgba(0, 0, 255, 0.2);
147 letter-spacing: 0.15rem;
148 text-transform: uppercase;
150 justify-self: center;
164 margin-bottom: 0.5rem;
169 letter-spacing: 0.1rem;
177 .profile-image__container {
179 margin-right: 0.5rem;
185 justify-content: center;
187 background-color: white;
198 background-size: cover;
200 background-image: url('../assets/intelligence.png');
201 background-position: 50% 50%;
208 grid-template-columns: 1fr 1fr 0.25fr;
209 grid-template-rows: 1fr;
210 box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
214 transition: background-color 500ms linear;
215 animation: fadein 1s ease-in-out 0ms 1;
219 background-color: #2B244D;
223 .toggle-button__container {
229 .mode-toggle__input {
230 -webkit-appearance: none;
231 -moz-appearance: none;
237 border-radius: 0.5rem;
238 background-color: rgba(0, 0, 0, 0.5);
239 display: inline-block;
240 transition: background-color 300ms linear;
243 .mode-toggle__circle {
246 background-color: #2B244D;
250 box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
251 transition: left 300ms linear;
255 .mode-toggle__circle-checked {
256 background-color: white;
260 .mode-toggle__bg-checked {
261 background-color: #FF0070;
266 text-transform: uppercase;
267 letter-spacing: 0.1rem;
273 grid-template-rows: 1fr;
274 grid-template-columns: 1fr 1fr;
280 grid-template-rows: 1fr;
281 grid-template-columns: 1fr 1fr 1fr;
286 text-transform: uppercase;
287 letter-spacing: 0.1rem;
297 padding: 0.5rem 1.5rem;
315 .hamburger__icon__fill {
319 .hamburger__icon__fill-dark {
334 .main__container__body {
335 min-height: calc(100vh - 140px);
338 .main-container__bg {
345 transition: opacity 300ms linear;
348 .main-container__bg-dark {
350 background: linear-gradient(to bottom, rgb(62, 59, 68), rgb(11, 10, 15));
351 transition: opacity 300ms linear;
360 background: transparent;
365 background-color: #2B244D;
369 .main-footer__bg-dark {
371 background: rgb(11, 10, 15);
372 transition: opacity 300ms linear;
375 @media only screen and (max-width: 300px) {