2 * ========================LICENSE_START=================================
5 * Copyright (C) 2019 AT&T Intellectual Property and Nokia
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, mat-sidenav-content, mat-sidenav {
51 .side-menu__container {
62 .side-menu__container-active {
66 .side-menu__container::before {
75 background-color: #0c1066;
77 transition: opacity 300ms linear;
81 .side-menu__container-active::before {
86 box-sizing: border-box;
87 transform: translateX(-103%);
95 background-color: white;
96 box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
98 grid-template-columns: 1fr;
99 grid-template-rows: 2fr 4fr 1fr;
101 transition: transform 300ms linear;
102 will-change: transform;
110 background: linear-gradient(to right, #00FF9B, #5f84fb);
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;
117 align-content: center;
119 box-shadow: 0 0.5rem 2rem rgba(0, 0, 255, 0.2);
125 letter-spacing: 0.15rem;
126 text-transform: uppercase;
128 justify-self: center;
142 margin-bottom: 0.5rem;
147 letter-spacing: 0.1rem;
155 .profile-image__container {
157 margin-right: 0.5rem;
163 justify-content: center;
165 background-color: white;
176 background-size:cover;
178 background-image:url('../assets/intelligence.png');
179 background-position:50% 50%;
186 grid-template-columns: 1fr 1fr 0.25fr;
187 grid-template-rows: 1fr;
188 box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
192 transition: background-color 500ms linear;
193 animation: fadein 1s ease-in-out 0ms 1;
197 background-color: #2B244D;
201 .toggle-button__container {
207 .mode-toggle__input {
208 -webkit-appearance: none;
209 -moz-appearance: none;
215 border-radius: 0.5rem;
216 background-color: rgba(0, 0, 0, 0.5);
217 display: inline-block;
218 transition: background-color 300ms linear;
221 .mode-toggle__circle {
224 background-color: #2B244D;
228 box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
229 transition: left 300ms linear;
233 .mode-toggle__circle-checked {
234 background-color: white;
238 .mode-toggle__bg-checked {
239 background-color: #FF0070;
244 text-transform: uppercase;
245 letter-spacing: 0.1rem;
251 grid-template-rows: 1fr;
252 grid-template-columns: 1fr 1fr;
258 grid-template-rows: 1fr;
259 grid-template-columns: 1fr 1fr 1fr;
264 text-transform: uppercase;
265 letter-spacing: 0.1rem;
275 padding: 0.5rem 1.5rem;
293 .hamburger__icon__fill {
297 .hamburger__icon__fill-dark {
307 .main-container__bg {
316 transition: opacity 300ms linear;
319 .main-container__bg-dark {
321 background: linear-gradient(to bottom, #B290FF, #2E1D65);
322 transition: opacity 300ms linear;
331 background: transparent;
332 /* position: absolute;
340 background-color: #2B244D;
344 .main-footer__bg-dark {
346 background: linear-gradient(to bottom, #B290FF, #2E1D65);
347 transition: opacity 300ms linear;
350 @media only screen and (max-width: 300px) {