blob: ddefe09031dd548e057b255c0434c4dadfab8a42 [file] [log] [blame]
/*-
* ========================LICENSE_START=================================
* O-RAN-SC
* %%
* Copyright (C) 2019 AT&T Intellectual Property
* %%
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================LICENSE_END===================================
*/
.root__container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: auto;
grid-template-rows: 0.5fr auto;
position: relative;
}
/*
================
Header
================
*/
mat-sidenav-container,
mat-sidenav-content,
mat-sidenav {
height: 100%;
}
mat-sidenav {
width: 250px;
}
main {
padding: 10px;
}
/*
Slide Menu
= = = = = = = = =
*/
.side-menu__dark {
color: white;
background: gray;
}
.side-menu__container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 25;
}
.side-menu__container-active {
pointer-events: auto;
}
.side-menu__container::before {
content: '';
cursor: pointer;
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #0c1066;
opacity: 0;
transition: opacity 300ms linear;
will-change: opacity;
}
.side-menu__container-active::before {
opacity: 0.3;
}
.slide-menu {
box-sizing: border-box;
transform: translateX(-103%);
position: relative;
top: 0;
left: 0;
z-index: 10;
height: 100%;
width: 90%;
max-width: 26rem;
background-color: white;
box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr 4fr 1fr;
grid-gap: 1rem;
transition: transform 300ms linear;
will-change: transform;
}
.slide-menu-active {
transform: none;
}
.menu-header.menu-header__dark {
background: #2B244D;
}
.menu-header {
background: linear-gradient(to right, rgb(181, 199, 192), #82bbb6);
display: grid;
grid-template-rows: 1fr 4fr;
grid-template-columns: 1fr 4fr;
grid-template-areas: "greeting greeting""image details";
box-sizing: border-box;
width: 100%;
align-content: center;
color: white;
box-shadow: 0 0.5rem 2rem rgba(0, 0, 255, 0.2);
}
mat-drawer {
width: 340px;
}
mat-drawer-content {
overflow: overlay;
}
.menumargin-top {
margin-top: 10px;
}
.greeting__text {
grid-area: greeting;
font-size: 1.25rem;
letter-spacing: 0.15rem;
text-transform: uppercase;
margin-top: 1rem;
justify-self: center;
align-self: center;
}
.account-details {
grid-area: details;
display: flex;
flex-flow: column;
margin-left: 1rem;
align-self: center;
}
.name__text {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.email__text {
font-size: 0.9rem;
letter-spacing: 0.1rem;
}
.menu-body {
display: grid;
width: 100%;
}
.profile-image__container {
grid-area: image;
margin-right: 0.5rem;
border-radius: 50%;
height: 4rem;
width: 4rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
align-self: center;
margin-left: 2rem;
}
.profile__image {
max-width: 4rem;
}
.home_bg_image {
height: 40em;
background-size: cover;
width: auto;
background-image: url('../assets/intelligence.png');
background-position: 50% 50%;
}
/*Header*/
.main__header {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 0.25fr;
grid-template-rows: 1fr;
box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
height: 4rem;
margin: 0;
align-items: center;
transition: background-color 500ms linear;
animation: fadein 1s ease-in-out 0ms 1;
}
.main__header-dark {
background-color: #2B244D;
color: white;
}
.toggle-button__container {
cursor: pointer;
position: relative;
margin: 0 0.5rem;
}
.mode-toggle__input {
-webkit-appearance: none;
-moz-appearance: none;
}
.mode-toggle__bg {
height: 1rem;
width: 2rem;
border-radius: 0.5rem;
background-color: rgba(0, 0, 0, 0.5);
display: inline-block;
transition: background-color 300ms linear;
}
.mode-toggle__circle {
height: 1.30rem;
width: 1.30rem;
background-color: #2B244D;
position: absolute;
top: -0.2rem;
border-radius: 50%;
box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
transition: left 300ms linear;
left: 0.1rem;
}
.mode-toggle__circle-checked {
background-color: white;
left: 1.75rem;
}
.mode-toggle__bg-checked {
background-color: #FF0070;
}
.mode-toggle__text {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
}
/*Content*/
.left__section {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
max-width: 5rem;
}
.left__section3Col {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
max-width: 6rem;
}
.date__text {
text-transform: uppercase;
letter-spacing: 0.1rem;
display: inline;
margin: 0.5rem 0;
}
/*SVGs*/
.hamburger__icon {
position: relative;
z-index: 35;
height: 2rem;
padding: 0.5rem 1.5rem;
margin-right: 1rem;
cursor: pointer;
}
.logo__icon {
height: 2rem;
margin-left: 1rem;
}
.logo__text {
fill: #2B244D;
}
.logo__text-dark {
fill: #ffffff;
}
.hamburger__icon__fill {
fill: #2B244D;
}
.hamburger__icon__fill-dark {
fill: #ffffff;
}
/*
================
Body
================
*/
.main__container {
height: 100%;
width: 100%;
}
.main__container__body {
min-height: calc(100vh - 140px);
}
.main-container__bg {
position: absolute;
top: 0;
left: 0;
z-index: -2;
opacity: 0;
background: white;
transition: opacity 300ms linear;
}
.main-container__bg-dark {
opacity: 1;
background: linear-gradient(to bottom, rgb(62, 59, 68), rgb(11, 10, 15));
transition: opacity 300ms linear;
}
/*
================-
Footer
================
*/
.main__footer {
background: transparent;
z-index: 100;
}
.main__footer-dark {
background-color: #2B244D;
color: white;
}
.main-footer__bg-dark {
opacity: 1;
background: rgb(11, 10, 15);
transition: opacity 300ms linear;
}
@media only screen and (max-width: 300px) {
.slide-menu {
width: 100%;
}
}